ما هو وسم <div>؟
الوسم <div> يُستخدم لتقسيم الصفحة إلى أجزاء أو أقسام بهدف تنظيم المحتوى.
لا يُظهر شيء مميز بحد ذاته، لكنه مهم جدًا عند التنسيق باستخدام CSS.
لماذا نستخدم <div>؟
- لتجميع عناصر متشابهة معًا داخل كتلة واحدة.
- لتطبيق تنسيق موحّد على مجموعة عناصر.
- لبناء الهيكل العام لأي موقع (هيدر، محتوى، سايدبار، فوتر...).
الصيغة العامة:
<div>
محتوى أو عناصر داخل القسم
</div>
مثال بسيط:
<div>
<h2>عنوان القسم</h2>
<p>هذه فقرة داخل القسم الأول.</p>
</div>
<div>
<h2>قسم آخر</h2>
<p>محتوى مختلف هنا.</p>
</div>
استخدام <div> مع CSS (مقدمة فقط)
<style>
.box {
background-color: #f2f2f2;
padding: 10px;
margin-bottom: 10px;
}
</style>
<div class="box">
<h2>قسم منسق</h2>
<p>هذا القسم له خلفية رمادية ومسافة داخلية.</p>
</div>
مثال عملي على تقسيم صفحة
<!DOCTYPE html>
<html>
<head>
<title>تقسيم الصفحة</title>
<style>
.header {
background-color: #4CAF50;
color: white;
padding: 10px;
}
.content {
background-color: #f9f9f9;
padding: 15px;
}
.footer {
background-color: #ddd;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>موقعي الشخصي</h1>
</div>
<div class="content">
<p>مرحبًا بك في موقعي! هذا هو قسم المحتوى الرئيسي.</p>
</div>
<div class="footer">
<p>جميع الحقوق محفوظة ©</p>
</div>
</body>
</html>
ملاحظات هامة:
- يمكن إعطاء كل
<div>اسمًا باستخدامclassأوidلتنسيقه لاحقًا باستخدام CSS. <div>عنصر كتلي (Block-level)، يبدأ بسطر جديد.
الواجب العملي:
- أنشئ صفحة تحتوي على 3 أقسام باستخدام
<div>:- قسم علوي بعنوان الموقع
- قسم محتوى يحتوي على فقرتين
- قسم سفلي يحتوي على جملة "تم الإنشاء بواسطة [اسمك]"
ماذا سنتعلّم في الدرس القادم؟
في الدرس التاسع سنتعرّف على الوسوم الهيكلية الحديثة في HTML5 مثل:
<header>, <nav>, <section>, <article>, <aside>, و <footer>.