فصل ۳: متن، سرفصل‌ها و قالب‌بندی
فصل ۳: متن، سرفصل‌ها و قالب‌بندی – جادوی کلمات در وب! ✨
سلام به همگی! توی فصل‌های قبلی، ساختار اصلی صفحات وب رو یاد گرفتیم و فهمیدیم چطور یه سند HTML رو از صفر بسازیم. حالا نوبت این رسیده که به محتوای اصلی صفحه، یعنی متن‌ها و نحوه نمایش اون‌ها بپردازیم. توی این فصل، با انواع سرفصل‌ها، پاراگراف‌ها و تگ‌هایی که به متن‌هامون شکل و شمایل می‌دن، آشنا می‌شیم. آماده‌اید جادوی کلمات رو ببینید؟ 😉
این فصل به شما یاد می‌ده چطور اطلاعاتتون رو به شکلی خوانا، منظم و جذاب به مخاطبانتون ارائه بدین.
۱. سرفصل‌ها (Headings): معرفی بخش‌های اصلی متن 📜
وقتی یه متن طولانی می‌نویسیم، برای اینکه خواننده سردرگم نشه، اون رو به بخش‌های مختلف تقسیم می‌کنیم و برای هر بخش یه عنوان یا سرفصل می‌ذاریم. توی HTML هم برای این کار از تگ‌های سرفصل استفاده می‌کنیم. ۶ سطح سرفصل داریم که از مهم‌ترین (<h1>) شروع می‌شه و به کم‌اهمیت‌ترین (<h6>) می‌رسه.
- <h1>: معمولاً برای عنوان اصلی صفحه یا مهم‌ترین سرفصل استفاده می‌شه. هر صفحه بهتره فقط یک <h1> داشته باشه.
- <h2>: برای سرفصل‌های بخش‌های اصلی بعد از <h1>.
- <h3>، <h4>، <h5>، <h6>: برای سرفصل‌های فرعی‌تر و جزئی‌تر.
مثال:
<h1>عنوان اصلی صفحه وب من</h1>
<p>این یه مقدمه برای بخش اصلیه.</p>
<h2>بخش اول: معرفی</h2>
<p>توضیحات مربوط به بخش اول.</p>
<h3>زیربخش اول: تاریخچه</h3>
<p>نگاهی به گذشته.</p>
۲. پاراگراف‌ها (Paragraphs): متن‌های اصلی 📝
برای نوشتن متن‌های عادی و بدنه‌ی مطلب، از تگ پاراگراف، یعنی <p> استفاده می‌کنیم. مرورگرها به طور خودکار بین پاراگراف‌ها کمی فاصله قرار می‌دن تا خوانایی متن بهتر بشه.
مثال:
<p>این اولین پاراگراف از محتوای صفحه ماست. اینجا می‌تونیم اطلاعات مفصل‌تری رو ارائه بدیم.</p>
<p>این پاراگراف دوم هست. معمولاً بین پاراگراف‌ها یک خط خالی قرار می‌گیره.</p>
۳. قالب‌بندی متن (Text Formatting): زیبایی و تاکید! 🎨
گاهی لازم هست که بخشی از متن رو پررنگ‌تر، کج یا زیرخط‌دار کنیم تا اهمیتش رو نشون بدیم یا توجه کاربر رو به اون قسمت جلب کنیم. تگ‌های مختلفی برای این کار وجود دارن:
- <b>…</b> (Bold): متن رو پررنگ می‌کنه. معمولاً برای جلب توجه بدون اینکه اهمیت معنایی اضافه کنه استفاده می‌شه.
- <strong>…</strong> (Strong Importance): متن رو هم پررنگ می‌کنه، اما اهمیت معنایی بیشتری داره و نشون می‌ده که این بخش از متن خیلی مهمه.
- <i>…</i> (Italic): متن رو کج (ایتالیک) می‌کنه.
- <em>…</em> (Emphasis): متن رو هم کج می‌کنه، اما تاکید معنایی بیشتری رو نشون می‌ده.
- <u>…</u> (Underline): متن رو زیرخط‌دار می‌کنه (البته این تگ کمتر توصیه می‌شه چون ممکنه با لینک اشتباه گرفته بشه).
- <mark>…</mark> (Marked Text): متن رو مثل هایلایتر، با یه پس‌زمینه رنگی نشون می‌ده.
- <small>…</small> (Small Text): متن رو کوچیک‌تر از متن معمولی نمایش می‌ده.
- <sub>…</sub> (Subscript): متن رو به صورت زیرنویس نمایش می‌ده (مثلاً در فرمول‌های شیمیایی مثل H₂O).
- <sup>…</sup> (Superscript): متن رو به صورت بالانویس نمایش می‌ده (مثلاً در توان‌های ریاضی مثل x²).
مثال ترکیب تگ‌ها:
<p>این یک متن عادیه، اما کلمه <b>پررنگ</b> شده.</p>
<p>این کلمه <strong>خیلی مهمه</strong> و پررنگ نمایش داده می‌شه.</p>
<p>این جمله <i>کمی کج</i> شده.</p>
<p>این کلمه <mark>هایلایت</mark> شده است.</p>
<p>فرمول آب: H<sub>2</sub>O</p>
<p>توان دوم: x<sup>2</sup></p>
استفاده درست از این تگ‌ها نه تنها ظاهر صفحه رو زیباتر می‌کنه، بلکه به خوانایی و درک بهتر محتوا هم کمک شایانی می‌کنه.
با استفاده از این سرفصل‌ها، پاراگراف‌ها و تگ‌های قالب‌بندی، می‌تونین ساختار منظمی به متن‌هاتون بدین و اون‌ها رو برای مخاطبان خودتون جذاب‌تر و قابل فهم‌تر کنین. فصل بعدی منتظر ماست تا با دنیای لیست‌ها و لینک‌ها آشنا بشیم! 🤩