وانەی 28 لە 67

وانەی ٢٨: هەڵبژاردنی section، article یان aside

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

فایلی دەستپێک دروست بکە و ئەم کۆدانەی خوارە کۆپی بکە ناوی: lesson-28-start.html
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>ڕێبەری چا</title>
  </head>
  <body>
    <main>
      <h1>ڕێبەری چا</h1>
      <h2>چاکانمان</h2>
      <h3>چای سیلانی ڕەش</h3>
      <p>چایێکی ڕەش بە تامێکی بەهێز، لە سریلانکاوە.</p>
      <h3>چای سەوزی سێنچا</h3>
      <p>جۆرێکی چای سەوزە لە ژاپۆنەوە.</p>
      <h2>ئامۆژگاری بۆ دروستکردنی چا</h2>
      <p>بۆ چای سەوز، دوای کوڵاندنی ئاوەکە کەمێک بوەستە، پاشان بەکاری بهێنە.</p>
    </main>
  </body>
</html>



ناوەڕۆکی ئەم وانەیە بەشی ١: توخمی section بەشی ٢: توخمی article بەشی ٣: زانیاریی لاوەکی بە aside

بەشی ١: توخمی section

فایلی دەستپێک بکەرەوە. دوو جۆر چامان هەیە و ئامۆژگارییەکیش بۆ دروستکردنی چا.
 چۆن لە HTMLـەکەدا ڕوون بکەینەوە کە کام ناوەڕۆکان پێکەوە بەشێک پێک دەهێنن؟
بۆ کۆکردنەوەی ناوەڕۆکی یەک بابەت، <section> بەکاردەهێنین. بۆ نموونە، سەردێڕی «چاکانمان» و زانیاریی هەردوو جۆرە چاکە پێکەوە دەخەینە ناو <section>:

<section>
  <h2>چاکانمان</h2>
  <h3>چای سیلانی ڕەش</h3>
  <p>چایێکی ڕەش بە تامێکی بەهێز، لە سریلانکاوە.</p>
  <h3>چای سەوزی سێنچا</h3>
  <p>جۆرێکی چای سەوزە لە ژاپۆنەوە.</p>
</section>

ئەم بەشە بابەتێکی دیاریکراوی هەیە: ئەو چایانەی پێشکەشیان دەکەین. زۆرجار <section> سەردێڕێکی هەیە کە بابەتەکەی ڕوون دەکاتەوە، وەک <h2> لەم نموونەیەدا.

بەشی ٢: توخمی article

ئێستا سەیری ناساندنی هەر جۆرە چایەک بکە. هەریەکەیان ناوی چاکە و زانیارییەکی دەربارەی خۆی هەیە. ئەگەر ناساندنەکە بە تەنها لە شوێنێکی تر پیشان بدەین، هێشتا دەزانین باس لە چی دەکات.
بۆ پارچە ناوەڕۆکێکی لەم جۆرە کە بە سەربەخۆیی مانای هەیە، دەتوانین <article> بەکاربهێنین.

با ناساندنی هەر چایەک لەناو <article>ـێک دابنێین:
<section>
  <h2>چاکانمان</h2>

  <article>
    <h3>چای سیلانی ڕەش</h3>
    <p>چایێکی ڕەش بە تامێکی بەهێز، لە سریلانکاوە.</p>
  </article>

  <article>
    <h3>چای سەوزی سێنچا</h3>
    <p>جۆرێکی چای سەوزە لە ژاپۆنەوە.</p>
  </article>
</section>

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

بەشی ٣: زانیاریی لاوەکی بە aside

بەشی ماوە ئامۆژگارییەکەی دروستکردنی چایە. بابەتی سەرەکیی ئەم لاپەڕەیە ناساندنی چاکانە. ئامۆژگارییەکە پەیوەندی بەو بابەتەوە هەیە، بەڵام زانیارییەکی لاوەکییە. بۆیە لەناو <aside> دایدەنێین:
<aside>
  <h2>ئامۆژگاری بۆ دروستکردنی چا</h2>
  <p>بۆ چای سەوز، دوای کوڵاندنی ئاوەکە کەمێک بوەستە، پاشان بەکاری بهێنە.</p>
</aside>

لەبیرت بێت، <aside> بە مانای ئەوە نییە کە ناوەڕۆکەکە دەچێتە تەنیشتی شاشە. ئەم توخمە ڕۆڵی ناوەڕۆکەکە دیاری دەکات؛ شوێنی پیشاندانی دەتوانین دواتر بە CSS ڕێک بخەین.

کەواتە، لە خۆت بپرسە:

 ناوەڕۆکی یەک بابەت کۆ دەکەمەوە؟ <section>. 

پارچە ناوەڕۆکێکە کە بە سەربەخۆیی مانای هەیە؟ <article>.

 زانیارییەکی لاوەکیی پەیوەندیدارە؟ <aside>.

هەڵەیەکی باو: <section> تەنها بۆ کۆکردنەوەی توخمەکان بۆ دیزاین بەکاربهێنیت، بەبێ ئەوەی بابەتێکی هاوبەشیان هەبێت. بۆ کۆکردنەوەی گشتی، لە وانەی داهاتوودا <div> دەناسین.
پوختە
  • <section> ناوەڕۆکی یەک بابەت کۆ دەکاتەوە و زۆرجار سەردێڕی هەیە.
  • <article> بۆ پارچە ناوەڕۆکێکە کە بە سەربەخۆیی مانای هەیە.
  • <aside> بۆ زانیاریی لاوەکییە کە پەیوەندی بە ناوەڕۆکی دەوروبەری هەیە.
  • ئەم توخمانە بەپێی ڕۆڵی ناوەڕۆکەکە هەڵبژێرە. بە خۆیان دیزاین یان شوێنێکی تایبەتی بۆ دیاری ناکەن.
ڕاهێنان
١. لەناو <section>ـی «چاکانمان»، <article>ـێکی نوێ بۆ «چای هەفتە» زیاد بکە. سەردێڕێک و پەرەگرافێکی کورتی بۆ بنووسە.
٢. ئامۆژگارییەکی تری پەیوەندیدار بە چا، بۆ <aside>ـەکە زیاد بکە.
٣. پشکنەر بکەرەوە و دڵنیابەرەوە کە سەردێڕ و پەرەگرافی هەر <article>ـێک لەناو هەمان توخمەکەدان.

نموونە

html
<!doctype html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <title>ڕێبەری چا</title>
  </head>
  <body>
    <main>
      <h1>ڕێبەری چا</h1>

      <section>
        <h2>چاکانمان</h2>

        <article>
          <h3>چای سیلانی ڕەش</h3>
          <p>چایێکی ڕەش بە تامێکی بەهێز، لە سریلانکاوە.</p>
        </article>

        <article>
          <h3>چای سەوزی سێنچا</h3>
          <p>جۆرێکی چای سەوزە لە ژاپۆنەوە.</p>
        </article>
      </section>

      <aside>
        <h2>ئامۆژگاری بۆ دروستکردنی چا</h2>
        <p>
          بۆ چای سەوز، دوای کوڵاندنی ئاوەکە کەمێک بوەستە، پاشان بەکاری بهێنە.
        </p>
      </aside>
    </main>
  </body>
</html>
خۆت تاقی بکەرەوە ↗

ئەنجام

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