შესვლა

HTML › დამწყები › სურათები

სურათი წარწერით

მარტივი⏱ 6 წთ+20 XP👑 Pro#HTML#figure#figcaption#სემანტიკა

რას ისწავლი

  • როგორ დააკავშირო სურათი და მისი წარწერა <figure>-ით და <figcaption>-ით
  • რით განსხვავდება წარწერა alt-ისგან
  • რა შეიძლება ჩაიდოს <figure>-ში სურათის გარდა

სურათი და მისი წარწერა

წიგნებსა და ჟურნალებში სურათს ხშირად ქვეშ წარწერა ახლავს: „სურ. 3. მთვარის ფაზები“. HTML-ს ამისთვის სპეციალური წყვილი აქვს:

HTML
<figure>
  <img src="/og.jpg" alt="ბანერი რობოტით და წარწერით CodeQuest" width="400" height="210">
  <figcaption>CodeQuest-ის ბანერი, რომელიც ბმულის გაზიარებისას ჩანს.</figcaption>
</figure>
  • <figure> (ილუსტრაცია) არის გარსი დამოუკიდებელი შინაარსისთვის: სურათი, დიაგრამა, კოდის მაგალითი, რომელზეც ტექსტი მიუთითებს, მაგრამ რომელიც თავისთავადაც გასაგებია.
  • <figcaption> (ილუსტრაციის წარწერა) ამ შინაარსის სათაური ან აღწერაა. ის <figure>-ის შიგნით, პირველ ან ბოლო ელემენტად იწერება.

შეიძლებოდა უბრალოდ სურათის ქვეშ აბზაცი დაგვეწერა. მაგრამ <figure> და <figcaption> ბრაუზერს, ეკრანის წამკითხველს და საძიებო სისტემას ეუბნება, რომ ეს წარწერა სწორედ ამ სურათს ეკუთვნის. ეს ისევ სემანტიკური HTML-ია: ელემენტი მნიშვნელობით ირჩევა.

ბრაუზერი <figure>-ს ნაგულისხმევად მარცხნიდან და მარჯვნიდან ოდნავ შეწეულად აჩვენებს, წარწერას კი ჩვეულებრივი შრიფტით. თუ გინდა, რომ წარწერა დახრილი, პატარა ან ცენტრში იყოს, ამას CSS-ში გააკეთებ. HTML-ის საქმე ისაა, რომ წარწერა და სურათი ერთმანეთს დააკავშიროს. სამეცნიერო სტატიებში, სახელმძღვანელოებში და ახალი ამბების საიტებზე ასეთი წყვილი ყველგან შეგხვდება.

წარწერა და alt ერთი და იგივე არ არის

ეს ხშირი დაბნეულობაა:

  • alt სურათს ჩაანაცვლებს მათთვის, ვინც მას ვერ ხედავს. ის აღწერს, რა ჩანს სურათზე.
  • <figcaption> ყველასთვის ჩანს და სურათს ამატებს ინფორმაციას: ვინ არის ავტორი, როდის და სად არის გადაღებული, რატომ არის საინტერესო.
HTML
<figure>
  <img src="lake.jpg" alt="მთის ტბა, წყალში თოვლიანი მწვერვალები ირეკლება" width="600" height="400">
  <figcaption>ტბა აბუდელაური, ხევსურეთი. ფოტო: ნინო, მე-6 კლასი.</figcaption>
</figure>

ერთი და იგივე ტექსტის ორივეში ჩაწერა ზედმეტია: ეკრანის წამკითხველის მომხმარებელი მას ორჯერ მოისმენს.

არა მარტო სურათები

<figure>-ში შეიძლება იყოს ყველაფერი, რაც ილუსტრაციის როლს ასრულებს: რამდენიმე სურათი ერთად, დიაგრამა, ციტატა ან კოდის მაგალითი:

HTML
<figure>
  <pre><code>console.log("გამარჯობა!");</code></pre>
  <figcaption>პროგრამა 1. პირველი ბრძანება JavaScript-ში.</figcaption>
</figure>

წესი ასეთია: თუ შინაარსი შეიძლება ტექსტის სხვა ადგილას გადაიტანო, მაგალითად ცალკე, გვერდით ან დანართად, და ტექსტი მაინც გასაგები დარჩება, ის <figure>-ია. დეკორატიული სურათი ან ხატულა კი <figure> არ არის.

სცადე თავად

გაუშვი. მერე დაამატე მეორე <figure> ბიტის სურათით (/icons/icon-192.png) და შენი წარწერით.

HTML · სცადე თავად

ხშირი შეცდომები

  • იგივე ტექსტი alt-ში და წარწერაში. alt აღწერს, რა ჩანს, წარწერა ამატებს ინფორმაციას.
  • <figcaption> <figure>-ის გარეთ. წარწერა მხოლოდ <figure>-ის შიგნით მუშაობს, პირველ ან ბოლო ადგილას.
  • ყველა სურათი <figure>-ში. ხატულები და დეკორაცია ილუსტრაცია არ არის.

სავარჯიშო

ააწყე ბიოლოგიის გვერდის ფრაგმენტი: აბზაცი, რომ ბიტი რობოტია და არა ცხოველი, ხოლო მის ქვეშ <figure> ბიტის სურათით (/icons/icon-512.png, 160×160), კარგი alt-ით და წარწერით სურ. 2. ბიტი ხელს გვიქნევს.

HTML · სცადე თავად
💡 მინიშნება

<figure>-ში ჯერ <img>, მერე <figcaption>.

✅ ამოხსნის ნახვა
HTML
<p>ბიტი რობოტია და არა ცხოველი, მაგრამ მას მეგობრები ჰყავს ბიოლოგიის კლასშიც.</p>
<figure>
  <img src="/icons/icon-512.png" alt="ლურჯი რობოტი მწვანე თვალებით" width="160" height="160">
  <figcaption>სურ. 2. ბიტი ხელს გვიქნევს.</figcaption>
</figure>

მინი-ქვიზი

1რომელი ელემენტი წერს სურათის წარწერას?

2რით განსხვავდება figcaption alt-ისგან?

3რა შეიძლება იყოს <figure>-ში?

შეჯამება

  • <figure> დამოუკიდებელი ილუსტრაციის გარსია, <figcaption> მისი წარწერა.
  • alt აღწერს, რა ჩანს, წარწერა ამატებს ინფორმაციას. ერთნაირი ტექსტი ორივეში არ ჩაწერო.
  • figure-ში შეიძლება იყოს სურათი, დიაგრამა, კოდი ან ციტატა.
  • დეკორაცია და ხატულები figure არ არის.
📝 ჩემი შენიშვნა