۶
مهر

جلسه ۲۱ : تگ های لیست (List) در HTML – قسمت۱

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

جزئیات
نوع محتوافیلم آموزشی

قیمت149,000 تومان

افزودن به سبد خرید

فهرست

مقدمه

با جلسه بیست و یکم از آموزش html در خدمت شما هستیم در این آموزش می خواهیم به مبحث لیست ها در html بپردازیم و ببینیم تگ های لیست (List) در 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

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

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

<ul>

<li>Coffee</li>

</ul>

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

لیست های منظم

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

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

<ol>

<li>Coffee</li>

</ol>

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

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

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

<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>

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

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

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

<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>

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

لیست های افقی در 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="#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>

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

جمع بندی

در بالا انواع لیست ها را برای شما قرار داده ایم نی توانید توضیحات آن را ویدیوی دوره مشاه نمایید.

توجه

این مطلب یک جلسه از آموزش طراحی وب می باشد که برای مشاهده کامل ویدیو های آموزشی و فایل های آن باید در دوره ثبت نام کنید.

ثبت نام در دوره

QR: جلسه ۲۱ : تگ های لیست (List) در HTML – قسمت۱

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

تگ ها در html ,تگ های لیست در HTML

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

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

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

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

جلسه ۲۱ : تگ های لیست (List) در HTML – قسمت۱

مقدمه

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

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

لیست های منظم

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

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

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

جمع بندی

توجه

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

فصل اول : مقدمه و مفاهیم پایه دنیای وب

فصل دوم : مراحل آماده سازی و آشنایی با ابزارهای مورد نیاز

فصل سوم : قواعد نوشتاری و مفاهیم زبان های html و css

فصل چهارم : رنگ ها و اندازه ها در html

فصل پنجم : توضیحات در مورد تگ های html - html5 و نحوه کاربرد آنها

فصل ششم : قواعد نوشتاری و مفاهیم زبان CSS

فصل هفتم : سلکتورها در CSS

فصل هشتم : ویژگی های در CSS

فصل نهم : مفاهیم و آموزش های پیشرفته

فصل دهم : مباحث پایانی و جمع بندی بخش آموزش

فصل یازدهم : پروژه پایانی (فورس نیوز)

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ