✅ Cómo poner IMÁGENES en HTML

Imágenes- Sintaxis

• Las imágenes se definen usando la etiqueta <img>.
• Esta es una etiqueta vacía, sólo contiene atributos y no tiene una etiqueta de cierre.
• El atributo src especifica la URL de la imagen.

El atributo alt

El atributo alt proporciona un texto alternativo para una imagen, si el usuario por alguna razón no puede verla (debido a una conexión lenta, un error en el atributo src o si el usuario usa un lector de pantalla).

El atributo alt es obligatorio ponerlo, si no, la estructura del HTML será incorrecta.

Tamaño - width y height

Se puede usar el atributo style y especificar ahí el ancho (width) y el alto (height)

O se pueden usar los atributos width y height (siempre en píxeles)

¿width y height o style?

Todos son atributos válidos, pero te recomiendo que si tienes que usar uno que sea style. Porque si hay una hoja de estilos CSS que modifique también el tamaño los atributos width y height no afectarán, en cambio el style sí.

Las imágenes en otra carpeta

Si no se especifica, el navegador espera encontrar la imagen en la misma carpeta que la página web.

Sin embargo, es común guardar las imágenes en una subcarpeta.

<img src="/img/kiko.png" alt="Kiko">

Las imágenes en otro servidor

Algunas web almacenan sus imágenes en servidores de imágenes.

<img src="https://kikopalomares.com/img/kiko.png" alt="Kiko">

Imágenes animadas GIF

HTML también permite la visualización de imágenes animadas en el formato GIF.

Imágenes como enlaces

Para usar una imagen como si fuese un enlace tan sólo hay que poner la imagen dentro de la etiqueta de enlace <a>

border: 0; se agrega para evitar que IE9 (y anteriores) muestre un borde alrededor de la imagen (cuando la imagen es un enlace).

Imagen flotante

Usando la propiedad de CSS float se pueden poner imágenes a la izquierda o derecha de un texto.

Resumen

• <img> para definir una imagen
• El atributo src para definir la URL de la imagen
• El atributo alt HTML para definir un texto alternativo
• Los atributos width y height para definir el tamaño de la imagen
• Propiedades de width y height de CSS para definir el tamaño de la imagen
• Propiedad float de CSS para dejar que la imagen “flote” a un lado u otro.