نحوه ایجاد لیست در HTML
Your browser doesn't support video.
Please download the file: video/mp4
با سلام و درود خدمت شما همراهان گرامی و علاقه مندان به آموزش طراحی وب.علیرضا حاتمی نیا هستم با آموزش قسمت هشتم طراحی وب در خدمت شما هستم.
در جلسه قبل نحوه ساخت جداول در HTML را آموختید. در این قسمت با لیست ها در HTML که از آنها جهت دسته بندی و نمایش اطلاعات استفاده می شود آشنا خواهید شد.
لیست ها در HTML
لیست ها از جمله اجزاء پرکاربرد جهت نمایش مستندات و دسته بندی اطلاعات هستند به گونه ای که تشخیص ارتباط هر بخش با سایر بخش ها به سادگی امکان پذیر باشد.
در HTML لیست ها به سه دسته تقسیم می شوند:
- ترتیبی
- غیرترتیبی
- توضیحی
در ادامه به بیان و نحوه ایجاد این لیست ها می پردازیم.
لیست غیر ترتیبی <ul>
از این نوع لیست برای دسته بندی اطلاعاتی استفاده می شود که ترتیب قرارگیری آن ها اهمیت چندانی ندارد.
برای درج این لیست در سند HTML از تگ باز و بسته <ul></ul> استفاده می شود. Ul مخفف عبارت Unordered List می باشد. همچنین مواردی دسته بندی لیست هم بین دو تگ باز و بسته <li></li> قرار می گیرند. که به طور پیشفرض دایره ای توپر به ابتدای هر لیست اضافه و نمایش داده می شود.
به مثال زیر توجه کنید.
<ul>
<li> صبحانه</li>
<li> نهار </li>
<li> شام </li>
</ul>
لیست ترتیبی <ol>
برای نمایش داده های یک لیست به صورت ترتیبی یا شماره گذاری شده می توانید از تگ <ol></ol> استفاده کنید. Ol مخفف عبارت Ordered List می باشد. عناصر این لیست هم بایستی بین دو تگ باز و بسته <li></li> قرار بگیرند.
<ol>
<li> صبحانه </li>
<li> نهار </li>
<li> شام </li>
</ol>
لیست توضیحی <dl>
در لیست های توضیحی معمولا توضیحی برای آیتم های لیست درج می شود. مجموعه عبارات این لیست درون تگ باز و بسته <dl></dl> قرار می گیرند که مخفف عبارت Definition List می باشد. در ادامه عبارت هایی که برای آنها توضیحی وجود دارد درون برچسب باز و بسته <dt></dt> قرار می گیرند. این عبارت از واژه Define Item گرفته شده است. در ادامه توضیح هر آیتم درون تگ باز و بسته <dd></dd> قرار می گیرد. این واژه مخفف عبارت Define Description می باشد. به مثال زیر توجه کنید.
<dl>
<dt>صبحانه</dt>
<dd> تخم مرغ، پنیر، کره، مربا و چای </dd>
<dt> نهار </dt>
<dd>قورمه سبزی، قیمه، چلو کباب، چلو مرغ </dd>
<dt> شام </dt>
<dd> فسنجان،خورش بادمجان، لوبیا پلو </dd>
</dl>
ادغام لیست ها
در نسخه جدید html این امکان فراهم شده است تا شما بتوانید لیست ها را بدون توجه به نوع آنها با هم ترکیب کنید. فقط تنها بایستی دقت لازم را در شروع و پایان تگ ها داشته باشید. در مثال زیر دو لیست ترتیبی و غیرترتیبی را با هم ترکیب می کنیم.
<ol>
<li> صبحانه :
<ul>
<li> تخم مرغ </li>
<li> پنیر</li>
<li> چای </li>
</ul>
</li>
<li> نهار :
<ul>
<li> قورمه سبزی</li>
<li> چلوکباب</li>
<li> لوبیا پلو </li>
</ul>
</li>
</ol>
خب مبحث لیست ها در HTML را در اینجا به اتمام میرسانیم. در آینده و با شروع دوره css بیشتر روی خواص و ظاهر این لیست ها مانور می دهیم.
نظرات کاربران