სურათის ჩასმა

რას ისწავლი

• როგორ ჩასვა სურათი <img> ელემენტით
• რას ნიშნავს src და რატომ არის alt სავალდებულო
• სად შეინახო სურათები და რა ხდება, როცა ფაილი ვერ მოიძებნა

img ელემენტი

სურათს გვერდზე <img> ელემენტი აჩენს (image, სურათი):

<img src="/icons/icon-192.png" alt="რობოტი ბიტი, CodeQuest-ის თილისმა">

<img> ცარიელი ელემენტია: დამხურავი ტეგი არ აქვს, რადგან შინაარსი, სურათი, ცალკე ფაილშია. რაც ბრაუზერს სჭირდება, ატრიბუტებშია:

• src (source, წყარო): სურათის ფაილის მისამართი. ის ზუსტად ისე იწერება, როგორც ბმულის href: ფარდობითი (images/cat.jpg), საიტის ძირიდან (/icons/icon-192.png) ან აბსოლუტური (https://...).
• alt (alternative, ალტერნატიული): სურათის ტექსტური აღწერა. მას შემდეგ თავში დაწვრილებით ვისწავლით, მაგრამ ახლავე დაიმახსოვრე: alt ყოველ სურათს სჭირდება.

როგორ მოდის სურათი

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

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

ჩვეულებრივ სურათები ცალკე საქაღალდეში ინახება, მაგალითად images:

my-site/
  index.html
  images/
    me.jpg
    dog.png

index.html-დან მათზე მისამართი იქნება images/me.jpg. ფაილების სახელებს იგივე წესები ეხება, რაც გვერდებს: პატარა ლათინური ასოები, ინტერვალების გარეშე. Chemi Dzaghli.JPG ჯობს დაარქვა dog.jpg. სერვერებზე დიდი და პატარა ასოები ხშირად სხვადასხვაა: Dog.JPG და dog.jpg ორი სხვადასხვა ფაილია, და სურათი, რომელიც შენს კომპიუტერში ჩანდა, გამოქვეყნების შემდეგ შეიძლება გაქრეს.

როცა სურათი ვერ მოიძებნა

თუ src არასწორია, მაგალითად ფაილის სახელში შეცდომაა, ბრაუზერი სერვერისგან იღებს პასუხს „ვერ ვიპოვე“ (ცნობილი შეცდომა 404). ეკრანზე გამოჩნდება გატეხილი სურათის ხატულა და alt ტექსტი. სწორედ ამიტომ არის alt ასე მნიშვნელოვანი: როცა სურათი ვერ ჩაიტვირთა, ადამიანი მაინც გაიგებს, რა უნდა ყოფილიყო მის ადგილას.

სხვა საიტის სურათები

ტექნიკურად შეგიძლია სხვა საიტზე არსებული სურათის აბსოლუტური მისამართი ჩაწერო. მაგრამ ორი საფრთხეა: სურათი შეიძლება ნებისმიერ დროს წაიშალოს, და ის, სავარაუდოდ, საავტორო უფლებით არის დაცული. გამოიყენე საკუთარი სურათები ან ისეთები, რომელთა გამოყენებაც ავტორმა ნება დართო, და ყოველთვის მიუთითე წყარო.

სცადე თავად

გაუშვი. პირველი სურათი ჩანს, მეორის მისამართში კი შეცდომაა: ნახე, როგორ გამოიყურება გატეხილი სურათი და მისი alt. მერე გაასწორე მეორე მისამართი, რომ ორივე ჩანდეს.

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

• href src-ის ნაცვლად. სურათს src სჭირდება, href ბმულისთვისაა.
• დამხურავი ტეგი. </img> არ არსებობს.
• დავიწყებული alt. სურათი ჩაიტვირთება, მაგრამ მისი შინაარსი ბევრისთვის მიუწვდომელი დარჩება.

<h1>ჩემი ალბომი</h1>
<img src="/icons/icon-192.png" alt="რობოტი ბიტი ლურჯ ფონზე">
<p>ეს ბიტია, CodeQuest-ის თილისმა.</p>
<img src="/og.jpg" alt="CodeQuest-ის ბანერი რობოტით და სათაურით">
<p>ეს ბანერი ჩანს, როცა საიტის ბმულს აზიარებენ.</p>

მინი-ქვიზი

შეჯამება

• სურათი: <img src="მისამართი" alt="აღწერა">, დამხურავი ტეგის გარეშე.
• src ბმულის href-ის მსგავსად იწერება: ფარდობითი, ძირიდან ან აბსოლუტური.
• სურათები ცალკე საქაღალდეში შეინახე, მარტივი სახელებით.
• გატეხილი სურათის ადგილას alt ჩანს. სხვისი სურათები მხოლოდ ნებართვით.