این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
آموزش کار با لیست ها یا Lists در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با لیست ها یا Lists در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با لیست ها یا Lists در HTML
در این بخش از آموزش HTML میخواهیم با انواع لیست و نحوه استفاده از آن ها آشنا شویم، بطور کلی میتوان گفت در HTML ما ۳ نوع لیست داریم :
- لیست نامرتب یا Unordered list
- لیست مرتب یا Ordered List
- لیست دارای توضیحات یا Description List
Free-Learn
لیست های نامرتب در HTML
در این نوع لیست ها ترتیب قرار گرفتن آیتم ها مهم نیست، یعنی مهم نیست که کدام مقدار اولش نوشته شود و کدام آخر، پس بطور کلی لیست های نامرتب لیست هایی هستند که ترتیب قرار گرفتن آیتم ها در آنها مهم نیست.
ما در HTML با استفاده از تگ <ul> میتوانیم یک لیست نامرتب و با استفاده از تگ <li> آیتم های یک لیست نامرتب را ایجاد نماییم.
مثال شماره ۱ : ایجاد یک لیست نامرتب با استفاده از تگ ul
|
1 2 3 4 5 6 7 8 9 |
<body> <ul> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> </ul> </body> |
با کلیک بروی دکمه (امتحان کنید) اگر خروجی را مشاهده نمایید، میبینید که یک لیست از آیتم های ما ایجاد شده و در کنار هریک از آیتم ها یک گلوله دایره ای توپُر مشکی ایجاد شده است. ( لیست های نامرتب کلا بصورت پیش فرض کنار آیتم هاشون یه گلوله دایره ای توپُر مشکی قرار میگیرد )
Free-Learn
نوع علامت گذاری لیست های نامرتب در HTML
همانطور که در مثال قبلی مشاهده نمودید در حالت پیش فرض آیتم های لیست های نامرتب بصورت دایره توپُر مشکی در مرورگرها نمایش داده می شوند، حال ما میتونیم نوع علامت گذاری رو با استفاده از روش های زیر تغییر بدیم :
- استفاده از صفت Type در خوده تگ UL
- استفاده از ویژگی List-Style-Type از طریق زبان CSS
استفاده از صفت Type در خوده تگ UL
این صفت در HTML5 منسوخ شده هست و پشتیبانی نمیشه، یعنی الان ما ازش استفاده کنیم خب مشکلی نداره و نشون میده ولی خب اینکه میگم پشتیبانی نمیشه این یعنی ممکنه همین فردا مرورگرها بکل این صفت رو حذف کنن، بهمین دلیل شماهم سعی کنید از این صفت استفاده نکنید و از CSS بجای این صفت استفاده کنید.
شکل کلی برای استفاده از صفت type در تگ <ul> بصورت زیر می باشد :
|
1 2 3 4 |
<ul type="Value"> <li>...</li> <li>...</li> </ul> |
که بجای Value میتوانید از مقادیر زیر استفاده نمایید :
| مقدار | توضیح |
|---|---|
| disc | گزینه پیش فرض |
| circle | علامت آیتم ها بصورت دایره توخالی می شود |
| square | علامت آیتم ها بصورت مربع توپُر می شود |
| none | این گزینه باعث می شود آیتم ها هیچگونه علامت گذاری نداشه باشند |
مثال برای مقدار circle : بصورت دایره توخالی
|
1 2 3 4 5 6 7 8 9 |
<body> <ul type="circle"> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> </ul> </body> |
مثال برای مقدار square : بصورت مربع توپُر
|
1 2 3 4 5 6 7 8 9 |
<body> <ul type="square"> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> </ul> </body> |
مثال برای مقدار none : حذف علامت گذاری کنار آیتم ها
|
1 2 3 4 5 6 7 8 9 |
<body> <ul type="none"> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> </ul> </body> |
Free-Learn
لیست های مرتب در HTML
لیست های مرتب لیست هایی هستند که آیتم ها یا مقادیر آنها دارای ترتیب می باشند، در HTML برای ایجاد یک لیست مرتب باید از تگ <ol> و برای ایجاد آیتم های لیست از تگ <li> استفاده نماییم.
آیتم های لیست ها چه در نامرتب و چه مرتب میتوانند تصاویر،لینک و دیگر عناصر HTML هم باشند.
مثال شماره ۱ : ایجاد یک لیست مرتب شده با استفاده از تگ ol
|
1 2 3 4 5 6 7 8 9 |
<body> <ol> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> </ol> </body> |
در این نوع لیست ها نیز همانند لیست های نامرتب ما میتوانیم نحوه شماره گذاری آیتم ها را به دلخواه با استفاده از مقادیر زیر در صفت type تنظیم نماییم. ( ولی بازم میگم صفت Type منسوخ شده هس و ازش استفاده نکنید، بجاش از CSS مثال های کمی پایین تر استفاده کنید )
| مقدار | توضیح |
|---|---|
| ۱ | گزینه پیش فرض |
| A | شماره گذاری با حروف بزرگ انگلیسی |
| a | شماره گذاری با حروف کوچک انگلیسی |
| I | شماره گذاری با حروف بزرگ رومانی |
| i | شماره گذاری با حروف کوچک رومانی |
مثال برای مقدار A :
|
1 2 3 4 5 6 7 8 9 |
<body> <ol type="A"> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> </ol> </body> |
مثال برای مقدار a :
|
1 2 3 4 5 6 7 8 9 |
<body> <ol type="a"> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> </ol> </body> |
مثال برای مقدار I :
|
1 2 3 4 5 6 7 8 9 |
<body> <ol type="I"> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> </ol> </body> |
مثال برای مقدار i :
|
1 2 3 4 5 6 7 8 9 |
<body> <ol type="i"> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> </ol> </body> |
Free-Learn
نحوه علامت گذاری لیست ها با استفاده از صفت Style
کمی بالاتر اشاره کردم که صفت Type منسوخ شده هس و بهتره اصلا ازش استفاده نکنید، و باید از زبان CSS استفاده کنید.
حتما آموزش کامل کار با لیست ها در CSS را مشاهده نمایید.
در ادامه و در مثال زیر میتوانید مشاهده نمایید که میتوان با استفاده از صفت Style نوع علامت گذاری هر دو نوع لیست هارو ( هم مرتب هم نامرتب ) مشخص کرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> <ul style="list-style-type:circle;"> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> </ul> <ol style="list-style-type:upper-alpha;"> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> </ol> </body> |
Free-Learn
لیست های دارای توضیحات در HTML
HTML همچنین از لیست هایی که دارای توضیحات می باشند نیز پشتیبانی میکند، برای ایجاد یک لیست با توضیحات در HTML باید از تگ <dl> و برای ایجاد آیتم ها از تگ <dt> و برای ایجاد توضیحات از تگ <dd> استفاده کرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<body> <dl> <dt>Free-Learn</dt> <dd>» Is Free</dd> <dt>My Name</dt> <dd>» Is Sadegh</dd> <dt>My Family</dt> <dd>» Is Asadi</dd> </dl> </body> |
Free-Learn
مثال های بیشتر از لیست ها در HTML
مثال شماره ۱ : استفاده از عکس برای آیتم های یک لیست
|
1 2 3 4 5 6 7 8 9 |
<body> <ul> <li><img src="images/cat.gif"></li> <li><img src="images/cat.gif"></li> <li><img src="images/cat.gif"></li> </ul> </body> |
مثال شماره ۲ : ایجاد یک لیست تودرتو
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<body> <ul> <li>ONE</li> <li>TWO <ul> <li>Three</li> <li>Four <ul> <li>Five</li> <li>Six</li> </ul> </li> </ul> </li> <li>Seven</li> <li>Eight</li> </ul> </body> |
مثال شماره ۳ : استفاده از CSS برای خوشکل کردن لیست
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<style> body{ direction:rtl; } ul.MyList{ margin:0; padding:0; list-style-type:none; } ul.MyList li{ background-color:#f2f2f2; margin:5px 0; padding:5px 10px; border-radius:25px; } ul.MyList li a{ text-decoration:none; color:#000; } ul.MyList li:hover{ background-color:#123456; color:#fff; } ul.MyList li:hover a{ color:#fff; } </style> |
خب دوستان عزیز و محترم فری لرن به پایان این بخش ( آموزش کار با لیست ها یا Lists در HTML ) از سری آموزش های قدم به قدم زبان HTML رسیدیم، لطفا در بخش های بعدی همچنان با من همراه باشید.
