🧡 Cómo poner IMÁGENES en HTML [FÁCIL y RÁPIDO!!] [Curso de HTML desde cero]

Summary

En este vídeo, Kiko Palomares enseña cómo insertar imágenes en HTML utilizando la etiqueta <img> y sus atributos como 'src' y 'alt'. Explica la importancia de usar texto alternativo para accesibilidad y la validación HTML. Además, muestra cómo ajustar el tamaño de las imágenes usando atributos de estilo, como 'width' y 'height', y cómo organizar las imágenes dentro de carpetas. Finalmente, enseña cómo enlazar imágenes a páginas web. Es un tutorial práctico para principiantes que quieren mejorar su manejo de imágenes en HTML.

Takeaways

• 😀 La etiqueta <img> es utilizada en HTML para insertar imágenes en una página web.
• 😀 El atributo 'src' se usa para especificar la ruta de la imagen, ya sea una URL o una ruta relativa.
• 😀 Es esencial agregar el atributo 'alt' para proporcionar texto alternativo, útil en caso de que la imagen no cargue o para personas con discapacidades visuales.
• 😀 El texto alternativo también es necesario para cumplir con las validaciones de HTML, ya que su ausencia puede generar errores en los validadores.
• 😀 Puedes ajustar el tamaño de las imágenes utilizando atributos CSS como 'width' y 'height'.
• 😀 El tamaño de una imagen puede modificarse directamente en la etiqueta usando el atributo 'style' o utilizando las propiedades 'width' y 'height'.
• 😀 Si las imágenes están dentro de una carpeta, debes especificar su ruta relativa para cargarlas correctamente en el HTML.
• 😀 Se recomienda organizar las imágenes en carpetas para mantener el proyecto más ordenado.
• 😀 Puedes enlazar una imagen a otra página web usando la etiqueta <a> alrededor de la etiqueta <img>, lo que convierte la imagen en un enlace.
• 😀 Cuando se coloca un enlace en una imagen, el cursor cambia a un puntero cuando pasa sobre la imagen, indicando que es interactiva.

Q & A

¿Cuál es la etiqueta HTML que se utiliza para insertar imágenes?

La etiqueta HTML que se utiliza para insertar imágenes es <img>, y tiene el atributo src para especificar la ruta de la imagen.

¿Por qué es importante el atributo alt en la etiqueta <img>?

El atributo alt es importante porque proporciona un texto alternativo que se muestra si la imagen no se carga, y también es leído por los lectores de pantalla para personas con discapacidad visual.

¿Qué sucede si no se incluye el atributo alt en una imagen?

Si no se incluye el atributo alt, los validadores de HTML considerarán el código como no válido y la accesibilidad del contenido se verá comprometida.

¿Cómo se ajusta el tamaño de una imagen en HTML?

El tamaño de una imagen se puede ajustar utilizando los atributos de estilo CSS, como 'width' para el ancho y 'height' para la altura, o utilizando los atributos propios 'width' y 'height' dentro de la etiqueta <img>.

¿Cómo se puede cambiar el tamaño de una imagen usando CSS dentro de la etiqueta <img>?

Se puede agregar un atributo 'style' dentro de la etiqueta <img> y escribir reglas CSS, como 'width: 200px;' o 'height: 200px;' para cambiar el tamaño de la imagen.

¿Qué es una ruta relativa y cómo se utiliza en HTML para las imágenes?

Una ruta relativa es una ruta que especifica la ubicación de una imagen en relación con el archivo HTML. Se utiliza cuando las imágenes están organizadas en carpetas dentro del proyecto, como 'img/imagen.jpg'.

¿Qué problema puede ocurrir al mover las imágenes a una subcarpeta en un proyecto HTML?

Cuando las imágenes se mueven a una subcarpeta, las rutas relativas en el código deben ser actualizadas, ya que la ruta anterior puede quedar incorrecta si no se ajusta.

¿Cómo se convierte una imagen en un enlace a otra página web?

Para convertir una imagen en un enlace, se debe envolver la etiqueta <img> dentro de una etiqueta <a> con el atributo href que apunta a la URL deseada.

¿Qué sucede cuando pasamos el cursor sobre una imagen que está dentro de un enlace?

Cuando pasamos el cursor sobre una imagen que está dentro de un enlace, el cursor cambia a un puntero, indicando que la imagen es un enlace clicable.

¿Qué se debe hacer si las imágenes no se muestran correctamente después de moverlas a una carpeta?

Se debe corregir la ruta de la imagen en el código HTML utilizando una ruta relativa que apunte correctamente a la ubicación de la imagen dentro de la carpeta.