مفهوم تنسيق النصوص في لغة HTML
تنسيق النصوص ( Text Formatting ) في HTML هي عرض النص متناسق و جميل بشكل أفضل. يعني إن كانت هنالك كلمة مهمة نوعاً ما في النص يُمكننا تمييز عرضها بخط عريض Bold. و إن كان يوجد شيء قد تم حذفه في النص يُمكن عرض خط فوقه من أجل الإشارة إلى أنه محذوف.
يحتوي ملف HTML على علامات ترميز تستخدم لتحديد نوع و تنسيق المحتوى المعروض على الصفحة، مثل العناوين، الفقرات، الصور، الروابط، القوائم، وغيرها. ويمكن استخدام CSS (Cascading Style Sheets) لإضفاء تنسيقات وأنماط مختلفة على عناصر HTML، مما يساعد على تحسين مظهر الصفحة وتحسين تجربة المستخدم.
وسوم عرض النص بخط عريض
عندما نريد التركيز على كلمة أو تكون كلمة مهمة في صفحة الويب نقوم بوضعها بخط عريض ( 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>.
عرض النص بخط مائل
إذا أردنا جعل بعض الكلمات في صفحة الويب بخط مائل ( Italic ) نسخدم الوسمين الآتيين:
- يمكن وضع الكلمة بين <i> و </i>.
- يمكن وضع الكلمة بين <em> و </em>.
نستطيع أن نستخدم ما شئنا من الوسمين السابقين من أجل جعل النص مائلاً.
مثال 2
<p>My website <i>Programmer Tech</i></p> <p>My website <em>Programmer Tech</em></p>
أنشأنا فقرة و في داخل هذه الفقرة قمنا في السطر الأول بإستخدام الوسم <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>.
وضع خط تحت النص
عندما نريد تمييز كلمة بوضع خط أسفل الكلمة ( 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>.
تعليم اجزاء من النص
يمكن تمييز ( Text Marking ) نص محدد ضمن صفحة الويب و يكون هذا أن يتم وضع خلفية صفراء للكلمة التي نريد تمييزها لإلفات النظر لها. يتم تمييز النصوص بخلفية صفراء عن طريق وضعها بين الوسم <mark> و </mark>.
مثال 5
<p>My website <mark>Programmer Tech</mark></p>
أنشأنا فقرة و في داخل الفقرة إستخدمنا الوسم <mark> من أجل إلفات نظر المستخدم على كلام هام.
عرض جزء من النص بشكل مرتفع و منخفض
في بعض الأحيان نريد كتابة عمليات حسابية كسرية و رموز كيميائية يتم بها كتابة بعض الأرقام بشكل مرتفع قليلاً أو منخفض قليلاً عن الكلمة في نفس السطر. يوجد وسمين مسؤولان عن إرتفاع النص و إنخفاضه و هما:
- إذا كنا نريد أن نجعل جزء من النص مرتفع قليلاً نستخدم الوسم <sup> و </sup> وهو إختصار للكلمة ( Super Script ).
- إذا كنا نريد أن نجعل جزء من النص منخفض قليلاً نستخدم الوسم <sub> و </sub> وهو إختصار للكلمة ( Sub Script ).
مثال 6
<p>My website <sup>Programmer Tech</sup></p> <p>My website <sub>Programmer Tech</sub></p>
أنشأنا فقرة و في داخل هذه الفقرة قمنا في السطر الأول بإستخدام الوسم <sup> و في السطر الثاني إستخدمنا الوسم <sub>.
ما هي الوسوم المستخدمة لتحقيق تنسيق النصوص المتقدم في HTML؟
لتحقيق تنسيق النصوص المتقدم في HTML، يمكنك استخدام الوسوم والعناصر التالية:
- وسم <span>: يُستخدم لتطبيق تنسيق محدد على جزء صغير من النص في سياق أو عبارة معينة. يمكن استخدام وسوم CSS لتعديل التنسيق داخل الوسم <span>.
- وسم <div>: يُستخدم لتجميع مجموعة من العناصر وتنظيمها في مربع أو مجال معين. يمكن استخدام وسوم CSS لتعديل التنسيق الخارجي للوسم <div>.
- وسم <pre>: يُستخدم لعرض النص بتنسيق مسبق (preformatted)، حيث يتم الاحتفاظ بتنسيق النص الأصلي مع الفواصل والمسافات كما هي.
- وسم <code>: يُستخدم لتمييز قطعة من النص ككود برمجي، ويتم عرضه بخط ثابت وبخلفية مختلفة.
- وسم <mark>: يُستخدم لتمييز جزء من النص بتظليله بلون محدد، عادةً اللون الأصفر.
- وسم <del>: يُستخدم لعرض النص المحذوف أو المحذوف جزئيًا، حيث يتم عرضه بخط مسطَّر عبر النص.
- وسم <ins>: يُستخدم لعرض النص المضاف أو المضاف جزئيًا، حيث يتم عرضه بخط مسطَّر تحت النص المضاف.
هذه هي بعض الوسوم المستخدمة في HTML لتحقيق تنسيق النصوص المتقدم. يمكنك أيضًا استخدام وسوم CSS وتنسيقاتها لتحقيق تنسيق مفصل ومخصص للنصوص في صفحات HTML الخاصة بك.
هل يمكنني استخدام وسم <span> لتغيير لون النص؟
نعم، يمكنك استخدام وسم <span> لتغيير لون النص في HTML. يمكنك تحقيق ذلك عن طريق استخدام CSS لتعيين خاصية اللون (color) للوسم <span>.
فيما يلي مثال يوضح كيفية استخدام وسم <span> لتغيير لون النص:
<p>هذا <span style="color: red;">نص بلون أحمر</span> وهذا <span style="color: blue;">نص بلون أزرق</span>.</p>
في هذا المثال، تم وضع وسم <span> حول النص الذي نريد تغيير لونه، ثم استخدمنا خاصية اللون (color) في وسم <span> وقمنا بتعيينها إلى اللون المطلوب باستخدام القيمة اللونية (مثل “red” للأحمر و “blue” للأزرق).
يمكنك تعديل قيمة اللون وفقًا لتفضيلاتك، سواء بتحديد الألوان باستخدام أسماء الألوان المدعومة أو استخدام قيم HEX أو RGB للألوان.
يمكنك أيضًا استخدام CSS الخارجي لتعيين تنسيقات اللون لوسم <span> بدلاً من استخدام الأنماط المضمنة كما هو موضح في المثال أعلاه.
في هذا المثال، سنفترض أن لدينا النص التالي في عنصر <span>:
<span class="colored-text">نص ملون</span>
ثم يمكنك تعريف تنسيق اللون في CSS الخارجي بالنحو التالي:
.colored-text {
color: red;
}في هذا المثال، تم استهداف العنصر <span> باستخدام محدد الفئة (class selector) .colored-text في CSS. ثم قمنا بتعيين خاصية اللون (color) إلى القيمة اللونية “red” لتطبيق لون أحمر على النص.
يمكنك تغيير القيمة اللونية وفقًا لتفضيلاتك في CSS الخارجي. يتيح لك استخدام CSS الخارجي التعديل على تنسيقات اللون لعناصر HTML بشكل مرن ومركز.
