الإطارات في لغة html الدرس |14| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الثلاثاء، 25 فبراير 2020

الإطارات في لغة html الدرس |14|

الإطارات

هل سبق لك أن زرت احدى الصفحات لتشاهد أنها مقسمة إلى مجموعة من الأقسام بحيث يظهر في كل منها صفحة مستقلة وتبدو بصورة منفصلة عن الأقسام الاخرى؟
و ربما تكون قد قمت بالنقر على احد الوصلات (الروابط) الموجودة في احد الأقسام لتظهر الصفحة المتعلقة بها في قسم آخر, إذا كنت شاهدت مثل هذه الصفحات فهذا يعني أن الإطارات مألوفة لديك.

دعني اُخبرك بها يمكن ان تتكون الإطارات من ثلاث اقسام او اكثر او اقل دون حديث كتير, هيا بنا نقوم بإنشاء امثلة وكما تعرف التكرار يعلم الشخص الذي لا يريد التعلم, لكن في البداية يجب عليك تحضير ثلاث او اربع ملفات بسيطة في سطح المكتب لكي نستخدمها في تطبيق الأمثلة القادمة, قمنا بإنشاء ثلاث ملفات بإسم
kaissar.html,||| kaissar1.html,||| kaissar2.html 

في مجلد علي سطح المكتب بالشكل

ستكون بين تلك الملفات ملف رئيسي الذي سيظم كافة الإطارات و الملفات, وهو بالمناسبة ملف ذو حالة خاصة حيث نقوم باستخدام الوسم FRAMESET بدل body وبذلك الشكل سيكون هو جسم الصفحة ويمكن كتابة اي وسوم اخرى مثل ادراج الجداول و الصور ...الخ, وسيكون الملف الرئيسي بهذا الشكل من الداخل.


الخصائص المتعلقة بذلك الوسم

cols

تُعرِّف هذه الخاصية عدد احجام الاطارات العمودية للصفحة وتحدد الاحجام بطريقتين, الطريقة المباشرة و الطريقة النسبية, او الأثنان معاً و الشكل الرئيسي لها بالشكل
<frameset cols="60%,40%"></frameset>
لقد قمنا بإنشاء اثنين من الإطارات, الإطار الأول يحتوي على 60% من مساحة الصفحة و الآخر 40% لكن بشكل عمودي لأننا استخدمنا cols وهذا الخاصية تحدد الإطارات عمودية.

مثال
<frameset cols="40%,30%,30%"></frameset>
في المثال السابق قمنا بإنشاء ثلاث اطارات حيث يحتوي الإطار الأول من حجم الصفحة 40% و الإثنين الباقيات كلاً منهم 30% ويمكن تحديد حجم الإطار داخل الصفحة بالبكسل بدل النسبة المئوية.

rows

هذه الخاصية عكس الخاصية السابقة, إذا كانت cols تحدد حجم الإطار عمودية فإن rows تحدد الإطار بشكل افقي الصفوف داخل الصفحة, وذلك بنفس الأسلوب المتبع مع الأعمدة ويمكن تحديد حجم الإطار عن طريق البكسل أو النسبة المئوية, و الصورة العامة لها بالشكل
<frameset rows="60%,40%"></frameset>
قمنا بتحديد اطارين افقيين ارتفاع الأول 60 و الثاني 40

مثال
<frameset rows="60%,20%,20%"></frameset>
تحدد ثلاث اطارات افقية, بإرتفاع الأول 60% والثاني 20% والثالث 20% وكما يمكن تحديد عدد الاطارات الذي تريده اذا كانت افقية او عمودية, هناك مجموعة من الخصائص المتعلقة بذلك الوسم.

frame

هذا الوسم مرتبط ارتباطاً وثيقاً بالوسوم السابقة وخصائصها المذكورة اعلاه, الآن ما هو عمل هذا الوسم؟ سأُخبرك الآن! كل ما قمنا به الى الآن هو تعريف مجموعة من الإطارات, لكن لم نحدد ما هي هذه الإطارات ولا محتوياتها ولا مصادرها, تماماً كما نقوم بتعريف صفحات الويب الإعتيادية وخصائصها في الوسم body, دون أن يعني ذلك تحديد محتويات هذه الصفحات فإذا اردنا فيما بعد ادراج صورة مثلاً نستخدم الوسم الخاص بإدراج الصور وهو
<img src="kaissar.jpg">
في حالة الإطارات فإننا نستخدم الوسم frame وهو وسم منفرد (سنجل) مثل الوسم الخاص بإدراج الصور, ثم بعد ذلك تقوم بتحديد مصدر وخصائص كل ملف نريد اظهاره داخل احد الاطارات ويتم استخدام هذا الوسم عدة مرات بنفس عدد الاطارات المذكورة داخل الوسم الرئيسي لإدراج الإطارات وهو frameset وسوف نقوم مباشرتاً بإستخدام الخاصية src الذي تقوم بتحديد مسار الملف او مصدر الملف.

مثال 


في ذلك المثال قمنا بجلب الملف الأول الذي قمنا بإنشاءه اول المقال باسم kaissar1.html من خلال الخاصية src الذي تحدد مسار الملف داخلها و الأكود الموجودة داخل الملف الفرعي الذي هو kaissar1.html بذلك الشكل.


وسيكون الناتج داخل المتصفح بالشكل


الآن سنقوم بجلب الملف الآخر الذي هو kaissar2.html بنفس الطريقة وسيكون السورس كود داخل الملف الرئيسي بذلك الشكل


وسيكون الناتج في المتصفح بذالك الشكل


وكما يمكن اضافة جداول وصور ......الخ, داخل الملفات الفرعية. 

مثال


في المثال السابق قمنا بإنشاء ثلاث اطارات, الإطار الأول يحتوي على مساحة من الصفحة 200px و الثاني 400px و الثالث يأخذ باقي الصفحة من خلال تلك العلامة, وقمنا بجلب ثلاث ملفات داخل الاطارات وهذا يعني ان كل اطار سيكون داخله ملف وسيكون في المتصفح بذلك الشكل


مثال


في ذلك المثال قمنا بتحديد الخاصية rows بدل cols ولا يختلف الحديث عن الأمثلة السابقة وسيكون المثال في المتصفح بذلك الشكل

بالإضافة الى ما ذكر نستطيع ادراج الصور بشكل مباشر داخل الملف الرئيسي.

مثال


وسيكون الناتج في المتصفح بذلك الشكل


مثال


وسيكون الناتج في المتصفح بالشكل 

بما ان الصفحة تحتوي على صفين نقوم بتعريفهما اولاً حسب الإرتفاعات المرغوب بها, دعنا نعقد الامور اكثر, سنقوم بتقسيم الصف الثاني الى عمودين, وهنا يعتبر بمفهوم لغة html وكأنه صفحة اطارات جديدة لذلك لا نحتاج لتعريفه كصف وبدلاً من ذلك نعاود استخدام تعريف الصفحات frameset مره اخرى.

وسيكون السورس كود بذلك الشكل مع إضافة وسم ادراج الإطارات مرة اخرى داخل الوسم الأول 

وبما اننا نريد الصف الثاني او الإطار الثاني مقسم الى عمودين اذاً بقي علينا اضافة تعريف لهذه الأعمدة وبذلك تكون الشيفرة بذلك الشكل


وسيكون الناتج في المتصفح بذلك الشكل

مثال


في المثال السابق قمنا بإنشاء ثلاث اعمدة طبعاً يمكن اختيار الأحجام, لا اهمية للأحجام المذكورة فأنا اخترتها حسب رغبتي, تسطتيع انت اختيار الأحجام الذي تريدها وسيكون الناتج في المتصفح بالشكل


دعونا الآن نقوم بتقسيم العمود الأوسط الى صفين اذاً نستبدل تعريفه بتعريف آخر لصفحة مكونة من صفين وسيكون السورس كود بذلك الشكل


وسيكون الناتج في المتصفح بذلك الشكل


إختبار للجميع

قم بإنشاء ثلاث اطارات ويكون الأوسط صف و الآخرين اعمدة وقم ايضاًً بكتابة اكواد html الذي تعرفنا عليها في الدروس السابقة في الملفات الفرعية يكون في العمود الأيمن تعريف عن صاحب السورس كود + صور له و العمود الأيسر نص بسيط لما تعرفه عن html, الصف الأوسط صورة بحجم صغير على اليمن و لوغو على اليسار, بالتوفيق للجميع.

للإجابة عن الاختبار في المجموعه في تلجرام او في التعليقات اسفل المنشور.

https://t.me/Programmer_Tech

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام