Ce înseamnă HTML

CAP. 7. FOLOSIREA IMAGINILOR

7.1. Tipuri de imagini

Deoarece nu toate tipurile de imagini sunt suportate de browsere, vom proceda mai întâi la o trecere în revistă a principalelor tipuri ce pot fi utilizate în documentele web.

Singurele tipuri care pot fi utilizate fără restricţii în browsere sunt următoarele:

GIF: Graphic Interchange Format, sunt imagini care au maximum 256 de culori. Formatul GIF este cel mai bun pentru redarea imaginilor de tipul logo-uri, pictograme şi butoane. Este formatul cel mai răspândit pe Internet.

O categorie aparte a acestui format o constituie fişierele animate de tip GIF care contribuie la obţinerea unor efecte deosebite.

JPG, JPEG: Joint Photographic Expert Group, sunt imagini care pot avea până la 16,7 milioane de culori. Formatul JPEG este recomandat pentru redarea fotografiilor şi a altor imagini are necesită o claritate deosebită.

Mai există câteva formate care pot fi utilizate, dar cu anumite rezerve, întrucât nu vor fi recunoscute în toate browserele, fiind recomandată convertirea lor cu programe specializate (Adobe PhotoShop, Corel PhotoPaint etc.) în formatele prezentate anterior. Aceste formate sunt:

PNG: Portable Network Graphics

BMP: MS Windows BitMaP

TIFF: Tagged Image File Format

PCX: PC Paintbrush Format

La alegerea unei imagini trebuie avut în vedere faptul că cele de dimensiuni mari (ne referim la dimensiunea fişierului, nu la suprafaţa imaginii) vor încetini în mod considerabil încărcarea unui document web. O pagină web care conţine multe imagini se va încărca mult mai greu decât o pagină web care conţine mai mult text şi mai puţine imagini. De aceea trebuie să realizaţi un echilibru între rapiditatea de încărcare şi design-ul site-ului.

7.2. Inserarea imaginilor

Dacă v-aţi hotărât să inseraţi o imagine într-un document web, va trebui să folosiţi tag-ul <IMG>. Prezenţa tag-ul de închidere </IMG> este opţională.

Spre deosebire de alte tag-uri, la folosirea tag-ului <IMG> este obligatorie specificarea atributui <SRC> care stabileşte sursa (source) imaginii ce trebuie încărcată, şi este recomandată folosirea atributului <ALT>, care stabileşte textul ce descrie imaginea şi funcţionează ca un tag (alternative). Este afişat atunci când vizitatorul deplasează cursorul mouse-ului deasupra imaginii sau când sunt probleme cu încărcarea imaginii.

Vom exemplifica cele de mai sus folosind următorul cod:

<HTML>

<HEAD>

<TITLE>Inserarea unei imagini</TITLE>

</HEAD>

<BODY>

<IMG SRC="computer.jpg" ALT="Un computer in imagine">

</BODY>

</HTML>

Dacă nu aveţi un fişier de tip imagine (.gif sau .jpg) pe care să-l folosiţi ca exemplu, puteţi descărca fişierul nostru dând click aici.

Notă: Fiţi atenţi la calea utilizată la inserarea fişierului imagine! În acest exemplu fişierul computer.jpg este salvat în acelaşi director ca şi fişierul test6.html.

Rezultatul afişat va fi următorul:

Rezultatul va fi identic şi dacă folosiţi imaginea existentă pe site-ul nostru, în condiţiile în care îi specificaţi calea exactă şi aveţi o conexiune internet permanentă, astfel:

<HTML>

<HEAD>

<TITLE>Inserarea unei imagini</TITLE>

</HEAD>

<BODY>

<IMG SRC="http://html.webmarketclub.com/teste/computer.jpg" ALT="Un computer in imagine">

</BODY>

</HTML>

7.3. Formatarea imaginilor

Formatarea imaginilor se realizează utilizând celelalte atribute opţionale care definesc acest tag, şi anume:

Atribut	Valoare	Descriere
align	top bottom middle left right	Specifică cum va fi aliniată imaginea în raport cu textul ce o înconjoară.
border	pixels	Defineşte o bordură în jurul unei imagini.
height	pixels	Defineşte înălţimea unei imagini.
hspace	pixels	Defineşte spaţiul liber din părţile laterale ale unei imagini.
ismap	URL	Defineşte imaginea de tip “server-side image map”.
longdesc	URL	Adresa URL către un document care conţine o descriere lungă a imaginii.
usemap	URL	Defineşte imaginea de tip “client-side image map”. Se foloseşte în combinaţie cu tag-urile <map> şi <area>.
vspace	pixels	Defineşte spaţiul liber din părţile de sus şi de jos ale unei imagini.
width	pixels	Defineşte lăţimea unei imagini.

7.4. Aplicaţie practică

În continuare vom prezenta modul de inserare şi de formatare a unor imagini, astfel că vom crea un nou fişier numit test6.html care va conţine următoarele linii de cod:

<HTML>

<HEAD>

<TITLE>Inserarea si formatarea unor imagini</TITLE>

</HEAD>

<BODY>

O imagine in text

<IMG SRC="http://html.webmarketclub.com/teste/computer.jpg" ALT="imaginea 2" ALIGN="middle" HEIGHT="55" WIDTH="55" BORDER="5"> aliniata pe verticala la mijloc (middle), redimensionata, dimensiunile fiind controlate de atributele "height" si "width", si cu margine (border) de 5 pixeli.

Iata un text, cu imagini redimensionate, aliniate una la stanga si una la dreapta, una cu spatiere laterala si una cu spatiere verticala.<IMG SRC="computer.jpg" ALT="imaginea 3" ALIGN="left" HEIGHT="65" WIDTH="55" HSPACE="30"> <IMG SRC="computer.jpg" ALT="imaginea 3" ALIGN="right" HEIGHT="65" WIDTH="55" VSPACE="20"> Iata un text, cu imagini redimensionate, aliniate una la stanga si una la dreapta, una cu spatiere laterala si una cu spatiere verticala. Iata un text, cu imagini redimensionate, aliniate una la stanga si una la dreapta, una cu spatiere laterala si una cu spatiere verticala. Iata un text, cu imagini redimensionate, aliniate una la stanga si una la dreapta, una cu spatiere laterala si una cu spatiere verticala. Iata un text, cu imagini redimensionate, aliniate una la stanga si una la dreapta, una cu spatiere laterala si una cu spatiere verticala.

</BODY>

</HTML>

Rezultatul afişat va fi următorul:

7.5. Folosirea imaginilor ca link-uri

A devenit o modă înlocuirea link-urilor de tip text cu link-uri de tip imagine sau pictogramă (icon). De exemplu, a devenit o practică uzuală înlocuirea textului “next” cu o pictogramă simbolizând o săgeată orientată spre dreapta sau cu o pictogramă reprezentând o mână cu arătătorul indicând spre dreapta.

În mod obişnuit, o imagine plasată în interiorul unei ancore (adică între tag-urile <A> şi </A>) devine o parte a conţinutului ancorei, astfel încât un click pe imaginea respectivă va avea acelaşi rezultat ca şi un click pe textul unei ancore.

Browser-ele pot modifica imaginile într-un mod speciale (de obicei adăugându-le o bordură) pentru a indica faptul că reprezintă un link.

Sintaxa folosirii acestor tag-uri este următoarea:

<A HREF="document.html"> <IMG SRC="imagine.gif" BORDER="pixeli" WIDTH="pixeli" HEIGHT="pixeli" ALT="Text alternativ"> </A>

Standardul HTML oferă posibilitatea să includeţi mai multe link-uri într-o singură imagine, astfel încât dacă daţi click în zone diferite ale imaginii, vor fi accesate link-uri diferite. Imaginile de acest tip sunt cunoscute sub numele de imagini-hartă (image maps).

Există două posibilităţi de a crea astfel de imagini-hartă:

1. prin folosirea atributului ismap în tag-ul <IMG> sunt create imaginile de tip server-side image map

2. prin folosirea atributului usemap în tag-ul < IMG > sunt create imaginile de tip client-side image map

Deoarece pentru imaginile de tip server-side image map este necesar accesul la serverul pe care se află stocată imaginea, precum şi faptul că sunt generate întârzieri la încărcarea paginilor, ne vom ocupa numai de imaginile client-side image map care nu prezintă aceste neajunsuri.

7.6. Imagini de tip client-side image map

Aceste imagini sunt create prin folosirea atributului usemap în elementul < IMG > şi definite prin elementele speciale marcate de tag-urile <MAP> şi <AREA> (se folosesc numai împreună, elementul <AREA> fiind întotdeauna inclus în elementul <MAP>).

Tag-ul <MAP> defineşte o imagine ca fiind de tip hartă, iar tag-ul <AREA> specifică coordonatele zonelor imaginii-hartă, precum şi link-urile corespunzătoare fiecărei zone.

Atributul usemap preia valoarea atributelor id sau name (în funcţie de browser), stabilite în tag-ul <MAP>.

Trebuie amintit faptul că doar tag-ul <MAP> necesită tag-ul de închidere </ MAP>.

Atributele opţionale care definesc tag-ul <MAP> sunt:

Atribut	Valoare	Descriere
id	nume_hartă	Atribuie o denumire imaginii-hartă
name	nume_hartă	Este identic cu id, se foloseşte doar pentru a asigura compatibilitatea cu anumite browsere

Atributele opţionale care definesc tag-ul <AREA> sunt:

Atribut	Valoare	Descriere
alt	text	Specifică o descriere alternativă a zonei active
shape	rect sau rectangle circ sau circle poly sau polygon	Defineşte tipul de zonă (dreptunghi, cerc sau poligon)
coords	dacă shape="rect" atunci coords="stânga,sus,dreapta,jos" dacă shape="circ" atunci coords="centru_x,centru_y,rază" dacă shape="poly" atunci coords="x1,y1,x2,y2,..,xn,yn"	Specifică coordonatele zonei active
href	URL	Specifică URL-ul ţintă al zonei
nohref	true false	Exclude o zonă din hartă
target	_blank _parent _self _top	• URL-ul ţintă se va deschide într-o nouă fereastră (este implicit, deci poate fi şi nespecificat) • URL-ul ţintă se va deschide în fereastra curentă • URL-ul ţintă se va deschide în acelaşi cadru din care s-a dat click • URL-ul ţintă se va deschide în cadrul părinte

7.7. Aplicaţie practică

În continuare vom prezenta modul de utilizare a unei imagini-hartă, astfel că vom crea un nou fişier numit test7.html care va conţine următoarele linii de cod:

<HTML>

<HEAD>

<TITLE>Utilizarea unei imagini-harta</TITLE>

</HEAD>

<BODY>

Dati click pe una din formele geometrice:

<IMG SRC="http://html.webmarketclub.com/teste/imagine-harta.gif" WIDTH="268" HEIGHT="95 "ALT="Imagine de tip harta" USEMAP="#harta">

<MAP ID="harta" NAME="harta">

<AREA SHAPE="rect" COORDS="0,0,65,95" HREF="http://html.webmarketclub.com/teste/dreptunghi.html" TARGET="_blank" ALT="Dreptunghi">

<AREA SHAPE="circle" COORDS="125,47,40" HREF="http://html.webmarketclub.com/teste/cerc.html" TARGET="_blank" ALT="Cerc">

<AREA SHAPE="poly"

COORDS="185,25,224,1,224,1,268,25,268,72,226,93,185,71" HREF="http://html.webmarketclub.com/teste/hexagon.html" TARGET="_blank" ALT="Hexagon">

</MAP>

</BODY>

</HTML>

Rezultatul afişat va fi următorul:

Notă: Pentru aflarea coordonatelor formelor geometrice am folosit un program specializat “Mapedit” (este un program shareware, poate fi folosit pentru testare numai 30 de zile şi poate fi descărcat la adresa http://www.boutell.com/mapedit)