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

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

تنسيق النص (Text Formatting) هو عبارة عن استخدام عناصر HTML لتغيير كيفية عرض النصوص في صفحات الويب. يتيح لك تنسيق النص إبراز المعلومات الهامة، تحسين القراءة، وتسهيل فهم المحتوى. على سبيل المثال، يمكنك استخدام التنسيقات لجعل الكلمات المهمة بارزة، أو لإظهار النصوص التي تم حذفها، مما يساعد المستخدمين على فهم المحتوى بشكل أفضل.

من خلال استخدام التنسيقات المناسبة، يمكنك خلق تجربة مستخدم أفضل، حيث يصبح المحتوى أكثر جاذبية وترتيبًا، مما يسهل على الزوار التنقل في المعلومات والعثور على ما يبحثون عنه بسرعة.

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

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

• استخدم <b>: عندما تريد ببساطة جعل النص بارزًا، دون الإشارة إلى أي أهمية خاصة.
• استخدم <strong>: عندما يكون النص مهمًا ويحتاج إلى إبراز، حيث يشير هذا الوسم إلى أن النص له أهمية أكبر.

⚠️

ملاحظة: استخدم <strong> دائمًا لتوضيح النصوص الهامة، حيث يساعد ذلك في تحسين الوصولية للمستخدمين الذين يستخدمون قارئات الشاشة.

في المثال التالي، قمنا بعرض اسم شخص بخط عريض باستخدام كلا الوسمين:

📋

<p>My name is <b>Ahmed</b>.</p>
<p>My name is <strong>Ahmed</strong>.</p>
        

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

لإظهار أي كلمة أو جملة في النص بخط مائل (Italic)، يمكنك استخدام الوسوم <i> أو <em>. على الرغم من أن كلا الوسمين يؤديان نفس الغرض، إلا أن لديهم اختلافات بسيطة في الاستخدام:

• استخدم <i>: عندما ترغب في إظهار النص بشكل مائل دون التأكيد على أهميته.
• استخدم <em>: عندما تريد التأكيد على أهمية النص المائل، حيث سيقوم قارئ الشاشة بتغيير نبرته عند قراءة النص.

⚠️

ملاحظة: استخدام <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> أو <s>. كلا الوسمين يتيحان لك تقديم نص محذوف، لكنهما يستخدمان في سياقات مختلفة:

• استخدم <del>: عندما تريد الإشارة إلى أن النص تم حذفه.
• استخدم <s>: عندما تشير إلى أن النص محذوف لأنه لم يعد صحيحًا.

⚠️

ملاحظة: استخدم <del> للإشارة بوضوح إلى أن النص لم يعد صالحًا أو تم استبداله بنص آخر.

في المثال التالي، نستعرض كيفية استخدام كلا الوسمين لعرض نص محذوف:

📋

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

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

إذا كنت ترغب في وضع خط تحت نص معين (Underline)، يمكنك استخدام الوسوم <u> أو <ins>. وبشكل عام:

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

⚠️

ملاحظة: استخدام <ins> يوضح أن النص الجديد هو إضافة، مما يساعد في فهم سياق المحتوى بشكل أفضل.

في المثال التالي، نستعرض كيفية وضع خط تحت النص باستخدام كلا الوسمين:

📋

<p><u>Name:</u> Ahmed CodaFox</p>
        

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

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

⚠️

ملاحظة: استخدام <mark> يمكن أن يكون فعالًا في سياقات التعليم أو العروض التقديمية، حيث يحتاج المتعلمون إلى التركيز على مفاهيم معينة.

في المثال التالي، نستعرض كيفية تعليم جزء من النص:

📋

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

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

في المعادلات الرياضية أو الكيميائية، نحتاج أحيانًا إلى كتابة رموز أو أرقام بشكل مرتفع أو منخفض قليلاً بالنسبة للنص العادي. في HTML، لدينا وسومان لهذا الغرض:

• لعرض النص بشكل مرتفع قليلاً، يمكنك استخدام <sup> (اختصار لكلمة Super Script).
• لعرض النص بشكل منخفض قليلاً، يمكنك استخدام <sub> (اختصار لكلمة Sub Script).

⚠️

ملاحظة: استخدام <sup> و<sub> ضروري عند التعامل مع المعادلات الرياضية أو الكيميائية، حيث يساعد في تقديم المعلومات بدقة.

في المثال التالي، نستعرض كيفية استخدام كلا الوسمين في نص رياضي:

📋

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

الخاتمة

تنسيق النصوص هو عنصر أساسي في تصميم صفحات الويب. من خلال استخدام الوسوم المناسبة، يمكنك تحسين قراءة المحتوى وزيادة جاذبيته. تأكد دائمًا من استخدام التنسيقات بشكل مناسب لتلبية احتياجات المستخدمين وتحسين تجربتهم. باستخدام HTML، يمكنك تحقيق تنسيق فعال ومؤثر للنصوص في صفحاتك، مما يسهم في توصيل المعلومات بشكل واضح وجذاب.