الدرس 3
إنشاء أول صفحة كاملة لمشروع Book Store
معنى أسماء العناصر والخصائص
ال html هو العنصر الرئيسي اللي بيجمع عناصر المستند والاسم جاي من HyperText Markup Language
ال head معناها رأس المستند وبتحتوي على معلومات عن الصفحة وال body معناها جسم المستند وبتحتوي على المحتوى اللي بيظهر في الصفحة
ال title معناها عنوان وبتحدد اسم الصفحة اللي بيظهر في ال Tab
في الدرس اللي فات كتبنا عنصرين علشان نتأكد إن الأدوات شغالة
دلوقتي هنبني ملف كامل لمكتبة Book Store ونفهم مكان كل جزء فيه
اكتب الهيكل الأساسي
افتح ملف index.html واستبدل محتواه بالمثال التالي
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Book Store</title>
</head>
<body>
<h1>Book Store</h1>
<p>Welcome To Our Book Store</p>
</body>
</html>اقرأ الصفحة من الخارج للداخل
ال html هو العنصر الجذر اللي بيحتوي عناصر الصفحة الرئيسية
جواه head لمعلومات الصفحة و body للمحتوى اللي عاوز تعرضه للزائر
ال title بيحدد عنوان Tab المتصفح أما h1 فهو عنوان ظاهر داخل الصفحة نفسها
ال meta charset بتحدد ترميز الملف وهنتكلم عنها أكتر في الدرس الجاي
السطر الأول Doctype هنفهم دوره في آخر درس من المقدمة
ليه بنسيب مسافات قبل العناصر
المسافات في بداية السطور بتوضح إن العنصر موجود داخل عنصر تاني
التنسيق ده بيساعدك تقرأ الكود وتلاقي الأخطاء لكنه مش طريقة لعمل مسافات في تصميم الصفحة
ظهور صفحة في المتصفح لا يعني إن هيكلها سليم لأن المتصفح بيحاول يصلح بعض الأخطاء أثناء القراءة
تطبيق صغير
غير title إلى My Library وسيب h1 باسم Book Store ثم احفظ وحدث الصفحة
المفروض اسم ال Tab يتغير والعنوان الموجود داخل الصفحة يفضل زي ما هو
التجربة دي بتوضح الفرق بين معلومات المستند ومحتواه الظاهر
شكل الصفحة بعد كتابة ال Code بشكل سليم
