وانەی 26 لە 67

وانەی ٢٦: پێداچوونەوە: تێکست، لیست، لینک و وێنە

ماوە: نزیکەی ٤ خولەک، لە ٢ بەش.

فایلەکانی دەستپێک: فۆڵدەرێک بە ناوی lesson-26، کە فایلی index.htmlـی تێدایە بۆ دۆزینەوە و چاککردنەوەی هەڵەکان. لەناو فۆڵدەرەکەدا، فۆڵدەرێکی imagesیش هەیە کە وێنەی tea-glass.jpgـی تێدایە.

https://ferbun.com/uploads/courses/html/images/tea-glass.jpg

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

بەشی ١: ناوی توخمەکە بڵێ بەشی ٢: هەڵەکانی لاپەڕەکە چاک بکەرەوە

بەشی ١: ناوی توخمەکە بڵێ

با ببینین چیت لەبیرە لە وانەکانی ٨ تا ٢٥. بازنین بۆ وەڵام ئەم پرسیارانە خوارەوە کام توخم یان تایبەتمەندی بەکاردەهێنیت.

١. ئاگادارکردنەوەیەکی گرنگ کە خوێنەران نابێت لەدەستی بدەن.

٢. وشەیەک یان بەشێکی ڕستە کە دەمانەوێت جەختی لەسەر بکەینەوە.

٣. هەنگاوگەلێک کە دەبێت بە ڕیزبەندی ئەنجام بدرێن.

٤. لینکێک بۆ ماڵپەڕێکی تر کە لە تابێکی نوێدا دەکرێتەوە.

٥. لە pages/team.htmlـەوە، چۆن لینک دەکەیت بۆ index.html لە فۆڵدەری سەرەوەدا؟

٦. وێنەیەک لەگەڵ دەقی ڕوونکەرەوەیەک کە لەسەر لاپەڕەکە دیارە.

٧. پیشاندانی تێکستی  لەسەر لاپەڕەکە، لەجیاتی دروستکردنی پەرەگراف.

٨. تێبینییەک بۆ خۆت کە لەسەر لاپەڕەکە پیشان نادرێت.

وەڵامەکان

١.

٢.

٣. لیستی ڕیزکراو، <ol>، لەگەڵ بەندەکانی <li>

٤.

<a href="https://example.com/" target="_blank" rel="noopener">
  سەردانی ماڵپەڕەکە بکە (لە تابێکی نوێدا دەکرێتەوە)
</a>

٥. href="../index.html". بەشی ../ یەک فۆڵدەر دەچێتە سەرەوە.

٦. <figure> لەگەڵ <img> و <figcaption>

٧. .

٨. کۆمێنت، وەک ئەمە:

<!-- وێنەی چا لێرە زیاد بکە -->

بەشی ٢: هەڵەکانی لاپەڕەکە چاک بکەرەوە

فایلی index.html دروست بکەو لە فۆڵدەری lesson-26 زەخیرەی بکە کۆدەی خوارەوە کۆپی بکە.

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

کۆدی دەستپێک:

<!DOCTYPE html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>ڕێبەری چا</title>
  </head>
  <body>
    <h1>ڕێبەری چا</h1>
    <img src="images/tea-glass.jpg" width="400" height="300">
    <p>بۆ زانیاری زیاتر، <a href="https://example.com/">کرتە لێرە بکە</a>.</p>
    <h2>چۆن چا دروست بکەین</h2>
    <ul>
      <li>ئاوەکە بکوڵێنە.</li>
      <li>چاکە بخە ناو قوریەکە.</li>
      <li>ئاوی گەرمەکە تێ بکە.</li>
      <li>سێ خولەک بوەستە.</li>
      <li>چاکە بڕێژە ناو پیالەکان.</li>
    </ul>
    <p><strong>ئاوەکە دەبێت گەرم بێت.</p>
    <p>چێژ لە چاکەت وەربگرە.</p>
  </body>
</html>

کێشەی ١: وێنەکە altـی نییە

ئەم وێنەیە چایەک لەناو پیالەدا پیشان دەدات. وەسفێکی گونجاوی بۆ زیاد دەکەین، بۆ ئەوەی زانیاریی وێنەکە بە تێکستیش بەردەست بێت:

<img src="images/tea-glass.jpg" alt="چای ڕەش لە پیالەیەکی بچووکدا لەسەر ژێرپیالەیەک" width="400" height="300">

کێشەی ٢: تێکستی لینکەکە مەبەستەکەی ڕوون ناکاتەوە

«کرتە لێرە بکە» ناڵێت خوێنەردەچێت بۆ کوێ. لەم نموونەیەدا وا دادەنێین لینکەکە بۆ زانیاری دەربارەی مێژووی چایە، بۆیە تێکستەکە دەگۆڕین بۆ «مێژووی چا». example.com لێرە تەنها ناونیشانێکی نموونەییە

<p>بۆ زانیاری زیاتر، دەربارەی <a href="https://example.com/">مێژووی چا</a> بخوێنەرەوە.</p>

کێشەی ٣: هەنگاوەکان لەناو <ul>ـدان

چونکە ڕیزبەندیی ئەم هەنگاوانە گرنگە، <ol> گونجاوترە. هەم <ul> بگۆڕە بۆ <ol>، هەم </ul> بگۆڕە بۆ </ol>. توخمەکانی <li> وەک خۆیان دەمێننەوە.

کێشەی ٤: تاگی کۆتایی  لەبیر کراوە

سەیری پەرەگرافی «چێژ لە چاکەت وەربگرە.» بکە. ئەویش ئەستوور دەردەکەوێت، هەرچەندە مەبەستمان ئەوە نەبوو. بۆ چاککردنەوەی،  پێش ـی پەرەگرافی یەکەم دابنێ:

<p><strong>ئاوەکە دەبێت گەرم بێت.</strong></p>

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

پوختە

توخمەکان بەپێی مانا هەڵبژێرە:  بۆ گرنگی،  بۆ جەختکردنەوە، <ol> کاتێک ڕیزبەندی گرنگە، و <ul> کاتێک ڕیزبەندی گرنگ نییە.
تێکستی لینکەکە وا بنووسە کە مەبەستی لینکەکە ڕوون بکاتەوە.
بۆ وێنەی زانیاریبەخش، altـێکی گونجاو بنووسە. بۆ وێنەیەک کە تەنها بۆ ڕازاندنەوەیە، alt="" بەکاربهێنە.
دڵنیابەرەوە ئەو توخمانەی پێویستیان بە تاگی کۆتایی هەیە، بە دروستی داخراون. توخمە بەتاڵەکان، وەک <img> و  ، تاگی کۆتاییان نییە.
پشکنەر بەکاربهێنە بۆ سەیرکردنی پێکهاتەی لاپەڕەکەت.

ڕاهێنان

لاپەڕەکە لە کۆپییەکەی خۆتدا چاک بکەرەوە.

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

نموونە

html

<!DOCTYPE html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>ڕێبەری چا</title>
  </head>
  <body>
    <h1>ڕێبەری چا</h1>

    <img src="images/tea-glass.jpg" alt="چای ڕەش لە پیالەیەکی بچووکدا لەسەر ژێرپیالەیەک" width="400" height="300">

    <p>بۆ زانیاری زیاتر، دەربارەی <a href="https://example.com/">مێژووی چا</a> بخوێنەرەوە.</p>

    <h2>چۆن چا دروست بکەین</h2>
    <ol>
      <li>ئاوەکە بکوڵێنە.</li>
      <li>چاکە بخە ناو قوریەکە.</li>
      <li>ئاوی گەرمەکە تێ بکە.</li>
      <li>سێ خولەک بوەستە.</li>
      <li>چاکە بڕێژە ناو پیالەکان.</li>
    </ol>

    <p><strong>ئاوەکە دەبێت گەرم بێت.</strong></p>
    <p>چێژ لە چاکەت وەربگرە.</p>
  </body>
</html>

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

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

ئەنجام

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