Incluir imágenes en Html

Incluir imágenes en Html

Incluir imágenes en Html

En este tutorial aprenderemos cómo incluir imágenes en html con la etiqueta <img>. El elemento “img” es un elemento vacío, es decir, que no tiene contenido textual ni etiqueta de cierre. Para poder insertar una imagen, requiere por lo menos el atributo “src” (ruta de la imagen), aunque podemos pasarle más atributos, como veremos.

Insertar una imagen que se encuentra en el mismo directorio

<img src="imagen.jpg">

Insertar una imagen que está en la carpeta imágenes

<img src="imagenes/imagen.jpg">

Atributo “alt” (texto alternativo)

El atributo “alt” sirve para cuando por el motivo que sea no se puede mostrar la imagen en un sitio web, se muestre el texto alternativo en su lugar.

<img src="imagenes/imagen.jpg" alt="barco">

Atributos “width” y “height” (ancho y alto)

Puedes incluir estos atributos para especificar el alto y ancho de la imagen

<img src="imagenes/imagen.jpg" alt="barco" width="500" height="300">

Además de especificar el tamaño, al incluir los atributos “width” y “height” , si ocurre un error y la imagen no se muestra, el navegador reserva el espacio real que ocupa la imagen en la página.

Por último tenemos el atributo “title” (título)

El atributo “title” proporciona más información sobre la imagen.

<img src="imagenes/imagen.jpg" alt="barco" width="500" height="300" title="Imágen de un barco pescando">

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo

Dejar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas