Deschideți fișierul HTML pentru pagina Web la care doriți să adăugați o imagine într-un editor de text precum Notepad sau software de dezvoltare web.
Adăugați o etichetă la fișier. Plasați eticheta după elementul sub care doriți să apară imaginea atunci când fișierul HTML este deschis într-un browser. Eticheta nu are o etichetă de închidere separată. În cadrul etichetei, trebuie să specificați sursa imaginii pe care doriți să o afișați tastând locația imaginii pe internet cu src atribut. Dacă imaginea este stocată în același folder cu fișierul HTML, introduceți numele și extensia imaginii. Dacă imaginea este stocată în altă parte, introduceți adresa URL completă a imaginii.
Adaugă alt atribuiți etichetei dvs. În HTML5, este necesar atributul alt. Utilizați acest atribut pentru a descrie imaginea în cazul în care nu se poate încărca. Dacă o imagine nu se poate încărca, browserul afișează textul pe care îl introduceți după atributul alt. În plus, atributul alt este important pentru software-ul cititor de ecran utilizat de persoanele cu dizabilități de vedere. Software-ul citește textul din atributul alt, astfel încât persoana cu dizabilități vizuale care vă vizualizează site-ul web poate auzi ce este în imagine, chiar dacă nu o poate vedea.
Specificați dimensiunile imaginii în pixeli cu înălţime și lăţime atribute. Dacă nu specificați dimensiunile, browserul nu știe cât spațiu să lase imaginii pe măsură ce pagina se încarcă. Acest lucru are ca rezultat o pagină care se încarcă agitat, deoarece textul se încarcă mai întâi, lăsând un spațiu mic pentru imagine, apoi se desparte pe măsură ce imaginea se încarcă și determină extinderea spațiului. Cu dimensiunile specificate, browserul lasă exact spațiul potrivit între celelalte elemente de pe pagină pentru ca imaginea să fie completată când s-a terminat de încărcat.
Testați codul pentru a vă asigura că imaginea este afișată în locația corectă, deschizând fișierul HTML într-un browser.
Utilizați CSS pentru a muta o imagine în partea stângă sau dreaptă a ecranului sau pentru a învălui textul în jurul ei. De exemplu, puteți folosi style="float: left;" sau style="float: right;" în cadrul etichetei.
Dacă nu cunoașteți atât înălțimea, cât și lățimea unei imagini, este bine să utilizați doar atributul înălțime sau lățime. De asemenea, puteți utiliza CSS pentru a specifica înălțimea și lățimea; de exemplu, cu o imagine de 100 x 100 pixeli, utilizați atributul de stil: style="height: 100px; lățime: 100 px."
Transformați imaginea într-un link pe care se poate face clic, plasând eticheta într-o pereche de etichete „a href”. De exemplu, dacă doriți ca o imagine să fie conectată la Facebook, introduceți următoarele.
Nu utilizați atributul alt pentru a încerca să creșteți SEO-ul paginii dvs. Motoarele de căutare au fost conștienți de mult timp că unii designeri web încearcă să umple atributul alt cu cuvinte cheie suplimentare și, prin urmare, ignoră textul din atributul alt.
