شرح العناوين والفقرات في HTML للمبتدئين و تعلم استخدام h1 إلى h6 و وسم p
شرح العناوين والفقرات في HTML للمبتدئين و تعلم استخدام h1 إلى h6 و وسم p
بعد أن تعرفنا في الدرس السابق على الهيكل الأساسي لأي صفحة HTML، وتعلمنا كيف نقوم بإنشاء الصفحة باستخدام العناصر الأساسية مثل:
وسم <!DOCTYPE html>
وسم <html>
وسم <head>
وسم <body>
وشرحنا كيف يعمل هذا الهيكل لتنظيم صفحات الويب، ننتقل اليوم إلى خطوة جديدة ومهمة جدًا، وهي طريقة إضافة النصوص وتنظيمها داخل الصفحة باستخدام العناوين والفقرات.
إذا لم تقرأ الدرس السابق، أنصحك بالعودة إليه أولًا لفهم أساس بناء صفحة HTML، ثم العودة إلى هذا الدرس لتتعلم كيف تضيف المحتوى داخل الصفحة.
في هذا الدرس سنتعلم:
ما هي العناوين في HTML؟
الفرق بين <h1> إلى <h6>.
كيفية استخدام وسم الفقرة <p>.
كيف ننظم النصوص داخل صفحات الويب بطريقة صحيحة.
لماذا نحتاج إلى تنظيم النصوص في HTML؟
تخيل أنك فتحت صفحة ويب تحتوي على نص طويل بدون عناوين أو تقسيمات، سيكون من الصعب قراءتها وفهمها.
هنا يأتي دور HTML، فهي لا تستخدم فقط لإنشاء هيكل الصفحة، بل تساعدنا أيضًا على تنظيم المحتوى باستخدام العناوين والفقرات.
العناوين تجعل الصفحة أكثر وضوحًا، والفقرات تجعل النص مرتبًا وسهل القراءة.
ما هي العناوين في HTML؟
العناوين (Headings) هي عناصر تستخدم لكتابة عناوين الصفحة وتقسيم المحتوى إلى أجزاء منظمة.
توفر HTML ستة مستويات من العناوين:
<h1>العنوان الرئيسي</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان أصغر</h3>
<h4>عنوان</h4>
<h5>عنوان</h5>
<h6>عنوان</h6>
يبدأ ترتيب العناوين من <h1> وهو العنوان الأكثر أهمية، حتى <h6> وهو الأقل أهمية.
وسم h1 في HTML
يعتبر <h1> أهم عنوان في الصفحة، ويستخدم غالبًا لكتابة عنوان الصفحة الرئيسي.
مثال:
<h1>تعلم HTML للمبتدئين</h1>
إذا كنت تكتب مقالًا عن تعلم HTML، فإن العنوان الرئيسي للمقال يكون داخل <h1>.
الفرق بين h1 و h2 و h3
كل مستوى له استخدام معين لتنظيم المحتوى:
<h1>تعلم تطوير الويب</h1>
<h2>تعلم HTML</h2>
<h3>العناوين والفقرات في HTML</h3>
الترتيب هنا:
<h1> عنوان الصفحة الرئيسي.
<h2> قسم رئيسي داخل الصفحة.
<h3> جزء داخل القسم.
وهذا يساعد المستخدم ومحركات البحث على فهم ترتيب المحتوى.
ما هو وسم الفقرة p؟
بعد كتابة العناوين نحتاج إلى كتابة النصوص، وهنا نستخدم وسم <p>.
وسم <p> اختصار لكلمة Paragraph، ويستخدم لإنشاء فقرة نصية.
مثال:
<p>
HTML هي اللغة الأساسية التي تستخدم لبناء هيكل صفحات الويب.
</p>
يقوم المتصفح بعرض النص داخل فقرة منفصلة لتكون الصفحة أكثر ترتيبًا.
مثال كامل باستخدام العناوين والفقرات
<!DOCTYPE html>
<html>
<head>
<title>تعلم HTML</title>
</head>
<body>
<h1>تعلم HTML للمبتدئين</h1>
<p>
HTML هي لغة تستخدم لإنشاء هيكل صفحات الويب.
</p>
<h2>أهمية HTML</h2>
<p>
تعتبر HTML أول خطوة لتعلم تطوير الويب.
</p>
<h2>ماذا سنتعلم؟</h2>
<p>
سنتعلم العناصر الأساسية لبناء صفحات احترافية.
</p>
</body>
</html>
أخطاء شائعة عند استخدام العناوين والفقرات
استخدام h1 أكثر من مرة بدون سبب
من الأفضل أن يكون لكل صفحة عنوان رئيسي واضح.
استخدام العناوين لتكبير حجم النص فقط
العناوين لها معنى في تنظيم المحتوى، أما تغيير حجم النص فيتم باستخدام CSS.
كتابة نصوص طويلة بدون استخدام p
دائمًا قم بتقسيم النصوص إلى فقرات حتى تكون سهلة القراءة.
تطبيق عملي
حاول إنشاء صفحة بسيطة تحتوي على:
عنوان رئيسي باسمك.
عنوان فرعي عن تعلم البرمجة.
فقرة تعرف فيها نفسك.
عنوان عن مشاريعك.
فقرة تشرح أحد مشاريعك.
مثال:
<h1>هشام عبدالرشيد</h1>
<h2>مطور Front-End</h2>
<p>
أتعلم تطوير الويب وأعمل على إنشاء مشاريع تعليمية لمساعدة المبتدئين.
</p>
الخلاصة
في هذا الدرس تعلمنا كيفية إضافة وتنظيم النصوص داخل صفحات HTML باستخدام العناوين والفقرات.
تعرفنا على:
العناوين من <h1> إلى <h6>.
أهمية ترتيب العناوين.
استخدام وسم <p> لكتابة الفقرات.
إنشاء صفحة HTML تحتوي على محتوى منظم.
وبعد أن تعلمنا في الدرس السابق الهيكل الأساسي لصفحة HTML، أصبح لدينا الآن القدرة على إنشاء صفحة تحتوي على هيكل صحيح ومحتوى منظم.
في الدرس القادم سنتعلم الجمل الشرطية في لغة JavaScript تكملة لسلسلة
🏆 Hisham Academy
🎯 اختبر نفسك الآن !!!!
تهانينا! لقد أنهيت هذا الدرس بنجاح. 🎉
لكن هل فهمت كل ما تعلمته بالفعل؟
لا تكتفِ بالقراءة، بل اختبر معلوماتك من خلال الاختبار التفاعلي الذي صممته خصيصًا لهذا الدرس ضمن سلسلة Hisham Academy.
🧠 مميزات الاختبار:
أسئلة متنوعة تقيس مدى فهمك.
نتيجة فورية بعد الانتهاء.
تصميم بسيط وسريع يعمل على الهاتف والكمبيوتر.
يساعدك على معرفة نقاط القوة والجوانب التي تحتاج إلى مراجعتها.
🔗 ابدأ الاختبار الآن:
https://hishamabdulrashid999.github.io/test_3/
أضغط هنا للبدء في الأختبار
📚 تابع الدرس التالي في سلسلة Hisham Academy ولا تنسَ حفظ المقال ومشاركته مع من يريد تعلم برمجة الويب من الصفر.
وأخبرني رأيك في التعليقات هل فعلاً أستفدت من هذا المقال
