ماهي أوسمة العناوين والنصوص في لغة HTML

أهلاً وسهلاً بالزوار الجدد لا تتردد بطرح أي سؤال وسنجيب عليه في وقت قصير بإذن الله

أساسيات لغة HTML

مرحباً بكم مرة أخرى في درس جديد من سلسلة تعلم أساسيات لغة HTML للمبتدئين. في هذا الدرس الجديد سوف نتعلم شيء مهم جداً في كتابة أكواد اتش تي ام ال ، ألا وهي أوسمة العناوين ، وفي نهاية هذه الدروس سوف نقوم بعرض جميع اكواد html مع الشرح ، فقط تابع حتى النهاية وتعلم كل حرف مكتوب في هذه السلسلة من الدروس القيمة ، أعاننا الله وإياكم للوصوى إلى أرقى المستويات نحو الإحتراف.

ما هي العناوين بلغة HTML ؟

العنوان هو نص يختلف عن نص الفقرات من حيث الحجم ، ويكون منفرداً عن باقي السطور ، وبخط أكبر قليلاً لكي يعطي للزائر أو القارئ الفكرة الأساسية للصفحة التي دخل إليها ، أو إذا كان عنواناً لفقرة ما داخل الصفحة فإنه يعطي للقارئ فكرة عامة عن موضوع الفقرة التي سيقرأها.

أحجام العناوين بلغة HTML

هناك 6 أحجام للعناوين التي يمكن وضعها في الصفحة ، حيث أنها تبدأ من وسم < h1 > وهو الأكبر حجماً بين الخطوط ، ويكون غالباً العنوان الرئيسي للصفحة وتنتهي العناوين عند وسم < h6 > وهو بدوره يعطيك العنوان الصغير جداً.

في هذا الكود تعمدنا وضع وسوم لكافة أحجام العناوين بالتسلسل لتتوضح الفكرة :

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

ما هي أهمية العناوين بلغة HTML ؟

تساهم العناوين بشكل كبير في تحديد التسلسل الهرمي وهيكل محتوى صفحات الويب ، حيث أنه يعتبر العنوان الرئيسي للصفحة من أهم العناوين بالنسبة لمحركات البحث مثل google و yahoo وغيرها ، ثم تأتي بعدها العناوين المخصصة للفقرات ضمن الصفحة ، ثم تليها العناوين الفرعية والتي تكون ضمن الفقرات وهي أقل أهمية من غيرها.

وبمعنى أدق :

عندما تكتب العناوين بشكل وترتيب جذاب في صفحة الويب ، تدخل إليها الروبوتات المسؤولة عن الفهرسة وأرشفة تلك الصفحة ، وتقرأها على الشكل التالي :

1. العنوان الرئيسي
2. العنوان الفرعي
3. العنوان الثانوي
4. فقرة

ملاحظة :

إن كتابة العناوين بالشكل الصحيح والترتيب المناسب في صفحات الويب له دور كبير جداً وفعال في تحسين محركات البحث وظهور الصفحة في النتائج الأولى على جوجل وياهو وغيرها ، كما تعد من أوامر لغة HTML.

نصيحة :

ننصح دائماً المدونين والكتاب أن يضعوا عنوان الصفحة ضمن الوسم <h1><h1/> ، وأن يضعوا فيه الكلمة المفتاحية الرئيسية لتحسين أداء ظهورها ضمن نتائج البحث.

أوسمة العناوين والنصوص المستخدمة في لغة HTML ؟

نقدم لكم هذه القائمة بأهم الأوسمة المستعملة لتنسيق النصوص بلغة HTML :

الوسم < br >

يستخدم هذا الوسم لتحديد نهاية السطر وبداية سطر جديد ، ويكون منفرداً بدون وسم نهاية.

مثال على ذلك :

<br>السلام عليكم ورحمة الله<br>

الوسم < nbsp& >

من المعروف لدى مصممي المواقع أن لغة html لا تحسب المسافات بين الكلمات والأكواد مهما كانت طويلة ، لذلك يستخدم الوسم nbsp& لوضع الفراغات بين الكلمات ، حيث تظهر كما هي في صفحة كتابة الكود ، وهو اختصار لعبارة None Breakable Space ، ومعناها باللغة العربية "مساحة غير قابلة للكسر" ، حيث أنه يأخذ شكل فراغات بين كل كلمة وأخرى بحسب العدد الذي تكتبه منها ، وهذه الأمثلة توضح ذلك.

إنسخ الكود الأول والثاني وشاهد الفرق بينهما في عرض الفراغات بين الكلمات.

المثال الأول :

نص مكتوب بلغة html بدون الوسم nbsp&.

السلام          عليكم      ورحمة      الله

المثال الثاني :

نص مكتوب بلغة html مع إضافة الوسم nbsp& بين الكلمات.

&nbspالسلام&nbspعليكم&nbspورحمة&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>

تعديل المقال