لیست ها در HTML (جلسه هشتم)

با عرض سلام و احترام خدمت شما کاربران عزیز مِستر آموز،

 

در این آموزش قصد داریم ساخت لیست در HTML را به شما آموزش دهیم. با ما همراه باشید.

 

فهرست ها در HTML

در زبان HTML چند فهرست داریم که این زبان پشتیبانی میکند که این لیست ها به شرح لیست های شماره دار،  لیست های بدون شماره ، فهرستهای دارای توضیح و لیست هایی با علامت های خاص هستید.

 

فهرست های بدون شماره

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

 

<ul>
<li>Word Press</li>
<li>Joomla</li>
</ul>

خروجی:

نکته: در لیست ها مانند خانه های جدول شما می توانید تصویر ، متن ، یک چدول ، و یا حتی یک فهرست دیگری را قرار دهید.

 

فهرست های شماره دار

این نوع فهرست ها موارد آن با عدد ، شماره گذاری می شوند. فهرست های شماره دار توسط برچسب <ol> نوشته می شوند و هر مورد آن با برچسب <li> مشخص می شوند. مثال زیر را ببینید.

<ol>
<li>Word Press</li>
<li>Joomla</li>
</ol>

خروجی:

 

فهرست های دارای توضیح

این نوع از فهرست ها دارای شماره یا شکل نمی باشند و برای مواردی هست که میخواهیم توضیخی برای هر مورد در کنارشان بنویسیم به کار می رود. این فهرست ها توسط برچسب <dl> نوشته می شوند و هر مورد آن با برچسب های <dt> مشخص می شوند و توضیحات آنها با برچسب های <dd> مشخص می شوند. مثال زیر را ببینیم:

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

خروجی:

مشخصه type در فهرست ها:

با استفاده از مشخصه type میتوانیم شکل مورد نظر خودمان را در کنار موارد فهرست ها بدون شماره قرار دهیم. و یا اعداد فهرستهای شمار دار را به نوع دلخواه خودمان تغییر دهیم. شکل ها می توانند سه نوع دایره توپر ، دایره تو خالی و مربع (disc , circle , square ) باشند و شماره گذاری می توانند به 4 صورت “a b c” , “A B C” , “i ii iii” و “I II III” باشند که به ترتیب با a , A , i و I مشخص می شوند.

 

 

مثال های زیر را ببینید:

مثال یک برای فهرست های بدون شماره:

<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

خروجی:

مثال شماره دو برای فهرست های شماره دار:

<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

خروجی:

 

این هم از فهرست ها در HTML، امید واردم از نحوه آموزش خوشتان بیاد. برای آموزش بعدی با مِستر آموز همراه باشید.

 

 

پیروز و موفق باشید.