آموزش HTML – لیست (۸)
در آموزش قبلی ما به صورت کامل با جداول و شیوه استفاده از آنها آشنا شدیم. حال در این قسمت از آموزشهای وبسایت آموزش تک قصد داریم شما را با پیادهسازی لیست در یک سند HTML آشنا کنیم.
تصور کنید که میخواهید یک لیست خرید را در صفحه وبتان قرار بدهید. برای اینکار میتوانید چندین تگ p را در چندین خط مختلف قرار داده و محتوا را در بین آنها وارد کنید. اما این کار چندان منطقی نیست، به این خاطر که ما ظاهری مانند یک لیست را دریافت نخواهیم کرد. برای همین موضوع ما نیاز داریم که از تگهای ساخت لیست در HTML یعنی ul و ol استفاده کنیم.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
تفاوت تگ UL و OL
اگر با نرم افزاری مانند ورد یا لیبره آفیس کار کرده باشید مطمئنا با لیستها نیز آشنایی دارید. در دنیای متون ما دو نوع از لیستها را در اختیار داریم:
لیستهای مرتب یا Ordered List
لیستهای نامرتب یا Unordered List
تفاوت این دو حالت بسیار ساده است. در لیستهای مرتب آیتمها براساس یک حالت ترتیبی نوشته میشوند. منظور از حالت ترتیبی این است که المانی برای شمارش آیتمهای لیست قرار داده میشود. برای مثال:
۱- تخم مرغ
۲- سیب زمینی
۳- پیاز
یا
آ) جوراب
ب) شلوار
پ) کلاه
اما در لیستهای نامرتب بجای استفاده از اعداد و یا حروف ما با یکسری از اشکال روبرو هستیم. برای مثال:
تخم مرغ
سیب زمینی
پیاز
حال برای پیادهسازی این لیستها در یک سند HTML ابتدا نگاهی به لیستهای مرتب میاندازیم. برای شروع کار یک سند HTML را با المانهای پایهای نوشته و سپس تگ زیر را به قسمت body آن اضافه کنید:
1 2 3 |
<ol> </ol> |
حال اگر سند را ذخیره کرده و در مرورگر نمایش دهید هیچ چیزی را مشاهده نخواهید کرد. به این دلیل که شما به یک تگ دیگر به اسم li یا list item نیاز دارید. برای استفاده از این تگ نیاز است که آن را در بین ol یا ul قرار دهید. به مثال زیر توجه کنید:
1 2 3 4 5 |
<ol> <li>Orange</li> <li>Apple</li> <li>Banana</li> </ol> |
حال یک بار دیگر سندتان را ذخیره کرده و در مرورگر آن را مشاهده کنید. یک لیست را میتوانید ببینید که آیتمها در آن همراه با اعداد مرتبط قرار گرفته است.
میتوانید شیوه نمایش لیستها را از نظر اعداد و کاراکترها تغییر بدهید. برای این کار کافیست از خاصیت type بهره بگیرید. به مثال زیر توجه کنید:
1 2 3 4 5 |
<ol type="A"> <li>Orange</li> <li>Apple</li> <li>Banana</li> </ol> |
مقدار خاصیت type میتواند A، I، ۱، a و i باشد.
در ol به صورت پیشفرض مقدار type برابر با ۱ است. اما میتوانید مقدار عددی را نیز تغییر دهید. برای مثال اگر بخواهید از ۱۰ شروع کنید میتوانید به صورت زیر عمل نمایید.
1 2 3 4 5 |
<ol start="10"> <li>Orange</li> <li>Apple</li> <li>Banana</li> </ol> |
لیستهای نامرتب یا ul
تنها تفاوت این لیستها با لیست قبلی شیوه نمایش آن در مرورگر است. در این حالت بجای استفاده از اعداد، حروف و… لیست شما با استفاده از علائم و آیکونها نمایش داده میشود. مثال زیر را در یک مرورگر اجرا کنید:
1 2 3 4 5 |
<ul> <li>Orange</li> <li>Apple</li> <li>Banana</li> </ul> |
همانطور که مشاهده میکنید با یک دایره توپر طرف هستید. برای اینکه بتوانید شکل آن را تغییر دهید، نیاز است که از CSS استفاده کنیم. برای مثال اگر بخواهیم از مربع استفاده کنیم به صورت زیر از خاصیت list-style-type بهره خواهیم برد:
1 2 3 4 5 |
<ul style="list-style-type: square;"> <li>Orange</li> <li>Apple</li> <li>Banana</li> </ul> |
لیستهای تعریفی
با استفاده از لیستهای تعریفی شما این قابلیت را پیدا خواهید کرد که برای هر کدام از آیتمها یک تعریف بنویسید. به مثال زیر توجه کنید:
1 2 3 4 5 6 |
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> |
از dl به عنوان تگ شروع کننده لیستهای تعریفی استفاده میشود. سپس برای هر عنوان یا بهتر است بگوییم هر آیتم از یک dt بهره میگیریم. برای افزودن توضیحات به هر آیتم نیز از dd استفاده میکنیم.
لیستهای تو در تو
گاهی اوقات ممکن است نیاز داشته باشید که آیتمهای لیستتان را دستهبندی بکنید. برای مثال همان فرایند خرید را در نظر بگیرید. میتوانید خریدتان را به مواد خوراکی، پوشاک و… تقسیم کرده و سپس برای هر کدام آیتم مربوطه را بنویسید. برای مثال به کدهای زیر دقت کنید:
1 2 3 4 5 6 7 8 9 |
<ul> <li>food <ul> <li>Tomato</li> <li>Potato</li> </ul> </li> <li>Shirt</li> </ul> |
در پایان
در آموزش هشتم از سری آموزشهای HTML ما نگاهی بسیار کامل به لیستها و خاصیتهای آن انداختیم.