📋 درس چهارم: لیستها و جداول
🎯 هدف این درس: آشنایی با لیستها و جداول برای نمایش منظم اطلاعات
سلام دوست عزیز! 👋
توی درس قبل، لینکها و تصاویر رو یاد گرفتی و صفحاتت رو جذابتر کردی. حالا وقتشه که اطلاعات رو به صورت منظم توی صفحه بچینی. لیستها و جداول دقیقاً همین کار رو برامون انجام میدن.
توی این درس، با هم یاد میگیریم:
- ✅ لیستهای مرتب (ol) و نامرتب (ul)
- ✅ لیستهای تو در تو
- ✅ ساخت جدول با تگ table
- ✅ تمرین: جدول برنامه هفتگی
📋 بخش ۱: لیستهای نامرتب (ul)
لیستهای نامرتب برای مواردی استفاده میشن که ترتیب اهمیت نداره. این لیستها با علامت گلوله (bullet) نمایش داده میشن.
ساختار کلی:
لیست نامرتب
HTML
v5
<ul>
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ul>
مثال: لیست میوهها
لیست میوهها
HTML
v5
<h2>میوههای تابستانی</h2>
<ul>
<li>هندوانه</li>
<li>طالبی</li>
<li>انگور</li>
<li>هلو</li>
</ul>
🔢 بخش ۲: لیستهای مرتب (ol)
لیستهای مرتب برای مواردی استفاده میشن که ترتیب اهمیت دارد. این لیستها با اعداد یا حروف نمایش داده میشن.
ساختار کلی:
لیست مرتب
HTML
v5
<ol>
<li>مرحله اول</li>
<li>مرحله دوم</li>
<li>مرحله سوم</li>
</ol>
مثال: مراحل ساخت یک وبسایت
مراحل ساخت وبسایت
HTML
v5
<h2>مراحل ساخت یک وبسایت</h2>
<ol>
<li>برنامهریزی و طراحی</li>
<li>نوشتن کد HTML</li>
<li>افزودن CSS برای زیبایی</li>
<li>افزودن JavaScript برای تعامل</li>
<li>تست و انتشار</li>
</ol>
<ul> برای لیستهای بدون ترتیب (با گلوله) و <ol> برای لیستهای مرتب (با شماره) استفاده میشه.
📚 بخش ۳: لیستهای تو در تو
میتونیم لیستها رو درون هم قرار بدیم تا سلسلهمراتب رو نمایش بدیم.
لیست تو در تو
HTML
v5
<h2>دستهبندی دورهها</h2>
<ul>
<li>
برنامهنویسی
<ul>
<li>پایتون</li>
<li>جاوااسکریپت</li>
<li>HTML و CSS</li>
</ul>
</li>
<li>
طراحی
<ul>
<li>طراحی گرافیک</li>
<li>طراحی رابط کاربری</li>
</ul>
</li>
</ul>
📊 بخش ۴: جداول
جداول برای نمایش دادههای جدولی استفاده میشن و از سه تگ اصلی تشکیل شدن:
<table>: خود جدول<tr>: سطر (Table Row)<td>: سلول (Table Data)
ساختار کلی:
ساختار جدول
HTML
v5
<table>
<tr>
<td>ردیف ۱ - ستون ۱</td>
<td>ردیف ۱ - ستون ۲</td>
</tr>
<tr>
<td>ردیف ۲ - ستون ۱</td>
<td>ردیف ۲ - ستون ۲</td>
</tr>
</table>
مثال: جدول برنامه هفتگی
جدول برنامه هفتگی
HTML
v5
<h2>برنامه هفتگی</h2>
<table>
<tr>
<td><strong>روز</strong></td>
<td><strong>فعالیت</strong></td>
</tr>
<tr>
<td>شنبه</td>
<td>یادگیری HTML</td>
</tr>
<tr>
<td>یکشنبه</td>
<td>تمرین CSS</td>
</tr>
<tr>
<td>دوشنبه</td>
<td>پروژه عملی</td>
</tr>
</table>
📝 بخش ۵: پروژه عملی – جدول برنامه هفتگی کامل
📝 پروژه: جدول برنامه هفتگی کامل
یک جدول برنامه هفتگی کامل بسازید که شامل موارد زیر باشد:
- ستون روزهای هفته
- ستون ساعت شروع
- ستون ساعت پایان
- ستون فعالیت
🔍 راهحل پروژه:
برنامه هفتگی کامل
HTML
v5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>برنامه هفتگی من</title>
</head>
<body>
<h1>📅 برنامه هفتگی من</h1>
<table>
<tr>
<td><strong>روز</strong></td>
<td><strong>شروع</strong></td>
<td><strong>پایان</strong></td>
<td><strong>فعالیت</strong></td>
</tr>
<tr>
<td>شنبه</td>
<td>۱۰:۰۰</td>
<td>۱۲:۰۰</td>
<td>یادگیری HTML</td>
</tr>
<tr>
<td>یکشنبه</td>
<td>۱۴:۰۰</td>
<td>۱۶:۰۰</td>
<td>تمرین CSS</td>
</tr>
<tr>
<td>دوشنبه</td>
<td>۱۸:۰۰</td>
<td>۲۰:۰۰</td>
<td>پروژه عملی</td>
</tr>
</table>
</body>
</html>
📝 تمرینهای عملی
🎯 تمرین شماره ۱: لیست خرید
یک لیست خرید با ۱۰ آیتم مختلف با استفاده از لیست نامرتب بسازید.
🎯 تمرین شماره ۲: جدول نمرات
یک جدول برای نمایش نمرات دانشآموزان با ستونهای نام، درس و نمره بسازید.
🧩 جمعبندی درس
تبریک میگم! 🎉 توی این درس یاد گرفتی:
- ✅ لیستهای نامرتب (ul) و مرتب (ol)
- ✅ لیستهای تو در تو برای نمایش سلسلهمراتب
- ✅ ساخت جدول با تگهای table، tr و td
- ✅ نمایش منظم دادهها با جداول
در درس بعدی، با فرمها و ورودی کاربر آشنا میشیم و میتونیم از کاربران اطلاعات دریافت کنیم.
نظر خود را بنویسید
با ثبت نظر، به بهبود محتوای ما کمک کنید