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

منبع: Khaterat.com