هيكل صفحة HTML للمبتدئين – فهم الـ structure خطوة بخطوة

by admin

ملاحظة: هذا المقال امتداد للمقال الأول

أهلاً فيك من جديد 👋

أنا محمد من قناة Mohammed Code | محمد كود، وفي هذا المقال رح نكمّل اللي بدأناه في مقال: “تعلم HTML من الصفر“.

هنا رح نركز على شيء واحد مهم جداً وهو هيكل صفحة HTML الأساسي اللي لازم تحفظه وتفهمه قبل ما تبدأ تضيف أي عناصر.

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

شرح HTML للمبتدئين خطوة بخطوة: تعلم HTML من الصفر في فيديو واحد للمبتدئين

أول ملف في أي مشروع ويب غالباً يكون اسمه:

index.html

ليش؟

لأن أغلب السيرفرات والمتصفحات تعتبره الملف الافتراضي لأي موقع.

يعني لما تكتب مثلاً:

example.com

المتصفح ببحث على ملف اسمه index.html ويعرضه لك.

فخلينا نعتبر index.html هو صفحة البداية (Home Page) الخاصة فيك.

الهيكل الأساسي لأي صفحة HTML

أي صفحة HTML اليوم في 2026 لازم تحتوي على هذا الهيكل العام:

<!DOCTYPE html>

<html lang="ar">

<head>

<meta charset="UTF-8">

<title>عنوان الصفحة</title>

</head>

<body>
محتوى الصفحة هنا
</body>

</html>

خلينا نشرح كل جزء 👇

أولاً: <!DOCTYPE html>

هذا السطر لازم يكون في أول الصفحة ببساطة يقول للمتصفح:

“يا متصفح، أنا صفحة HTML بنسخة HTML5 الحديثة، اعرضتي وفق المعايير القياسية.”

بدون هذا السطر، بعض المتصفحات ممكن تدخل في ما يسمى Quirks Mode

ويصير في اختلافات غريبة في طريقة عرض الصفحة.

الخلاصة:

  • دائماً حط في أول سطر
  • اكتبها مرة واحدة واحفظها مثل ما هي

ثانياً: وسم <html> وخاصية اللغة lang

وسم <html> هو الجذر (Root) لكل الصفحة.

كل شيء في الصفحة لازم يكون داخله،

خاصية lang=”ar”:

  • تعرّف لغة المحتوى للمتصفح ومحركات البحث
  • مهمة لتحسين تجربة المستخدم، ولقراءة الشاشة (لذوي الاحتياجات الخاصة)
  • بما إن مقالك وموقعك بالعربي، استخدم “ar”، لو المحتوى إنجليزي → “en”

ثالثاً: وسم <head> – معلومات عن الصفحة

هذا الجزء ما يظهر مباشرة للمستخدم داخل الصفحة، لكنه مهم جداً.

1- 

<meta charset="UTF-8">

هذا يحدد ترميز الأحرف.

UTF-8 يعني:

  • دعم اللغة العربية
  • دعم أغلب لغات العالم تقريباً

لو ما كتبت هذا السطر، ممكن تشوف رموز غريبة بدال الحروف العربية، عشان كدة، هذا السطر دائماً يكون أول شيء تقريباً في<head>.

2 وسم <title> هذا هو العنوان الموقع وبيظهر في تبويب المتصفح، وأيضاً مهم لـ SEO.

مثال

<title>تعلم HTML من الصفر</title>

رابعاً: وسم <body> – محتوى الصفحة

محتوى الصفحة اللي المستخدم يشوفه

كل شيء حاب المستخدم يشوفه داخل الموقع، لازم يكون داخل body:

  • العناوين h1, h2, h3 …
  • الفقرات p
  • الصور img
  • الروابط a
  • القوائم ul, ol
  • الأقسام الرئيسية مثل header, main, footer (رح نشرحها لاحقاً إن شاء الله)

مهم جداً:

لا تكتب أي محتوى خارج وسم body.

كيف تنشئ أول ملف HTML خطوة بخطوة؟ 🧑‍💻

اتبع هذه الخطوات على جهازك:

1- افتح VS Code (أو أي محرر نصوص تفضله).

2- أنشئ مجلد جديد باسم مثلاً:

my-first-website

3- داخل المجلد، أنشئ ملف جديد باسم:

index.html

4- انسخ الهيكل التالي داخل الملف:

<!DOCTYPE html>

<html lang="ar">

<head>

<meta charset="UTF-8">

<title>أول صفحة HTML</title>

</head>

<body>
<h1>أهلاً بالعالم!</h1>

<p>هذه أول صفحة HTML أكتبها بنفسي.</p>
</body>

</html>

5- احفظ الملف (Ctrl + S).

6- اذهب للمجلد، واضغط دبل كليك على index.html

7- رح يفتح في المتصفح وتشوف العنوان والفقره اللي كتبتها ✨

وبعد الانتهاء من شرح الاساسيات الحين صرت عارف

  1. ما هو ملف index.html
  2. ما وظيفة <!DOCTYPE html>
  3. دور وسوم:
    html – head – meta – title – body
  4. 📌 في المقال القادم بإذن الله سنبدأ بـ:
  5. أهم الوسوم داخل body
  6. العناوين والفقرات (h1, h2, p)
  7. تنسيق النص داخل الصفحة

لو حاب تشوف نفس هذه الخطوات بالفيديو، ارجع لدرس القناة: تعلم HTML من الصفر في فيديو واحد للمبتدئين

قبل ما تطلع:

  • اشترك في قناة Mohammed Code | محمد كود لو حاب تكمل سلسلة HTML كاملة بالفيديو.
  • احفظ هذا المقال في المتصفح وارجع له كل ما تنسى الهيكل.
  • شارك المقال مع أي شخص حاب يبدأ يتعلم تطوير الويب من الصفر 🚀

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *