مدخل الى لغة html (هيكل صفحة HTML)
تكلمنا في
تدوينتنا السابقة عن مقدمة تعلم أساسيات HTML وتكلمنا بشئ موجز عن هيكل
وتركيب صفحة HTML٬ واليوم بإذن الله نتحدث بشئ أكثر تفصيلاً عن
هذا الموضوع.
تركيب وهيكل صفحة HTML :
الصورة
التالية توضح باختصار تركيب صفحة HTML.
* ويظهر في بداية الكود الموجود في الصورة الوسم التالي - باللون الأحمر : <!DOCTYPE
html>
<!DOCTYPE> : تعني أن هذه الوثيقة صفحة HTML وذلك لتعدد أنواع الوثائق على الويب٬ وذكر هذا
الوسم في كود HTML هام
من أجل عرض صفحة الويب بطريقة صحيحة ومن أجل ذلك لابد من ذكر النوع والإصدار.
والوسم المناسب لإصدار HTML5 هو <!DOCTYPE html> وهو الأهم بالنسبة لنا ويلاحظ أنه يذكر في بداية الكود وليس
لهذا الوسم كود إغلاق.
ومن الجدير بالذكر أنه غير حساس للأحرف الكبيرة أو الصغيرة " Capital or Small letters " أي أنه لا يهم كتابة
الكود بالأحرف الكبيرة أو الصغيرة فكلا الأمرين سواء وجميع الحالات التالية تفي
بالغرض :
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
* بعد هذا الوسم <!DOCTYPE
html> مباشرة يتم
كتابة هذا الوسم <html></html> وهو يعتبر كود الافتتاحية
لوثيقة الويب الخاصة بـ HTML.
* بداخل هذا الوسم <html></html> يتم
كتابة هذين الوسمين : <head></head> و <body></body>.
* بداخل هذا الوسم <head></head> يتم
كتابة معلومات عن الوثيقة مثل العنوان والخطوط المستخدمة والكلمات المفتاحية ...
إلخ مثل وسم عنوان الصفحة <title></title> والذي
يذكر بداخله عنوان الصفحة الذي يظهر بأعلى الصفحة كما بالصورة بالأسفل والمعلم حوله بإطار أحمر.
* بداخل هذا الوسم <body></body> يتم
كتابة الأكواد التي تصف الجزء المرئي من الصفحة " محتوى أو جسم الصفحة أو
الوثيقة ".
* يلاحظ أنه لايظهر في صفحة الويب إلا الأكواد الموجودة داخل
وسم جسم الصفحة <body></body> والذي يظهر باللون الأبيض
بالكود بالصورة الأولى أعلى الصفحة.
* هذا الوسم <h1></h1> خاص بالعناوين الرئيسية داخل الصفحة وقد جئنا على ذكرها في تدوينة
سابقة بعنوان : معرفات العناوين داخل بلوجر.
وتأتي العناوين في HTML على عدة أشكال متدرجة في حجم الخط وهي ستة وسوم كما يلي :
<h1>عنوان رئيسي</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان ثانوي</h3>
<h4>عنوان ثانوي أصغر</h4><h5>عنوان ثانوي أصغر</h5><h6>عنوان ثانوي أصغر</h6>
فتخيل معي لو تم تنفيذ الكود التالي :
<h1>عنوان رئيسي</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان ثانوي</h3>
<h4>عنوان ثانوي أصغر</h4><h5>عنوان ثانوي أصغر</h5><h6>عنوان ثانوي أصغر</h6>
فإن النتيجة ستكون كما يلي :
لاحظ معي تدرج حجم الخط بين كل عنوان والذي يليه - كما بالأعلى.
* هذا الوسم <p></p> يعرِّف الفقرات " paragraphs " داخل HTML هكذا :
<p>هذه الفقرة رقم 1</p>
<p>هذه الفقرة رقم 2</p>
<p>هذه الفقرة رقم 3</p>
والنتيجة ستكون هكذا :
عناصر HTML " HTML Elements " :
تحدثنا في التدوينة السابقة عن أن عنصر HTML يتكون من ( وسم البداية + محتوى العنصر
+ وسم النهاية ) هكذا :
<tagname>content</tagname>
ومهما كان محتوى العنصر كبيراً٬ فإن العنصر عبارة عن وسمي البداية والنهاية وما بينهما طال أم قصر.
عناصر HTML المتداخلة " Nested HTML Elements " :
من خواص عناصر HTML أنها
متداخلة " nested " - أي أن العناصر تحتوي بداخلها عناصر والتي بدورها من الممكن أن
تحتوي بداخلها عناصر وهكذا.
وأبسط مثال لهذا الموضوع المثال بالصورة الأولى بالأعلى :
حيث نلاحظ أن :
* العنصر <html> يحتوي بداخله العنصرين <head> و <body> .
* العنصر <head> يحتوي بداخلى العنصر <title> .
* العنصر <body> يحتوي بداخله العناصر <h1> و <p> .
* العنصر <body> يحتوي بداخله العناصر <h1> و <p> .
وهكذا.
ضرورة إغلاق الوسم " عدم نسيان وسم النهاية لعناصر HTML " :
وجب التنويه على عدم نسيان وسم الإغلاق لعناصر HTML المختلفة على الرغم من أن العملية قد
يتم تنفيذها في المتصفحات المختلفة بطريقة صحيحة في حالة نسيان وسوم الإغلاق لبعض
العناصر.
فمثلاً الكود التالي :
<html>
<body>
<p>هذه هي الفقرة رقم 1
<p>هذه هي الفقرة رقم 2</body></html>
يلاحظ غياب وسمي الإغلاق للوسمين <P> بالأعلى ومع ذلك لو قمت
بحفظ الملف بالكود السابق بامتداد " .html " وعند الضغط عليه
ستظهر النتيجة صحيحة كما يلي :
لكن في حالة كثرة الأكواد وخصوصاً في تلك الخاصة بقوالب
المواقع فإن عملية تداخل تلك الأكواد قد ينتج عنها خطأ في عملية تنفيذ الأوامر في
حالة نسيان وسوم الإغلاق لبعض عناصر HTML لذلك
وجب التنويه على عدم نسيانها.
عناصر HTML الفارغة " Empty HTML Elements " :
بعض عناصر HTML ليس
لها محتوى " have no content
" وتسمى في هذه الحالة بالعناصر الفارغة " Empty Elements ".
فمثلاً العنصر <br> من العناصر الفارغة والذي لا يحتوي على وسم إغلاق ويعبر عن البدء من سطر جديد مثل " Enter " في لوحة المفاتيح.
ومن الممكن أيضاً أن يتم إغلاق تلك العناصر في نفس وسم البداية هكذا : <br /> .
* في HTML5 لا يتطلب إغلاق العناصر الفارغة لكن من الاحتياط إغلاق العناصر الفارغة لأنه لا يناسب بعض الحالات و الإصدارات.
وسوم HTML ليست حساسة لحالة الأحرف - كبيرة أم صغيرة " Lowercase or Uppercase Letters ".
فمثلاً : <p> هي تماماً <P> .HTML5 لا تشترط استخدام الحروف الصغيرة " Lowercase Letters " في كتابة الوسوم٬ لكن رابطة الشبكة العالمية " WC3 " تنصح باستخدام الحروف الصغيرة في HTML وما شابهها مثل XHTML لذلك وجب التنويه.
فمثلاً العنصر <br> من العناصر الفارغة والذي لا يحتوي على وسم إغلاق ويعبر عن البدء من سطر جديد مثل " Enter " في لوحة المفاتيح.
ومن الممكن أيضاً أن يتم إغلاق تلك العناصر في نفس وسم البداية هكذا : <br /> .
* في HTML5 لا يتطلب إغلاق العناصر الفارغة لكن من الاحتياط إغلاق العناصر الفارغة لأنه لا يناسب بعض الحالات و الإصدارات.
استخدام الحروف الصغيرة " Lowercase Letters " في كتابة الوسوم :
وسوم HTML ليست حساسة لحالة الأحرف - كبيرة أم صغيرة " Lowercase or Uppercase Letters ".
فمثلاً : <p> هي تماماً <P> .HTML5 لا تشترط استخدام الحروف الصغيرة " Lowercase Letters " في كتابة الوسوم٬ لكن رابطة الشبكة العالمية " WC3 " تنصح باستخدام الحروف الصغيرة في HTML وما شابهها مثل XHTML لذلك وجب التنويه.
أضف تعليق