آموزش زبان HTML (جلسه ۱۹)

ایجاد لیست در صفحات وب با استفاده از زبان اچ تی ام ال (html)

گاهی اوقات در طراحی صفحات وب نیاز داریم تا اطلاعات را در قالب لیست به کاربران ارائه دهیم. برای این منظور سه گزینه پیش رو خواهیم داشت.
برای آشنایی با اولین نوع از لیست های در زبان اچ تی ام ال (html) کد زیر را وارد مرورگر خود می کنیم:

<!DOCTYPE html>
<html>
     
    <head>
        <title>asrefonon</title>
    </head>
     
    <body>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </body>
</html>

تگی تحت عنوان <ul> را وارد صفحه خود کرده ایم. در واقع<ul> مخفف واژگان unordered list به معنی “لیست مرتب نشده” است. در واقع هر موقع که بخواهیم لیستی ایجاد کنیم که موارد موجود در لیست شماره گذاری نشوند می بایست از تگ ul استفاده کنیم. برای ایجاد یک لیست نیاز به تگ دیگر نیز داریم تحت عنوان <li> که مخفف کلمه list است. در واقع با استفاده از این تگ می توانیم موارد موجود در لیست خود را تعریف کنیم.
همانطور که در کد فوق می بینیم مابین دو تگ <ul> و <ul/> به هر تعداد آیتمی که بخواهیم را می توان با استفاده از تگ های <li> و <li/> ایجاد کنیم. اکنون پس از ذخیره کردن فایل خود می توانیم مرورگر را به روز رسانی نماییم:

لیست_های_مرتب_نشده_در_اچ_تی_ام_ال_html

می بینیم لیستی ایجاد کرده ایم که حاوی سه گزینه است.
حال فرض کنیم که می خواهیم به جای Bullet های سیاه رنگ در کنار آیتم های لیست عدد قرار دهیم. در اینجا است که می بایست از نوع دوم لیست ها تحت عنوان <ol> استفاده کنیم. در واقع ol مخفف واژگان ordered list به معنی “لیست مرتب شده” است. برای روش شدن این مطلب می توانیم کد فوق را به صورت زیر بازنویسی کنیم:

   <body>
       <ol>
           <li>Item 1</li>
           <li>Item 2</li>
           <li>Item 3</li>
       </ol>
   </body>

می بینیم که تگ های <ul> و <ul/> با تگ های <ol> و <ol/> جایگزین شده اند. پس از ذخیره کردن فایل و به روز رسانی مرورگر تغییر لیست جدید را مشاهده خواهیم کرد:

لیست_های_مرتب_شده_در_اچ_تی_ام_ال_html

می بینیم که Bullet ها به عدد تغییر پیدا کرده اند.

در لیست هایی از جنس <ol> می توان از یک Attribute بسیار کاربردی تحت عنوان start استفاده کرد (در ادامه آموزش ها بیشتر با مفهوم Attribute آشنا خواهیم شد). در واقع اگر بخواهیم شماره گذاری لیست ما از عدد ۱۰۰ شروع شود می توان کد فوق را به صورت زیر تکمیل کرد:

   <body>
       <ol start="100">
           <li>Item 1</li>
           <li>Item 2</li>
           <li>Item 3</li>
       </ol>
   </body>

همانطور که می بینیم کلید واژه start را داخل تگ آغازین <ol> نوشته و پس از علامت مساوی داخل علامت های “” عددی که می خواهیم لیست از آن عدد شروع شود را می نویسیم:

شخصی_سازی_لیست_های_مرتب_شده_در_اچ_تی_ام_ال_html

همانطور که می بینیم آیتم های لیست از عدد ۱۰۰ شروع شده و ادامه یافته اند.
علاوه بر این Attribute یی تحت عنوان type برای این نوع از لیست ها استفاده می شود که با استفاده از آن می توان نوع شماره گذاری را تا حدودی شخصی سازی کرد. برای روشن شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم:

   <body>
       <ol type="1">
           <li>Item 1</li>
           <li>Item 2</li>
           <li>Item 3</li>
       </ol>
       <ol type="A">
           <li>Item 1</li>
           <li>Item 2</li>
           <li>Item 3</li>
       </ol>
       <ol type="a">
           <li>Item 1</li>
           <li>Item 2</li>
           <li>Item 3</li>
       </ol>
       <ol type="I">
           <li>Item 1</li>
           <li>Item 2</li>
           <li>Item 3</li>
       </ol>
       <ol type="i">
           <li>Item 1</li>
           <li>Item 2</li>
           <li>Item 3</li>
       </ol>
   </body>

پس از به روز رسانی مرورگر نتیجه زیر مشاهده خواهد شد:

استفاده_از_دستور_type_در_لیست_های_مرتب_شده

می بینیم بسته به مقداری که برای Attribute یی از جنس type انتخاب می کنیم، نحوه ترتیب دادن به آیتم های درون لیست تغییر می کند. اگرچه حق انتخاب خیلی گسترده ای نداریم، اما این در حالی است که این Attribute تا حدودی زیادی می تواند نیاز ما را برآورده سازد (به یاد داشته باشیم که این مقدار از پیش تعریف شده هستند و هر مقداری را نمی توان مابین علامت های ”  ” قرار داد).
در پاسخ به این سوال که چه زمانی از تگ <ul> و چه زمانیکه از تگ <ol> استفاده کنیم می توان گفت اگر می خواهیم آیتم هایی را صرفاً یکی پس از دیگری برشمریم می توان از تگ <ul> استفاده کرد و اگر قصد داریم مراحل انجام کاری را توضیح دهیم که تقدم و تاخر آن ها مهم است بهتر است از <ol> استفاده کنیم.
حال ممکن است در طراحی خود نه بخواهیم از بولت و نه از شماره استفاده کنیم که در این صورت می توان این کار را از طریق سی اس اس انجام دهیم که در ادامه آموزش ها بیشتر با این امکان در اچ تی ام ال (html) آشنا خواهیم شد.
نکته دیگری که در مورد لیست ها وجود دارد این است که می توان لیست ها را با یکدیگر ادغام کرد. برای روش شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم:

   <body>
       <ol type="1">
           <li>Item 1</li>
           <li>Item 2</li>
           <ul>
                   <li>Item 100</li>
                   <li>Item 101</li>
                   <li>Item 102</li>
           </ul>
           <li>Item 3</li>
       </ol>
   </body>

در واقع کاری که در کد فوق انجام داده ایم این است که یک لیست از جنس <ul> داخل لیست قبلی که از جنس <ol>است قرار داده ایم که حاوی  سه آیتم است. حال اگر فایل خود را ذخیره کرده و مرورگر را به روز رسانی کنیم نتیجه را مشاهده خواهیم کرد:

ادغام_کردن_چند_در_با_یکدیگر_در_اچ_تی_ام_ال_html

می بینیم که لیست جدید داخل لیست قبلی ادغام شده است.
آخرین نوع لیست ها در زبان اچ تی ام ال در قالب تگی تحت عنوان <dl> شناخته می شوند که مخفف واژگان Definition List به معنی “لیست توضیحی” است. اگر بخواهیم به موارد استفاده از این تگ اشاره کنیم می توان واژه نامه، سوالات متداول، سوال و جواب و … را در صفحات وب خود در قالب این لیست طراحی کنیم. برای روشن شدن این موضوع کد فوق را به صورت زیر بازنویسی می کنیم:

   <body>
       <dl>
           <dt>Item 1</dt>
           <dd>Definition of Item 1</dd>
           <dt>Item 2</dt>
           <dd>Definition of Item 2</dd>
       </dl>
   </body>

همانطور که در کد فوق ملاحظه می شود ابتدا تگ آغازین <dl> را نوشته و سپس کلمه ای که می خواهیم معنی آن را بنویسیم، سوالی که می خواهیم جواب آن را بدهیم و … را داخل تگ های <dt> </dt> می نویسیم (عبارت dt مخفف واژگان Definition Term است). سپس معنی کلمه مد نظر، پاسخ به سوال مد نظر و …. را داخل تگ های<dd> و <dd/>قرار می دهیم (عبارت dd مخفف واژگان Definition Definition است). در نهایت به هر تعداد که بخواهیم می توان سوال و جواب  یا هر چیز دیگری را نوشته و تگ خود را با <dl/> می بندیم. پس از ذخیره کردن فایل خود، خروجی آن را در مروگر مشاهده می کنیم:

استفاده_از_لیست_definition_در_طراحی_صفحات_اچ_تی_ام_ال_html

می بینیم که محتوای داخل تگ های <dt></dt> به صورت عادی نمایش داده شده و محتوای داخل تگ های <dd></dd> کمی بیرون تر قرار گرفته اند تا مشخص شود که مربوط به آیتم مافوق خود هستند.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)