وانەی 16 لە 67

وانەی ١٦: figure و figcaption

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

فایلەکانی دەستپێک: فۆڵدەرێک بە ناوی lesson-16 بە هەمان شێوەی وانەی ١٤. لاپەڕەی index.html ئەمەی لەناو <body> هەیە:
<h1>ڕێبەری چا</h1>
<img src="images/tea-glass.jpg" alt="چایێکی ڕەشی گەرم لە پیالەیەکی بچووکدا لەسەر ژێرپیالەیەک" width="400" height="300">
ناوەڕۆکی ئەم وانەیە بەشی ١: وێنەیەک بە دەقی ڕوونکەرەوەوە بەشی ٢: کاری figure و figcaption چییە؟ بەشی ٣: دەقی ڕوونکەرەوە و alt کاری جیاوازیان هەیە

بەشی ١: وێنەیەک بە دەقی ڕوونکەرەوەوە

هەندێک جار وێنەیەک پێویستی بە دەقی ڕوونکەرەوە (caption) هەیە، دێڕێک تێکست کە ناوەڕۆکی زیاتر زیاد دەکات. HTML دوو توخمی بۆ ئەوە هەیە: <figure> و <figcaption>.
توخمی <figure> وێنەکە و دەقی ڕوونکەرەوەکەی پێکەوە دەگرێتە خۆی. توخمی <figcaption> تێکستی دەقی ڕوونکەرەوەکە هەڵدەگرێت.
وێنەکە بەم شێوەیە بگۆڕە:
<figure>
  <img src="images/tea-glass.jpg" alt="چایێکی ڕەشی گەرم لە پیالەیەکی بچووکدا لەسەر ژێرپیالەیەک" width="400" height="300">
  <figcaption>چای بەیانی لەسەر مێزی گۆشەکە.</figcaption>
</figure>

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

بەشی ٢: کاری figure و figcaption چییە؟

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

لە نموونەکەی ئێمەدا، وێنەکە و دەقی ڕوونکەرەوەی لەناو <figure> دادەنێین. بەمەش دیاری دەکەین کە ئەم وێنەیە و ئەم دەقە پەیوەندییان بە یەکەوە هەیە و پێکەوە یەک بەش پێک دەهێنن.

توخمی <figcaption> بۆ نووسینی ئەو دەقە ڕوونکەرەوەیە بەکاردێت. دەبێت لەناو <figure> بێت و یەکەم یان کۆتا توخمی ناوەکەی بێت. لە نموونەی ئێمەدا، دەتوانین پێش وێنەکە یان دوای وێنەکە دایبنێین.

 وەک لە وانەی ٧ فێربووین، پشکنەر بکەرەوە. پیشان بدە کە <img> و <figcaption> هەردووکیان لەناو <figure> دان.

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

بەشی ٣: دەقی ڕوونکەرەوە و alt کاری جیاوازیان هەیە

 ئێستا دوو پارچە تێکستمان هەیە: دەقی ڕوونکەرەوە و تێکستی alt. کاری جیاوازیان هەیە.

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

تێکستی alt جێگەی وێنەکە دەگرێتەوە. بە ئەو کەسانەی ناتوانن ببینن دەڵێت وێنەکە چی پیشان دەدات، وەک «چایێکی ڕەشی گەرم لە پیالەیەکی بچووکدا لەسەر ژێرپیالەیەک».

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

هەڵەیەکی باو: دەقی ڕوونکەرەوەکە وشە بە وشە لە altدا دووبارە بکەیتەوە.

<body>
  <h1>ڕێبەری چا</h1>
  <figure>
    <img src="images/tea-glass.jpg" alt="چایێکی ڕەشی گەرم لە پیالەیەکی بچووکدا لەسەر ژێرپیالەیەک" width="400" height="300">
    <figcaption>چای بەیانی لەسەر مێزی گۆشەکە.</figcaption>
  </figure>
</body>

پوختە

  • <figure> وێنەیەک و دەقی ڕوونکەرەوەکەی پێکەوە دەگرێتە خۆی.
  • <figcaption> تێکستی دەقی ڕوونکەرەوەکە هەڵدەگرێت، وەک یەکەم یان کۆتا توخمی ناو <figure>.
  • دەقی ڕوونکەرەوە ناوەڕۆکی دیار زیاد دەکات. تێکستی alt جێگەی زانیاری بەسوودی وێنەکە دەگرێتەوە.
  • دووبارەکردنەوەی دەقی ڕوونکەرەوە لە تێکستی alt دووربخەرەوە.

ڕاهێنان

١. teapot.jpg لەناو <figure>ی تایبەت بە خۆی زیاد بکە، لەگەڵ دەقێکی ڕوونکەرەوە. 

٢. تێکستی alt بنووسە کە وێنەکە وەسف بکات، و دەقێکی ڕوونکەرەوە کە ناوەڕۆکی زیاتر زیاد بکات. 

٣. پشکنەر بکەرەوە و <figcaption>ـەکەت بدۆزەرەوە.


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