نحوه ایجاد لیست در 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>


لیست در html

 

لیست ترتیبی <ol>

برای نمایش داده های یک لیست به صورت ترتیبی یا شماره گذاری شده می توانید از تگ <ol></ol> استفاده کنید. Ol مخفف عبارت Ordered List می باشد. عناصر این لیست هم بایستی بین دو تگ باز و بسته <li></li> قرار بگیرند.

 <ol>
 <li> صبحانه </li>
 <li> نهار </li>
 <li> شام </li>
</ol>


نحوه ایجاد لیست در html

 

لیست توضیحی <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

 

ادغام لیست ها

در نسخه جدید html این امکان فراهم شده است تا شما بتوانید لیست ها را بدون توجه به نوع آنها با هم ترکیب کنید. فقط تنها بایستی دقت لازم را در شروع و پایان تگ ها داشته باشید. در مثال زیر دو لیست ترتیبی و غیرترتیبی را با هم ترکیب می کنیم.

 <ol>
<li> صبحانه :
<ul>
    <li> تخم مرغ </li>
    <li>  پنیر</li>
    <li> چای </li>
</ul>
</li>
<li> نهار :
<ul>
    <li> قورمه سبزی</li>
    <li>  چلوکباب</li>
    <li> لوبیا پلو </li>
</ul>
</li>
</ol>


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

 


خب مبحث لیست ها در HTML را در اینجا به اتمام میرسانیم. در آینده و با شروع دوره css بیشتر روی خواص و ظاهر این لیست ها مانور می دهیم.

برای درج نظر و یا طرح سوالات خود لطفا در سایت ثبت نام کنید و یا وارد سایت شوید

نظرات کاربران

برای این مطلب تاکنون نظری ارسال نشده است. شما اولین نفر باشید