لیست در HTML

لیست در HTML 600 511 نویسنده

طریقه ایجاد لیست در HTML

در این مطلب می خواهیم طریقه ی ایجاد لیست در HTML را به صورت مفصل آموزش بدهیم. در قسمت های قبلی چنینی گفتیم که در زبان اچ تی ام ال برای انجام دادن هر نوع اکشن باید از مجموعه ای از تگ ها استفاده نمود. این تگ ها هستند که کار هایی مانند قالب بندی و پیکره بندی را برای ما امکان پذیر می سازند. هر یک از این تگ ها نیز برای خود کار و وظیفه ای مشخص داشت. ضمنا تگ ها به صورت دو قسمتی بودند. یکی از آن ها اول گشوده می شد و سپس بسته می شد. و دیگری قسمت پایانی و بست شدنی را نداشت. گفته می شود که تمامی این تگ ها هر یک به نوبه ی خود نماینده ی یک w3c می باشند. و از یک مجموعه تلقی می گردند.

بد نیست بدانید که لیست ها نیز برای خود انواعی دارند. که در این مقاله به تمامی آن ها می پردازیم. معمولا این نوع لیست ها را در وب سایت ها به دو طبقه دسته بندی می کنند. به اولین دسته از آن ها لیست های شماره های می گویند. اما چرا به آن ها لیست شماره ای می گویند؟ به خاطر این که در کنار هر گزینه یک عدد وجود دارد. و به صورت کلی هر یک از این لیست ها را با اعداد آن ها مرتب سازی می کنند. البته در زبان انگلیسی به آن ها لیست های ordered  هم گفته می شود.

لیست نشانه دار

لیست نشانه دار

مدل های دیگر لیست در HTML

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

پس با ما همراه باشید. خب از مقالات قبلی ما چنین بر می آید که در زبان اچ تی ام ال تنها با تگ ها سر و کار داشته باشیم. در این مورد به خصوص هم همین طور است. یعنی فقط با تگ های خاصی این کار را انجام می دهیم. نام این تگ ها یک تگ ol و دیگری تگ li است. ما از این دو تگ در ایجاد لیست ها در اچ تی ام ال استفاده می کنیم. ولی لیست های شماره گذاری شده و اصطلاحا عددی. تفسیر گر هر مرورگر هم متوجه این تگ ها می شود.

مثالی برای ایجاد لیست شماره ای

در قسمت قبلی گفتیم که برای ایجاد لیست در HTML آن هم از نوع شماره دار آن، باید از دو نوع تگ li و ol استفاده کنیم. حالا به مثالی در این زمینه می پردازیم:

<ol>
<li>نمایش</li>
<li>لیست ها</li>
<li>در وبسایت</li>
<li>http://oap-it.com </li>
</ol>

 

در مثالی که گفتیم چنان که از این تگ ها استفاده کنیم. باید شاهد لیست هایی باشیم که با اعداد شماره گذاری شده باشند. در این مورد گزینه ها به ترتیب شماره ها بررسی شده و نمایش داده خواهند شد. اما کمی صبر کنید. اگر بخواهیم یک آیتم قبل از تمامی آیتم های دیگر نمایش داده شود چه می شود؟ خب در این صورت هم از خصیصه ای به نام type استفاده می کنیم. که می توان برای هر یک از آن ها مقدار هایی را نیز تعیین نمود. مانند مثال های زیر:

– لیست آیتم ها به صورت شماره ای (1، 2، 3 و…) با مقدار 1 برای type.

– لیست آیتم ها به صورت حروف کوچک (c، b، a و…) با مقدار a برای type.

– لیست آیتم ها به صورت حروف بزرگ (C، B، A و…) با مقدار A برای type.

– لیست آیتم ها به صورت شماره های رومی کوچک (iii، ii، i و…) با مقدار i برای type.

– لیست آیتم ها به صورت شماره های رومی بزرگ (III، II، I و…) با مقدار I برای type.

برای درک بهتر این مسئله در قسمت بعدی مثالی را هم خواهیم آورد.

 

لیست به سبک اعداد یونانی

لیست به سبک اعداد یونانی

مثالی برای چینش های متفاوت دیگر

در این قسمت به مثالی خواهیم پرداخت که در آن شاهد موارد دیگر در ایجاد یک لیست در HTML خواهیم بود.

<ol type=”I”>
<li>نمایش</li>
<li>لیست ها</li>
<li>در وب سایت</li>
<li>http://oap-it.com</li>
</ol>

بر اساس مثال بالا ما دیگر لیست خود را در قالب اعداد عادی نچیده ایم. بلکه از اعداد یونانی برای این کار استفاده نموده ایم. اما چه طور این اتفاق افتاد؟ ما طبق معمول کد مان را نوشتیم. ولی این بار به type را هم به آن اضافه نمودیم. و سپس i را آوردیم. به این ترتیب به مرورگر تفهیم نموده ایم که ما خواستار چینشی از نوع اعداد یونانی هستیم. در مثالی دیگر می خواهیم از بولت ها برای چینش و لیست نمودن کاراکتر ها استفاده نماییم.

پس برای این کار از دو تگ تگ ul و li استفاده می کنیم. ما در این روش با ارائه ی تگ ul به مرور گر می گوییم که از شماره ها و اعداد برای لیست نمودن گزینه ها استفاده نکند. در این میان از تگ li نیز برای به وجود آوردن چیز ها استفاده می کنیم. حال برای درک بهتر موضوع به مثال زیر لطفا توجه کنید:

<ul>
<li>نمایش</li>
<li>لیست ها</li>
<li>در وب سایت</li>
<li>http://oap-it.com</li>
</ul>

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

آیا می توان از مدل های دیگر لیستی استفاده نمود؟

بله. دقیقا سه مدل دیگر هم هستند که می توانند به ما در انجام این کار کمک کنند. البته به کمک گزاره ی type می توان این کار را انجام نمود:

– ایجاد نقطه های تو خالی با مقدار circle برای گزاره ی type.

– ایجاد نقطه های تو پر با مقدار disc برای گزاره ی type.

– ایجاد نقطه های مربعی با مقدار square برای گزاره ی type.

در این جا چنان که خود مان هم گفتیم کلمه ی square به معنای مربع می باشد. حالا با توجه به این شکل می توان مثال زیر را اجرا نمود:

<ul type=”square”>
<li>نمایش</li>
<li>لیست ها</li>
<li>در وب سایت</li>
<li>http://oap-it.com</li>
</ul>

در این مدل هم شاهد مربع هایی هستیم که یه صورت لیست در HTML نمایش داده خواهند شد. تازه این ها همه ی ماجرا نیستند. ما درباره ی ایجاد لیست در HTML آن قدر آزادی داریم که بتوانیم این کار را حتی با CSS نیز انجام دهیم. چرا که با استفاده از سی اس اس می توان خیلی سفارشی شده تر و تمیز تر و با کیفیت تر اقدام به ایجاد هر نوع لیست در HTML کنیم. در واقع دست مان برای خلاقیت و ایجاد هر نوعی از لیست در HTML باز است. حال بیایید ببینیم که چگونه می توانیم نسبت به ایجاد ul و li و لیست های پیچیده تر اقدام کنیم؟

لیست زیر مجموعه دار

لیست زیر مجموعه دار

بیایید کمی کار را پیچیده تر کنیم

خب در این قسمت می خواهیم با دو تگ ul و li اقدام به ایجاد لیست در HTML کنیم که کمی پیچیده تر از مدل های قبلی خود باشد. ما در زبان اچ تی ام ال به چنین لیست های پیچیده ای nested هم می گوییم. از این نوع لیست ها در منو های صفحات وبی هم استفاده می کنند. از لیست های nested برای مواردی استفاده می گردد که بخواهیم منو هایی را بسازیم که در آن نوعی طبقه بندی وجود داشته باشد. یعنی تقریبا چیزی شبیه به منو های دیجیکالا که هر کدام یک دسته بندی خاص و مشخصی برای خود دارند. مثالی که در پایین می آوریم از نوع اولیه ای چنین منو هاو لیست در HTML می باشد. به آن ها توجه کنید:

<ul>
<li>منوی اولیه که زیر مجموعه ندارد</li>
<li>
لیست ثانویه ای که دارای زیر مجموعه هم هست
<ul><li>اولین زیر مجموعه ی لیست ثانویه
<ul><li> دومین زیر مجموعه ی لیست ثانویه </li></ul></li></ul>
</li>
</ul>

ضمنا در این مثال هم از بولت های تو پر استفاده نمودیم. و هم از بولت های تو پر و حتی مربع ها. ما حتی می توانیم لیست های توصیفی را هم در اچ تی ام ال به وجود بیاوریم. این لیست های توصیفی را با استفاده از تگ های dl ,dt و dd می سازیم. به این صورت که تگ dl را مبنا در نظر گرفته. تگ dt مسئولیت ایجاد آیتم ها را دارد. و تگ dd را هم می آوریم تا بتوانیم توسط آن توصیفی انجام دهیم. البته برای ایجاد لیست در HTML می توان از انواع دیگری از تگ هاو مدل های مختلف هم استفاده نمود. اما آن ها را در مقاله ای جداگانه توضیح خواهیم داد.