Adaugarea imaginilor in paginile HTML

Pana acum ai invatat cum sa folosesti decat texte si culori in cadrul paginilor web. In aceasta lectie vei invata despre imagini, care alese cu grija, vor da un plus design-ului paginilor tale.

Formatele imaginilor

Browserele recunosc, in cadrul paginilor web, mai multe formate ale imaginilor. Cele mai raspandite sunt cele care au una din terminatiile .jpg sau .jpeg, cele cu extensia .gif si cele care au extensia .png. Iata in continuare cateva caracteristici ale acestor formate de imagini:

GIF (Graphics Interchange Format)
Formatul GIF poate reda un numar de 256 de culori, de aceea este folosit pentru imaginile de dimensiuni mici: butoane, icon-uri, animatii mici.

Butoane:


buton1.gif marime: 4,71 Kb	buton2.gif marime: 5,3 Kb	buton3.gif marime: 5,61 Kb

Icon-uri:


icon1.gif marime: 1,98 kb	icon2.gif marime: 1,98 kb	icon3.gif marime: 1,9 kb	icon4.gif marime: 1,88 kb	icon5.gif marime: 2,04 kb

Animatii

animatie.gif
marime: 9,27 Kb

JPEG (Joint Photographic Expert Group)
Formatul JPEG nu mai este limitat la 256 de culori si de aceea este folosit pentru fotografii. Imaginile care apartin acestui format au extensia .jpg sau .jpeg.


poza.jpg marime: 26,6 Kb	poza.gif marime: 49,0 Kb

Se observa ca in cazul fotografiilor, formatul jpg ofera o calitate mai buna a imaginii si ocupa un spatiu mult mai mic decat daca am fi salvat aceeasi imagine in formatul gif.

PNG (Portable Network Graphics)
PNG este un format mai nou care a inlocuit treptat formatul GIF in primul rand prin calitatea superioara. Hai sa vedem butoanele si iconurile prezentate la formatul GIF si in format PNG:

Butoane:


buton1.gif marime: 10,0 Kb	buton2.gif marime: 9,8 Kb	buton3.gif marime: 8,05 Kb

Icon-uri:


icon1.png marime: 2,88 kb	icon2.png marime: 3,09 kb	icon3.png marime: 3,44 kb	icon4.png marime: 3,85 kb	icon5.png marime: 3,42 kb

Daca te uiti cu atentie la butoanele si iconurile salvate in format GIF si apoi la cele salvate in format PNG, o sa observi ca, desi cele PNG au o marime superioara, sunt si din punct de vedere al calitatii mult peste imaginile GIF (la iconuri se observa cel mai bine, atunci cand trebuie sa folosim si transparenta - adica imaginea nu va avea fundal). Sigur ca ambele formate, atat GIF cat si PNG, pot fi prelucrate cu ajutorul programelor de editat imagini (ex: Adobe Photoshop) si putem obtine rezultatele satisfacatoare in ambele formate, dar in general formatul PNG este superior celui GIF.

Nu acelasi lucru putem sa spunem si cand vorbim despre fotografii sau imagini mai mari, acolo unde formatul JPG este cel mai indicat. Sa luam de exemplu imaginea folosita in exemplul de la formatul JPG si sa o salvam in format PNG (vom vedea ca are o marime mult mai mare decat cea in format JPG, de 4-5 ori mai mare, calitatea fiind aproximativ la fel:
cursuri

poza.png
marime: 123,0 Kb
Acum, dupa ce am analizat principalele formate ale imaginilor folosite in paginile web, putem sa concluzionam ca este bine pentru fotografii si imagini mari sa folosim formatul JPG sau JPEG, iar pentru butoane si iconuri sa folosim PNG (sau GIF, in functie de cum optimizam imaginile).

Adaugarea imaginilor in paginile web

Asa cum ai vazut, la majoritatea site-urilor, imaginile dau o nota aparte paginilor web. Pentru a folosi imagini si in cadrul paginilor tale web trebuie sa folosesti tag-ul <IMG> insotit de atributul SRC (source) care indica adresa sau calea catre imaginea pe care vrei sa o folosesti. Forma generala a acestui tag va fi:

Atentie la extensie! Nu uita sa scrii si extensia imaginii pentru ca altfel imaginea nu va fi afisata de browser.

Este bine ca atunci cand vrei sa faci un site, sa tii toate fisierele (pagini HTML, imagini etc.) in cadrul aceluiasi folder. Daca vei folosi in codul HTML al paginilor site-ului tau linia de cod de mai sus, imaginea va fi afisata doar daca pagina respectiva va fi in acelasi folder cu imaginea pe care vrei sa o folosesti. In caz contrar imaginea nu va fi afisata.

Sa scriem codul unei pagini web care sa contina o imagine. Luam ca exemplu imaginea de mai jos pe care o salvam astfel:

Click pe imagine
Se va deschide un nou tab (pagina) cu imaginea
Click dreapta pe imagine si alege din meniul care apare: Save Image As)
Salveaza imaginea cu numele invat-html.jpg in acelasi folder cu pagina web pe care o vom face in continuare.

Acum sa vedem codul HTML:

<HTML>
<HEAD>
<TITLE>Imagini</TITLE>
</HEAD>
<BODY>
<CENTER><B>Adăugarea imaginilor în paginile web</B>
<BR>
<IMG SRC="invat-html.jpg">
</CENTER>
</BODY>
</HTML>

Salveaza pagina cu numele imagini.html

Sa vedem cum ar trebui sa arate pagina imagini.html: exemplu10.html

Daca site-ul tau va avea multe fisiere, nu mai este o solutie sa le tii pe toate in acelasi folder. In acest caz, este bine sa grupam fisierele de acelasi tip in subfoldere. Astfel in folderul Site, de exemplu, vom avea un subfolderPoze, in care vor fi salvate toate imaginile site-ului, un subfolder Pagini in care vor fi salvate toate paginile HTML si asa mai departe. Iata cum ar arata structura site-ului:
cursuri

Pentru o functionare corecta vom utiliza una din urmatoarele linii de cod prin care ii vom spune browser-ului ca imaginea se afla in folder-ul Poze:

Tag-uri

ADS2

Mini-chat

ADS

Top 66

Invata HTML

Adaugarea imaginilor in paginile HTML

Formatele imaginilor

Adaugarea imaginilor in paginile web