آموزش کار با لیست ها یا 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 به راحتی میتوانیم نوع علامت گذاری و یا شماره گذاری آیتم های لیست مون رو مشخص نماییم.

حال نکته ای که باید بهش توجه کرد این است، صفت Type در HTML5 یه صفت منسوخ شده می باشد و توسط این زبان پشتیبانی نمیشود، پس بهتره از CSS بجای این صفت استفاده نمایید.

آموزش کامل کار با لیست ها در CSS را مشاهده نمایید.

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

امتحان کنید

Free-Learn

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

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

امتحان کنید

Free-Learn

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

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

امتحان کنید

Free-Learn

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

مثال شماره ۱ : (منوی سایت بصورت افقی) ( پیشنهاد میکنم حتما آموزش ساخت منوهای افقی و عمودی را در CSS مشاهده نمایید )

امتحان کنید

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

امتحان کنید

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

Free-Learn

دریافت PDF یا پرینت این مطلب