Imaxes

Anterior - Seguinte

A etiqueta <img>

En HTML as imaxes defínense coa etiqueta <img />. Esta etiqueta non ten contidos, o que significa que non ten etiqueta de peche.

Para mostrar unha imaxe é necesario indicar onde se atopa dita imaxe utilizando o atributo src. O valor do atributo src é a ruta da imaxe que se desexa mostrar.

A sintaxe para definir unha imaxe é a seguinte:

<img src="ruta/a/imaxe/nomeimaxe" />

A ruta á imaxe soe ser sempre relativa ao directorio onde se atopa o ficheiro html que inclúe a imaxe. Por exemplo se temos a seguinte estructura de directorios:

O código para incluir as imaxes imaxe1.jpg, imaxe2.jpg, imaxe3.jpg e imaxe4.jpg en ficheiro.html será o seguinte:

<img src="imaxe1.jpg" />
<img src="imaxes/imaxe2.jpg" />
<img src="../imaxe3.jpg" />
<img src="../../Pedro/imaxe4.jpg" />

O navegador mostrará a imaxe onde atope a etiqueta <img />


O atributo alt

O atributo alt serve para incluir unha descrición da imaxe. Esta descrición mostrarase no caso de que o navegador non sexa capaz de cargar a imaxe.

<img src="directorio/imaxe.jpg" alt="María e Susana no parque" />

É unha boa práctica incluir este atributo en todas as imaxes que utilicemos. Desta maneira, facilitaremos a navegación pola nosa páxina en navegadores só de texto ou navegadores para cegos.

Exercicio

Proba a incluir algunha imaxe no teu documento HTML de proba.


Trucos sobre imaxes

As imaxes soen ter un tamaño grande polo que poden facer que a nosa páxina tarde en cargarse. Por esto, hai que utilizar as imaxes con coidado, evitando aquelas que sexan innecesarias.

Se temos que incluir moitas imaxes nunha páxina (por exemplo, se desexamos crear un álbume de fotos) sería conveniente seguir os seguintes pasos:

  1. Crear imaxes máis pequenas a partir das imaxes grandes utilizando un programa de manipulación de imaxes (Photoshop e similares)
  2. Incluir na páxina as imaxes pequenas
  3. Crear un enlace sobre cada unha das imaxes pequenas que ao pinchar, nos leve á imaxe en grande.

Desta forma, a páxina con todas as imaxes tardara moito menos en cargarse e non perderemos a imaxe en grande.


Anterior - Seguinte