Cómo poner IMÁGENES en HTML [FÁCIL y RÁPIDO!!]

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.

See the Pen HTML | 1.11 - Imágenes - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

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.

See the Pen HTML | 1.11 - Imágenes - 2 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Tamaño - width y height

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

See the Pen HTML | 1.11 - Imágenes - 3 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

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

See the Pen HTML | 1.11 - Imágenes - 4 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

¿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í.

See the Pen HTML | 1.11 - Imágenes - 5 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

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.

See the Pen HTML | 1.11 - Imágenes - 6 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

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).

See the Pen HTML | 1.10 - Enlaces - 3 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Imagen flotante

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

See the Pen HTML | 1.11 - Imágenes - 7 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

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.

¿Quieres más?

Si estás interesado en el mundo de la programación y el desarrollo web, te recomiendo que te suscribas a mi canal de youtube donde tienes mucho más contenido gratuito

IR AL CANAL

¿Quieres convertirte en desarrollador web? [GRATIS]

Déjame aquí tu mejor email y te mandaré un curso para que puedas empezar en el desarrollo web totalmente GRATIS!

¡Prometo no enviarte SPAM! Sólo cosas relevantes que te interesen.