Tehroon20.com >> آموزش >: آموزش HTML جلسه یازدهم: فهرستها (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>

Red
Blue
Green

<ol dir="rtl" >
<li>قهوه</li>
<li>شير</li>
<li>چای</li>
</ol>

قهوه
شير
چای

--------------------------------------------------------------------------------

فهرستهای تعريفی(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 در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به فهرستها ممکن ميباشد.

--------------------------------------------------------------------------------

تگهای فهرست

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	تعريف معنی و شرح اصطلاح در فهرستهای تعريفی

منبع: Khaterat.com

TrackBack