آموزش لیست های نامرتب ( با تگ Ul ) و لیست های مرتب ( با تگ Ol ) به صورت فیلم و متن
در این قسمت با آموزش لیستهای مرتب و لیستهای نامرتب در خدمت شما هستیم . در این قسمت از فیلم آموزشی اول با لیست مرتب و سپس با لیست نامرتب و در انتها با تگ های dd , dt , dl آشنا خواهید شد .
فیلم آموزش مربوط به لیست در HTML را می توانید در ویدیو زیر مشاهده بکنید :
لیست های نامرتب با استفاده از تگ ul
این تگ یک نوع تگ فرزند دار است و با استفاده از تگ li آیتم های این لیست رو مشخص می کنیم و به دلیل اینکه این آیتم ها هیچ ترتیبی رو مشخص نمی کنند ، به این دلیل به این ها لیست های نامرتب می گویند . برای توضیحات بیش تر کلیک کنید .
شناسه type در لیست های نامرتب
با استفاده از این شناسه می تونیم نوع علامت های مشخص کننده لیستهارو رو تعیین بکنیم ، این شناسه رو می تونیم در تگ li یا تگ ul قرار بدیم . مقادیر این شناسه اینها هستند :
circle : با استفاده از این شناسه مشخصه های لیستها یا آیکون ها به شکل دایره تو خالی یه کاربر نشون داده می شود .
disc : این شناسه ی پیش فرض لیستهای نامرتب است و مشخصه هارو به شکل دایره تو پر نشون میده .
square : این شناسه مشخصه رو به شکل مربع به کاربر نشون خواهد داد .
در سورس کد پایین همه این توضیحات رو می تونید ببینید ، در اینجا از شناسه Type در تگ ul و تگ li استفاده شده است :
<html> <head> <title> Web30ty </title> </head> <body> <ul type="square"> <li type="disc">Item 1</li> <li >Item 2</li> <li>Item 3</li> <li type="circle">Item 4</li> </ul> </body> </html>
لیست های مرتب با استفاده از تگ ol
تگ ol نیز یک تگ فرزند دار است و با استفاده از تگ li آیتم های آن مشخص می شود و در این لیست ترتیب رعایت می شود یعنی به هر کدام از ایتم ها یک عدد یا حروفی به صورت منظم نسبت داده می شود .
شناسه Type در لیست های مرتب
کاربردش همانند آنچه که در بالا گفته شده است ولی مقادیرش فرق می کند و به صورت زیر است :
1 : این مقدار پیش فرض است و لیستها را از عدد یک تا هر چندتا که آیتم داشته باشیم مشخص می کند .
A یا a : اگر Type رو برابر A (ای بزرگ) قرار بدیم شماره بندی لیست از A شروع می شود ، ولی اگر برابر a (ای کوچک) فرار بدیم با حرف a شروع خواهد شد .
I : این شناسه شماره های لیست رو به صورت حروف یونانی نشان می دهد .
در سورس کد زیر مطالب گفته شده را می توانید ببینید ، من در اینجا همه رو یک جا نوشتم ولی شما اگر خواستید می تونید فقط یکی از مقادیر Type استفاده کنید :
<html> <head> <title> Web30ty </title> </head> <body> <ol> <li type="1">Item 1</li> <li type="A">Item 2</li> <li type="a">Item 3</li> <li type="I">Item 4</li> <li type="i">Item 5</li> </ol> </body> </html>
لیست توصیفی با استفاده از تگ dl
<html> <head> <title> Web30ty </title> </head> <body> <dl> <dt> Web30ty </dt> <dd> سایت آموزش برنامه نویسی </dd> </dl> </body> </html>
در لیستهای توصیفی با استفاده از تگ dt عنوانی رو می نویسیم که می خواهیم در مورد آن توضیحی را بنویسیم و با استفاده از تگ dd توصیفی را در مورد آنچه در تگ dt نوشته ایم را می نویسیم .
