تبلیغات
میهن وب هاست

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

نویسنده : امیر

نظرات : ۰ دیدگاه

بازدید : ۱۹۷ بازدید

تاریخ : ۰۷ مهر ۱۳۹۶

در این نوشته به بررسی ساختار تگ 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 بهتر آشنا شوید به مثال زیر توجه کنید.

مثال:

نتیجه :

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

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

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

با دوستانتان به اشتراک بگذارید

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

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

*

code

مطالب زیر را از دست ندهید: