درس پنجم: کار با لیست‌ها در HTML
سلام به همگی! خوش اومدید به درس پنجم از دوره آموزش HTML. توی درس‌های قبلی با ساختار پایه صفحات HTML، نحوه ایجاد تیتر و پاراگراف، و همچنین قرار دادن لینک و تصویر آشنا شدیم.
توی این درس، قراره یاد بگیریم چطور اطلاعاتمون رو به صورت لیست‌های مرتب و نامرتب در صفحات وب نمایش بدیم. لیست‌ها برای سازماندهی محتوا و خوانایی بهتر صفحات خیلی مفید هستن، مثلاً وقتی می‌خواید مجموعه‌ای از آیتم‌ها، مراحل انجام کار، یا منوی ناوبری سایت رو نمایش بدید.
در HTML سه نوع لیست اصلی داریم:
- لیست‌های نامرتب (Unordered Lists)
- لیست‌های مرتب (Ordered Lists)
- لیست‌های توضیحی یا تعریفی (Description Lists)
بریم که با هر کدوم آشنا بشیم.
1. لیست‌های نامرتب (Unordered Lists)
این نوع لیست برای نمایش مجموعه‌ای از آیتم‌ها استفاده میشه که ترتیبشون اهمیتی نداره. آیتم‌های این لیست معمولاً با یک نشانگر (مثل دایره، مربع یا دیسک) در کنارشون مشخص میشن.
- تگ اصلی:
<ul>(مخفف Unordered List) برای تعریف کل لیست استفاده میشه. - تگ آیتم‌ها:
<li>(مخفف List Item) برای تعریف هر آیتم داخل لیست استفاده میشه.
ساختار کلی:
<ul>
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ul>مثال:
فرض کنید می‌خواید لیستی از میوه‌های مورد علاقه‌تون رو نمایش بدید:
<h3>میوه‌های مورد علاقه من:</h3>
<ul>
<li>سیب</li>
<li>موز</li>
<li>پرتقال</li>
<li>انگور</li>
</ul>خروجی در مرورگر:
- سیب
- موز
- پرتقال
- انگور
2. لیست‌های مرتب (Ordered Lists)
این لیست برای نمایش مجموعه‌ای از آیتم‌ها استفاده میشه که ترتیبشون اهمیت داره، مثل مراحل انجام یک کار یا لیستی با اولویت‌بندی. آیتم‌های این لیست معمولاً با اعداد یا حروف به ترتیب مشخص میشن.
- تگ اصلی:
<ol>(مخفف Ordered List) برای تعریف کل لیست استفاده میشه. - تگ آیتم‌ها:
<li>(مخفف List Item) برای تعریف هر آیتم داخل لیست استفاده میشه (همانند لیست نامرتب).
ساختار کلی:
<ol>
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ol>مثال:
فرض کنید می‌خواید مراحل پخت یک کیک ساده رو بنویسید:
<h3>مراحل پخت کیک:</h3>
<ol>
<li>فر را روشن کنید و روی دمای 180 درجه سانتی‌گراد تنظیم کنید.</li>
<li>مواد خشک را با هم مخلوط کنید.</li>
<li>تخم‌مرغ و مواد مایع را اضافه کرده و هم بزنید.</li>
<li>مایه کیک را در قالب بریزید.</li>
<li>قالب را در فر قرار دهید و به مدت 30-35 دقیقه بپزید.</li>
</ol>خروجی در مرورگر:
- فر را روشن کنید و روی دمای 180 درجه سانتی‌گراد تنظیم کنید.
- مواد خشک را با هم مخلوط کنید.
- تخم‌مرغ و مواد مایع را اضافه کرده و هم بزنید.
- مایه کیک را در قالب بریزید.
- قالب را در فر قرار دهید و به مدت 30-35 دقیقه بپزید.
ویژگی‌های تگ <ol>:
شما می‌تونید نوع نشانگر لیست مرتب رو با استفاده از ویژگی type تغییر بدید:
type="1"(پیش‌فرض): اعداد (1, 2, 3, …)type="A": حروف بزرگ (A, B, C, …)type="a": حروف کوچک (a, b, c, …)type="I": اعداد رومی بزرگ (I, II, III, …)type="i": اعداد رومی کوچک (i, ii, iii, …)
مثال:
<h3>لیست با حروف بزرگ:</h3>
<ol type="A">
<li>مرحله اول</li>
<li>مرحله دوم</li>
<li>مرحله سوم</li>
</ol>3. لیست‌های توضیحی یا تعریفی (Description Lists)
این نوع لیست برای نمایش مجموعه‌ای از واژه‌ها یا اصطلاحات و توضیحات مربوط به اون‌ها استفاده میشه. کمتر از دو نوع لیست قبلی رایج هست، اما برای واژه‌نامه‌ها یا لیست سؤال و جواب می‌تونه مفید باشه.
- تگ اصلی:
<dl>(مخفف Description List) برای تعریف کل لیست استفاده میشه. - تگ واژه:
<dt>(مخفف Description Term) برای تعریف واژه یا اصطلاح استفاده میشه. - تگ توضیح:
<dd>(مخفف Description Description) برای تعریف توضیح مربوط به واژه استفاده میشه.
ساختار کلی:
<dl>
<dt>واژه اول</dt>
<dd>توضیح واژه اول</dd>
<dt>واژه دوم</dt>
<dd>توضیح واژه دوم</dd>
<dd>توضیح دوم برای واژه دوم (اختیاری)</dd>
</dl>مثال:
<h3>واژه‌نامه HTML:</h3>
<dl>
<dt>HTML</dt>
<dd>زبان نشانه‌گذاری ابرمتن (Hypertext Markup Language)، زبان استاندارد برای ایجاد صفحات وب.</dd>
<dt>CSS</dt>
<dd>شیوه‌نامه آبشاری (Cascading Style Sheets)، زبانی برای توصیف ظاهر و قالب‌بندی یک سند HTML.</dd>
</dl>خروجی در مرورگر:
HTML
زبان نشانه‌گذاری ابرمتن (Hypertext Markup Language)، زبان استاندارد برای ایجاد صفحات وب.
CSS
شیوه‌نامه آبشاری (Cascading Style Sheets)، زبانی برای توصیف ظاهر و قالب‌بندی یک سند HTML.
