გამოყენება HTML IMG Tag for სურათები და ობიექტები
HTML IMG tag მართავს სურათების და სხვა სტატიკური გრაფიკული ობიექტების ჩასმა ვებ გვერდის ფარგლებში. ეს საერთო ტეგი მხარს უჭერს რამდენიმე სავალდებულო და სურვილისამებრ ატრიბუტს, რომელიც დაამატეთ სიმდიდრეს თქვენს შესაძლებლობებს, რათა შეიმუშავონ ჩართვა, გამოსახულების ფოკუსირებული ნახვა.
მაგალითი სრულად ჩამოყალიბებული HTML IMG tag ასე გამოიყურება:
საჭირო IMG Tag ატრიბუტები
SRC. ერთადერთი ატრიბუტი თქვენ უნდა მიიღოთ გამოსახულება, რათა აჩვენოთ ვებ გვერდზე, არის SRC ატრიბუტი. ეს ატრიბუტი განსაზღვრავს გამოსახულების ფაილის სახელი და მდებარეობა.
ალტ. სწორი XHTML და HTML4- ის დასაწერად ALT- ს ატრიბუტი ასევე აუცილებელია. ეს ატრიბუტი გამოიყენება არაპროფილი ბრაუზერების ტექსტით, რომელიც აღწერს სურათს. ბრაუზერები ალტერნატიულ ტექსტს სხვადასხვა გზით აჩვენებენ. ზოგიერთი აჩვენებს მას, როგორც პიქტოგრამაზე, როდესაც თქვენ მაუსის გადაღებას ანიჭებთ სურათს, ზოგი აჩვენებს მას თვისებებში, როდესაც მარჯვენა სურათზე დააწკაპუნეთ და ზოგი არ აჩვენებს მას.
გამოიყენეთ ალტერნატივა იმ სურათის შესახებ, რომელიც არ არის შესაბამისი ან მნიშვნელოვანი ვებ-გვერდის ტექსტისთვის. მაგრამ გახსოვდეთ, რომ ეკრანის მკითხველსა და სხვა ტექსტურ ბრაუზერებში, ტექსტი წაიკითხავს გვერდს დანარჩენ ტექსტთან ერთად. დაბრკოლების თავიდან აცილების მიზნით, გამოიყენეთ აღწერითი ალტერნატივა, რომელიც ამბობს, რომ (მაგალითად), "ვებ-დიზაინისა და HTML- ის შესახებ" ნაცვლად მხოლოდ "ლოგო".
HTML5- ში ALT- ის ატრიბუტი ყოველთვის არ არის საჭირო, რადგან თქვენ შეგიძლიათ გამოიყენოთ წარწერა დამატებითი აღწერილობისთვის. ასევე შეგიძლიათ გამოიყენოთ ატრია-DESCRIBEDBY ატრიბუტი ID- ს, რომელიც შეიცავს სრულ აღწერას.
Alt ტექსტი ასევე არ არის საჭირო, თუ გამოსახულება არის მხოლოდ დეკორატიული, როგორიცაა გრაფიკული ზევით ვებ გვერდზე ან ხატები. მაგრამ თუ არ ხართ დარწმუნებული, შეიტანეთ alt text მხოლოდ იმ შემთხვევაში.
რეკომენდებული IMG ატრიბუტები
სიგანე და სიმაღლე . ყოველთვის უნდა შეიტანოთ ჩვევა ჩანართზე და სიმაღლეზე. და ყოველთვის უნდა გამოიყენოთ რეალური ზომა და არ შეცვალოთ თქვენი სურათები ბრაუზერით.
ეს ატრიბუტები დააჩქარებს გვერდის გაწევას, რადგან ბრაუზერი განათავსებს გამოსახულების დიზაინში სივრცეში და შემდეგ გააგრძელეთ დანარჩენი შინაარსი, ვიდრე მთელი სურათის გადმოსაწერად.
სხვა სასარგებლო IMG ატრიბუტები
TITLE . ატრიბუტი არის გლობალური ატრიბუტი, რომელიც შეიძლება გამოყენებულ იქნას ნებისმიერი HTML ელემენტისთვის . უფრო მეტიც, TITLE ატრიბუტი საშუალებას გაძლევთ დაამატოთ დამატებითი ინფორმაცია გამოსახულების შესახებ.
ბრაუზერის უმეტესობა მხარს უჭერს TITLE ატრიბუტს, მაგრამ ისინი ამას სხვადასხვა გზით აკეთებენ. ზოგიერთი ცარიელია ტექსტი, როგორც pop-up ხოლო სხვები არიან ის საინფორმაციო ეკრანები, როდესაც მომხმარებლის მარჯვენა დაწკაპუნებით გამოსახულება. თქვენ შეგიძლიათ გამოიყენოთ TITLE ატრიბუტი იმისათვის, რომ დაამატოთ დამატებითი ინფორმაცია გამოსახულების შესახებ, მაგრამ არ იფიქროთ ამ ინფორმაციის ან დამალული ან ხილული. თქვენ უნდა ნამდვილად არ გამოიყენოთ ეს დამალვა სიტყვა საძიებო სისტემებში. ეს პრაქტიკა ახლა დაჯილდოებულია ყველაზე საძიებო სისტემებით.
USEMAP და ISMAP . ეს ორი ატრიბუტი ქმნის კლიენტის მხარეს () და სერვერის მხარეს (ISMAP) სურათების რუკები თქვენს სურათებს.
LONGDESC . ატრიბუტი მხარს უჭერს URL- ს სურათის უფრო ფართო აღწერას. ეს ფუნქცია თქვენს სურათებს უფრო ხელმისაწვდომი გახდის.
მოხსნილი და მოძველებული IMG ატრიბუტები
რამდენიმე ატრიბუტი ახლა მოძველებულია HTML5- ში ან HTML4- ში. საუკეთესო HTML- ისთვის, თქვენ უნდა იპოვოთ სხვა გადაწყვეტილებები ამ ატრიბუტების გამოყენების ნაცვლად.
BORDER . ატრიბუტი განსაზღვრავს სიგანე პიქსელზე ნებისმიერი საზღვრის პიქსელით. HTML4- ში CSS- ის სასარგებლოდ უარყოფილია და HTML5- ში მოძველებულია.
ალენი . ეს ატრიბუტი საშუალებას გაძლევთ ტექსტის განთავსება ტექსტის შიგნით და მის ირგვლივ ტექსტის გაშლა. თქვენ შეგიძლიათ დაამატოთ გამოსახულება მარჯვნივ ან მარცხნივ. HTML4- ისთვის float CSS- ის სასარგებლოდ უარყოფილია და HTML5- ში მოძველებულია.
HSPACE და VSPACE . HSPACE და VSPACE ატრიბუტები თეთრი სივრცის ჰორიზონტალურად (HSPACE) და ვერტიკალურად (VSPACE). თეთრი სივრცე დაემატება გრაფიკული (ზედა და ქვედა ან მარცხნივ და მარჯვნივ) ორივე მხარეს, ასე რომ, თუ საჭიროა სივრცე ერთ მხარეს, უნდა გამოიყენოთ CSS. ეს ატრიბუტები არ დაემორჩილა HTML4- ის მარჟის CSS საკუთრების სასარგებლოდ და ისინი მოძველებულია HTML5- ში.
LOWSRC . LOWSRC ატრიბუტი უზრუნველყოფს ალტერნატიულ სურათს, როდესაც თქვენი გამოსახულების წყარო იმდენად დიდია, რომ ის ძალიან ნელა ჩამოტვირთვებს. მაგალითად, თქვენ შეიძლება ჰქონდეს სურათი, რომელიც 500KB არის, რომ გსურთ თქვენს ვებ გვერდზე, მაგრამ 500KB დასჭირდება დიდი ხანია ჩამოტვირთოთ. ასე რომ თქვენ შექმნით სურათების ბევრად უფრო პატარა ასლს, ალბათ შავი და თეთრი ან უბრალოდ ძალიან ოპტიმიზირებულია და დაამატე, რომ LOWSRC ატრიბუტი. პატარა გამოსახულება ჩამოტვირთვას და გამოაქვეყნებს პირველს, ხოლო შემდეგ, როდესაც სურათის უფრო დიდი გამოსახულება ჩნდება დაბალ წყაროზე.
LOWSRC ატრიბუტი დაემატა Netscape Navigator 2.0 IMG ტეგისთვის. ეს იყო DOM- ის დონე 1-ის ნაწილი, მაგრამ DOM- ის დონე 2-ისგან ამოღებულ იქნა. ბროუზერი მხარდაჭერილია ამ ატრიბუტისთვის, თუმცა ბევრი საიტები აცხადებენ, რომ ის მხარს უჭერს ყველა თანამედროვე ბრაუზერს. ეს არ არის შეწყვეტილი HTML4 ან მოძველებული HTML5, რადგან ეს იყო არასდროს ოფიციალური ნაწილი არც დაზუსტება.
თავიდან აცილება ამ ატრიბუტი და ნაცვლად ოპტიმიზაცია თქვენი სურათები ისე, რომ ისინი სწრაფად ჩატვირთვა. გვერდის დატვირთვის სიჩქარე კარგი ვებ-დიზაინის კრიტიკული ნაწილია და დიდი სურათებით ნელი გვერდები ნელ-ნელა ქვემოთ ჩამოთვლილია-მაშინაც კი, თუ იყენებთ LOWSRC ატრიბუტს.