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

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با لیست ها یا Lists در HTML با من همراه باشید.

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

Free-Learn

کار با لیست ها یا Lists در HTML

در این بخش از آموزش HTML میخواهیم با نحوه استفاده از لیست ها در این زبان آشنا شویم، لیست یا List در HTML به دو دسته تقسیم می شوند، یا بطور کلی میتوان گفت در HTML ما ۳ نوع لیست داریم :

  • لیست نامرتب یا Unordered list
  • لیست مرتب یا Ordered List
  • لیست دارای توضیحات یا Description List

Free-Learn

لیست های نامرتب در HTML

در این نوع لیست ها ترتیب قرار گرفتن آیتم ها مهم نیست، یعنی مهم نیست که کدام مقدار اولش نوشته شود و کدام آخر، پس بطور کلی لیست های نامرتب لیست هایی هستند که ترتیب قرار گرفتن آیتم ها در آنها مهم نیست.

ما در HTML با استفاده از تگ <ul> میتوانیم یک لیست نامرتب و با استفاده از تگ <li> آیتم های یک لیست نامرتب را ایجاد نماییم.

حال لطفا به مثال زیر توجه نمایید :

امتحان کنید

با کلیک بروی دکمه (امتحان کنید) اگر خروجی را مشاهده نمایید، میبینید که یک لیست از آیتم های ما ایجاد شده و در کنار هریک از آیتم ها یک گلوله توپُر مشکی ایجاد شده است.

Free-Learn

نوع علامت گذاری لیست های نامرتب در HTML

همانطور که در مثال قبلی مشاهده نمودید در حالت پیش فرض آیتم های لیست های نامرتب بصورت دایره توپُر در مرورگرها نمایش داده می شوند، ما میتوانیم نوع علامت گذاری این آیتم را با استفاده از صفت type و مقادیر زیر تغییر دهیم.

شکل کلی برای استفاده از صفت type در تگ <ul> بصورت زیر می باشد :

که بجای Value میتوانید از مقادیر زیر استفاده نمایید :

مقدار توضیح
disc این گزینه بصورت پیش فرض وجود دارد
circle علامت آیتم ها بصورت دایره توخالی می شود
square علامت آیتم ها بصورت مربع توپُر می شود
none این گزینه باعث می شود آیتم ها هیچگونه علامت گذاری نداشه باشند

مثال برای مقدار disc :

امتحان کنید

مثال برای مقدار circle :

امتحان کنید

مثال برای مقدار square :

امتحان کنید

مثال برای مقدار none :

امتحان کنید

Free-Learn

لیست های مرتب در HTML

لیست های مرتب لیست هایی هستند که آیتم ها یا مقادیر آنها دارای ترتیب می باشند، در HTML برای ایجاد یک لیست مرتب باید از تگ <ol> و برای ایجاد آیتم های لیست از تگ <li> استفاده نماییم.

آیتم های لیست ها چه در نامرتب و چه مرتب میتوانند تصاویر،لینک و دیگر عناصر HTML هم باشند.

حال لطفا به مثال زیر توجه نمایید :

امتحان کنید

در این نوع لیست ها نیز همانند لیست های نامرتب ما میتوانیم نحوه شماره گذاری آیتم ها را به دلخواه با استفاده از مقادیر زیر در صفت type تنظیم نماییم.

مقدار توضیح
۱ شماره گذاری عددی – این مقدار بصورت پیش فرض می باشد
A شماره گذاری با حروف بزرگ انگلیسی
a شماره گذاری با حروف کوچک انگلیسی
I شماره گذاری با حروف بزرگ رومانی
i شماره گذاری با حروف کوچک رومانی

مثال برای مقدار ۱ :

امتحان کنید

مثال برای مقدار A :

امتحان کنید

مثال برای مقدار a :

امتحان کنید

مثال برای مقدار I :

امتحان کنید

مثال برای مقدار i :

امتحان کنید

Free-Learn

نحوه علامت گذاری لیست ها با استفاده از صفت Style

کمی بالاتر همانطور که مشاهده مینمایید، ما با استفاده از صفت Type در درون تگ ul و ol به راحتی میتوانیم نوع علامت گذاری و یا شماره گذاری آیتم های لیست مون رو مشخص نماییم.

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

در مثال زیر با استفاده از صفت Style نوع علامت گذاری هر دو نوع لیست مشخص شده است.

امتحان کنید

Free-Learn

لیست های دارای توضیحات در HTML

HTML همچنین از لیست هایی که دارای توضیحات می باشند نیز پشتیبانی میکند، برای ایجاد یک لیست با توضیحات در HTML باید از تگ <dl> و برای ایجاد آیتم ها از تگ <dt> و برای ایجاد توضیحات از تگ <dd> استفاده کرد.

امتحان کنید

Free-Learn

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

ما میتوانیم در HTML لیست ها را بصورت تودرتو نیز ایجاد نماییم، لطفا به مثال زیر توجه نمایید.

امتحان کنید

Free-Learn

مثال های بیشتر از لیست ها در HTML

مثال شماره ۱ : (منوی سایت بصورت افقی)

امتحان کنید

مثال شماره ۲ : (منوی سایت بصورت عمودی)

امتحان کنید

خب دوستان عزیز و محترم فری لرن به پایان این بخش (آموزش کار با لیست ها یا Lists در HTML) از سری آموزش های قدم به قدم زبان HTML رسیدیم. لطفا در بخش های بعدی همچنان با بنده همراه باشید.

Free-Learn

  • خلاصه ی این بخش
  • بطور کلی ۳ نمونه لیست داریم: لیست نامرتب و لیست مرتب و لیست دارای توضیحات
  • برای ایجاد لیست های نامرتب باید از تگ <ul> استفاده کرد.
  • برای ایجاد لیست های مرتب باید از تگ <ol> استفاده کرد.
  • برای ایجاد مقادیر یا آیتم های لیست های نامرتب و یا مرتب باید از تگ <li> استفاده کرد.
  • برای مشخص کردن نوع علامت گذاری آیتم ها، هم در لیست های مرتب و هم نامرتب باید از صفت type استفاده کرد.
  • برای مشخص کردن نوع علامت گذاری آیتم ها، هم در لیست های مرتب و هم نامرتب با استفاده از CSS باید از ویژگی list-style-type استفاده کرد.
  • دانلود PDF این آموزش
  • برای دانلود فایل PDF این آموزش کلیک نمایید