2
أبني الصفحة: html وhead وbody
ICT Prep 2 Term 1, Unit 2, Lesson 3: pp. 68–74
الهدفأقرأ هيكل صفحة وأقول ماذا يفعل المتصفح بكل جزء.
كلمات جديدة
الوسم الافتتاحي · أول وسم في العنصر مثل <h1>الوسم الختامي · الوسم الذي فيه شرطة مائلة وينهي العنصر مثل </h1>الرأس (head) · الجزء الذي فيه معلومات عن الصفحة ولا يظهر في الصفحة نفسهاالجسم (body) · الجزء الذي يعرضه المتصفح على الشاشة
الشرح
لكل صفحة الهيكل نفسه. يحيط العنصر html بكل شيء. وفي داخله يضمّ head معلومات عن الصفحة: العنوان الذي يظهر على لسان المتصفح، وسطر الرابط الذي يربط الصفحة بالملف style.css. ويضمّ body ما يراه الناس: عناوين وفقرات وغيرها. ومعظم العناصر لها وسم افتتاحي ووسم ختامي فيه شرطة مائلة، مثل <h1> و</h1>. ويخبر الوسم الختامي المتصفح أين ينتهي العنصر. وإذا نسيته فقد لا يعرف المتصفح أين يتوقف جزء ويبدأ التالي. وللصفحة الحقيقية سطور أكثر قليلًا من صفحتنا؛ اسأل معلّمك عنها. اقرأ الصورة وقل ماذا يفعل المتصفح بكل سطر.
Html
1<html> 2<head> 3 <title>عن النادي</title> 4 <link rel="stylesheet" href="style.css"> 5</head> 6<body> 7 <h1>نادي الروبوتات (مثال)</h1> 8</body> 9</html>
أمثلة محلولة
| الجزء | ماذا يفعل المتصفح |
|---|---|
| head | يقرؤه ولا يعرض منه شيئًا في الصفحة |
| title | يضع الكلمات على اللسان |
| link | يحمّل ملف التنسيق |
| body | يعرض ما بداخله |
الوسم الافتتاحي→المحتوى→الوسم الختامي→المتصفح يعرف أين ينتهي
تكتب سلمى <h1> نادي الروبوتات (مثال) لكنها تنسى </h1>. فيظنّ المتصفح أن كل ما بعده ما زال جزءًا من العنوان، فتبدو الصفحة كلها عنوانًا ضخمًا. وإضافة الوسم الختامي تصلح ذلك.نشاط الفصل
انسخ الهيكل على الورق. لوّن الرأس بلون والجسم بلون آخر. ثم ضع خطًّا تحت كل الوسوم الافتتاحية وارسم دائرة حول كل الوسوم الختامية. واكتب ماذا يفعل المتصفح بالعنوان. لا حاجة إلى جهاز.
تدرّب
1
أي جزء من الصفحة يظهر على الشاشة، head أم body؟
body.
2
ماذا يفعل title؟
يضع اسم الصفحة على لسان المتصفح.
3
أي سطر يربط الصفحة بملف التنسيق؟
سطر الرابط في الرأس.
4
لماذا يحتاج العنصر إلى وسم ختامي؟
يخبر المتصفح أين ينتهي العنصر.