کار با لیست ها در HTML قسمت اول

کار با لیست ها در HTML

آشنایی با لیست ها در HTML

لیست در HTML چیست؟ لیست ها درHTML چه وظایفی دارند؟ استفاده از لیست چه مزایایی دارد؟ لیست ها چند نوع هستند ؟‌

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

1 لیست ها در HTML

• 1.1 مزایای عمده استفاده از لیست
• 1.2 انواع لیست

لیست ها در HTML

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

که برای ناوبری و نمایش محتوای اصلی به دفعات مورد استفاده قرار می‌گیرند.

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

از طرف دیگر لیست ها به شما اجازه می‌دهند تا با استفاده از استایل هایCSS  آن ها را به خوبی خاص کنید.

و در نهایت لیست ها به بازدید‌کنندگان وبسایت کمک می‌کند تا وبسایتتان را آسان تر مطالعه کنند. سادگی لیست ها باعث می شود

بتوانید به راحتی صفحات وبسایتتان را نگهداری و به روز کنید.

مزایای عمده استفاده از لیست

• انعطاف‌پذیری: اگر شما بخواهید ترتیب آیتم‌های داخل یک لیست را در یک لیست ترتیبی عوض کنید کافیست آیتم داخل لیست را به اطراف حرکت دهید.در هنگام نمایش مرورگر آن‌ها را به ترتیب نشان می‌دهد.
• ظاهر: استفاده از لیست‌های  HTML به شما اجازه می‌دهد تا از کد‌های CSS برای ظاهر لیست استفاده کنید
• آیتم‌های تگ <li> از سایر تگ‌ها متفاوت هستند شما می‌توانید به صورت مستقیم درCSS برای آن‌ها قوانین خاصی تعیین کنید.
• نمایش: لیست ها محتوای خود را به شکل یک ساختار معنا دار نمایش می‌دهند. به عنوان مثال به صفحه‌خوان‌ها اجازه می‌دهدتا به جای متن‌ها و اعداد گیج کننده، محتوا را به شکل ساختار یافته ای نمایش دهند.

هیچ وقت از تگ‌های آیتم لیست به صورت معمولی همراه با تگ‌های متنی استفاده نکنید، با این که ساخت لیست از این طریق امکان پذیر است

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

اگر مقاله شما به لیست نیاز دارد از تگ های صحیح ارائه شده درHTML   برای ساخت آن استفاده کنید.

انواع لیست

در  HTML سه نوع لیست وجود دارد:

• لیست بدون ترتیب: برای گردآوری گروهی مرتبط از آیتم‌ها بدون ترتیب استفاده می‌شود.
• لیست ترتیبی : برای گردآوری گروهی مرتبط از آیتم‌ها در یک ترتیب خاص استفاده می‌شود.
• لیست توضیحی: یک لیست متشکل از نام/مقدار برای شرح بخش هایی مانند اصطلاحات و تعاریف

کار با لیست ها در HTML

لیست های بدون ترتیب (Unordered HTMLList)

لیست‌های بدون ترتیب(یا گلوله ای) برای نمایش تعداد آیتم بدون در نظر گرفتن هیچ ترتیب خاصی مورد استفاده قرار می‌گیرند. مثالی از یک لیست خرید:

• شیر
• نان
• کره
• مربا

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

شما می‌توانید با استفاده از CSS گلوله‌های کنار آیتم‌ها را از بین چندین استایل پیشفرض تغییر دهید

یا حتی از تصویر دلخواه خودتان استفاده کنید، در صورت نیاز می‌توانید گلوله کنار آیتم ها را حذف کنید.

برای تعریف یک لیست بدون ترتیب از تگ های <ul></ul> برای ایجاد لیست و از تگ‌های <li></li> برای آیتم‌های داخل لیست استفاده کنید.

<ul>
<li>bread</li>
<li>coffee beans</li>
<li>milk</li>
<li>butter</li>
</ul>

به لیست‌های بدون ترتیب یا Unordered List در مقاله‌ای جداگانه پرداخته‌ایم، اگر می‌خواهید

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

لیست های ترتیبی (Ordered html List)

لیست‌های ترتیبی (شماره‌دار) برای نمایش آیتم‌ها در یک ترتیب خاص مورد استفاده قرار می‌گیرند. به عنوان مثال دستورالعمل پخت یک نیمرو :

1. ریختن روغن داخل ماهیتابه
2. گرم کردن روغن
3. شکستن تخم مرغ ها و مخلوط کردن
4. اضافه کردن تخم مرغ به روغن
5. سرو کردن

در این حالت اگر آیتم‌های داخل لیست را به بالا و یا پایین حرکت دهیم، لیست ما معنای خود را از دست می‌دهد.

لیست‌های ترتیبی با چندین نوع ترتیب قابل نمایش هستند. که حالت پیشفرض در اکثر مرورگر ها حالت اعداد صحیح است. انواع ترتیب در لیست‌های ترتیبی به شرح ذیل هستند:

1. حروف
   • حروف کوچک ascii (a,b,c)
   • حروف بزرگ ascii (A, B, C)
   • حروف کلاسیک یونانی (έ, ή, ί)

2. اعداد
   • اعداد صحیح (1, 2, 3)
   • اعداد صحیح با همراهی صفر (01, 02, 03)
   • اعداد یونانی کوچک (i, ii, iii)
   • اعداد یونانی بزرگ (I, II, III)

مانند لیست‌های بدون ترتیب، شما می‌توانید برای ظاهر لیست ازcss  استفاده کنید.

برای ایجاد لیست‌های ترتیبی باید از تگ <ol></ol> و برای محتوای آن باید از تگ <li></li>استفاده کنیم.

<ol>
<li>Gather ingredients</li>
<li>Mix ingredients together</li>
<li>Place ingredients in a baking dish</li>
<li>Bake in oven for an hour</li>
<li>Remove from oven</li>
<li>Allow to stand for ten minutes</li>
<li>Serve</li>
</ol>

شروع لیست ترتیبی با عددی جز 1

یکی از نیاز‌های رایج در استفاده از لیست‌های ترتیبی، تغییر عدد شروع لیست است، به عنوان مثال به جای شروع از عدد 1 از یک عدد دیگر شروع شود.

برای انجام این کار باید از خاصیت start استفاده کنیم، این خاصیت یک مقدار عددی قبول می‌کند (حتی اگر از  css رای تغییر عدد شمارنده استفاده کنید).

<ol>
<li>Gather ingredients</li>
<li>Mix ingredients together</li>
<li>Place ingredients in a baking dish</li>
</ol>
<p>Before you place the ingredients in the baking dish, preheat the oven to180 degrees centigrade/350 degrees fahrenheit in readiness for the next step.</p>
<ol start="4">
<li>Bake in oven for an hour</li>
<li>Remove from oven</li>
<li>Allow to stand for ten minutes</li>
<li>Serve</li>
</ol>

به یاد داشته باشید خاصیت start در نسخه  HTML4 منقضی شده است،

بنابراین استفاده از آن در یک صفحه  HTML  با نسخه 4 باعث رد اعتبار صفحه شما خواهد شد.

برای نسخه 4 می توانید توسط شمارنده های موجود در  CSS آن را به انجام برسانید. خوشبختانه این خاصیت در نسخه HTML5 بازگشته است.

با لیست‌های ترتیبی در مقاله‌ای جدا بیشتر آشنا می‌شویم.

کار با لیست ها در HTML

لیست توضیحی

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

در این لیست نام ها و مقدار آن ها داخل لیست قرار می‌گیرند.

به عنوان نمونه نویسنده مقاله و توضیح مختصر از نویسنده یا برندگان یک مسابقه و سال مسابقه.

شما می‌توانید بهتعداد دلخواه گروه‌های شامل نام/مقدار اضافه کنید، اما باید در نظر بگیرید حداقل باید یک نام و یک مقدار در هر گروه وجود داشته باشد.

لیست‌های توضیحی بسیار انعطاف پذیر هستند. شما می‌توانید چندین مقدار را به یک نام نسبت دهید یا بلعکس.

به عنوان مثال قهوه می‌تواند چندین تعریف داشته باشد :

یک لیوان قهوه

یک مایع قهوه‌ای رو به سیاه

لیست‌های توضیحی از تگ‌های </dl><dl> استفاده می‌کنند

که برای تعریف نام در گروه از تگ <dt></dt> و برای مقدار از تگ <dd></dd> استفاده می‌شود. به یاد داشته باشید

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

<dl>
<dt>Name</dt>
<dd>Value</dd>
<dt>Name</dt>
<dd>Value</dd>
<dt>Name</dt>
<dd>Value</dd>
</dl>

مثال دو:

<dl>
<dt>Name1</dt>
<dd>Value that applies to Name1</dd>
<dt>Name2</dt>
<dt>Name3</dt>
<dd>Value that applies to both Name2 and Name3</dd>
<dt>Name4</dt>
<dd>One value that applies to Name4</dd>
<dd>Another value that applies to Name4</dd>
</dl>

در مثال بالا چند نام به همراه یک مقدار تعریف شده است.

با لیست‌های توضیحی در مقاله‌ای جدا بیشتر آشنا می‌شویم.

کاربا لیست ها در HTML

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

یک آیتم لیست می‌تواند یک لیست دیگر در خود جای دهد. این حرکت لیست تو در تو نامیده می‌شود.

<ol>
<li>Chapter One
<ol style="list-style-type: lower-alpha;">
<li>Section One</li>
<li>Section Two </li>
<li>Section Three </li>
</ol>
</li>
<li>Chapter Two</li>
<li>Chapter Three </li>
</ol>

در مثال بالا ما از کد CSS برای تنظیم ترتیب لیست براساس حروف الفبا به جای اعداد صحیح استفاده کردیم.

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

انعطاف پذیری این لیست‌ها به وبسایت اجازه می‌دهد تا یک ساختار سلسله مراتبی را تعریف نمود.

همچنین می‌توان از لیست بدون ترتیب در لیست‌های ترتیبی به صورت تو در تو استفاده کرد.

در این مقاله با لیست‌ها آشنا شدیم. لیست ها از عناصر Block Level هستند

که ما می‌توانیم از آن‌ها با این عنوان استفاده کنیم و گروهی از اطلاعات را دسته‌بندی کنیم.

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

امیدوارم از این جمع بندی بهره کافی را برده باشید،

نظرات و پیشنهاداتان را از طریق بخش دیدگاه فرازنتورک برایمان ارسال کنید و سپاسگزاریم که ما را دنبال می‌کنید.

مطالب مرتبط:

1-کار با تصاویردرHTML  قسمت اول

2- کار با لیست ها در HTML قسمت دوم

3- کار با لیست ها در HTML قسمت سوم

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده: راحله تبریزی