✅ Cómo poner IMÁGENES en HTML

Logo de Cuarzo.dev
Cuarzo.dev

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

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.

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats