¡Felicidades por llegar a la última lección del Módulo 1! Una página web cobra vida con elementos visuales. En esta guía, repasaremos cómo enriquecer tu sitio añadiendo imágenes y videos.
Las imágenes son fundamentales para captar la atención del usuario y transmitir información de manera visual. La etiqueta principal para esto es <img>.
Características Clave de la Etiqueta <img>:
Es una etiqueta vacía o autocerrada. Esto significa que no necesita una etiqueta de cierre como </img>.
Funciona a través de atributos que definen la fuente de la imagen y otras propiedades.
Atributos Esenciales:
src (Source – Fuente): Este atributo es obligatorio y le indica al navegador la ruta o URL donde se encuentra el archivo de la imagen que quieres mostrar.
Ejemplo:
HTML
<img src=”logo.png”>
alt (Alternative Text – Texto Alternativo): Este atributo es crucial y nunca debe omitirse. Proporciona una descripción textual de la imagen.
¿Por qué es tan importante?
Accesibilidad: Los lectores de pantalla lo leen en voz alta para usuarios con discapacidad visual, permitiéndoles entender el contenido de la imagen.
SEO (Optimización para Motores de Búsqueda): Ayuda a los motores de búsqueda como Google a comprender de qué trata tu imagen y tu contenido, mejorando tu posicionamiento.
Contenido de respaldo: Si la imagen no se puede cargar por alguna razón, este texto se mostrará en su lugar.
Ejemplo:
HTML
<img src=”logo.png” alt=”El logo de nuestra academia de desarrollo web”>
Atributos Opcionales para Controlar el Tamaño:
Puedes controlar las dimensiones de la imagen directamente en HTML usando los atributos width (ancho) y height (alto). Los valores se especifican en píxeles.
width: Define el ancho de la imagen.
height: Define el alto de la imagen.
Ejemplo:
HTML
<img src=”logo.png” alt=”El logo de nuestra academia” width=”300″ height=”150″>
Consejo de Profesional: Si solo especificas uno de los dos atributos (width o height), el navegador calculará automáticamente el otro para mantener la proporción original de la imagen, evitando que se vea distorsionada.
Aunque existen etiquetas HTML como <video> para alojar tus propios archivos de video, el método más común, sencillo y eficiente es incrustar (o “embedder”) un video desde una plataforma externa como YouTube o Vimeo.
Pasos para Incrustar un Video:
Ve al video que deseas mostrar en la plataforma (por ejemplo, YouTube).
Busca y haz clic en el botón “Compartir” (Share).
Selecciona la opción “Insertar” o “Embed”.
La plataforma te proporcionará un bloque de código HTML. Este código generalmente utiliza una etiqueta <iframe>.
Copia ese código completo.
Pega el código directamente en el lugar de tu archivo HTML donde quieres que aparezca el video.
¿Qué es un <iframe>?
Un <iframe> (Inline Frame) es un elemento HTML que permite incrustar otro documento HTML dentro del documento actual. En este caso, se usa para cargar el reproductor de video de YouTube directamente en tu página.
Ejemplo de código de YouTube:
HTML
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/VIDEO_ID” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
Simplemente pegando este código, tendrás un reproductor de video completamente funcional en tu sitio.
¡Lo has logrado! Con el conocimiento de esta lección, ahora puedes:
Insertar imágenes en tus páginas web usando la etiqueta <img>.
Entender y utilizar los atributos src y alt para una correcta visualización y accesibilidad.
Controlar el tamaño de las imágenes con width y height.
Incrustar videos de plataformas externas de manera fácil y rápida usando <iframe>.
Has completado el Módulo 1. Ahora tienes una base sólida de HTML y posees las herramientas necesarias para construir la estructura y el contenido fundamental de cualquier página web. ¡Excelente trabajo!
