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
[editar]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
[editar]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
[editar]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
[editar]| 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
|
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 | |
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
[editar]- Mapas de imaxes, para indicar zonas das imaxes que se poden premer.
| HTML | ||
| ← Volver a Zona de texto | Imaxes | Seguir con Ligazóns → |