آموزش لیست ها (Lists) در html (مرتب و افقی)

آموزش لیست ها (Lists) در html (مرتب و افقی)

زمان مطالعه

3 دقیقه

تعداد بازدید

868

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب
بهزاد میرزازاده
در مورد نویسنده : همیشه سخت تلاش کردم و به موفقیت های خیلی زیادی رسیدم اما دلیل نشد که متوقف بشم من برای هر روز برنامه دارم و به امید موفقیت های بزرگتر قدم بر میدارم همیشه سخت ترین مسئله ها، ساده ترین راه حل رو دارند پس بهانه جویی نباید روش کار ما برنامه نویسان باشه!!! ما می توانیم آینده را تعیین کنیم

آموزش لیست ها (Lists) در html (مرتب و افقی)

آموزش لیست ها (Lists) در html (مرتب و افقی)

زمان مطالعه

3 دقیقه

تعداد بازدید

868

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب

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

لیست ها (Lists) در HTML

در html با استفاده از لیست ها می توانید موارد مرتبط به هم را لیست بندی کنید. که با دو تگ ul , ol  می توانید لیست های مورد نظر خود را ایجاد کنید.

در زبان نشانه گذاری HTML ما چند نوع لیست داریم:

  • لیست مرتب (Order List) یا به اختصار OL
  • لیست نامرتب (Unorder List) یا به اختصار UL
  • لیست توصیفی (Description List) یا  به اختصار DL

آموزش لیست ها در html

تگ ul

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

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

تگ ol

برای ایجاد لیست های شماره گذاری شده میتونید از تگ ol استفاده کنید.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

لیست های توصیفی (تگ dl)

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

تگ dl برای ایجاد لیست کلی، تگ dt برای ایجاد عنوان و تگ dd برای توصیف طولانی برای عنوان مورد نظر استفاده می شود.

<h2>مثال از لیست توصیفی</h2>

<dl>
  <dt>کافی</dt>
  <dd>- نوشیدنی گرم</dd>
  <dt>شیر</dt>
  <dd>- نوشیدنی سرد</dd>
</dl>

لیست های توصیفی (تگ dl)

لیست های مرتب (OL)

این لیست ها دارای ترتیب قرارگیری خاصی هستند و شماره گذاری می شوند، شکل آن به صورت زیر است:

1 – اولین آیتم

2 – دومین آیتم

3 – سومین آیتم

لیست های مرتب با تگ <ol> شروع می شوند و هر کدام از آیتم های لیست مرتب شده با تگ <li> مشخص می شوند.

آیتم های لیست مرتب شده به صورت پیش فرض با اعداد مشخص می شوند، مانند زیر:

 

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

لیست های مرتب (OL) در HTML

 

یک لیست مرتب شده می تواند عددی یا الفبایی باشد.

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

با Attribute (صفت) type در لیست های مرتب (ol)، می توانیم نشانه گر آیتم های لیست را مشخص کنیم.

جدول زیر انواع نشانه گر ها را در لیست های مرتب شده نشان می دهد:

 

انواع نشانه گر در لیست های مرتب (OL) در HTML
نوع توضیحات
"1"=type آیتم های لیست با اعداد شماره گذاری می شوند (پیش فرض)
”Type=”A آیتم های لیست با حروف بزرگ علامت گذاری می شوند
”Type=”a آیتم های لیست با حروف کوچک علامت گذاری می شوند
”Type=”I آیتم های لیست با اعداد بزرگ رومی شماره گذاری می شوند
”Type=”i آیتم های لیست با اعداد کوچک رومی شماره گذاری می شوند

 

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

مثال: در این جا از مقدار پیش فرض که همان شماره گذاری با اعداد است استفاده کرده ایم.

 

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

 

انواع شماره گذاری لیست های مرتب (OL) در HTML

 

مثال: در این جا از مقدار A که همان حروف بزرگ انگلیسی است استفاده کرده ایم.

 

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

 

انواع شماره گذاری لیست های مرتب (OL) در HTML

 

مثال: در این جا از مقدار a که همان نشانه گذاری با حروف کوچک انگلیسی است استفاده کرده ایم.

 

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

 

انواع شماره گذاری لیست های مرتب (OL) در HTML

 

مثال: در این جا از مقدار I که همان شماره گذاری حروف رومی بزرگ است استفاده کرده ایم.

 

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

 

انواع شماره گذاری لیست های مرتب (OL) در HTML

 

مثال: در این جا از i که همان شماره گذاری حروف رومی کوچک است استفاده کرده ایم.

 

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

 

انواع شماره گذاری لیست های مرتب (OL) در HTML

 

کنترل شماره گذاری در لیست های مرتب

به صورت پیش فرض شماره گذاری لیست های مرتب از مقدار 1 شروع می شوند، اما اگر می خواهید شماره گذاری را از یک عدد مشخص شروع کنید باید از Attribute (صفت) start استفاده کنید. در مثال زیر این موضوع را به شما نشان داده ایم:

 

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

 

کنترل شماره گذاری در لیست های مرتب (OL) در HTML

 

همانطور که در تصویر می بینید برای همه انواع شماره گذاری قابل استفاده است.

لیست های مرتب تو در تو (nested OL)

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

 

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

 

 

لیست های مرتب تو در تو (nested OL) در HTML

 

نکته: یک آیتم لیست می تواند شامل یک لیست جدید و سایر عناصر HTML مانند تصویر، پیوند و غیره باشد.

لیست های نامرتب (UL)

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

  • آیتم
  • آیتم
  • آیتم

لیست های نامرتب با تگ <ul> شروع می شوند و هر کدام از آیتم های لیست نامرتب مانند لیست های مرتب با تگ <li> شروع می شوند.

آیتم های لیست نامرتب به صورت پیش فرض با دایره های سیاه کوچک مشخص می شوند، مانند زیر:

 

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

 

 

لیست های نامرتب (UL) در HTML

 

انتخاب سبک نشانه گر دیگر برای لیست های نامرتب

در CSS با ویژگی list-style-type می توانیم سبک های نشانه گر دیگری را به جز دایره سیاه کوچک انتخاب کنیم.

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

 

انتخاب سبک نشانه گر برای لیست های نامرتب (UL) در HTML
مقدار توضیحات
Disc دایره سیاه کوچک تو پر (پیش فرض)
Circle دایره سیاه کوچک تو خالی
Square مربع سیاه کوچک تو پر
None آیتم های لیست علامت گذاری نمی شوند

 

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

مثال: در این جا از مقدار پیش فرض برای علامت گذاری آیتم های لیست استفاده کرده ایم که همان disc است.

 

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

 

 

سبک های نشانه گر برای لیست های نامرتب (UL) در HTML

 

مثال: در این جا از مقدار circle که همان دایره سیاه تو خالی است برای علامت گذاری آیتم های لیست استفاده کرده ایم.

 

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

 

 

سبک های نشانه گر برای لیست های نامرتب (UL) در HTML

 

مثال: در این جا از مقدار square که همان مربع سیاه کوچک تو پر است برای علامت گذاری آیتم های لیست استفاده کرده ایم.

 

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

 

 

سبک های نشانه گر برای لیست های نامرتب (UL) در HTML

 

مثال: در این جا با مقدار none هیچ علامتی برای آیتم های لیست در نظر نگرفته ایم.

 

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

 

 

سبک های نشانه گر برای لیست های نامرتب (UL) در HTML

 

لیست های نامرتب تو در تو (nested UL)

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

 

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

 

 

لیست های نامرتب تو در تو (nested UL) در HTML

 

نکته: یک آیتم لیست می تواند شامل یک لیست جدید و سایر عناصر HTML مانند تصویر، پیوند و غیره باشد.

لیست های نامرتب افقی با CSS

لیست های HTML را می توان با CSS به روش های مختلف طراحی کرد.

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

 

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

 

منوی ناوبری با لیست های نامرتب (UL) در HTML

 

پس با ویژگی float : left می توانیم لیست افقی ایجاد کنیم.

شاید در این تکه کد بعضی از ویژگی ها برای شما نامفهوم باشد ولی نگران نباشید در بحث CSS به طور مفصل کل ویژگی ها را به شما آموزش خواهیم داد.

لیست های توصیفی (DL)

زبان نشانه گذاری HTML از لیست های توصیفی هم پشتیبانی می کند.

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

این لیست با تگ <dl> شروع می شود و شامل دو تگ داخلی است که در زیر آن ها را شرح داده ایم:

تگ <dt> که هر اصطلاح یا عبارت را تعریف می کند.

تگ <dd> که شامل توضیحاتی در باره آن عبارت است.

مثال زیر به طور واضح طریقه استفاده این تگ ها را نشان داده است.

 

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

 

 

لیست های توصیفی (DL) در HTML

 

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

 

تگ های ایجاد لیست در HTML
تگ توضیحات
<ul> تعریف یک لیست نامرتب
<ol> تعریف یک لیست مرتب
<li> تعریف یک آیتم از لیست
<dl> تعریف یک لیست توصیفی
<dt> تعریف یک اصطلاح در لیست توصیفی
<dd> توضیح در مورد هر اصطلاح در لیست توصیفی

 

خب به پایان بحث لیست ها در HTML رسیدیم و یاد گرفتیم که چطور لیست های خود و یا منوی ناوبری را ایجاد کنیم.

در مقاله بعدی HTML به مبحث بسیار مهم Block و inline می پردازیم.

بهزاد میرزازاده
در مورد نویسنده : همیشه سخت تلاش کردم و به موفقیت های خیلی زیادی رسیدم اما دلیل نشد که متوقف بشم من برای هر روز برنامه دارم و به امید موفقیت های بزرگتر قدم بر میدارم همیشه سخت ترین مسئله ها، ساده ترین راه حل رو دارند پس بهانه جویی نباید روش کار ما برنامه نویسان باشه!!! ما می توانیم آینده را تعیین کنیم


پرسش و پاسخ
0
دوره پیشنهادی
دوره پیشنهادی