Utilizarea imaginilor

Acest tutorial este destinat in special incepatorilor si iti va arata cum sa incluzi imagini in pagina ta
HTML.
Tag-ul IMG
Pentru a introduce imagini in pagina ta web, foloseste tag-ul img.

<img src="url">
unde url reprezinta calea catre imaginea ta, adica directorul in care se afla si numele acesteia.
Iata cateva exemple care te vor ajuta sa intelegi mai bine cum anume trebuie specificata calea pentru
imaginea ta. Sa presupunem ca fisierul HTML in care vrei sa incluzi imaginea este denumit
pagina.html, imaginea este poza.gif, si pe server sau local (pe disc) ai un director siteweb/.
Exemplul 1: Imaginea si pagina web se afla in acelasi director
Aceasta este cea mai simpla metoda de a include o imagine in pagina web. Directorul siteweb/ va
contine:
siteweb/
pagina.html
poza.gif
In loc de url, atributul src din tag-ul img va contine numele fisierului poza.gif:

<img src="poza.gif">
ceea ce inseamna ca browser-ul va cauta imaginea in acelasi director cu pagina HTML.
Exemplul 2: Imaginea se afla intr-un subdirector
Aceasta situatie este foarte des intalnita, deoarece permite gruparea imaginilor intr-un director
(deseori numit imagini), ele fiind mai usor de manipulat.

siteweb/
pagina.html
imagini/
poza.gif
Codul HTML pentru includerea imaginii poza.gif este:

<img src="imagini/poza.gif">

Cu alte cuvinte, in acest caz browser-ul va cauta poza.gif in subdirectorul imagini.

Exemplul 3: Imaginea se afla in alt director
Ce se intampla daca imaginea pe care vrem sa o includem in pagina web se afla intr-un director cu
totul diferit? Aceasta situatie poate fi intalnita atunci cand avem un director destinat imaginilor
(imagini) pe care paginile web aflate in subdirectoare il pot folosi.
siteweb/
paginiweb/
pagina.html
imagini/
poza.gif
In acest caz, codul HTML va fi:

<img src="../imagini/poza.gif">
Utilizarea atributelor width= si height=
Este recomandat ca in tag-ul img sa specifici dimensiunile imaginii respective. Astfel, layout-ul paginii
web nu se va modifica la incarcarea imaginilor, iar utilizatorii pot alege sa vizualizeze pagina fara
imagini, formatul ei ramanand acelasi.
Pentru a specifica latimea (width) si inaltimea (height) unei imagini, foloseste codul HTML:

<img src="url" width="x" height="y">

unde x, y sunt dimensiunile imaginii in pixeli.
Cum puteti afla latimea si inaltimea imaginii in pixeli?
Daca folosesti Netscape, deschide imaginea intr-o fereastra si dimensiunile vor aparea in title bar.
Daca folosesti IE, deschide imaginea in browser, apoi da right-click pe imagine si selecteaza
Properties. Vei vedea dimensiunile langa Dimensions in noua fereastra.
Poti schimba dimensiunea imaginii folosind editoare de imagini (Photoshop, Fireworks etc. - de obicei
acestea au optiunea Image Size sau Resize Image).
Imaginile ca linkuri
Daca vrei ca imaginea ta sa fie folosita ca link sau buton, pe conturul ei va aparea un dreptunghi
colorat. Acesta este optiunea de border a imaginii si este folosit pentru a arata ca imaginea
respectiva este un link. Daca nu vrei ca acest dreptunghi sa apara in jurul imaginii, initializeaza
atributul border cu valoarea 0:

<img src="cale" width="x" height="y" border="0">

Codul de mai sus are ca efect faptul ca imaginea nu va mai avea contur.
Greseli des intalnite
1. Gresirea caii catre imagine
Daca vezi simbolul "image not found" (o cruciulita rosie acolo unde ar trebui sa apara poza), cel mai

probabil imaginea nu se afla in directorul specificat sau calea a fost scrisa gresit. Nu uita sa incluzi
extensia fisierului (.gif sau .jpg) atunci cand specifici calea.
2. Nu exista imaginea
Asigurati-va ca ati copiat imaginea pe server, in directorul corect.
3. Scrierea cu majuscule in loc de litere mici (sau invers)
Majoritatea serverelor fac diferenta intre majuscule si litere mici, deci daca in atributul src vei scrie
poza.jpg , iar imaginea ta se numeste poza.JPG, ea nu va fi incarcata.