آموزش HTML (قسمت 7) : کار با لیست ها در HTML

لیست‌ها یکی از پرکاربردترین عناصر موجود در HTML می‌باشند که طراحان را قادر به نمایش انواع اطلاعات به صورت لیست می‌نماید. در HTML شما می‌توانید سه نوع لیست ایجاد کنید: لیست‌های مرتب، لیست‌های نامرتب و لیست‌های تعریفی. همچنین امکان ترکیب انواع لیست‌ها با یکدیگر به منظور لیست‌های تودرتو نیز فراهم شده است.

امروزه از لیست‌ها به همراه زبان CSS برای کنترل ظاهر نمایشی آن ها، به منظور ایجاد جلوه‌های گرافیکی، همچون منوهای درختی، منوهای افقی و عمودی، تب‌ها و... استفاده میشود.

دسته بندی لیست‌ها

همانطور که گفتیم لیست‌ها به سه دسته اصلی تقسیم می‌شوند:

• لیست‌های نامرتب
• لیست‌های مرتب
• لیست‌های تعریفی یا توضیحی

1. لیست‌های نامرتب : در این نوع لیست‌ها ترتیب قرارگیری عناصر لیست مهم نبوده، و معمولا برای لیست کردن آن‌ها از bullet‌های دایره ای توپر، تو خالی، و مربع استفاده میشود، که البته با استفاده از css میتوان bullet مورد نظر را جایگزین آنها کرد. مثال:

• Eggs
• Cheese
• Milk
• Papadums
• Tickle-me Elmo
• Dr Who Remote Control Dalek

2. لیست‌های مرتب : در این نوع لیست‌ها ترتیب قرارگیری عناصر لیست مهم بوده و برای نمایش ترتیب آن‌ها از اعداد یا حروف انگلیسی یا رومی استفاده می‌شود. مثال:

1. Remove the outer casing by pushing the plastic rivets through.
2. Disconnect the main power harness from the inner unit.
3. Remove connection to the glow plug.
4. Extract unit, keeping upright at all times.

3. لیست‌های تعریفی : از این گونه لیست‌ها هنگامی که می‌خواهیم یکسری از آیتم هایی که یک بخش عنوان و یک توضیح برای آن عنوان دارند را نمایش دهیم، استفاده می‌کنیم. مثال:

Spam

unsolicited email sent in the hope of increasing sales of some product, or simply for the purposes of annoying people

Spammer

someone who sends out spam email and therefore deserves to develop a nasty incurable disease of some kind

Spam Filter

a tool used in email to 'filter out' likely spam messags, usually placing them in a dedicated junk messages folder or similar

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

تگ <ol> برای ایجاد لیست‌های مرتب : از این تگ برای ایجاد لیست‌های مرتب استفاده می‌شود. برای ایجاد آیتم‌های این لیست می‌بایست از تگ <li> (مخفف list Item) در داخل تگ <ol> استفاده نمود. این تگ از صفت‌های زیر پشتیبانی میکند.

Type : با استفاده از این صفت می‌توان نوع bullet کنار آیتم را مشخص نمود. این صفت مقادیر زیر را می‌پذیرد:

1. a : برای نمایش حروف کوچک انگلیسی
2. A : برای نمایش حروف بزرگ انگلیسی
3. i : برای نمایش حروف کوچک رومی
4. I : برای نمایش حروف بزرگ رومی
5. 1 : برای نمایش اعداد به عنوان bullet برای آیتم‌ها ( مقدار پیشفرض این صفت همین مقدار است)

Start:این صفت مشخص می‌کند که شماره گذاری لیست ما باید از چندمین کاراکتر از انواعی که در صفت type مشخص شده شروع شود. به عنوان مثال اگر مقدار صفت type برابر با A بود مقدار 3 برای صفت start به معنی شروع لیست از کاراکتر C خواهد بود.

Compact : این صفت بولین موجب فشرده نمایش داده شدن آیتم‌های لیست خواهد شد. البته این صفت دیگر در هیچ مرورگری پشتیبانی نمی‌شود.

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

type : با استفاده از این صفت میتوان نوع bullet کنار آیتم را مشخص کرد. این صفت مقادیر زیر را می‌پذیرد:

• circle : یک دایره توخالی را به عنوان bullet نمایش می‌دهد.
• disc : یک دایره توپر سیاه رنگ را به عنوان bullet نمایش می‌دهد.
• square : یک مربع توپر سیاه رنگ را به عنوان bullet نمایش می‌دهد.

Compact : این صفت بولین موجب فشرده نمایش داده شدن آیتم‌های لیست خواهد شد. البته این صفت دیگر در هیچ مرورگری پشتیبانی نمی‌شود.

تگ <dl> برای ایجاد لیست‌های تعریفی : برای ایجاد لیست‌های تعریفی از تگ <dl> استفاده می‌شود. هر لیست تعریفی از چند عنوان و توضیحات آن عنوان تشکیل می‌شود. برای ایجاد هر عنوان از تگ <dt> و برای ایجاد توضیح از تگ <dd> استفاده میشود. تگ <dl> فقط از صفت compact پشتیبانی می‌کند. که بازم هیچ مرورگری از این صفت پشتیبانی نمی‌کند!!:D

در زیر شما می‌توانید یک لیست تعریفی را مشاهده کنید.

<dl>
<dt>Spam</dt>
<dd>unsolicited email sent in the hope of increasing sales of some product, or simply for the purposes of annoying people</dd>
<dt>Spammer</dt>
<dd>someone who sends out spam email and therefore deserves to develop a nasty incurable disease of some kind</dd>
<dt>Spam Filter</dt>
<dd>a tool used in email to 'filter out' likely spam messags, usually placing them in a dedicated junk messages folder or similar</dd>
</dl>

نتیجه در مرورگر :

تگ <li> : از این عنصر برای مشخص کردن آیتم لیست‌های مرتب و نامرتب استفاده می‌شود. غالبا این تگ داخل تگ‌های <ol> و <ul> استفاده می‌شود. این تگ از صفت‌های زیر پشتیبانی می‌کند.

type : از این صفت برای تغییر دادن نوع bullet مربوط به یک آیتم لیست به غیر از آن نوعی که در صفت type تگ‌های ul  و ol تنظیم شده است استفاده می‌شود. این صفت برای تگ <li> همان مقادیری را که در تگ <ol> و <ul> میگیرد، به عنوان مقدار می‌پذیرد. به مثال زیر دقت کنید:

<ul type="disc">
<li>Eggs</li>
<li type="circle">Cheese</li>
<li>Milk</li>
<li>Papadums</li>
<li>Tickle-me Elmo</li>
<li>Dr Who Remote Control Dalek</li>
</ul>

نتیجه در مرورگر :

value : از این صفت برای تغییر دادن عدد کنار یک آیتم از لیست استفاده می‌شود. در واقع ما می‌توانیم ترتیب نمایش اعداد کنار یک آیتم را با این صفت به هم بزنیم. این صفت یک عدد صحیح را به عنوان مقدار می‌پذیرد. به مثال زیر دقت کنید :

<ol>
<li>Eggs</li>
<li>Cheese</li>
<li>Milk</li>
<li value="99">Papadums</li>
<li>Tickle-me Elmo</li>
<li>Dr Who Remote Control Dalek</li>
</ol>

نتیجه در مرورگر :

لیست‌های تو در تو

یکی از ویژگی‌های بارز  لیست‌ها امکان ترکیب کردن آن‌ها با یکدیگر است. امروزه ترکیب لیستها کاربردهای فراوانی پیدا کرده است و در بسیاری از موارد همچون ایجاد ساختارهای درختی، منوهای افقی و عمودی چند سطحی و... استفاده می‌شود. برای ایجاد لیست‌های تو در تو کافی است هر لیست جدید را در داخل یک عنصر li قرار دهید. در ادامه کد یک نمونه لیست تو در تو را مشاهده می‌کنید:

<h1>Menu</h1>

<ol>
<li>Home Page</li>
<li>Educations
<ul>
<li>HTML Tutorials</li>
<li>CSS Tutorials</li>
</ul>
</li>
<li> Facilities
<ul>
<li> Submit </li>
<li>Forum </li>
<li> Ads </li>
</ul>
</li>
<li> About Us </li>
</ol>

نتیجه در مرورگر :

تا اینجا آموزش کار با لیست‌ها به پایان رسید. در مطلب بعدی به کار با جداول در HTML  و معرفی تگ <table>خواهیم پرداخت.

نویسنده

طاها دریس