التنسيق والألوان والاقتباسات

عناصر تنسيق النص (Formatting)

HTML يوفّر عناصر دلالية لتنسيق النص بمعنى، لا بمجرّد شكل:

<strong>مهم</strong>      <!-- أهمية قوية (يظهر غامقًا) -->
<em>تأكيد</em>            <!-- تشديد (يظهر مائلًا) -->
<mark>مُبرَز</mark>        <!-- تحديد بالأصفر -->
<small>نص صغير</small>
<del>محذوف</del>          <!-- يظهر مشطوبًا -->
<ins>مُضاف</ins>          <!-- يظهر تحته خط -->
<sub>سفلي</sub>           <!-- H<sub>2</sub>O -->
<sup>علوي</sup>           <!-- x<sup>2</sup> -->

🔑 فضّل <strong>/<em> (لهما معنى يفهمه قارئ الشاشة) على <b>/<i> (شكل فقط).

<p>الصيغة الكيميائية للماء هي H<sub>2</sub>O.</p>
<p>السعر <del>100</del> <ins>80</ins> ريال.</p>

التعليقات (Comments)

نص لا يظهر للمستخدم، لشرح الكود لنفسك ولفريقك:

<!-- هذا تعليق لا يظهر في الصفحة -->
<p>محتوى مرئي</p>

التنسيق المضمّن (Inline Style)

السمة style تضيف تنسيق CSS مباشرة (للتجربة السريعة فقط):

<p style="color: red; font-size: 20px;">نص ملوّن</p>

⚠️ التنسيق المضمّن يصعب صيانته. الأفضل وضع CSS في ملف منفصل عبر <link> (راجع درس الـ head).

الألوان (Colors)

تُكتب الألوان في CSS بعدة صيغ:

<p style="color: #00f5ff;">سماوي</p>
<div style="background-color: rgb(20, 20, 30);">خلفية داكنة</div>

الاقتباسات (Quotations)

<blockquote cite="https://example.com">
  <p>الكود الجيد يوثّق نفسه بنفسه.</p>
</blockquote>

<p>قال <q>اقتباس قصير ضمن السطر</q> أمس.</p>

<p><abbr title="World Health Organization">WHO</abbr></p>

• <blockquote> لاقتباس طويل (كتلة).
• <q> لاقتباس قصير ضمن السطر (يضيف علامات تنصيص تلقائيًا).
• <abbr> للاختصارات مع شرحها في title.

الأخطاء الشائعة

• ❌ استخدام <b>/<i> للأهمية → استخدم <strong>/<em>.
• ❌ الإكثار من style المضمّن → انقل التنسيق إلى ملف CSS.
• ❌ ألوان بتباين ضعيف → سيئ للقراءة والوصول.

خلاصة

استخدم عناصر التنسيق الدلالية (strong, em, mark, sub, sup...)، والتعليقات لشرح الكود، وافهم صيغ الألوان (Hex/RGB)، وفضّل CSS الخارجي على style المضمّن.