Els documents HTML poden reservar espais per a la inserció d'imatges.
Una imatge és constituïda per un mapa de bits; és a dir, per una quadrícula de punts molt petits, per a cada un dels quals està especificada la intensitat del vermell, del verd i del blau. El format més bàsic dels mapes de bits és el .bmp. Aquest format és, a la pràctica, inviable a internet, a causa del gran volum del fitxer, que comporta una velocitat de circulació molt petita.
Això ha obligat a desenvolupar diversos tipus de formats de menys pes: s'hi perd, d'una manera o altra, informació - i per tant qualitat -, però s'hi estalvia espai de memòria i s'hi guanya velocitat. Els més emprats són:
La incorporació de les imatges al document s'aconsegueix amb l'etiqueta <img /> (<img>, sense etiqueta final), i la localització de la imatge amb l'atribut src. Cal afegir-hi l'atribut alt:
L'atribut adreça serveix per a indicar l'adreça - llarga o curta - de la imatge, amb els mateixos criteris que en el cas dels hipervincles.
L'ús d'alt assegura la presentació del text en el cas que per qualsevol motiu no es reproduís la imatge.
En la versió Strict, l'element IMG no pot anar inserit directament a BODY, sinó dins P, TD, H1 (i similars), DIV i alguns altres. En Transitional aquest requisit no és imprescindible.
Es pot atribuir a la imatge una alçada i amplada diferents de les reals, però es perd qualitat, especialment si fem una ampliació. I en tot cas és molt important que es respectin les proporcions entre les dues dimensions.
En aquests casos s'ha d'especificar l'amplada i l'alçada de la imatge, en píxels:
Fora d'aquest cas, l'ús estàndard exigeix no especificar l'alçada i l'amplada; els navegadors ja hi atribueixen automàticament les dimensions reals.
Si un document ha de tenir diverses imatges i fragments de text intercalats, és molt recomanable d'emmarcar-ho tot en una taula.
En comptes d'un text, podem fer servir una imatge com a origen d'un hipervincle. La sintaxi és
adreça1 és l'adreça - curta o llarga, segons convingui - del document de destí; adreça2 és l'adreça - curta o llarga - de la imatge.
Podem associar hipervincles diferents a sectors diferents d'una imatge; això s'aconsegueix mitjançant l'especificació d'un mapa d'imatge.
Un mapa d'imatge s'indica amb un element delimitat per <map>...</map>, que té un identificador. L'identificador estàndard és id, obligatori per a un document ben format. Però alguns navegadors no el reconeixen, i per aquest motiu s'hi acostuma a afegir name, amb el mateix valor per a ambdós atributs.
Dins aquest element hi ha un o més elements <area /> (<area>, sense etiqueta final), un per a cada un dels sectors que calgui definir. La definició s'obté amb les propietats shape (forma), coords (coordenades), href (origen del document cridat) i alt (explicació alternativa, com en les imatges)
Cal associar aquest mapa d'imatge a la imatge, mitjançant usemap, que especifica el nom que ha rebut el mapa d'imatge:
on mapa és un nom qualsevol, adreça1 és l'adreça - curta o llarga - de la imatge, i adreça2, adreça3, etc. són les adreces dels documents associats amb cada un dels sectors del mapa d'imatge.
Podem triar tres formes diferents: rectangular (shape="rect"), poligonal (shape="poly") i circular (shape="circle"),
Pel que fa a les coordenades dels punts delimitadors, s'indiquen així:
Totes les eines de tractament d'imatges tenen recursos per a determinar les coordenades de qualsevol punt d'aquesta. Hi ha, a més, programes especials - autònoms o dins d'un editor HTML - que generen el codi d'una manera interactiva i sense d'haver-se d'ocupar de les coordenades.
Les classes |
||
|
Sovint volem que en un document hi hagi dues o més classes d'elements P (o de qualsevol altre tipus d'element). En aquests casos se'n creen diverses variants, anomenades precisament classes, com ho mostra l'exemple:
|
||