logo

Imagine HTML

Etichetă HTML img este folosit pentru a afișa imaginea pe pagina web. Eticheta HTML img este o etichetă goală care conține numai atribute, etichetele de închidere nu sunt utilizate în elementul de imagine HTML.

Să vedem un exemplu de imagine HTML.

 <h2>HTML Image Example</h2> <img src="//techcodeview.com/img/html-tutorial/39/html-image.webp" alt="Good Morning Friends"> 
Testează-l acum

Ieșire:

Buna dimineata prieteni

Atributele etichetei HTML img

Src și alt sunt atribute importante ale etichetei HTML img. Toate atributele etichetei de imagine HTML sunt prezentate mai jos.

1) src

Este un atribut necesar care descrie sursa sau calea imaginii. Acesta indică browserului unde să caute imaginea pe server.

Locația imaginii poate fi pe același director sau pe alt server.

2) totul

Atributul alt definește un text alternativ pentru imagine, dacă acesta nu poate fi afișat. Valoarea atributului alt descrie imaginea în cuvinte. Atributul alt este considerat bun pentru potențialul SEO.

3) lățimea

Este un atribut opțional care este utilizat pentru a specifica lățimea pentru afișarea imaginii. Nu este recomandat acum. Ar trebui să aplicați CSS în locul atributului width.

4) înălțime

Este h3 înălțimea imaginii. Atributul HTML înălțime acceptă și elemente iframe, imagine și obiect. Nu este recomandat acum. Ar trebui să aplicați CSS în locul atributului înălțime.

actor berbec

Utilizarea atributului înălțime și lățime cu eticheta img

Ați învățat cum să inserați o imagine în pagina dvs. web, acum dacă vrem să oferim o înălțime și lățime pentru a afișa imaginea conform cerințelor noastre, atunci o putem seta cu atributele de înălțime și lățime ale imaginii.

Exemplu:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 
Testează-l acum

Ieșire:

Imagine HTML

Notă: Încercați întotdeauna să introduceți imaginea cu înălțime și lățime, altfel poate pâlpâi în timp ce este afișată pe pagina web.


Utilizarea atributului alt

Putem folosi atributul alt cu etichetă. Va afișa un text alternativ în cazul în care imaginea nu poate fi afișată în browser. Următorul este exemplul pentru atributul alt:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Ieșire:

Imagine HTML

Cum se obține o imagine dintr-un alt director/dosar?

Pentru a insera o imagine pe web, acea imagine trebuie să fie prezentă în același folder în care ați pus fișierul HTML. Dar dacă, într-un caz, imaginea este disponibilă în alt director, atunci puteți accesa imaginea astfel:

 

În declarația de mai sus am pus imaginea pe discul local E------> folderul imagini------>img/html-tutorial/39/html-image-2.webp.

Notă: Dacă adresa URL src va fi incorectă sau greșită, atunci nu va afișa imaginea pe pagina web, așa că încercați să introduceți adresa URL corectă.


Utilizare etichetați ca link

De asemenea, putem lega o imagine cu altă pagină sau putem folosi o imagine ca link. Pentru a face acest lucru, pune eticheta în interiorul etichetă.

Exemplu:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp"> 
Testează-l acum

Ieșire:


Suport pentru browsere

Element browser chromeCrom adică browserIE browser firefoxFirefox browser operaOperă browser safariSafari
dadadadada