وانەی 27 لە 67

وانەی ٢٧: بەشەکانی لاپەڕە: header، nav، main و footer

ماوە: نزیکەی ٣ خولەک، لە ٣ بەشی کورت.

فایلی دەستپێک دروست بکە: lesson-27-start.html

<!DOCTYPE html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>چایخانە</title>
  </head>
  <body>
    <h1>چایخانە</h1>
    <a href="index.html">سەرەکی</a>
    <a href="menu.html">مێنیو</a>
    <a href="contact.html">پەیوەندی</a>
    <h2>بەخێربێیت</h2>
    <p>هەموو ڕۆژێک چای تازە پێشکەش دەکەین.</p>
    <p>&copy; 2026 چایخانە</p>
  </body>
</html>

تێبینی: لاپەڕەکانی ناو لینکەکان لە فایلەکانی ئەم وانەیەدا نین. لێرە تەنها بۆ پیشاندانی گروپێک لینک بەکاریان دەهێنین.

ناوەڕۆکی ئەم وانەیە

بەشی ١: هەر بەشێک چ کارێک دەکات؟ بەشی ٢: ناوەڕۆکەکان لەناو توخمە گونجاوەکان دابنێ بەشی ٣: بۆچی ئەم پێکهاتەیە گرنگە؟

بەشی ١: هەر بەشێک چ کارێک دەکات؟

فایلی دەستپێک بکەرەوە. ناوی چایخانە، سێ لینک، پەیامێکی بەخێرهاتن و دێڕێکی مافی لەبەرگرتنەوەمان هەیە.

ئێمە بە خوێندنەوە دەزانین هەر بەشێک چ کارێک دەکات. بەڵام چۆن ئەم پەیوەندییانە لە HTMLـەکەشدا ڕوون بکەینەوە؟

بۆ ئەوە، چوار توخم بەکاردەهێنین:

<header> بۆ بەشی پێشەکی"بەشی سەرەوەی ماڵپەڕ"، وەک ناوی ماڵپەڕەکە.
<nav> بۆ لینکە سەرەکییەکانی بەشەکانی مەڵپەڕەکە و لاپەڕەکان.
<main> بۆ ناوەڕۆکی سەرەکیی ئەم لاپەڕەیە.
<footer> بۆ زانیارییەکانی وەک مافی لەبەرگرتنەوە و خاوەنی ناوەڕۆکەکە.

ئەم توخمانە یارمەتیمان دەدەن ڕۆڵی بەشەکانی لاپەڕەکە دیاری بکەین.

بەشی ٢: ناوەڕۆکەکان لەناو توخمە گونجاوەکان دابنێ

با لە ناوی چایخانەکە دەست پێ بکەین. <h1> لەناو <header> دادەنێین.

پاشان سێ لینکەکە لەناو <nav> دادەنێین. لەم نموونەیەدا، <nav>ـەکەش لەناو <header> دادەنێین. ئەمە شێوازێکی باوە، بەڵام پێویست نییە هەمیشە لەناو <header> بێت.

ناونیشانی «بەخێربێیت» و پەرەگرافەکەی دەخەینە ناو <main>. دێڕی مافی لەبەرگرتنەوەش دەخەینە ناو <footer>

<body>
  <header>
    <h1>چایخانە</h1>
    <nav>
      <a href="index.html">سەرەکی</a>
      <a href="menu.html">مێنیو</a>
      <a href="contact.html">پەیوەندی</a>
    </nav>
  </header>

  <main>
    <h2>بەخێربێیت</h2>
    <p>هەموو ڕۆژێک چای تازە پێشکەش دەکەین.</p>
  </main>

  <footer>
    <p>&copy; 2026 چایخانە</p>
  </footer>
</body>

لەوانەیە لە ڕووخساری لاپەڕەکەدا جیاوازییەکی زۆر نەبینیت. بەڵام ئێستا لە کۆدەکەدا ڕوونە کامیان بەشی پێشەکییە، کامیان لینکە سەرەکییەکانە و کامیان ناوەڕۆکی سەرەکییە.

تێبینی: <header> بە خۆی بەشێک لە سەرەوەی شاشە جێگیر ناکات، و <footer>یش بەشێک لە خوارەوەی شاشە جێگیر ناکات. بۆ ڕێکخستنی ڕووخسار و شوێنی بەشەکان، دواتر CSS بەکاردەهێنین.

بەشی ٣: بۆچی ئەم پێکهاتەیە گرنگە؟

ئەم توخمانە تەنها بۆ ڕێکخستنی کۆد بۆ خوێندنەوەی خۆمان نین. ڕۆڵی ناوەڕۆکەکەش بۆ وێبگەڕ و ئامێرەکانی خوێندنەوەی شاشە ڕوون دەکەنەوە.

بۆ نموونە، کەسێک کە ئامێری خوێندنەوەی شاشە بەکاردەهێنێت، دەتوانێت بە یارمەتی ئەم بەشانە ڕاستەوخۆ بچێتە سەر ناوەڕۆکی سەرەکی یان بەشی لینکە سەرەکییەکان.

دوو خاڵ لەبیر بێت:

یەکەم، لە لاپەڕەکانی ئەم کۆرسەدا یەک <main> بەکاربهێنە و ناوەڕۆکی سەرەکیی لاپەڕەکە لەناوی دابنێ. ناوی ماڵپەڕ و لینکە هاوبەشەکان کە لە لاپەڕەکانی تریشدا دووبارە دەبنەوە، لە دەرەوەی ئەم بەشە دەمێننەوە.

دووەم، <nav> بۆ گروپە سەرەکییەکانی لینکە. پێویست ناکات هەر لینکێک یان هەر گروپێکی بچووکی لینک بخەیتە ناو <nav>.

هەڵەیەکی باو: <main> بۆ هەر بەشێکی لاپەڕەکە دووبارە بکەیتەوە. لەم نموونەیەدا، تەنها یەک <main>مان هەیە کە ناوەڕۆکی سەرەکی لەخۆ دەگرێت.

پوختە

<header> بۆ ناوەڕۆکی پێشەکییە، وەک ناوی ماڵپەڕ.
<nav> بۆ گروپە سەرەکییەکانی لینکی گواستنەوەیە.
<main> ناوەڕۆکی سەرەکیی لاپەڕەکە لەخۆ دەگرێت.
<footer> بۆ زانیارییەکانی وەک مافی لەبەرگرتنەوە و خاوەنی ناوەڕۆکەکەیە.
ئەم توخمانە ڕۆڵی ناوەڕۆکەکە دیاری دەکەن؛ دیزاینی لاپەڕەکە دواتر بە CSS ڕێک دەخەین.

ڕاهێنان

١. لە کۆپییەکی فایلی دەستپێکدا، ناوەڕۆکەکان لەناو <header>، <nav>، <main> و <footer> دابنێ.

٢. پشکنەر بکەرەوە و هەر چوار توخمەکە بدۆزەرەوە. دڵنیابەرەوە کە ناوەڕۆکی سەرەکی لەناو یەک <main>ـدایە.

٣. تەنها تاگەکانی <nav> و </nav> لاببە و لینکەکان بهێڵەرەوە. لاپەڕەکە نوێ بکەرەوە و پێکهاتەکە لە پشکنەردا بەراورد بکە. پاشان تاگەکان بگەڕێنەرەوە.

نموونە

html

<!DOCTYPE html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>چایخانە</title>
  </head>
  <header>
      <h1>چایخانە</h1>
      <nav>
        <a href="index.html">سەرەکی</a>
        <a href="menu.html">مێنیو</a>
        <a href="contact.html">پەیوەندی</a>
      </nav>
    </header>

    <main>
      <h2>بەخێربێیت</h2>
      <p>هەموو ڕۆژێک چای تازە پێشکەش دەکەین.</p>
    </main>

    <footer>
      <p>&copy; 2026 چایخانە</p>
    </footer>
  </body>
</html>

خۆت تاقی بکەرەوە ↗

دەستکاری HTML بکە

ئەنجام

چوونەژوورەوە بۆ پاشەکەوتکردنی پێشکەوتنت لە فێربووندا.