درس ۲: متن و قالب‌بندی

HTML شش سطح عنوان مختلف ارائه می‌دهد که از h1 تا h6 شماره‌گذاری شده‌اند. h1 مهم‌ترین و بزرگ‌ترین عنوان است و h6 کوچک‌ترین عنوان محسوب می‌شود.

کاربرد تگ‌های عنوان:

• h1: عنوان اصلی صفحه (فقط یکی در هر صفحه)
• h2: عناوین اصلی بخش‌ها
• h3: عناوین فرعی
• h4-h6: عناوین جزئی‌تر

استفاده صحیح از تگ‌های عنوان برای SEO و دسترسی‌پذیری بسیار مهم است.

HTML تگ‌های مختلفی برای قالب‌بندی و تأکید بر متن ارائه می‌دهد:

تگ‌های تأکید:

• <strong> - متن مهم و پررنگ
• <em> - متن تأکیدی و کج
• <mark> - متن برجسته شده
• <small> - متن کوچک
• <del> - متن حذف شده
• <ins> - متن اضافه شده
• <sub> - زیرنویس
• <sup> - بالانویس

این تگ‌ها برای سازماندهی و ساختاردهی به محتوای متنی استفاده می‌شوند:

تگ‌های مهم:

• <p> - پاراگراف
• <br> - شکست خط
• <hr> - خط جداکننده
• <blockquote> - نقل قول بلند
• <q> - نقل قول کوتاه
• <cite> - ارجاع به منبع
• <abbr> - مخفف
• <address> - آدرس

در ادامه، مثالی از استفاده از تگ‌های مختلف قالب‌بندی متن را مشاهده می‌کنید. کد را ویرایش کرده و تأثیر تگ‌های مختلف را ببینید:

HTML سه نوع لیست مختلف ارائه می‌دهد:

انواع لیست‌ها:

• لیست مرتب (Ordered List): با تگ <ol> و آیتم‌های <li>
• لیست نامرتب (Unordered List): با تگ <ul> و آیتم‌های <li>
• لیست تعریف (Description List): با تگ‌های <dl>، <dt> و <dd>

ویژگی‌های لیست مرتب:

• type - نوع شماره‌گذاری (1, A, a, I, i)
• start - شروع شماره‌گذاری از عدد مشخص
• reversed - شماره‌گذاری معکوس

برای تسلط بیشتر بر مطالب این درس، تمرین‌های زیر را انجام دهید:

تمرین ۱: ساختار عناوین

یک صفحه خبری ایجاد کنید که شامل عنوان اصلی، زیرعناوین و پاراگراف‌های مختلف باشد.

تمرین ۲: قالب‌بندی متن

متنی بنویسید که شامل کلمات پررنگ، کج، برجسته و حذف شده باشد.

تمرین ۳: لیست‌های ترکیبی

لیستی از مواد غذایی ایجاد کنید که شامل زیرلیست‌هایی برای انواع مختلف باشد.

تمرین ۴: نقل قول و ارجاع

از تگ‌های blockquote، q و cite برای ایجاد نقل قول‌ها و ارجاعات استفاده کنید.

بهترین شیوه‌ها:

• از تگ‌های معنایی به جای تگ‌های ظاهری استفاده کنید
• ساختار عناوین را به ترتیب رعایت کنید (h1، h2، h3، ...)
• از strong و em به جای b و i استفاده کنید
• برای شکست خط از br استفاده نکنید، بلکه از CSS استفاده کنید
• محتوای مرتبط را در پاراگراف‌های جداگانه قرار دهید

اشتباهات رایج:

• استفاده از چندین تگ br برای ایجاد فاصله
• استفاده نادرست از تگ‌های عنوان برای تغییر اندازه فونت
• قرار دادن تگ‌های block داخل تگ‌های inline
• استفاده از تگ‌های قدیمی مثل font، center و b

در درس بعدی با لینک‌ها، تصاویر و عناصر چندرسانه‌ای در HTML آشنا خواهید شد.