آموزش جامع فرمت‌دهی در HTML

🎯 اهداف یادگیری

• آشنایی با تگ‌های اصلی فرمت‌دهی متن در HTML
• یادگیری تفاوت بین تگ‌های فیزیکی و معنایی
• توانایی ایجاد متن‌های Bold، Italic و Underline
• آشنایی با تگ‌های خاص برای نشانه‌گذاری متن

📌 تگ‌های اصلی فرمت‌دهی متن

۱. تگ‌های فیزیکی (ظاهری)

این تگ‌ها فقط ظاهر متن را تغییر می‌دهند:

<b>متن Bold</b>
<i>متن Italic</i>
<u>متن Underline</u>

۲. تگ‌های معنایی (Semantic)

این تگ‌ها علاوه بر تغییر ظاهر، معنی خاصی به متن می‌دهند:

<strong>متن مهم</strong>
<em>متن تأکیدی</em>
<mark>متن هایلایت شده</mark>

مقایسه تگ‌های فیزیکی و معنایی

📌 تگ‌های خاص برای نشانه‌گذاری متن

۱. تگ‌های سرتیتر (Heading)

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

<h1>سرتیتر اصلی</h1>
<h2>سرتیتر فرعی</h2>
<h3>سرتیتر سطح 3</h3>

<h1>عنوان اصلی مقاله</h1>
<h2>مقدمه</h2>
<h3>زیربخش مقدمه</h3>
<h2>بدنه اصلی</h2>
<h3>نکته اول</h3>
<h3>نکته دوم</h3>

۲. تگ‌های ویژه متن

برای کاربردهای خاص در متن:

<small>متن کوچک</small>
<del>متن حذف شده</del>
<ins>متن اضافه شده</ins>
<sub>متن زیرنویس</sub>
<sup>متن بالانویس</sup>

📌 تمرین عملی

متن زیر را با تگ‌های مناسب HTML فرمت‌دهی کنید:

عنوان مقاله: آموزش HTML
نویسنده:  مهدی سلیمانی
تاریخ انتشار: 1404/01/20
متن مقاله: HTML زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب است.
نکته مهم: حتما از تگ‌های معنایی استفاده کنید.
فرمول آب: H2O
قیمت قبلی: 50,000 تومان
قیمت جدید: 45,000 تومان

<h1>عنوان مقاله: آموزش HTML</h1>

<p><strong>نویسنده:</strong> مهدی سلیمانی</p>
<p><strong>تاریخ انتشار:</strong> 1404/01/20</p>

<p><strong>نکته مهم:</strong> حتما از تگ‌های معنایی استفاده کنید.</p>

<p>فرمول آب: H<sub>2</sub>O</p>

<p>قیمت: <del>50,000 تومان</del> <ins>45,000 تومان</ins></p>

<h1>عنوان مقاله: آموزش HTML</h1>
<p><strong>نویسنده:</strong> مهدی سلیمانی</p>
<p><strong>تاریخ انتشار:</strong> 1404/01/20</p>
<p>متن مقاله: HTML زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب است.</p>
<p><strong>نکته مهم:</strong> حتما از تگ‌های معنایی استفاده کنید.</p>
<p>فرمول آب: H<sub>2</sub>O</p>
<p>قیمت: <del>50,000 تومان</del> <ins>45,000 تومان</ins></p>

راهنمای تمرین:

1. از تگ‌های سرتیتر مناسب استفاده کنید
2. متن‌های مهم را با تگ‌های معنایی مشخص کنید
3. برای قیمت‌ها از تگ‌های مناسب استفاده کنید
4. فرمول شیمیایی را به درستی نمایش دهید

📌 نکات طلایی فرمت‌دهی متن

• اولویت با تگ‌های معنایی: همیشه از تگ‌های معنایی به جای تگ‌های فیزیکی استفاده کنید
• سلسله مراتب سرتیترها: از h1 تا h6 به ترتیب استفاده کنید و از h1 فقط یک بار در صفحه استفاده نمایید
• خوانایی کد: برای کدهای طولانی از تگ <pre> استفاده کنید
• دسترسی‌پذیری: از تگ‌های مناسب برای بهبود تجربه کاربران معلول استفاده کنید

📌 قدم بعدی

در درس بعدی با کار با تصاویر در HTML آشنا خواهیم شد!