تكنولوجيا المعلومات والاتصالات (بالعربية) الصف الثاني الإعدادي، الأسبوع 10: صناديق داخل الصفحة: الحاوية والترويسة والقسم والتذييل

مشروعي الرقمي (١): الملفات وHTML

الأسبوع 10 · الدرس ٣ «مشروعي الرقمي لمدرستي» (١): مجلد المشروع وكود HTML للصفحتين وشرحه · 3 دروس

صناديق داخل الصفحة: الحاوية والترويسة والقسم والتذييل

ICT Prep 2 Term 1, Unit 2, Lesson 3: pp. 68–74

الهدفأقرأ الصناديق داخل الصفحة: الحاوية والترويسة والقسم والتذييل.

كلمات جديدة

الحاوية (div) · صندوق يضمّ أجزاء أخرى وغالبًا يُعطى اسم فئةالترويسة والتذييل · الجزء العلوي فيه العنوان الرئيسي والجزء السفلي فيه سطر ختاميالقسم · جزء من الصفحة عن فكرة واحدة وله عنوان فرعي (h2)الفئة (class) · اسم يُعطى لعنصر ليتمكن CSS من تنسيقه

الشرح

داخل body تُبنى الصفحة من صناديق. الحاوية، وتُكتب بالوسم div وتُعطى اسم فئة مثل container، تضمّ كل شيء. وداخلها تضمّ الترويسة (header) العنوان الرئيسي h1. وكل قسم (section) عن فكرة واحدة ويبدأ بعنوان فرعي h2 تتبعه فقرات. والتذييل (footer) هو الصندوق الأخير ويضمّ سطرًا ختاميًّا. ولكل صندوق وسمه الختامي، وتجلس الصناديق داخل صناديق أكبر كصناديق في درج. واسم الفئة مهم لأن ملف التنسيق سيستخدمه ليقول مثلًا ما عرض الحاوية. وفي الأسبوع القادم يعطي CSS الصناديق مظهرها.

	A
1	container (الحاوية)
2	header: العنوان الرئيسي h1
3	section: h2 + فقرة
4	footer: سطر ختامي

أمثلة محلولة

Html

1<div class="container">
2  <header>
3    <h1>نادي الروبوتات (مثال)</h1>
4  </header>
5  <section>
6    <h2>ماذا نفعل</h2>
7    <p>نبني روبوتات صغيرة.</p>
8  </section>
9  <footer>
10    <p>صفحة نادٍ من الخيال.</p>
11  </footer>
12</div>

هذا كود الصفحة الأولى بمحتوى جديد مخترَع. تضمّ الحاوية ترويسة فيها اسم النادي وقسمًا واحدًا عنوانه «ماذا نفعل» وتذييلًا. ولا يظهر عنوان ولا هاتف ولا صورة.

الحاوية نفسها→الصناديق نفسها→كلمات جديدة في كل قسم→صفحة مختلفة

صفحة هناء الثانية «فعاليات النادي» تنسخ الصناديق نفسها لكنها تغيّر المحتوى: الترويسة تقول فعاليات النادي، والقسم «الاجتماع القادم: كل خميس ثانٍ»، والتذييل هو السطر نفسه. الصناديق نفسها والكلمات جديدة.

نشاط الفصل

ارسم على الورق صناديق متداخلة لصفحة «فعاليات النادي»: الحاوية ثم الترويسة وقسمًا فيه عنوان فرعي وفقرة ثم التذييل. واكتب على كل صندوق اسم الوسم واسم الفئة. اخترع الكلمات ولا تستخدم تفاصيل حقيقية.

تدرّب

ماذا تضمّ الترويسة؟

بماذا يبدأ كل قسم؟

لماذا نعطي الحاوية اسم فئة؟

لماذا يجب ألّا نضع عنوانًا حقيقيًّا أو رقم هاتف على صفحة نادٍ؟