სურათი უბრალოდ არ არის ჩასმული პირდაპირ ტექსტში. ბრაუზერს ეცნობა მისი სახელი და ინსტრუქცია, სად და როგორ უნდა განთავსდეს იგი ეკრანზე. ამისათვის გამოიყენეთ ერთი HTML img ტეგი. ის განსაზღვრავს გრაფიკული ობიექტის მდებარეობას ვებ გვერდზე.
თუ ბევრი ატრიბუტი არჩევითია ტეგებისთვის, მაშინ img ტეგს უნდა ჰქონდეს მინიმუმ ერთი პარამეტრი - სურათის მისამართი. ამ ატრიბუტს ჰქვია src:
- - გამოჩნდება goat-j.webp" />
- - img ტეგის ამ პარამეტრით ბრაუზერი ჩატვირთავს ინტერნეტში განთავსებულ სურათს საიტზე megasellmag.ru.
გასწორების ატრიბუტები
HTML-ის გამოყენებით გვერდზე გამოსახულების განთავსებისთვის გამოიყენება img ტეგი, რომლის ატრიბუტები პასუხისმგებელია სურათის გვერდზე განთავსებაზე და მისი ტექსტის შეფუთვის ბუნებაზე.
ნაგულისხმევად, ბრაუზერი ათავსებს სურათს ეკრანის ცენტრში და ტექსტი არ ახვევს მას. img ტეგი საშუალებას მოგცემთ გამოხატოთ თქვენი უთანხმოება ბრაუზერთან align ატრიბუტის (alignment) გამოყენებით.
- სურათი განლაგდება გვერდის მარცხენა კიდეზე, ხოლო ტექსტი ირგვლივ მარჯვნივ.
ტექსტის ქცევა მსგავსი იქნება, თუ გამოსახულება განთავსდება მარჯვნივ (გასწორება=მარჯვნივ), შუაში (გასწორება=შუა), ზემოდან (გასწორება=ზემოდან), ქვემოთ.(გასწორება=ქვედა) და ცენტრი (ცენტრი).
პარამეტრები და ზომები
გამოსახულებაში ტექსტის შეღწევის თავიდან ასაცილებლად, img ტეგმა შეიძინა სპეციალური ატრიბუტები -hspace (ჰორიზონტალური/ჰორიზონტალური მინდვრები) და vspace (ვერტიკალური/ვერტიკალური მინდვრები), რომლებიც განსაზღვრავენ ტექსტის ჩაღრმავების რაოდენობას სურათების კიდეებიდან. პიქსელები.
სურათი არა მხოლოდ მორჩილად დაშორდება ტექსტს მითითებული ოდენობით, არამედ გვერდის კიდესაც, ამიტომ უმჯობესია, თავი აარიდოთ დიდ ჩაღრმავებებს.
ძალიან მნიშვნელოვანია გამოსახულების გეომეტრიული ზომები, რომლებიც არა მხოლოდ სასურველია, არამედ ზოგჯერ უბრალოდ აუცილებელია გამოსახულების სწორად ჩვენებისთვის დაზუსტება. ამისთვის გამოიყენება ატრიბუტები სიგანე (სიგანე) და სიმაღლე (სიმაღლე), რომელთა მნიშვნელობა მითითებულია პიქსელებში ან პროცენტებში.
თუ მხოლოდ სიგანეს მიუთითებთ, სიმაღლე ავტომატურად შეირჩევა ორიგინალური პროპორციებით. პროცენტული ზომები საშუალებას გაძლევთ განათავსოთ სურათი გვერდის მარჯვენა ნაწილში, ბრაუზერის ფანჯრის ზომის მიუხედავად და ეს საჭიროება ხშირად ჩნდება.
სხვა ვარიანტები
საზღვრის ატრიბუტი ათავსებს სურათს მითითებული სისქის ჩარჩოში, რასაც ბრაუზერი ნაგულისხმევად არ აკეთებს.
საზღვარს ასევე შეიძლება ჰქონდეს ერთი შეხედვით უაზრო ნულოვანი სიგანე (საზღვარი='0'), მაგრამ ეს ხდება მანამ, სანამ სურათი არ გახდება ბმული, როდესაც ბრაუზერი ავტომატურად შემოხაზავს მას ლურჯი საზღვრით ინსტრუქციების მოლოდინის გარეშე.
ზოგიერთი მოუთმენელი მომხმარებელი, გაბრაზებული დაბალი ინტერნეტის სიჩქარით, უბრალოდ გამორთავს სურათების ჩვენებას. ასეთ შემთხვევებში მოწოდებულია alt პარამეტრი, რომელიც საშუალებას გაძლევთ შეიყვანოთალტერნატიული ტექსტი, რომელსაც მომხმარებელი დაინახავს ველში, სადაც სურათი ჩქარობს ჩატვირთვას.
თუ არ მოგწონთ alt პარამეტრის შესაძლებლობები, img ტეგს შეუძლია შესთავაზოს longdesc ატრიბუტი, რომლის მნიშვნელობა არის დოკუმენტის URL უფრო დეტალური აღწერილობით.
usemap და ismap ატრიბუტები ბრაუზერს ეუბნება, რომ სურათი იქნება სურათი, რომელშიც ჰიპერბმულები ცალკე უბნებია (ბმულის რუკა), მხოლოდ usemap პარამეტრი განსაზღვრავს ნავიგაციის რუკას სერვერზე, ხოლო ismap - რუკაზე. კლიენტის მხარე.
ბმულის აღწერა 1 ქვემოთ მოცემულ ფიგურაში:
ეგზოტიკური ნივთები
lowsrc ატრიბუტი ავალებს ბრაუზერს, ჯერ ჩამოტვირთოს ორიგინალური სურათის ასლი (ან სხვა ალტერნატივა) უფრო დაბალი ხარისხით და, შესაბამისად, "მსუბუქი". ეს ხრიკი გათვალისწინებულია მომხმარებლისთვის ინტერნეტის დაბალი სიჩქარის შემთხვევაში. ორიგინალური სურათი, ატვირთვისას, ცვლის "ყალბს".
img ტეგის ნაკლებად ხშირად გამოყენებული galleryimg ატრიბუტი იწვევს გამოსახულების მართვის პანელს (როდესაც მაუსის ზევით არის დატანილი), რაც საშუალებას გაძლევთ გახსნათ ნაგულისხმევი My Pictures საქაღალდე და დაბეჭდოთ, შეინახოთ ან ელფოსტით გამოსახულება. თქვენ შეგიძლიათ გამორთოთ პანელი galleryimg პარამეტრის no/false-ზე დაყენებით და ჩართოთ yes/true-ის დაყენებით..
ახალი HTML5 სპეციფიკაციაში, რამდენიმე ტეგს აქვს გარკვეული პარამეტრი მოძველებული. მაგალითად, img-ის lowsrc, border, longdesc და name ატრიბუტები ამოღებულ იქნა.
