البنية الأساسية لصفحة HTML

نظرة عامة على بنية الصفحة

كل صفحة HTML لها بنية أساسية ثابتة تتكون من عدة عناصر رئيسية.

هذه البنية مثل هيكل البيت – لها أساس وجدران وسقف. دعنا نتعرف على كل جزء بالتفصيل:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عنوان الصفحة</title>
</head>
<body>
    <h1>مرحباً بالعالم!</h1>
    <p>هذه أول صفحة HTML لي</p>
</body>
</html>
TypeScript
1. إعلان نوع المستند (DOCTYPE)
<!DOCTYPE html>
TypeScript
الغرض والأهمية:
  • يخبر المتصفح بأن هذا المستند مكتوب بـ HTML5
  • يجب أن يكون في أول سطر في الملف
  • بدونه قد يعمل المتصفح في “وضع التوافق” مما يسبب مشاكل في العرض
مثال عملي:
<!DOCTYPE html>
<!-- إذا لم تضع هذا السطر، قد تواجه مشاكل في تطبيق CSS أو JavaScript --></em>
<html>
...
</html>
HTML

لماذا HTML5؟

  • في الإصدارات القديمة كان DOCTYPE معقداً جداً
  • HTML5 بسّط الأمر إلى <!DOCTYPE html> فقط
2. العنصر الجذر (html)
<html lang="ar">
    <em><!-- كل محتوى الصفحة يكون هنا --></em>
</html>
TypeScript
الغرض والوظيفة:
  • الحاوي الرئيسي لكل عناصر الصفحة
  • يحدد اللغة المستخدمة في الصفحة
  • يساعد محركات البحث والتقنيات المساعدة
الخصائص المهمة:
خاصية اللغة (lang):
<html lang="ar">    <em><!-- للعربية --></em>
<html lang="en">    <em><!-- للإنجليزية --></em>
<html lang="fr">    <em><!-- للفرنسية --></em>
TypeScript

خاصية الاتجاه (dir):

html

<html lang="ar" dir="rtl">    <em><!-- من اليمين لليسار (العربية) --></em>
<html lang="en" dir="ltr">    <em><!-- من اليسار لليمين (الإنجليزية) --></em>
TypeScript
مثال متكامل:
<html lang="ar" dir="rtl">
    <em><!-- هذا يخبر المتصفح أن المحتوى عربي ويُقرأ من اليمين لليسار --></em>
</html>
TypeScript
3. قسم الرأس (head)
<head>
    <em><!-- معلومات عن الصفحة (غير مرئية للمستخدم) --></em>
</head>
TypeScript
الغرض الأساسي:
  • يحتوي على معلومات وصفية عن الصفحة
  • غير مرئي للمستخدم في المتصفح
  • مهم للمتصفحات ومحركات البحث
العناصر الأساسية داخل head:
أ) ترميز الأحرف (charset):
<meta charset="UTF-8">
TypeScript
  • يحدد نوع الترميز للأحرف
  • UTF-8 يدعم جميع اللغات بما فيها العربية
  • يجب أن يكون من أول العناصر في head
ب) إعدادات العرض (viewport):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
TypeScript
  • مهم للتصميم المتجاوب (Responsive Design)
  • يتحكم في كيفية عرض الصفحة على الأجهزة المختلفة
  • width=device-width: يجعل عرض الصفحة مساوياً لعرض الجهاز
  • initial-scale=1.0: مستوى التكبير الأولي 100%
ج) عنوان الصفحة (title):
<title>متجري الإلكتروني - الصفحة الرئيسية</title>
TypeScript
  • يظهر في شريط العنوان أو تبويب المتصفح
  • مهم جداً لمحركات البحث (SEO)
  • يظهر عند مشاركة الرابط على وسائل التواصل
مثال شامل لـ head:
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>موقع أحمد للتقنية - دروس البرمجة</title>
    <meta name="description" content="تعلم البرمجة من الصفر مع دروس مبسطة باللغة العربية">
    <meta name="keywords" content="HTML, CSS, JavaScript, برمجة, تطوير مواقع">
    <meta name="author" content="أحمد محمد">
</head>
TypeScript
عناصر إضافية مفيدة في head:

وصف الصفحة:

<meta name="description" content="وصف قصير عن محتوى الصفحة">
TypeScript

الكلمات المفتاحية:

<meta name="keywords" content="كلمة1, كلمة2, كلمة3">
TypeScript

المؤلف:

<meta name="author" content="اسم المؤلف">
TypeScript

أيقونة الموقع:

<link rel="icon" href="favicon.ico" type="image/x-icon">
TypeScript
4. جسم الصفحة (body)
<body>
    <!-- كل المحتوى المرئي للمستخدم يكون هنا --></em>
</body>
HTML
الغرض والوظيفة:
  • يحتوي على كل المحتوى المرئي للمستخدم
  • النصوص، الصور، الفيديوهات، الأزرار كلها داخل body
  • هو المكان الوحيد الذي يراه الزوار
عناصر أساسية داخل body:
العناوين (h1 إلى h6):
<h1>العنوان الرئيسي</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان فرعي أصغر</h3>
<h4>عنوان أصغر</h4>
<h5>عنوان صغير</h5>
<h6>أصغر عنوان</h6>
TypeScript

أمثلة عملية:

<h1>دليل تعلم HTML للمبتدئين</h1>
<h2>الفصل الأول: البنية الأساسية</h2>
<h3>1.1 عنصر DOCTYPE</h3>
<h3>1.2 عنصر HTML</h3>
TypeScript

الفقرات (p):

<p>هذه فقرة نصية تحتوي على معلومات مهمة.</p>
<p>وهذه فقرة أخرى منفصلة عن الأولى.</p>
TypeScript

مثال متكامل لـ body:

html

<body>
    <h1>مرحباً بك في موقعي</h1>
    <p>هذا الموقع يحتوي على دروس تعليمية في البرمجة.</p>
    
    <h2>ما ستتعلمه هنا:</h2>
    <p>ستتعلم أساسيات HTML وCSS وJavaScript بطريقة مبسطة وعملية.</p>
    
    <h3>لماذا تتعلم البرمجة؟</h3>
    <p>البرمجة مهارة مطلوبة في سوق العمل وتفتح لك آفاقاً جديدة.</p>
</body>
HTML
5. مثال شامل ومفصل

إليك مثال كامل يجمع كل العناصر الأساسية:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <em><!-- ترميز الأحرف - مهم للغة العربية --></em>
    <meta charset="UTF-8">
    
    <em><!-- إعدادات العرض للأجهزة المختلفة --></em>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <em><!-- عنوان الصفحة - يظهر في التبويب --></em>
    <title>أكاديمية التقنية - تعلم البرمجة من الصفر</title>
    
    <em><!-- وصف الصفحة لمحركات البحث --></em>
    <meta name="description" content="تعلم HTML وCSS وJavaScript من خلال دروس عملية ومبسطة باللغة العربية">
    
    <em><!-- الكلمات المفتاحية --></em>
    <meta name="keywords" content="HTML, CSS, JavaScript, تعليم البرمجة, دروس عربية">
    
    <em><!-- معلومات المؤلف --></em>
    <meta name="author" content="فريق أكاديمية التقنية">
</head>
<body>
    <em><!-- العنوان الرئيسي للصفحة --></em>
    <h1>مرحباً بك في أكاديمية التقنية</h1>
    
    <em><!-- مقدمة عن الموقع --></em>
    <p>نحن متخصصون في تعليم البرمجة وتطوير المواقع باللغة العربية بطريقة مبسطة وعملية.</p>
    
    <em><!-- قسم المسارات التعليمية --></em>
    <h2>المسارات التعليمية المتاحة</h2>
    
    <h3>مسار تطوير الواجهات الأمامية</h3>
    <p>تعلم HTML وCSS وJavaScript لبناء واجهات جميلة وتفاعلية.</p>
    
    <h3>مسار تطوير الخلفية</h3>
    <p>تعلم لغات الخادم وقواعد البيانات لبناء تطبيقات كاملة.</p>
    
    <em><!-- قسم الاتصال --></em>
    <h2>تواصل معنا</h2>
    <p>إذا كان لديك أي استفسار، لا تتردد في التواصل معنا عبر البريد الإلكتروني.</p>
</body>
</html>
HTML
6. نصائح مهمة للمبتدئين
أ) الترتيب مهم:
<em><!-- ❌ خطأ - DOCTYPE ليس في المقدمة --></em>
<html>
<!DOCTYPE html>
...

<em><!-- ✅ صحيح --></em>
<!DOCTYPE html>
<html>
...
HTML
ب) الإغلاق الصحيح:
<em><!-- ❌ خطأ - عدم إغلاق العناصر --></em>
<html>
<head>
<title>عنوان
<body>
<h1>مرحبا

<em><!-- ✅ صحيح --></em>
<html>
<head>
<title>عنوان</title>
</head>
<body>
<h1>مرحبا</h1>
</body>
</html>
HTML
ج) المسافة البادئة (Indentation):

html

<em><!-- صعب القراءة --></em>
<html><head><title>عنوان</title></head><body><h1>مرحبا</h1></body></html>

<em><!-- سهل القراءة --></em>
<html>
    <head>
        <title>عنوان</title>
    </head>
    <body>
        <h1>مرحبا</h1>
    </body>
</html>
HTML
د) استخدام التعليقات:
<em><!-- هذا تعليق - مفيد لتوضيح الكود --></em>
<html>
    <head>
        <em><!-- معلومات الصفحة --></em>
        <title>عنوان الصفحة</title>
    </head>
    <body>
        <em><!-- المحتوى الرئيسي --></em>
        <h1>العنوان</h1>
    </body>
</html>
HTML
7. الأخطاء الشائعة وكيفية تجنبها
خطأ 1: نسيان DOCTYPE
<em><!-- ❌ خطأ --></em>
<html>
...

<em><!-- ✅ صحيح --></em>
<!DOCTYPE html>
<html>
...
HTML
خطأ 2: عدم تحديد اللغة
<em><!-- ❌ أقل جودة --></em>
<html>
----------------------------------------------------------------------
<em><!-- ✅ أفضل --></em>
<html lang="ar">
...
HTML
خطأ 3: نسيان charset
<em><!-- ❌ قد يسبب مشاكل مع الأحرف العربية --></em>
<head>
    <title>موقعي</title>
</head>

---------------------------------------------------------------------------

<em><!-- ✅ صحيح --></em>
<head>
    <meta charset="UTF-8">
    <title>موقعي</title>
</head>
HTML
خطأ 4: عنوان غير وصفي

html

<em><!-- ❌ غير مفيد --></em>
<title>صفحة</title>
--------------------------------------------------------
<em><!-- ✅ وصفي ومفيد --></em>
<title>متجر الإلكترونيات - أحدث الأجهزة بأفضل الأسعار</title>
HTML
الخلاصة

البنية الأساسية لصفحة HTML تتكون من:

  1. DOCTYPE – يخبر المتصفح بنوع المستند
  2. html – الحاوي الرئيسي مع تحديد اللغة والاتجاه
  3. head – معلومات غير مرئية عن الصفحة
  4. body – المحتوى المرئي للمستخدم

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