در جلسه قبلی آموزش HTML با نحوه ساخت جدول در HTML آشنا شدیم. در این بخش قصد داریم نحوه ایجاد لیست ها در HTML را یاد بگیریم.
لیست ها در HTML برای گروه بندی تکه هایی از اطلاعات مرتبط به هم استفاده می شود.
درک لیست ها در HTML
لیست های HTML برای نمایش فهرستی از داده ها بصورت فرمت بندی شده و معنایی استفاده می شود.
سه نوع مختلف لیست در HTML وجود دارد که هر یک از آنها هدف و معنی خاصی دارند:
- لیست نامرتب (Unordered list) : گروه بندی مواردی (item) که ترتیب آنها مهم نیست
- لیست مرتب (ordered list) : گروه بندی مواردی آیتم های مرتبط به هم در یک ترتیب خاص (عددی, حروفی و…)
- لیست توضیحی (Description list) : نمایش فهرستی از اصطلاحات و توضیحات مربوط به آنها
نکته: درون هر کدام از این لیست آیتم ها می توانید متن, کاراکتر خط شکسته, عکس, لینک و غیره قرار بدید.
همچنین می توانید کل یک فهرست را درون یک آیتم به منظور ساخت لیست های تو در تو قرار بدید (همان کاری که برای ساخت منوهای چندسطحی سایت ها استفاده می شود.)
در این آموزش HTML تمام هر سه نوع لیست ها در HTML را بررسی می کنیم.
لیست نامرتب (Unordered list)
یک لیست نامرتب با استفاده از تگ <ul> ایجاد و هر آیتم آن نیز با تگ <li> شروع می شود.
این لیست آیتم ها در یک لیست نامرتب بصورت پیش فرض با دایره توپر سیاه رنگ در پشت آنها مشخص می شوند
|
1 2 3 4 5 |
<ul> <li>Chocolate Cake</li> <li>Black Forest Cake</li> <li>Pineapple Cake</li> </ul> |
خروجی مثال بالا را به اینصورت می بینید.
لیست مرتب (ordered list)
یک لیست مرتب با تگ <ol> ساخته و لیست آیتم های آن نیز با <li> شروع می شود.
لیست مرتب شامل اطلاعاتی است که در آن بر روی ترتیب تاکید می شود.
آیتم های لیست مرتب با عدد مشخص می شود:
|
1 2 3 4 5 |
<ol> <li>Mix ingredients</li> <li>Bake in oven for an hour</li> <li>Allow to stand for ten minutes</li> </ol> |
خروجی مثال بالا را به اینصورت می بینید.
لیست توضیحی (Description list)
لیست توضیحی یا همان لیست تعریفی (Definition), فهرستی از لیست ها است که برای هر آیتم یک تعریفی وجود دارد. همانند لغت نامه (dictionary)
لیست تعریفی با تگ <dl> ساخته می شود. تگ <dl> در پیوستگی با <dt> استفاده می شود.
تگ <dt> آیتم لیست را تعریف و <dd> نیز توضیحات آیتم لیست را دربر میگیرد.
|
1 2 3 4 5 6 |
<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 , از ساخت لیست ها در HTML نهایت استفاده را برده باشید.
در بخش بعدی در مورد نحوه ایجاد فرم ها در صفحه وب را یاد می گیریم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
