Imágenes en HTML

< Anterior Siguiente >

¿Cómo insertar imágenes en HTML?

En HTML, las imágenes se insertan utilizando la etiqueta <img>. Esta etiqueta es vacía, lo que significa que no tiene una etiqueta de cierre, y requiere al menos dos atributos: src y alt.

Atributos principales de la etiqueta `<img>`

Los atributos más importantes que se deben utilizar con la etiqueta <img> son:

src: Especifica la ruta de la imagen que se desea mostrar.
alt: Proporciona un texto alternativo que se muestra si la imagen no se puede cargar. Este atributo también es importante para la accesibilidad.
title (opcional): Proporciona un texto que se muestra como un tooltip cuando el usuario pasa el cursor sobre la imagen.

Ejemplo básico de una imagen en HTML

Aquí tienes un ejemplo simple de cómo insertar una imagen en una página web:

<img src="imagenes/logo.png" alt="Logo de la empresa" title="Logo de nuestra empresa">

Controlando el tamaño de las imágenes

Puedes controlar el tamaño de una imagen en HTML utilizando los atributos width y height, o con CSS. Aquí hay un ejemplo de cómo hacerlo con atributos HTML:

<img src="imagenes/logo.png" alt="Logo de la empresa" width="200" height="100">

Ejemplo de control de tamaño con CSS

Alternativamente, puedes controlar el tamaño de las imágenes utilizando CSS:

<style>
img {
    width: 200px;
    height: auto; /* Mantiene la proporción de la imagen */
}
</style>

<img src="imagenes/logo.png" alt="Logo de la empresa">

Alineación de imágenes

Puedes alinear una imagen a la izquierda, derecha o centrada utilizando CSS. Aquí tienes un ejemplo de cómo centrar una imagen:

<style>
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
</style>

<img src="imagenes/logo.png" alt="Logo de la empresa">

Imágenes como enlaces

También puedes hacer que una imagen funcione como un enlace envolviéndola en una etiqueta <a>:

<a href="https://www.miempresa.com">
    <img src="imagenes/logo.png" alt="Logo de la empresa">
</a>