مدخل الى لغة html (العناوين في لغة HTML)
العناوين في لغة HTML 0 التعليقات
تحدثنا في
تدوينتنا السابقة عن خواص عناصر HTML بشئ من التفصيل واليوم بإذن الله نتحدث عن
العناوين " Headings " في لغة HTML .
لا شك أن استخدام العناوين في وثائق HTML شئ لا غنى عنه و خصوصاً في الوثائق الطويلة التي بها عناوين رئيسية ثم عناوين فرعية ثم عناوين ثانوية وهكذا٬ وبالطبع يختلف حجم الخط من عنوان إلى آخر حسب أهميته في الوثيقة.
لا شك أن استخدام العناوين في وثائق HTML شئ لا غنى عنه و خصوصاً في الوثائق الطويلة التي بها عناوين رئيسية ثم عناوين فرعية ثم عناوين ثانوية وهكذا٬ وبالطبع يختلف حجم الخط من عنوان إلى آخر حسب أهميته في الوثيقة.
وسوم العناوين داخل HTML :
تُعَرَّف
العناوين داخل HTML بالوسوم من <h1> إلى <h6> .
حيث أن <h1> تُعَرِّف العنوان الأكثر أهمية و <h6> تُعَرِّف العنوان الأقل أهمية.
حيث أن <h1> تُعَرِّف العنوان الأكثر أهمية و <h6> تُعَرِّف العنوان الأقل أهمية.
وكنا قد
تحدثنا عن ذلك بشئ بسيط حين التحدث عن هيكل صفحة HTML وكذلك في تدوينة سابقة بعنوان
مُعرَّفات العناوين داخل بلوجر.
مثال :
مثال :
<h1>عنوان رقم 1</h1><h2>عنوان رقم 2</h2><h3>عنوان رقم 3</h3><h4>عنوان رقم 4</h4><h5>عنوان رقم 5</h5><h6>عنوان رقم 6</h6>
* لاحظ معي تدرج حجم الخط من عنوان لآخر مع ملاحظة أن العنوان الأكثر أهمية وهو صاحب الوسم <h1> هو الأكبر حجماً مع تدرج حجم الخط للعناوين حتى نصل إلى العنوان صاحب الوسم <h6> وهو الأقل أهمية مع ملاحظة أن المتصفحات تضيف مسافة فاصلة تلقائياً قبل وبعد كل عنوان.
أهمية العناوين :
كما سبق
وتحدثنا عن أهمية العناوين داخل الوثائق٬ فإنه من الجدير بالذكر أن محركات البحث
تستخدم العناوين لعمل فهرسة وبناء للمحتوى الخاص بموقعك لذلك لا يمكن إغفال
أهميتها.
كذلك فإن المستخدمين الذين يتصفحون موقعك يستخلصون ما في صفحاته عن طريق العناوين وهنا تكمن أهمية اختيار العناوين في توضيح محتوى و بناء الوثيقة.
كذلك فإن المستخدمين الذين يتصفحون موقعك يستخلصون ما في صفحاته عن طريق العناوين وهنا تكمن أهمية اختيار العناوين في توضيح محتوى و بناء الوثيقة.
لذلك لابد من استخدام الوسم <h1> للعناوين الرئيسية ثم <h2> للأقل أهمية ثم <h3> وهكذا حتى <h6>.
ملاحظة هامة : لا تستخدم وسوم العناوين إلا مع العناوين فقط بمعنى آخر أي أنك لا تستخدمها إذا أردت الكتابة بخط كبير " big " أو عريض " bold ".
ملاحظة هامة : لا تستخدم وسوم العناوين إلا مع العناوين فقط بمعنى آخر أي أنك لا تستخدمها إذا أردت الكتابة بخط كبير " big " أو عريض " bold ".
الأسطر الأفقية في لغة HTML :
يمكننا
استخدام الأسطر الأفقية للفصل ما بين الفقرات وبعضها وذلك باستخدام العنصر <hr> ٬ ويظهر على هيئة خط أفقي.
مثال :
مثال :
<h1>عنوان رقم 1</h1><p>فقرة رقم 1</p><hr><h2>عنوان رقم 2</h2><p>فقرة رقم 2</p><hr>
والنتيجة كالتالي :
* ولاحظ وجود الأسطر كفواصل بين المواضيع وبعضها.
* لاحظ أيضاً أن العنصر <hr> من عناصر HTML الفارغة أي أنه ليس له وسم إغلاق.
العنصر " head " في لغة HTML :
تكلمنا
سابقاً عن العنصر " head " وليس له علاقة بالعناوين " headings " نظراً لتشابه التسمية.
وقلنا سابقاً أنه مجرد وعاء لإعدادات الصفحة من تحديد اللغة وتوصيف مجال الصفحة والكلمات المفتاحية والخطوط المستخدمة والتنسيقات ... إلخ وهي لا تظهر في الوثيقة.
وقلنا أيضاً أنه يتم وضعه بين الوسمين <html> و <body> هكذا :
وقلنا سابقاً أنه مجرد وعاء لإعدادات الصفحة من تحديد اللغة وتوصيف مجال الصفحة والكلمات المفتاحية والخطوط المستخدمة والتنسيقات ... إلخ وهي لا تظهر في الوثيقة.
وقلنا أيضاً أنه يتم وضعه بين الوسمين <html> و <body> هكذا :
<!DOCTYPE html><html><head><title>عنوان الصفحة</title><meta charset="UTF-8"></head><body>...
أضف تعليق