طراحی سایت – آموزش html – فهرست (لیست)

به هنگام طراحی سایت سه نوع فهرست می توانیم داشته باشیم. فهرست ها به سه نوع مرتب,نامرتب و تعریفی تقسیم می شوند که در این بخش به شرح هر یک می پردازیم.

فهرست مرتب ( ordered or numbered list) :

 همانطور که از نام این نوع فهرست مشخص است ترتیب در این نوع لیست اهمیت دارد. برای ایجاد لیست مرتب وقتی داریم سایتی طراحی می کنیم از دستور <ol> برای شروع لیست و </ol> برای مشخص کردن انتهای آن استفاده می کنیم ، اما باید توجه کنیم که هر فهرست شامل اقلامی است که برای مشخص کردن آن از دستور  <li> که li مخفف list items  است ، استفاده می کنیم.
مثال :

<ol>
      <li>list item1</li>
      <li>list item2</li>
      <li>list item3</li>
</ol>

آیا می توانیم از عددهای رومی (i,ii,iii,…)  یا حروف (a,b,c,…)  برای شماره گذاری عناصر فهرست در طراحی سایت استفاده کنیم؟؟
بله با استفاده از صفت type  این دستور می توان این کار را انجام داد.
به مثال های زیر توجه کنید:
فهرست با اعداد رومی به صورت i , ii ,iii , iv

<ol type ="i">
       <li>list item1</li>       
       <li>list item2</li>      
       <li>list item3</li>
</ol>

فهرست با حروف a , b ,c , d

<ol type ="a">
       <li>list item1</li>
       <li>list item2</li>
       <li>list item3</li>
</ol>

فهرست با حروف بزرگ A , B ,C ,D

<ol type ="A">
       <li>list item1</li>
       <li>list item2</li>
       <li>list item3</li>
</ol>

با استفاده از صفت start از دستور <ol>  می توان تعیین کرد که شماره گذاری عناصر فهرست از چه مقدار عددی یا حروفی شروع شود. به عنوان مثال :

<ol type="I" start="7">
       <li>list item1</li>
       <li>list item2</li>
       <li>list item3</li>
</ol>

در مثال بالا ابتدا با استفاده از صفت type مشخص می کنیم که برای شماره گذاری عناصر لیست از اعداد رومی بزرگ استفاده شود و سپس با استفاده از دستور start می گوییم که شروع شماره گذاری از عدد 7 رومی  باشد.

لیست نامرتب در طراحی سایت (unordered or bulleted list) :

در این نوع لیست ترتیب برای عناصر لیست اهمیتی ندارد. برای نمایش لیستی از این نوع از دستور ul استفاده می کنیم. برای هر کدام از عناصر لیست هم مثل نوع قبلی از برچسب li بهره می گیریم. عناصر لیست به کمک شکل ها یا علامت های دایره تو پر (disc) ,دایره تو خالی (circle) و مربع تو پر (square) مشخص می شوند. برای تعیین شکل عناصر از صفت type کمک می گیریم. به مثال زیر توجه کنید:

<ul type="circle">
      <li>list item1</li>
      <li>list item2</li>
      <li>list item3</li>
</ul>

استفاده از لیست های تعریفی در طراحی سایت (definition list) :

مجموعه ای از عناصر با تعاریف  متناظرشان , یک لیست تعریفی را تشکیل می دهند که دستور <dl> نشان دهنده شروع و </dl> نشان دهنده پایان این لیست است. توجه کنید وقتی در حال طراحی سایت با این لیست هستیم برای نشان دادن  هر عنصر از دستور <dt>  که dt مخفف  definition term است , استفاده می کنیم و برای تعریف هر عنصر دستور <dd> را به کار می بریم.
مثال :

<dl>
     <dt>Term 1</dt>
     <dd>This is the definition of the first term.</dd>
     <dt>Term 2</dt>
     <dd>This is the definition of the second term.</dd>
</dl>

نویسنده: رضا ترابی

شما ممکن است این را هم بپسندید

2 پاسخ‌ها

  1. welearn گفت:

    خیلی ممنونم

  2. سئو گفت:

    سلام.وبسایت خیلی خوبی دارید.ممنون

پاسخ دهید

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