Imagen <img>
Para
insertar una imagen es necesario insertar la etiqueta <img>. Dicha
etiqueta no necesita etiqueta de cierre.
El nombre de la imagen ha de especificarse a través del atributo
src. Por ejemplo, para insertar una
imagen llamada animales.jpg escribiremos:
<img
src="D:/imagenes/animales.gif">
Teniendo
en cuenta que la imagen está dentro de la carpeta imagenes, que se encuentra en
la unidad D del equipo (referencia relativa al documento)..
Para
trabajar de una forma más sencilla y ordenada, es recomendable que todos los
documentos html se encuentren en un mismo directorio, y que dentro de este
directorio existan diferentes carpetas para agrupar otros objetos, como puede
ser una carpeta destinada a almacenar imagenes, o una carpeta destinada a
almacenar archivos de audio, etc.
Texto
alternativo
Cuando
una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al
especificar mal el valor del atributo src, aparece un recuadro blanco con una X
roja en su lugar, junto con el nombre de la imagen.
Podemos
hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que
nosotros deseemos, gracias al atributo alt.
Por
ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el
texto alternativo “Imagen de un gato”, para ello insertamos el siguiente
código:
<img
src="D:/imagenes/gatito.gif" alt="Imagen gato" >
El
texto alternativo se muestra también al situar el puntero sobre la imagen. Si
situas el puntero sobre la imagen durante unos segundos, verás como aparece el
texto “Imagen gato”.
Borde
de una imagen
En
general, al visualizar una página en un navegador las imágenes aparecen sin
ningún borde alrededor, pero es posible establecer uno a través del atributo border.
El
atributo border puede tomar valores numéricos, que indican el grosor en
píxeles del borde. Para que una imagen
salga con borde habria que escribir:
<img
src="D:/imagenes/animales.gif" border="4" >
Hay
que tener en cuenta que el borde de la imagen siempre será de color negro, a no
ser que la imagen contenga un enlace, en cuyo caso el color del borde será el
color establecido para los vínculos.
Tamaño
de una imagen
Cuando
insertamos una imagen, esta se muestra en los navegadores con su tamaño
original, pero por diversos motivos puede interesarnos modificar dicho tamaño.
A
través de los atributos width (anchura) y height (altura) puede modificarse el
tamaño de la imagen. Dicho cambio de tamaño no se aplica directamente sobre el
archivo de imagen, sino que lo que varía es la visualización de la imagen en el
navegador.
Por
ejemplo:
<img
src="D:/imagenes/animales.gif" width="200"
height="80">
Alineación
de una imagen
La
alineación de las imágenes se establece a través del atributo align.
Este atributo se utiliza junto con la etiqueta <p> de parrafo.
Los valores para el atributo align son los siguientes:
Bottom Inferior
Left Izquierda
Right Derecha
Top Superior
Los valores para el atributo align son los siguientes:
Bottom Inferior
Left Izquierda
Right Derecha
Top Superior
No hay comentarios:
Publicar un comentario