جلسه 6 آموزش HTML: آشنایی با تگ های ایجاد کننده لیست

سلام به همراهان همیشگی رایا وردپرس! به جلسه ششم آموزش HTML از سایت رایا وردپرس خوش اومدین! 😊

تو این جلسه قراره با یکی از کاربردی‌ ترین تگ‌های HTML آشنا بشی که بهت اجازه می‌ده لیست‌های زیبا و منظم بسازی. بله! موضوع امروز ما در مورد لیست هست. 😎

با استفاده از تگ‌های <ul>, <ol>, و <li> می‌تونی اطلاعات رو دسته‌بندی کنی. پس با من همراه شو تا قدم به قدم یاد بگیری که چطور با استفاده از تگ‌های لیست، محتوای صفحات وب رو به شکلی حرفه‌ای و سازمان‌یافته ارائه بدی. آماده‌ای؟ بزن بریم! 🚀

🤔لیست توی HTML چیه و چرا مهمه؟

لیست ها کمک میکنن اطلاعات رو گروه بندی کنی تا:

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

• کاربر راحتتر بخونه. 👀
• موتورهای جستجو ساختار صفحه رو بهتر درک کنن. (سئو بهتر! 🔍)
• طراحی صفحه حرفه ای تر به نظر برسه. 🎨

لیست‌ها نه تنها باعث می‌شن اطلاعات به صورت واضح و منظم نمایش داده بشه، بلکه به بهینه‌سازی سئو و زیبایی طراحی سایتت هم کمک می‌کنن!

🦋 تگ‌ های ایجاد کننده لیست در HTML

توی HTML، ما سه نوع لیست اصلی داریم که هر کدوم برای کار خاصی استفاده می‌شن و به نمایش داده شدن مرتب و منظم اطلاعات کمک می‌کنن:

1️⃣ تگ <ol> (Ordered Lists) – لیست مرتب شماره‌ دار

وقتی می‌خوای یک لیست شماره‌ دار بسازی که ترتیب آیتم‌ها اهمیت داشته باشه، از تگ <ol> استفاده کن. مثلاً اگر می‌خوای مراحل پخت یه کیک رو به صورت گام به گام نشون بدی، ترتیب هر مرحله مهمه. با استفاده از <ol>, مراحل رو به صورت شماره‌ دار نمایش می‌دی تا خواننده به راحتی روند رو دنبال کنه. این روش نه تنها به خوانایی کمک می‌کنه، بلکه ساختار و ترتیب محتوا رو هم مشخص می‌کنه. 😋

مثال:

<ol>  
  <li>آرد رو بریز تو ظرف</li>  
  <li>شکر اضافه کن</li>  
  <li>تخم مرغ ها رو بزن!</li>  
</ol>  

شاید برات سوال پیش بیاد که تگ <li> که استفاده کردم چی هست و چرا داخل تگ <ol> قرار داده شده؟ 😊

تگ <li> در HTML به معنای آیتم لیست هست و برای تعریف هر یک از عناصر (آیتم های) داخل یک لیست استفاده می‌شه. وقتی از تگ <ol> (لیست مرتب) یا <ul> (لیست نامرتب) استفاده می‌کنی، همه‌ی آیتم‌ها باید داخل تگ <li> قرار بگیرن تا مرورگر به درستی تشخیص بده که اینا بخش‌های جداگانه‌ای از لیستت هستن. به عبارت ساده، <li> به مرورگر می‌گه این آیتم یک مورد از لیست هست!

2️⃣ تگ <ul> (Unordered Lists) – لیست نامرتب

وقتی می‌خوای یه لیست غیر شماره‌ دار بسازی و ترتیب آیتم‌ها برات مهم نیست، می‌تونی از تگ <ul> استفاده کنی. این تگ آیتم‌های لیست رو کنار یه دایره توپر مشکی (🔘) نشون می‌ده و برای زمانی مناسبه که فقط می‌خوای اطلاعات رو گروه‌بندی کنی، بدون اینکه ترتیب خاصی داشته باشن. 😄
مثلاً اگه بخوای لیستی از خریدهای روزانه‌ات داشته باشی، مهم نیست که اول سیب رو بخری یا نون، درسته؟ پس می‌تونی از یه لیست نامرتب استفاده کنی! 🛒✨

مثال:

<ul>
  <li>سیب</li>
  <li>موز</li>
  <li>انگور</li>
</ul>

3️⃣ تگ <dl> (Description Lists) – لیست توضیحی

لیست توضیحی یا <dl> زمانی استفاده می‌شه که بخوای یه سری اصطلاحات یا عبارات رو همراه با توضیحاتشون نمایش بدی. برخلاف لیست‌های مرتب و نامرتب، این نوع لیست شامل عنوان (term) و توضیح (description) برای هر آیتمه. 🤓📖

ساختار کلیش اینجوریه:

• <dl>: مشخص می‌کنه که این یه لیست توضیحیه.
• <dt> (Define Term): عنوان یا اصطلاحی که قراره براش توضیح نوشته بشه.
• <dd> (Description Definition): توضیح مربوط به اون عنوان.

مثال:

<dl>
  <dt>HTML</dt>
  <dd>زبان نشانه‌گذاری برای ساختاردهی صفحات وب</dd>

  <dt>CSS</dt>
  <dd>زبانی برای استایل‌دهی و زیباسازی صفحات وب</dd>

  <dt>JavaScript</dt>
  <dd>زبانی برای اضافه کردن تعامل و پویایی به صفحات وب</dd>
</dl>

👆 این لیست باعث می‌شه که هر عنوان همراه با توضیح مربوط به خودش نمایش داده بشه و به درک بهتر محتوا کمک کنه. 😃✨

✨ تا اینجای کار با سه تا تگ اصلی برای ایجاد لیست در HTML آشنا شدی:

حالا که اینا رو یاد گرفتی، بریم سراغ نکات تکمیلی که باید بدونی 🚀

 خوبه بدونی!

✨ شخصی سازی استایل لیست‌ها در HTML ✨

با اینکه فعلاً فقط HTML بلدی، بد نیست یه نگاه به این قابلیت‌های جذاب بندازی! 😎

🔹 تغییر علامت لیست‌های <ul>: به‌صورت پیش‌فرض، آیتم‌های لیست نامرتب با دایره توپر مشکی نشون داده می‌شن. اما اگه بخوای این علامت رو تغییر بدی، می‌تونی از ویژگی list-style-type توی CSS داخلی استفاده کنی. مثلاً:

<ul style="list-style-type: square;">
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
  <li>آیتم سوم</li>
</ul>

در نتیجه: به جای دایره توپر، آیتم‌های لیست با مربع مشکی نمایش داده می‌شن!

💡 انواع دیگه‌ی list-style-type:
✔ circle → دایره توخالی ⚪
✔ square → مربع مشکی 🟫
✔ none → بدون علامت 🚫

🔹شروع شماره از یک عدد خاص در <ol> : به‌طور پیش‌فرض، وقتی یه لیست مرتب با تگ <ol> می‌سازی، شماره‌ها از ۱ شروع می‌شن. ولی اگه بخوای شماره‌گذاری رو از یه عدد خاص شروع کنی، باید از ویژگی start استفاده کنی.

مثال: فرض کن یه لیست داری و می‌خوای شماره‌گذاری از ۵ شروع بشه:

<ol start="5">
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
  <li>آیتم سوم</li>
</ol>

🔹تغییر ترتیب شماره‌های لیست <ol> (برعکس کردن لیست): اگه بخوای لیست شماره‌ دار از یه عدد بزرگ به کوچک نمایش داده بشه، از ویژگی reversed استفاده کن:

مثال:

<ol reversed>
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
  <li>آیتم سوم</li>
</ol>

🔹تغییر نوع شماره‌های لیست مرتب <ol> : به‌صورت پیش‌فرض لیست‌های <ol> با اعداد معمولی (۱,۲,۳,…) نمایش داده می‌شن، اما می‌تونی نوع شماره‌گذاری رو تغییر بدی:

مثال:

<ol type="A"> 
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
</ol>

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

• 1 → (۱, ۲, ۳, …) پیش‌فرض
• A → (A, B, C, …) حروف بزرگ انگلیسی
• a → (a, b, c, …) حروف کوچک انگلیسی
• I → (I, II, III, …) اعداد رومی بزرگ
• i → (i, ii, iii, …) اعداد رومی کوچک

🚨 اشتباهات رایج در استفاده از لیست‌ ها

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

❌ فراموش کردن تگ بسته </li> : هر آیتم داخل لیست باید با <li> باز و با </li> بسته بشه. اگه تگ بسته رو ننویسی، ممکنه مرورگر به‌درستی لیست رو نمایش نده.

❌ استفاده از <ul> به‌جای <ol> وقتی ترتیب مهمه: اگه لیستت مرحله‌ای یا نیازمند ترتیب مشخص هست، باید از <ol> (لیست مرتب) استفاده کنی، نه <ul>.

❌قرار دادن مستقیم متن بیرون از <li> داخل <ul> یا <ol>: متن‌هایی که جزئی از لیست هستن، حتماً باید داخل <li> باشن، نه مستقیماً داخل <ul> یا <ol>.

اگه این نکات رو رعایت کنی، لیست‌هات همیشه مرتب و بدون مشکل نمایش داده میشن! 🚀

جمع بندی

تو این جلسه یاد گرفتی که چطور با استفاده از تگ‌های لیست مثل <ul>, <ol> , می‌تونی اطلاعات رو به صورت منظم و دسته‌بندی شده به نمایش بذاری. این تگ‌ها باعث می‌شن که صفحه‌ی وبت هم زیباتر به نظر برسه و هم از نظر سئو بهینه‌تر عمل کنه.

اگر سوالی داشتی یا چیزی برات نامفهوم بود، حتماً تو کامنت‌ها بپرس. من همیشه اینجا هستم تا بهت کمک کنم! 🙌
تا جلسه بعد، موفق باشی و به یادگیری HTML ادامه بده! 👋