Tienda » BLOG » Imágenes con HTML5
Imágenes con HTML5

Imágenes con HTML5

Imágenes con HTML5
Imágenes con HTML5

Añadiendo imágenes a tu web

ÍNDICE

Imagen

Para añadir una imagen en nuestra página web deberemos expresarlo de la siguiente manera:

<img src="mariobros.jpg" alt="Disculpen las molestias, imagen no encontrada">

Como vemos el atributo «src» es el indicado para la etiqueta «img» que corresponde a la imagen. Dicha etiqueta no contiene cláusula de cierre.

El atributo «alt» se corresponde con el valor que queramos definir en caso de que la imagen no cargue.

En este caso, y para que cargara la imagen de Mario Bros, tendríamos que tenerla alojada en la misma carpeta que la página que contenga el enlace, por lo que si dicha página y la imagen están en distintas carpetas, se tendría que definir la ruta para que el navegador la encuentre.

Rutas relativas

Al margen de donde guardemos nuestras imágenes, todo nuestro proyecto web debe estar en una misma carpeta. Si por ejemplo tuviésemos una carpeta con el nombre de «Imágenes» dentro de nuestra carpeta del proyecto web, la ruta relativa sería la siguiente:

<img src="imagenes/mariobros.jpg" alt="Disculpen las molestias, imagen no encontrada">

Aquí es donde se establecen ciertas advertencias sobre las mayúsculas y tildes, pues aunque nuestra carpeta llamada «Imágenes» contenga una mayúscula y una tilde, no se deberán poner a la hora de escribir nuestro código HTML.

Sin embargo si la imagen estuviese en una carpeta padre, el código sería el siguiente:

<img src="../mariobros.jpg" alt="Disculpen las molestias, imagen no encontrada">

Si la imagen estuviera en cambio en dos carpetas por encima de nuestra página, el código sería:

<img src="../../mariobros.jpg" alt="Disculpen las molestias, imagen no encontrada">

Es decir, por cada carpeta tendremos que poner dos puntos y una barra del siguiente modo»../».

Tamaño de las imágenes

Para editar el tamaño de las imágenes, deberemos añadir los atributos «width» para ancho, y «heigth» para alto. Un ejemplo sería el siguiente:

<img src="logo.jpg" alt="Disculpen las molestias, logo no encontrado" width="100px">

La unidad de medida para las imágenes es en píxeles, siendo en este caso «100px» para el ancho. Como no se ha hecho uso del atributo «heigth» para delimitar el alto de la imagen, será el navegador quien le de la medida proporcional correcta.

Enlaces haciendo uso de imágenes

En el ejemplo siguiente se podrá, pinchando en una imagen, que nos dirija a una página. Sería así:

<a href="mariobros.html"><img src="/imagenes/nintendo.jpg" alt="Disculpen las molestias, imagen no encontrada"></a>

El atributo «src» nos indica que imagen tendremos que pinchar, siendo en este caso la de Nintendo, para dirigirnos a la página «mariobros.html» descrita en el atributo «href».

Vídeo

(*) NOTA: En breve publicaremos un vídeo. En futuros post aprenderemos a generar código con IA.

COMPARTE:

2 comentarios en “Imágenes con HTML5”

  1. Pingback: Enlaces con HTML5

  2. Pingback: Listas y tablas con HTML5

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Carrito de compra
Scroll al inicio