📝 درس دوم: تگهای متنی و فرمتدهی
🎯 هدف این درس: آشنایی با تگهای متنی و روشهای فرمتدهی متن در HTML
سلام دوست عزیز! 👋
توی درس قبل با ساختار کلی HTML آشنا شدی و اولین صفحهات رو ساختی. حالا وقتشه که به صفحاتت جان ببخشی و متنها رو به شکلهای مختلف نمایش بدی.
توی این درس، با هم یاد میگیریم:
- ✅ تگهای عنوان (h1 تا h6)
- ✅ تگهای پاراگراف و متن
- ✅ تگهای فرمتدهی (strong, em, u, …)
- ✅ تمرین: یک مقاله ساده بنویسیم
📐 بخش ۱: تگهای عنوان (Heading)
تگهای عنوان برای نمایش سرفصلها و عناوین اصلی صفحه استفاده میشن. این تگها از h1 تا h6 وجود دارن که هر کدوم اندازه و اهمیت متفاوتی دارن.
📊 سلسلهمراتب تگهای عنوان
| تگ | کاربرد | نمونه |
|---|---|---|
<h1> |
عنوان اصلی صفحه (بزرگترین) | عنوان اصلی |
<h2> |
عنوان بخشهای اصلی | عنوان بخش |
<h3> |
زیرعنوان بخشها | زیرعنوان |
<h4> |
عنوانهای کوچکتر | عنوان کوچک |
<h5> |
عنوانهای خیلی کوچک | عنوان خیلی کوچک |
<h6> |
کوچکترین عنوان | کوچکترین عنوان |
مثال: استفاده از تگهای عنوان
تگهای عنوان
HTML
v5
<h1>این عنوان اصلی است</h1>
<h2>این عنوان سطح دو است</h2>
<h3>این عنوان سطح سه است</h3>
<h4>این عنوان سطح چهار است</h4>
<h5>این عنوان سطح پنج است</h5>
<h6>این عنوان سطح شش است</h6>
تگ <h1> فقط یک بار در هر صفحه باید استفاده بشه و نشوندهنده عنوان اصلی صفحه است. برای سئو و خوانایی، ترتیب سلسلهمراتب رو رعایت کنید.
📄 بخش ۲: تگهای پاراگراف و متن
برای نوشتن متنهای طولانیتر از تگ <p> استفاده میکنیم که بهش پاراگراف میگیم. هر پاراگراف با یه فاصله از پاراگراف بعدی جدا میشه.
مثال: استفاده از پاراگراف
پاراگرافها
HTML
v5
<p>
HTML مخفف HyperText Markup Language است.
این زبان برای ساخت صفحات وب استفاده میشود.
</p>
<p>
با استفاده از HTML میتوانیم ساختار صفحات وب را مشخص کنیم.
هر صفحه وب از ترکیب تگهای مختلف تشکیل شده است.
</p>
🎨 بخش ۳: تگهای فرمتدهی متن
برای اینکه متنها رو جذابتر کنیم و به بخشهای مختلف تأکید کنیم، از تگهای فرمتدهی استفاده میکنیم.
📊 تگهای فرمتدهی متن
| تگ | کاربرد | مثال |
|---|---|---|
<strong> |
متن پررنگ با اهمیت بالا | متن پررنگ |
<b> |
متن پررنگ (بدون اهمیت) | متن پررنگ |
<em> |
متن کج با تأکید | متن کج |
<i> |
متن کج (بدون تأکید) | متن کج |
<u> |
متن زیرخطدار | متن زیرخطدار |
<s> |
متن خطخورده | |
<mark> |
متن هایلایت شده | متن هایلایت شده |
مثال: استفاده از تگهای فرمتدهی
فرمتدهی متن
HTML
v5
<p>
<strong>HTML</strong> یک زبان نشانهگذاری است.
<em>یادگیری HTML بسیار ساده است.</em>
<mark>این متن هایلایت شده است.</mark>
<u>متن زیرخطدار</u>
<s>متن خطخورده</s>
</p>
strong و b
<strong> به مرورگر و موتورهای جستجو میگه که این متن اهمیت بیشتری داره، ولی <b> فقط ظاهر متن رو پررنگ میکنه.
📝 بخش ۴: پروژه عملی – یک مقاله ساده
حالا با استفاده از همه چیزهایی که یاد گرفتی، یه مقاله ساده مینویسیم.
📝 پروژه: یک مقاله ساده
یک مقاله درباره «مزایای یادگیری HTML» بنویسید که شامل موارد زیر باشد:
- یک عنوان اصلی با
<h1> - چند زیرعنوان با
<h2> - چند پاراگراف با
<p> - استفاده از
<strong>،<em>و<mark>
🔍 راهحل پروژه:
مقاله ساده
HTML
v5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>مزایای یادگیری HTML</title>
</head>
<body>
<h1>چرا باید HTML یاد بگیریم؟</h1>
<h2>HTML پایه و اساس وب است</h2>
<p>
<strong>HTML</strong> اولین قدم برای ورود به دنیای توسعه وب است.
بدون HTML نمیتوانیم <em>ساختار صفحات وب</em> را مشخص کنیم.
</p>
<h2>HTML ساده و یادگیری آن آسان است</h2>
<p>
<mark>یکی از بهترین ویژگیهای HTML سادگی آن است.</mark>
با یادگیری چند تگ ساده میتوانی صفحات زیبایی بسازی.
</p>
<h2>HTML در همه جا کاربرد دارد</h2>
<p>
از وبسایتهای ساده گرفته تا برنامههای پیچیده، همه از HTML استفاده میکنند.
<strong>پس یادگیری HTML سرمایهگذاری روی آینده توست.</strong>
</p>
</body>
</html>
📝 تمرینهای عملی
🎯 تمرین شماره ۱: صفحه معرفی کتاب
یک صفحه HTML بسازید که یک کتاب را معرفی کند. شامل عنوان، نویسنده، توضیحات و چند ویژگی مهم.
🎯 تمرین شماره ۲: صفحه رزومه ساده
یک صفحه HTML ساده برای رزومه خودتان بسازید با عنوانها، پاراگرافها و فرمتهای مختلف.
🧩 جمعبندی درس
تبریک میگم! 🎉 توی این درس یاد گرفتی:
- ✅ تگهای عنوان (h1 تا h6) و نحوه استفاده از آنها
- ✅ تگ پاراگراف و نوشتن متنهای طولانی
- ✅ تگهای فرمتدهی مثل
strong،em،markو … - ✅ تفاوت تگهای مشابه مثل
strongوb - ✅ نوشتن یک مقاله ساده با HTML
در درس بعدی، با لینکها و تصاویر آشنا میشیم و میتونیم صفحاتمون رو به هم متصل کنیم و از تصاویر استفاده کنیم.
