Dark-Knight.MyForum.ro

Crystydica · Administrator Data inscrierii: 20/Mai/2008 Mesaje: 200

HTML - imagini

Pana acum ai invatat cum sa folosesti decat texte si nuanțe 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 numeroase formate ale imaginilor. Cele mai raspandite sunt cele cu extensia .gif si cele care au una din terminatiile .jpg sau .jpeg. 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.

Butoane:

buton1.gif
marime: 877 bytes

buton2.gif
marime: 925 bytes

buton3.gif
marime: 921 bytes
Icon-uri:

icon1.gif
marime: 336 bytes

icon2.gif
marime: 245 bytes

icon3.gif
marime: 401 bytes
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 întrebuințat pentru fotografii. Imaginile care apartin acestui compus au extensia .jpg sau .jpeg.

poza.jpg
marime: 6,45 Kb

poza.gif
marime: 12,9 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.
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:
<IMG SRC="numeleimaginii.extensie">

! 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. Salveaza imaginea de mai jos (click dreapta, Save Picture As) sub numele de bebe.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>Ad&#259ugarea imaginilor &#238n paginile web
 
<IMG SRC=bebe.jpg>
</CENTER>
</BODY>
</HTML>

Salveaza pagina cu numele imagini.html.

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

Imagine

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 subfolder Poze, 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:

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:

<IMG SRC=”../Poze/bebe.jpg”>
- daca pagina va fi salvata in subfolderul Pagini si imaginea va fi in subfolderul Poze.

<IMG SRC=”Poze/bebe.jpg”>
- daca pagina va fi salvata in folderul Site si imaginea va fi in subfolderul Poze.

Incearca si tu:
1. Fa un folder pe care denumeste-l Site.
2. In cadrul acestuia mai fa doua subfoldere: Pagini, respectiv Poze.
3. Copiaza imaginea bebe.jpg in folderul Poze.
4. Modifica in codul HTML de mai sus linia:
<IMG SRC=”bebe.jpg”>
cu linia:
<IMG SRC=”../Poze/bebe.jpg”>
5. Salveaza pagina in folderul Pagini cu numele imagini.html.
6. Dublu click pe imagini.html din folder-ul Pagini.

Daca totul a functionat bine ar trebui sa obtii aceeasi pagina web.

Daca vrei ca imaginea sa fie incadrata de un chenar, foloseste atributul BORDER al tag-ului <IMG>. Acest atribut are ca valoare numere intregi pozitive.
<IMG SRC=”../Poze/bebe.jpg” BORDER=5>
Noua pagina web va fi: click aici.

Daca imaginea va fi de mărimi mai mari, atunci pana cand se va incarca si va fi afisata de browser, utilizatorul poate vedea un text inlocuitor al imaginii. Acest lucru se poate realiza utilizând atributul ALT impreuna cu tag-ul <IMG>.

Daca trecem cursorul mouse-ului deasupra imaginii, o sa apara textul pe care l-am scris la atributul ALT.
De exemplu, la pagina de mai sus, imagini.html, vom inlocui linia:
<IMG SRC=”../Poze/bebe.jpg” BORDER=5>

cu linia:
<IMG SRC=”../Poze/bebe.jpg” BORDER=5 ALT=”Imagine bebe”>
Folosirea imaginilor alaturi de texte
Pentru a alinia o imagine vom folosi atributul ALIGN al tag-ului <IMG>. Atributul ALIGN poate avea una dintre valorile: left sau right, aliniere la stanga sau la dreapta paginii.

Salveaza imaginea de mai jos (click dreapta, Save Picture As) cu numele de euro.jpg in folder-ul Poze.

Acum sa scriem codul HTML al unei pagini web care va contine si text in jurul imaginii:
<HTML>
<HEAD>
<TITLE>EURO 2004</TITLE>
</HEAD>
<BODY>

<CENTER>Istoria campionatului european de fotbal</CENTER>
 
<IMG SRC="../Poze/euro.jpg" BORDER=5 ALIGN=left>

Prima edi?ie a campionatului european de fotbal a avut loc &#238n Fran?a &#238n anul 1960, iar c&#226?tig&#259toare a fost Rusia. Urm&#259torul turneu european a avut loc &#238n anul 1964 &#238n Spania, acolo unde s-a impus ?ara gazd&#259. Patru ani mai t&#226rziu, &#238n 1968, &#238n Italia, a fost r&#226ndul acesteia s&#259 c&#226?tige trofeul. &#206n 1972 organizatoare a fost Belgia, Republica Federal&#259 German&#259 impun&#226ndu-se. &#206n 1976 a venit r&#226ndul Cehoslovaciei s&#259 c&#226?tige campionatul european de fotbal, disputat &#238n Iugoslavia. &#206n 1980, Germania a fost c&#226?tig&#259toare, &#238n Italia, iar &#238n 1984, edi?ie g&#259zduit&#259 de Fran?a, din nou s-a impus ?ara organizatoare. Edi?ia din anul 1988 a avut loc &#238n Germania ?i a fost c&#226?tigat&#259 de Olanda. Dup&#259 patru ani, Danemarca se impunea &#238n Suedia, pentru ca dup&#259 al?i patru ani, &#238n 1996, s&#259 fie r&#226ndul Germaniei s&#259 &#238?i adjudece trofeul, &#238n Anglia. &#206n anul 2000 Belgia ?i Olanda au organizat turneul final, iar c&#226?tig&#259toare a fost Fran?a. Ultimul turneu final, care s-a disputat &#238n Portugalia, &#238n 2004, a f&#259cut ca Grecia s&#259 c&#226?tige trofeul. 
</BODY>
</HTML>

Salveaza pagina cu numele de euro.html in folderul Pagini.

Iata cum va arata aceasta pagina: click aici.

Asa cum ai observat, textul este afisat in jurul imaginii. Daca vrei ca textul sa fie afisat la o anumita distanta de imagine, foloseste atributele HSPACE (spatiu pe orizontala) si VSPACE (spatiu pe verticala). Valorile acestor semnale trebuie sa fie numere intregi, care reprezinta de fapt distanta in pixeli dintre imagine si text. De exemplu inlocuieste, in codul de mai sus, linia:
<IMG SRC=”../Poze/euro.jpg” BORDER=5 ALIGN=”left”>

cu urmatoarea:
<IMG SRC=”../Poze/euro.jpg” BORDER=5 ALIGN=”left” HSPACE=50 VSPACE=20>

Salveaza pagina cu numele euro2.html in folder-ul Pagini.

Vezi diferenta: click aici.

Foloseste diferite valori pentru atributele HSPACE si VSPACE pana cand vei obtine rezultatele dorite.
Imagini ca fond al unei pagini web
Cu ajutorul atributului BACKGROUND al tag-ului <BODY> poti folosi o imagine ca fond al unei pagini web. Pentru a intelege mai bine, copiaza imaginile urmatoare (click dreapta, iar apoi Save Picture As) in folder-ul Poze cu numele scrise sub fiecare.

background1.jpg

background2.jpg

background3.jpg

background4.jpg

background5.jpg

Acum in codul paginii imagini.html din folder-ul Pagini adauga tag-ului <BODY> atributul BACKGROUND dupa cum urmeaza:
<BODY BACKGROUND=”../Poze/background1.jpg”>

Salveaza pagina cu numele background1.html.

Iata rezultatul: click aici.

Repeta operatiunea de mai sus, numai ca in loc de background1.jpg foloseste pe rand unul din numele celorlalte imagini.

Salveaza paginile cu numele background2.html, background3.html, background4.html, background5.html.[/img]