آموزش چگونگی اطلاع از روت بودن گوشی اندرویدی با برنامه Root Checker Basic
بهمن ۱, ۱۳۹۴
گوگل پلی ۲ برابر بیشتر از اپ استور دانلود داشته است
بهمن ۱, ۱۳۹۴
در این جلسه به نحوه ی ایجاد لیست های مرتب و نامرتب و همچنین لیست هایی با قابلیت توصیف در HTML خواهیم پرداخت. با مدیاسافت همراه باشید.
ایجاد لیست در HTML
در HTML دو نوع لیست وجود دارد :
1- لیست های مرتب شده یا Ordered List
2- لیست های نامرتب یا Unordered List
ایجاد لیست های نامرتب یا Unordered List در HTML
یک Unordered List را می توان با استفاده از تگ <ul> تعریف کرد. آیتم های لیست نیز در داخل تگ <li> قرار می گیرند. در این نوع لیست ، آیتم ها در کنار یک دایره ی توپر قرار می گیرند ؛ مانند خاصیت Bullets در Word . البته به جای دایره ی توپر می توان از نشانه های دیگری نیز استفاده کرد که در ادامه به توضیح آن ها نیز می پردازیم. به مثال زیر توجه کنید .
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
خروجی
همانطور که مشاهده می کنید ، آیتم ها در بین تگ <li> نوشته شده اند و تگ <ul> همانند تگ <table> ، یک تگ مادر است.
حال به معرفی نشانه هایی که می توانند در کنار آیتم های لیست قرار گیرند می پردازیم :
با استفاده از صفت style و خاصیت list-style-type می توان ای نشانه ها را تغییر داد. انواع این style ها به شکل زیر هستند :
list-style-type:disc : اگر از این style استفاده کنیم ، نشانه ای به شکل دایره ای توپر در کنار آیتم های لیست قرار می گیرد. حالت پیش فرض به همین شکل است.
list-style-type:circle : با استفاده از این style ، دایره ای توخالی در کنار آیتم های لیست قرار می گیرد.
list-style-type:square : با استفاده از این style ، مربع های توپر در کنار آیتم های لیست قرار می گیرند.
list-style-type:none : اگر از این style استفاده کنیم ، هیچ نشانه ای در کنار آیتم های لیست قرار نمی گیرد.
نکته : دقت کنید که صفت style در تگ مادر یعنی <ul> نوشته می شود.
مثال : در این مثال هر چهار نوع style ، برای لیست های نامرتب گنجانده شده است.
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List</h2>
<ul style=”list-style-type:disc”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style=”list-style-type:circle”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style=”list-style-type:square”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style=”list-style-type:none”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
خروجی
در مثال بالا به جای استفاده از صفت style ، می توان از صفت type استفاده کرد . درست است که صفت style یک CSS داخلی است و type یک صفت HTML ، اما چون ما در این سری از آموزش ها قصد داریم HTML5 را آموزش دهیم ، تا جایی که امکان دارد از CSS استفاده می کنیم . در خروجی زیر از صفت type استفاده شده است که شما علاقه مندان با این صفت نیز آشنا شوید.
لیست های مرتب یا Ordered List در HTML
لیست های مرتب در HTML با استفاده از تگ مادر <ol> تعریف می شوند. هر آیتم نیز در داخل تگ <li> قرار می گیرد. در این نوع لیست ها ، آیتم ها را می توان با استفاده از اعداد ، حروف انگلیسی کوچک و بزرگ و یا اعداد رومی ، به صورت منطقی شماره بندی کرد.
به مثال زیر توجه کنید
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
خروجی
همانطور که مشاهده می کنید ، آیتم های لیست به ترتیب شماره بندی شده اند.
حال به معرفی انواع این شماره بندی های منظم می پردازیم :
با استفاده از صفت type می توان نوع این شماره بندی یا مرتب سازی را تعیین کرد که هریک از مقادر این صفت را در زیر توضیح داده ایم.
1 : اگر مقدار type را برابر با 1 قرار دهیم ، لیست بر اساس اعداد شماره گذاری می شود.
A : اگر مقدار type را برابر با A قرار دهیم ، لیست بر اساس حروف انگلیسی بزرگ شماره گذاری می شود.
a : اگر مقدار type را برابر با a قرار دهیم ، لیست بر اساس حروف انگلیسی کوچک شماره گذاری می شود.
I : اگر مقدار type را برابر با I قرار دهیم ، لیست بر اساس اعداد رومی باحروف بزرگ شماره گذاری می شود.
i : اگر مقدار type را برابر با i قرار دهیم ، لیست بر اساس اعداد رومی باحروف کوچک شماره گذاری می شود.
نکته : صفت دیگری نیز برای لیست های مرتب وجود دارد با نام start . با استفاده از این صفت می توان لیست را با عدد یا حروفی که مورد نظر است شروع کرد.
مثال : در این مثال تمامی مواردی که توضیحات آن ها در بالا داده شده است ، گنجانده شده است.
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List</h2>
<ol type=”1″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type=”A”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type=”a”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type=”I”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type=”i”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type=”1″ start=”15″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
خروجی
همانطور که مشاهده می کنید ، در لیست آخری که ایجاد کردیم ، مقدار صفت start را برابر با 15 قرار دادیم که باعث شد لیست از 15 شماره گذاری شود.
ایجاد لیست توصیفی یا Description List در HTML
در HTML نوعی لیست وجود دارد که می توان برای هریک از آیتم های لیست یک یا چند توضیح قرار داد . این نوع لیست ها را می توان با استفاده از تگ <dl> که یک تگ کلیدی است ایجاد کرد. تگ <dt> برای تعریف آیتم و تگ <dd> نیز برای توصیف آیتم مورد نظر به کار می رود.
مثال
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dd>- Very Good !</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
خروجی
همانطور که مشاهده می کنید، برا آیتم اول یعنی Coffee ، دو تا توضیح وجود دارد . بنابراین ما از دو تگ <dd> برای آن استفاده کردیم.
نکته : آیتم های لیست می توانند شامل هرعنصری مانند لینک ، تصویر ، لیست جدید و… باشند.
پایان جلسه ی یازدهم
