خانه / مقالات اموزشی / html / لیست های html
آموزش HTML5
آموزش HTML5

لیست های html

لیست ها یکی از پرکاربردترین عناصر موجود در HTML می باشند که طراحان را قادر به نمایش انواع اطلاعات به صورت لیست می نماید. در HTML شما می توانید سه نوع لیست ایجاد کنید: لیست های مرتب، لیست های نامرتب و لیست های تعریفی. همچنین امکان ترکیب انواع لیست ها با یکدیگر به منظور لیست های تودرتو نیز فراهم شده است.

امروزه از لیست ها به همراه زبان CSS برای کنترل ظاهر نمایشی آن ها، به منظور ایجاد جلوه های گرافیکی، همچون منوهای درختی، منوهای افقی و عمودی، تب ها و… استفاده میشود.

دسته بندی لیست ها

همانطور که گفتیم لیست ها به سه دسته اصلی تقسیم می شوند:

  • لیست های نامرتب
  • لیست های مرتب
  • لیست های تعریفی یا توضیحی

۱٫ لیست های نامرتب : در این نوع لیست ها ترتیب قرارگیری عناصر لیست مهم نبوده، و معمولا برای لیست کردن آن ها از bullet های دایره ای توپر، تو خالی، و مربع استفاده میشود، که البته با استفاده از css میتوان bullet مورد نظر را جایگزین آنها کرد. مثال:

  • Eggs
  • Cheese
  • Milk
  • Papadums
  • Tickle-me Elmo
  • Dr Who Remote Control Dalek

۲٫ لیست های مرتب : در این نوع لیست ها ترتیب قرارگیری عناصر لیست مهم بوده و برای نمایش ترتیب آن ها از اعداد یا حروف انگلیسی یا رومی استفاده می شود. مثال:

  1. Remove the outer casing by pushing the plastic rivets through.
  2. Disconnect the main power harness from the inner unit.
  3. Remove connection to the glow plug.
  4. Extract unit, keeping upright at all times.

۳٫ لیست های تعریفی : از این گونه لیست ها هنگامی که می خواهیم یکسری از آیتم هایی که یک بخش عنوان و یک توضیح برای آن عنوان دارند را نمایش دهیم، استفاده می کنیم. مثال:

Spam
unsolicited email sent in the hope of increasing sales of some product, or simply for the purposes of annoying people
Spammer
someone who sends out spam email and therefore deserves to develop a nasty incurable disease of some kind
Spam Filter
a tool used in email to ‘filter out’ likely spam messags, usually placing them in a dedicated junk messages folder or similar

بسیار خب، حالا شما را با تگ هایی که برای ایجاد چنین لیستهایی استفاده میشود، آشنا خواهیم کرد.

تگ <ol> برای ایجاد لیست های مرتب : از این تگ برای ایجاد لیست های مرتب استفاده می شود. برای ایجاد آیتم های این لیست می بایست از تگ <li> (مخفف list Item) در داخل تگ <ol> استفاده نمود. این تگ از صفت های زیر پشتیبانی میکند.

Type : با استفاده از این صفت می توان نوع bullet کنار آیتم را مشخص نمود. این صفت مقادیر زیر را می پذیرد:

  1. a : برای نمایش حروف کوچک انگلیسی
  2. A : برای نمایش حروف بزرگ انگلیسی
  3. i : برای نمایش حروف کوچک رومی
  4. I : برای نمایش حروف بزرگ رومی
  5. ۱ : برای نمایش اعداد به عنوان bullet برای آیتم ها ( مقدار پیشفرض این صفت همین مقدار است)

Start:این صفت مشخص می کند که شماره گذاری لیست ما باید از چندمین کاراکتر از انواعی که در صفت type مشخص شده شروع شود. به عنوان مثال اگر مقدار صفت type برابر با A بود مقدار ۳ برای صفت start به معنی شروع لیست از کاراکتر C خواهد بود.

Compact : این صفت بولین موجب فشرده نمایش داده شدن آیتم های لیست خواهد شد. البته این صفت دیگر در هیچ مرورگری پشتیبانی نمی شود.

تگ <ul> برای ایجاد لیست های نامرتب : از این تگ برای ایجاد لیست های نامرتب استفاده میشود. برای ایجاد آیتم های لیست ، از تگ <li> در داخل تگ <ul> استفاده میشود. این تگ از صفت های زیر پشتیبانی می کند.

type : با استفاده از این صفت میتوان نوع bullet کنار آیتم را مشخص کرد. این صفت مقادیر زیر را می پذیرد:

  • circle : یک دایره توخالی را به عنوان bullet نمایش می دهد.
  • disc : یک دایره توپر سیاه رنگ را به عنوان bullet نمایش می دهد.
  • square : یک مربع توپر سیاه رنگ را به عنوان bullet نمایش می دهد.

Compact : این صفت بولین موجب فشرده نمایش داده شدن آیتم های لیست خواهد شد. البته این صفت دیگر در هیچ مرورگری پشتیبانی نمی شود.

تگ <dl> برای ایجاد لیست های تعریفی : برای ایجاد لیست های تعریفی از تگ <dl> استفاده می شود. هر لیست تعریفی از چند عنوان و توضیحات آن عنوان تشکیل می شود. برای ایجاد هر عنوان از تگ <dt> و برای ایجاد توضیح از تگ <dd> استفاده میشود. تگ <dl> فقط از صفت compact پشتیبانی می کند. که بازم هیچ مرورگری از این صفت پشتیبانی نمی کند!!:D

در زیر شما می توانید یک لیست تعریفی را مشاهده کنید.

 

نتیجه در مرورگر :

1x1.trans آموزش HTML (قسمت 7) : کار با لیست ها در HTML

تگ <li> : از این عنصر برای مشخص کردن آیتم لیست های مرتب و نامرتب استفاده می شود. غالبا این تگ داخل تگ های <ol> و <ul> استفاده می شود. این تگ از صفت های زیر پشتیبانی می کند.

type : از این صفت برای تغییر دادن نوع bullet مربوط به یک آیتم لیست به غیر از آن نوعی که در صفت type تگ های ul  و ol تنظیم شده است استفاده می شود. این صفت برای تگ <li> همان مقادیری را که در تگ <ol> و <ul> میگیرد، به عنوان مقدار می پذیرد. به مثال زیر دقت کنید:

 

نتیجه در مرورگر :

1x1.trans آموزش HTML (قسمت 7) : کار با لیست ها در HTML

value : از این صفت برای تغییر دادن عدد کنار یک آیتم از لیست استفاده می شود. در واقع ما می توانیم ترتیب نمایش اعداد کنار یک آیتم را با این صفت به هم بزنیم. این صفت یک عدد صحیح را به عنوان مقدار می پذیرد. به مثال زیر دقت کنید :

 

نتیجه در مرورگر :

1x1.trans آموزش HTML (قسمت 7) : کار با لیست ها در HTML

لیست های تو در تو

یکی از ویژگی های بارز  لیست ها امکان ترکیب کردن آن ها با یکدیگر است. امروزه ترکیب لیستها کاربردهای فراوانی پیدا کرده است و در بسیاری از موارد همچون ایجاد ساختارهای درختی، منوهای افقی و عمودی چند سطحی و… استفاده می شود. برای ایجاد لیست های تو در تو کافی است هر لیست جدید را در داخل یک عنصر li قرار دهید. در ادامه کد یک نمونه لیست تو در تو را مشاهده می کنید:

 

نتیجه در مرورگر :

1x1.trans آموزش HTML (قسمت 7) : کار با لیست ها در HTML

تا اینجا آموزش کار با لیست ها به پایان رسید. در مطلب بعدی به کار با جداول در HTML  و معرفی تگ <table>خواهیم پرداخت.

 

درباره آموزشگاه نوین آی تی

همچنین ببینید

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

دیدگاهتان را بنویسید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net