وسوم HTML: كيفية تنسيق النصوص في HTML

في هذه التدوينة سنتعرف على وسوم تنسيق النصوص في HTML وكيفية تنسيق النصوص في HTML بتفاصيل. لكن قبل البدء في شرح نود ان نرحب بزوار موقعنا الأعزاء, مرحبا بكم.

ملاحظة: قبل البدء في الشرح أود اخبارك بأنه يمكنك الاستغناء على هذه العناصر التي سأتي شرحها, باستخدام لغة التنسيق CSS.

المحتوى

العنصر العريض (Bold):

العنصر يستخدم في غالب لجذب انتباه القارئ الى محتوى العنصر. وكان سابقا يسمى بعنصر الخط العريض, ويعرض نص العنصر على المتصفح بالخط العريض.

<b>محتوى العنصر</b>

العنصر القوي (Strong):

العنصر يستخدم في المحتوى ذات اهمية او الحاح كبير, ويعرض نص العنصر على المتصفح بالخط العريض.

<strong>محتوى العنصر</strong>

العنصر المائل (Italic):

العنصر يستخدم كنص منفصل على النص العادي, مثل النصوص الاصطلاحية أو التسميات التصنيفية, ويعرض نص العنصر على المتصفح بالخط المائل.

<i>محتوى العنصر</i>

عنصر التأكيد (The Emphasis element):

العنصر يستخدم في النص الذي يحتاج الى تأكيد من القارئ, بمعنى أخرى يحتاج الى تشديد, ويعرض نص العنصر على المتصفح بالخط المائل.

<em>محتوى العنصر</em>

عنصر التسطير (Underline):

العنصر يستخدم في المحتوى غير نصي الذي يتطلب تدقيق بصريا من القارئ, كالأخطاء الاملائية, مصطلحات اجنابية, وعبارات غير مألوفة,وعند العرض على المتصفح يتم عرض خط اسفل النص الموجود العنصر.

<u>محتوى العنصر</u>

عنصر الشطب (Strikethrough element):

عنصر <s> يستخدم في النص الذي لم يعد ذات صلة أو غير دقيق في المستند, وعند العرض على المتصفح يتم اضافة خط وسط النص الموجود داخل العنصر.

<s>محتوى العنصر</s>

عنصر النص المدمج (The Inserted Text element):

العنصر <ins> يستخدم كنطاق من النصوص المضافة الى المستند.وعند العرض على المتصفح يتم اضافة خط اسفل النص الموجود في العنصر.

<ins>محتوى العنصر</ins>

عنصر النص المحذوف (The Deleted Text element):

العنصر <del> يستخدم كنطاق من النصوص المحذوفة من المستند.عند العرض على المتصفح يتم اضافة خط وسط النص الموجود في العنصر.

<del>محتوى العنصر</del>

عنصر التعليق الجانبي (Small):

العنصر يستخدم في العليقات الجانبية والنصوص الصغيرة مثل حقوق الطبع والنشر,وعند العرض على المتصفح يعرض محتوى العنصر بخط صغير.

<small>محتوى العنصر</small>

عنصر نص العلامة (Mark):

العنصر يستخدم في النص الذي يتم تسليط الضوء عليه, كالنص الذي يحتاج لأهمية,وعند العرض على المتصفح يعرض النص الموجود في العنصر بخلفية صفراء.

<mark>محتوى العنصر</mark>

عنصر النص السفلي (Sub):

العنصر يستخدم في النصوص التي تحتاج لظهور كنص سفلي بججم صغير, كالصيغة الجزئية,وعند العرض على المتصفح يعرض النص الموجود في العنصر كنص سفلي بحجم صغير.

<sub>محتوى العنصر</sub>

عنصر الفوق (Sup):

العنصر يستخدم في النصوص التي تحتاج لظهور كنص علوي, كمعادلات الرياضيات, وعند العرض على المتصفح يعرض النص الموجود في العنصر كنص علوي بحجم صغير.

<sup>محتوى العنصر</sup>

طريقة استخدام عناصر تنسيق النصوص في صفحة HTML:

<DOCTYPE html!>
<html>
  <head>
    <meta charset="utf-8" />
    <title>اسم الصفحة او الموقع</title>
  </head>
  <body>
    <h1><em>What is Lorem Ipsum?</em></h1>
    <p>
      <strong>Lorem Ipsum</strong> is simply dummy text of the printing
      and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since 
      the 1500s, when an unknown printer took a galley of type and scrambled it
      to make a type specimen book. It has survived not only five centuries, 
      but also the leap into electronic typesetting, remaining essentially 
      unchanged. It was popularised in the 1960s with the release of Letraset
      sheets containing Lorem Ipsum passages, and more recently with desktop 
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>

ملاحظة: عندما تقوم بادراج عنصر داخل عنصر أخر في HTML, تاكد دائما من اغلاق العنصر الداخلي قبل الخارجي, للمزيد من التفاصيل ركيز جيدا في صفحة HTML المدرجة أعلى.