این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ div در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ div در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Div در HTML
تگ div یا دایو یا دیو که از کلمه ( Division ) گرفته شده ، یکی از تگ های پرکاربرد در طراحی صفحات وب می باشد که با استفاده از آن میتوان یک یا چندین بخش را در یک صفحه ی وب ایجاد کرد.
بطور کلی اینو بدونید که تگ div مثه یه ظرف ( Container ) میمونه برای نگهداری دیگر تگ ها، یعنی عملا هرچیزی رو میشه گذاشت داخل تگ div ، همین تموم شد رفت.
کمی قبلتر که هنوز HTML اینقد پیشرفت نکرده بود، طراحان وب سایت برای طرح بندی ( یا همون بخش بندی وبسایت ) از جدول استفاده میکردند ، یعنی با استفاده از جدول میومدن و بخش های یک وبسایت رو مشخص میکردند. ( مثلا بخش هدر ، مطالب اصلی و فوتر و.. )
حال امروزه با وجود تگ Div دیگه اصلا نباید از جدول ها برای بخش بندی یک وبسایت استفاده کرد، چون هم تاثیر منفی در سئو داره و هم سایت ما از نظر مرورگرها و موتورهای جستجوگر یه سایت غیرحرفه ای می باشد.
پس دیگه الانه با وجود تگ هایی مثه header ، footer ، div ، article و… ما به راحتی میتونیم بخش های مختلف یک صفحه رو طراحی کنیم و این طراحی ما میشه یه طراحی مدرن ، طراحی حرفه ای و مورد قبول مرورگرها و موتورهای جستجوگر برای بحث سئو.
Free-Learn
مثال از تگ div در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : طرح بندی ساده یک صفحه با استفاده از جدول ( فقط میخوام نشون بدم که با جدول قبلا اینجوری طراحی میکردن ولی شما استفاده نکنی حا )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<body> <table> <tr> <td width="120"> <a href="https://free-learn.ir/"> <img src="files/logo.png" width="70"> </a> </td> <td> <h2>هدر من در اینجا</h2> </td> </tr> <tr> <td colspan="2"> <p>محتوای اصلی من</p> <p>محتوای اصلی من</p> <p>محتوای اصلی من</p> <p>محتوای اصلی من</p> <p>محتوای اصلی من</p> </td> </tr> <tr> <td colspan="2"> <h2>فوتر من در اینجا</h2> </td> </tr> </table> </body> |
مثال شماره ۲ : استفاده عادی از تگ div ( با استفاده از صفت class به div مون کلاس دادیم )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<body dir="rtl"> <div class="mydiv bg-green"> <h2>بخش اول</h2> <p>سایت آموزشی فری لرن سایت آموزشی فری لرن سایت آموزشی فری لرن سایت آموزشی فری لرن</p> </div> <div class="mydiv bg-blue"> <h2>بخش دوم</h2> <p>سایت آموزشی فری لرن سایت آموزشی فری لرن سایت آموزشی فری لرن سایت آموزشی فری لرن</p> </div> </body> |
مثال شماره ۳ : طرح بندی خیلی ساده یک قالب ( دارای هدر – باکس محتوای اصلی و فوتر )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body dir="rtl"> <div class="my-header"> ... </div> <div class="my-content"> ... </div> <div class="my-footer"> ... </div> </body> |
مثال شماره ۴ : طرح بندی کمی پیشرفته تر یک قالب HTML با استفاده از تگ DIV
برای مشاهده دموی این قالب اینجا کلیک کنید و برای دانلود آن اینجا کلیک کنید
|
1 2 3 4 5 |
<body> برای مشاهده دستورات لطفا بروی دکمه امتحان کنید کلیک نمایید </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ div در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ div از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- تگ DIV در حالت عادی / پیش فرض استایل خاصی نداره ولی ما به راحتی با استفاده از CSS میتونیم اون رو سفارشی سازی کنیم. ( همانند مثال ها )
- به راحتی میتونیم از ID ها و Class ها درون تگ div استفاده کنیم. ( همانند مثال ها )
- کلا تگ div ظرفی هست برای نگهداری دیگر تگ ها، و هرچی دوس داشته باشید میتونید داخلش قرار بدید ( اینجوری نیست که مثلا باید حتما تگ خاصی داخلش قرار داد )
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ div را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
div { display: block; } |
