تعلم لغة html: المعلمات markup

عند إنشاء صفحة ويب، يتم إضافة وسوم  Tags (تعرف بالعلامات) لمحتوى الصفحة. هذه الوسوم توفر معلومات إضافية  وتسمح للمتصفحات بإظهار البنية المناسبة للصفحة.

المعلمات في html

بعد تعرفنا في الدرس الماضي عن بنية صفحة ويب html، في هذا الدرس سنركز على طريقة إضافة المعلمات Markup  للنصوص التي تظهر في صفحاتك.

سنتعرف على:

المعلمات البنيوية Structural markup

العناصر التي تستعمل في وصف العناوين والفقرات

العناوين Heading

عناوين html تبدأ من واحد حتى 6
الكود

<h1>العنوان الرئيسي</h1>

<h2> العنوان الثانوي رقم 1</h2>

<h3>العنوان الثانوي رقم 3</h3>

<h4>العنوان الثانوي رقم 4</h4>

<h5>العنوان الثانوي رقم 5</h5>

<h6>العنوان الثانوي رقم 6</h6>

النتيجة

العنوان الرئيسي هو h1  ويكون الأكبر حجما ثم تليه عناوين أخرى أقل أهمية وأقل حجم حتى h6
سنرى لاحقا كيفية التحكم في حجم ونوع الخط بالنسبة للعناوين والنصوص بصفة عامة.

الفقرة Paragraph

لإنشاء فقرة، ضع النص الذي يشكل الفقرة بين وسم الفتح p ووسم الغلق /p.
الكود

<p>دروس تصميم مواقع الويب على مدونة فولفولي</p>

النتيجة

بشكل آلي يقوم المتصفح بإظهار كل فقرة في بداية سطر جديد مع بعض الفراغ بين كل فقرة وتلك التي تتبعها.

العودة للسطر

الكود

<p>دروس تصميم مواقع ا لويب </br> على مدونة فولفولي</p>

النتيجة

خط أفقي للتفريق

الكود

<p>دروس تصميم مواقع الويب على مدونة فولفولي</p>

</hr>

<p>دروس تصميم مواقع الويب على مدونة فولفولي</p>

النتيجة

المعلمات الدلالية Semantic markup

تضيف المزيد من المعلومات، مثل إظهار نص عريض، اقتباس...

 عريض Bold

 لجعل النص واضح
الكود

<p><bold>دروس تصميم موا قع الويب </bold>على مدونة فولفولي</p>

النتيجة

مائل Italic

  لجعل النص مائل

الكود

<p><i>دروس تصميم موا قع الويب </i>على مدونة فولفولي</p>

النتيجة

اقتباس Blockquote

 لتمييز جزء من نص كاقتباس

الكود

<p>
قال حكيم
<blockquote>من علمني حرفا، صرت له عبدا<blockquote>
</p>

النتيجة