بخش بندی صفحه با کمک المان <div> در HTML
از المان <div> برای ایجاد یک بخش یا قسمت در سند HTML استفاده میشود. این المان به عنوان یک المان دربرگیرنده عمومی شناخته میشود و میتواند انواع المان های دیگر اچتیامال را دربربگیرد. حروف div در نام این المان HTML از ابتدای واژه Division (به معنای بخش یا قسمت) گرفته شده است.
المان های <div> به خودیِ خود معنا و مفهوم خاصی ندارند و نمایانگر محتوای ویژهای نیستند. اما میتوانند محتواها و المانهای مرتبط با یکدیگر را گروهبندی کنند. به این ترتیب امکان تعیین استایل بخشی از صفحه و مجموعهای از المان ها با کمک CSS فراهم میشود. به علاوه با کمک جاوااسکریپت، دسترسی به این المان ها و تغییر آنها امکانپذیر میشود. (برای تعیین استایل یا دسترسی به المان های <div> معمولا از آیدی یا کلاس اختصاص داده شده به آنها استفاده میشود).
نحوه درج المان <div> همراه با مثال
برای ایجاد یک المان <div> و قرار دادن المان ها و محتواهای مختلف داخل آن کافیست المان های موردنظر را مشابه با مثال زیر بین تگ شروع <div> و تگ پایان </div> قرار دهید:
<div>
<p>This is a paragraph inside a div element.</p>
<p>This is another paragraph.</p>
</div>
در ادامه به المان <div> در مثال بالا یک کلاس alertbox اضافه میکنیم:
<div class="alertbox">
<p>This is a paragraph inside a div element.</p>
<p>This is another paragraph.</p>
</div>
حالا قانون CSS زیر را برای اعمال ظاهر مناسب با رنگ زمینه قرمز به این المان در نظر بگیرید:
.alertbox{
padding: 15px;
background-color: #f44336;
color: white;
text-align: center;
}
در تصویر زیر نمایی از اعمال این استایل روی المان <div> فوق (شامل دو پاراگراف) را مشاهده میکنید:
بازگشت به فهرست مجموعه آموزشی HTML