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

کار با Div در HTML

در این نوشته به بررسی ساختار تگ div و برخی از خصوصیات آنها می پردازیم.

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

حتما قبل از بررسی Div ها در HTML نوشته ی مطالب قبلی این دوره ی آموزشی را با هشتگ #دوره_آموزشی_HTML در سایت ما را مطالعه کنید.

تگ 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” بنویسید.

سربلند باشید.