برو به محتوا
HTML و CSS مقدماتیدرس ۴ از ۲۰

شروع: وب و اولین صفحه

عنوان‌ها و پاراگراف‌ها

سلسله‌مراتب h1 تا h6، چرا هر صفحه فقط یک h1 دارد، پاراگراف و شکستن خط، و فرق strong با b.

  • ۱۴ دقیقه
  • ۱ تمرین زنده
  • آزمونک
  • رایگان
در این درس یاد می‌گیرید
  • متن را با عنوان‌های درست ساختار دهید
  • بدانید چرا اندازهٔ عنوان را CSS تعیین می‌کند، نه شمارهٔ آن
  • بین معنا (strong، em) و ظاهر (b، i) تفاوت بگذارید

عنوان‌ها از ‎<h1>‎ تا ‎<h6>‎ شش سطح دارند. h1 عنوان خود صفحه است، h2 عنوان بخش‌های آن، h3 زیربخش‌ها و همین‌طور تا آخر — درست مثل فهرست مطالب یک کتاب.

HTML
<h1>راهنمای سفر به یزد</h1>

<h2>کجا بمانیم</h2>
<p>خانه‌های سنتی در بافت قدیم…</p>

<h2>چه بخوریم</h2>
<h3>صبحانه</h3>
<p>…</p>

عنوان را به خاطر اندازه‌اش انتخاب نکنید. اگر متنی بزرگ‌تر لازم است ولی عنوان نیست، اندازه‌اش را با CSS بزرگ کنید؛ شمارهٔ عنوان دربارهٔ جایگاه متن است، نه اندازه‌اش.

پاراگراف و شکستن خط

هر پاراگراف یک ‎<p>‎ است. مرورگر فاصله‌ها و خط‌های اضافهٔ داخل کد را یکی می‌کند؛ پس با Enter زدن در کد، خط تازه‌ای روی صفحه نمی‌سازید. برای شکستن خط داخل یک پاراگراف — مثل نشانی یا شعر — ‎<br>‎ هست، ولی برای ایجاد فاصله نه: فاصله کار CSS است.

معنا یا ظاهر

  • ‎<strong>‎ یعنی «این مهم است» (مرورگر پررنگش می‌کند)؛ ‎<b>‎ فقط پررنگ است، بی‌معنای خاص.
  • ‎<em>‎ یعنی تأکید در خواندن؛ ‎<i>‎ فقط ظاهر مورب است (مثلاً برای اصطلاح خارجی).
تمرین

یک مقالهٔ کوتاه بسازید: یک h1 برای عنوان، دو بخش با h2 که هرکدام یک پاراگراف دارند، و یک عبارت مهم داخل ‎<strong>‎.

باید برسید به:
  • فقط یک h1
  • دست‌کم دو h2
  • دست‌کم دو پاراگراف
  • یک عبارت مهم در strong
پیش‌نمایش زنده

واژه‌های این درس

Heading
عنوان؛ از h1 تا h6.
Semantic
معنایی: تگی که می‌گوید محتوا چیست، نه این‌که چه شکلی است.

آزمونک درس

۳ پرسش — سرور مشعل تصحیح می‌کند و دلیل هر پاسخ را می‌گوید.

  1. ۱یک صفحه چند h1 باید داشته باشد؟

  2. ۲متنی را فقط می‌خواهید بزرگ‌تر نشان دهید. چه می‌کنید؟

  3. ۳‎<strong>‎ چه معنایی دارد؟