آموزش HTML – جلسه چهارم ( تگ div )

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

 

تگ div :

div مخفف کلمه ( division  ) به معنای بخش، قسمت می باشد و جزء تگ های عمومی محسوب می شود در HTML . شکل نوشتن کد این تک به این صورت می باشد  که با <div> باز می شود و با </div> بسته می شود. (این تگ در داخل تگ body مورد استفاده قرار میگیره ) .


<div>



</div>

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

از تگ div  برای تقسیم بندی صفحه ی HTML  خود ( قسمت body ) به قسمت های مختلف استفاده می شود. به عنوان مثال برای جدا سازی قسمت footer  و header  و…. وب خود از این تگ باید استفاده کنیم. به مثال پایین توجه کنید:

 

<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<div style = "background-color: rgb(200, 99, 99);" >

<span>قسمت ۱ </span>

</div>


<div style = "background-color: rgb(130, 200, 99);" >

<span>قسمت۲ </span>

</div>


<div style = "background-color: rgb(99, 139, 200);">

<span>قسمت ۳</span>

</div>

</body>
</html>

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

 

آموزش تگ div در HTML

آموزش تگ div در HTML

همان طور که می بینید در صفحه ما ۳ قسمت جداگانه ایجاد شده است که می تونیم با استفاده از کد های css مکان قرار گیری ، نوع قرارگیری هر قسمت و.. را تایین کنیم .

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

 

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

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

۲ ویژگی مهم تگ div در HTML :

  1. class
  2. id

از این ۲ ویژگی برای style  دهی استفاده میشود ( css ). که ما می توانیم  با استفاده از این ویژگی ها برای هر div استایل مخصوص به خودش را بدهیم .

برای تعریف کلاس در CSS از علامت نقطه (.) استفاده می شود.

 

برای تعریف id در CSS از علامت نقطه (#) استفاده می شود.

به مثال زیر توجه کنید :

 

<body>


<div class="header" >

<span>قسمت ۱ </span>

</div>




<div id="footer" >

<span>قسمت۲ </span>

</div>


</body>

قسمت css همان مثال :

 

.header {}
#footer {}

 

نگارش و انتشار توسط ابراهیم عادلی

فعال در زمینه های : طراحی رابط کاربری UI ، توسعه و طراحی وب ، تولید محتوی مارکتینگ گوگل

دیدگاه شما

ایمیل شما نزد ما محفوظ خواهد بود.