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

بازدید: 307 بازدید
لیست ها در html

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

لیست ها در html به دو صورت مرتب یا نامرتب تعریف میگردند.

لیست های مرتب را با تگ های ol li و لیست های نامرتب را با تگ های ul li ایجاد میکنیم.

با سلام خدمت کاربران گرامی وبسایت پرنیان طرح

در این بخش میخواهیم به آموزش لیست های Html بپردازیم با ما همراه باشید.

معرفی لیست های html :

همانطور که میدانید برای هر خاصیتی در html از تگ مخصوص آن استفاده میکنیم.

برای ساختن لیست ها از تگ های مخصوص لیست استفاده میکنیم.

لیست های مرتب را با تگ های ol li (Orderd List) و لیست های نامرتب را با تگ های ul li (Unordered List) تعریف مینماییم.

لیست های مرتب لیست های شماره بندی شده هستند و لیست های نامرتب لیست های که شماره بندی شده نیستند.

لیست های مرتب :

لیست های مرتب با آیتم های شماره بنده شده ساخته میشوند دو تگ ol و li معرف لیست های مرتب هستند.

همچنین میتوانیم بجای استفاده از اعداد در شماره بندی از مقادیر متفاوتی استفاده کنیم.

در تگ ol میتوانیم مقدار های متفاوتی که میخواهیم در صفت type مقدار دهی کنیم.

مثال زیر لیست های مرتب که آیتم هایش با اعداد شماره بندی شده است :

[php]

<ol>

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

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

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

</ol>

[/php]

مقادیر type :

type=”1″ : آیتم های لیست را بر حسب اعداد مرتب میکند.

type=”A”: آیتم های لیست را با حروف الفبای بزرگ مرتب میکند.

type=”a”: آیتم های لیست را با حروف الفبای کوچک نمایش میدهد.

type=”I”: آیتم ها را با اعداد یونانی I , II, III لیست میکند.

type=”i”: در این حالت با اعداد یونانی کوچک i, ii , iii آیتم ها نشان داده میشوند.

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

[php]

<ol type=”A”>

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

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

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

</ol>

[/php]

لیست های نامرتب :

لیست های بدون نظم (نامرتب) دارای ترتیب مشخصی نیستند و ترتیبش به صورت دلخواه است.

ابتدا تگ ul را باز میکنیم و آیتم هایش را مینویسیم و لیست را با تگ پایانی </ul> میبندیم.

در لیست های نامرتب میتوانیم به تگ ul استایل های مختلفی بدهیم.

disc : این مقدار همان حالت پیش فرض است که دایره توپر است.

circle : این حالت آیتم های لیست نامرتب با دایره های توخالی نشان داده میشود.

squares : این حالت آیتم های لیست با مربع به نمایش در می آیند.

none : با این مقدار در کنار آیتم های لیست علامتی وجود نخواهد داشت.

مثال :

[php]

<body>

<h2>Unordered List with Square Bullets</h2>

<ul style=”list-style-type:square;”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>

[/php]

 

منبع : www.w3schools.com

دسته بندی آموزش html
اشتراک گذاری
مقالات مرتبط

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

سبد خرید

هیچ محصولی در سبد خرید نیست.