صفحة HTML دايمًا بتتكتب بترتيب معين عشان المتصفح يفهمها صح، والترتيب ده بيبدأ من أعلى حاجة وهي:
1️⃣ <!DOCTYPE html>
ده إعلان للمتصفح إن الصفحة دي مكتوبة باستخدام HTML5.
-
لازم يكون أول سطر في أي صفحة.
-
مش “وسم” لكنه تعليم للمتصفح.
<!DOCTYPE html>
2️⃣ وسم <html>
-
ده هو الوعاء الكبير اللي بيحتوي على كل محتويات الصفحة.
-
كل حاجة في الصفحة لازم تكون جواه.
-
ممكن تضيفله سمة اللغة كده:
lang="ar"لو المحتوى عربي أوlang="en"لو إنجليزي.
<html lang="ar">
<!-- باقي العناصر -->
</html>
وسم <head>
الجزء ده مش بيظهر للمستخدم في الصفحة، لكنه مهم جداً للمتصفح ومحركات البحث.
أهم العناصر اللي جواه
| العنصر | وظيفته |
|---|---|
<meta charset="UTF-8"> |
يحدد ترميز الأحرف (يدعم العربي) |
<meta name="viewport"...> |
بيخلي الصفحة متوافقة مع الموبايل |
<title> |
عنوان الصفحة اللي بيظهر في التاب |
<meta name="description"> |
وصف الصفحة لمحركات البحث |
<link rel="icon"> |
أيقونة التاب (favicon) |
وسم <body>
-
ده الجزء اللي بيظهر للمستخدم.
-
كل العناصر اللي هتتعرض زي: العناوين، الفقرات، الصور، الأزرار، … تكون هنا
مثال كامل على الهيكل الأساسي لصفحة HTML
شرح النظري
شرح الكود:
-
<!DOCTYPE html>: بيقول للمتصفح “دي صفحة HTML5”. -
<html lang="ar">: بداية الصفحة باللغة العربية. -
<head>: معلومات عن الصفحة للمتصفح ومحركات البحث. -
<meta charset="UTF-8">: بيخلي الصفحة تدعم العربي. -
<title>: بيظهر عنوان التبويب في المتصفح. -
<body>: كل حاجة جوه ده هتظهر قدام المستخدم.
