HTML/Imaxes

HTML
← Volver a Zona de texto	Imaxes	Seguir con Ligazóns →

Comecemos 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.

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.

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.

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.

Atributos

Atributo	Valor	Descrición
src		O URL da imaxe que o navegador ten que amosar.
alt		Un substituto textual pouco extenso da imaxe, de xeito que o navegador poida usalo en lugar de amosar esta. Útil para lectores de pantalla, navegadores en modo texto ou navegadores coa carga de imaxes desactivada.
longdesc		Un URL que fornece unha descrición longa da imaxe.
name		O nome da imaxe, que poderán usar as linguaxes de scripting. Para a compatibilidade con software vello, utilícese id.
id		O identificador único da imaxe, que poderán usar as linguaxes de scripting. languages.
class		Asigna unha ou máis clases CSS á imaxe para controlar o estilo.
lang		Información lingüística.
dir		Dirección do texto.
title		Título da imaxe, amosado por algúns navegadores como axuda ao deixar o cursor sobre a imaxe un tempo.
style		Información CSS seguida nunha liña.
align		Aliñamento da imaxe. Pode ter os valores bottom (abaixo), middle (a media altura), top (arriba), left (á esquerda), right (á dereita). Está obsoleto. No seu lugar deberían usarse follas de estilo.
width		O ancho da imaxe. Se se introduce un número sen unidade, interpretarase que a unidade é o pixel (px).
height		Alto da imaxe, úsase coma width.
border		Ancho do bordo cando unha imaxe liga a algo. Adoita ser 0. Está obsoleto. No seu lugar deberían usarse follas de estilo.
usemap	identificador	Identificador único dun mapa de imaxe a empregar sobre a imaxe.

Véxase tamén

• Mapas de imaxes, para indicar zonas das imaxes que se poden premer.

HTML
← Volver a Zona de texto	Imaxes	Seguir con Ligazóns →