ماهي أوسمة العناوين والنصوص في لغة HTML
 |
أساسيات لغة HTML |
مرحباً بكم مرة أخرى في درس جديد من سلسلة تعلم أساسيات لغة HTML للمبتدئين. في هذا الدرس الجديد سوف نتعلم شيء مهم جداً في كتابة أكواد اتش تي ام ال ، ألا وهي أوسمة العناوين ، وفي نهاية هذه الدروس سوف نقوم بعرض جميع اكواد html مع الشرح ، فقط تابع حتى النهاية وتعلم كل حرف مكتوب في هذه السلسلة من الدروس القيمة ، أعاننا الله وإياكم للوصوى إلى أرقى المستويات نحو الإحتراف.
ما هي العناوين بلغة HTML ؟
العنوان هو نص يختلف عن نص الفقرات من حيث الحجم ، ويكون منفرداً عن باقي السطور ، وبخط أكبر قليلاً لكي يعطي للزائر أو القارئ الفكرة الأساسية للصفحة التي دخل إليها ، أو إذا كان عنواناً لفقرة ما داخل الصفحة فإنه يعطي للقارئ فكرة عامة عن موضوع الفقرة التي سيقرأها.
أحجام العناوين بلغة HTML
هناك 6 أحجام للعناوين التي يمكن وضعها في الصفحة ، حيث أنها تبدأ من وسم < h1 > وهو الأكبر حجماً بين الخطوط ، ويكون غالباً العنوان الرئيسي للصفحة وتنتهي العناوين عند وسم < h6 > وهو بدوره يعطيك العنوان الصغير جداً.
في هذا الكود تعمدنا وضع وسوم لكافة أحجام العناوين بالتسلسل لتتوضح الفكرة :
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>ما هي أهمية العناوين بلغة HTML ؟
تساهم العناوين بشكل كبير في تحديد التسلسل الهرمي وهيكل محتوى صفحات الويب ، حيث أنه يعتبر العنوان الرئيسي للصفحة من أهم العناوين بالنسبة لمحركات البحث مثل google و yahoo وغيرها ، ثم تأتي بعدها العناوين المخصصة للفقرات ضمن الصفحة ، ثم تليها العناوين الفرعية والتي تكون ضمن الفقرات وهي أقل أهمية من غيرها.
وبمعنى أدق :
عندما تكتب العناوين بشكل وترتيب جذاب في صفحة الويب ، تدخل إليها الروبوتات المسؤولة عن الفهرسة وأرشفة تلك الصفحة ، وتقرأها على الشكل التالي :
- العنوان الرئيسي
- العنوان الفرعي
- العنوان الثانوي
- فقرة
ملاحظة :
إن كتابة العناوين بالشكل الصحيح والترتيب المناسب في صفحات الويب له دور كبير جداً وفعال في تحسين محركات البحث وظهور الصفحة في النتائج الأولى على جوجل وياهو وغيرها ، كما تعد من أوامر لغة HTML.
نصيحة :
ننصح دائماً المدونين والكتاب أن يضعوا عنوان الصفحة ضمن الوسم <h1><h1/> ، وأن يضعوا فيه الكلمة المفتاحية الرئيسية لتحسين أداء ظهورها ضمن نتائج البحث.
أوسمة العناوين والنصوص المستخدمة في لغة HTML ؟
نقدم لكم هذه القائمة بأهم الأوسمة المستعملة لتنسيق النصوص بلغة HTML :
الوسم < br >
يستخدم هذا الوسم لتحديد نهاية السطر وبداية سطر جديد ، ويكون منفرداً بدون وسم نهاية.
مثال على ذلك :
<br>السلام عليكم ورحمة الله<br>الوسم < nbsp& >
من المعروف لدى مصممي المواقع أن لغة html لا تحسب المسافات بين الكلمات والأكواد مهما كانت طويلة ، لذلك يستخدم الوسم nbsp& لوضع الفراغات بين الكلمات ، حيث تظهر كما هي في صفحة كتابة الكود ، وهو اختصار لعبارة None Breakable Space ، ومعناها باللغة العربية "مساحة غير قابلة للكسر" ، حيث أنه يأخذ شكل فراغات بين كل كلمة وأخرى بحسب العدد الذي تكتبه منها ، وهذه الأمثلة توضح ذلك.
إنسخ الكود الأول والثاني وشاهد الفرق بينهما في عرض الفراغات بين الكلمات.
المثال الأول :
نص مكتوب بلغة html بدون الوسم nbsp&.
السلام عليكم ورحمة اللهالمثال الثاني :
نص مكتوب بلغة html مع إضافة الوسم nbsp& بين الكلمات.
 السلام عليكم ورحمة اللهالوسم < font >
يقوم هذا الوسم بتغيير خصائص الخطوط من حيث النوع واللون والحجم ، حيث يأتي مع اللاحقة color لتغيير اللون ، واللاحقة face لتغيير النوع ، واللاحقة size لتغيير الحجم.
مثال على ذلك :
<font color="red><font size="40px"><font face="verdana">الوسم < Basefont >
يقوم هذا الوسم بتغيير خصائص الخط في الصفحة بأكملها من البداية إلى النهاية ، من حيث النوع واللون والحجم ، ويكون هذا الوسم منفرداً بدون وسم نهاية.
مثال على ذلك :
<basefont color="green">الوسم < p >
يقوم الوسم p بتحديد الفقرات في الصفحة ، وهو اختصار لكلمة paragraph ومعناها بالعربية "فقرة".
مثال على ذلك :
<p>السلام عليكم ورحمة الله</p>الوسم < a >
يستخدم الوسم a مع الخاصية href لتحديد وجهة الإنتقال من صفحة html إلى صفحة أخرى ومحتوى آخر مثل صور وفيديوهات وصوتيات وغيرها.
مثال على ذلك :
<a href="syriamatrix.blogspot.com">الوسم < pre >
يستخدم الوسم pre لإجبار المتصفح على ترك المسافات والإنتقالات بين السطور كما هي مكتوبة في النص الأصلي ، حيث تحسب المسافتين مسافتين والسطرين سطرين ، وبحسب المسافات والسطور التي تم وضعها أثناء كتابة النص الأصلي في صفحة الإنشاء ، وتعمل هذه الخاصية بين الوسمين <pre> و <pre/>.
مثال على ذلك :
<pre> السلام عليكم ورحمة الله </pre>الوسم < center >
يستخدم الوسم center لمحاذاة أي عنصر في الصفحة إلى الوسط.
مثال على ذلك :
<center>Hello</center>
تعليق