وانەی 32 لە 67

وانەی ٣٢: پێداچوونەوە: پێکهاتەی لاپەڕە Page Structure

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

بەشی ١: توخمی گونجاو هەڵبژێرە بەشی ٢: کۆدەکان چاک بکەرەوە

بەشی ١: توخمی گونجاو هەڵبژێرە

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

١. گروپێک لینک بۆ لاپەڕە سەرەکییەکانی ماڵپەڕەکە.

٢. ناوەڕۆکی سەرەکیی ئەم لاپەڕەیە.

٣. هەڵسەنگاندنێکی چا کە بە سەربەخۆیی مانای هەیە.

٤. ئامۆژگارییەکی لاوەکی کە پەیوەندی بە ناوەڕۆکی دەوروبەری هەیە.

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

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

وەلامەکان:

١. <nav>

٢. <main>

٣. <article>

٤. <aside>

٥. <footer>

٦. <div>

بەشی ٢: کۆدەکان چاک بکەرەوە

لەم کۆدەی خوارەوە چوار کێشەی لە پێکهاتەکەیدا هەیە. هەندێکیان، وەک دووبارەکردنەوەی هەمان id، کۆدی HTMLـەکە نادروست دەکەن. ئەوانی تر پەیوەندییان بە هەڵبژاردنی توخمێکەوە هەیە کە لەگەڵ مانای ناوەڕۆکەکە دەگونجێت. پێش ئەوەی وەڵامەکان پیشان بدەم، هەوڵ بدە بیان دۆزیتەوە:

<body>
  <header>
    <h1>چایخانە</h1>
    <div>
      <a href="#black">چای ڕەش</a>
      <a href="#green">چای سەوز</a>
    </div>
  </header>

  <p>بەخێربێیت بۆ چایخانەکەمان.</p>

  <main>
    <section id="black">
      <h2>چای ڕەش</h2>
      <p>چای ڕەش تامێکی بەهێزی هەیە.</p>
    </section>
    <section id="black">
      <p>چای سەوز سووکترە.</p>
    </section>
  </main>

  <footer>
    <p>هەموو ڕۆژێک کراوەیە.</p>
  </footer>
</body>

کێشەی ١: لینکەکان لەناو <div>ـدان. ئەمانە لینکە سەرەکییەکانی گواستنەوەن بۆ بەشەکانی ئەم لاپەڕەیە، بۆیە <nav> گونجاوترە. تاگەکانی <div> و </div> بگۆڕە بۆ <nav> و </nav>.

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

کێشەی ٣: <section>ـی دووەم سەردێڕی نییە. زۆرجار بۆ <section> سەردێڕێک دادەنێین کە بابەتەکەی ڕوون بکاتەوە. لێرە <h2>چای سەوز</h2> زیاد بکە.

کێشەی ٤: دوو توخم هەمان idـیان هەیە. هەروەها لینکی «چای سەوز» بەدوای id="green"ـدا دەگەڕێت، بەڵام هیچ توخمێک ئەو idـەی نییە. idـی بەشی دووەم بگۆڕە بۆ green. بەمە هەم دووبارەبوونەوەکە چاک دەبێتەوە، هەم لینکەکە ئامانجی خۆی دەدۆزێتەوە.

کۆدی چاککراو لە خوارەوە ببینە

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

پوختە

<header>، <nav>، <main> و <footer> بۆ دیاریکردنی بەشە سەرەکییەکانی لاپەڕە بەکاربهێنە.
<section> ناوەڕۆکی یەک بابەت کۆ دەکاتەوە و زۆرجار سەردێڕی هەیە.
<article> بۆ پارچە ناوەڕۆکێکە کە بە سەربەخۆیی مانای هەیە.
<aside> بۆ زانیاریی لاوەکییە کە پەیوەندی بە ناوەڕۆکی دەوروبەری هەیە.
<div> و <span> تەنها کاتێک بەکاربهێنە کە هیچ توخمێکی بەواتاتر ناگونجێت.
هەمان بەهای id لە هەر لاپەڕەیەکدا تەنها بە یەک توخم بدە.

ڕاهێنان

لاپەڕەکە لە کۆپییەکەی خۆتدا چاک بکەرەوە. پاشان بۆ هەر چاککردنەوەیەک، یەک ڕستە بنووسە و ڕوون بکەرەوە بۆچی گرنگەcomment.

نموونە

html

<!doctype html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <title>چایخانە</title>
  </head>
  <body>
  <header>
    <h1>چایخانە</h1>
    <nav>
      <a href="#black">چای ڕەش</a>
      <a href="#green">چای سەوز</a>
    </nav>
  </header>

  <main>
    <p>بەخێربێیت بۆ چایخانەکەمان.</p>
    <section id="black">
      <h2>چای ڕەش</h2>
      <p>چای ڕەش تامێکی بەهێزی هەیە.</p>
    </section>
    <section id="green">
      <h2>چای سەوز</h2>
      <p>چای سەوز سووکترە.</p>
    </section>
  </main>

  <footer>
    <p>هەموو ڕۆژێک کراوەیە.</p>
  </footer>
</body>
</html>

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

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

ئەنجام

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