وانەی 14 لە 67

وانەی ١٤: توخمی img: src و alt

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

فایلەکانی دەستپێک: فۆڵدەرێک بە ناوی lesson-14 لەگەڵ index.htmlـێکی بەتاڵ (لاپەڕەکە بە ناونیشانی «ڕێبەری چا») و فۆڵدەرێکی images:
بەم شێوەیە:
lesson-14/
├── index.html
└── images/
    ├── tea-glass.jpg
    └── teapot.jpg
ناوەڕۆکی ئەم وانەیە بەشی ١: یەکەم وێنە <img> بەشی ٢: تایبەتمەندی alt بەشی ٣: وێنەیەکی شکاو چاک بکەرەوە

بەشی ١: یەکەم وێنە <img>

با وێنەیەک بخەینە سەر لاپەڕەکە. لە HTML دا توخمی <img> بەکاردەهێنین. «img» کورتکراوەی image ـە، واتە وێنە.
ئەمە لەناو <body> بنووسە:
<img src="images/tea-glass.jpg" alt="چایێکی ڕەشی گەرم لە پیالەیەکی بچووکدا لەسەر ژێرپیالەیەک">

تایبەتمەندی src بە وێبگەڕ دەڵێت فایلی وێنەکە لە کوێیە. «src» کورتکراوەی sourceـە، واتە سەرچاوە. بەهاکە ڕێڕەوە، وەک ئەو ڕێڕەوانەی لە وانەکانی ١٠ و ١١ بۆ لینکەکان بەکارمان هێنا. لێرەدا فایلی tea-glass.jpg لەناو فۆڵدەری imagesـدایە.


سەرنج بدە <img> ناوەڕۆک و تاگی کۆتایی نییە. توخمی بەتاڵە (Void Element)، وەک <br>.

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

بەشی ٢: تایبەتمەندی alt

تایبەتمەندی دووەم altـە. وەسفێکی کورتی وێنەکە هەڵدەگرێت، بە وشە. پێی دەڵێین تێکستی جێگرەوە (Alternative text).

لەبەر ئەوە گرنگە کە ئامێرەکانی خوێندنەوەی شاشە بە دەنگ بۆ ئەو کەسانەی ناتوانن وێنەکە ببینن دەیخوێننەوە. وێبگەڕ دەکرێت پیشانی بدات ئەگەر وێنەکە نەتوانرێت باربکرێت، و بزوێنەرەکانی گەڕان (Search Engines) یش بەکاری دەهێنن.

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

بەشی ٣: وێنەیەکی شکاو چاک بکەرەوە

ئەگەر ڕێڕەوەکە هەڵە بێت چی ڕوو دەدات؟ ناوی فایلەکە بگۆڕە بۆ شتێک کە بوونی نییە:
<img src="images/tea-glas.jpg" alt="چایێکی ڕەشی گەرم لە پیالەیەکی بچووکدا لەسەر ژێرپیالەیەک">

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

بۆیە تێکستی alt یارمەتیدەرە. تەنانەت کاتێک وێنەکە نیە، سەردانکەر دەزانێت چی دەبوایە لەوێ بێت. بۆ چاککردنی، ڕێڕەوەکە بپشکنە، وەک لەگەڵ لینکەکان کردمان. ئایا ناوی فایلەکە بە دروستی نووسراوە؟ ئایا ناوی فۆڵدەری images لەناو ڕێڕەوەکەدایە؟ چاکی بکە، و وێنەکە دەگەڕێتەوە.


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

پوختە

  • توخمی <img> وێنەیەک پیشان دەدات. ناوەڕۆک و تاگی کۆتایی نییە.
  • src ڕێڕەوی فایلی وێنەکەیە.
  • alt وێنەکە بە وشە وەسف دەکات، بۆ ئەو کەسانەی ناتوانن ببینن.
  • ئەگەر وێنەیەک پیشان نەدرا، ڕێڕەوەکە بپشکنە.

ڕاهێنان


١. وێنەکە بگۆڕە بۆ teapot.jpg، و وەسفێکی نوێ بنووسە. 

٢. بە ئەنقەست ناوی فایلەکە بە هەڵە بنووسە. وێنە شکاوەکە ببینە، پاشان چاکی بکەرەوە.

<body>
  <h1>ڕێبەری چا</h1>
  <img src="images/tea-glass.jpg" alt="چایێکی ڕەشی گەرم لە پیالەیەکی بچووکدا لەسەر ژێرپیالەیەک">
</body>

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