1. الوسوم الأساسية لتنسيق النصوص
أ. <b> أو <strong>: النص الغامق
<b>: يُظهر النص بخط غامق دون إضافة أهمية دلالية (فقط لأغراض التنسيق).<strong>: يُظهر النص بخط غامق مع إضافة أهمية دلالية (يُستخدم للمحتوى المهم مثل التحذيرات).
<p>هذا نص <b>عادي</b>، وهذا نص <strong>مهم</strong>.</p>
النتيجة:
هذا نص عادي، وهذا نص مهم.
ب. <i> أو <em>: النص المائل
<i>: يُظهر النص بميل دون دلالة خاصة (مثل الكلمات الأجنبية).<em>: يُظهر النص بميل مع إضافة دلالة على التأكيد أو التركيز.
<p>هذا نص <i>مائل</i>، وهذا نص <em>مؤكد</em>.</p>
النتيجة:
هذا نص مائل، وهذا نص مؤكد.
ج. <u>: النص المُسطَّر
الاستخدام: لتسطير النص، لكن يُنصح بتجنبه لأنه قد يُشبه الروابط.
<p>هذا نص <u>مُسطَّر</u>.</p>
النتيجة:
هذا نص <u>مُسطَّر</u>.
د. <mark>: تمييز النص
الاستخدام: لتلوين خلفية النص (مثل التظليل بالأصفر).
<p>هذا نص <mark>مميز</mark>.</p>
النتيجة:
هذا نص <mark>مميز</mark>.
هـ. <small>: نص صغير الحجم
الاستخدام: لعرض نص بحجم أصغر (مثل الشروط والأحكام).
<p>هذا نص <small>صغير</small>.</p>
النتيجة:
هذا نص <small>صغير</small>.
و. <del> و <ins>: النص المحذوف والمُضاف
<del>: يُظهر النص ~~المحذوف~~ بخط يتوسطه خط.<ins>: يُظهر النص المُضاف <ins>بخط مسطَّر</ins>.
<p>السعر القديم: <del>100 ريال</del>. السعر الجديد: <ins>80 ريال</ins>.</p>
النتيجة:
السعر القديم: ~~100 ريال~~. السعر الجديد: <ins>80 ريال</ins>.
ز. <sub> و <sup>: النص السفلي والعلوي
<sub>: يُستخدم للنص السفلي (مثل H<sub>2</sub>O).<sup>: يُستخدم للنص العلوي (مثل x<sup>2</sup>).
<p>الماء: H<sub>2</sub>O. المعادلة: x<sup>2</sup> + y<sup>2</sup>.</p>
النتيجة:
الماء: H<sub>2</sub>O. المعادلة: x<sup>2</sup> + y<sup>2</sup>.
2. وسوم تنسيق النصوص المتقدمة
أ. <pre>: النص المُنسَّق مسبقًا
الاستخدام: للحفاظ على المسافات والتفاصيل كما هي (مثل عرض الأكواد).
<pre> هذا نص مع مسافات واضحة. </pre>
النتيجة:
هذا نص
مع مسافات
واضحة. ب. <code>: عرض الأكواد البرمجية
الاستخدام: لعرض الأكواد داخل النص (يُفضل دمجه مع
<pre>).
<p>استخدم الأمر <code>console.log()</code> لطباعة النتائج.</p>
النتيجة:
استخدم الأمر console.log() لطباعة النتائج.
ج. <blockquote>: الاقتباس الطويل
الاستخدام: لعرض اقتباس طويل مع مسافة بادئة.
<blockquote> "التعلم دون تطبيق كالشجرة بلا ثمر." </blockquote>
النتيجة:
“التعلم دون تطبيق كالشجرة بلا ثمر.”
د. <q>: الاقتباس القصير
الاستخدام: لعرض اقتباس قصير مع إضافة علامات الاقتباس تلقائيًا.
<p>قال <q>التجربة هي أفضل معلم</q>.</p>
النتيجة:
قال “التجربة هي أفضل معلم”.
3. وسوم تنسيق النصوص القديمة (غير مُوصى بها)
| الوسم | الوصف | البديل الحديث |
|---|---|---|
<font> | لتغيير لون أو حجم النص | استخدم CSS (مثل: style="color: red;") |
<center> | لتوسيط النص | استخدم CSS (مثل: style="text-align: center;") |
<strike> | ~~نص يتوسطه خط~~ | استخدم <del> أو <s> |
4. تنسيق النصوص باستخدام CSS
للحصول على تحكم أكبر، استخدم CSS مع وسم <span>:
أ. تغيير اللون
<p>هذا نص <span style="color: red;">أحمر</span>.</p>
النتيجة:
هذا نص <span style=”color: red;”>أحمر</span>.
ب. تغيير حجم الخط
<p>هذا نص <span style="font-size: 20px;">كبير</span>.</p>
النتيجة:
هذا نص <span style=”font-size: 20px;”>كبير</span>.
ج. تغيير نوع الخط
<p>هذا نص <span style="font-family: Arial;">بخط مختلف</span>.</p>
النتيجة:
هذا نص <span style=”font-family: Arial;”>بخط مختلف</span>.
5. أفضل الممارسات لتنسيق النصوص
استخدم الوسوم الدلالية مثل
<strong>بدلًا من<b>لتحسين SEO.تجنب الإفراط في التنسيق: كثرة الألوان أو الأنماط تشتت القارئ.
استخدم CSS للتحكم المرن: مثلاً، استخدم
text-decoration: underline;بدلًا من<u>.اختبر الصفحة على متصفحات مختلفة: للتأكد من ظهور التنسيق بشكل صحيح.
6. مثال شامل
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <style> .important { color: red; font-weight: bold; } .quote { border-left: 3px solid #333; padding-left: 10px; margin: 10px 0; } </style> </head> <body> <h1>مقالة عن تنسيق النصوص</h1> <p>هذه جملة تحتوي على <strong>نص مهم</strong> و<i>نص مائل</i>.</p> <blockquote class="quote"> "التعلم هو بداية الطريق إلى النجاح." </blockquote> <p>المعادلة الكيميائية: CO<sub>2</sub>.</p> <p><span class="important">ملاحظة</span>: هذا نص تحذيري.</p> </body> </html>
الخلاصة
تنسيق النصوص في HTML سهل وممتع! تذكر دائمًا:
الوسوم الدلالية تُحسّن SEO وإمكانية الوصول.
CSS يمنحك تحكمًا أكبر في التصميم.
التجربة العملية هي أفضل طريقة للتعلم.
