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">

Más tutoriales de HTML y CSS

Si te ha gustado no olvides compartir en redes sociales.

[addthis tool=»addthis_inline_share_toolbox_6jt6″]

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