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

1399/10/22
ارسال شده توسط
آموزش HTML & CSS

تگ ul در HTML

تگ ul چیست؟ در چه مواردی از تگ ul استفاده می‌شود؟ چگونه یک لیست بدون شماره یا بدون ترتیب یا Unordered List در  HTML بسازیم؟ در این مقاله به صورت کامل به لیست‌های بدون ترتیب می‌پردازیم و خاصیت‌ها و تگ‌های زیر‌مجموعه این تگ را مورد بررسی قرار می‌دهیم.

1 تگ ul یا لیست بدون ترتیب در HTML

  • 1.1 تگ زیرمجموعه li
  • 1.2 نمونه کد لیست‌های بدون ترتیب
  • 1.3 استایل‌دهی لیست ها
  • 1.4 نمونه کد تو در تو لیست‌های بدون ترتیب
  • 1.5 خاصیت‌های تگ ul

تگ ul یا لیست بدون ترتیب در HTML

برای ساخت لیستی از داده‌ها و محتوا از تگ‌های مختلفی در  HTML استفاده می‌شود. یکی از این تگ‌ها تگ ul یا unordered list می‌باشد که به لیست بدون ترتیب معروف است. اگر علاقمند به دریافت اطلاعات کامل در مورد تمامی لیست‌ها هستید پیشنهاد می‌کنیم، مقاله آموزشی فرازنتورک در خصوصآشنایی با لیست‌ها را مطالعه کنید.

تگ‌ <ul> برای ساخت لیست‌هایی با آیتم‌های بدون ترتیب ساخته می‌شود و آیتم‌های هر لیست به صورت دایره‌هایی تو پر در می‌آید. (البته با ویژگی‌هایی از سی اس اس «CSS» می‌توانیم این آیتم‌ها را به صورت دایره تو خالی ویا مربع تو پر نیز نمایش دهیم که در این پست به آن‌ نیز می‌پردازیم).

این تگ از نسخه سومHTML   توسط W3C به وب اضافه شده است و برای قرار دادن لیست‌ها از یک تگ زیرمجموعه به نام تگ <li> استفاده می‌کند و هیچ محدودیتی در تعداد آیتم‌های لیست وجود ندارد.

تگ زیرمجموعه li

همانطور که گفته شد برای ایجاد یک لیست بدون ترتیب با استفاده از تگ ul می‌بایست از یک تگ زیرمجموعه به نام <li> استفاده کنیم. این تگ که یک تگ از نوع block-level می‌باشد، امکان سفارشی سازی و زیبا‌سازی بسیاری در  CSS دارد و بسیاری از کاربران با سفارشی سازی مخصوص خود از این تگ استفاده می‌کنند.

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

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

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

 

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

همانطور که در بخش‌های قبل گفتم، ۳ استایل متفاوت برای لیست ها به صورت پیش‌فرض در  HTML ایجاد شده است که می‌توانید از آنها استفاده کنید.

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

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

</style>
</head>
<body>

<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

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

با ایجاد کردن چند تگ <ul> درون هم می‌توانیم لیست‌هایی تو در تو بسازیم.

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

نمونه‌ی یک لیست بدون ترتیب تو در تو را در زیر می‌توانید مشاهده کنید:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FARAZNETWORK tag sample</title>

</head>
<!-- This Sample Page is Completely -->
<!-- For FARAZNETWORK Blog -->
<body>
<ul>
<li>first item</li>
<li>second item
<!-- Look, the closing </li> tag is not placed here! -->
<ul>
<li>second item first subitem</li>
<li>second item second subitem
<!-- Same for the second nested unordered list! -->
<ul>
<li>second item second subitem first sub-subitem</li>
<li>second item second subitem second sub-subitem</li>
<li>second item second subitem third sub-subitem</li>
</ul>
</li> <!-- Closing </li> tag for the li that
contains the third unordered list -->
<li>second item third subitem</li>
</ul>
<!-- Here is the closing </li> tag -->
</li>
<li>third item</li>
</ul>
</body>
</html>

خاصیت‌های تگ ul

در جدول زیر خاصیت‌های تگ ul را مشاهده می‌کنید. این تگ از تمامی خاصیت‌های عمومی پشتیبانی می‌کند ولی خاصیت‌های منحصر به فرد آن با توجه به اضافه شدن امکان استایل‌دهی از HTML5 حذف شده است و پشتیبانی نمی‌شود، بنابر‌این جدول زیر تنها برای آشنایی شما با این خاصیت‌ها تهیه شده است و هیچ کاربردی در HTML5 که امروزه استفاده می‌شود ندارد.

خاصیت مقدار توضیحات
compact compact این خاصیت در HTML5 پشتیبانی نمی‌شود.

با این خاصیت لیست کوچکتر از حالت عادی نمایش داده می‌شود.
type disc
square
circle		 این خاصیت در HTML5 پشتیبانی نمی‌شود.

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

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

تگ ol در HTML

تگ ol در HTMLچیست؟‌ چگونه در یک صفحه وب می‌توانیم لیست‌های ترتیبی بسازیم؟ چگونه لیست‌های ordered را استایل‌دهی کنیم. در این مقاله به صورت کامل در رابطه با تگ ol صحبت می‌کنیم و شما را با این تگ آشنا می‌کنیم.

  • 1 تگ ol در HTML
    • 1.1 تگ زیرمجموعه li
    • 1.2 نمونه کد لیست‌های ترتیبی
    • 1.3 نمونه کد لیست‌های ترتیبی تو در تو
    • 1.4 خاصیت‌های تگ ol
  • 2 انواع لیست‌های ترتیبی

تگ ol در HTML

تگ ol برای ساخت لیست‌های ترتیبی یا Ordered Lists مورد استفاده قرار می‌گیرد.

هنگامی که در لیست‌های ما ترتیب اهمیت پیدا می‌کند، می‌بایست از لیست‌های ترتیبی استفاده کنیم به این علت که این لیست‌ها با قرار دادن ترتیب مانند (۱. ۲. ۳. و غیره) یا نوع های دیگر باعث ترتیب بندی کردن عناصر لیست شما می‌شوند. در لیست‌های ترتیبی با تغییر ترتیب لیست ممکن است باعث تغییر معنای لیست شویم.

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

تگ زیرمجموعه li

برای وارد کردن آیتم‌های لیست ترتیبی می‌بایست از یک تگ زیر مجموعه به نام <li> استفاده کنیم. این تگ از نوع block-level می‌باشد و از خصوصیات عمومی تگ‌های  HTML پشتیبانی می‌کند، همچنین می‌توانید آن را استایل‌دهی کنید.

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

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

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

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

شما می‌توانید لیست‌های ترتیبی‌ای که می‌سازید را به صورت تو در تو نیز معرفی کنید که باعث می‌شود خروجی دقیق‌تری را در لیست‌هایتان داشته باشید. نمونه کد لیست‌های ترتیبی تو در تو را در زیر مشاهده می‌کنید.

<ol>
<li>first item</li>
<li>second item <!-- closing </li> tag not here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li> <!-- Here's the closing </li> tag -->
<li>third item</li>
</ol>

خاصیت‌های تگ ol

خاصیت ویژگی توضیحات
compact compact در HTML5 پشتیبانی نمی‌شود.
این خصوصیت باعث می‌شود که لیست از حالت عادی، کوچک‌تر نمایش داده شود.
reversed reversed این خصوصیت باعث برعکس شدن نمایش لیست می‌شود. (برای مثال ۹,۸,۷)
start number مشخص کننده مقدار شروع کننده لیست ترتیبی می‌باشد.
type 1
A
a
I
i		 مشخص کننده نوع ترتیب بندی لیست می‌باشد.

انواع لیست‌های ترتیبی

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

 

 

<!---- Numberic List ---->

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<!---- Alphabet Uppercase List ---->

<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<!---- Alphabet lowercase List ---->

<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<!---- Roman Numbers lowercase List ---->

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<!---- Roman Numbers Uppercase List ---->

<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

در این اینجا با لیست‌های ترتیبی، خصوصیات آن‌ها و نحوه پیاده‌سازی آن‌ها در صفحات  HTML آشنا شدیم و انواع لیست ترتیبی را شناختیم.

امیدوارم مطالب مورد نیاز در رابطه با تگ‌های ol را به صورت کامل یاد گرفته باشید.

 

مطالب مرتبط:

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

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

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

 

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

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

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

 

برچسب ها:

دیدگاهتان را بنویسید