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

--- 1395/9/24 2719

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

با سلام و درود خدمت شما همراهان گرامی و علاقه مندان به آموزش طراحی وب
علیرضا حاتمی نیا هستم با آموزش قسمت هشتم طراحی وب در خدمت شما هستم
در جلسه قبل نحوه ساخت جداول در  HTML را آموختید.
در این قسمت با لیست ها که یکی دیگر از عناصر وب جهت دسته بندی و نمایش اطلاعات می باشد آشنا خواهید شد.

لیست ها از جمله اجزاء پرکاربرد جهت نمایش مستندات و دسته بندی اطلاعات هستند به گونه ای
که تشخیص ارتباط هر بخش با سایر بخش ها به سادگی امکان پذیر باشد.
در طراحی صفحات وب غالباً سه نوع لیست با نام های ترتیبی، غیرترتیبی و توضیحی مورد استفاده
قرار می گیرند که در ادامه به بیان و نحوه ایجاد این لیست ها می پردازیم.

1-    لیست غیر ترتیبی<ul>:
از این نوع لیست برای دسته بندی اطلاعاتی استفاده می شود که ترتیب قرارگیری آن ها اهمیت چندانی ندارد.
برای درج این لیست در سند HTML از تگ باز و بسته <ul></ul> استفاده می شود. Ul مخفف عبارت  Unordered می باشد. همچنین مواردی دسته بندی لیست هم بین دو تگ باز و بسته <li></li> قرار می گیرند. که به طور پیشفرض دایره ای توپر به ابتدای هر لیست اضافه و نمایش داده می شود.
به مثال زیر توجه کنید.

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


 

آموزش لیست ها در HTML

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

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


 

آموزش لیست ها در HTML

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


خب مبحث لیست ها را در اینجا به اتمام میرسانیم. در آینده و با شروع دوره css بیشتر روی خواص و ظاهر این لیست ها مانور می دهیم.
در پایان برای این مبحث یک فیلم آمزوشی تهیه کردم که می توانید از طریق لینک زیر دانلود و مشاهده کنید.
با تشکر از اینکه با ما همراه بودید.

دانلود ویدیو

 

قسمت بعدی قسمت قبلی