Saltar la navegación

3.2.5. Imágenes

Las imágenes se definen con la etiqueta <img> . La etiqueta <img> está vacía y no tiene etiqueta de cierre.

El atributo src especifica la URL (dirección web) de la imagen.

El atributo alt proporciona un texto alternativo para una imagen, si por alguna razón el usuario no puede verla (debido a una conexión lenta, un error en el atributo src, ...) se mostrará el valor del atributo alt. Puedes probar a insertar una etiqueta imagen sin src pero con alt. ¿Qué ocurrirá?

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

La altura height y la anchura width se deben especificar mediante CSS y no en la propia etiqueta. Aunque, a modo de ejemplo, nos puede ser ilustrativa.

Figure

La etiqueta <figure> puede usarse para agrupar elementos tales como imágenes, vídeos o incluso texto que forma parte de una ilustración del contenido principal.

La etiqueta <figcaption>, usada de forma conjunta con la etiqueta <figure>, proporciona una leyenda a los elementos así agrupados, por ejemplo para añadir una leyenda a un grupo de imágenes.

Ejemplo de Figure en w3schools

Ejercicio

Crea una tabla con dos filas y tres columnas donde la columna central será una única celda.

Busca 5 imágenes de una misma temática y coloca la más representativa en la celda central con un tamaño de 250px de alto y no más de 500px de ancho.

En las celdas laterales, coloca el resto de imágenes con dimensiones de 100px de alto por 200px de ancho.

Adicionalmente, puedes crear una línea en la parte superior de la tabla para escribir el título de lo que se muestra. Además, intenta centrar las imágenes.

Guarda el ejemplo como ej5.html

Creado con eXeLearning (Ventana nueva)