HTMLتنسيق النصوص
- مفهوم تنسيق النص
- عرض النص بخط عريض
- عرض النص بخط مائل
- عرض نص محذوف
- وضع خط تحت النص
- تعليم أجزاء في النص
- عرض جزء من النص بشكل مرتفع أو منخفض
مفهوم تنسيق النص
تنسيق النص ( Text Formatting ) يقصد به عرض النص بشكل أفضل فمثلاً إن كان هناك كلمة مهمة في النص يمكننا عرضها بخط عريض, و إن كان هناك شيء تم حذفه يمكننا عرضه خط فوقه للإشارة إلى أنه محذوف و هكذا.
في HTML يوجد العديد من الوسوم الجاهزة التي يمكن استخدامها في تنسيق النص و هي ما سنتعرف عليها في هذا الدرس.
عرض النص بخط عريض
أي كلمة أو جملة في النص تريد عرضها بخط عريض ( Bold ) يمكنك وضعها بين <b> </b> أو بين <strong> </strong>.
بشكل عام إستخدم <b> إذا أردت عرض الكلام بخط عريض و استخدم <strong> في حال كان الكلام مهم.
في المثال التالي قمنا بعرض كلمة في الفقرة بخط عريض باستخدام <b> و <strong> أيضاً.
مثال
عرض النص بخط مائل
أي كلمة أو جملة في النص تريد عرضها بخط مائل ( Italic ) يمكنك وضعها بين <i> </i> أو بين <em> </em>.
الفرق الوحيد بين الإثنين هو أنه في حال كان المستخدم كفيف و يعتمد على قارئ الشاشة ( Screen Reader ) حتى يقرأ له محتوى الصفحة, فإن القارئ سيغير نبرته حين يقرأ النص المائل الموضوع بداخل <em> </em> لا أكثر.
لذلك استخدم <i> إذا أردت عرض نص مائل و استخدم <em> في حال أردت عرض نص مائل و أردت جعل قارئ الشاشة يغيّر نبرته حين يقرأ الكلام المائل.
في المثال التالي قمنا بعرض جملة في الفقرة بخط مائل باستخدام <i> و <em> أيضاً.
مثال
عرض نص محذوف
أي كلمة أو جملة في النص تريد وضع خط عليها و كأنها محذوفة يمكنك وضعها بين <del> </del> أو بين <s> </s>.
بشكل عام إستخدم <del> إذا أردت للإشارة إلى أن الكلام قد تم حذفه و استخدم <s> عند الإشارة إلى أن الكلام محذوف لأنه لم يعد صحيحاً.
في المثال التالي قمنا بعرض كلام مشطوب في الفقرة باستخدام <del> و <s> أيضاً.
مثال
وضع خط تحت النص
أي كلمة أو جملة في النص تريد عرض خط تحتها ( Underline ) يمكنك وضعها بين <u> </u> أو بين <ins> </ins>.
بشكل عام إستخدم <u> إذا أردت وضع خط تحت الكلام و استخدم <ins> في حال كان سبب وضع الخط هو الإشارة إلى أن النص تم إضافته على النص الموجود مسبقاً.
في المثال التالي قمنا بعرض خط تحت الكلام الموجود في الفقرة باستخدام <u>.
المثال الأول
في المثال التالي قمنا بعرض كلام محذوف باستخدام <del> يليه كلام تحته خط باستخدام <ins> للإشارة إلى أنه تم تبديل الكلام المحذوف بالكلام الذي تحته خط.
المثال الثاني
تعليم أجزاء في النص
تعليم النص ( Text Marking ) فكرته وضع لون أصفر خلف جزئية محددة في النص للفت نظر المستخدم إليها.
أي كلمة أو جملة في النص تريد تعليمها باللون الأصفر يمكنك وضعها بين <mark> </mark>.
في المثال التالي قمنا بتعليم كلمة موجودة في الفقرة باستخدام <mark>.
مثال
عرض جزء من النص بشكل مرتفع أو منخفض
في المعادلات الحسابية نتعامل كثيراً مع أرقام و رموز تظهر بشكل مرتفع قليلاً أو منخفض قليلاً نسبةً لباقي الأرقام و الرموز الموجودة في نفس السطر.
في HTML يوجد نوعين من الوسوم التي تستخدم لهذا الغرض:
- أي جزء في النص تريد عرضه بشكل مرتفع قليلاً عن باقي النص ضعه بين <sup> </sup>.
- أي جزء في النص تريد عرضه بشكل منخفض قليلاً عن باقي النص ضعه بين <sub> </sub>.
معلومة: sup
إختصار لكلمة Super Script التي تعني نص مرتفع, و sub
إختصار لكلمة Sub Script التي تعني نص منخفض.
في المثال التالي قمنا بعرض جزء من النص بداخل <sup> </sup> حتى يظهر بشكل مرتفع قليلاً عنه و جزء من النص بداخل <sub> </sub> حتى يظهر بشكل منخفض قليلاً عنه.