________________________________________
1 أهمية تنظيم المحتوى
تنظيم المحتوى داخل الصفحة يساعد على:
• سهولة القراءة
• وضوح المعلومات
• تحسين تجربة المستخدم
________________________________________
2 العناوين Headings
تستخدم العناوين لتحديد أقسام الصفحة
عددها 6 مستويات:
headings.html
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>________________________________________
3 استخدام العناوين
- h1: العنوان الرئيسي
- h2: عنوان قسم
- h3: عنوان فرعي
________________________________________
4 قاعدة مهمة
يجب استخدام العناوين بترتيب منطقي
مثال صحيح
correct-example.html
<h1>عنوان</h1>
<h2>عنوان فرعي</h2>مثال غير صحيح
wrong-example.html
<h1>عنوان</h1>
<h3>عنوان فرعي</h3>________________________________________
5 الفقرات Paragraph
تستخدم لكتابة النصوص:
paragraph.html
<p>هذا نص</p>________________________________________
6 السطر الجديد
line-break.html
<br>يستخدم للانتقال إلى سطر جديد داخل نفس الفقرة
________________________________________
7 الخط الفاصل
horizontal-rule.html
<hr>يستخدم للفصل بين أجزاء الصفحة
________________________________________
8 مثال كامل
full-example.html
<h1>أنا أحمد</h1>
<h2>عن نفسي</h2>
<p>أنا طالب وبحب البرمجة</p>
<h2>هواياتي</h2>
<p>بحب الكورة والتكنولوجيا</p>
<hr>
<p>دي نهاية الصفحة</p>________________________________________
9 أخطاء شائعة
- استخدام h1 لكل العناوين
- استخدام br بدل p
- عدم ترتيب العناوين
- كتابة النص بدون تقسيم
________________________________________
10 ملخص
- العناوين تستخدم لتنظيم الصفحة
- الفقرات تستخدم لكتابة النص
- يجب ترتيب العناوين بشكل منطقي
- hr للفصل بين الأقسام
________________________________________
11 أسئلة
- ما الفرق بين h1 و h2؟
- متى نستخدم p؟
- ما وظيفة br؟
- ما وظيفة hr؟
________________________________________
12 الواجب
أنشئ صفحة بعنوان:
"حياتي"
تحتوي على:
• h1 باسمك
• h2 "دراستي" + فقرة
• h2 "هواياتي" + فقرة
• hr للفصل