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

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

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

أهلاً، اليوم بنتكلم عن تنسيق النصوص في HTML. كيف تخلي النص عريض، مائل، أو حتى تحط تحته خط. الموضوع بسيط ومباشر، ويلا نبدأ.

1. الخط العريض والمائل

تبغى تخلي النص عريض؟ عندك طريقتين:

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

نفس الشيء للمائل:

  • <em>: للنص اللي تبغى تأكد عليه أو تعطيه أهمية.
  • <i>: للنص المائل بس، زي أسماء الكتب أو الكلمات الأجنبية.

مثال:

<p>هذا نص <strong>مهم جداً</strong> ويجب الانتباه له.</p>
<p>هذا نص <b>عريض</b> بس ما هو ضروري يكون مهم.</p>
<p>هذا نص <em>مؤكد عليه</em>.</p>
<p>هذا نص <i>مائل</i> عادي.</p>

2. خط تحت النص، خط على النص، وأشياء ثانية

  • <u>: يحط خط تحت النص. زمان كان يستخدم للروابط، بس الحين يفضل تتجنبه إلا لأغراض معينة (زي الأخطاء الإملائية).
  • <del> أو <s>: يحط خط على النص (يشطبه). del معناه النص محذوف، و s معناه النص لم يعد دقيقاً.
  • <sub> و <sup>: للنص السفلي والعلوي، زي الصيغ الكيميائية (H₂O) أو الأسس (X²).
  • <mark>: يحدد النص (يسوي له هايلايت).
  • <small>: يخلي النص أصغر شوي.

مثال:

<p>هذا نص <u>مخطط تحته</u>.</p>
<p>السعر القديم كان <del>100 ريال</del> والآن 50 ريال.</p>
<p>صيغة الماء هي H<sub>2</sub>O.</p>
<p>المعادلة هي E = mc<sup>2</sup>.</p>
<p>لا تنسى <mark>النقاط الأساسية</mark>.</p>
<p><small>هذا نص صغير.</small></p>

3. فقرات، فواصل، واقتباسات

  • <p>: للفقرات العادية. كل فقرة تبدأ بسطر جديد.
  • <br>: يكسر السطر. يستخدم داخل الفقرة لو تبغى سطر جديد بدون ما تبدأ فقرة جديدة.
  • <hr>: خط أفقي يفصل بين أقسام المحتوى.
  • <blockquote>: للاقتباسات الطويلة. المتصفح عادةً يسوي لها مسافة بادئة من الجانبين.

مثال:

<p>هذه فقرة أولى.</p>
<p>هذه فقرة ثانية.<br>فيها كسر سطر.</p>
<hr>
<p>وهذا اقتباس:</p>
<blockquote>
    "البرمجة هي فن وعلم."
    <cite>— مبرمج حكيم</cite>
</blockquote>

4. أكواد البرمجة

لو عندك كود برمجي، استخدم <code> للنصوص البرمجية القصيرة وسط الشرح.

مثال: عشان تعرف متغير، تكتب let x = 10;.

وللأكواد الطويلة اللي فيها أكثر من سطر، يفضل تحطها داخل 

</code> و <code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">
(مثل ما استخدمناها في الأمثلة اللي فوق). هذا يساعد في الحفاظ على تنسيق الكود.

function greet(name) {
    console.log(<code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">Hello, ${name}!</code>);
}
greet('World');
ملاحظة: HTML يعطي معنى للنص، لكن التنسيق الفعلي (الألوان، الأحجام، الخطوط) يجي عادةً من CSS. لا تعتمد على HTML فقط للتصميم.

هذا كان ملخص سريع لأهم عناصر تنسيق النصوص في HTML. طبقها وجرب بنفسك عشان تفهمها أكثر!