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 ატრიბუტისთვის:შენიშვნა: ismap ატრიბუტი გამოიყენება მხოლოდ ელემენტად როგორც თეგის ბავშვის ელემენტი რა უნდა გააკეთოს href ატრიბუტთან.
Usemap: ნიშნავს სურათს, როგორც გამოსახულების რუკას. ამ ატრიბუტში მითითებული მნიშვნელობა (ცხადია, შეიძლება დაიწყოს "#" სიმბოლოთი) ასოცირდება სახელის ატრიბუტის ან ტეგის id მნიშვნელობასთან.
შენიშვნა: usemap ატრიბუტი არ შეიძლება შეიცვალოს ელემენტად є ელემენტზე ან კიდევ
Width: განსაზღვრავს სურათის სიგანეს პიქსელებში.
შენიშვნა: ჯერ მიუთითეთ გამოსახულების სიგანე და სიმაღლე ატრიბუტები. ამ შემთხვევაში, სურათისთვის საჭირო სივრცე დაჯავშნილია ბრაუზერის მიერ გვერდის მონახულებისას. ვინაიდან თავად ბრაუზერს არ შეუძლია წინასწარ განსაზღვროს სურათის ზომა, ამ ატრიბუტების გარეშე გვერდის განლაგება შეიძლება სწორად არ იყოს ნაჩვენები ნახვის დროს და სურათი არ გამოჩნდება. ეს განსაკუთრებით სასარგებლო იქნება იმ ინტერნეტ მომხმარებლებისთვის, რომლებსაც აქვთ წვდომა დიდ ინტერნეტზე.
ელემენტი (ინგლისური "image" - "image") მიზნად ისახავს სურათის ჩასმას HTML გვერდზე გრაფიკულ ფორმატში GIF, JPEG, SVG ან PNG. სურათის ფაილის მისამართები მითითებულია src ატრიბუტის გამოყენებით.
სურათები ასევე შეიძლება დარჩეს რუკების სახით, თუ სურათი შეიცავს აქტიურ უბნებს, რომლებიც მოქმედებენ ისე, როგორც ეს იყო დაგეგმილი. გამოსახულების ბარათი, როგორც ჩანს, არანაირად არ განსხვავდება ორიგინალური სურათისგან, მაგრამ ამ შემთხვევაში ის შეიძლება დაიყოს სხვადასხვა ფორმის უხილავ ზონებად, თითოეული მიზნის მისაღწევად.
იაკშჩო ის ნაჩვენებია შეტყობინების შუაში ან აყენებს გამოსახულების რუქას, თავად სურათის მახლობლად, ბრაუზერები აჩვენებს ჩარჩოს, რომლის სტილისტიკა ან გამოყენება შესაძლებელია დამატებითი CSS-ით.
ტექნიკურად, სურათი არ არის ჩასმული HTML მხარეს, არამედ დაკავშირებულია HTML მხარეს, სადაც მნიშვნელოვანი წერტილი არის მისი ზომა კილობაიტებში, უფრო ზუსტად გამოსახულების ზომა. ბუნებრივია, რაც უფრო ნაკლებად გამოიჩენთ ყურადღებას, მით უფრო სავარაუდოა, რომ გვერდით მიიზიდავთ.
ასევე, ვებ გვერდების გარეგნობის დასაჩქარებლად, რეკომენდებულია ელემენტის სიგანისა და სიმაღლის ატრიბუტების დაყენება . ამ შემთხვევაში, ბრაუზერი არ აღმოაჩენს ყველაზე მნიშვნელოვან სურათს, შეგიძლიათ უბრალოდ იხილოთ შემდეგი ადგილი და სასურველი მხარე შემდგომში და აირჩიოთ იგი მოგვიანებით. უფრო მეტიც, თუ ერთი სურათი გამოჩნდება გვერდზე რამდენჯერმე (src ატრიბუტის მნიშვნელობები იგივეა), ბრაუზერი მას სერვერიდან იღებს მხოლოდ ერთხელ და შემდეგ იღებს ქეში მეხსიერებიდან.
Შენიშვნა:ბრაუზერები ყოველთვის აჩვენებს ელემენტს მინიჭებულ სურათს. მაგალითად, თუ ბრაუზერი არ არის გრაფიკული (მათ შორის, დაქვეითებული მხედველობის მქონე ადამიანები), ან თუ ბრაუზერი ვერ აჩვენებს სურათებს, მაშინ zipped ფაილი. ასეთ შემთხვევებში ბრაუზერმა შეიძლება შეცვალოს სურათი ელემენტის alt ატრიბუტში ნაპოვნი ალტერნატიული ტექსტით.
Სინტაქსი
ტყვეობის ტეგი
არ ჩერდება.
ატრიბუტები
გასწორებაძველი ეს ნიშნავს, რომ ტექსტი შემოხვეულია კიდეებზე და ტექსტის ირგვლივ. ალტაშკარა ალტერნატიული ტექსტი სურათისთვის. საზღვარიძველი ჩარჩო სურათის გარშემო. სიმაღლესურათის სიმაღლე HTML5 CSS პიქსელებში, HTML4 პიქსელებში ან ასობით. hspaceსურათის ძველი ჰორიზონტალური ხედი მეტი შინაარსის დასამატებლად. ისმაპიუთხარით ბრაუზერს, რომ სურათი არის სერვერის გამოსახულების რუკა. longdescმოძველებულია HTML5-ში მიუთითებს დოკუმენტის მისამართზე, სადაც ინსტრუქციები უნდა იყოს განთავსებული სურათის წინ. ზომები HTML5 ადგენს გამოსახულების ზომებს სხვადასხვა გვერდის განლაგებისთვის. src Obov'yazkovy გზა გრაფიკული ფაილი. srcset HTML5 მიმართულებები გრაფიკულ ფაილებზე სურათებისა და მოწყობილობების ზომის მიხედვით. vspaceსურათის ძველი ვერტიკალური ხედი მეტი შინაარსის დასამატებლად. სიგანესურათის სიგანე HTML5 CSS პიქსელებში, HTML4 პიქსელებში ან ასობით. გამოყენების რუკაპოზილანნია ელემენტზეტანსაცმლის სტილიზაცია
ბრაუზერების უმეტესობას შეუძლია ელემენტის ჩვენება შემდეგი CSS მნიშვნელობებით ინსტრუქციებისთვის:
Img (ჩვენება: inline-block;)
ფუნქციები HTML 4.01-სა და HTML5-ს შორის
HTML 5-მა დაამატა ატრიბუტების align, border, hspace, vspace მხარდაჭერა
ვიკორისტანის კონდახი:
ელემენტი
.
სპეციფიკაციები
სპეციფიკაცია | სტატუსი | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
WHATWG HTML Living Standard (WHATWG) | Ცხოვრების სტანდარტი | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
HTML 4.01 (W3C) | რეკომენდაცია | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
HTML5 (W3C) | რეკომენდაცია | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
HTML 5.1 (W3C) |
ატრიბუტი | მნიშვნელობა | აღწერა |
---|---|---|
გასწორება | მარცხენა მარჯვენა ზედა შუა ქვედა | ზასტარივი. Vickory CSS |
საზღვარი | პიქსელები | ზასტარივი. Vickory CSS |
სიმაღლე | პიქსელი % | ნიშნავს გამოსახულების სიმაღლეს |
hspace | პიქსელები | ზასტარივი. Vickory CSS |
ისმაპი | ისმაპი | ნიშნავს სურათებს, როგორც გამოსახულების რუკას სერვერის მხარეს. ძალიან იშვიათია ვიკორისტი გახდე. |
longdesc | URL | ეს ნიშნავს დოკუმენტისკენ მიმავალ გზას, რომელიც გამოსახულების გრძელი აღწერაა |
გამოყენების რუკა | #სახელი_კარტი | ნიშნავს სურათებს, როგორც გამოსახულების რუკას სერვერის მხარეს. |
vspace | პიქსელები | ზასტარივი. Vickory CSS |
სიგანე | პიქსელი % | ნიშნავს გამოსახულების სიგანეს |
სტანდარტული ატრიბუტები
ატრიბუტი | მნიშვნელობა | აღწერა |
---|---|---|
კლასი | მე კლასი ვარ | ნიშნავს ელემენტის კლასის სახელს |
რეჟ | rtl ltr | ნიშნავს პირდაპირ ტექსტს ელემენტის შინაარსისთვის |
id | id | ნიშნავს ელემენტის უნიკალურ ID-ს |
ენა | ფილმის_კოდი | მიუთითებს ფილმის კოდს ელემენტში ადგილისთვის |
სტილი | დიზაინი_სტილი | ადგენს ონლაინ სტილს ელემენტისთვის |
სათაური | ტექსტი | ნიშნავს დამატებით ინფორმაციას ელემენტის შესახებ |
xml: lang | ფილმის_კოდი | ნიშნავს ფილმის კოდს ელემენტის შინაარსისთვის, XHTML დოკუმენტები |
საგნის ატრიბუტები
ატრიბუტი | მნიშვნელობა | აღწერა |
---|---|---|
აბორტი | სკრიპტი | სკრიპტი შეწყდება, თუ პრობლემა იქნება სურათის დანართებთან დაკავშირებით |
დააწკაპუნეთ | სკრიპტი | სკრიპტი აიტვირთება, როდესაც დააწკაპუნებთ |
ondblccck | სკრიპტი | სკრიპტი შესრულდება დაწკაპუნებისას |
onmousedown | სკრიპტი | სკრიპტი შესრულდება დათვის ღილაკის დაჭერისას |
onmousemove | სკრიპტი | სცენარი დაიწერება დათვის კურსორის საათის ქვეშ |
onmouseout | სკრიპტი | სკრიპტი გადაიცემა, თუ დათვის კურსორი ამოღებულია ელემენტის საზღვრებიდან |
მაუსის თავზე | სკრიპტი | სკრიპტი იქნება ვიკონო, თუ დათვის კურსორი არის ელემენტზე |
onmouseup | სკრიპტი | სკრიპტი გამოჩნდება დათვის ღილაკის დაჭერის შემთხვევაში |
onkeydown | სკრიპტი | სკრიპტი შესრულდება კლავიშის დაჭერისას |
ღილაკზე დაჭერით | სკრიპტი | სკრიპტი დაიწერება კლავიშის დაჭერით და დაჭერით |
onkeyup | სკრიპტი | სკრიპტი შესრულდება კლავიშის დაჭერისას |