رموز الكتل في HTML
أهلاً بك! اليوم راح نتكلم عن رموز الكتل (Block Elements) في HTML. الموضوع بسيط ومهم جداً لفهم كيف تتصرف العناصر في صفحتك.
وش يعني "رمز كتلة"؟
ببساطة، رمز الكتلة هو أي عنصر في HTML يبدأ سطر جديد ويأخذ كامل العرض المتاح له بشكل افتراضي. تخيل إن كل عنصر كتلة هو "صندوق" مستقل بذاته.
ملاحظة سريعة: هذه العناصر مهمة جداً لبناء هيكل صفحتك وتنظيم المحتوى.
خصائص أساسية لرموز الكتل:
- تبدأ سطر جديد: دائماً تبدأ على سطر جديد، حتى لو كان فيه مساحة كافية على نفس السطر.
- تأخذ كامل العرض: تشغل كامل العرض المتاح لها في العنصر الأب (
parent element). - يمكن التحكم فيها: تقدر تحدد لها
width،height،margin، وpaddingبسهولة. - تحتوي على عناصر أخرى: أغلب رموز الكتل تقدر تحتوي داخلها على عناصر كتلة أخرى أو عناصر مضمنة (
inline elements).
أمثلة شائعة لرموز الكتل:
فيه أمثلة كثيرة، لكن هذه أشهرها واللي راح تستخدمها كثير:
<div>: هذا هو الصندوق العام اللي تستخدمه لتجميع المحتوى.<p>: للفقرات النصية.<h1>إلى<h6>: للعناوين بمستوياتها المختلفة.<ul>و<ol>و<li>: للقوائم المرتبة وغير المرتبة.<form>: لإنشاء النماذج.- العناصر الدلالية الجديدة في HTML5 مثل
<header>,<footer>,<nav>,<section>,<article>,<aside>.
فرق بسيط بينها وبين عناصر Inline:
على عكس رموز الكتل، عناصر الـ inline (مثل <span>, <a>, <strong>) ما تبدأ سطر جديد، وتأخذ بس العرض اللي تحتاجه. وما تقدر تتحكم في width أو height لها مباشرة.
مثال عملي:
شوف هذا الكود كيف تتصرف فيه عناصر الكتل:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال على رموز الكتل</title>
<style>
div {
background-color: #e0f7fa;
border: 1px solid #00acc1;
margin-bottom: 10px;
padding: 15px;
}
p {
background-color: #fff3e0;
border: 1px solid #ff9800;
margin-bottom: 5px;
padding: 10px;
}
</style>
</head>
<body>
<div>
هذه كتلة <div> الأولى.
<p>هذه فقرة داخل الـ <div> الأول.</p>
</div>
<div>
هذه كتلة <div> الثانية.
<p>وهذه فقرة أخرى داخل الـ <div> الثاني.</p>
<p><strong>ملاحظة:</strong> كل <div> و <p> يبدأ على سطر جديد ويأخذ كامل العرض.</p>
</div>
</body>
</html>لما تشغل الكود اللي فوق، راح تلاحظ إن كل <div> يبدأ على سطر جديد ويأخذ عرض الشاشة بالكامل، ونفس الشيء ينطبق على كل <p> داخله.
كذا تكون فهمت أساسيات رموز الكتل في HTML. استمر في الممارسة وراح تصير أستاذ فيها!