IMÁGENES

Las características multimedia de HTML permiten a los autores incluir en sus páginas imágenes, aplicaciones (programas que se descargan automáticamente y se ejecutan en la máquina del usuario), videoclips, y otros documentos HTML en sus páginas.

La etiqueta <img> se utiliza para incluir una imagen dentro del documento.Atributos:

Atributo Valor Descripción
src fichero Indica el nombre del fichero que contiene la imagen
alt texto presenta un texto en caso de que la imagen no aparezca
name nombre identifica a la imagen para poder asignarle alguna propiedad, estilo, etc.
align bottom|middle|top|left|right alinea la imagen con respecto al texto.
width píxeles Indica el ancho de la imagen, modificando su tamaño original
height píxeles Indica el alto de la imagen, moficando el tamaño original
border entero Tamaño del borde de la imagen (si es 0 no tendrá borde)
hspace píxeles Indica el número de espacios en blanco que se deben insertar a la derecha e izquierda de la imagen
vspace píxeles Indica el número de espacios en blanco que se seben insertar por encima y debajo de la imagen
title texto presenta un título para la imagen
ismap   Se utiliza para los mapas de servidor. Es un atributo booleano.
usemap nombre indica cual es el mapa que se va a utlizar

Para saltar a la parte inferior de la imagen podemos escribir <br clear="all">

Ejemplos:

Código Resultado
<img src="img/img_pantalla.jpg" width="131" height="155" align="middle" border="0" vspace="3" hspace="3" alt="Pantalla">
Pantalla
<img src="img/img_pantalla.jpg" width="66" height="78" align="middle" border="1" vspace="3" hspace="3" alt="Pantalla">
PantallaTexto
<img src="img/img_pantalla.jpg" width="66" height="78" align="top" border="2" vspace="3" hspace="3" alt="Pantalla"><br clear="all">Más texto PantallaTexto
Más texto

<img src="img/img_pantalla.jpg" width="66" height="78" align="bottom" border="3" vspace="3" hspace="3" alt="Pantalla">

PantallaTexto

 

Ejercicio:

En el documento index.html insertar una imagen de forma que el texto siguiente que se escriba aparezca bajo la imagen.
Hacer que dicha imagen actúe como un enlace para una web (que al pinchar sobre ella se entre en la web de la UGR por ejemplo)