در جلسه پنجم با نحوه اضافه کردن عکس به صفحات آشنا شدیم و حالا در این جلسه قصد داریم تا نحوه قرار دادن انواع لیست‌ در html را آموزش دهیم.

در این جلسه قصد داریم تا با آموزش استفاده از انواع لیست‌ها، چند قدمی شما را به سمت تبدیل شدن به یک برنامه نویس سمت کاربر نزدیک‌تر کنیم! با توکاپس همراه باشید و با تمرین و تلاش به راحتی به یک برنامه نویس تبدیل شوید.

انواع لیست‌ در html

کاربرد انواع لیست‌ در html بسیار گسترده است؛ چرا که از منوها گرفته تا بسیاری از المان‌های منظم دیگر صفحه توسط لیست‌ها ایجاد می شوند.
لیست ها در وب تقریبا در دو دسته اصلی طبقه بندی می شوند، لیست های شماره ای (لیست هایی که در ابتدای آیتم های آن شماره قرار می گیرد و به صورت خودکار مرتب می شوند) که به آنها در اصطلاح ordered یا سفارشی و مرتب شده می گویند.

لیست هایی که بدون شماره بوده و به جای آن، از علائم دیگر نظیر نقطه های مشکی تو پُُر یا تو خالی و… استفاده می شود، به این نوع لیست ها، unordered یا نامرتب می گویند که البته برخلاف نام آن، تفاوت عمده این دو لیست، تنها در شمار دار بودن یا نبودن آیتم های آنها است. بنابراین انواع لیست عبارتند از:

  • unorderd list یا لیست بدون نظم که دارای ترتیب دلخواه است.
  •  orderd list یا لیست منظم و دارای ترتیب است. مثلا چنین لیستی بر اساس اعداد یا حروف الفبا مرتب می‌شود.

 Unorderd List

مرحله اول: برای ساخت یک لیست، باید یک تگ <ul> باز کنیم. بدین ترتیب اعلام می‌کنیم که می‌خواهیم یک لیست نامنظم یا همان Unorderd List ایجاد کنیم.

شاید از این مقاله خوشتون بیاد:  آموزش گام به گام html_قسمت پنجم:تصاویر

مرحله دوم: سپس  متن هر آیتم لیست را بین <li> متن آیتم <li/> باز  متن مورد نظر را بین آن می‌نویسیم.

مرحله سوم: در آخر <ul/> را می‌نویسیم تا تگ بسته شود.

اگر لیست‌های اچ تی ام ال را دیده باشید, خواهید دید که در این لیست‌ها یک علامت(معمولا دایره تو پر) قرار می‌گیرد.در لیست‌ها امکان تغییر آیکونی که در کنار هر آیتم قرار می‌گیرد وجود دارد. اتریبیوت list-style-type این کار را برای شما انجام می‌دهد. برای اینکار باید به تگ ابتدایی <ul> این اتریبیوت را اضافه کنید و آیکون مورد نظر را بنویسید.

<ul type=”آیکون مورد نظر”>

لیست موارد قابل استفاده به عنوان آیکون در لیست‌ها به ترتیب زیر است:

  •  disc : در واقع همان دایره‌های تو پر پیش فرض هستند. نمونه: <“ul style= “list-style-type: disc>
  • circles: در این حالت آیتم‌های لیست شما با دایره به نمایش در خواهد آمد.
  • squares: در این حالت آیتم‌های لیست شما به صورت مربع نشان داده خواهند شد.
  • none: در این حالت در کنار آیتم‌های لیست آیکونی وجود نخواهد داشت.

برای مثال به لیست نامنظم زیر توجه نمایید.

<ul>

<li>متن آیتم اول</li>

<li> متن آیتم دوم</li>

<li>متن آیتم سوم</li>

</ul>

که در مرورگر به شکل زیر به نمایش در می آید:

  • متن آیتم اول
  • متن آیتم دوم
  • متن آیتم سوم

ordered list

در ادامه آموزش انواع لیست در html لیست منظم که بر اساس شماره یا حروف الفبا مرتب شده و ordered list  نام دارد را بررسی می کنیم.

لیست‌های منظم با تگ <ol> نشان داده می‌شوند. باقی موارد در این لیست‌ها مشابه قبل است.

مرحله اول: برای ساخت یک لیست مرتب شده،در ابتدا یک تگ <ol> باز می‌کنیم و اعلام می کنیم که قصد داریم یک لیست منظم یا همان orderd List ایجاد کنیم.

شاید از این مقاله خوشتون بیاد:  gitee یک جاذبه ی گردشگری چینی برای برنامه نویس ها

مرحله دوم: سپس متن هر آیتم لیست را بین <li> متن آیتم <li/> باز  متن مورد نظر را بین آن می‌نویسیم.

مرحله سوم: در آخر <ol/> را می‌نویسیم تا تگ بسته شود.

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

<ol>

<li>متن آیتم اول</li>

<li>متن آیتم دوم</li>

<li>متن آیتم سوم</li>

</ol>

که در مرورگر به شکل زیر به نمایش در می آید:

  1. متن آیتم اول
  2. متن آیتم دوم
  3. متن آیتم سوم

در حالت پیش فرض، مرورگر از اعداد برای مرتب سازی آیتم های لیست استفاده می کند (به فرض از شماره ۱، ۲، ۳ …)، اما اگر بخواهید نمایش عناوین آیتم ها را سفارشی کنید، می توانید از چند مقدار متفاوت برای خاصیت type تگ ol استفاده کنید، این مقادیر می تواند به صورت زیر باشد:

<ol type=”مقدار مورد نظر”>

  1. لیست آیتم ها به صورت شماره ای (۱، ۲، ۳ و…) با مقدار ۱ برای type.
  2. لیست آیتم ها به صورت حروف کوچک (c، b، a و…) با مقدار a برای type.
  3. لیست آیتم ها به صورت حروف بزرگ (C، B، A و…) با مقدار A برای type.
  4. لیست آیتم ها به صورت شماره های رومی کوچک (iii، ii، i و…) با مقدار i برای type.
  5. لیست آیتم ها به صورت شماره های رومی بزرگ (III، II، I و…) با مقدار I برای type.

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

 

 

 

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

غلامرضا بهشتیان

من غلامرضا بهشتیان، عاشق نوشتن مقاله های مفید در حوزه ی وب هستم. امیدوارم مقالات نوشته شده نظر شما خوانندگان عزیز را جلب نماید.

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

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