پاسخ وردپرس

آموزش کار با لیست ها یا Lists در HTML

بهمن ۱۷, ۱۳۹۸
ارسال شده توسط:
202 بازدید
۰

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

تگ های List در html

همانطور که پیش تر گفتیم، در HTML برای ایجاد هر خاصیتی از تگ های استاندارد و تعریف شده ی خاصی استفاده می شود که بنا بر نیاز سنجی، توسط کنسرسیوم جهانی وب (w3c) تعریف شده اند،
یکی از این نیاز ها، امکان ایجاد مطالب و محتوا، به صورت لیست شده و زیرمجموعه ای است که w3c برای آن تگ های استاندارد ul li ol dl dd و dt را در نظر گرفته است،
این تگ ها همه از یک خانواده هستند که برای ایجاد و مدیریت لیست در صفحات وب کاربرد دارند،
از این رو در ادامه آموزش های مقدماتی HTML، این بار می خواهیم بپردازیم به مبحث کار با تگ های ایجاد کننده لیست در صفحات وب.

آموزش کار با لیست ها یا Lists در HTML

آموزش لیست در html

لیست ها به سه دسته منظم ، توضیحی و نامنظم تقسیم می شوند.

لیست های نامنظم(تگ ul)

این لیست ها با تگ ul آغاز می شوند و در داخل آن تگ li قرار می گیرد به کد های html  زیر نگاه کنید.

به مثال زیر توجه کنید و نتیجه اجرای کدها را ببینید تا به صورت واضح با تگ ul  در html آشنا شوید :

خرجی کد ها مثل تصویر زیر میباشد

دوست عزیز پیشنهاد میشه این مطلب را هم ببینید
آموزش border در css

  • لیست غیر شمارشی یا نامرتب: برای نمایش این لیست از تگ <ul></ul> استفاده می کنیم. برای ایجاد منو از این تگ استفاده می شود.

به طور پیش فرض هر کدام از آیتم های لیست های نامنظم (تگ li ) دارای یک نشانگر می باشد.

تگ <ol> در HTML

  • تگ <ol> یک لیست مرتب را تعریف می کند. که آن لیست مرتب می تواند بر حسب عددی یا الفبایی مرتب شود.
  • از تگ <li> نیز در درون لیست های مرتب تگ <ol> برای ساخت آیتم های لیست مرتب استفاده می کنیم.
  • از تگ <li> به عنوان آیتم لیست ها در لیست های ترتیبی <ol> ،
  • لیست های غیر ترتیبی <ul> ، و در فهرست منو <menu> استفاده می شود.

لیست های منظم ( تگ ol)

این لیست ها با تگ ol آغاز می شوند و آیتم آن نیز با تگ li ، تفاوت این لیست با لیست نامنظم در نشانگر آن است لیست های نامنظم نشانگر همه آیتم ها یکی است ولی در لیست های منظم ،
آیتم ها یا دارای شماره منحصر به فرد یا الفبای منحصر به فرد می باشد به مثال زیر نگاه کنید:

آموزش کار با لیست ها یا Lists در HTML

به مثال زیر توجه کنید و نتیجه اجرای کدها را ببینید تا به صورت واضح با تگ ol در html آشنا شوید :

خرجی کد ها مثل تصویر زیر میباشد

دوست عزیز پیشنهاد میشه این مطلب را هم ببینید
آموزش کار با رنگ ها یا Colors در HTML

بررسی تگ <ol> در HTML 4.01 و HTML5

  • تگ <ol> در هر دو نسخه HTML 4.01 و HTML5 پشتیبانی می شود.
  • اما خصوصیت های ویژه start ، type و compact در HTML5 پشتیبانی نمی شوند.
  • خصوصیت ویژه reversed درون تگ <ol>
  • به عنوان یک خصوصیت ویژه تگ <ol> در HTML5 جدید است.

تعریف صفت برای تگ ol یا لیست شمارشی

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

تعریف صفت برای تگ ul یا لیست شمارشی

  • ایجاد نقطه های تو خالی با مقدار circle برای type.
  • ایجاد نقطه های تو پر با مقدار disc برای type.
  • ایجاد نقطه های مربعی با مقدار square برای type.

آموزش کار با لیست ها یا Lists در HTML

تگ dl در HTML

تگ dl که از کلمه ( Description List ) گرفته شده است، تگی است که با استفاده از آن میتوان یک لیست تعریفی یا لیست دارای توضیحات ایجاد نمود.

ما برای ایجاد یک لیست توضیحی ، باید از تگ dl و برای ایجاد آیتم های لیست از تگ dt و در نهایت برای ایجاد توضیحات از تگ dd استفاده نماییم.

دوست عزیز پیشنهاد میشه این مطلب را هم ببینید
آموزش ساخت image map در html

مثال از تگ dl در HTML

لیست در html

  • تگ <dd> توصیف یک واژه یا نام را در یک فهرست توصیفی مشخص میکند و در ارتباط با <dl> و <dt> استفاده می شود.
  • تگ <dl> : فهرست توصیفی تعریف می کند.
  • تگ <dt> : یک واژه یا نام را در فهرست توصیفی تعریف میکند.
  • در داخل تگ <dd> می توانید پاراگراف ، شکست خط ( br ) ، عکس ، لینک ، لیست ، و غیره قرار دهید.
  • یک لیست توصیفی شبیه به لیست های دیگر است، اما هر آیتم در لیست شامل دو یا چند واژه یا توصیف است .
  • لیست توصیفی می تواند در مورد فهرست ساخته شده تک به تک توضیح دهد.
  • به عبارت دیگر ترکیبی از تگ های <dl> , <dt> و <dd> یک لیست توصیفی می سازد.

پایان این جلسه آموزش html

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

اشتراک گذاری:

حتما" بخوانید پیشنهاد سون ریپلای

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نماد های اعتماد

سون ریپلای به استناد نماد های زیر ، دارای مجوز رسمی از مراجع مربوطه در جمهوری اسلامی ایران می باشد !

درگاه سامان
درگاه به پرداخت