¿Alguna vez has querido hacer que tu sitio web destaque con imágenes increíbles, pero no estás seguro de cómo hacerlo? ¡No te preocupes! Aquí te enseñaremos cómo importar imágenes en HTML para agregarlas a tu página web. Y no solo eso, también te ayudaremos a entender cómo el texto alternativo puede hacer que tus imágenes sean más amigables con los lectores de pantalla, lo que mejorará la accesibilidad de tu sitio. Sigue leyendo y descubre cómo puedes darle vida a tu página web con imágenes.
El elemento img
Comencemos con los primeros pasos. Para importar imágenes en HTML, utilizamos el elemento img. Este elemento es muy especial en HTML, porque no necesita un cierre como otros elementos. Aquí hay un ejemplo de cómo se ve:
<img src="ruta-a-tu-imagen" alt="texto alternativo">
El elemento img tiene dos atributos principales que siempre debes recordar: src y alt.
Atributo src
El atributo src en HTML es muy útil y se utiliza principalmente en elementos como <img>, <script>, <iframe> y <audio>. Ahí radica su importancia a la hora de importar imágenes en HTML.
¿Pero qué significa src? Es la abreviatura de source, que en español significa «fuente». Entonces, ¿qué información le proporciona este atributo a estos elementos? En términos sencillos, le dice a tu navegador de internet dónde puede encontrar el recurso que deseas incluir en tu página web.
Este atributo define la ruta al archivo de imagen que deseas mostrar. Esta puede ser una ruta a una imagen almacenada en el mismo servidor que tu página web (ruta relativa) o una URL completa que apunte a una imagen en otro sitio web (ruta absoluta).
Por ejemplo, si estás utilizando el elemento <img> para poner una imagen en tu página web, el atributo src indicará la ubicación de esa imagen. Puede ser una ruta a un archivo en tu propio sitio web o un enlace a un archivo en otro sitio web.
Atributo alt
El atributo alt es otro componente importante en HTML que se usa a menudo con el elemento <img>. Este atributo también es muy útil para las imágenes en HTML, ya que se utiliza para proporcionar una descripción textual de una imagen, brinda accesibilidad y es un gran aliado cuando hay problemas de conexión.
El atributo alt (abreviatura de alternate o alternativo) se utiliza para proporcionar un texto alternativo para la imagen, que se mostrará si la imagen no puede cargarse por algún motivo, o será leído por lectores de pantalla utilizados por personas con discapacidades visuales. Este es un aspecto muy importante para la accesibilidad de tu sitio web.
Importar tu primera imagen
Ahora que ya sabes qué es el elemento img y cómo funciona, es hora de realizar el segundo paso para importar imágenes en HTML. Aquí te mostraremos cómo hacerlo desde una URL externa:
<img src="https://tusitio.com/tu-imagen.jpg" alt="Una increíble imagen de ejemplo">
Así es como se ve cuando importas una imagen desde un archivo de imagen en tu propia página web:
<img src="/imagenes/mi-imagen.jpg" alt="Otra increíble imagen de ejemplo">
Jugar con imágenes de fondo en CSS
Ahora llega el uso de CSS. ¿Qué tal si deseas establecer una imagen como fondo de tu página web o de algún elemento en particular? Aquí es donde entran en juego las imágenes de fondo en CSS. Con el atributo background-image en CSS puedes establecer cualquier imagen como el fondo de un elemento.
Aquí tienes un ejemplo:
body {
background-image: url('https://tusitio.com/tu-imagen-de-fondo.jpg');
}
En este caso, estamos estableciendo una imagen como el fondo de todo el cuerpo (body) de nuestra página web.
Aprende más con nosotros
Importar imágenes en HTML es un primer paso fundamental para hacer que tu sitio web sea atractivo y accesible. ¡Pero este es solo el comienzo! Aprender a trabajar con imágenes es solo una pequeña parte de lo que puedes lograr con HTML y CSS.
Si realmente quieres cambiar tu vida y sumergirte de lleno en el fascinante mundo del desarrollo web, no te pierdas nuestro Desarrollo Web Full Stack Bootcamp. No solo aprenderás más sobre HTML, CSS y cómo trabajar con imágenes, sino que también te sumergirás en JavaScript, frameworks modernos, backend, frontend y mucho más. ¡Este bootcamp es el comienzo perfecto para entrar en el sector IT y darle un cambio radical a tu carrera!
