Hasta ahora has trabajado con texto — títulos, párrafos, listas. Pero imagina un libro sin ilustraciones, una revista sin fotos, una web sin imágenes. Sería funcional, pero le faltaría alma.
Las imágenes transforman una página de texto en una experiencia visual. Y en este episodio, vas a aprender a darle ojos a tu web.
<img>: una etiqueta especialLa etiqueta <img> tiene algo único: no tiene etiqueta de cierre.
Es lo que llamamos una etiqueta de auto-cierre.
¿Por qué? Porque no hay nada que "envolver". Una imagen es una imagen — no tiene contenido de texto dentro como un párrafo o un título.
La barra / antes del > es opcional pero recomendada.
Es como decir: "Esta etiqueta se abre y se cierra en el mismo lugar".
src: la dirección de la imagenEl src (source) le dice al navegador dónde está la imagen.
Puede ser una URL de internet o una ruta a un archivo local:
Prueba el primer ejemplo — te mostrará un gato aleatorio cada vez que recargues. 🐱
alt: la voz de la imagenAquí viene algo que muchos principiantes ignoran, pero que los profesionales nunca olvidan: el texto alternativo.
El alt cumple tres funciones vitales:
alt para entender de qué trata la imagenUna web sin alt en sus imágenes es como un museo donde las obras no tienen carteles.
Funciona, pero excluye a mucha gente.
width y heightPor defecto, las imágenes se muestran a su tamaño original. Pero puedes controlar sus dimensiones:
Los valores están en píxeles. Si solo especificas uno (width o height), el navegador calcula el otro proporcionalmente para no deformar la imagen.
La web moderna no es solo texto e imágenes estáticas.
La etiqueta <video> te permite incrustar vídeos directamente:
Pero espera... ¿dónde están los botones de play y pausa? Por defecto, el vídeo aparece congelado sin controles.
controlsPara que el usuario pueda controlar el vídeo, añade controls:
Ahora aparecen play, pausa, volumen, barra de progreso — todo lo que esperas.
Observa algo interesante: controls no tiene valor (controls="algo").
Es un atributo booleano — su mera presencia significa "verdadero".
Si no está, significa "falso".
autoplay y muted¿Quieres que el vídeo empiece solo? Usa autoplay:
Pero hay un truco: los navegadores obligan a que los vídeos con autoplay
estén silenciados (muted). ¿Por qué? Porque a nadie le gusta abrir una página
y que le asalte un vídeo a todo volumen. Es una decisión de experiencia de usuario.
loopPara que el vídeo se repita infinitamente:
Perfecto para fondos animados o efectos visuales sutiles.
¿Alguna vez has ampliado una foto y se ha vuelto borrosa? Eso pasa porque las fotos son mapas de bits — cuadrículas de píxeles.
Los SVG (Scalable Vector Graphics) son diferentes. En lugar de píxeles, usan fórmulas matemáticas para dibujar formas. El resultado: puedes ampliarlos al infinito sin perder calidad.
Puedes cargar un SVG como cualquier imagen:
O puedes escribir el código SVG directamente en tu HTML:
Esto dibuja un círculo rojo. Parece complejo, pero tranquilo — normalmente copiarás SVGs de herramientas de diseño o bibliotecas de iconos, no los escribirás a mano.
Los SVG son perfectos para:
Crea una página que incluya:
src, alt, y un width personalizadoUna imagen vale más que mil palabras. Pero sin alt, no vale nada para quienes no pueden verla...