HTML/Imaxes

En Wikibooks, o Galilibros en galego.

Comezemos cun exemplo minimalista:

<img src="logo_da_cabeceira.png" />

E botémoslle unha ollada tamén a un exemplo algo máis complexo:

<img src="logo_da_cabeceira.png" alt="WikiBooks, aprende libremente"
     title="Logo" />

As imaxen non van almacenadas directamente no ficheiro HTML, senón que van nun ficheiro externo. Para engadir unha imaxe a un código HTML, úsase a etiqueta img co atributo src, que contén o URL do ficheiro da imaxe. Para dar soporte aos navegadores que non poden renderizar imaxes (coma os navegadores en modo texto), podes fornecer o atributo alt cunha descrición textual do contido da imaxe. Para engadir unha axuda á imaxe (o texto que aparece cando no navegador deixas o cursor enriba dela un certo tempo), úsase o atributo title.

O espazo antes de /> que aparece nos exemplos está aí a propósito. Se se omite, algúns navegadores web vellos poderían comportarse de xeito estraño.

[editar] Situación

Por defecto, as imaxes sitúanse na liña na que as colocamos. Para situar unha imaxe como un bloque ou flotante, poden usarse follas de estilo.

[editar] Texto alternativo e axuda

As especificacións de HTML requiren que todas as imaxes inclúan o atributo alt. Este adoita coñecerse coma o "título alternativo". As imaxes poden dividirse en dúas categorías:

• aquelas que engaden contido á páxina,
• e aquelas puramente decorativas, coma os bordos ou os espazadores.

As imaxes devorativas deberían levar un texto alternativo baleiro: alt="".

Sería conveniente que o resto das imaxes incluísen un texto alternativo significativo. O texto alternativo non consiste na descrición da imaxe; para unha descrición curta utilízase o atributo title, e para unha longa o atributo longdesc, que fornece o URL da descrición. O texto alternativo é o texto que substituirá á imaxe en caso de que por algún motivo esta non se amose ao lector (ben polo navegador, ben porque a imaxe aínda non se cargou). Por exemplo:

 <img src="logo_wikibooks.png" alt="WikiBooks"> cre na liberdade de aprendizaxe.

O texto alternativo debería ser o nome da compañía ou proxecto cuxo logo se usa coma imaxe, non o popular "Logo". Non queremos que os usuarios con navegadores en modo texto teñan que ler "Logo cre na liberdade de aprendizaxe". Quen é "Logo"?

Os navegadores en modo texto (coma Lynx) utilizan o texto alternativo para que os seus usuarios comprendan a finalidade de imaxe. Moitos navegadores, coma o Internet Explorer, utilizan incorrectamente o atributo alt para producir axudas da imaxe. Porén, esta función debería corresponderlle ao atributo title. Outros navegadores, coma o Mozilla Firefox, só amosan axudas na imaxe se o atributo title está presente.

[editar] Ancho e alto

Para facer que unha imaxe apareza máis pequena ou máis grande do que é no ficheiro externo, utilízanse os atributos width (ancho) e height (alto).

Ademais, para axudar ao renderizado das túas páxinas por parte dos navegadores, podes achegar os atributos width e height tamén cando queiras que a imaxe apareza a tamaño real. Iso si, asegúrate de que forneces os valores correctos de ancho e alto, ou en caso contrario a imaxe aparecerá distorsionada.

Tamén podes fornecer só un dos atributos, ben width ben height, e o outro atributo completarase de xeito que a imaxe quede a escala, mantendo as proporcións da orixinal.

[editar] Atributos

A continuación repasamos algúns dos atributos máis importantes do elemento img. Os seguintes atributos son unha lista completa daqueles permitidos para o elemento img segundo o "HTML 4 DTD":

[editar] Mapas de imaxes

Os mapas de imaxes son imaxes que conteñen zonas sensibles. Estas zonas sensibles poder ter tres formas distintas: círculo, rectángulo e polígono. A máis doada de usar é a primeira, na que só se necesita especificar X, Y e mailo raio. Nas poligonais fan falla especificar varias coordenadas. Vexamos un exemplo:

<map name="'''exemplo'''">
<area shape="'''polygon'''" coords="210,7,210,198,10,198" href="exemplo_poligono.html" alt="exemplo_poligono">
<area shape="'''circle'''" coords="432,72,58" href="exemplo_circulo.html" alt="exemplo_circulo">
<area shape="'''default'''" nohref>
</map>
<img src="imaxe.png" usemap="#'''exemplo'''">

O elemento shape indica o tipo de figura do que se trata, e o elemento coords as coordenadas en X e Y. Analizando os valores introducidos no atributo coords do polígono, observamos que se trata dun triángulo. Os valores son pares de coordenadas, X (horizontal) e Y (vertical), que sinalan os puntos do polígono. Os valores introducidos no atributo coords do círculo correspóndense coas coordenadas no eixo X, no eixo Y, e ovalor do raio. A figura default corresponde ás zonas da imaxe que non son "sensibles". Por último, a continuación do mapa da imaxe sitúase a propia imaxe, dende a que se fai referencia mediante o atributo usemap.