وانەی 17 لە 67

وانەی ١٧: وێنە وەک لینک

فایلەکانی دەستپێک: فۆڵدەرێک بە ناوی lesson-17 لەگەڵ index.html و فۆڵدەرێکی images. وێنەکان tea-thumb.jpgـن، وەشانە بچووکەکە (300لە 225 پیکسڵ)، و tea-large.jpg، وەشانە گەورەکە (1200 لە 900 پیکسڵ). لە فۆڵدەرەکەدا teapot.jpgیش هەیە (800 لە 600 پیکسڵ) بۆ ڕاهێنانەکە.
lesson-17/
├── index.html
└── images/
    ├── tea-thumb.jpg
    ├── tea-large.jpg
    └── teapot.jpg

لاپەڕەکە ئەمەی لەناو <body> هەیە:

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

لەم بەستەرانە وێنەکان دابەزێنە: 


ناوەڕۆکی ئەم وانەیە بەشی ١: وێنەکە بخەرە ناو لینکێک <img> لەناو توخمی <a> بەشی ٢: تێکستی alt بۆ لینک بەشی ٣: بە کیبۆرد تاقی بکەرەوە

بەشی ١: وێنەکە بخەرە ناو لینکێک <img> لەناو توخمی <a>

لینک مەرج نییە هەر تێکست بێت. دەتوانێت وێنە بێت. توخمی <img> لەناو توخمی <a> دابنێ:
<a href="images/tea-large.jpg">
  <img src="images/tea-thumb.jpg" alt="چایێکی ڕەشی گەرم لە پیالەیەکی بچووکدا لەسەر ژێرپیالەیەک">
</a>

href ئاماژە دەکات بۆ وەشانە گەورەکەی وێنەکە. وێنە بچووکەکە لینکەکەیە.

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

بەشی ٢: تێکستی alt بۆ لینک

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

بۆیە باس لەوە بکە کە لینکەکە بۆ کوێ دەچێت، نەک تەنها وێنەکە چی پیشان دەدات:
<a href="images/tea-large.jpg">
  <img src="images/tea-thumb.jpg" alt="وێنەی پیالەی چاکە بە قەبارەی تەواو ببینە">
</a>

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

هەڵەیەکی باو: تەنها وێنەکە وەسف بکەیت، بۆیە ئەو کەسانەی ناتوانن ببینن نازانن لینکەکە بۆ کوێ دەچێت.
هەڵەیەکی باو: تێکستی alt بەتاڵ بهێڵیتەوە کاتێک وێنە تاکە شتە لەناو لینکەکەدا. ئەو کاتە لینکەکە هیچ ناوێکی نییە.

بەشی ٣: بە کیبۆرد تاقی بکەرەوە

با بزانین کار دەکات بەبێ ماوس. دوگمەی Tab لەسەر کیبۆرد بکە تا فۆکەس دەچێتە سەر لینکەکە. دەبێت هێڵێکی فۆکەس بەدەوری وێنەکەدا ببینیت. Enter بکە.

لینکی وێنە لینکێکی ڕاستەقینەیە، بۆیە بە کیبۆردیش کار دەکات.

کۆدی کۆتایی:
<body>
  <h1>ڕێبەری چا</h1>
  <a href="images/tea-large.jpg">
    <img src="images/tea-thumb.jpg" alt="وێنەی پیالەی چاکە بە قەبارەی تەواو ببینە">
  </a>
</body>

پوختە

  • <img> لەناو <a> دابنێ بۆ ئەوەی وێنەیەک بکەیت بە لینک.
  • تێکستی alt ی لینکی وێنە وەک تێکستی لینک کار دەکات. باس لەوە بکە کە لینکەکە بۆ کوێ دەچێت.
  • کاتێک وێنە تاکە ناوەڕۆکی لینکەکەیە، تێکستێکی alt بنووسە کە باس لە شوێنی مەبەستی لینکەکە بکات.
  • لینکی وێنە بە کیبۆرد کار دەکات، وەک هەموو لینکێکی تر.

ڕاهێنان

١. teapot.jpg بکە بە لینک بۆ خۆی. سەرەتا بچووک پیشانی بدە، بە width="160" height="120"، بۆ ئەوەی لینکەکە وەشانە گەورەکە بکاتەوە. 

٢. تێکستی alt بنووسە کە باس لەوە بکات لینکەکە بۆ کوێ دەچێت. 

٣. دوگمەی Tab بەکاربهێنە بۆ گەیشتن بە لینکەکەت، و Enter بکە.

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