۷
آذر

جلسه ۱۱۶ : آموزش کار با تگ ul در HTML

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

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

فهرست

مقدمه

سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTML کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه قبل با تگ u آشنا شدیم و با کاربرد آن در HTML آشنا شدیم؛ از تگ u برای نشان دادن متن های متفاوت استفاده می شود.
در این جلسه قرار است به سراغ آموزش کار با تگ ul در HTML می رویم.

آموزش کار با تگ ul در HTML

به مثال زیر توجه نمایید.
در این مثال یک لیست نامرتب در HTML را مشاهده می نمایید:

مثال :

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

<ul>

<li>Coffee</li>

</ul>

تعریف و کاربرد

تگ ul تگی است که یک لیست غیر ترتیبی یا نامرتب (به صورت گلوله) را تعریف می کند.
برای ایجاد لیست های نامرتب از تگ ul به همراه تگ li استفاده کنید.

پشتیبانی مرورگرها

عنصر
<ul>	بله	بله	بله	بله	بله

نکات و توصیه ها

توصیه

برای ایجاد لیست های مرتب شده ، از تگ ol استفاده کنید.

تفاوت بین HTML 4.01 و HTML5

خصیصه های “compact” و “type” در HTML5 پشتیبانی نمی شوند.

خصیصه ها

خصیصه	مقدار	توضیحات
compact	compact	این خصیصه مشخص می کند که لیست باید کوچکتر از حالت عادی و به صورت فشرده باشد. این خصیصه در HTML5 پشتیبانی نمی شود.
type	disc square circle	این خصیصه نوع نشانگر استفاده در لیست را مشخص می کند. این خصیصه در HTML5 پشتیبانی نمی شود.

خصیصه های سراسری Global Attributes

تگ <ul> از خصیصه های سراسری در HTML پشتیبانی می کند.

خصیصه رویداد Event Attributes

تگ <ul> از خصیصه رویداد در HTML پشتیبانی می کند.

مثال های تکمیلی

مثال یک

یک لیست تو در تو (یک لیست در داخل یک لیست):

مثال :

<!DOCTYPE html>
<html>
<body>

<h4>A list inside a list:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h4>A list inside a list:</h4>

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

</ul>

</body>

</html>

مثال دو

یک لیست تو در تو دیگر (نمایش لیست های تو در توی پیچیده تر):

مثال :

<!DOCTYPE html>
<html>
<body>

<h4>Lists inside a list:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h4>Lists inside a list:</h4>

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea

<ul>

<li>China</li>

<li>Africa</li>

</ul>

</li>

</ul>

</li>

</ul>

</body>

</html>

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <ul> را با مقادیر پیش فرض زیر نمایش می دهند:

مثال :

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

ul {

display: block;

list-style-type: disc;

margin-top: 1em;

margin-bottom: 1 em;

margin-left: 0;

margin-right: 0;

padding-left: 40px;

}

کلام آخر

در این جلسه به آموزش کار با تگ ul در HTML پرداختیم؛ به طور خلاصه تگ ul تگی است که یک لیست غیر ترتیبی یا نامرتب را تعریف می کند.
در جلسه آینده با آموزش تگ var همراه شما خواهیم بود.
با پی وی لرن همراه باشید.

QR: جلسه ۱۱۶ : آموزش کار با تگ ul در HTML

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

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

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

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

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

جلسه ۱۱۶ : آموزش کار با تگ ul در HTML

مقدمه

آموزش کار با تگ ul در HTML

تعریف و کاربرد

پشتیبانی مرورگرها

نکات و توصیه ها

توصیه

تفاوت بین HTML 4.01 و HTML5

خصیصه ها

خصیصه های سراسری Global Attributes

خصیصه رویداد Event Attributes

مثال های تکمیلی

مثال یک

مثال دو

تنظیمات پیش فرض CSS

کلام آخر

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ