تک دیک

واژه نامه و مجله آموزشی کامپیوتر و فناوری

بخش بندی صفحه با کمک المان <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> فوق (شامل دو پاراگراف) را مشاهده می‌کنید:

نمایی از نتیجه تعیین استایل یک المان div با ظاهری مشخص براساس کلاس یا آی دی در اج تی ام ال

بازگشت به فهرست مجموعه آموزشی HTML

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *