بخش های اصلی

آموزش HTML 5

آموزش HTML - لیست ها (Lists)

لیست های HTML برای جاهایی که گروهی از اطلاعات به هم مرتبط اند، استفاده می شوند.

درک لیست های HTML

لیست های HTML برای نمایش لیستی از اطلاعات به شکلی مناسب و شیوه ای بامعنی، استفاده می شوند. در HTML، سه نوع متفاوت از لیست ها وجود دارد که هر کدام هدف و معنی متفاوتی دارند:

  • لیست نامرتب (Unorderes list) – برای گروه بندی مجموعه ای از آیتم ها بدونِ ترتیبی خاص استفاده می شود.
  • لیست مرتب شده (ordered list) – برای گروه بندی مجموعه ای از آیتم ها با ترتیبی خاص استفاده می شود.
  • لیست تعریفی (Definition list) - برای نمایش لیستی از اصطلاحات به همراه معانی شان استفاده می شود.

نکته: داخل یک آیتمِ لیست می توانید، متن، خط های جدید (line breaks)، تصاویر، لینک ها و ... قرار دهید. همچنین می توانید یک لیست را داخل لیست دیگری قرار دهید و لیستِ تودرتو ایجاد کنید.

در این آموزش همه ی انواع لیست های متفاوت را یکی یکی آموزش خواهیم داد:

لیست های نامرتب (Unordered) HTML

لیست نامرتب با استفاده از تگ <ul> ایجاد می شود و آیتم های آن (list item) با تگ <li> شروع می شوند.

بطور پیش فرض آیتم های لیست در لیست های نامرتب با bulletها (دایره های کوچکِ سیاه رنگ) نشانه گذاری می شوند.

مثال

<ul>
    <li>Chocolate Cake</li>
    <li>Black Forest Cake</li>
    <li>Pineapple Cake</li>
</ul>

خروجی مثال بالا به اینصورت خواهد بود:

  • Chocolate Cake
  • Black Forest Cake
  • Pineapple Cake

لیست های مرتب شده (ordered) HTML

لیست مرتب با استفاده از تگ <ol> ایجاد می شود و آیتم های آن (list item) با تگ <li> شروع می شوند. لیست مرتب شامل اطلاعاتی است که ترتیب در آن ها حائز اهمیت است.

آیتم های لیست در لیست های مرتب شده، توسط اعداد نشانه گذاری می شوند.

مثال

<ol>
    <li>Mix ingredients</li>
    <li>Bake in oven for an hour</li>
    <li>Allow to stand for ten minutes</li>
</ol>

خروجی مثال بالا به اینصورت خواهد بود:

  1. Mix ingredients
  2. Bake in oven for an hour
  3. Allow to stand for ten minutes

لیست های تعریفی (Definition) HTML

لیست تعریفی لیستی از آیتم ها به همراه توصیف هر یک از آن ها است.

لیست تعریفی توسط تگ <dl> ایجاد می شود. تگ <dl> بصورت مرتبط با تگ <dt> استفاده می شود- آیتم های داخل لیست را تعریف می کند و تگ <dd> توضیحات مربوط به آیتم های لیست را مشخص می کند:

مثال

<dl>
    <dt>Bread</dt>
    <dd>A baked food made of flour.</dd>
    <dt>Coffee</dt>
    <dd>A drink made from roasted coffee beans.</dd>
</dl>

خروجی مثال بالا به اینصورت خواهد بود:

Bread
A baked food made of flour.
Coffee
A drink made from roasted coffee beans.

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد