طراحی وب سایت | خدمات سئو حرفه ای | بازاریابی اینترنتی
به طور خلاصه در توصیح این لایه بندی در اچ تی ام ال باید گفت که از تگ div برای ایجاد بلاک های غیر هم سطح نگهدارنده (container) سایر عناصر صفحه که در ادامه توضیحات ، به طور خلاصه با این ویژگی تگ آشنا خواهیم شد.
کاربرد تگ div در htmlتگ div در زبان برنامه نویسی اچ تی ام ال برای ایجاد لایه های نگهدارنده برای فرمت بندی بخش های مختلف page مورد استفاده قرار می گیرد، در واقع بیشتر سایت هایی که در اینترنت مشاهده می کنیم، از بلاک هایی تو در تو درست شده اند که به کمک ویژگی های css به شکل منطقی و نظم یافته ای خود را نشان میدهند، فبل از این طراحان وبسایت برای طرح های خود در مورد فرمت بندی page از تگ table استفاده می کردند که در این دوره به دلایلی پیشنهاد شده تنها از جداول برای اهدافی ک قصد ورود اطلاعات یا آمار را دارین استفاده شود که نیاز به table بندی دارند استفاده شود نه برای فرمت بندی صفحات.
تگ div در حالت پیش فرض توسط Browserها به صورت غیر هم سطح پردازش می شود، یعنی در ابتدا و انتهای آن خطی جدا کننده (به صورت فرضی) در نظر گرفته می شود، در مثال زیر با نحوه تعریف و کاربرد این تگ آشنا می شویم.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> جهان سایت | موارد کاربردی تگ div در html</title> <!-- http://jahansite.com --> </head> <body> <div dir="rtl">این یک بلاک div است.</div> </body> </html>
ملاحظه می کنید که برای نمایش صحیح حروف فارسی از تگ dir با مقادیر rtl استفاده کرده ایم، البته در کدنویسی پیشرفته، توصیه می شود در حد امکان از استایل های خطی html اجتناب شده و اینگونه تنظیمات با css انجام شود .
استفاده از تگ div در html به موارد ساده ختم نمی شود، در کدنویسی پیشرفته معمولا نیاز به تعریف بلاک های div تو در تو وجود دارد که به دلیل یکپارچه و وابسته بودن زبان های html و css در وب، برای ایجاد تنظیمات ظاهری، علاوه بر تگ div از استایل css نیز در کنار آن استفاده می شود.
در مثال کاربردی زیر، نحوه ایجاد چند بلاک div فرمت بندی شده را ملاحظه می کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>جهان سایت | کاربرد تگ div در html</title>
<!-- http://jahansite.com -->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
direction:rtl;
font-size:12px;
}
</style>
</head>
<body>
<!-- بلاک اصلی -->
<div style="display:block; width:600px; height:auto; border:1px solid #999; background-color:#9CF; margin:0 auto; direction:rtl; padding:4px;">
بلاک div شماره ۱
<!-- بلاک زیر مجموعه -->
<div style="display:inline-block; width:200px; height:200px; border:1px solid #999; background-color:#6C9; float:left; margin:4px;">
بلاک div شماره ۲
</div>
<!-- بلاک زیر مجموعه -->
<div style="display:inline-block; width:200px; height:200px; border:1px solid #999; background-color:#FC0; float:left; margin:4px;">
بلاک div شماره ۳
</div>
<!-- بلاک جدا کننده -->
<div style="clear:both;"></div>
<!-- بلاک زیر مجموعه -->
<div style="display:block; width:590px; height:50px; border:1px solid #999; background-color:#CCC; margin:4px;">
بلاک div شماره ۴
</div>
<!-- بلاک جدا کننده -->
<div style="clear:both;"></div>
<!-- بستن بلاک اصلی -->
</div>
<hr />
با استفاده از تنظیم بلاک های div به صورت تو در تو و بهره بردن از css، طراحان وب قالب ها و طرح های خود راقالب بندی می کنند.
</body>
</html>
برای دانلود رایگان این فایل صوتی ابتدا شماره موبایل و ایمیل خود را در فیلدهای زیر وارد نمائید و سپس به روی دکمه دانلود کلیک کنید
