გახსენით HTML ფაილი ვებ გვერდისთვის, რომელზეც გსურთ სურათის დამატება ტექსტურ რედაქტორში, როგორიცაა Notepad ან ვებ განვითარების პროგრამული უზრუნველყოფა.
დაამატეთ ტეგი ფაილს. მოათავსეთ ტეგი იმ ელემენტის შემდეგ, რომლის ქვეშაც გსურთ გამოჩნდეს სურათი, როდესაც HTML ფაილი იხსნება ბრაუზერში. ტეგს არ აქვს ცალკე დახურვის ტეგი. ტეგში, თქვენ უნდა მიუთითოთ გამოსახულების წყარო, რომლის ჩვენებაც გსურთ, აკრიფეთ სურათის მდებარეობა ინტერნეტში. src ატრიბუტი. თუ სურათი ინახება იმავე საქაღალდეში, როგორც HTML ფაილი, ჩაწერეთ სურათის სახელი და გაფართოება. თუ სურათი ინახება სხვაგან, ჩაწერეთ სურათის სრული URL.
დაამატეთ ალტ მიაკუთვნეთ თქვენს ტეგს. HTML5-ში საჭიროა alt ატრიბუტი. გამოიყენეთ ეს ატრიბუტი სურათის აღსაწერად, თუ ის ვერ იტვირთება. თუ სურათი ვერ იტვირთება, ბრაუზერი აჩვენებს თქვენს მიერ შეყვანილ ტექსტს alt ატრიბუტის შემდეგ. გარდა ამისა, alt ატრიბუტი მნიშვნელოვანია ეკრანის წამკითხველის პროგრამული უზრუნველყოფისთვის, რომელსაც იყენებენ ვიზუალური შეზღუდული შესაძლებლობის მქონე ადამიანები. პროგრამული უზრუნველყოფა კითხულობს ტექსტს alt ატრიბუტში, რათა ვიზუალური შეზღუდული შესაძლებლობის მქონე პირმა, რომელიც ათვალიერებს თქვენს ვებსაიტს, გაიგოს რა არის სურათზე, მიუხედავად იმისა, რომ ვერ ხედავს მას.
მიუთითეთ სურათის ზომები პიქსელებში სიმაღლე და სიგანე ატრიბუტები. თუ არ მიუთითებთ ზომებს, ბრაუზერმა არ იცის რამდენი ადგილი უნდა დატოვოს სურათზე გვერდის ჩატვირთვისას. ეს იწვევს გვერდის ჩატვირთვას არასტაბილურად, რადგან ტექსტი ჯერ იტვირთება, ტოვებს სურათს მცირე ადგილს, შემდეგ ხტება ერთმანეთისგან სურათის ჩატვირთვისას და იწვევს სივრცის გაფართოებას. მითითებული ზომებით, ბრაუზერი ტოვებს ზუსტად სწორ სივრცეს გვერდზე სხვა ელემენტებს შორის სურათის შესავსებად, როდესაც ის ჩატვირთვის დასრულდება.
შეამოწმეთ თქვენი კოდი, რათა დარწმუნდეთ, რომ სურათი გამოჩნდება სწორ ადგილას, ბრაუზერში თქვენი HTML ფაილის გახსნით.
გამოიყენეთ CSS სურათის ეკრანის მარცხენა ან მარჯვენა მხარეს გადასატანად ან მის გარშემო ტექსტის გადასატანად. მაგალითად, შეგიძლიათ გამოიყენოთ style="float: left;" ან style="float: right;" ტეგის ფარგლებში.
თუ არ იცით სურათის სიმაღლეც და სიგანეც, კარგია მხოლოდ სიმაღლის ან სიგანის ატრიბუტის გამოყენება. თქვენ ასევე შეგიძლიათ გამოიყენოთ CSS სიმაღლისა და სიგანის დასაზუსტებლად; მაგალითად, 100 x 100 პიქსელიანი გამოსახულებით გამოიყენეთ style ატრიბუტი: style="height: 100px; სიგანე: 100px."
გადააქციეთ სურათი დაწკაპუნებად ბმულად, ტეგის განთავსებით "a href" ტეგების წყვილში. მაგალითად, თუ გსურთ, რომ სურათი Facebook-ის ბმული იყოს, ჩაწერეთ შემდეგი.
არ გამოიყენოთ alt ატრიბუტი თქვენი გვერდის SEO-ის გაზრდის მიზნით. საძიებო სისტემებმა დიდი ხანია იცოდნენ, რომ ზოგიერთი ვებ დიზაინერი ცდილობს alt ატრიბუტის დამატებითი საკვანძო სიტყვებით ჩასმა და ამიტომ ისინი იგნორირებას უკეთებენ alt ატრიბუტში არსებულ ტექსტს.
