تگ DIV در HTML

در این بخش از اموزش html به سراغ تگ div در html می رویم و با ان آشنا می شویم.

یکی از مهم ترین تگ ها در html تگ div می باشد. این تگ برای بخش بندی مختلف صفحات وب کاربرد دارد.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>sh711.com</title>
<style>
div{
background-color: #0f74a8;
color: blue;
padding: 50px 10px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="aa">
<p>sh711.com</p>
</div>
</body>
</html>

کاربرد تگ div در html:

از تگ div در html و صفحات وب زیاد استفاده می شود. با تگ div می توان بخش های مختلف ایجاد کرد و با استایل به انها رنگ وبوی خاصی داد. با استفاده از تگ div می توانید به دسته ای از تگ ها دستورات css اعمال کنید.

در مثال پایین با نحوه کار تگ div در html آشنا می شوید:

شما می توانید با تگ div یک سند html را به بخش های مختلف تقسیم کنید. از این تگ برای تعیین ساختار اصلی صفحه استفاده می شود.

در تگ div می توان مجموعه ای از تگ ها را قرار داد و از آن مجموعه در صفحات مختلف بارها استفاده کرد.

در مثال پایین با نحوه کار تگ div در html و اعمال css به آنها آشنا می شوید:

<!DOCTYPE html>
<html>
<body>
<div>sh711.com</div>
<div>World</div>
<p>The DIV element is a block element, and will start on a new line.</p>
</body>
</html>

تگ div در html بسیار کاربردی میباشد. این تگ ، مهمترین و کاربردی ترین تگ ها در html میباشد. قبل از این تگ از تگ table برای بخش بندی صفحات html استفاده می شد. اما دیگر تگ table برای بخش بندی صفحات کاربردی  ندارد.

اگر کد صفحات مختلف سایت ها را بررسی کنید می بینید که بارها از این تگ استفاده شده است.

اعمال css بر تگ div :

عناصر تگ div در یک بلوک قرار می گیرند یعنی یک خط را کامل اشغال می کنند. اگر از دو div استفاده کنید زیر هم قرار می گیرند. اما با استفاده از css می توانید تغییراتی در آن ایجاد کرد.

در مثال پایین کاربرد تگ div را در html بررسی می کنیم.

<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</body>
</html>

تگ span :

از تگ span برای استایل دادن به یک بخش از متن استفاده می شود.

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

از تگ span معمولا در html و طراحی قالب سایت زیاد استفاده می شود.

<!DOCTYPE html>
<html>
<body>
<h1>My <span style="color:red">Important</span> Heading</h1>
</body>
</html>


نویسنده : هدایت عباسی

تگ ها : آموزش html
ثبت نظر