شرح تعليم هيكل مستند HTML والعناصر الأساسية

byمدونة العرائش التقنية -

هيكل مستند HTML والعناصر الأساسية

شرح تعليم هيكل مستند HTML والعناصر الأساسية

هيكل مستند HTML الكامل

كل صفحة HTML يجب أن تبدأ بهذا الهيكل الأساسي:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>عنوان الصفحة</title>
</head>
<body>
    <!-- محتوى الصفحة هنا -->
</body>
</html>

شرح كل جزء:

العنصر الوصف هل هو إلزامي؟
<!DOCTYPE html> يخبر المتصفح أن هذه صفحة HTML5 ✅ نعم
<html> العنصر الجذر الذي يحيط بكل المحتوى ✅ نعم
<head> يحتوي على معلومات عن الصفحة (غير مرئية للزوار) ✅ نعم
<meta charset="UTF-8"> يحدد ترميز الأحرف (مهم للغة العربية) ✅ نعم
<title> عنوان الصفحة الذي يظهر في تبويب المتصفح ✅ نعم
<body> يحتوي على كل المحتوى المرئي للصفحة ✅ نعم

💡 معلومة مهمة:

السمة lang="ar" تخبر المتصفح أن اللغة عربية، وdir="rtl" تجعل النصوص من اليمين لليسار.


دليل كامل حول أنواع عناصر HTML

1. العناصر الكتلية (Block Elements)

تبدأ من سطر جديد وتأخذ العرض الكامل:

  • <h1> إلى <h6> - العناوين
  • <p> - الفقرات
  • <div> - حاوية
  • <ul>, <ol> - القوائم

مثال عملي:

هذا فقرة (عنصر كتلي)

هذا فقرة أخرى في سطر جديد

2. العناصر المضمنة (Inline Elements)

لا تبدأ من سطر جديد وتأخذ المساحة اللازمة فقط:

  • <a> - الروابط
  • <strong> - نص عريض
  • <em> - نص مائل
  • <span> - حاوية مضمنة

مثال عملي:

هذا نص يحتوي على نص عريض و نص مائل و رابط جميعهم في نفس السطر.


كيفية إنشاء العناوين في HTML

HTML يوفر 6 مستويات للعناوين، من <h1> (الأهم) إلى <h6> (الأقل أهمية):

            
            
            
هذا عنوان رئيسي <h1> (يجب أن يكون واحد فقط في الصفحة)

            
هذا عنوان فرعي <h2>

            
هذا عنوان فرعي <h3>

            
هذا عنوان فرعي <h4>

            
هذا عنوان فرعي <h5>

            
هذا عنوان فرعي <h6>

قواعد استخدام العناوين:

  1. استخدم <h1> مرة واحدة فقط في كل صفحة (للعناوين الرئيسية)
  2. لا تقفز بين المستويات (لا تنتقل من h1 إلى h3 مباشرة)
  3. العناوين مهمة لمحركات البحث (SEO)
  4. استخدمها لتنظيم المحتوى بشكل هرمي

❌ مثال خاطئ:

<h1>عنوان رئيسي</h1>
<h3>عنوان فرعي</h3> <!-- خطأ: قفزت من h1 إلى h3 -->
<h2>عنوان آخر</h2> <!-- خطأ: h2 بعد h3 -->

✅ مثال صحيح:

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

📝 الفقرات والنصوص

عنصر الفقرة <p>

يستخدم لعرض النصوص الطويلة:

هذه فقرة عادية في HTML. يمكن أن تحتوي على كمية كبيرة من النصوص التي تتحدث عن موضوع معين. الفقرات تبدأ من سطر جديد وتحتوي على مسافة قبلها وبعدها تلقائياً.

هذه فقرة ثانية. لاحظ أنها بدأت من سطر جديد.

تنسيق النصوص:

العنصر الوصف مثال
<strong> نص مهم (عريض) هذا نص مهم
<em> نص مؤكد (مائل) هذا نص مؤكد
<u> نص تحته خط هذا نص تحته خط
<br> فاصل سطر (لا يحتاج وسم إغلاق) سطر أول
سطر ثاني
<hr> خط أفقي (لا يحتاج وسم إغلاق) أعلى الخط
تحت الخط

مثال متكامل:

هذا فقرة تحتوي على نص عريض و نص مائل و نص تحته خط.

يمكنني كتابة نص في سطر واحد
ثم أكمل في السطر التالي بنفس الفقرة.

هذا فقرة جديدة بعد الخط الأفقي.


شرح بناء صفحة HTML شخصية

المطلوب:

أنشئ صفحة HTML كاملة تحتوي على:

  1. الهيكل الكامل للصفحة (DOCTYPE, html, head, body)
  2. عنوان رئيسي واحد <h1> باسمك
  3. ثلاثة أقسام باستخدام <h2> لكل قسم:
    • عن نفسي
    • هواياتي
    • اتصل بي
  4. فقرات تحت كل قسم
  5. روابط لمواقعك المفضلة
  6. استخدام <strong> و <em>

قالب لتبدأ منه:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>صفحتي الشخصية</title>
</head>
<body>
    <h1>مرحباً، أنا [اسمك]</h1>
    
    <h2>عن نفسي</h2>
    <p>... اكتب هنا عن نفسك ...</p>
    
    <!-- أكمل الباقي -->
</body>
</html>

إختبار الدرس الأول في لغة HTML

1. أي من هذه يجب أن يكون في كل صفحة HTML؟





2. كم مرة يجب استخدام <h1> في الصفحة؟





3. ما الفرق بين <strong> و <em>؟





📚 ملخص الدرس التعليمي الأول في HTML

  • تعلمنا الهيكل الكامل لصفحة HTML
  • عرفنا الفرق بين العناصر الكتلية والمضمنة
  • استخدمنا العناوين من h1 إلى h6 بشكل صحيح
  • تعلمنا إنشاء الفقرات وتنسيق النصوص
  • أنشأنا روابط داخلية وخارجية

↑ العودة للأعلى | الدرس السابق | الدرس التالي: القوائم والصور

© 2025 دورة HTML للمبتدئين - الدرس 1

Tags

إرسال تعليق

أحدث أقدم

نموذج الاتصال