სურათები და ატრიბუტები

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

სურათები

იმისათვის რომ HTML ელემენტში სურათების დამატება შევძლოთ საჭიროა შესაბამისი ელემენტის გამოყენება - <img>.

თუმცა <img> ელემენტი არა მხოლოდ იმით განსხვავდება ჩვეულებრივი ტექსტური ელემენტებისგან რომ მას სხვა ტიპის(სურათების) ინფორმაციის განთავსება შეუძლია დოკუმენტში, მისი ჩანაწერი და სტრუქტურაც განსხვავებულია.

<img> ელემენტს არ აქვს დამხურავი ტეგი

დიახ, პირველი განსხვავება ისაა რომ თუ HTML ელემენტების უმეტესობას აქვს გამხსნელი, დამხურავი ტეგები და მათ შორის მოთავსებული კონტენტი, <img> ელემენტი მხოლოდ ერთი გამხსნელი ტეგით ჩაიწერება.

თუმცა ალბათ იკითხავთ - მაშინ როგორ ხდება სურათის შესაბამისი ინფორმაციის/კონტენტის მოთავსება ამ ელემენტში?

ამაზე პასუხი ატრიბუტებშია 👇

src ატრიბუტი

<img> ელემენტს შეგვიძლია დავუმატოთ სხვადასხვა ატრიბუტები - ინფორმაცია იმ სურათის შესახებ რომლის ჩამატებაც გვსურს ვებ გვერდზე.

ამ ელემენტისთვის ყველაზე მნიშვნელოვანი ატრიბუტია src რომელიც სიტყვა source - ის(ქართულად - წყარო) შემოკლებითი ჩანაწერია.

იმისათვის რომ <img> ელემენტის გამოყენებით ბროუზერმა სურათი დაგვიხატოს ეკრანზე საჭიროა წყაროს მითითება ატრიბუტის სახით - დააკვირდით:

<img src="http://www.programireba.ge/html/tim.jpg">

როგორც ხედავთ ატრიბუტი იწერება თავად გამხსნელი ტეგის შიგნით და ის შედგება რამდენიმე სექციისგან:

1. ატრიბუტის დასახელება src;
2. ტოლობის ნიშანი =;
3. ბრჭყალებში ჩასმული მნიშვნელობა http://www.programireba.ge/html/tim.jpg. ამ შემთხვევაში მნიშვნელობა არის იმ სურათის მისამართი რომელიც გვსურს რომ გამოჩნდეს ჩვენს დოკუმენტში.

ამ შემთხვევაში ვიყენებთ ისეთი სურათის მისამართს რომელიც განთავსებულია programireba.ge - ს სერვერზე. თუმცა თუ გსურთ რომ ის გადმოწეროთ თქვენს კომპიუტერში და თქვენს HTML დოკუმენტთან ერთად გქონდეთ შეგიძლიათ ასე მოიქცეთ:

1. შედი მისამართზე: http://www.programireba.ge/html/tim.jpg
2. გადმოწერე სურათი შენს კომპიუტერში და შეინახე იმავე ფოლდერში სადაც შენი HTML დოკუმენტის ფაილი გაქვს მოთავსებული.
3. ახლა შეგიძლია შეცვალო src ატრიბუტში არსებული მისამართის მნიშვნელობა და რადგან სურათის ფაილი უკვე შენს კომპიუტერში, იმავე ფოლდერშია სადაც HTML დოკუმენტი, კოდი ასეთი გამოგივა:

<img src="tim.jpg">

width და height ატრიბუტები

<img> ელემენტს src - ს გარდა კიდევ 2 მნიშვნელოვანი ატრიბუტი აქვს - width და height. როგორც ამ ატრიბუტების სახელებიდანვე მიხვდებოდით მათი მეშვეობით შეგვიძლია ვმართოთ სურათის სიგანე და სიმაღლე.

ამ ატრიბუტების გამოყენება აუცილებელი არ არის თუმცა რეკომენდირებულია ვებ-გვერდების ოპტიმიზირებულად მუშაობისთვის.

მოდით ვნახოთ როგორ შეიძლება მათი გამოყენება.

<img src="tim.jpg" width="300" height="160">

ამ გზით ბროუზერს ვეუბნებით რამდენი პიქსელი უნდა დაიკავოს ჩვენმა სურათმა ეკრანზე სიგანეში და სიმაღლეში.

მოკლედ ატრიბუტებზე

ამ თავში განხილული src ატრიბუტი არ არის ერთადერთი ატრიბუტი რომელიც HTML ელემენტებში გამოიყენება. უფრო მეტიც - ატრიბუტები ძალიან ბევრნაირია, ბევრ სხვა ელემენტზეც გამოიყენება და მათი ვრცელი სია შეგიძლია ნახო ამ მისამართზე: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

თუმცა ამ ეტაპზე რაიმე აუცილებლობა არ დგას რომ ატრიბუტებს დეტალურად გაეცნო. ნაბიჯ-ნაბიჯ მივყვებით და როდესაც ახალ ელემენტებს გავეცნობით შესაბამის ატრიბუტებსაც მაშინ შევისწავლით.