img ტეგის HTML ატრიბუტები. სურათები HTML-ში - ყველაფერი IMG ტეგის შესახებ. გამოსახულების ფორმატი ვებისთვის

აღწერა

გრაფიკული სურათების HTML დოკუმენტში ჩასართავად გამოიყენეთ HTML ტეგი (imgსტენოგრამა ინგლისურად სიტყვები გამოსახულება- გამოსახულება). სურათები პირდაპირ არ არის ჩასმული ვებ გვერდზე; ტეგი მოთავსებულია სურათებზე და ქმნის საჭირო ზომის სივრცეს, რომელშიც გამოსახულება არის ნაჩვენები გრაფიკული ფორმატით GIF, JPEG ან PNG:

  • JPG არის ფოტოების ყველაზე დიდი ფორმატი. Extensions.jpg სურათები აჩვენებს მილიონობით ფერს, რაც განსაკუთრებით მნიშვნელოვანია ფოტოების სხვადასხვა ჩრდილებისა და გრადიენტების ზუსტი ჩვენებისთვის. თუმცა, ასეთი სურათები ვერ ფარავს ტერიტორიის ხედვას.
  • GIF გამოიყენება მარტივი გრაფიკისთვის, როგორიცაა ლოგოები. სურათები GIF ფორმატში არ არის დამუშავებული ფოტოებისთვის, ამიტომ ისინი ვერ შეიცავენ იმდენი ფერის ინფორმაციას, როგორც JPG სურათებს. თუმცა, GIF სურათებს შეიძლება ჰქონდეს დიდი ფართობი და შეიძლება იყოს შეკუმშული თუნდაც მცირე ფაილებად. GIF ფორმატი ასევე მხარს უჭერს ანიმაციას.
  • PNG არის გამოსახულების ფორმატი, რომელიც, ისევე როგორც JPG, საშუალებას გაძლევთ აჩვენოთ მილიონობით ფერი და მოათავსოთ სხვადასხვა ზონა. თუმცა, როგორც წესი, გაფართოებული .png სურათები უფრო დიდი ზომისაა ვიდრე JPG ან GIF.

HTML ტეგი არსებობს ორი სავალდებულო ატრიბუტი: src და alt.

src ატრიბუტი მნიშვნელოვან როლს ასრულებს გვერდით გამოსახულ გრაფიკაში - ის განსაზღვრავს გზას (აბსოლუტური ან აბსოლუტური) გამოსახულებისკენ, რომელიც არ არის ჩასმული გვერდზე: ბრაუზერი აჩვენებს სურათს გაგზავნილი სახით.

alt ატრიბუტი განსაზღვრავს გამოსახულების ალტერნატიულ ტექსტს, რომელიც მხოლოდ ამ შემთხვევაში გამოჩნდება იმ შემთხვევაში, თუ სურათის ჩვენება შეუძლებელია (მცდარი გზაა მითითებული ან გამოსახულების ჩვენება).

თუ სურათი გჭირდებათ, შეგიძლიათ გააკეთოთ მოთხოვნა, რომელიც მოითხოვს ტეგის განთავსებას ელემენტის შუაში. როდესაც ეს მოხდება, სურათის გვერდით გამოჩნდება ჩარჩო, რაც გაადვილებს დახმარების მიღებას CSS:

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

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

ატრიბუტები

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

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

მაგალითი » ვინაიდან სურათი ვიკორიზებულია, როგორც ვებ გვერდის დეკორაცია და არ ატარებს რაიმე სემანტიკურ მნიშვნელობას, სურათის აღწერის ნაცვლად, მნიშვნელობა შეიძლება ამოღებულ იქნას ცარიელი მწკრივიდან (alt=""). სიმაღლე: განსაზღვრავს გამოსახულების სიმაღლეს პიქსელებში. ismap: ismap ატრიბუტი არის ლოგიკური ტიპის ატრიბუტი. მისი არსებობა ეუბნება ბრაუზერს, რომ სურათი არის სერვერზე გამოსახული გამოსახულების რუკის ნაწილი (სურათის რუკა არის სურათი ინტერაქტიული უბნებით). სწორი მნიშვნელობები ლოგიკური ismap ატრიბუტისთვის: სურათის რუქის ინტერაქტიულ არეალზე დაწკაპუნებისას, დაწკაპუნების კოორდინატები იგზავნება სერვერზე URL მისამართთან ერთად.

შენიშვნა: ismap ატრიბუტი გამოიყენება მხოლოდ ელემენტად როგორც თეგის ბავშვის ელემენტი რა უნდა გააკეთოს href ატრიბუტთან.

Usemap: ნიშნავს სურათს, როგორც გამოსახულების რუკას. ამ ატრიბუტში მითითებული მნიშვნელობა (ცხადია, შეიძლება დაიწყოს "#" სიმბოლოთი) ასოცირდება სახელის ატრიბუტის ან ტეგის id მნიშვნელობასთან. ის ქმნის კავშირებს ელემენტებს შორის і . კონდახი »

შენიშვნა: usemap ატრიბუტი არ შეიძლება შეიცვალოს ელემენტად є ელემენტზე ან კიდევ