مفهوم تنسيق النصوص HTML
تنسيق النصوص ( Text Formatting ) في HTML هي عرض النص متناسق و جميل بشكل أفضل.
يعني إن كانت هنالك كلمة مهمة نوعاً ما في النص يُمكننا تمييز عرضها بخط عريض Bold.
و إن كان يوجد شيء قد تم حذفه في النص يُمكن عرض خط فوقه من أجل الإشارة إلى أنه محذوف.
وسوم عرض النص بخط عريض
عندما نريد التركيز على كلمة أو تكون كلمة مهمة في صفحة الويب نقوم بوضعها بخط عريض ( Bold ).
- يمكن وضع الكلمة بين <b> و </b>.
- يمكن وضع الكلمة بين <strong> و </strong>.
الوسمين يعطوا نفس النتيجة, لكن الشائع لدى المبرمجين هو <b> و </b> أما <strong> و </strong> نستخدمه في حال كان الكلام مهم جداً.
مثال 1
<p>My website <b>Programmer Tech</b></p> <p>My website <strong>Programmer Tech</strong></p>
أنشأنا فقرة و في داخل هذه الفقرة قمنا في السطر الأول بإستخدام الوسم <b> و في السطر الثاني إستخدمنا الوسم <strong>.
سنقوم بتشغيل الكود في المتصفح عن طريق محرر أكواد هرمش.
عرض النص بخط مائل
إذا أردنا جعل بعض الكلمات في صفحة الويب بخط مائل ( Italic ) نسخدم الوسمين الآتيين:
- يمكن وضع الكلمة بين <i> و </i>.
- يمكن وضع الكلمة بين <em> و </em>.
نستطيع أن نستخدم ما شئنا من الوسمين السابقين من أجل جعل النص مائلاً.
مثال 2
<p>My website <i>Programmer Tech</i></p> <p>My website <em>Programmer Tech</em></p>
أنشأنا فقرة و في داخل هذه الفقرة قمنا في السطر الأول بإستخدام الوسم <i> و في السطر الثاني إستخدمنا الوسم <em>.
سنقوم بتشغيل الكود في المتصفح عن طريق محرر أكواد هرمش.
تمييز النص المحذوف
في بعض الأحيان توجد كلمات ضمن صفحة الويب نريد أن نحذفها لكن نتركها موجودة ضمن صفحة الويب فقط لإعلام المستخدم أن هذه الكلمة محذوفة.
نستخدم في تمييز النص على أنه محذوف إحدى الوسمين:
- يمكن وضع الكلمة بين <s> و </s>.
- يمكن وضع الكلمة بين <del> و </del>.
مثال 3
<p>My website <s>Programmer Tech</s></p> <p>My website <del>Programmer Tech</del></p>
أنشأنا فقرة و في داخل هذه الفقرة قمنا في السطر الأول بإستخدام الوسم <s> و في السطر الثاني إستخدمنا الوسم <del>.
وضع خط تحت النص
عندما نريد تمييز كلمة بوضع خط أسفل الكلمة ( Underline ) نقوم بإستخدام لذلك إحدى الوسمين:
- يمكن وضع الكلمة بين <u> و </u>.
- يمكن وضع الكلمة بين <ins> و </ins>.
الشائع لدى المبرمجين هو إستخدام u عندما نريد أن يكون خط أسفل الكلمة.
مثال 4
<p>My website <u>Programmer Tech</u></p> <p>My website <ins>Programmer Tech</ins></p>
أنشأنا فقرة و في داخل هذه الفقرة قمنا في السطر الأول بإستخدام الوسم <u> و في السطر الثاني إستخدمنا الوسم <ins>.
تعليم اجزاء من النص
يمكن تمييز ( Text Marking ) نص محدد ضمن صفحة الويب و يكون هذا أن يتم وضع خلفية صفراء للكلمة التي نريد تمييزها لإلفات النظر لها.
يتم تمييز النصوص بخلفية صفراء عن طريق وضعها بين الوسم <mark> و </mark>.
مثال 5
<p>My website <mark>Programmer Tech</mark></p>
أنشأنا فقرة و في داخل الفقرة إستخدمنا الوسم <mark> من أجل إلفات نظر المستخدم على كلام هام.
سنقوم بتشغيل الكود في المتصفح عن طريق محرر أكواد هرمش.
عرض جزء من النص بشكل مرتفع و منخفض
في بعض الأحيان نريد كتابة عمليات حسابية كسرية و رموز كيميائية يتم بها كتابة بعض الأرقام بشكل مرتفع قليلاً أو منخفض قليلاً عن الكلمة في نفس السطر.
يوجد وسمين مسؤولان عن إرتفاع النص و إنخفاضه و هما:
- إذا كنا نريد أن نجعل جزء من النص مرتفع قليلاً نستخدم الوسم <sup> و </sup> وهو إختصار للكلمة ( Super Script ).
- إذا كنا نريد أن نجعل جزء من النص منخفض قليلاً نستخدم الوسم <sub> و </sub> وهو إختصار للكلمة ( Sub Script ).
مثال 6
<p>My website <sup>Programmer Tech</sup></p> <p>My website <sub>Programmer Tech</sub></p>
أنشأنا فقرة و في داخل هذه الفقرة قمنا في السطر الأول بإستخدام الوسم <sup> و في السطر الثاني إستخدمنا الوسم <sub>.
