فهرستها ( Lists )

اين درس شما را با نحوه نمايش انواع فهرستها شامل فهرستهای مرتب(ordered) ، نامرتب(unordered) و فهرستهای تعريفی(definition lists) و تگ های مربوطه يعنی li ، ol ، ul ، dl ، dt و dd آشنا خواهد کرد.

درس قبلی، درس بعدی
مثالها:

فهرستهای نامرتب
مثالی بسيار ساده در مورد فهرستهای نامرتب

فهرستهای مرتب
مثالی در مورد فهرستهای مرتب و نحوه نمايش متون فارسی


فهرستهای نامرتب(unordered list)

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

HTML code نمايش توسط مرورگر
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
  • Red
  • Blue
  • Green 
<ul dir="rtl" >
<li>قهوه</li>
<li>شير</li>
<li>چای</li>
</ul>
  • قهوه
  • شير
  • چای

داخل تگهای <li> ميتوانيد از پاراگرافها، تگهای br ، تصاوير و حتي فهرستهای ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به فهرستها ممکن ميباشد.


فهرستهای مرتب(ordered list)

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

HTML code نمايش توسط مرورگر
<ol>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ol>
  1. Red
  2. Blue
  3. Green 
<ol dir="rtl" >
<li>قهوه</li>
<li>شير</li>
<li>چای</li>
</ol>
  1. قهوه
  2. شير
  3. چای

داخل تگهای <li> ميتوانيد از پاراگرافها، تگهای br ، تصاوير و حتي فهرستهای ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به فهرستها ممکن ميباشد.


فهرستهای تعريفی(definition list)

فهرست تعريفی فهرستی است از اصطلاح ها و تشريح و توصيف آنها.

فهرستهای تعريفی با <dl> شروع شده و هر ذوج اصطلاح و تعريف مربوط به آن با تگهای <dt> و <dd> تعريف ميشوند.

HTML code نمايش توسط مرورگر
<dl>
<dt>HTTP</dt>
<dd>Hypertext Transfer Protocol</dd>
<dt>FTP</dt>
<dd>File Transfer Protocol</dd>
<dt>IP</dt>
<dd>Internet Protocol</dd>
</dl>
HTTP
Hypertext Transfer Protocol
FTP
File Transfer Protocol
IP
Internet Protocol 
<dl dir="rtl"  >
<dt >مقدمه</dt>
<dd>خلاصه ای از مقدمه</dd>
<dt>فصل 2</dt>
<dd>خلاصه ای از فصل 1</dd>
<dt>فصل 2</dt>
<dd>خلاصه ای از فصل 2</dd>
</dl>
مقدمه
خلاصه ای از مقدمه
فصل 1
خلاصه ای از فصل 1
فصل 2
خلاصه ای از فصل 2

داخل تگهای تشريح يعنی <dd> ميتوانيد از پاراگرافها، تگهای br ، تصاوير و حتي فهرستهای ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به فهرستها ممکن ميباشد.

مثالهای بيشتر

انواع فهرستهای مرتب
مثالی در مورد فهرستهای مرتب به همراه استفاده از شناسه type جهت تعيين نوع نمايش فهرست

انواع فهرستهای نامرتب
مثالی در مورد فهرستهای نامرتب به همراه استفاده از شناسه type جهت تعيين نوع نمايش فهرست

فهرستهای تودرتو
مثالی در مورد فهرستهای ترکيبی. اعضای فهرست ميتوانند از فهرستهای ديگر تشکيل شوند.

فهرستهای تعريفی
مثالی در مورد فهرستهای تعريفی به همراه استفاده از شناسه dir

تگهای فهرست

Start Tag Purpose کاربرد
<ol> Defines an ordered list تعريف فهرستهای مرتب
<ul> Defines an unordered list تعريف فهرستهای نامرتب
<li> Defines a list item تعريف يک آيتم و قلم از يک فهرست
<dl> Defines a definition list تعريف فهرستهای تعريفی
<dt> Defines a definition term تعريف اصطلاح در فهرستهای تعريفی
<dd> Defines a definition description تعريف معنی و شرح اصطلاح در فهرستهای تعريفی