الهيكل الأساسي لأي صفحة HTML للمبتدئين
الهيكل الأساسي لأي صفحة HTML للمبتدئين
إذا كنت تبدأ رحلتك في تعلم HTML، فهناك شيء يجب أن تعرفه قبل كتابة أي عناصر مثل العناوين أو الصور أو الروابط، وهو الهيكل الأساسي لأي صفحة HTML.
يمكنك اعتبار هذا الهيكل بمثابة الأساس الذي يُبنى عليه المنزل، فلا يمكن إنشاء صفحة ويب صحيحة بدون هذا البناء الأساسي.
في هذا الدرس من سلسلة Hisham Academy سنتعرف على جميع الأجزاء الأساسية لأي صفحة HTML، وسنعرف وظيفة كل جزء بطريقة سهلة وبسيطة.
ما هو الهيكل الأساسي في HTML؟
كل صفحة HTML تتكون من مجموعة من الوسوم (Tags) التي تخبر المتصفح بكيفية عرض محتوى الصفحة.
إليك الشكل الأساسي لأي صفحة HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
</body>
</html>
قد يبدو الكود طويلًا في البداية، لكن لا تقلق، فكل سطر له وظيفة محددة وسنتعرف عليها الآن.
أولًا: وسم
<!DOCTYPE html>
هذا السطر يخبر المتصفح أن الملف يستخدم الإصدار الحديث من HTML (HTML5).
يجب أن يكون أول سطر في الصفحة دائمًا.
ثانيًا: وسم <html>
<html lang="en">
</html>
هذا هو العنصر الرئيسي الذي يحتوي على جميع عناصر الصفحة.
ستجد بداخله قسمين مهمين:
<head>
<body>
كما يحتوي على الخاصية lang التي تحدد لغة الصفحة.
إذا كانت الصفحة باللغة العربية يمكنك كتابة:
<html lang="ar">
ثالثًا: وسم <head>
داخل هذا الجزء نضع المعلومات الخاصة بالصفحة والتي لا تظهر للمستخدم مباشرة.
مثل:
عنوان الصفحة.
ترميز الأحرف.
إعدادات عرض الصفحة على الهواتف.
ربط ملفات CSS.
إضافة أيقونة الموقع (Favicon).
مثال:
<head>
<title>My First Web Page</title>
</head>
رابعًا: وسم <title>
<title>My First Web Page</title>
هذا الوسم يحدد اسم الصفحة الذي يظهر في تبويب المتصفح.
فعند تغيير النص داخل <title> ستلاحظ تغير اسم التبويب أعلى المتصفح.
خامسًا: الوسم <body>
<body>
</body>
هذا هو أهم جزء في الصفحة، لأنه يحتوي على كل ما يراه الزائر.
مثل:
- العناوين.
- الفقرات.
- الصور.
- الروابط.
- القوائم.
- الجداول.
- الأزرار.
- النماذج.
أي عنصر تريد عرضه داخل صفحة الويب يجب أن يكون داخل <body>.
مثال عملي
لنكتب أول صفحة HTML بسيطة.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>صفحتي الأولى</title>
</head>
<body>
<h1>مرحبًا بك في Hisham Academy</h1>
<p>هذه أول صفحة HTML أقوم بإنشائها.</p>
</body>
</html>
عند تشغيل هذا الملف داخل المتصفح ستلاحظ:
يظهر عنوان الصفحة صفحتي الأولى في تبويب المتصفح.
يظهر العنوان الرئيسي داخل الصفحة.
تظهر الفقرة أسفل العنوان.
أخطاء شائعة يقع فيها المبتدئون
من أكثر الأخطاء التي يرتكبها المبتدئون:
نسيان كتابة <!DOCTYPE html>.
كتابة المحتوى داخل <head> بدلًا من <body>.
نسيان إغلاق الوسوم.
كتابة أكثر من عنصر <html> في نفس الصفحة.
حذف الوسم <title>.
تجنب هذه الأخطاء سيجعل صفحاتك تعمل بطريقة صحيحة.
ملخص الدرس
تعرفنا في هذا الدرس على الهيكل الأساسي لأي صفحة HTML، وتعلمنا وظيفة كل جزء من أجزائه.
أصبحنا الآن نعرف الفرق بين:
<!DOCTYPE html> لتحديد نوع المستند.
<html> وهو العنصر الرئيسي.
<head> الذي يحتوي على معلومات الصفحة.
<title> الذي يحدد اسم الصفحة.
<body> الذي يحتوي على كل ما يراه المستخدم.
في الدرس القادم سنتعرف على عناوين HTML (H1 إلى H6) ووسم الفقرة P، وسنبدأ في إنشاء صفحات ويب أكثر تنظيمًا واحترافية.
🎯 اختبر نفسك الآن !!!!
تهانينا! لقد أنهيت هذا الدرس بنجاح. 🎉
لكن هل فهمت كل ما تعلمته بالفعل؟
لا تكتفِ بالقراءة، بل اختبر معلوماتك من خلال الاختبار التفاعلي الذي صممته خصيصًا لهذا الدرس ضمن سلسلة Hisham Academy.
🧠 مميزات الاختبار:
أسئلة متنوعة تقيس مدى فهمك.
نتيجة فورية بعد الانتهاء.
تصميم بسيط وسريع يعمل على الهاتف والكمبيوتر.
يساعدك على معرفة نقاط القوة والجوانب التي تحتاج إلى مراجعتها.
🔗 ابدأ الاختبار الآن:
https://hishamabdulrashid999.github.io/test_2/
أضغط هنا للبدء في الأختبار
📚 تابع الدرس التالي في سلسلة Hisham Academy ولا تنسَ حفظ المقال ومشاركته مع من يريد تعلم برمجة الويب من الصفر.
وأخبرني رأيك في التعليقات هل فعلاً أستفدت من هذا المقال
