گروه آموزش طراحی سایت 15 خرداد 1392 بدون نظر 1101 بازدید آموزش HTML

در سلسله آموزشهای طراحی سایت آنلاینر به لایه بندی و کار با div ها پرداختیم.

در این مقاله قصد بررسی لیست های ترتیبی و غیر ترتیبی را داریم.

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

لیست های غیر ترتیبی  در HTML:

برای ایجاد یک لیست غیر ترتیبی از تگ های ul و li  استفاده میکنیم.

مثال:


<html>

<head>

</head>

<body>
فهرست
<ul>
<li> متن شماره 1 </li>
<li> متن شماره 2 </li>
<li> متن شماره 3 </li>
<li> متن شماره 4 </li>
<li> متن شماره 5 </li>
</ul>

</body>

</html>

لیست های غیر ترتیبی در HTML:

این تکه کد یک لیست غیر ترتیبی در صفحه وب شما ایجاد خواهد کرد. خروجی این کد بصورت زیر است:

فهرست

  • متن شماره 1
  • متن شماره 2
  • متن شماره 3
  • متن شماره 4
  • متن شماره 5

برای ایجاد یک لیست ترتیبی بطوریکه هر زیر مجموعه شماره ای منحصر به فرد داشته باشد باید از تگ های ol  و li استفاده کرد.


<html>

<head>

</head>

<body>
فهرست
<ol>
<li> متن شماره 1 </li>
<li> متن شماره 2 </li>
<li> متن شماره 3 </li>
<li> متن شماره 4 </li>
<li> متن شماره 5 </li>
</ol>

</body>

</html>

خروجی این تکه کد بصورت زیر است:

فهرست

  1. متن شماره 1
  2. متن شماره 2
  3. متن شماره 3
  4. متن شماره 4
  5. متن شماره 5

لیست های تو در تو در HTML :

همچنین در طراحی صفحات وب میتوانید از لیست های تو در تو نیز استفاده کنید. مثال زیر نحوه نوشتن لیست های تو در تو را نشان میدهد.


<html>

<head>

</head>

<body>
فهرست
<ul>
<li>متن شماره 1</li>
<li>متن شماره 2</li>
<li>متن شماره 3
       <ol>
<li>زیر مجموعه</li>
<li>زیر مجموعه</li>
<li>زیر مجموعه</li>
<li>زیر مجموعه</li>
<li>زیر مجموعه</li>
       </ol>
    </li>
<li>متن شماره 4</li>
<li>متن شماره 5</li>
</ul>

</body>

</html>

خروجی این کد بصورت زیر است.

فهرست

  • متن شماره 1
  • متن شماره 2
  • متن شماره 3
    1. زیر مجموعه
    2. زیر مجموعه
    3. زیر مجموعه
    4. زیر مجموعه
    5. زیر مجموعه
  • متن شماره 4
  • متن شماره 5

 

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

با آنلاینر همراه شوید …

دیدگاه ها بسته شده اند.