با جلسه چهارم از آموزش طراحی وب در خدمت شما دوستان خواهیم بود. قبل از هر چیز لطفا جلسات قبلی را مطالعه فرمایید.
در جلسه قبل به آموزش برچسب هایی پرداختیم که می توان گفت از برچسب های پایه HTML بشمار می آیند؛ البته تعداد آنها به چند موردی که گفته شد ختم نمی شود! در این جلسه قصد داریم تا با لیست های ترتیبی و غیرترتیبی آشنا شویم.
از لیست ها برای قرار دادن موارد متعدد یک مجموعه استفاده می شود. حال این مجموعه ممکن است شامل چند نام یا توضیحات کوتاه از یک مساله و یا لیست کردن چند عدد پشت هم باشد! در HTML دو نوع لیست با نام های لیست نامرتب (غیرترتیبی) و لیست مرتب (ترتیبی) وجود دارد که در ادامه هر یک توضیح داده خواهد شد.
لیست نامرتب (لیست غیرترتیبی)
مشخصه این لیست در خروجی وجود یک نماد دایره ای شکل پیش از هر یک از موارد است. که بنا بر نیاز میتوان آنها را در CSS تغییر داد.(در جلسات بعد بیشتر آشنا می شوید) برچسب ابتدایی و اصلی لیست نامرتب <ul></ul> است. و مواردی که خواهان لیست شدن آنها هستید با برچسب <li></li> میان ul قرار می گیرد. به این ترتیب در خروجی یک لیست غیرترتیبی خواهید داشت.
به صورت زیر نوشته می شود:
<html>
<body>
<ul>
<li>مورد یک</li>
<li>مورد دو</li>
<li>مورد سه</li>
<li>مورد چهار</li>
</ul>
</body>
</html>خروجی در مرورگر:
لیست مرتب (لیست ترتیبی)
همانطور که از نام این لیست پیداست با ایجاد آن می توان یک لیست ترتیبی داشت. ترتیب این لیست طبق نیاز می تواند عدد یا حروف باشد که با استفاده از CSS می توان آنها تغییر داد. اما به صورت پیشفرض عدد می باشد. برچسب اصلی لیست مرتب <ol></ol> است. مواردی که میخواهید به لیست اضافه شود مانند لیست غیرترتیبی با <li></li> در ol قرار می گیرد.
به صورت زیر نوشته می شود:
<html>
<body>
<ol>
<li>مورد یک</li>
<li>مورد دو</li>
<li>مورد سه</li>
<li>مورد چهار</li>
</ol>
</body>
</html>خروجی در مرورگر:
شاید در برخی از سندها نیاز داشته باشید تا یک لیست شامل چند لیست دیگر باشد؛ برای اینکار می توانید از لیست ها به صورت تودرتو نیز استفاده کرد.
برای مثال:
<html>
<body>
<ul>
<li>مورد یک</li>
<li>مورد دو</li>
<li>مورد سه
<ol>
<li>زیر مجموعه</li>
<li>زیر مجموعه</li>
<li>زیر مجموعه</li>
</ol>
</li>
<li>مورد چهار</li>
<li>مورد پنج</li>
</ul>
</body>
</html>خروجی در مرورگر:
تا به اینجا با لیست ها آشنا شدید. تا جلسه بعدی سعی کنید خودتان لیست های مختلفی بسازید و آنها در خروجی ببینید.
دیدگاه