HTML - სურათები - თავი 5

დროა HTML დოკუმენტები კიდევ უფრო სახალისო და მრავალფეროვანი გავხადოთ და ვისწავლოთ როგორ გამოვიყენოთ სურათები.

რა არის სურათი?

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

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

საინტერესო ფაქტი

პირველი ფოტო რომელიც ინტერნეტში გამოქვეყნდა ეკუთვნოდა ბენდს სახელად "Les Horribles Cernettes". ბენდი პაროდიულ სახეს ატარებდა და ის CERN - ის თანამშრომლებმა შექმნეს:

უფრო ვრცლად ბენდის შესახებ ინფოს შეგიძლიათ გაეცნოთ აქ

HTML სურათების სინტაქსი

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

img ელემენტი განსაკუთრებულია! - სხვებისგან განსხვავებით მას არ აქვს დამხურავი ტეგი რადგან ის არ შეიცავს რაიმე ტიპის კონტენტს. მისი დანიშნულება მხოლოდ სურათის მისამართის მითითება და მისამართიდან ჩატვირთულ სურათს ბროუზერი პირდაპირ ხატავს ეკრანზე.

სურათის ელემენტს 2 მნიშვნელოვანი ატრიბუტი აქვს src სადაც ვწერთ სურათის ფაილის მისამართს და alt სადაც ვწერთ ალტერნატიულ ტექსტს - როგორც წესი სურათის აღწერას ისეთი სიტუაციებისთვის როცა სურათის ჩატვირთვა ვერ მოხერხდა რაიმე პრობლემის გამო.

მაგალითი:

<img src="myimage.jpg" alt="A description of the image">

HTML სურათის ზომები

ყველა სურათს აქვს სიგრძე და სიგანე, თუმცა HTML დოკუმენტის შექმნისას ხშირად ხდება ისე რომ სურათისთვის ზომის მითითება გვჭირდება რომ ზუსტად ისე ჩაჯდეს გვერდზე როგორც ჩვენ გვინდა. ამიტომ <img> ტეგში შეგვიძლია მივუთითოთ კიდევ 2 დამატებითი ატრიბუტი width და height რომლებიც სურათის ზომების გასაკონტროლებლად გამოიყენება.

მაგალითი:

<img src="myimage.jpg" alt="A description of the image" width="500" height="600">

HTML სურათები როგორც ბმულები

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

სხვა სიტყვებით რომ ვთქვათ,შეგვიძლია <a> ელემენტის კონტენტად, ტექსტის მაგივრად <img> ელემენტი ჩავსვათ.

მაგალითი:

<a href="https://www.example.com">
  <img src="myimage.jpg" alt="A description of the image">
</a>

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

დავალებები

1. შექმენი ახალი HTML ფაილი და მასში გამოიყენე სურათეების შესაბამისი ელემენტი ამ თავში განხილული ყველა თვისებითა და კომბინაციით.
2. დაამატე სურათი შენს ვებ-გვერდზე და შეუცვალე სიგრძე და სიგანე. სცადე ზომების რამდენიმე ვერსია და დააკვირდი რგორ იცვლება შედეგი. მინიშნება: თუ სურათები გაგეწელა, სცადე მხოლოდ სიგრძის ან მხოლოდ სიმაღლის მითითება და დააკვირდი რა მოხდება.
3. შექმენი სურათი რომელზე დაკლიკების დროსაც გაიხსნება https://www.bitcamp.ge.