← الدرس السابق المستوى 2 - الدرس 2 من 8

📝 العناصر الأساسية في HTML: بناء المحتوى النصي الاحترافي

تعلم كيف تُنشئ عناوين، وفقرات، وقوائم، وتنسيقات نصية تجعل محتواك مقروءًا وجذابًا للزوار

تقدمك في المستوى الثاني 25%

📖 مقدمة: المحتوى النصي هو العمود الفقري لكل موقع ويب

في الدرس السابق، بنيت هيكل صفحة HTML الأساسي — لكن الهيكل بدون محتوى كالجسد بدون روح. في هذا الدرس، ستتعلم العناصر النصية الأساسية التي تُشكل المحتوى الفعلي لأي موقع ويب: العناوين التي تُوجه القارئ، الفقرات التي تُنقل المعلومات، القوائم التي تُنظم الأفكار، والتنسيقات التي تُضفي المعنى والتأكيد.

تخيل أنك تقرأ مقالًا إخباريًا أو مدونة تقنية. ما الذي يجعلك تقرأه بسهولة؟ العناوين الواضحة التي تُخبرك بمحتوى كل قسم، الفقرات المقسمة بشكل منطقي، القوائم التي تُسهل استيعاب النقاط الرئيسية، والكلمات المُؤكدة التي تلفت انتباهك. كل هذه العناصر تُبنى باستخدام وسوم HTML بسيطة — وفي هذا الدرس ستتعلمها جميعًا.

🎯 العناوين (Headings): توجيه القارئ وتنظيم المحتوى

العناوين هي أول شيء يراه القارئ عند دخوله إلى صفحتك. ليست مجرد نصوص كبيرة — إنها أداة تنظيم وهيكلة تُساعد القارئ على فهم تسلسل المحتوى. HTML يوفر 6 مستويات للعناوين، من h1 (الأكبر والأهم) إلى h6 (الأصغر).

📌 لماذا هرمية العناوين مهمة؟

تخيل كتابًا بدون فصول أو عناوين فرعية — سيكون من الصعب جدًا قراءته واستيعابه. نفس الشيء ينطبق على مواقع الويب. هرمية العناوين تُساعد:

<!-- هرمية العناوين الصحيحة --> <h1>عنوان الصفحة الرئيسي (موضوع واحد فقط)</h1> <h2>قسم رئيسي 1</h2> <p>محتوى القسم الأول...</p> <h2>قسم رئيسي 2</h2> <h3>قسم فرعي 2.1</h3> <p>محتوى القسم الفرعي...</p> <h2>قسم رئيسي 3</h2> <h3>قسم فرعي 3.1</h3> <h4>تفصيل صغير 3.1.1</h4>

⚠️ قاعدة ذهبية: استخدم h1 مرة واحدة فقط في الصفحة — وهو عنوان الصفحة الرئيسي. لا تتخطى مستويات (مثل الانتقال من h2 إلى h4 مباشرة). هذا مهم لـ SEO وإمكانية الوصول.

📊 مقارنة أحجام العناوين

الوسم الحجم الافتراضي الاستخدام
<h1> 2em (32px تقريبًا) عنوان الصفحة الرئيسي — مرة واحدة فقط
<h2> 1.5em (24px) عناوين الأقسام الرئيسية
<h3> 1.17em (18.7px) عناوين الأقسام الفرعية
<h4> 1em (16px) عناوين صغيرة داخل الأقسام
<h5> 0.83em (13.3px) عناوين دقيقة نادرًا ما تُستخدم
<h6> 0.67em (10.7px) أصغر عنوان — نادر الاستخدام

📄 الفقرات والنصوص: بناء المحتوى المقروء

الفقرات هي الوحدة الأساسية للنص في HTML. الوسم <p> يُحيط بكل فقرة نصية، ويضيف تلقائيًا مسافة قبل وبعد الفقرة (margin). هذا يجعل النص مقسمًا وقابلًا للقراءة.

📌 وسوم النصوص الأساسية

<!-- الفقرة الأساسية --> <p>هذه فقرة نصية عادية. الفقرات تُفصل تلقائيًا بمسافات.</p> <!-- سطر جديد (بدون مسافة إضافية) --> <p>سطر أول<br>سطر ثاني (نفس الفقرة)</p> <!-- خط أفقي فاصل --> <p>محتوى قبل الخط</p> <hr> <p>محتوى بعد الخط</p>

الفرق بين <br> والفقرة الجديدة:

🎨 التنسيقات النصية: إضافة المعنى والتأكيد

HTML لا يُستخدم فقط لعرض النص — بل لإعطائه معنى دلالي (Semantic Meaning). هناك فرق بين جعل النص "عريضًا" وجعله "مهمًا". التنسيقات الدلالية تُساعد محركات البحث وقارئات الشاشة على فهم أهمية النص.

📌 التنسيقات الدلالية vs التنسيقات المرئية

الوسم الدلالي (يفضل) الوسم المرئي فقط المعنى العرض الافتراضي
<strong> <b> أهمية/تأكيد عريض
<em> <i> تأكيد/نبرة مائل
<mark> — تمييز/تظليل خلفية صفراء
<small> — نص ثانوي/ملاحظة حجم أصغر
<del> — نص محذوف مشطوب
<ins> — نص مُضاف تحته خط
<sub> / <sup> — منخفض/مرتفع H2O أو x2

⚠️ نصيحة مهمة: استخدم <strong> و <em> بدلاً من <b> و <i> كلما أمكن. الوسوم الدلالية تُعطي معنى للنص، لا مجرد مظهر. هذا مهم لـ SEO وإمكانية الوصول.

<!-- أمثلة على التنسيقات النصية --> <p> <strong>تحذير:</strong> هذا إجراء <strong>لا يمكن التراجع عنه</strong>. </p> <p> الصيغة الكيميائية للماء هي H<sub>2</sub>O. </p> <p> المعادلة: x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup> </p> <p> السعر الأصلي: <del>100 جنيه</del> السعر الجديد: <ins>75 جنيه</ins> </p> <p> <mark>هذا النص مُميز</mark> لجذب الانتباه. </p>

📝 القوائم: تنظيم المعلومات بشكل منطقي

القوائم هي أداة قوية لتنظيم المعلومات. HTML يوفر ثلاثة أنواع من القوائم، كل منها له استخدامه الخاص:

1️⃣ القوائم غير المرتبة (Unordered Lists — <ul>)

تُستخدم لعرض عناصر لا تتطلب ترتيبًا معينًا. كل عنصر يبدأ بنقطة (bullet). مثال: قائمة مكونات وصفة طبخ، أو قائمة ميزات منتج.

<ul> <li>HTML5</li> <li>CSS3</li> <li>JavaScript</li> <li>React</li> </ul>

2️⃣ القوائم المرتبة (Ordered Lists — <ol>)

تُستخدم لعرض عناصر تتطلب ترتيبًا (أرقام، أحرف، أرقام رومانية). مثال: خطوات وصفة طبخ، أو ترتيب أفضل الأفلام.

<ol> <li>افتح VS Code</li> <li>أنشئ ملف index.html</li> <li>اكتب هيكل HTML5</li> <li>افتح الملف في المتصفح</li> </ol>

3️⃣ قوائم الوصف (Description Lists — <dl>)

تُستخدم لعرض أزواج من "مصطلح ووصف". مثال: قاموس مصطلحات تقنية، أو أسئلة شائعة (FAQ).

<dl> <dt>HTML</dt> <dd>لغة ترميز تُستخدم لبناء هيكل صفحات الويب.</dd> <dt>CSS</dt> <dd>لغة تنسيق تُستخدم لتجميل وتصميم صفحات الويب.</dd> <dt>JavaScript</dt> <dd>لغة برمجة تُضيف التفاعل والحركة إلى المواقع.</dd> </dl>

📌 خصائص القوائم المرتبة (<ol>)

يمكنك تخصيص نوع الترقيم باستخدام خاصية type:

<ol type="A" start="3"> <li>الخطوة الثالثة</li> <li>الخطوة الرابعة</li> <li>الخطوة الخامسة</li> </ol> <!-- النتيجة: C. الخطوة الثالثة, D. الخطوة الرابعة, E. الخطوة الخامسة -->

📌 القوائم المتداخلة (Nested Lists)

يمكنك وضع قائمة داخل عنصر <li> لإنشاء قوائم متعددة المستويات:

<ul> <li>تطوير الويب <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </li> <li>تطوير الموبايل <ul> <li>React Native</li> <li>Flutter</li> </ul> </li> </ul>

🔗 الروابط (Links): قلب الإنترنت النابض

الروابط هي ما يجعل الإنترنت "شبكة" — فهي تربط الصفحات ببعضها. الوسم <a> (Anchor) يُستخدم لإنشاء روابط تشعبية.

<!-- رابط خارجي (يفتح في نفس التبويب) --> <a href="https://google.com">Google</a> <!-- رابط خارجي (يفتح في تبويب جديد) --> <a href="https://google.com" target="_blank">Google (جديد)</a> <!-- رابط داخلي (إلى صفحة أخرى في موقعك) --> <a href="about.html">عنّا</a> <!-- رابط مرساة (إلى قسم داخل نفس الصفحة) --> <a href="#contact">اذهب إلى التواصل</a> <h2 id="contact">قسم التواصل</h2> <!-- رابط بريد إلكتروني --> <a href="mailto:info@example.com">راسلنا</a> <!-- رابط هاتف (يفتح تطبيق الاتصال على الموبايل) --> <a href="tel:+201229068356">اتصل بنا</a>

⚠️ نصيحة أمان مهمة: عند استخدام target="_blank"، أضف rel="noopener noreferrer" لمنع الصفحة الجديدة من الوصول إلى صفحتك عبر JavaScript (هجوم Tab Nabbing):

<a href="https://example.com" target="_blank" rel="noopener noreferrer">رابط آمن</a>

💡 ملخص الدرس: النقاط الرئيسية

لنُلخّص ما تعلمناه في هذا الدرس:

🎯 التحدي العملي

قبل الانتقال إلى الدرس التالي، أكمل هذه التحديات:

  1. أنشئ صفحة HTML جديدة بعنوان "مقالتي الأولى" (استخدم h1).
  2. أضف مقدمة في فقرة واحدة، ثم اقسمها إلى 3 فقرات منفصلة.
  3. أضف 3 عناوين فرعية (h2) لأقسام المقال.
  4. في أحد الأقسام، استخدم قائمة مرتبة (<ol>) لعرض 5 خطوات.
  5. في قسم آخر، استخدم قائمة غير مرتبة (<ul>) لعرض 4 مميزات.
  6. أضف قائمة وصف (<dl>) تُعرّف 3 مصطلحات تقنية.
  7. استخدم <strong> و <em> و <mark> في النصوص لإضافة تأكيد.
  8. أضف رابطًا يؤدي إلى موقع أكاديمية البرمجة (يفتح في تبويب جديد بأمان).
  9. أضف رابطًا داخليًا يؤدي إلى قسم "الخلاصة" في أسفل الصفحة.
  10. افتح الصفحة في المتصفح وتأكد من أنها تبدو منظمة ومقروءة.

هذه التمارين ستُساعدك على ترسيخ ما تعلمته وإعدادك للدروس القادمة.

📚 مصادر إضافية للقراءة

إذا كنت ترغب في التعمق أكثر:

في الدرس القادم، ستتعلم الصور والوسائط في HTML — كيف تُضيف صورًا، وفيديوهات، وملفات صوتية إلى صفحاتك، وكيف تجعلها متجاوبة ومحسّنة للأداء. استعد!