آموزش HTML – قسمت چهاردم(آشنایی با تگ div)

سلام

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

در HTML میتونیم صفحه را به چند قسمت تقسیم کنیم و برای هر قسمت کدهای خاصی را قرار بدیم ، در قدیم برای تقسیم بندی صفحه از Table استفاده می کردن ولی با توجه به اینکه Table انعطاف پذیری بالایی نداشت جای خودش به div داد ، با تگ div میتونیم صفحه را به هزاران قسمت تقسیم و برای هر قسمت کد متفاوتی بنویسیم.

• نمونه تگ <div>

<div>
<h1> beporsam </h1>
</div>

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

• استایل ها در تگ <div>

در تگ div به سه روش میتونیم استایل دهی کنیم:

1- استایل درون خطی  2- استفاده از کلاس  3- استفاده از آی دی

1- استایل درون خطی:

مانند تگ های <h> و <span> و .. که میتونستیم ، استایل درون خطی بدیم در div هم میتونیم همین کار انجام بدیم:

<div style="background-color:black; color:white;">

</div>

در کد بالا یک تگ div باز کردیم و استایل درون خطی بهش دادیم (رنگ پس زمینه را سیاه و رنگ فونت را سفید کردیم) ، کد بالا را در یک فایل HTML بنویسید و نتیجه را مشاهده کنید.

می بینید که در خروجی هیچ چیزی نمی بینید! در واقع ما با تگ <div> بالا برای خودمون یک بخشی از صفحه را تقسیم کردیم و استایل دادیم، حالا میتونید داخل تگ div هر چی(اعم از متن،جدول،عکس و …) قرار بدید.

<div style="background-color:black; color:white;">
 <h1> wwww.beporsam.ir </h1> <br>
  <table border="1px">
   <tr>
    <td> سلام </td>
    <td> سلام </td>
    <td> سلام </td>
   </tr>
   <tr>
    <td> سلام </td>
    <td> سلام </td>
    <td> سلام </td>
   </tr>
   <tr>
    <td> سلام </td>
    <td> سلام </td>
    <td> سلام </td>
   </tr>
  </table>
</div>

حال کد بالا را ذخیره و نتیجه را ببینید

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

استایل دهی با استفاده از کلاس و آی دی را میزاریم برای قسمت بعد.

سوال داشتید در سایت بپرسید ، پاسخگوی سوالات شما هستیم.

با ما باشید تا آموزش های بعدی …

موفق باشید.