آموزش HTML – معرفی Divها

کار با Div در HTML

در این نوشته به بررسی ساختار تگ div و برخی از خصوصیات آن‌ها می‌پردازیم. شاید یکی از عمده تگ‌های مورد استفاده در صفحات وب، تگ div است.

آموزش HTML – معرفی Divها

تگ div چیست؟

تگ div مخفف کلمه ی divison به معنای تقسیم کردن است؛ در کل می‌توان با توجه به این معنی به این موضوع رسید که وظیفه‌ی تگ div تقسیم بندی صفحات و باکس‌های موجود در آن به بخش‌های مختلف است. در واقع به کمک تگ Div شما می‌توانید صفحاتتان را به بخش‌های مختلف مانند بخش header، بخش sidebar، بخش content، بخش footer و … تقسیم بندی کنید. قبل از بررسی تگ‌های div به بررسی المان‌های block و inline می‌رسیم.

المان‌های block و inline

یکی از بخش‌های مهم در HTML دانستن مفهوم بسیار ساده ای که با نام المان‌های block و inline بررسی می‌شود است.

المان‌های block

این المان‌ها در واقع یک جور المان‌های خودخواه هستند چون نمی‌توانند دیگران را در کنار خود ببینند. المان‌های بعد از خود را به پایین خود می‌فرستند و در بالای آن‌ها به پادشاهی می‌پردازند. (مثال جذاب 😀) از جمله المان‌های block می‌توان به تگ p یا پاراگراف اشاره کرد.

المان‌های inline

این المان‌ها، المان‌های مهربانی هستند و دوستان خود را در کنار خود جای می‌دهند و اصلا خودخواه نیستند. از جمله المان‌های inline می‌توان به تگ span که مخصوص نوشته‌ها است نام برد. خب با توجه به مسائل بالا می‌رسیم به اینکه اولا تگ Div یک نوع المان block است و در کنار خود المان‌های دیگر را نگه نمی‌دارد. البته در حال عادی این موضوع صدق می‌کند و شما می‌توانید در css تمامی المان ها را از inline به block  و بلعکس تغییر دهید.

برای استفاده از تگ div از ساختار زیر استفاده کنید

<div></div>

خب برای اینکه با مفهوم div بهتر آشنا شوید به مثال زیر توجه کنید.

مثال:

<div style="color:#fff;text-align:center;width:500px;height:100px;background:#F22613;">CamelCase</div>
<div style="color:#fff;text-align:center;width:500px;height:100px;background:#1F3A93;">CamelCase</div>
<div style="color:#fff;text-align:center;width:500px;height:100px;background:#1E824C;">CamelCase</div>
<div style="color:#fff;text-align:center;width:500px;height:100px;background:#F9690E;">CamelCase</div>

نتیجه:

نکته:

در مثال برای زیبایی بیش‌تر از تعدادی از خاصیت‌های css استفاده شده است. به دلیل بی ربط بودن این سری آموزشی به css از توضیح آن‌ها پرهیز خواهیم کرد.

به پایان این جلسه رسیدیم امیدوارم تا اینجا از این مجموعه آموزشی لذت ببرید.

نظرات خود را در ارتباط با بخش “کار با Div در HTML” بنویسید.