¿Ya dominas lo básico? Un curso estructurado de HTML & CSS es la vía rápida para dar el salto.
Ver cursos de HTML & CSS en UdemyEnlace de afiliado. No te cuesta nada extra.
- 01Preparar el entorno (lo que necesitas)
- 02Tu primer HTML
- 03Listas y enlaces
- 04Poner color con CSS
- 05Selectores CSS y clases
- 06Maquetar con Flexbox
- 07Probar imágenes y tablas
- 08Probar los controles de formulario
- 09Entender el modelo de cajas
- 10Introducción al diseño adaptable (media queries)
- 11Variables CSS (propiedades personalizadas)
- 12Maquetar con CSS Grid
- 13Añadir una animación
- 14Escribir comentarios
- 15Añadir interacción con pseudoclases (:hover)
- 16:not() y selectores con varias condiciones en CSS
- 17Fundamentos de las metaetiquetas y el SEO
- 18Fundamentos de accesibilidad (alt y aria-label)
- 19Probar los atributos data (data-*)
- 20Transiciones CSS (cambios suaves al pasar el ratón)
- 21iframe (incrustar otra página)
- 22position (colocar un elemento con precisión)
- 23z-index (indicar el orden de apilamiento)
- 24Fundamentos de localStorage (guardar datos en el navegador)
- 25Las etiquetas video y audio (incrustar medios)
- 26Tablas avanzadas (colspan y rowspan)
- 27Fundamentos de la especificidad en CSS
- 28Fundamentos de SVG (dibujar imágenes vectoriales)
- 29Flexbox avanzado (envolver y crecer)
- 30Validación de formularios (required y pattern)
- 31CSS Grid avanzado (grid-template-areas)
- 32Las etiquetas details y summary (crear un panel plegable)
- 33Contadores CSS (numeración automática)
- 34Tamaños de letra fluidos con clamp()
- 35prefers-color-scheme (compatibilidad con el modo oscuro)
- 36Construir un deslizador con input type=range
- 37Fijar una proporción con aspect-ratio
- 38Ajustar cómo se muestra una imagen con object-fit
- 39Girar y escalar con transform
- 40Servir imágenes adaptables con la etiqueta picture
- 41Mostrar el foco del teclado con :focus-visible
- 42Desplazamiento suave con scroll-behavior
- 43Cambiar la disposición por componente con container queries
- 44Crear un efecto de cristal esmerilado con backdrop-filter
- 45Construir una rejilla flexible con repeat() y minmax()
- 46Fijar una cabecera en su sitio con position: sticky
- 47Añadir pseudoelementos con ::before y ::after
- 48Recortar textos largos con puntos suspensivos usando text-overflow
- 49Usar un valor calculado en CSS con calc()
- 50[Aplicado] Construye un sitio web sencillo
Las etiquetas video y audio (incrustar medios)
En esta lección reproducirás vídeo y sonido directamente con HTML, sin necesidad de complementos externos.
<video> y <audio> muestran los controles del reproductor si les añades el atributo controls. Dentro se ponen una o varias etiquetas <source> con distintos formatos: el navegador escoge el primero que sepa reproducir. El texto que dejes suelto dentro se muestra solo en navegadores que no admitan la etiqueta.
El código de ejemplo enseña la forma de escribir ambas etiquetas. Los archivos no existen, así que no sonará nada; lo que interesa aquí es la estructura.
Conviene saber que los navegadores bloquean la reproducción automática con sonido: autoplay solo funciona junto con muted. Es una medida deliberada contra las páginas que arrancan a sonar solas.
En producción, los vídeos largos rara vez se sirven así: se delegan en plataformas como YouTube o Vimeo, que se encargan de la conversión de formatos y del ancho de banda. La etiqueta <video> se reserva para clips cortos propios.
💡 La vista previa se genera por completo en esta página; no se envía nada al exterior.