Imágenes ⭐ Etiqueta img

Summary

Este video explica cómo trabajar con imágenes en HTML utilizando la etiqueta `<img>`, abordando tanto las rutas relativas como absolutas. Se destaca la importancia del atributo `src` para definir la ubicación de las imágenes y cómo se pueden utilizar los atributos `alt` y `title` para mejorar la accesibilidad y proporcionar información adicional. Además, se explica cómo redimensionar imágenes mediante CSS y cómo identificar imágenes en otros sitios web. El video es una guía útil para principiantes que desean comprender el uso básico de imágenes en páginas web.

Takeaways

• 😀 La etiqueta `img` es utilizada en HTML para mostrar imágenes en una página web y no tiene una etiqueta de cierre, solo atributos.
• 😀 El atributo más importante de la etiqueta `img` es `src`, que especifica la ruta de la imagen que se quiere mostrar.
• 😀 Las rutas de imagen pueden ser relativas (cuando la imagen está en la misma carpeta que el archivo HTML) o absolutas (cuando la imagen está en un servidor externo).
• 😀 Una ruta relativa se utiliza cuando la imagen está en el mismo directorio o en un subdirectorio del archivo HTML.
• 😀 Una ruta absoluta se usa cuando la imagen se encuentra en la web, por ejemplo, un enlace URL de un sitio como Pixabay.
• 😀 El atributo `alt` (texto alternativo) es crucial para la accesibilidad y se muestra cuando una imagen no se carga correctamente.
• 😀 El atributo `title` proporciona un texto que aparece cuando el usuario pasa el mouse sobre la imagen.
• 😀 Los atributos `width` y `height` permiten definir el tamaño de la imagen, pero se recomienda utilizar CSS para un control más flexible y adaptado a diferentes pantallas.
• 😀 Para identificar imágenes en páginas web, se puede hacer clic derecho sobre ellas y seleccionar 'Abrir imagen en una nueva pestaña' para comprobar si usan la etiqueta `img`.
• 😀 El tutorial muestra cómo se pueden verificar las rutas absolutas y relativas de las imágenes inspeccionando el código fuente de una página web.
• 😀 Es importante mantener las imágenes organizadas en subcarpetas dentro del proyecto HTML para una mejor gestión y estructura del código.

Q & A

¿Qué es el atributo `src` en la etiqueta `<img>`?

El atributo `src` en la etiqueta `<img>` especifica la fuente o la ruta del archivo de la imagen que se va a mostrar en la página web. Puede ser una ruta relativa o absoluta.

¿Qué significa una ruta de imagen relativa?

Una ruta relativa significa que la imagen está en la misma carpeta o directorio que el archivo HTML. Solo se utiliza el nombre del archivo o la ruta hacia una subcarpeta.

¿Qué es una ruta absoluta en imágenes?

Una ruta absoluta se refiere a una imagen que está alojada en un servidor externo y se utiliza su URL completa para mostrarla en la página web.

¿Cómo organizar las imágenes dentro de un proyecto web?

Es recomendable organizar las imágenes dentro de una carpeta específica, como una carpeta llamada `images` o `img`, para mantener el proyecto más organizado y fácil de gestionar.

¿Cuál es la función del atributo `alt` en una imagen?

El atributo `alt` proporciona un texto alternativo que se muestra cuando la imagen no se carga, ya sea por problemas de conexión o si el archivo de la imagen no existe. Además, es importante para la accesibilidad web.

¿Qué ocurre si una imagen no tiene un texto alternativo definido en el atributo `alt`?

Si no se define el atributo `alt`, el espacio donde debería ir la imagen aparecerá vacío, lo cual no es recomendable por razones de accesibilidad y experiencia de usuario.

¿Qué propósito tiene el atributo `title` en una imagen?

El atributo `title` proporciona un texto adicional que se muestra cuando el usuario pasa el cursor sobre la imagen. Es útil para ofrecer descripciones adicionales sobre la imagen.

¿Se recomienda usar los atributos `width` y `height` directamente en el HTML para controlar el tamaño de las imágenes?

No se recomienda, ya que es mejor controlar el tamaño de las imágenes utilizando CSS. Aunque los atributos `width` y `height` se pueden usar, CSS ofrece mayor flexibilidad y control sobre el diseño.

¿Cómo se puede identificar si una imagen en un sitio web ha sido colocada con la etiqueta `<img>`?

Puedes hacer clic derecho sobre la imagen y seleccionar 'Abrir imagen en una nueva pestaña'. Si se abre una nueva pestaña mostrando solo la imagen, significa que se ha colocado con la etiqueta `<img>`. También puedes inspeccionar el código fuente y buscar el atributo `src` dentro de la etiqueta `<img>`.

¿Qué diferencia hay entre una ruta absoluta y una ruta relativa cuando se utiliza en imágenes?

La diferencia principal es que una ruta absoluta incluye la URL completa que apunta a la ubicación externa de la imagen, mientras que una ruta relativa solo hace referencia a la ubicación de la imagen dentro de la misma estructura de carpetas del proyecto.