Añadir Imagen HTML

Como añadir imágen a tu web

ÍNDICE

• Añadir Imagen HTML
• Añadir Imagen HTML: Rutas relativas
• Tamaño de las imágenes
• Añadir Imagen HTML: Enlaces haciendo uso de imágenes

Añadir Imagen HTML

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.

Añadir Imagen HTML: 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.

Añadir Imagen HTML: 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«.