توی جلسه چهارم از دوره جامع آموزش html، به کار با لیست در html می‌پردازیم. لیست‌ها کاربردهای زیادی دارن اما مهم ترین دلیل برای اینکه باید مفاهیم این جلسه رو خوب یاد بگیرید اینه که بتونید منوهای مختلف رو به درستی پیاده سازی کنید.
بیاید قبل از هر توضیح دیگه‌ای اول ببینیم لیست‌ها چی هستن، انواع لیست چیه و چه کاربردی دارن؟. پس مقدمه رو بیش از این طولانی نمیکنم. بیاید که با هم بریم سراغ آموزش??.
لیست در html (معرفی، انواع، کاربرد):
حتما تا حالا شده در حال خوندن کتاب باشید و به یه جمله بر بخورید که نوشته “از جمله این دلایل می‌توان به موارد زیر اشاره کرد:” و در ادامه هم اینجور چیزی نوشته باشه???.
- دلیل شماره 1
- دلیل شماره 2
- دلیل شماره 3
و یا چنین چیزی ????
- دلیل شماره 1
- دلیل شماره 2
- دلیل شماره 3
وقتی دارید یه صفحه وب طراحی می‌کنید هم قطعا به چنین حالتی نیاز پیدا می‌کنید به همین دلیل به یک سری تگ برای نشون دادن لیستی از موارد نیاز داریم. این اصلی‌ترین دلیل کار با لیست در html هست. اما علاوه بر اون شما به کمک لیست‌ها می‌تونید برای سایتتون منو طراحی کنید که طراحی منو به کمک لیست در html رو هم توی این جلسه بهتون آموزش میدم.
خب تا اینجای کار با لیست و کاربردهای اون آشنا شدین اما خوبه بدونید ما دو نوع لیست داریم، لیست‌های مرتب و لیست‌های نامرتب. حالا اینکه هرکدوم این‌ها چجور لیستی هستن و چطور پیاده‌سازی میشن رو در ادامه بهتون میگم.
لیست‌های مرتب در html:
لیست‌های مرتب همونطور که از اسمشون مشخصه ترتیب دارن. یعنی وقتی به آیتم‌های این لیست‌ها نگاه میکنیم با یه ترتیب خاصی مشخص شدن مثلا شماره خوردن. برای اینکه این مطلب براتون واضح‌تر بشه بیاید به یه مثال توجه کنیم. برای پیاده‌سازی یه لیست مرتب در html لازمه از کد زیر استفاده کنید
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
خروجی این کد به شکل زیر هست و همونطور که می‌بینید آیتم‌های این لیست از 1 تا سه شماره خوردن و این یعنی داریم از یه لیست مرتب استفاده میکنیم.
- Coffee
- Tea
- Milk
برای نشانه‌گذاری آیتم‌های لیست فقط به اعداد محدود نیستیم. ما می‌تونیم از حروف انگلیسی کوچیک و بزرگ هم استفاده کنیم. کافیه از خصیصه type برای مشخص کردن نحوه علامت‌گذاری استفاده کنیم که در مثال زیر نحوه استفاده از خصیصه type رو می‌بینید. اگه مقدار type رو برابر با A قرار بدیم شماره گذاری با حروف انگلیسی بزرگ و اگه مقدار type رو برابر با a قرار بدیم شماره گذاری آیتم‌های لیست با حروف انگلیسی کوچک انجام میشه.
توی کد زیر یه خصیصه دیگه می‌بینیم به اسم start که نشون میده شماره گذاری از کجا شروع بشه. مثلا توی قطعه کد زیر مقدار start برابر 5 هست و همونطور که می‌بینید توی خروجی کد شماره گذاری از 5 شروع شده و تا 7 ادامه پیدا کرده.
<ol type=”1″ start=”5″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
و خروجی هم به صورت زیر هست:
- Coffee
- Tea
- Milk
لیست‌های نامرتب در html:
لیست‌های نامرتب برعکس لیست‌های مرتب هستن یعنی آیتم‌هاشون هیچ ترتیب مشخصی ندارن. برای مثال تکه کد زیر نحوه پیاده سازی یه لیست نامرتب نشون داده شده. همونطور که می‌بینید خروجی این کد لیستی هست که آیتم‌های لیست هیچ ترتیب مشخصی ندارن و با دایره نشون داده شدن.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
خروجی:
- Coffee
- Tea
- Milk
البته دایره نها حالت برای نمایش آیتم‌های لیست نیست و میشه اون رو به مربع، دایره توخالی و… تغییر داد. به این منظور کافیه خصیصه style رو به همونطور که در کد زیر نشون داده شده به لیست اضافه کنیم. مقدار style یک دستور Css هست که مشخص میکنه آیتم‌های لیست با چه علامتی نمایش داده بشن. این دستور list-style-type هست و میتونه مقادیر circle، square، disc و… رو به بپذیره. برای مثال در کد زیر از مقدار circle استفاده شده که اتفاقا حالت پیش فرض برای آیتم‌های یه لیست نامرتب هست. شما می‌تونید circle رو به disc یا square تغییر بدید و می‌بینید که نتیجه تغییر میکنه.
<ul style=”list-style-type:circle;”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
خروجی:
- Coffee
- Tea
- Milk
حرف آخر:
توی این مطلب با لیست‌های مرتب و نامرتب و نحوه پیاده‌سازی اونها در html آشنا شدیم. اگه دوست دارید بیشتر راجع به لیست در html مطالعه کنید می‌تونید از این سایت کمک بگیرید. همونطور که در ابتدای مطلب بهتون گفتم یکی از کاربردهای اصلی لیست طراحی و پیاده سازی منو هست. اما از اونجایی که این آموزش مختص html هست و پیاده سازی منو علاوه بر دستورات html شامل دستورات Css هم میشه، بهتره که در آموزش دیگه‌ای بهش بپردازیم.
