پروژه؛ صفحهٔ درباره و اتصال سه فایل

صفحهٔ دوم؛ محتوای مستقل، منوی مشترک

نمونهٔ زیر را در about.html ذخیره کن. مسیرها نسبت به همین فایل‌اند. متن را متناسب با کارگاه خودت تغییر بده، اما ساختار معنایی و ناوبری را حفظ کن.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>کارگاه HTML | درباره</title>
  <meta name="description" content="هدف و مهارت‌های کارگاه HTML از صفر.">
</head>
<body>
  <a href="#main-content">رفتن به محتوای اصلی</a>
  <header>
    <nav aria-label="منوی اصلی">
      <a href="index.html">خانه</a>
      <a href="about.html" aria-current="page">درباره</a>
      <a href="register.html">ثبت‌نام</a>
    </nav>
  </header>
  <main id="main-content" tabindex="-1">
    <h1>دربارهٔ کارگاه</h1>
    <p>در این کارگاه بدون پیش‌نیاز، یک سایت سه‌صفحه‌ای می‌سازیم.</p>
    <section>
      <h2>مهارت‌هایی که تمرین می‌کنیم</h2>
      <ul>
        <li>ساختار معنایی و ناوبری</li>
        <li>تصویر و جدول دسترس‌پذیر</li>
        <li>فرم با برچسب و اعتبارسنجی</li>
      </ul>
    </section>
  </main>
  <footer>
    <address>تماس: <a href="mailto:hello@example.com">hello@example.com</a></address>
  </footer>
</body>
</html>

aria-current="page" لینک صفحهٔ فعلی را مشخص می‌کند؛ در هر صفحه آن را روی لینک مربوط به همان صفحه بگذار. hello@example.com نشانی نمونه است؛ برای سایت واقعی جایگزینش کن.

اکنون از index.html به about.html برو و بازگرد. لینک register.html را هم امتحان کن؛ تا زمانی که آن فایل را نسازی، صفحهٔ مقصد کامل نیست. در مرحلهٔ بعد فرم آن را می‌سازیم.

بازبینی: عنوان برگهٔ خانه و درباره باید متفاوت باشد. هر صفحه یک main و یک h1 دارد، اما منوی سه‌لینکی مشترک است. در گوشی و با Tab هم رفت‌وبرگشت را آزمایش کن.