آموزش List در HTML
در این جلسه به آموزش آآموزش List در HTML خواهیم پرداخت, لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
HTML سه روش برای مشخص کردن لیست هایی از اطلاعات ارائه می دهد. تمام لیست ها باید شامل یک یا بیشتر ازیک عنصر باشند. لیست ها ممکن است شامل موارد زیر شوند.
<ul> لیست بدون ترتیب. این لیست آیتم ها را با استفاده از bullet های ساده لیست می کند.
<ol> لیست منظم. این لیست از نمودارهای عددی مختلف برای لیست کردن آیتم های شما استفاده می کند.
<dl> لیست تعریف. این لیست آیتم های شما را به همان روشی که در دیکشنری منظم شده اند، منظم می کند.
لیست های بدون ترتیب HTML
لیست بدون ترتیب مجموعه ای از آیتم های مربوط به هم می باشد که هیچگونه نظم و ترتیب خاصی ندارند. این لیست با استفاده از برچسب<ul> در HTML ایجاد می شود. هر آیتم در لیست با یک bullet مشخص می شود.
مثال
<!DOCTYPE html> <html> <head> <title>HTML Unordered List</title> </head> <body> <ul> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </body> </html>
ویژگی type
می توانید از ویژگی type برای برچسب <ul> استفاده کنید تا نوع bullet خود را مشخص کنید، که به طور پیش فرض یک دیسک می باشد. در زیر گزینه های ممکن را مشاهده می کنید.
<ul type="square"> <ul type="disc"> <ul type="circle">
در زیر مثالی را میبینید که در آن از <“square=”type ul> استفاده می کنیم.
<!DOCTYPE html> <html> <head> <title>HTML Unordered List</title> </head> <body> <ul type="square"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </body> </html>
در زیر مثالی را می بینید که در آن از <“disc=”type ul> استفاده کرده ایم.
<!DOCTYPE html> <html> <head> <title>HTML Unordered List</title> </head> <body> <ul type="disc"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </body> </html>
در زیر مثالی را می بینید که در آن از <“circle=”type ul <استفاده کرده ایم.
<!DOCTYPE html> <html> <head> <title>HTML Unordered List</title> </head> <body> <meta http-equiv="content-type" content="text/html; charset=utf-8">لرن پارسی یک بستر انتشار آنلاین متشکل از محتوای آموزشی و کاربردی در موضوعات مختلف می باشد و هدفش رفع چالش های آموزشی شما در موضوعات کلیدی متنوع در سریع ترین زمان ممکن است . لرن پارسی دارای مجوزهای ثبت می باشد و مجموعه ما مخاطب را در اولویت اول خود قرار خواهد داد. <ul type="circle"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </body> </html>
لیست های منظم HTML
اگر تمایل دارید آیتم های خود را به جای قرار دادن در یک لیست دارای bullet ،در یک لیست عددگذاری شده قرار دهید، می توانید از لیست منظم HTML استفاده کنید. این لیست با استفاده از برچسب <ol> ایجاد می شود. شماره گذاری از یک شروع شده و برای هر لیست منظم عنصر بعدی با اضافه شدن یک عدد و به همراه برچسب <li> اضافه می شود. می توانید از ویژگی type برای برچسب <ol> استفاده کنیم تا نوع شماره گذاری مورد نظر خود را مشخص کنید. به طور پیش فرض شماره گذاری به وسیله ی عدد انجام می شود. در زیر گزینه های ممکن را مشاهده می کنید.
<ol type="1"> - Default-Case Numerals. <ol type="I"> - Upper-Case Numerals. <ol type="i"> - Lower-Case Numerals. <ol type="a"> - Lower-Case Letters. <ol type="A"> - Upper-Case Letters.
در زیر مثالی را می بینید که در آن از <“۱=”type ol> استفاده کرده ایم.
<!DOCTYPE html> <html> <head> <title>HTML Ordered List</title> </head> <body> <ol type="1"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> </html>
در زیر مثالی را می بینید که در آن از <“I=”type ol> استفاده می کنیم.
<!DOCTYPE html> <html> <head> <title>HTML Ordered List</title> </head> <body> <ol type="I"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> </html>
در زیر مثالی را میبینید که در آن از <“i=”type ol> استفاده کرده ایم.
<!DOCTYPE html> <html> <head> <title>HTML Ordered List</title> </head> <body> <ol type="i"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> </html>
در زیر مثالی را می بینید که در آن از <“A=”type ol> استفاده کرده ایم.
<!DOCTYPE html> <html> <head> <title>HTML Ordered List</title> </head> <body> <ol type="A"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> </html>
در زیر مثالی را می بینید که در آن از<“a=”type ol> استفاده کرده ایم.
<!DOCTYPE html> <meta http-equiv="content-type" content="text/html; charset=utf-8">لرن پارسی یک بستر انتشار آنلاین متشکل از محتوای آموزشی و کاربردی در موضوعات مختلف می باشد و هدفش رفع چالش های آموزشی شما در موضوعات کلیدی متنوع در سریع ترین زمان ممکن است . لرن پارسی دارای مجوزهای ثبت می باشد و مجموعه ما مخاطب را در اولویت اول خود قرار خواهد داد. <html> <head> <title>HTML Ordered List</title> </head> <body> <ol type="a"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> </html>
ویژگی start
شما می توانید از ویژگی start برای برچسب <ol> استفاده کنید تا نقطه ی شروع شماره گذاری خود را مشخص کنید. در زیر گزینه های ممکن را مشاهده می کنید.
<ol type="1" start="4"> - Numerals starts with 4. <ol type="I" start="4"> - Numerals starts with IV. <ol type="i" start="4"> - Numerals starts with iv. <ol type="a" start="4"> - Letters starts with d. <ol type="A" start="4"> - Letters starts with D.
در زیر مثالی را می بینید که در آن از < “۴=”start” i=”type ol> استفاده می کنیم
<!DOCTYPE html> <html> <head> <title>HTML Ordered List</title> </head> <body> <ol type="i" start="4"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> </html>
لیست های تعریف HTML
HTML و XHTML لیست هایی به نام لیست های تعریف را پشتیبانی می کنند که در این لیست ها ورودی ها مانند ترتیب لغات در دیکشنری قرار می گیرند. این لیست یک روش ایده آل برای ارائه یک فهرست از معانی یا لیستی از اصطلاحات یا لیستی از نام ها و مقادیر می باشد.
لیست تعریف از برچسب زیر استفاده می کند.
<dl> شروع لیست را تعریف می کند.
مثال
<!DOCTYPE html> <html> <head> <title>HTML Definition List</title> </head> <body> <dl> <dt><b>HTML</b></dt> <dd>This stands for Hyper Text Markup Language</dd> <dt><b>HTTP</b></dt> <dd>This stands for Hyper Text Transfer Protocol</dd> </dl> </body> </html>
ممنون که در این جلسه هم با ما همراه بودید در این جلسه به یادگیری آموزش List در HTML پرداخته شد. در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید
دیدگاه ها