HTML تنسيق النصوص

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

تنسيق النص ( Text Formatting ) يقصد به عرض النص بشكل أفضل فمثلاً إن كان هناك كلمة مهمة في النص يمكننا عرضها بخط عريض, و إن كان هناك شيء تم حذفه يمكننا عرضه خط فوقه للإشارة إلى أنه محذوف و هكذا.

في HTML يوجد العديد من الوسوم الجاهزة التي يمكن استخدامها في تنسيق النص و هي ما سنتعرف عليها في هذا الدرس.

عرض النص بخط عريض

أي كلمة أو جملة في النص تريد عرضها بخط عريض ( Bold ) يمكنك وضعها بين <b> </b> أو بين <strong> </strong>.
بشكل عام إستخدم <b> إذا أردت عرض الكلام بخط عريض و استخدم <strong> في حال كان الكلام مهم.


في المثال التالي قمنا بعرض كلمة في الفقرة بخط عريض باستخدام <b> و <strong> أيضاً.

مثال

<p>My name is <b>Mhamad</b></p>
<p>My name is <strong>Mhamad</strong></p>
		

جرب الكود

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

أي كلمة أو جملة في النص تريد عرضها بخط مائل ( Italic ) يمكنك وضعها بين <i> </i> أو بين <em> </em>.

الفرق الوحيد بين الإثنين هو أنه في حال كان المستخدم كفيف و يعتمد على قارئ الشاشة ( Screen Reader ) حتى يقرأ له محتوى الصفحة, فإن القارئ سيغير نبرته حين يقرأ النص المائل الموضوع بداخل <em> </em> لا أكثر.
لذلك استخدم <i> إذا أردت عرض نص مائل و استخدم <em> في حال أردت عرض نص مائل و أردت جعل قارئ الشاشة يغيّر نبرته حين يقرأ الكلام المائل.


في المثال التالي قمنا بعرض جملة في الفقرة بخط مائل باستخدام <i> و <em> أيضاً.

مثال

<p><i>Lord of the Rings</i> is a very large book.</p>
<p><em>Lord of the Rings</em> is a very large book.</p>
		

جرب الكود

عرض نص محذوف

أي كلمة أو جملة في النص تريد وضع خط عليها و كأنها محذوفة يمكنك وضعها بين <del> </del> أو بين <s> </s>.
بشكل عام إستخدم <del> إذا أردت للإشارة إلى أن الكلام قد تم حذفه و استخدم <s> عند الإشارة إلى أن الكلام محذوف لأنه لم يعد صحيحاً.


في المثال التالي قمنا بعرض كلام مشطوب في الفقرة باستخدام <del> و <s> أيضاً.

مثال

<p>HTML is so <del>hard</del> easy to learn.</p>
<p>The Earth is <s>flat</s> spherical in shape.</p>
		

جرب الكود

وضع خط تحت النص

أي كلمة أو جملة في النص تريد عرض خط تحتها ( Underline ) يمكنك وضعها بين <u> </u> أو بين <ins> </ins>.
بشكل عام إستخدم <u> إذا أردت وضع خط تحت الكلام و استخدم <ins> في حال كان سبب وضع الخط هو الإشارة إلى أن النص تم إضافته على النص الموجود مسبقاً.


في المثال التالي قمنا بعرض خط تحت الكلام الموجود في الفقرة باستخدام <u>.

المثال الأول

<p><u>Name:</u> Mhamad Harmush</p>
		

جرب الكود




في المثال التالي قمنا بعرض كلام محذوف باستخدام <del> يليه كلام تحته خط باستخدام <ins> للإشارة إلى أنه تم تبديل الكلام المحذوف بالكلام الذي تحته خط.

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

<p>HTML is <del>not important</del> <ins>essential</ins> in web design.</p>
		

جرب الكود

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

تعليم النص ( Text Marking ) فكرته وضع لون أصفر خلف جزئية محددة في النص للفت نظر المستخدم إليها.
أي كلمة أو جملة في النص تريد تعليمها باللون الأصفر يمكنك وضعها بين <mark> </mark>.


في المثال التالي قمنا بتعليم كلمة موجودة في الفقرة باستخدام <mark>.

مثال

<p><mark>Fast food</mark> affect your body!</p>
		

جرب الكود

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

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

في HTML يوجد نوعين من الوسوم التي تستخدم لهذا الغرض:

  • أي جزء في النص تريد عرضه بشكل مرتفع قليلاً عن باقي النص ضعه بين <sup> </sup>.
  • أي جزء في النص تريد عرضه بشكل منخفض قليلاً عن باقي النص ضعه بين <sub> </sub>.

معلومة: sup إختصار لكلمة Super Script التي تعني نص مرتفع, و sub إختصار لكلمة Sub Script التي تعني نص منخفض.


في المثال التالي قمنا بعرض جزء من النص بداخل <sup> </sup> حتى يظهر بشكل مرتفع قليلاً عنه و جزء من النص بداخل <sub> </sub> حتى يظهر بشكل منخفض قليلاً عنه.

مثال

<p>10<sup>6</sup> log<sub>2</sub> 64 = 6 Mbps</p>
		

جرب الكود

الدورات

أدوات مساعدة

الأقسام

دورات
مقالات أسئلة مشاريع كتب