article

کار با تگ های ایجاد کننده لیست در HTML

html-list

همانطور که پیش تر گفتیم، در HTML برای ایجاد هر خاصیتی از تگ های استاندارد و تعریف شده ی خاصی استفاده می شود که بنا بر نیاز سنجی، توسط کنسرسیوم جهانی وب (w3c) تعریف شده اند، یکی از این نیاز ها، امکان ایجاد مطالب و محتوا، به صورت لیست شده و زیرمجموعه ای است که w3c برای آن تگ های استاندارد ul li ol dl dd و dt را در نظر گرفته است، این تگ ها همه از یک خانواده هستند که برای ایجاد و مدیریت لیست در صفحات وب کاربرد دارند، از این رو در ادامه آموزش های مقدماتی HTML، این بار می خواهیم بپردازیم به مبحث کار با تگ های ایجاد کننده لیست در صفحات وب.

انواع لیست در HTML


قبل از پرداختن به ادامه آموزش، بد نیست اشاره ای هم داشته باشیم به انواع مختلف لیست در HTML.
لیست ها در وب تقریبا در دو دسته اصلی طبقه بندی می شوند، لیست های شماره ای (لیست هایی که در ابتدای آیتم های آن شماره قرار می گیرد و به صورت خودکار مرتب می شوند) که به آنها در اصطلاح ordered یا سفارشی و مرتب شده می گویند، و در مقابل لیست هایی که بدون شماره بوده و به جای آن، از علائم دیگر نظیر نقطه های مشکی تو پُُر یا تو خالی و... استفاده می شود، به این نوع لیست ها، unordered یا نامرتب می گویند که البته برخلاف نام آن، تفاوت عمده این دو لیست، تنها در شمار دار بودن یا نبودن آیتم های آنها است.

ایجاد لیست های مرتب شده با تگ ol و li


برای ایجاد لیست ها با آیتم های شماره بندی شده، از دو تگ ol و li استفاده می شود، تگ ol یک تگ کلیدی است و به مفسر مرورگر تفهیم می کند که منظور ما از لیست، لیستی با آیتم های شماره دار است، به مثال زیر توجه کنید.
<ol>
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ol>
برای دیدن پیش نمایش مثال ها، به انتهای این مطلب مراجعه کنید.
در حالت پیش فرض، مرورگر از اعداد برای مرتب سازی آیتم های لیست استفاده می کند (به فرض از شماره 1، 2، 3 ...)، اما اگر بخواهید نمایش عناوین آیتم ها را سفارشی کنید، می توانید از چند مقدار متفاوت برای خاصیت type تگ ol استفاده کنید، این مقادیر می تواند به صورت زیر باشد:
- لیست آیتم ها به صورت شماره ای (1، 2، 3 و...) با مقدار 1 برای type.
- لیست آیتم ها به صورت حروف کوچک (c، b، a و...) با مقدار a برای type.
- لیست آیتم ها به صورت حروف بزرگ (C، B، A و...) با مقدار A برای type.
- لیست آیتم ها به صورت شماره های رومی کوچک (iii، ii، i و...) با مقدار i برای type.
- لیست آیتم ها به صورت شماره های رومی بزرگ (III، II، I و...) با مقدار I برای type.
به مثال زیر توجه کنید.
<ol type="I">
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ol>

ایجاد لیست های بدون شماره با تگ ul و li


برای ایجاد لیست هایی با آیتم های فاقد شماره در صفحات وب، از تگ ul و li استفاده می شود، در اینجا ul تگ کلیدی است که به مرورگر می گوید آیتم های لیست را بدون شماره نشان دهد و از li نیز برای ایجاد آیتم ها استفاده می شود، به مثال زیر توجه کنید.
<ul>
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ul>
برای دیدن پیش نمایش مثال ها، به انتهای این مطلب مراجعه کنید.
در حالت پیش فرض، مرورگر برای نمایش آیتم های لیست، از یک علامت (معمولا نقطه های تو پُر) استفاده می کند، برای اینکه این رفتار مرورگر را کنترل کرده و نحوه نمایش آیتم های لیست را سفارشی کنیم، می توانیم همانند تگ ol از ویژگی type استفاده کنیم، با این تفاوت که در اینجا تنها سه مقدار زیر قابل تعیین است.
- ایجاد نقطه های تو خالی با مقدار circle برای type.
- ایجاد نقطه های تو پر با مقدار disc برای type.
- ایجاد نقطه های مربعی با مقدار square برای type.
به مثال زیر توجه کنید.
<ul type="square">
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ul>
خوشبختانه علاوه بر مقادیر و خاصیت های فوق، کنترل عناصر تگ های ul و li با css نیز کاملا مقدور است، علاوه بر این، css امکانات خیلی بیشتری برای سفارشی سازی لیست های وب در اختیارمان قرار می دهد که در آموزش های مقدماتی css و در مطلب زیر به طور مفصل در این رابطه گفته ایم:
نحوه تنظیم لیست با تگ ul li در css

ایجاد لیست های تو در تو با تگ ul و li


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

ساخت لیست های تعریف شده با تگ dl، dt و dd


در HTML می توان با استفاده از تگ های dl، dt و dd لیست هایی با قابلیت های توصیفی ایجاد نمود که می تواند کاربرد های خاص خود را داشته باشد، در این شیوه، تگ dl به عنوان تگ کلیدی، تگ dt برای ایجاد آیتم های لیست و تگ dd برای توصیف هر آیتم کاربرد دارد؛ به مثال زیر توجه کنید.
<dl>
<dt>آموزش</dt>
<dd>آموزش برنامه نویسی</dd>
<dt>مقدماتی</dt>
<dd>آموزش مقدماتی</dd>
<dt>تگ ها</dt>
<dd>آموزش تگ های html</dd>
<dt>html</dt>
<dd>آموزش html</dd>
</dl>

مثال و پیش نمایش آنلاین


در زیر کد و پیش نمایش آنلاین نحوه استفاده از تگ های ایجاد کننده لیست در صفحات وب را ملاحظه می کنید که می توانید از آن استفاده نمائید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ایجاد لیست در صفحات وب</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
لیست های شماره ای:<br />
<!-- شروع یک لیست -->
<ol type="I">
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ol>
<!-- پایان یک لیست -->
<hr />

لیست های عادی:<br />
<!-- شروع یک لیست -->
<ul type="square">
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ul>
<!-- پایان یک لیست -->
<hr />

لیست های توصیفی:<br />
<!-- شروع یک لیست -->
<dl>
<dt>آموزش</dt>
<dd>آموزش برنامه نویسی</dd>
<dt>مقدماتی</dt>
<dd>آموزش مقدماتی</dd>
<dt>تگ ها</dt>
<dd>آموزش تگ های html</dd>
<dt>html</dt>
<dd>آموزش html</dd>
</dl>
<!-- پایان یک لیست -->
<hr />

لیست های تو در تو:<br />
<!-- شروع یک لیست -->
<ul>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ul><li>لیست فرعی و زیر مجموعه اول
<ul><li>لیست فرعی و زیر مجموعه دوم</li></ul></li></ul>
</li>
</ul>
<!-- پایان یک لیست -->
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
» تگ های اصلی و کلیدی HTML
» آشنایی با HTML، زبان پایه کدنویسی وب
» کاربرد تگ font و ویژگی های فونت در HTML
» کاربرد تگ img و نمایش تصاویر در HTML
commentنظرات (۷ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: امیر
۱۳:۳۸ ۱۳۹۱/۰۷/۱۰
سلام.
آیا میشه تگ های li رو لینک دار کرد یا حتما باید برای ایجاد لینک در لیست ها از تگ a استفاده کنیم.
پاسخ: 
سلام
تنها تگی که در html برای ایجاد لینک کاربرد دارد، تگ a href است، اما می توانید لینک خود را درون یک لیست ایجاد کنید که در واقع مثل این است که خود li لینک شده باشد، به طور مثال:
<li><a href="http://webgoo.ir">webgoo</a></li>
نویسنده: مرجان
۱۴:۴۴ ۱۳۹۲/۰۲/۲۳
وقتی بیش از یک جدول را ایجاد میکنم جدول ایجاد شده در وسط صفحه قرار می گیرد چکار کنم در طرف راست قرار گیرد
پاسخ: 
باید با CSS آشنا باشید و از خاصیت هایی مانند float و display با مقادیر inline-block استفاده کنید.
نویسنده: محمد حاجی
۲۰:۰۰ ۱۳۹۲/۰۸/۱۱
سلام. خسته نباشید. من یه پیشنهاد دارم (یه درخواست یعنی)
لطفا بعد از هر چند تا مطلب که میذارید یه تمرین بذارید که تمام مطالب قبلی توی اون باشه و ما سعی کنیم کد اون رو خودمون بنویسیم. من تمام مطالب رو تا این پست دونه به دونه و خط به خط دنبال کردم. ولی هر چی میام پایین تر کدهای قبلی یه جورایی فراموش میشن. اگه بعد از هر چند تا مطلب یه صفحه که با کدهای قبلی نوشته شده باشه رو به عنوان تمرین بذارید که ما خودمون مثل اون رو درست کنیم هم یه مرور میشه هم کدها تو ذهنمون میمونن . مرسی
پاسخ: 
سلام
ممنون از پیشنهاد شما، متاسفانه انجام این کار به دلیل محدودیت هایی میسر نیست، مطالب همواره در بخش مربوطه قرار دارند و می توانید برای تمرین حتی به صورت اجمالی نگاهی به آنها داشته باشید.
نویسنده: سهیلا
۰۹:۴۲ ۱۳۹۳/۰۳/۱۳
با سلام و خسته نباشید و بسیار سپاس از سایت و مطالب مفید آن در مبحث html چرا حرفی از frameset نکردید؟ و اگر میشه با کدهای این مبحث منو آشنا کنید. با تشکر
پاسخ: 
سلام
این تگ استاندار نیست و استفاده از این شیوه توصیه نمی شود، به هر صورت اطلاعاتی از آن در لینک زیر قابل دسترسی است:
http://www.w3schools.com/tags/tag_frameset.asp
نویسنده: میزبان فا
۰۲:۳۳ ۱۳۹۴/۰۷/۱۶
سلام
ممنون از آموزش خوبتون
میشه تگ های li رو رنگی کرد ؟ لطفا مثال بزنید
پاسخ: 
سلام
بله، با اختصاص display با مقادیر block یا inline-block و در نظر گرفتن width و height می توان محتوا یا پس زمینه تگ li را با استایل CSS تنظیم کرد!
نویسنده: شیرین
۱۲:۳۹ ۱۳۹۵/۰۴/۰۷
سلام خسته نباشید میخوام با استفاده از تیبل و ویژگی کول و رو اسپن گرید نامرتب بسازم. لینکی دارین کمکم کنه؟ اخه یه سری قسمت ها رو که باهم مرج میکنم مشکل پیش میاد و اصلا نمیتونم گریدی که میخوامو بسازم. [اگه لطف کنین توی وبلاگم یا ایمیلم جواب بدین خیلی ممنون میشم]
پاسخ: 
پیشنهاد ما این است که برای ترسیم جداول پیچیده از برنامه Word استفاده کنید، سپس فایلتان را با استفاده از یکی از سرویس های آنلاین تبدیل به HTML نمائید، برای اطلاع از این سرویس ها، تست و بررسی می توانید عبارت "word to html" را در وب جستجو نمائید.
نویسنده: سپید
۱۲:۳۲ ۱۳۹۷/۰۴/۳۰
سلام . راهی هست که بشه لیست ها رو به صورت جدولی نشون داد . هر لیست یک سطر از جدول باشه . ممنون از مطالب خوبتون
پاسخ: 
دقیقا هدفتان مشخص نیست، در کل می توانیم با CSS یا با درج خروجی در تگ های td جدول این کار را انجام دهیم، در هر صورت اگر یک نمونه معرفی کنید امکان راهنمایی بیشتر فراهم می شود.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





1 × 6
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form بنیامین
در:
درود. وقت بخیر. من یک سوالی از خدمتتون داشتم؟ من می خوام وقتی کاربر بنویسه بدون اینکه URL تغییر کنه. و اینکه چطوری بعد...
۱۳۹۹/۱۱/۰۷

form مهدی
در:
خیلی ممنون آموزش خیلی خوبی بود
۱۳۹۹/۱۱/۰۷

form علی
در:
سلام تشکر میکنم از شما و سایت فوق العاده عالی تون مشکلم حل شد تشکر میکنم موفق باشید
۱۳۹۹/۱۱/۰۵

form rofa
در:
سلام خسته نباشید خیلی ممنونم از مطالب خوبتون.. ببخشید علامتی که در سمت راست همین سایت هستش چجوری تغییر جهت میده با اسکرول کردن...
۱۳۹۹/۱۱/۰۵

form علی
در:
با سلام تشکر از سایت خوبتون و اموزشای خوبی که قرار میدین یک سوال داشتم من میخوام از یک فایل رشته ای همانند :...
۱۳۹۹/۱۱/۰۵

form علی
در:
با سلام سایت هایی من میخوام اطلاعاتی از سایتی بگیرم اما این سایت پس از چند ثانیه این اطلاعات رو به من نشون میده و...
۱۳۹۹/۱۱/۰۴

form شیدا
در:
سلام برای اینکه بتونم جدول ضرب 1 در 5 رو بنویسم چه کدهایی باید بنویسم؟
۱۳۹۹/۱۱/۰۳

form امیرحسین
در:
چرا استاد خیلی فرق داره الان کد زیر را شما در نظر بگیرید بین 0 تا 1 ثانیه طول میکشه اجرا شدنش خب شما...
۱۳۹۹/۱۱/۰۲

form امیرحسین
در:
سلام استاد حالتون چطوره، من یه سوال داشتم: تو پروژه های بزرگ که یک ارایه معمولا 20 عنصری یا نهایت 100 عنصری داشته باشیم...
۱۳۹۹/۱۱/۰۲

form کوثر رحیمی
در:
سلام ا ز راهنماییتون ممنونم من تازه وبلاگم رو درست کردم ۱۲ سالمه هر کاری می کنم فیلم در اون قرار نمیگیره همش این خطا...
۱۳۹۹/۱۰/۲۹

form متین
در:
سلام و خسته نباشید من بخوام داده ای که از قبل موجوده رو با متد پست به یک فایل ارسال کنم چجور میشه؟ یعنی...
۱۳۹۹/۱۰/۲۷

form روشنا
در:
سلام ما یه وبلاگ گروهی داریم مختص املاک فایل های جدید و حتی قالب جدید اصلا اعمال نمیشه . حتی راهنمایی که کرده...
۱۳۹۹/۱۰/۲۷

form علی
در:
من در یک سایت سازی سایت ساختم یه بخش داره به نام اسکریپت دلخواه می خوام یه اسکریپتی بذارم که مثلا یه موسیقی وقتی کاربر...
۱۳۹۹/۱۰/۲۷

form امیرحسین
در:
بله استاد خیلی ممنون، نمیدونستم خودش Optimize رو انجام میده در کل من بعد از ایندکس گذاری ها همیشه سعی کردم جوری که با...
۱۳۹۹/۱۰/۲۶

form امیرحسین
در:
ُسلام وقت بخیر این کووری هم چون اول قسمت WHERE انجام میشه بعد قسمت ON پس این کووری هم با حالت کووری قبلی برابره
۱۳۹۹/۱۰/۲۶
form امیرحسین
در:
سلام استاد وقت بخیر ممنون از پاسخ گویی های قبلی یه سوال دیگه داشتم: این هم هیچ مشکلی نداره و کار میکنه، ایا...
۱۳۹۹/۱۰/۲۵
form محمد بیدل بازه
در:
سلام خسته نباشید ببخشید من توی یک قسمت سایتم تصویری دارم و میخوام سمت راست اون تصویر متن بنویسم ولی نمیشه تا متن رو...
۱۳۹۹/۱۰/۲۵
form سلام
در:
و اینکه یه تگ خوب برای فونت معرفی کنید و یه تگ دیگه که متن رو (تیتر مطلب (تست)) در ادامش بنویسه نه اینکه...
۱۳۹۹/۱۰/۲۴
form سلام
در:
سلام وبسایتم را نگاه کنید از چه تگی استفاده کنم تا فاصله بین تیتر مطلب جدید را کاهش دهم؟ (از خطی به خط...
۱۳۹۹/۱۰/۲۴
form وطن
در:
سلام. خسته نباشید. خیلی گشتم درباره یک خطا یا ایراد فنی که چند روز هست در سایت نوشته شده با پی اچ پی (اسکریپت اولوشن)...
۱۳۹۹/۱۰/۲۴
form حورارمی
در:
سلام. من هنوز نمیدونم تو تنظیمات باید کجا رو بگردم تا قالب وبلاگم رو با عکس مورد علاقه ام تغییر بدم. یا نمیتونم...
۱۳۹۹/۱۰/۲۳
form راشد
در:
این روش خیلی طولانیه در فروشگاه من یک برنامه گرفتم که یه عکس توش اپلود کن بهت یک لینک میده در ظرف چند ثانیه و...
۱۳۹۹/۱۰/۲۱
form باسلام
در:
باسلام خدمت شما عزیز زحمت کش، من مطلب را تا آخر مطالعه کردم. من وبلاگم بازدیدای زیادی داره چون تمام مطالبش رو خودم مینویسم و...
۱۳۹۹/۱۰/۲۱
form محمود
در:
سلام و عرض ادب من در سایتم یک قسمت تب ایجاد کردم، متن ها را که در تب می نویسم پاراگراف بندی نمی شوند....
۱۳۹۹/۱۰/۲۱
form علی آقابیگی
در:
سلام خسته نباشید ببخشید من می خواستم کد جدید در وبلاگم بزارم بعد اشتباهی رفتم در قسمت ویرایش کدها و بعد بیشتر کدها را پاک...
۱۳۹۹/۱۰/۲۰
form محمد
در:
سلام. من میخوام با جاوا اسکریپت یک کدی بنویسم که وقتی کاربر روی یک دکمه ‏ای کلیک کرد، یک کد تصادفی برای شمارش ارسال...
۱۳۹۹/۱۰/۲۰
form پوریا
در:
سلام خسته نباشید، ممنونم بابت توضیحات خوبتون، یه مشکلی داشتم میخواستم ببینم امکانش هست راهنمایی کنید؟ فرض کنید یه اینطور متنی داریم: ...
۱۳۹۹/۱۰/۱۹
form seyedsobhanmansouri
در:
سلام خسته نباشید من سایتمو طراحی کردم اما به این مشکلات بر میخورم اول اینکه هدر سایتم نمایش داده نمیشه اصلا و بعد...
۱۳۹۹/۱۰/۱۹
form رضا
در:
سلام. ممنون بابت مطالب مفیدتون. این نوع جستجو به سئو سایت لطمه نمیزنه؟؟؟ چون در این مدل جستجو، مقدار impression میره بالا ولی...
۱۳۹۹/۱۰/۱۹
form mahdi
در:
سلام استاد عزیز ، پس بنظرتون بجای وقت گذاشتن برای یادگیری لاراول و وردپرس ، وقت بزارم که عمیق تر php و ساختار mvc...
۱۳۹۹/۱۰/۱۹
form علی
در:
سلام و ممنون بابت وبسایت عالیتون داخل بعضی سایت ها دیدید مثلا یه متنی شروع به تایپ شدن می کنه و وقتی کامل شد...
۱۳۹۹/۱۰/۱۸
form محمد
در:
سلام خدمت شما دوست عزیز سوالم این بود میخاستم چندتا مثال از این تابع و چند تابع دیگه از خودتون رو برام مثال بزنید...
۱۳۹۹/۱۰/۱۸
form محمود رنجبر
در:
سلام برادر مشکل من تو همین سایتی هست که فرستادم وقتی گزینه خانه رو کلیک میکنم و بعد دکمه بک گوشی رو میزنم بالای صفحه...
۱۳۹۹/۱۰/۱۷
form mahdi
در:
سلام استاد عزیز ، بعد از آموزس php با لاراول کار کنیم بهتره ؟
۱۳۹۹/۱۰/۱۶
form رضا
در:
آدرس رو براتون گذاشتم دامنه قبلا روی یه وبلاگ میهن بلاگ بود چند ماه میشه که از میهن بلاگ خداحافظی کردم ولی هنوز که هنوزه...
۱۳۹۹/۱۰/۱۴
form نیلو
در:
سلام... ببخشید بعد طراحی قالب قالب شیشه ایم هست یا نه؟؟؟
۱۳۹۹/۱۰/۱۳
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.