عناصر HTML والشكل العام لصفحات HTML
عناصر HTML والشكل العام لصفحات HTML
عناصر HTML
تتكون كل صفحة من صفحات HTML من مجموعة من العناصر Elements يتم إنشاؤها باستخدام الوسوم Tags والوسوم كما قلنا سابقاً عبارة عن أحرف أو كلمات تحمل معاني خاصة بالنسبة لمستعرض الويب و غالباً ما تكون أسماءالوسوم عبارة عن اختصارات لكلمات إنجليزيَة فالوسم <p> مثلاً يستخدم لإنشاء العنصر المسؤول عن عرض مقاطع النصوص Paragraphs ضمن صفحات HTML و الذي سيتم مناقشة عمله مع عمل باقي الوسوم بشكل تفصيلي في الدروس القادمةتحصر الوسوم بين أقواس من الشكل < > و من أمثلتها الوسم <html> والوسم <head> والوسم <title> و الوسم<body> و الوسم <p> .
لكل عنصر من عناصر HTML وسم بداية Begin Tag و وسم نهاية End Tag تكون وسوم البداية محصورة بين القوسين < > أمَّا وسوم النهاية فتكون محصورة بين القوسين السابقين مضافاً إليهما رمز الخط المائل / المعروف ب Slash بالشكل </ > و من أمثلة وسوم النهاية الوسم </html> و الوسم </head> والوسم </title> والوسم </body> والوسم </p> ويحتوي كلعنصر من عناصر HTML بين وسمي بدايته و نهايته نصَاً عادياً لعرضه و يمكن أن يحوي أي عدد آخر من عناصر HTML شرط الالتزام بترتيب متناظر لوسوم النهاية و البداية, فعند كتابة وسوم النهاية يجب أن يراعى الترتيب فيتم كتابة وسم النهاية الخاص بوسم البداية غير المنتهي (الذي ليس لو وسم نهاية) الأقرب فالأقرب, ففي حين أن الترتيب التالي يعتبر صحيحياً:
<html>
<body>
<p>
نص عادي يعرض في المتصفح
</p>
</body>
</html>
لأن وسم النهاية الأول </p> جاء لإنهاء أقرب وسم بداية غير منتهي وهو <p> في مثالنا, ثَّم جاء وسمم النهاية </body> لإنهاء أقرب وسم بداية غير منتهي و هو <body> , ثَّم جاء وسم النهاية </html> لإنهاء أقرب وسم بداية غير منتهي و هو <html> .
الخلاصة / لا تنسى كتابة وسم الإغلاق وراعٍ ترتيب وسوم الإغلاق.
الفراغات White Spaces
في لغة HTML لا يوجد أي قيمة لمحارف الفراغات مثل (Space و Tab .. إلخ) عند استعراض الصفحات باستخدا مستعرض الويب وإنَّما تستخدم محارف الفراغات لغرض ترتيب الشيفرة وجعلها مقروءة بشكل واضح فقط.فائدة : من العادات البرمجية الجيدة إزاحة كل المحتوى الموجود بين وسمي بداية و نهاية متماثلين بمقدار ضغطة Tab و البعض يفضل إزاحتها بمقدار ثلاث فراغات (ثلاث ضغطات على مفتاح Space)
الشكل العام لعناصر HTML
يتم وصف عناصر HTML باستخدام الوسوم, و فيمايلي نعرض الشكل العام لعنصر HTML :
- يبدأ عنصر HTML بوسم البداية Begin Tag .
- ينتهي عنصر HTML بوسم النهاية End Tag .
- كل ما يتم كتابته بين وسمي البداية و النهاية يدعى محتوى عنصر HTML علماً أن هناك بعض العناصر التي لا تحتوي أي محتوى و التي تسمى عديمة المحتوى.
- يندمج وسما البداية والنهاية في وسم واحد في حالة العناصر عديمة المحتوى.
- يتم تمرير مجموعة من الخصائص لأغلب عناصر HTML في وسم البداية عن طريق الواصفات Attributes
ملحوظة: دائماً و أبداً قم بكتابة عناصر HTML بالأحرف الإنجليزية بحالتها الصغيرة Lower Case .
لنشاهد الأمثلة التالية
وسم النهاية | محتوى العنصر | وسم البداية |
---|---|---|
</p> | welcome to my site | <p> |
</a> | go to my site | <a href='http:sweup.com'> |
<br /> |
<a href="sweup.com"> و ينتهي بالوسم </a> و يحوي المحتوى النصي Go to my site مع إسناد القيمة sweup.com إلى واصفته href , في حين أن العنصر الثالث عديم المحتوى يتكون من اتحاد وسمي البداية و النهاية في وسم واحد بالشكل <br /> .
الشكل العام لصفحات HTML
تتكوف كل صفحة HTML من ثلاث مناطق:- منطقة جسد الصفحة Body Section : وهي المنطقة المحصورة بين وسمي و <body> و </body> و هذه المنطقة هي التي تنتج الشكل النهائي للصفحة و تضم جميع العناصر التي تمثل المحتوى الظاهر للصفحة والذي سيظهر في مستعرض الويب عند استعراض هذه الصفحة و بالطبع فإن الجزءالأكبر مف عناصر HTML سيكوف في هذه المنطقة.
- منطقة رأس الصفحة Head Section : و هي المنطقة المحصورة بين وسمي <head> و </head> و و هذه المنطقة تحوي مجموعة من عناصر HTML أغلبها لا يظهر في مستعرض الويب عند استعراض الصفحة و لكن المهمة الرئيسية لهذه المنطقة هي إعطاء معلومات عن ماهيَّة المحتوى الموجود بالصفحة إضافة لبعض المعمومات غير الظاهرة الأخرى و التي تستخدمها محركات البحث من أجل الأرشفة و البحث في الغالب.
- منطقة الأصل : و هي المنطقة المحصورة بين وسمي و <html> و </html> و هذه المنطقة هي المنطقة التي تحدد بداية و نهاية الصفحة و هي التي تضم منطقتي الرأس والجسد و بهذا فهي تض كامل مستند (صفحة) HTML
<html>
<head>
محتوى منطقة الرأس غير الظاهر سيكون هنا
</head>
<body>
محتوى الصفحة النهائي والظاهر فعلياً سيكون هنا
</body>
</html>
, وإلى هنا أتركم في رعاية الله إلى حين نلقاكم في درس جديد ولمتابعة الدورة يمكنك الأنضمام لأعضاء المدونة كما يمكنك الأنضمام للقروب الخاص بنا حيث سيصلك كل جديد .
المصادر /www.w3schools.com تعلَّمHTML5 & CSS3 (م.مختار صالح)
محول الأكوادالابتسامات