در یادگرفتن گذشته ما به طور بدون نقص با جداول و طریق استعمال از آنان آشنا شدیم. حالا درین نصیب از فراگیری‌های وب سایت فراگیری تک قصد داریم شما‌را با پیاده‌سازی لیست در یک گواهی HTML آشنا کنیم.
فکر کنید که می خواهید یک لیست خرید را در کاغذ اینترنت‌تان قرار بدهید. برای اینکار میتوانید یک سری تگ p را در تعدادی خط متفاوت قرار داده و محتوا را میان آنها وارد نمائید. ولی این فعالیت چندان منطقی وجود ندارد، به‌این خیال که ما ظاهری مانند یک لیست را اخذ نخواهیم کرد. برای همین زمینه ما نیاز داریم که از تگ‌های ایجاد لیست در HTML یعنی ul و ol استعمال کنیم.

 طراحی سایت در مشهد

یادگرفتن پیشنهادی برای شما : یادگرفتن بدون نقص HTML و HTML5

تفاوت تگ UL و OL
چنانچه با قابل انعطاف افزاری مانند ورد یا این که لیبره آفیس فعالیت کرده باشید مطمئنا با لیست‌ها نیز شناخت دارید. در دنیای متن ها ما دو جور از لیست‌ها را در دست داریم:
لیست‌های تروتمیز یا این که Ordered List
لیست‌های نا مرتب یا این که Unordered List
تفاوت این دو موقعیت بسیار معمولی میباشد. در لیست‌های تروتمیز مورد‌ها براساس یک وضعیت ترتیبی نوشته میگردند. خواسته از موقعیت ترتیبی این میباشد که المانی برای شمارش مورد‌های لیست قرار داده می‌گردد. مثلا:
۱- تخم مرغ
۲- سیب زمینی
۳- پیاز
یا این که
آ) جوراب
ب) شلوار
پ) کلاه

البته در لیست‌های به هم ریخته بجای استعمال از اعداد و یا این که حروف ما با یک سری از گونه های روبرو هستیم. مثلا:
تخم مرغ
سیب زمینی
پیاز

درحال حاضر برای پیاده‌سازی این لیست‌ها در یک گواهی HTML در آغاز نگاهی به لیست‌های آراسته می‌اندازیم. برای آغاز فعالیت یک گواهی HTML را با المان‌های اساس‌ای نوشته و بعد از آن تگ تحت را به نصیب body آن بیشتر فرمایید:

1
2
3

درحال حاضر در‌حالتی که گواهی را ذخیره کرده و در مرورگر اکران دهید هیچ چیزی را مشاهده نخواهید کرد. چرا‌که شما به یک تگ دیگر به نام li یا این که list item نیاز دارید. برای به کارگیری از این تگ نیاز میباشد که آن را در میان ol یا این که ul قرار دهید. به نمونه تحت دقت نمائید:

1
2
3
4
5

Orange

Apple

Banana

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

میتوانید طریق اکران لیست‌ها را از دید اعداد و کاراکترها تغییر و تحول بدهید. برای این عمل کافی‌ست از خواص type منفعت بگیرید. به نمونه پایین اعتنا نمایید:

1
2
3
4
5

Orange

Apple

Banana

مقدار خواص type می تواند A، I، ۱، a و i باشد.
در ol به طور پیشفرض مقدار type برابر با ۱ میباشد. البته می توانید مقدار عددی را نیز تغییر‌و تحول دهید. مثلا در صورتی بخواهید از ۱۰ آغاز نمائید می توانید به طور ذیل کار فرمائید.

1
2
3
4
5

Orange

Apple

Banana

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

1
2
3
4
5

Orange

Apple

Banana

همان طور که مشاهده میکنید با یک دایره توپر طرف می باشید. برای اینکه بتوانید صورت آن را تغییر تحول دهید، نیاز میباشد که از CSS استعمال کنیم. مثلا در شرایطی‌که بخواهیم از مربع به کارگیری کنیم به طور ذیل از خواص list-style-type سود خوا هیم پیروزی:

1
2
3
4
5

Orange

Apple

Banana

لیست‌های تعریفی
با به کار گیری از لیست‌های تعریفی شما این امکان را پیدا خواهید کرد که برای هر یک از مورد‌ها یک تعریف و تمجید بنویسید. به نمونه پایین دقت نمایید:

1
2
3
4
5
6

Coffee

- black hot drink

Milk

- white cold drink

از dl تحت عنوان تگ آغاز کننده لیست‌های تعریفی استعمال می‌گردد. آن‌گاه برای هر تیتر یا این که بهتر میباشد بگوییم هر مورد از یک dt فایده میگیریم. برای اضافه کردن توضیحات به هر مورد نیز از dd به کارگیری میکنیم.

لیست‌های تو در تو
بعضی اوقات ممکن میباشد نیاز داشته باشید که گزینه‌های لیست‌تان را گونه‌بندی بکنید. به عنوان مثال به عبارتی روند خرید را در حیث بگیرید. میتوانید خریدتان را به مواد خوراکی، پوشاک و… تقسیم کرده و بعد برای هرمورد مورد مربوطه را بنویسید. به عنوان مثال به کدهای تحت توجه فرمائید:

1
2
3
4
5
6
7
8
9

food

Tomato

Potato

Shirt

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