الدرس 7
تنظيم محتوى الصفحة بالعناوين من h1 إلى h6
معنى أسماء العناصر والخصائص
ال h اختصار ل Heading يعني عنوان والرقم من 1 إلى 6 بيحدد مستوى العنوان من الأعلى للأقل
بعد ما جهزنا مشروع learn-html هنبدأ ننظم محتوى مكتبة الكتب بدل ما نحط كل الكلام بنفس الشكل
العناوين بتوضح موضوع الصفحة والأقسام اللي جواها وبتساعد القارئ يوصل للمعلومة بسرعة
فكر في ترتيب الأفكار قبل حجم الخط
هنستخدم h1 لعنوان الصفحة الرئيسي و h2 للأقسام الرئيسية و h3 للأجزاء الموجودة داخل قسم
<h1>Book Store</h1>
<h2>Programming Books</h2>
<h3>HTML Books</h3>
<h3>CSS Books</h3>
<h2>Design Books</h2>هنا كتب HTML و CSS تابعين لقسم كتب البرمجة أما كتب التصميم فهي قسم تاني في نفس مستوى كتب البرمجة
بص على المثال دة للتوضيح أكتر
<h1>Page Title -> Book Store</h1>
<h2>Section -> Programming Books</h2>
<h3>Book 1 In Programming -> HTML Books</h3>
<h3>Book 2 In Programming -> CSS Books</h3>
<h2>Section -> Design Books</h2>
<h3>Book 1 In Design -> Design Fundamentals</h3>
<h3>Book 2 In Design -> Design Master</h3>وهنا مترتبين بالمستوى لفهم أكثر
<h1>Page Title -> Book Store</h1>
<h2>Section -> Programming Books</h2>
<h3>Book 1 In Programming -> HTML Books</h3>
<h3>Book 2 In Programming -> CSS Books</h3>
<h2>Section -> Design Books</h2>
<h3>Book 1 In Design -> Design Fundamentals</h3>
<h3>Book 2 In Design -> Design Master</h3>إيه اللي المتصفح بيعمله
المتصفح بيدي كل مستوى عنوان شكل افتراضي لكن الشكل مش هو سبب اختيار العنصر
لو عاوز تغير الحجم بعدين هتستخدم CSS بدل ما تختار مستوى عنوان غلط لمجرد إنه أصغر
رتب العناوين حسب علاقتها بالمحتوى ومتقفزش من h1 إلى h4 لمجرد إن حجم الخط عجبك
تطبيق على مشروعك
افتح index.html داخل learn-html وحط الأمثلة داخل body
ضيف قسم جديد للكتب العلمية وتحته فرعين ثم اقرأ العناوين لوحدها
لو قدرت تفهم تقسيمة المكتبة من غير الفقرات يبقى ترتيبك واضح
ودة شكل المثال بعد كتابة ال Code
