Sari la conținut

Tutoriale HTML - Imagini - Elemente de baza in HTML


Postări Recomandate

Tutoriale HTML - Imagini - Elemente de baza in HTML
In HTML imaginile sunt definite cu tagul <img>
Tagul <img> este unul fara pereche ( se va termina prin "/>" ), ceea ce inseamna ca acesta contine doar atribute.
Pentru a afisa o imagine trebuie sa specificati atributul src. "src" provine de la sursa. Valoarea src este data de
adresa imaginii de pe server.
Exemplu:

<!DOCTYPE html>
<html>
  <body>
    <img src="http://adresaweb.com/images/imagine.jpg" alt="text_alternativ"/>
  </body>
</html>

Atributul Alt.
Acesta este folosit pentru a afisa informatii suplimentare despre imaginea afisata ( chiar si atunci cand aceasta
nu poate fi afisata, din cauze diferite cum ar fi conexiunea de internet )
Alte atribute folosite pot fi width si height adica latimea si inaltimea imaginii.

<!DOCTYPE html>
<html>
<body>
<img src="http://adresaweb.com/images/imagine.jpg" alt="text_alternativ" width="300" height="250" />
</body>
</html>

De asemenea tagul <img> suporta si atributele globale ( pe care le puteti gasi aici : http://www.w3schools.com/html5/html5_ref_globalattributes.asp )
si care va ajuta la stilarea paginii.
Copiati aceste exemple intr-un editor text si dati save as -> imagini.html iar in loc de http://adresaweb.com/images/imagine.jpg
puneti adresa imaginii ( gen src="/images/imagine.jpg." )
Sfat: E o practica buna sa specificati latimea si inaltimea imaginii deoarece browserul, la incarcarea paginii, va rezerva spatiul
necesar imaginii. Fara a specifica aceste atribute browserul nu cunoaste de la inceput marimea imaginii si asta va cauza modificarea
layoutului la incarcarea paginii.
© Tzunyo

Link spre post
Distribuie pe alte site-uri

Alătură-te conversației

Poți posta acum și să te înregistrezi mai târziu. Dacă ai un cont, autentifică-te acum pentru a posta cu contul tău.

Vizitator
Răspunde la acest subiect...

×   Alipit ca text avansat.   Alipește ca text simplu

  Doar 75 emoji sunt permise.

×   Linkul tău a fost încorporat automat.   Afișează ca link în schimb

×   Conținutul tău precedent a fost resetat.   Curăță editor

×   Nu poți lipi imagini direct. Încarcă sau inserează imagini din URL.

×
×
  • Creează nouă...

Informații Importante

Politică Intimitate Am plasat cookie-uri pe dispozitivul tău pentru a îmbunătății navigarea pe acest site. Poți modifica setările cookie, altfel considerăm că ești de acord să continui.