مفهوم تنسيق النصوص في لغة HTML - ProgrammerTech
Language:

Search

مفهوم تنسيق النصوص في لغة HTML

  • Share this:
مفهوم تنسيق النصوص في لغة 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>.

إستخدام الوسم <strong> في html جعل الكلمة بخط عريض

 

عرض النص بخط مائل

إذا أردنا جعل بعض الكلمات في صفحة الويب بخط مائل ( Italic ) نسخدم الوسمين الآتيين:

  • يمكن وضع الكلمة بين <i> و </i>.
  • يمكن وضع الكلمة بين <em> و </em>.

نستطيع أن نستخدم ما شئنا من الوسمين السابقين من أجل جعل النص مائلاً.

مثال 2

<p>My website <i>Programmer Tech</i></p> 
<p>My website <em>Programmer Tech</em></p>

أنشأنا فقرة و في داخل هذه الفقرة قمنا في السطر الأول بإستخدام الوسم <i> و في السطر الثاني إستخدمنا الوسم <em>.

سنقوم بتشغيل الكود في المتصفح عن طريق محرر أكواد هرمش.

جعل الخط مائل في صفحة الويب الوسم <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>.

حذف كلمة في صفحة الويب الوسم <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>.

جعل الكلمة تحتها خط في صفحة الويب الوسم <u> و <ins>

 

تعليم اجزاء من النص

يمكن تمييز ( Text Marking ) نص محدد ضمن صفحة الويب و يكون هذا أن يتم وضع خلفية صفراء للكلمة التي نريد تمييزها لإلفات النظر لها.

يتم تمييز النصوص بخلفية صفراء عن طريق وضعها بين الوسم <mark> و </mark>.

مثال 5

<p>My website <mark>Programmer Tech</mark></p>

أنشأنا فقرة و في داخل الفقرة إستخدمنا الوسم <mark> من أجل إلفات نظر المستخدم على كلام هام.

إستخدام الوسم <mark> في صفحة ويب html

 

عرض جزء من النص بشكل مرتفع و منخفض

في بعض الأحيان نريد كتابة عمليات حسابية كسرية و رموز كيميائية يتم بها كتابة بعض الأرقام بشكل مرتفع قليلاً أو منخفض قليلاً عن الكلمة في نفس السطر.

يوجد وسمين مسؤولان عن إرتفاع النص و إنخفاضه و هما:

  1. إذا كنا نريد أن نجعل جزء من النص مرتفع قليلاً نستخدم الوسم <sup> و </sup> وهو إختصار للكلمة ( Super Script ).
  2. إذا كنا نريد أن نجعل جزء من النص منخفض قليلاً نستخدم الوسم <sub> و </sub> وهو إختصار للكلمة ( Sub Script ).

مثال 6

<p>My website <sup>Programmer Tech</sup></p>
<p>My website <sub>Programmer Tech</sub></p>

أنشأنا فقرة و في داخل هذه الفقرة قمنا في السطر الأول بإستخدام الوسم <sup> و في السطر الثاني إستخدمنا الوسم <sub>.

جعل النص مرتفع و منخفض في صفحة الانترنت html

 


Tags:
Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com