img ტეგის არჩევითი ატრიბუტები მოიცავს: HTML ტეგები სურათების, სურათების HTML-ში ჩასართავად

მონიშნეთ IMGშექმნილია ვებ გვერდზე სურათების გრაფიკული ფორმით ჩვენებისთვის GIF ფორმატი, JPEG ან PNG. ამ ტეგს აქვს ერთი საჭირო პარამეტრი, src, რომელიც განსაზღვრავს გამოსახულების ფაილის მისამართს. საჭიროების შემთხვევაში, ნახატი შეიძლება სხვა ფაილთან ბმული იყოს A კონტეინერში IMG ტეგის განთავსებით. ამავდროულად, გამოსახულების ირგვლივ ჩნდება საზღვარი, რომლის ამოღებაც შესაძლებელია IMG ტეგში border=0 პარამეტრის დამატებით.

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

სინტაქსი

დახურვის ტეგი
არ არის საჭირო.

ოფციები
align - განსაზღვრავს, თუ როგორ იქნება სურათის გასწორება კიდეზე და როგორ შეიფუთება ტექსტი.
alt - გამოსახულების ალტერნატიული ტექსტი.
საზღვარი - სურათის გარშემო ჩარჩოს სისქე.
სიმაღლე - გამოსახულების სიმაღლე.
hspace - ჰორიზონტალური სივრცე სურათიდან მიმდებარე შინაარსამდე.
ismap - ეუბნება ბრაუზერს, რომ სურათი არის სერვერის გამოსახულების რუკა.
lowsrc - გზა დაბალი გარჩევადობის გრაფიკულ ფაილამდე წინასწარი ჩვენებისთვის.
src - გზა გრაფიკული ფაილისკენ.
vspace - ვერტიკალური სივრცე სურათიდან მიმდებარე შინაარსამდე.
სიგანე - გამოსახულების სიგანე.
usemap - ბმული MAP ტეგთან, რომელიც შეიცავს კოორდინატებს კლიენტის გამოსახულების რუქისთვის.

მაგალითი 1: IMG ტეგის გამოყენება

Lorem ipsum dolor sit amet...

IMG ტეგის პარამეტრების აღწერა

ALIGN პარამეტრი

აღწერა
სურათებისთვის შეგიძლიათ მიუთითოთ მათი პოზიცია ტექსტთან ან სხვა სურათებთან ვებ გვერდზე. სურათების გასწორების გზა მითითებულია IMG ტეგის align პარამეტრით.

სინტაქსი

არგუმენტები
ცხრილში 1 ჩამოთვლილია გასწორების პარამეტრის შესაძლო მნიშვნელობები და მისი გამოყენების შედეგი.

ყველაზე პოპულარული ვარიანტებია მარცხენა და მარჯვენა, რომლებიც ქმნიან ტექსტის შეფუთვას სურათზე. ტექსტის სურათზე მჭიდროდ მორგების თავიდან ასაცილებლად, რეკომენდებულია IMG ტეგში hspace და vspace პარამეტრების დამატება, რომლებიც აკონკრეტებენ ტექსტამდე მანძილს პიქსელებით.

მიუხედავად იმისა, რომ align პარამეტრის ყველა მნიშვნელობა მხარდაჭერილია ბრაუზერების მიერ, არგუმენტები absbottom, absmiddle, baseline და texttop არ არის აღწერილი HTML 4 სპეციფიკაციაში.

ნაგულისხმევი მნიშვნელობა
ქვედა

მაგალითი 2: სურათის გასწორება

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

ALT პარამეტრი

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

ბრაუზერები ასევე აჩვენებენ ალტერნატიულ ტექსტს, როგორც ინსტრუმენტს, როდესაც მაუსის ატარებთ სურათზე.

სინტაქსი

არგუმენტები
ნებისმიერი შესაფერისი ტექსტის სტრიქონი. ის უნდა იყოს ჩასმული ორმაგი ან ერთჯერადი ბრჭყალებით.

ნაგულისხმევი მნიშვნელობა
არა.

მაგალითი 3: ალტერნატიული ტექსტის დამატება

alt=" დაბრუნება მთავარ გვერდზე" !}>

BORDER პარამეტრი

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

სინტაქსი

არგუმენტები

ნაგულისხმევი მნიშვნელობა
0

მაგალითი 3. ჩარჩო სურათის გარშემო

მწვანე ჩარჩო 2 პიქსელი სისქით

HEIGHT და WIDTH პარამეტრი

აღწერა
გამოსახულების ზომის შესაცვლელად HTML-ის გამოყენებით, მოწოდებულია სიგანისა და სიმაღლის პარამეტრები. თქვენ შეგიძლიათ გამოიყენოთ მნიშვნელობები პიქსელებში ან პროცენტებში. თუ პროცენტული ჩანაწერი დაყენებულია, მაშინ გამოსახულების ზომები გამოითვლება მშობელ ელემენტთან - კონტეინერთან, სადაც მდებარეობს IMG ტეგი. თუ არ არის მშობელი კონტეინერი, ბრაუზერის ფანჯარა მოქმედებს როგორც ის. სხვა სიტყვებით რომ ვთქვათ, width=100% ნიშნავს, რომ სურათი გადაჭიმული იქნება ვებ გვერდის მთელ სიგანეზე. მხოლოდ ერთი სიგანის ან სიმაღლის პარამეტრის დამატება შეინარჩუნებს სურათის პროპორციებს და ასპექტის თანაფარდობას. ბრაუზერი ელოდება სურათის სრულად ჩატვირთვას, რათა დადგინდეს მისი საწყისი სიმაღლე და სიგანე.

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

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

სინტაქსი

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

ნაგულისხმევი მნიშვნელობა
გამოსახულების ორიგინალური სიგანე ან სიმაღლე.

მაგალითი 4: გამოსახულების ზომები

HSPACE და VSPACE პარამეტრი

აღწერა
ნებისმიერი სურათისთვის შეგიძლიათ დააყენოთ უხილავი ჰორიზონტალური და ვერტიკალური მინდვრები hspace და vspace პარამეტრების გამოყენებით. ეს განსაკუთრებით ეხება, როდესაც ტექსტი ახვევს სურათს. ამ შემთხვევაში, იმისათვის, რომ ტექსტი მჭიდროდ არ „გაუშვას“ სურათზე, აუცილებელია მის გარშემო ცარიელი სივრცის დამატება.

სინტაქსი

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

ნაგულისხმევი მნიშვნელობა
0

მაგალითი 5. ჭრილები სურათიდან

ISMAP პარამეტრი

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

სერვერზე მონაცემების გაგზავნა ხდება შემდეგნაირად. თქვენ უნდა მოათავსოთ IMG ტეგი კონტეინერში A, სადაც უნდა მიუთითოთ CGI პროგრამის მისამართი, როგორც href პარამეტრის მნიშვნელობა. პროგრამა აანალიზებს მიღებულ მაუსის დაწკაპუნების კოორდინატებს, რომლებიც გამოითვლება გამოსახულების ზედა მარცხენა კუთხიდან და აბრუნებს საჭირო ვებ გვერდს.

სინტაქსი

არგუმენტები
არა.

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

მაგალითი 6. გამოსახულების რუკის სახით დახატვა

თუ მომხმარებელმა დააყენა მაუსის კოორდინატები სურათზე 100, 50, მაშინ ბმულზე დაჭერის შემდეგ ფაილი გაიხსნება მისამართზე http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. ბოლო ციფრები გადადის CGI პროგრამაში GET მეთოდის გამოყენებით და ინტერპრეტირდება სერვერზე.

LOWSRC პარამეტრი

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

სინტაქსი

არგუმენტები

ნაგულისხმევი მნიშვნელობა
არა.

მაგალითი 7. გზა დაბალი ხარისხის ნახატისკენ

SRC პარამეტრი

აღწერა
მისამართი გრაფიკული ფაილი, რომელიც გამოჩნდება ვებ გვერდზე. ყველაზე პოპულარული ფაილებია GIF და JPEG ფორმატში.

სინტაქსი

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

ნაგულისხმევი მნიშვნელობა
არა.

მაგალითი 8. გზა გრაფიკულ ფაილამდე

აღწერა

მონიშნეთ შექმნილია GIF, JPEG ან PNG გრაფიკული ფორმატის გამოსახულების ჩვენება ვებ გვერდზე. სურათის ფაილის მისამართი მითითებულია src ატრიბუტის მეშვეობით. საჭიროების შემთხვევაში, ნახატი შეიძლება სხვა ფაილთან ბმული იყოს თეგის განთავსებით კონტეინერში . .

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

• დატოვა- სურათი მდებარეობს გვერდის მარცხენა კიდეზე, ხოლო ტექსტი მიედინება გამოსახულების გარშემო მარჯვნივ;


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

მაგალითად, HTML კოდი

ბრაუზერი გამოჩნდება ასე

და ეს HTML კოდი:

ასე გამოიყურება:

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

• დატოვა- შეაჩერე ტექსტის შეფუთვა მარცხნივ გასწორებული სურათების გარშემო;


• უფლება- შეაჩერე ტექსტის შეფუთვა მარჯვნივ გასწორებული სურათების გარშემო;


• ყველა- შეაჩერე ტექსტის შეფუთვა მარცხნივ და მარჯვნივ გასწორებული სურათების გარშემო.

სურათის ჩასმა:

აღწერა და გამოყენება

მონიშნეთ აყენებს სურათს HTML დოკუმენტში.

გაითვალისწინეთ, რომ სურათები ტექნიკურად არ არის ჩასმული გვერდზე. სინამდვილეში, სურათები უკავშირდებიან HTML გვერდებს. მონიშნეთ ქმნის კონტეინერს სურათისთვის.

ტეგზე ორი საჭირო ატრიბუტი: src და alt.

განსხვავება HTML-სა და XHTML-ს შორის

HTML ტეგში არ აქვს დახურვის ტეგი.

XHTML ტეგში სწორად უნდა დაიხუროს.

img ელემენტის "align", "border", "hspace" და "vspace" ატრიბუტები მოძველებულია და არ არის მხარდაჭერილი XHTML 1.0 Strict-ში.

რჩევა: alt ატრიბუტი გამოიყენება როგორც ალტერნატიული ტექსტი, როდესაც არ არის გამოსახულება, ვიდრე მაუსის გადატანის ტექსტად. ტექსტის საჩვენებლად, როდესაც სურათს ატარებთ, გამოიყენეთ სათაურის ატრიბუტი. მოსწონს ეს: .

საჭირო ატრიბუტები

არჩევითი ატრიბუტები

სტანდარტული ატრიბუტები

მოვლენის ატრიბუტები

დღესდღეობით, თითქმის არცერთ ვებსაიტს არ შეუძლია HTML გვერდებზე სურათების გამოყენების გარეშე, რადგან, როგორც პოპულარული სიბრძნე ამბობს: ”სჯობს ერთხელ ნახოთ, ვიდრე ასჯერ მოსმენა”. ამ სტატიის წაკითხვის შემდეგ თქვენ შეისწავლით თუ როგორ გამოიყენოთ IMG ტეგი, რომელიც გამოიყენება სურათების დასამატებლად ვებ გვერდებზე. ჩვენ განვიხილავთ მაგალითებს HTML 5-ისთვის, მაგრამ ისინი ასევე იმუშავებენ ჰიპერტექსტის მარკირების ენის ადრინდელ ვერსიებზე.

როგორ ჩავსვათ სურათი HTML გვერდზე

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

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

თუ გვერდი მდებარეობს http://www..html და სურათი არის http://www..jpg, მაშინ გამოსახულების გზა მითითებულია შემდეგნაირად:

თუ გვერდი მდებარეობს საქაღალდეში http://www..site/logo.jpg, მაშინ გზა იქნება ასეთი:

თუ სურათი არის http://www.site/images/ საქაღალდეში, მაშინ არ აქვს მნიშვნელობა რომელ საქაღალდეშია განთავსებული იმავე საიტის გვერდი, რომელშიც ჩასმულია სურათი, ფაილის გზა შეიძლება განისაზღვროს შემდეგნაირად:

ან შეგიძლიათ მიუთითოთ სურათის ფაილის სრული გზა, თუ ის მდებარეობს სხვა საიტზე:

გამოსახულების სიგანე და სიმაღლე

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

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

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

გამოსახულების შეფუთვა ტექსტში და ჩაღრმავებაში

ნაგულისხმევად, ტექსტი ნაჩვენებია სურათის ქვემოთ. იმისათვის, რომ ტექსტი შემოიფაროს სურათზე, გამოიყენება float CSS თვისება, რომელიც ცვლის align ატრიბუტს. თუ გვინდა, რომ სურათი იყოს ტექსტის მარცხნივ, ხოლო ტექსტი მის გარშემო მიედინება მარჯვნივ და ქვევით, მაშინ დააყენეთ მნიშვნელობა CSS თვისებები float, და თუ სურათი უნდა იყოს მარჯვნივ, მაშინ მნიშვნელობის უფლება მითითებულია:

თქვენ ასევე შეგიძლიათ დააყენოთ შეწევა სურათის ზედა, მარჯვენა, ქვედა და მარცხნივ:

იგივე შეიძლება ითქვას შემოკლებული ფორმით:

ალტერნატიულად, შეგიძლიათ დააყენოთ ვერტიკალური და ჰორიზონტალური მინდვრები ორი მარჟის თვისების მნიშვნელობის გამოყენებით, მემკვიდრე vspace და hspace ატრიბუტების ნაცვლად. ვთქვათ, გვჭირდება ზღვარი 10 პიქსელით ზედა და ქვედა ნაწილში და 8 პიქსელი მარცხნივ და მარჯვნივ:

როგორ გავხადოთ სურათი გვერდის ბმული

ან ჩვენ შეგვიძლია დავაყენოთ სურათის ჩარჩოს ჩვენი ფერი, ტიპი და სისქე:

გამოსახულების ფორმატები ვებისთვის

როგორც წესი, ვებსაიტები იყენებენ გამოსახულების მრავალ ფორმატს. გამოიყენება ფოტოსურათებისთვის JPEG ფორმატი, თუ თქვენ გჭირდებათ გამოსახულება გამჭვირვალე ფონი, შემდეგ გამოიყენება PNG ფორმატი. ადრე PNG ფორმატის ნაცვლად გამოიყენებოდა GIF, მაგრამ ის უკვე მოძველებულია - მისი ერთადერთი უპირატესობა არის ანიმაციური სურათების შექმნის შესაძლებლობა. როგორც წესი, PNG და GIF გამოიყენება მხოლოდ როგორც დიზაინის ელემენტები და მხოლოდ იმ შემთხვევებში, როდესაც სურათს უნდა ჰქონდეს გამჭვირვალე ადგილები ან იყოს გამჭვირვალე. ვინაიდან ამ ფორმატებში ფაილები ძალიან დიდი ზომისაა, მათი გამოყენება არ არის რეკომენდებული ჩვეულებრივი ფოტოებისთვის - ამისათვის არსებობს JPEG ფორმატი. სურათების საიტზე ატვირთვამდე ღირს მათი სიგანისა და სიმაღლის შემცირება იმ ზომამდე, რომლითაც ისინი გამოჩნდება საიტზე, რათა უფრო სწრაფად იტვირთონ მომხმარებლებისთვის.

სტატიის კოპირება აკრძალულია.