026-32601

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

1 1 1 1 1 (3 Votes)

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

<!DOCTYPE html>
<html>
    
    <head>
        <title>Netshahr</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 آشنا خواهیم شد). در واقع اگر بخواهیم شماره گذاری لیست ما از عدد 100 شروع شود می توان کد فوق را به صورت زیر تکمیل کرد:

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

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

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

همانطور که می بینیم آیتم های لیست از عدد 100 شروع شده و ادامه یافته اند.
علاوه بر این 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> کمی بیرون تر قرار گرفته اند تا مشخص شود که مربوط به آیتم مافوق خود هستند.



Submit to FacebookSubmit to Google PlusSubmit to Twitter

نوشتن دیدگاه

نظراتی که به تعمیق بحث کمک می کند، در معرض ملاحظه و قضاوت دیگران قرار می گیرند. نظراتی که حاوی توهین، افترا و تهمت به دیگران باشد، منتشر نخواهد شد. لطفاً از نوشتن نظرات خود به صورت حروف لاتین (فینگلیش) خودداری نمایید.


تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب