________________________________________
1 لماذا نحتاج إلى هيكل ثابت؟
أي صفحة HTML يجب أن تحتوي على هيكل أساسي
حتى يتمكن المتصفح من فهمها وعرضها بشكل صحيح
________________________________________
2 الهيكل الأساسي لصفحة HTML
basic-structure.html
<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
</body>
</html>________________________________________
3 شرح عناصر الصفحة
1) DOCTYPE
يُستخدم لتحديد نوع المستند،
ويخبر المتصفح أننا نستخدم HTML الحديثة
2) html
يحتوي على جميع عناصر الصفحة
ويعتبر العنصر الأساسي
3) head
يحتوي على معلومات عن الصفحة
ولا تظهر هذه المعلومات داخل الصفحة
4) title
يحدد اسم الصفحة
ويظهر في شريط المتصفح (التاب)
5) body
يحتوي على جميع العناصر التي تظهر للمستخدم
مثل النصوص والعناوين والصور
________________________________________
4 مثال كامل
example-page.html
<!DOCTYPE html>
<html>
<head>
<title>صفحتي الأولى</title>
</head>
<body>
<h1>أهلا بيكم</h1>
<p>دي أول صفحة HTML ليا</p>
</body>
</html>________________________________________
5 ملاحظات مهمة
- كل محتوى يظهر يجب أن يكون داخل body
- head لا يظهر للمستخدم
- ترتيب العناصر مهم
- يجب إغلاق كل Tag بشكل صحيح
________________________________________
6 تنظيم الكود
تنظيم الكود يساعد على:
• سهولة القراءة
• تقليل الأخطاء
• كتابة كود احترافي
مثال منظم
organized-example.html
<h1>عنوان</h1>
<p>نص</p>________________________________________
7 أخطاء شائعة
- نسيان إغلاق Tag
- كتابة عناصر خارج body
- عدم كتابة DOCTYPE
- عدم تنظيم الكود
________________________________________
8 ملخص
كل صفحة HTML لها هيكل أساسي
body يحتوي على المحتوى
head يحتوي على المعلومات
title يظهر في المتصفح
________________________________________
9 أسئلة
- ما وظيفة head؟
- ما وظيفة body؟
- أين يظهر title؟
- لماذا نستخدم DOCTYPE؟
________________________________________
10 الواجب
أنشئ صفحة HTML تحتوي على:
• title باسم "صفحتي الشخصية"
• داخل body:
o عنوان رئيسي
o فقرتين عنك