لیست ها در HTML و بررسی انواع آن به همراه فیلم آموزشی

در این قسمت از آموزش به مبحث لیست ها در HTML و به بررسی انواع لیست ها خواهیم پرداخت و اینکه چگونه و به چه نحوی از آنها در طراحی سایت استفاده کنیم

لیست ها در HTML

یکی از مهم ترین تگ های اچ تی ام ال که در طراحی سایت به وفور از آن استفاده می شود تگ های ol و ul و ادغام آن با تگ li است.

انواع لیست ها در HTML که در طراحی سایت از آن استفاده می شود

لیست های ترتیبی (Ordered List)
لیست های غیر ترتیبی (Unordered List)
لیست های تعریفی (Description List)

لیست های ترتیبی (Ordered List)

که از آنها به عنوان لیست های مرتب نیز یاد می شود، این لیست را با تگ شروع و پایان ol و هر آیتم را با تگ li تعریف می کنند
در این لیست هر آیتم قابل شماره گذاری است، که نوع شماره گذاری را میتوان با استفاده از attribute به نام type مشخص کرد که اکنون به بررسی انواع آن میپردازیم

انواع لیست های ترتیبی (Ordered List)

  • “۱”= type : که در صورت قرار ندادن اتربییوت type این مقدار پیش فرض جایگزین می شود و شروع آن از عدد یک می باشد.
  • “type = “A : نحوه نمایش هر آیتم به ترتیب از حروف بزرگ انگلیسی آغاز می شود.
  • “type = “a : نحوه نمایش هر آیتم به ترتیب از حروف کوچک انگلیسی آغاز می شود.
  • “type = “I : هر آیتم به صورت اعداد رومی بزرگ به ترتیب شماره گذاری می شود.
  • “type = “i : هر آیتم به صورت اعداد رومی کوچک به ترتیب شماره گذاری می شود.

شما میتوانید با استفاده از اتریبیوت start تعیین کنید که شماره گذاری از چه عددی شروع شود.
به عنوان مثال در کد زیر زیر ما تعیین میکنیم شماره گذاری از عدد ۴۶ شروع شود.

لیست های غیر ترتیبی (Unordered List)

نام دیگر این نوع لیست، لیست های نامرتب است که با استفاده از تگ شروع و پایان ul تعریف می شود و هر آیتم آن را با استفاده از تگ li مشخص می کنند.
بر خلاف لیست های ترتیبی قابل شماره گذاری نیستند و هر آیتم آن با استفاده از اشکال هندسی تعریف می شود.
نوع اشکال هندسی هر آیتم را می‌توان با استفاده از attribute به نام type مشخص نمود.

انواع لیست های غیر ترتیبی (Unordered List)

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

لیست های تعریفی (Description List)

یا همان Definition List که مشخص می کند هر آیتم یک توضیحی دارد.

برای تعریف لیست های تعریفی از تگ شروع و پایان dl استفاده کرده و عنوان آیتم را با تگ dt و هر آیتم را با تگ dd نمایش می دهیم.

 

شما میتوانید فیلم آموزشی این قسمت را با لینک مستقیم دانلود کنید.