مدونة جوارا: تنسيق النصوص في HTML

أهلاً وسهلاً يا مبرمج! اليوم بنتكلم عن تنسيق النصوص في HTML، موضوع أساسي ومهم عشان صفحتك تطلع مرتبة وحلوة.

العناوين (Headings)

العناوين هي اللي تحدد هيكل صفحتك. عندنا من <h1> (الأهم والأكبر) إلى <h6> (الأقل أهمية والأصغر).

<h1>هذا عنوان رئيسي</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان أصغر</h3>

نصيحة: استخدم <h1> مرة واحدة بس في الصفحة عشان محركات البحث تفهم موضوع الصفحة صح.

الفقرات (Paragraphs)

للشرح والنصوص العادية، استخدم وسم <p>.

<p>هذه فقرة عادية تحتوي على معلومات.</p>
<p>وهذه فقرة ثانية، كل فقرة تبدأ بسطر جديد تلقائياً.</p>

النصوص السميكة والمائلة (Bold & Italic)

عشان تبرز كلمة أو جملة، عندك كم وسم:

<strong>: للنصوص المهمة (عادةً تظهر سميكة).
<em>: للنصوص اللي فيها تركيز (عادةً تظهر مائلة).
<b>: للنصوص السميكة بدون أهمية خاصة.
<i>: للنصوص المائلة بدون أهمية خاصة.

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

ملاحظة: يفضل استخدام <strong> و <em> لأنها تعطي معنى دلالي (semantic) للمحتوى، وهذا أفضل لمحركات البحث وقارئات الشاشة.

الخطوط الأفقية وفواصل الأسطر (Horizontal Rule & Line Break)

إذا بغيت تفصل بين أجزاء المحتوى بخط أفقي، استخدم <hr>. وإذا بغيت تنزل سطر جديد داخل فقرة بدون ما تبدأ فقرة جديدة، استخدم <br>.

<p>هذا الجزء الأول من النص.<br>وهذا سطر جديد داخل نفس الفقرة.</p>
<hr>
<p>هذا الجزء الثاني من النص بعد الخط الفاصل.</p>

النصوص المنسقة مسبقاً (Preformatted Text)

لو عندك كود برمجي أو نص تبغاه يظهر بنفس تنسيقه الأصلي (بما في ذلك المسافات وفواصل الأسطر)، استخدم وسم <pre>.

<pre>
function greet(name) {
    console.log("Hello, " + name + "!");
}
greet("World");
</pre>

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

للاقتباسات الطويلة، استخدم <blockquote>. هذا الوسم يضيف مسافة بادئة للنص تلقائياً.

<blockquote>
    <p>البرمجة هي فن وعلم في نفس الوقت، وهي تتطلب الصبر والتفكير المنطقي.</p>
    <cite>مجهول</cite>
</blockquote>

القوائم (Lists)

عندنا نوعين رئيسيين من القوائم:

<ul>: قائمة غير مرتبة (Unordered List) - تستخدم نقاط.
<ol>: قائمة مرتبة (Ordered List) - تستخدم أرقام أو حروف.

كل عنصر في القائمة يكون داخل وسم <li>.

<h4>قائمة غير مرتبة:</h4>
<ul>
    <li>تفاح</li>
    <li>برتقال</li>
    <li>موز</li>
</ul>

<h4>قائمة مرتبة:</h4>
<ol>
    <li>الخطوة الأولى</li>
    <li>الخطوة الثانية</li>
    <li>الخطوة الثالثة</li>
</ol>

الروابط (Links)

لإنشاء رابط يودي لمكان ثاني، استخدم وسم <a> مع الخاصية href.

<p>زوروا <a href="https://www.google.com">جوجل</a>.</p>
<p><a href="#top">العودة للأعلى</a> (مثال على رابط داخلي).</p>

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

← السابق الفهرس