التقسيمات
جزء من قسم Fundamentals في رحلة HTML على Coddy — الدرس 25 من 60.
تخيل أنك تريد تقسيم صفحة الويب الخاصة بك إلى كتل لتنظيم المحتوى الخاص بك. في HTML، يمكنك استخدام div لتجميع العناصر معًا.
تُعد وسوم div رائعة لإنشاء التخطيطات وفصل الأقسام.
إليك الصيغة الأساسية:
<div>
<!-- المحتوى يوضع هنا -->
</div>يمكنك إضافة عناصر HTML أخرى داخل div، مثل الفقرات، والعناوين، والصور، وحتى عناصر div أخرى.
إليك مثال على كيفية استخدام وسوم div لإنشاء تخطيط بسيط مع رأس، ومنطقة محتوى رئيسية، وتذييل:
<div>
<h1>Header</h1>
</div>
<div>
<p>Main content goes here.</p>
</div>
<div>
<p>Footer</p>
</div>
التحدي
سهلقم بإنشاء 3 عناصر div، موضوعة الواحد تلو الآخر في مستند HTML الخاص بك.
داخل كل div، أضف وسم p يحتوي على اسم فيلم تحبه.
ورقة مرجعية
استخدم وسوم div لتجميع العناصر معاً وتنظيم المحتوى في كتل:
<div>
<!-- Content goes here -->
</div>يمكنك تضمين عناصر HTML أخرى داخل div، بما في ذلك الفقرات، والعناوين، والصور، وعناصر div أخرى:
<div>
<h1>Header</h1>
</div>
<div>
<p>Main content goes here.</p>
</div>
<div>
<p>Footer</p>
</div>جرّب بنفسك
<!DOCTYPE html>
<html>
<body>
<!-- اكتب الكود هنا -->
</body>
</html>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس Fundamentals
2النصوص والتنسيق
العناوينالفقراتفواصل الأسطرالنص العريض والمائلالنص العريض والمائل مجدداًمراجعة - التنسيق8النماذج والمدخلات - الجزء الأول
أساسيات النماذجمدخلات النصوصسمات المدخلاتحقل كلمة المرورتسميات المدخلاتملخص - نموذج أساسي11صفحة التسجيل في الفعالية
نظرة عامة على المشروعقسم الـ Header
قسم تفاصيل الفعاليةنموذج التسجيلقسم الـ Footer