Apunts Pràctics HTML 4.0 - 5 Inserint imatges

Hi ha molts tipus d'imatges o fotografies, no volent dir de continguts diferents, sinó en el sentit que un mateix gràfic es pot guardar de formes diferents al nostre disc dur. Per a l'ordinador, una imatge d'una persona o un gràfic mostrant un dibuix, és el mateix; així que les dues paraules són similars. És una imatge o gràfic digital.
La forma en que es pot guardar, dependrà del programa que tinguem i la qualitat que hi volguem donar. Aquestes poden ser de format PCX, BMP, PICT, TIF, EPS, PNT, GIF, JPG, TGA, PCD, WMF, etc,. Tots ells guarden la imatge, però de forma diferent, amb grandària diferent i amb qualitat de colors i resol.lució diferent.
Però de moment, a les pàgines Web només hi podrem insertar del tipus GIF (Graphics Interchange Format), i JPG (Joint Photographics Engineering Group). [tot i que si es té instal.lat un programa plug-in al visualitzador, també es podran veure].

Aquesta possibilitat d'incloure imatges a una pàgina ha estat una de les caracterítiques que ha fet emergir extraordinàriament la pàgina Web.Però hem d'anar amb ull.
Moltes imatges, de molt bona qualitat, de pantalla sencera, etc, faran un Web extraordinari, meravellós, però només pel qui l'ha dissenyat. No hem d'oblidar que tot el que hi posem a la pàgina, haurà de passar pel fil telefònic, i a no ser que tothom tingui Internet per cable, l'usuari si s'ha d'esperar, el més segur és que s'en vagi a veure un altre Web i ens deixi.
Per altra banda, si incorporem moltes imatges com botons, línies, fons, etc i són els mateixos, per a l'ordinador que veu la pantalla, només l'haurà de carregar un cop, i això farà que no hi hagi massa retard.
Una possibilitat que tenen les imatges GIF és que poden ser amb format Interleaced o NonInterleaced. Una imatge Interceaced, vol dir que es visualitzarà de forma progressiva en quatre passades, es a dir, primer es visualitzen les primeres línies de tota la imatge de la primera part, a continuació les segones línies de la segona passada, etc. Una imatge NonInterleaced es visualitza des del començament fins al final, per aquest ordre i a mesura que vagi arribant.
L'opció Interleaced facilita a l'usuari quan encara no hagi arribat totalment la imatge, ja es podrà deduïr de quina imatge és.

1. Insertant una imatge

L'element IMG SRC és el que es fa servir per a insertar imatges en una pàgina Web, també anomenades imatges en línia.

<img src="file:///C:/net/curshtml/nc.gif">
o bé

El els dos casos anteriors, l'informem que insertem la imatge nc.gif. Donat que l'adreça d'on està la imatge, pot ser d'adreça relativa o absoluta, en el primer cas és absoluta i en el segon és relativa.
Una adreça absoluta ens indica i assegura que la imatge l'anirà a buscar a un lloc concret, que pot ser el mateix o un altre, o un altre lloc de la Web.
Una adreça relativa indica que la imatge l'anirà a buscar al mateix directori d'on es troba situat el document que la conté, o bé, a l'adreça que s'ha definit a l'apartat HEAD, Base.

2. Canviant l'aliniació

L'aliniació de les imatges respecte al text de la pàgina, es fa amb l'element ALIGN, podent agafar els valors següents:

ALIGN=LEFT: Posiciona la imatge a l'esquerra de la pantalla. Opció per defecte.
ALIGN=RIGHT: Posiciona la imatge a la dreta de la pantalla.
ALIGN=TOP: Posiciona el text en relació a la imatge al cap de munt de la imatge.
ALIGN=MIDDLE: Posiciona el text en relació a la imatge, en mig de la imatge.
ALIGN=BOTTOM: Posiciona el text en relació a la imatge a la base de la imatge. Opció per defecte.

3. Canviant la mida de la imatge

La imatge, per defecte, es mostra amb la mida real que té. Però es pot obligar a que tingui uns valors determinats, en pixels, o en tant per cent de la mida de la finestra del visualitzador, no de la imatge.
Els elements que ens ho permeten són WIDHT i HEIGHT.

	Sense especificar la mida, que és de 142 pixels d'ample i 53 d'alt. <img src="nc.gif">
	Especificant una mida concreta, en pixels <img src="nc.gif" width="71"height="26">
	Especificant el 10% de la pantalla <img src="nc.gif" width="10%"height="10%">

4. Donant un requadre exterior a la imatge

L'atribut BORDER es fa servir per a dibuixar un requadre al voltant de la imatge, amb un valor de gruix de la línia.

	Gruix de línia=1 <img src="nc.gif" border="1">
	Amb un gruix de línia=2 <img src="new.gif" border="2">

Com es pot comprovar, en una imatge que no sigui rectangular, donar-li l'atribut BORDER pot fer que no quedi massa bé visualment.
Generalment l'atribut BORDER es dona quan la imatge es cliclable, es a dir, conté un link, es pot pijar amb el mouse per a anar a un altre lloc, però no és obligatori.

4. Deixant un espai en blanc al voltant de la imatge

VSPACE i HSPACE serveixen per a deixar un número específic de píxels a deixar en blanc al voltant de la imatge.

	Imatge normal
	Imatge amb 10 píxels d'espais en blanc vertical i 20 en horitzontal. <img src="new.gif" hspace="20" vspace="10">

6. Donant un text alternatiu a la imatge

L'element ALT serveix per a donar una visualització d'un text alternatiu a aquells visualitzadors que per qualsevols causa, no poden mostrar la imatge.

En el cas de que la imatge no es pogués mostrar, es visualitzaria el text: Nou
<img src="new.gif" alt="Nou">

7. Imatges pseudo-videos

Les imatges pseudo-videos, les que tenen moviment, no són videos pròpiament dits, com poden ser els AVI, els MPG, els VDO o els MOV, sinò que són fotografies tipus GIF.
Un GIF animat és una col.lecció de GIF's en que cadascun representa una fase del moviment que volem aconseguir. Un cop els tenim gravats tots els moviment en GIF's separats, amb programes especials de creació de GIF's animats, com pot ser GIF Construction Set, aquest totes les fotografies les grava una a sobre de l'altra en un sol arxiu.
Si veiem aquesta fotografia animada en un programa de retoc fotogràfic que no suporti els GIF's animats, només veurem l'última fotografia o moviment. Si ho veiem en un que ho suporti, veurem el moviment de tots els GIF's, i ens donarà la sensació de video en moviment.
La inserció d'aquests tipus de imatges especials en pantalles Web, té el mateix tractament que un GIF normal en quant a paràmetres.

8. Imatges amb fons transparent

De fet, que el fons d'un gràfic que sigui transparent o no, no depen de cap instrucció HTML, sinó de la propietat d'alguns programes de retoc fotogràfic o editors HTML, en que un color, generalment es voldrà que sigui dels fons de la fotografia, sigui transparent. D'aquesta forma, es podrà visualitzar amb més claretat una imatge concreta.

	Imatge amb el fons tranparent.
	Imatge normal, amb el fons no transparent.

LEFT
RIGHT
TOP	Text en TOP <img src="nc.gif" align="top">
MIDDLE	Text en MIDDLE. <img src="nc.gif" align="middle">
BOTTOM	Text en BOTTOM <img src="nc.gif" align="bottom">

*© Melcior Oliveras 1998 melcior@intercom.es*