لیست در HTML – آموزش برنامه نویسی وب درس 12

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

کار کردن با لیست  در HTML

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

  • فهرست بدون ترتیب (Un ordered List)- این دسته از لیست ها برای آیتم های مرتبط به هم استفاده می‌شوند، اما در اینجا از ترتیب خاصی پیروی نمی‌شود.
  • فهرست با ترتیب (Ordered list) – این دسته از لیست ها برای آیتم های مرتبط به هم استفاده می‌شوند، اما در اینجا ترتیب خاصی مورد استفاده قرار می‌گیرد.
  • فهرست های توصیفی (Description List)- برای ساخت فهرستی از  آیتم ها و توضیحات درباره آن ها به کار گرفته می‌شوند.

نکته:  در درون آیتم فهرست ها می‌توان نوشته، تصویر، لینک، خط فاصله، و موارد دیگر را قرار داد. همچنین شما می‌توانید یک فهرست کامل را در درون یک فهرست دیگر ایجاد کنید و با این کار فهرست های تو در تو (Nested List) ایجاد کنید.

در بخش های ادامه همین مقاله من تمام این موارد را لیست ها را به صورت یک به یک برایتان توضیح می‌دهم.

لیست های بدون ترتیب در زبان HTML

یک لیست بدون ترتیب با استفاده از تگ <ul> ساخته می‌شود که در درون خود عناصر به صورت <li> دارد.

آیتم هایی که در این لیست قرار می‌گیرند به صورت نامرتب هستند و با بولت از همدیگر جدا می‌شوند. در زیر یک مثال از این فهرست ها آورده شده است:

مثال

<ul>

    <li>Chocolate Cake</li>

    <li>Black Forest Cake</li>

    <li>Pineapple Cake</li>

</ul>

خروجی بالا به صورت تصویر زیر خواهد بود:

لیست بدون ترتیب در HTML

شما همچنین می‌توانید نوع بولت هایی که در ابتدای لیست های بدون ترتیب استفاده می‌کنید را با استفاده از ویژگی list-style-type در CSS تغییر دهید. در مثال زیر شما می‌توانید شکل بولت را از حالت دایره تو پر (Disc) به یک مربع تو پر (Square) تغییر دهید.

مثال

ul {

    list-style-type: square;

}

برای درک بهتر می‌توانید به مقاله ای که درباره لیست ها در CSS نوشته ایم مراجعه کنید، تا بتوانید درباره استایل بندی لیست ها در HTML جزئیات بیشتری را به دست بیاورید.

لیست های با ترتیب در زبان HTML

یک لیست با ترتیب با استفاده از تگ <ol> ساخته می‌شود که در درون خود عناصر به صورت <li> دارد. لیست های با ترتیب در زمانی به کار می‌رود که ترتیب اجرای آیتم ها برای ما مهم هستند.

آیتم هایی که در لیست های با ترتیب وجود دارند با استفاده از عدد و یا سمبل های مرتب دیگر، شماره گذاری می‌شوند. در زیر یک مثال از این فهرست ها آورده شده است:

مثال

<ol>

    <li>Fasten your seatbelt</li>

    <li>Starts the car's engine</li>

    <li>Look around and go</li>

</ol>

خروجی بالا به صورت تصویر زیر خواهد بود:

به صورت معمول یک لیست با ترتیب از شماره 1 شماره گذاری می‌شود. هر چند اگر شما بخواهید این ترتیب را عوض کنید، شما می‌توانید از ویژگی Start به صورتی که در مثال زیر آمده است استفاده کنید و آن را تغییر دهید:

مثال

<ol start="10">

    <li>Mix ingredients</li>

    <li>Bake in oven for an hour</li>

    <li>Allow to stand for ten minutes</li>

</ol>

خروجی بالا به صورت تصویر زیر خواهد بود:

شماره گذاری لیست های با ترتیب در HTML

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

مثال

ol {

    list-style-type: upper-roman;

}

نکته: شما هم چنین می‌تواند نوع ویژگی  شماره گذاری را عوض کنید،  برای مثال می‌توانید از عبارت type="I" استفاده کنید تا سیستم رومی برای شماره گذاری استفاده شود. هرچند اگر شما از استایل های CSS استفاده می‌کنید، بهتر است که از این روش استفاده نکنید، به جای آن از ویژگی list-style-type در CSS بهره بگیرید.

لیست توضیحی در 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>

خروجی بالا به صورت تصویر زیر خواهد بود:

لیست تشریحی در HTML

 

کد کامل مقاله بالا به صورت زیر است:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Unordered List</title>
</head>
<body>
    <h2>HTML Unordered List</h2>
    <ul>
        <li>Chocolate Cake</li>
        <li>Black Forest Cake</li>
        <li>Pineapple Cake</li>
    </ul>
    <hr>
    <h2>HTML Nested Unordered List</h2>
    <ul>
        <li>Chocolate Cake
            <ul>
                <li>Chocolate Velvet Cake</li>
                <li>Chocolate Lava Cake</li>
            </ul>
        </li>
        <li>Black Forest Cake</li>
        <li>Pineapple Cake</li>
    </ul>
</body>
</html>

 

No votes yet.
Please wait...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

منو اصلی

question