۲۰
مهر

جلسه ۱۷ : تگ های List در html

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در آموزشهایی که تاکنون در مباحث HTML ، ارائه دادیم. به مطالب مهمی از جمله استفاده از لینک ها در html ، اشاره کردیم. در ادامه ی دوره ، در این بخش قصد داریم به آموزش چگونگی کار با تگ های List در html یا لیست ها در html ، بپردازیم. در اکثر وب سایت ها، مخصوصا در محتویاتی نظیر مقالات علمی و آموزشهای کاربردی و … از لیست ها بسیار استفاده می شود.

در این بخش، به انواع تگ های مورد استفاده برای ایجاد لیست ، در سایت و کاربرد هر کدام در متن ، می پردازیم.

کار با تگ های List در html

مثال : لیست ها

<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

<h2>An Ordered HTML List</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>An Unordered HTML List</h2>

<ul>

<li>Coffee</li>

</ul>

<h2>An Ordered HTML List</h2>

<ol>

<li>Coffee</li>

</ol>

</body>

</html>

خودتان امتحان کنید »

در کد html، تگ های لیست ، انواع مختلفی دارد. که در ادامه به بررسی هر کدام می پردازیم.

لیست های بی نظم در html

لیست بی نظم در html با تگ <ul> شروع می شود و هر کدام از آیتم های آن با تگ <li> شروع می شود.

آیتم های این لیست، بطور پیش فرض با bullets علامت گذاری می شود.

مثال:

مثال : لیست های نامرتب

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul>

<li>Coffee</li>

</ul>

خودتان امتحان کنید »

تغییر دادن علامت آیتم ها در لیست های بی نظم

در اینگونه لیست ها با استفاده از ویژگی list-style-type می توانید ، نوع علامت آیتم ها را مشخص کنید:

مقادیر این ویژگی به شرح زیر است:

disc : علامتدار کردن آیتم ها با bullet (پی ش فرض)
circle : علامتدار کردن آیتم ها با دایره.
square : علامتدار کردن آیتم ها با مربع.
none : بدون علامت.

مثال: علامتدار کردن آیتم ها با استفاده از disc:

مثال : تغییر دادن علامت لیست ها

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<li>Coffee</li>

</ul>

خودتان امتحان کنید »

مثال ۲: با استفاده از circle:

مثال : انتخاب دایره به عنوان علامت

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<li>Coffee</li>

</ul>

خودتان امتحان کنید »

مثال ۳: با استفاده از square :

مثال : انتخاب مربع به عنوان علامت

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<li>Coffee</li>

</ul>

خودتان امتحان کنید »

مثال ۴: با استفاده از none :

مثال : لیست بدون علامت

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<li>Coffee</li>

</ul>

خودتان امتحان کنید »

لیست های منظم در html

لیست های منظم در html با تگ <ol> شروع می شوند ، هر کدام از آیتم های لیست ها نیز با تگ <li>شروع می شود.

مثال:

مثال : لیست های منظم

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol>

<li>Coffee</li>

</ol>

خودتان امتحان کنید »

انواع صفات در لیست های منظم (<ol>)

“type=”1 : آیتم های لیست ، با اعداد شماره گذاری می شود.
“type=”A : آیتم های لیست، با حروف بزرگ علامتگذاری می شود.
“type=”a :آیتم های لیست، با حروف کوچک علامتگذاری می شود.
“type=”I : آیتم های لیست با اعداد رومی بزرگ شماره می شود.
“type=”i :آیتم های لیست با اعداد رومی کوچک شماره می شود.

مثال : شماره گذاری آیتم ها با اعداد:

مثال : صفت type

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<li>Coffee</li>

</ol>

خودتان امتحان کنید »

مثال ۲:علامتگذاری آیتم های با حروف بزرگ:

مثال : علامت گذاری با حروف بزرگ

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<li>Coffee</li>

</ol>

خودتان امتحان کنید »

مثال ۳:علامتگذاری آیتم های با حروف کوچک:

مثال : علامتگذاری با حروف کوچک

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<li>Coffee</li>

</ol>

خودتان امتحان کنید »

علامتگذاری با اعداد رومی بزرگ:

مثال : اعداد رومی بزرگ

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<li>Coffee</li>

</ol>

خودتان امتحان کنید »

علامتگذاری با اعداد رومی کوچک:

مثال : علامتگذاری با اعداد رومی کوچک

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<li>Coffee</li>

</ol>

خودتان امتحان کنید »

لیست های توصیفی

لیست های های توصیفی مجموعه ای از اصطلاحات هستند، که هر کدام از اصطلاحات را توصیف می کنند.

تگ <dl> لیست توصیفی را تعریف می کند. تگ <dt> اصطلاحات لیست توصیفی را تعریف می کند. و تگ <dd> برای توصیف همه ی اصطلاحات ، کاربرد دارد.

مثال:

مثال : لیست های توصیفی

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

خودتان امتحان کنید »

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

در html لیست ها، بصورت تودرتو نیز می تواند تعریف شود.

مثال:

مثال : لیست های تودرتو

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

</ul>

خودتان امتحان کنید »

کنترل شمارشگر لیست

در لیست های منظم ، آیتم ها، از عدد ۱ شروع می شوند، شما می توانید با استفاده از صفت start ، عدد شروع شمارش آیتم ها، را تغییر بدهید.

مثال:

مثال : کنترل شمارشگر لیست

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<li>Coffee</li>

</ol>

خودتان امتحان کنید »

لیست های افقی در html

در html ، با استفاده از کدهای css (برای آشنایی بیشتر با نحوه استفاده از css در html می توانید به آموزشهای کامل css ، مراجعه کنید)، می توانید لیست ها را در صفحه وب بصورت افقی نمایش دهید. این ویژگی در موارد بسیاری از جمله ایجاد منو برای وب سایت کاربرد دارد.

مثال:

مثال : لیست های افقی

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333333;

}

li {

float: left;

}

li a {

display: block;

color: white;

text-align: center;

padding: 16px;

text-decoration: none;

}

li a:hover {

background-color: #111111;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

خودتان امتحان کنید »

خلاصه ی بخش

از المان <ul> برای تعریف فهرست غیر ارادی استفاده کنید
از ویژگی style برای تعیین لیست مارک مورد استفاده استفاده کنید
از المان <ol> برای تعریف فهرست دستورالعمل استفاده کنید
از نوع صفت HTML برای تعریف نوع شماره استفاده کنید
از المان <li> برای تعریف یک مورد لیست استفاده کنید
از المان <dl> برای تعریف یک لیست توضیحات استفاده کنید
برای تعیین اصطلاح توضیح از عنصر <dt> استفاده کنید
از عنصر <dd> برای توصیف اصطلاح در یک لیست توضیح استفاده کنید
لیست ها را می توان در داخل یکدیگر قرار داد
اقلام لیست می تواند شامل سایر عناصر HTML باشد
از ویژگی float:left یا display:inline استفاده کنید: سمت چپ یا صفحه نمایش، درون خطی برای نمایش یک لیست به صورت افقی.

کلام آخر

در اغلب محتوای وب سایت ها ، خصوصا محتوای علمی و آموزشی از لیست ها به فراوانی استفاده می شود، از این رو آشنایی با طرز کار و تنظیم تگ های List در html از مباحث مهم محسوب می شود.

به اشتراک بگذارید

آموزش CSS ,آموزش css و css3 ,آموزش لیست ها در html ,جاوااسکریپت در HTML ,کار با تگ های list ,کاربرد تگ های list در html

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۷ : تگ های List در html

مقدمه

کار با تگ های List در html

لیست های بی نظم در html

تغییر دادن علامت آیتم ها در لیست های بی نظم

لیست های منظم در html

انواع صفات در لیست های منظم (<ol>)

لیست های توصیفی

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

کنترل شمارشگر لیست

لیست های افقی در html

خلاصه ی بخش

کلام آخر

لیست مطالب دوره

آموزش HTML

فرم در HTML

HTML5

گرافیک در HTML

چند رسانه ای در html

APIs در HTML

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ