هيكلة النص: العناوين والفقرات والقوائم

تعلّم تنظيم النص عبر تسلسل هرمي من العناوين والفقرات والقوائم.

7 دقيقة · 3 أسئلة

افتح كتاب طبخ: هناك عنوان الكتاب، وعناوين الفصول، ثم عناوين الوصفات. تقدّم HTML التسلسل الهرمي نفسه بستة مستويات من العناوين، من <h1> إلى <h6>. الحرف h اختصار لكلمة heading أي عنوان. فالوسم <h1> هو العنوان الرئيسي للصفحة، و<h2> عنوان قسم، و<h3> عنوان فرعي، وهكذا نزولًا حتى <h6>.

<h1>My recipe notebook</h1>
<h2>Starters</h2>
<h3>Carrot soup</h3>
<h2>Desserts</h2>
<h3>Apple pie</h3>

بالنسبة إلى النص العادي، تستخدم الوسم <p> من الدرس السابق. تفصيل مهم واحد: الضغط على مفتاح Enter في ملفك لا يُنشئ فقرة جديدة على الشاشة. فالمتصفح يتجاهل فواصل الأسطر والمسافات المتكررة. ولفصل فكرتين، يجب أن تكتب عنصرَي <p> منفصلين.

<h2>Apple pie</h2>
<p>A simple recipe, perfect for beginners.</p>
<p>Allow 30 minutes of preparation in total.</p>

لسرد العناصر، تقدّم HTML نوعين من القوائم. الوسم <ul> (unordered list أي قائمة غير مرتّبة) يعرض نقاطًا: مثالي لقائمة تسوّق لا يهمّ فيها الترتيب. والوسم <ol> (ordered list أي قائمة مرتّبة) يعرض أرقامًا: مثالي لخطوات وصفة. وفي الحالتين، يُكتب كل عنصر من القائمة بالوسم <li> (list item أي عنصر قائمة).

<ul>
  <li>3 apples</li>
  <li>1 pie crust</li>
  <li>2 spoonfuls of sugar</li>
</ul>
<ol>
  <li>Preheat the oven to 180 degrees.</li>
  <li>Cut the apples into slices.</li>
  <li>Bake for 35 minutes.</li>
</ol>

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. أي وسم تستخدم للعنوان الرئيسي في الصفحة؟
   • <h6>
   • <h1>
   • <p>
   • <heading>
2. أي وسم يُنشئ قائمة مرقّمة؟
   • <ul>
   • <ol>
   • <li>
3. كيف تعرض فقرتين منفصلتين على الشاشة؟
   • بالضغط على Enter مرتين في الملف
   • بكتابة عنصرَي <p> منفصلين
   • بإضافة مسافات بين الجمل