تا الان توی دوره آموزش HTML خیلی چیزها یاد گرفتیم . کم کم میخوایم وارد کدهای پیچیده تری بشیم . یه قابلیت وجود داره بنام لیست در HTML که میاد یه لیست برامون درست میکنه. چه فایده ای داره !؟ اکثرا توی منوها ازش استفاده میشه و بعضی جاها هم بعنوان مزایا و معایب و چنین امثالی !
چند تا حالت مختلف داریم توی لیست نویسی در HTML . اولی لیست بدون ترتیب هست که بهش میگیم unordered list . یعنی همینجوری ریختیم و عدد مهم نیست که شماره بده بهمون . یه لیست دیگه هم که میتونین حدس بزنین لیست ترتیب دار هست که اسمش رو میگیم ordered list . شماره میده که این لیست آیتم اول با عدد ۱ اینه و دومی ۲ و …
یک حالت دیگه هم وجود داره که برای لیست توصیفی هست که هر آیتم رو میایم توضیحات میدیم بهش . لیست توصیفی هم بهش میگیم description list . تو مثال های پایین به بررسی هر کدوم می پردازیم.
- Coffee
- Tea
- Milk
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
لیست بالا همون طوری که میبینین از تگ ul استفاده شده که خلاصه شده unordered list هست . ترتیب هم میبینین چیزی زده نشده . حالا میایم همین لیست بدون ترتیب رو لیست ترتیبی میکنیم ببینیم چه فرقی دارن با هم دیگه .
- Coffee
- Tea
- Milk
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
توی لیست بالا هم دیدیم که با اضافه کردن ol چه حالتی شد . شروع کرد به شماره گذاری آیتم های لیست .
خب تا الان دیدیم که برای استفاده از لیست در HTML ما ابتدا باید تگ مناسب رو چه لیست ترتیبی یا غیرترتیبی استفاده کنیم که یا میشه ol یا ul و بعد باید توی اون تگ تعداد آیتم هایی که میخوایم داشته باشیم رو با li مشخص کنیم که این تگ میگه آیتم های لیست چی هستن. همین !
برای لیست توصیفی هم باید لیست رو با dl مشخص کنیم اول ! که خلاصه شده description list هستش ولی داخل این تگ باید کد تگ های دیگه ای رو استفاده کنیم . برای اسم آیتم از dt که term هستش یعنی اسم اون آیتم لیست چیه و برای توضیحات اون آیتم از لیست هم از تگ dd استفاده میکنیم که همون description هست .
- Coffee
- - black hot drink
- Milk
- - white cold drink
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
لیست در لیست !
عبارتی که ما ترجمه میکنیم میشه این وضعیت ! در اصل منظورمون nested list هست . یعنی چی حالا !؟ یعنی ما میخوایم یه لیستی داخل یه لیست دیگه استفاده کنیم. به چه دردی میخوره !؟ خیلی باهاش مواجه شدین. داخل منوهای وب سایت تصویر کنین از یه ul استفاده شده و منوهای اصلی داخلش قرار گرفته حالا با موس میریم روی یک منو و زیرش یه زیر منو دیگه باز میشه ! همین nested list هستش دیگه ! یعنی اون آیتم لیست منو خودش یه لیست هست که داخلش چند تا منو دیگه استفاده شده. این کدها خیلی کاربرد دارن توی طراحی وب سایت و باید حتما یاد بگیرین این قضیه رو . مثال زیر رو ببینین :
- Coffee
- Tea
- Black tea
- Green tea
- Milk
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
همونطوری که توی مثال دیدین ما اومدیم یه لیست اولیه ایجاد کردیم و آیتم چایی خودش دو تا زیر مجموعه باید داشته باشه که اون دو تا رو آوردیم توی یه لیست جدید ! اینجوری میشه لیست در لیست یا اصطلاح nested list . این رو بگیم که ما میتونیم از نظر کدنویسی چندین لایه دیگه هم بریم جلو واسه خودمون ! ولی معمولا استفاده ای نمیشه . نهایتا سه یا چهار لایه پیش میریم و دیگه ازون به بعد رو کسی تا الان فکر نکنیم مورد استفاده اش قرار گرفته باشه مگر در کدهای خاص !
چند تا نکته بگیم بهتون !؟ توی لیست های ترتیبی میتوینم بیایم اون عددی که میاره کنار آیتم ها رو عوض کنیم ! نه اینکه عددش رو عوض کنیم . نوع واحد ترتیب رو . مثلا بیایم بهش بگیم به جایی عدد از حروف A تا Z استفاده کن. یا از حروف یونانی ! فقط کافیه یه ویژگی تعریف کنیم به نام type و داخل اون بر اساس چیزی که تو ذهنمون هست ازش استفاده کنیم . جدول زیر توضیح خوبی داده شده در مورد انواع این ویژگی type :
| نوع | توضیحات |
|---|---|
| type="1" | همون حالتی که تا الان یاد گرفتیم و پیش فرض هست که عدد میذاره. |
| type="A" | شماره گذاری با حروف بزرگ لاتین انجام میشه. |
| type="a" | شماره گذاری با حروف کوچیک لاتین انجام میشه. |
| type="I" | شماره گذاری با عددهای بزرگ یونانی انجام میشه. |
| type="i" | شماره گذاری با حروف کوچیک یونانی انجام میشه. |
توی مثال زیر اومدیم از حروف بزرگ لاتین استفاده کردیم و لیستمون رو شماره گذاری کرده واسمون:
- Coffee
- Tea
- Milk
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
مثال زیر هم برای حروف یونانی هست . کار خاصی نداره !
- Coffee
- Tea
- Milk
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
نکته دیگه اینکه توی لیست های ترتیبی میشه شماره گذاری هم از یه شماره خاصی شروع کنیم ! مثلا از شماره ۵۰ شروع بشه لیستمون و بره بالا. برای این کار فقط کافیه ویژگی start رو به لیستمون اضافه کنیم تا این کار رو برامون انجام بده. مثال زیر رو ببینین :
- Coffee
- Tea
- Milk
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
توی حروف یونانی هم به همین روش عدد میذاریم فقط. مثال زیر رو ببینین :
- Coffee
- Tea
- Milk
<ol type="I" start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
