آموزش HTML – جلسه ششم ( ساخت لیست )

در این جلسه از سری جلسات  HTML می خواهیم برای شما ایجاد لیست را آموزش دهیم.

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

انواع لیست در HTML :

۲ نوع لیست در HTML وجود دارد :

  1. لیست های بدون ترتیب ( نشانه ای ) : در این نوع ، ابتدای هر آیتم لیست یک نشانه قرار می گیرد (  مثل دایره ، مربع ، …. )
  2. لیست های ترتیبی ( شماره ای ) : در این نوع ، ابتدای هر آیتم لیست یک شماره قرار میگیرد که این شماره ها به ترتیب خواهد بود ( از عدد یک شروع می شود تا … )

 

لیست در HTML

 

لیست های بدون ترتیب ( نشانه ای ) :

برای ایجاد این نوع لیست از تگ <ul> استفاده می کنیم به این صورت که این تگ را ابتدا باز و بسته می کنیم ، مرورگر از روی این تگ متوجه می شود که باید یک لیست نمایش دهد ( لیست نشانه ای ).  بعد از این کار باید ایتم های لیست خود را وارد کنیم برای این کار به این صورت عمل می کنیم که متن آیتم را داخل تگ <li> می نویسیم به مثال زیر توجه کنید.

 

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



<ul>


<li> آیتم یک </li>


<li> آیتم دو </li>


<li> آیتم سه </li>


</ul>




 
</body>
</html>

در این مثال ما یک لیست با ۳ آیتم ایجاد کردیم . خروجی کد بالا به صورت زیر خواهد بود

  • آیتم یک
  • آیتم دو
  • آیتم سه

خاصیت تگ UL در HTML :

type : با این خاصیت نوع شکل نشانه برای آیتم های لیست مشخص می شود دارای ۴ مقدار زیر است

  • Disk : شکل نشانه به صورت دایره تو پر خواهد بود
  • Circle : شکل نشانه به صورت دایره تو خالی خواهد بود
  • Square : شکل نشانه به صورت مربع تو پر خواهد بود
  • None : نشانه ای در کنار آیتم نشان نمی دهد ( بدون نشانه )

 

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

 

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


<ul type="square">


<li>آیتم۱</li>


<li>آیتم ۲</li>


<li>آیتم۳</li>


       </ul>


       
</body>
</html>


در این مثال شکل نشانه ها به صورت مربع خواهد بود.

 

  • Coffee
  • Tea
  • Milk

 

لیست های ترتیبی ( شماره ای ) :

برای درست کردن این لیست از تگ <ol> استفاده می کنیم . بعد از بازو بسته کردن این تگ دوباره مثل لیست قبلی عمل کرده و با استفاده از <li> آیتم های لیست را می نویسیم.

مثال :

 

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


<ol>


<li> آیتم ۱ </li>


<li> آیتم۲ </li>


<li> آیتم۳ </li>


</ol>


  
</body>
</html>

خروجی این مثال :

 

  1. آیتم ۱
  2. آیتم۲
  3. آیتم۳

 

توجه کنید که این مکان وجود دارد که داخل هر لیست ، لیست های دیگری نیز میتوانیم استفاده کنیم مانند مثال زیر:

 

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

<ul>

<li> آیتم اول

<ol>

<li>آیتم ۱ </li>


<li> آیتم ۲ </li>

      </ol>

    </li>


<li> آیتم دوم

<ol>

<li>آیتم۱ </li >

<li> آیتم۲ </li >

<li> آیتم۳ </li >
      </ol >
    </li >
  </ul > 
   
</body>
</html>

خروجی این مثال :

  • آیتم اول
    1. آیتم ۱
    2. آیتم ۲
  • آیتم دوم
    1. آیتم۱
    2. آیتم۲
    3. آیتم۳
نگارش و انتشار توسط ابراهیم عادلی

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

دیدگاه شما

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