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

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