وانەی 23 لە 67

وانەی ٢٣: لیستی ڕیزنەکراو: ul و li

ناوەڕۆکی ئەم وانەیە بەشی ١: لیست ul بەشی ٢: پەیوەندی نێوان لیست ul و بەندەکانی li بەشی ٣: لە ڕستەیەکەوە بۆ لیستێک

بەشی ١: لیست ul

«زۆرجار لە لاپەڕەیەکدا پێویستمان بە پیشاندانی کۆمەڵێک شت هەیە؛ وەک جۆرەکانی چا لە مێنیوێکدا، یان ئەو شتانەی دەمانەوێت بیانکڕین. لەجیاتی ئەوەی هەموویان لە ڕستەیەکی درێژدا بنووسین، دەتوانین لیستیان بکەین.
کاتێک ڕیزبەندیی بەندەکان گرنگ نییە، لیستی ڕیزنەکراو بەکاردەهێنین. بۆ دروستکردنی ئەم لیستە، توخمی <ul> بەکاردێت.ul کورتکراوەی unordered list ـە
هەر بەندێک توخمی <li>ـە. «li» کورتکراوەی list itemـە، واتە بەندی لیست. وێبگەڕ خاڵەکان بە شێوەی بنەڕەتی زیاد دەکات.

نموونە

html
<ul>
  <li>چای ڕەش</li>
  <li>چای سەوز</li>
  <li>چای گیایی</li>
</ul>
خۆت تاقی بکەرەوە ↗

ئەنجام

بەشی ٢: پەیوەندی نێوان لیست ul و بەندەکانی li

تێکستی هەر بەندێک لەنێوان <li> و </li> بنووسە. ئەم توخمانەی <li> ڕاستەوخۆ لەناو <ul> دادەنرێن. لەناو بەندێکدا دەتوانین، جگە لە تێکست، لینک یان تەنانەت لیستێکی تریش دابنێین.
تێبینیی: خاڵەکان وێبگەڕ خۆی زیاد دەکات؛ پێویست ناکات ئێمە بیاننووسین. دواتر دەتوانین بە CSS شێوەیان بگۆڕین.

بەشی ٣: لە ڕستەیەکەوە بۆ لیستێک

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

<ul>
  <li>چای ڕەش</li>
  <li>چای سەوز</li>
  <li>چای گیایی</li>
  <li>چای نەعنا</li>
</ul>

خوێنەر دەتوانێت بە خێرایی بەندەکانی ببینێت و بیخوێنێتەوە، و زیادکردنی یەک بەندی تر ئاسانە.

هەڵەیەکی باو: تێکست ڕاستەوخۆ لەناو <ul> بنووسیت بەبێ ئەوەی لەناو <li>ـێکدا بیپێچیتەوە.
پوختە
  • <ul> لیستێک دروست دەکات کە ڕیزبەندییەکەی گرنگ نییە.
  • هەر بەندێک <li>ـێکە لەناو <ul>.
  • وێبگەڕەکان بە شێوەی بنەڕەتی خاڵ پیشان دەدەن.
  • تێکست ڕاستەوخۆ لەناو <ul> دامەنێ. <li> بەکاربهێنە.
ڕاهێنان
١. چوار شت لیست بکە کە لەدروستکردن یاپراغدا پێویستت دەبێت.
٢. بەندی پێنجەم زیاد بکە. 
٣. ڕستەیەک لە هەر لاپەڕەیەکەوە وەربگرە، و بیکە بە لیستێک.

نموونە

html
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>مێنیوی چا</title>
  </head>
  <body>
    <h1>مێنیوی چا</h1>
  <ul>
    <li>چای ڕەش</li>
    <li>چای سەوز</li>
    <li>چای گیایی</li>
    <li>چای نەعنا</li>
  </ul>
  </body>
</html>
خۆت تاقی بکەرەوە ↗

ئەنجام

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