آموزش تگ div در HTML
آموزش تگ div در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ div در HTML به صورت کامل آشنا بشید.
تگ Div در HTML
تگ div ، دایو یا دیو که از کلمه ی ترکیبی انگلیسی ( Division ) برگرفته شده ، یکی از تگ های پر استفاده، محبوب و واقعا کاربردی در طراحی صفحات وبسایت است. که با بکار گیری آن میتوان یک یا چندین بخش مجزا را در یک صفحه ی وب ساخت.
این نکته رو در نظر داشته باش که تگ div مثل یه ظرف و قالب به اصطلاح ( Container ) عمل میکنه و برای نگهداری دیگر تگ ها درون خودش بکار میره، این یعنی در واقع هرتگی رو میشه درونش نوشت همین و بس.
در زمان های قدیم که هنوز HTML اینقد پیشرفت نکرده بود، خیلی جالبه که بدونید طراحان و برنامه نویسان وب سایت برای طرح بندی ( یا همون قالب بندی وبسایت ) از جدول استفاده میکردند ، یعنی با استفاده از جدول بخش های یک وبسایت رو تعیین میکردند. ( مثلا بخش هدر ، مطالب اصلی ، منو ، فوتر و … )
اما امروزه با بوجود آمدن تگ Div دیگه به هیچ عنوان نباید از جدول ها برای بخش بندی یا قالب بندی یک وبسایت استفاده کرد، چون که هم اثرات منفی در سئو سایت داره و هم سایت ما از نظر مرورگرها و موتورهای جستجوگر یه سایت غیرحرفه شناخته میشه.
راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.
در نتیجه با وجود تگ هایی مثل header ، footer ، div و … ما به سهولت میتوانیم بخش های مختلف صفحه ی یک وبسایت رو طراحی کنیم و به این طراحی ما میگن یه طراحی مدرن و همین طور طراحی حرفه ای و مورد قبول مرورگرها و موتورهای جستجوگر برای بحث سئو.
مثال از تگ div در HTML
در ادامه ی آموزش html و css میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره یک : برای طرح بندی ساده، بدون پیچیدگی و زیبایی یک صفحه با استفاده از جدول ( در این مثال فقط میخوام بهت نشون بدم که قبلا با جدول چطور صفحه طراحی میکردن اما شما هیچ وقت به این شکل صفحه ای رو طراحی نکن )
<body>
<table>
<tr>
<td width="120">
<a href="https://wppush.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 مون کلاس دادیم )
<body dir="rtl"> <div class="mydiv bg-green"> <h2>بخش اول</h2> <p>سایت آموزشی وردپرس پوش</p> </div> <div class="mydiv bg-blue"> <h2>بخش دوم</h2> <p>سایت آموزشی وردپرس پوش</p> </div> </body>
در مثال شماره سه : طرح بندی خیلی ساده یک قالب ( دارای هدر – باکس محتوای اصلی و فوتر )
<body dir="rtl"> <div class="my-header"> ... </div> <div class="my-content"> ... </div> <div class="my-footer"> ... </div> </body>
و مثال شماره چهار : طرح بندی کمی پیشرفته تر یک قالب HTML با استفاده از تگ DIV
<body> برای مشاهده دستورات لطفا بروی دکمه امتحان کنید کلیک نمایید </body>
پشتیبانی مرورگرها
در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی از تگ div در HTML پشتیبانی میکنند یا خیر.
پشتیبانی از صفات و رویدادهای عمومی
تگ div قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.
نکات و توضیحات
- تگ DIV در حالت عادی یا به عبارتی پیش فرض استایل خاصی ندارد ولی ما میتونیم به آسانی با استفاده از CSS بهش استایل بدیم و اون رو سفارشی سازی کنیم. ( مانند مثال ها )
- به سهولت و آسانی میتونیم درون تگ div از ID ها و Class ها استفاده کنیم. ( مانند مثال ها )
- عملا تگ div قالبی هست برای نگهداری سایر تگ ها و هرتگی که نیاز باشه رو میتونید درونش بنویسید ( استثنایی برای قرار دادن سایر تگ ها درون این تگ وجود نداره )
دستورات CSS پیش فرض
غالبا مرورگرها تگ div را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند شما هم می توانید از این دستورات استفاده کنید.
div {
display: block;
}
توصیه ما به شما دوست عزیزم این است که با شرکت در دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید.
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید