عناصر 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 />
يمثل كل سطر في الجدول السابق عنصراً من عناصر HTML في الصفحة بشكل تخيلي,فالعنصر الأول يبدأ بالوسم <p> و ينتهي بالوسم </p> و يحوي المحتوى النصي Welcome to my website  بينما يبدأ العنصر الثاني بالوسم 
<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 كمايلي:

 <html>
<head>                       
 محتوى منطقة الرأس غير الظاهر سيكون هنا
</head>
<body>
 محتوى الصفحة النهائي والظاهر فعلياً سيكون هنا
</body>
</html> 
, وإلى هنا أتركم في رعاية الله إلى حين نلقاكم في درس جديد ولمتابعة الدورة يمكنك الأنضمام لأعضاء المدونة كما يمكنك الأنضمام للقروب الخاص بنا حيث سيصلك كل جديد .
المصادر /www.w3schools.com  تعلَّمHTML5 & CSS3 (م.مختار صالح)

هناك تعليقان (2):

  1. بارك الله فيكم وجزاكم الله كل خير, وازادكم الله من علمه وفضله, فلقد استفدت

    كثيرا من موضوعاتكم المميزة والمفيدة, وها هي ثمرة ما زرعتموه من خير ومن

    علم نافع للجميع www.dandashastoresalexandria.blogspot.com
    شكراً لكم

    ردحذف
    الردود
    1. أهلا وسهلا بك .. نتمنى لك التوفيق دائما
      وشكرا على تعليقك
      تحيتى

      حذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية