Utilizarea Imaginilor

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.

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:

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:



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:

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:

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:

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.