آموزش تگ div در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ div در HTML با من همراه باشید.

آموزش تگ div در HTML

Free-Learn

تگ Div در HTML

تگ div یا دایو یا دیو ، یکی از تگ های پرکاربرد در طراحی صفحات وب می باشد که با استفاده از آن میتوان یک یا چندین بخش را در یک صفحه ی وب ایجاد کرد. (بطور کلی برای لایه بندی یا بخش بندی میتوان از این تگ استفاده نمود)

اگر در جریان باشید، کمی پیش تر (قبلتر) طراحان وب سایت برای ایجاد یک وبسایت از جدول استفاده میکردند ، یعنی با استفاده از جدول میومدن و بخش های یک وبسایت رو مشخص میکردند. (مثلا بخش هدر،مطالب اصلی و فوتر و..)

حال امروزه با وجود تگ Div دیگه لازم نیست از جدول ها برای بخش بندی یک وبسایت استفاده کرد، لذا ما به راحتی با استفاده از این تگ میتوانیم بخش های مختلف (هدر، مطالب اصلی ، ستون کناری ، فوتر و..) یک وبسایت را ایجاد نماییم.

استفاده از جدول برای بخش بندی یا طرح بندی یک وبسایت اصلا توصیه نمی شود و تاثیر منفی در سئوی وبسایت دارد، لذا حتما از تگ های مرتبط با بخش بندی (مثله div,header,section,footer و..) استفاده نمایید.

Free-Learn

مثال از تگ div در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

امتحان کنید

مثال شماره ۲ : استفاده از CSS در درون تگ DIV

امتحان کنید

مثال شماره ۳ : طرح بندی خیلی ساده یک قالب HTML با استفاده از تگ DIV

برای مشاهده دموی این قالب اینجا کلیک کنید و برای دانلود آن اینجا کلیک کنید

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ div در HTML پشتیبانی میکنند یا خیر.

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی بله بله بله بله بله

Free-Learn

جدول صفات تگ div در HTML

در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.

(علامتیعنی در HTML5 پشتیبانی نمی شود.)

نام صفت مقدار توضیح
align left
right
center
justify
تراز یا موقعیت قرار گیری محتوای درون تگ div را مشخص میکند. ()

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ div از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

تگ DIV ممکن است در حالت عادی/پیش فرض استایل خاصی نداشته باشد ولی ما به راحتی با استفاده از CSS میتوانیم آن را سفارشی سازی نماییم.

مرورگرها بصورت پیش فرض یک سطر خالی (خط فاصله به اندازه یک سطر) قبل و بعد (از بالا و پایین) به این تگ اضافه میکنند ولی خب باز ما میتوانیم آن را از طریق CSS حذف نماییم.

Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ div را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.


Free-Learn