سلام خدمت همه دوستان در این جلسه میخوام نحوه استفاده از لیست ها در HTML رو براتون آموزش بدم . پیشنهاد می کنم که جلسه قبل رو هم یه مروری بکنید .

جلسه قبل

استفاده از لیست های HTML در صفحات وب

دو نمونه از پر استفاده ترین لیست ها در html لیست های مرتب و لیست های نامرتب هستند . در لیست های مرتب ترتیب بخش ها مختلف لیست معلوم هستش ولی در لیست های نامرتب ترتیب مشخص نیست .

• لیست های نامرتب

در لیست های نامرتب برای عناصر لیست از شماره ، عدد و یا حروف الفبا استفاده نمی شود . عناصر این لیست معمولاً با یه علامت دایره تو پر مشخص می شود . تگ ابتدای آن <ul> است و تگ انتهایی آن <ul/> است ، با این کار ما لیست رو ایجاد کرده ایم و حالا برای جداکردن هر بخش لیست در ابتدای آن از تگ <li> و در انتهای آن از تگ <li/> استفاده می کنیم . به مثالی که براتون زدم دقت کنید تا بهتر متوجه شید :

<ul>

<li> بخش یا سطر اول لیست  </li>

<li> بخش یا سطر دوم لیست  </li>

<li> بخش یا سطر سوم لیست </li>

</ul>

اگه این کدهارو تو بنویسید نتیجه ای که تو مرورگر خواهد داشت به این صورته :

• بخش یا سطر اول لیست
• بخش یا سطر دوم لیست
• بخش یا سطر سوم لیست

از شناسه Type می تونید در تگ ul استفاده کنید تا ظاهر لیست رو عوض کنید .  از شناسه type  در لیست های نامرتب برای مشخص کردن شکل علامت مشخص کننده استفاده می شود . از شناسه type در تگ li هم میتونید استفاده کنید . اگر برای <ul> استفاده کنید علامت مربوط به همه قسمت های لیست تغییر میکنه اما اگر برای تگ <li> استفاده کنیم فقط علامت مربوط به همان بخش از لیست تغییر می کنه . این شناسه می تونه مقادیر زیر رو داشته باشه :

Circle  :

با قرار دادن این علامت برای لیست علامت ابتدایی هر بخش به شکل یه دایره تو خالی در میاد.

disk :

این مقدار شکل علامت ابتدایی هر بخش از لیست رو به یه دایره تو پر تغییر میده .

square :

این مقدار شکل علامت ابتدایی هر بخش از لیست رو به یه مربع تو پر در می آورد .

در مثال زیر می تونید نحوه نمایش لیست با استفاده از شناسه type رو ببینید ، در این مثال از شناسه type در <li> استفاده کردم شما می تونید اون رو توی <ul> هم استفاده کنید :

<ul>

<li type=”circle”> قسمت اول لیست </li>

<li type=”disk”> قسمت دوم لیست </li>

<li type=”square”> قسمت سوم لیست </li>

</ul>

در مرورگرهای مختلف ممکن است نحوه نمایش لیست ها متفاوت باشه .

• لیست های مرتب

برای ایجاد لیست های مرتب از <ol> و <ol/> استفاده می کنیم و برای هر بخش هم از <li> و <li/> استفاده می کنیم . به مثال زیر توجه کنید :

<ol>

<li> بخش اول لیست  </li>

<li> بخش دوم لیست </li>

<li> بخش سوم لیست </li>

</ol>

نتیجه به صورت لیستی شماره گذاری شده ظاهر میشه :

1. بخش اول لیست
2. بخش دوم لیست
3. بخش سوم لیست

برای کنترل ( همون تغییر نوع شمارش ) تگ <ol> از شناسه های زیر میتونیم استفاده کنیم :

شناسه Start

از این شناسه برای تعیین شماره های لیست که از چه عددی شروع شود استفاده می شود . مثلا در مثال زیر تعیین می کنیم که شماره لیست از عدد 20 شروع بشه :

<ol start=”20″>

<li> این سطر اول لیست هستش ولی شماره اون از 20 شروع میشه . </li>

</ol>

نتیجه به صورت زیر هستش :

20. این سطر اول لیست هستش ولی شماره اون از 20 شروع میشه .

شناسه type

این شناسه در لیست های مرتب هم مانند لیست های نامرتب برای تغییر علامت ابتدایی به میره که در اینجا شماره ایی است که برای هر قسمت از لیست استفاده میشه .

“type=”1 : با این شناسه بخش های لیست با اعداد ریاضی مشخص می شود .

“type=”A : با این شناسه بخش های لیست با حروف بزرگ انگلیسی مشخص می شوند .

“type=”a : با این شناسه بخش های لیست با حروف کوچک تر انگلیسی نشان داده می شوند .

“type=”I : با این شناسه بخش های لیست با حروف بزرگ یونانی نشان داده می شوند .

“type=”i : با این شناسه بخش های لیست با حروف کوچک یونانی نشان داده می شوند .

از این شناسه هم می توانیم در تگ <ol> و هم در تگ <li> استفاده کنیم مانند لیست های نامرتب عمل می کنیم . در مثال زیر نحوه استفاده از حالات مختلف شناسه type رو براتون گفته ام :

 <ol>

<li type=”A”> بخش اول  </li>

<li type=”a”> بخش دوم  </li>

<li type=”1″> بخش سوم </li>

<li type=”I”> بخش چهارم </li>

<li type=”i”> بخش پنجم </li>

</ol>

اینم نتیجه اش :

1. بخش اول
2. بخش دوم
3. بخش سوم
4. بخش چهارم
5. بخش پنجم

اینم از این جلسه تا آموزش بعدی خدا نگه دار .