سه شنبه ۰۱ تیر ۱۴۰۰

Tuesday, June 22, 2021 GMT +4:30

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

html-list

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

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


لیست های HTML در دو دسته اصلی طبقه بندی می شوند:
- لیست های سفارشی و مرتب شده یا Ordered، یعنی لیست هایی که در ابتدای آیتم های آن شماره قرار می گیرد و رعایت ترتیب در آنها مهم است، شماره آیتم های این نوع لیست ها به صورت خودکار از بالاترین به پائین ترین سطح مرتب می شوند، مثال:
  1. آموزش مقدماتی
  2. آموزش کاربردی
  3. انجام پروژه برنامه نویسی
- لیست هایی بدون شماره و مرتب نشده یا Unordered، یعنی به جای نمایش شماره و مهم بودن ترتیب آیتم ها از علائم دیگری نظیر نقطه های مشکی تو پُر و تو خالی یا مربع استفاده می شود و رعایت ترتیب آیتم های لیست اهمیتی ندارد، مثال:
  • HTML زبان قراردادی است.
  • HTML زبان نشانه گذاری (Markup) است.
  • HTML زبان پایه وب است.
هر کدام از انواع مختلف لیست ها می توانند در جای خود با توجه به محتوایی که قصد نمایش آن را داریم کاربردی باشند، از نظر فنی علاوه بر تفاوت های ظاهری در نحوه نمایش لیست ها انتخاب هر کدام از روش ها می تواند در زمینه بهینه سازی صفحات وب برای موتورهای جستجو (SEO یا Search Engine Optimization) نیز حداقل در تئوری معنی و تاثیر متفاوت داشته باشد.

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


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

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


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

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


کاربرد لیست در وب به موارد ساده محدود نمی شود، با پیروی از اصول تگ های HTML می توانیم لیست های تو در تو و دارای چند سطح یا به اصطلاح آشیانه ای (Nested) ایجاد کنیم، اینگونه لیست ها می توانند برای مواردی که به صورت زیر مجموعه ای و طبقه بندی شده هستند مانند منوهای صفحات وب کاربرد داشته باشند، ساختار کلی منوی زیر مجموعه ای و تو در تو در مثال زیر مشخص است:
<ul>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ul><li>لیست فرعی و زیر مجموعه اول
<ul><li>لیست فرعی و زیر مجموعه دوم</li></ul></li></ul>
</li>
</ul>
و همین لیست با تگ ol و li:
<ol>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ol><li>لیست فرعی و زیر مجموعه اول
<ol><li>لیست فرعی و زیر مجموعه دوم</li></ol></li></ol>
</li>
</ol>

ساخت لیست های توصیفی با تگ 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>تمرین</dt>
<dd>تگ های لیست</dd>
</dl>
برای دیدن پیش نمایش آنلاین مثال ها لطفا به انتهای این مطلب مراجعه کنید.

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


در ادامه کد و پیش نمایش آنلاین نحوه استفاده از تگ های ایجاد کننده لیست در صفحات وب را جهت تست و بررسی بیشتر مرور می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد لیست در صفحات وب</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
<b>لیست های شماره ای مرتب شده:</b><br>
<!-- شروع لیست -->
<ol type="I">
<li>آموزش</li>
<li>مقدماتی</li>
<li>HTML</li>
<li>تگ ها</li>
</ol>
<!-- پایان لیست -->
<hr>
<b>لیست های عادی مرتب نشده:</b><br />
<!-- شروع لیست -->
<ul type="square">
<li>تگ ol</li>
<li>تگ ul</li>
<li>تگ li</li>
<li>تگ dl</li>
</ul>
<!-- پایان لیست -->
<hr>
<b>لیست های تو در تو:</b><br>
<!-- شروع لیست -->
<ul>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ul><li>لیست فرعی و زیر مجموعه اول
<ul><li>لیست فرعی و زیر مجموعه دوم</li></ul></li></ul>
</li>
</ul>
<!-- پایان لیست -->
<!-- شروع لیست -->
<ol>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ol><li>لیست فرعی و زیر مجموعه اول
<ol><li>لیست فرعی و زیر مجموعه دوم</li></ol></li></ol>
</li>
</ol>
<!-- پایان لیست -->
<hr>
<b>لیست های توصیفی:</b><br>
<!-- شروع لیست -->
<dl>
<dt>آموزش</dt>
<dd>برنامه نویسی</dd>
<dt>سطح</dt>
<dd>مقدماتی</dd>
<dt>مبحث</dt>
<dd>تگ های HTML</dd>
<dt>تمرین</dt>
<dd>تگ های لیست</dd>
</dl>
<!-- پایان لیست -->
</body>
</html>
پیش نمایش آنلاین
دسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» لایه بندی در HTML با تگ div و span
» آشنایی با HTML، زبان پایه کدنویسی وب
» متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
» کاربرد تگ img و نمایش تصاویر در HTML
» نحوه ایجاد لینک در 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 لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





7 × 6
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form علیرضا
در:
مفید و کاربردی مرسی
۱۴۰۰/۰۳/۳۱

form محمود
در:
سلام مهندس وقت بخیر دوباره به کمک شما نیاز پیدا کردم ، چگونه می توان استایل صوت به یک متن داد. به...
۱۴۰۰/۰۳/۳۰

form پرتو
در:
سلام استاد خسته نباشید قالبم درست شد خیلی ممنون یه خواهش دیگه هم ازتون داشتم اینکه یه بوردر برای تک به تک پست ها جداگانه...
۱۴۰۰/۰۳/۲۴

form بهنیا
در:
سلام خسته نباشید ببخشید چطوری میتونم برای خود وبسایتم یه لینک بسازم؟ کد خاصی داره؟
۱۴۰۰/۰۳/۲۴

form Raha
در:
سلام وقت بخیر چه جوری می تونم از دو تا function باهم استفاده کنم. مثلا میخوام توی مسیج باکس دوتا عدد دلخواه بدم...
۱۴۰۰/۰۳/۲۴

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

form محمد
در:
با عرض سلام و احترام مجدد پیرو کامنت قبلی که لطف کرده و توجه فرمودید آدرس سایت این هست: از توجه و راهنمایی‌های همیشگی...
۱۴۰۰/۰۳/۲۳

form محمد
در:
سلام وقت بخیر با سپاس از تیم محترم وبگو یک سوال داشتم از خدمتتون در عکسی که در آدرس با...
۱۴۰۰/۰۳/۲۲

form پرتو
در:
با سلام استاد من براتون ایمیل فرستادم لطفا ایمیل خود را چک کنید با تشکر
۱۴۰۰/۰۳/۲۱

form پرتو
در:
سلام خوبید خسته نباشید من یه کد قالبی دارم که میشه براتون بفرستم و شما تغییرش بدین من قالبم رو می خاستم اگه...
۱۴۰۰/۰۳/۲۰

form سید ارمیا حسینی
در:
سلام ببخشید عالی بود اما اگه می خواستم مثلا چیزی رو ایجاد کنم که مثلا کاربر بعد از ورود به صحفه 5 ثانیه بعد وارد...
۱۴۰۰/۰۳/۲۰

form الی
در:
سلام وقت بخیر من میخوام یه سایت طراحی کنم و در قسمت هدر یه گیف بذارم ولی هر کار می کنم گیف نمایش داده...
۱۴۰۰/۰۳/۱۸

form علیرضا حسینی
در:
دمتون گرم خسته نباشید خیلی عالی بود
۱۴۰۰/۰۳/۱۸

form حامدترابی
در:
سلام چند وقته که وبلاگ شهیدحسن ترابی گودرزی باز نمیشه ولی با vpn باز میشه. میشه راهنماییم کنید. ممنون میشم
۱۴۰۰/۰۳/۱۶

form mahdi
در:
سلام استاد این تابع در لوکال هم ایمیل ارسال میکنه هم فایل ضمیمه ، البته زمپ رو یه سری تغییرات باید داد و حساب ایمیل...
۱۴۰۰/۰۳/۱۲

form mahdi
در:
سلام وقت بخیر ، استاد عزیز اگر ما با تابع mail یه تابعی بنویسیم که در لوکال قابلیت ارسال هر نوع ایمیلی رو داشته باشه...
۱۴۰۰/۰۳/۱۲

form masood
در:
سلام وقتتون بخیر ببخشید من یک سوالی دارم اگر بخوایم تنظیماتی که برای id و class در نظر داریم رو تو یه...
۱۴۰۰/۰۳/۱۱

form mahdi
در:
استاد وقتشو دارید امشب ببینیدش مثلا در حد نیم ساعت که وقتتونم گرفته نشه؟
۱۴۰۰/۰۳/۱۰

form mahdi
در:
سلام استاد وقت بخیر،استاد عزیز من یه چارت با جاوااسکریپت نوشتم که سه تا نمودار میلیه ای و خطی و نقطه ای رو در بر...
۱۴۰۰/۰۳/۱۰

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

form پرتو
در:
سلام خسته نباشید شرمنده مزاحم شدم دوباره، می خاستم بپرسم می ارزه کسی وبلاگ در مورد قالب سازی بزنه یا اینکه نه نمی ارزه آخه...
۱۴۰۰/۰۳/۰۹

form یاس
در:
سلام میخواستم بدونم چجوری باید فایل متنی HTML دارای هایپرلینک را باز کند و محتوای آنرا بخواند و سپس هایپرلینک های آن را شناسایی کند...
۱۴۰۰/۰۳/۰۸

form sattar
در:
سلام، اون قسمتی که اعتبار سنجی ورود حروف فارسی هست مشکل داره یعنی کاربر رو اجبار به وارد کردن حروف فارسی میکنیم اما اگر مثلا...
۱۴۰۰/۰۳/۰۸

form mahdi
در:
سلام استاد ckeditor بهتره یا TinyMCE؟ من اینو ckeditor دیدم که راست چین چپ چین نداشت بعد استاد عزیز من یه چیزی رو...
۱۴۰۰/۰۳/۰۶

form پرتو
در:
ممنونم از شما که کدش رو دادید فقط یه سوال داشتم و اونم اینکه این کد رو در کدوم قسمت قالب قرار بدم و ایا...
۱۴۰۰/۰۳/۰۴

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

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

form دانیال
در:
باسلام خیلی ممنون بابت مطالب عالیه سایتتون این مطلب هم مثل بقیه مطالب عالی بود
۱۴۰۰/۰۳/۰۳

form mahdi
در:
سلام استاد عزیز ، بله استاد اونطوری قرار میگیره وقتی تصویر از قبل مثلا با فتوشاپ شفاف شده باشه ، ولی اگر بخوایم یک عکس...
۱۴۰۰/۰۳/۰۳
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.