Atributos de HTML
Comprenda cómo añadir detalles adicionales a sus elementos mediante atributos
Atributos de HTML es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML for Kids, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML for Kids incluye 4 lecciones en total.
Contenido multimedia: agregar videos y audio
¡Bienvenido a la siguiente lección! Hoy aprenderá a agregar videos y audio a sus páginas web. ¡El contenido multimedia hace que sus páginas sean más interactivas y entretenidas!
¿Por qué agregar contenido multimedia?
Los videos y el audio pueden hacer que sus páginas web sean:
- Más atractivas
- Informativas y entretenidas
- Interactivas
¡Aprendamos a agregarlos usando HTML!
Agregar un video
Los videos se agregan mediante la etiqueta <video>. Puede especificar el archivo de video mediante el atributo src.
Ejemplo:
En este ejemplo:
src: Especifica el archivo de video.controls: Agrega controles de reproducción, pausa y volumen.width: Establece el ancho del video.
<video src="example.mp4" controls width="400"></video>
Agregar varios formatos de video
No todos los navegadores admiten los mismos formatos de video. Puede incluir varias fuentes mediante la etiqueta <source>.
Ejemplo:
<video controls width="400">
<source src="example.mp4" type="video/mp4">
<source src="example.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Agregar audio
El audio se agrega mediante la etiqueta <audio>. Puede especificar el archivo de audio mediante el atributo src.
En este ejemplo:
src: Especifica el archivo de audio.controls: Agrega controles de reproducción, pausa y volumen.
<audio src="example.mp3" controls></audio>
Agregar varios formatos de audio
Al igual que con los videos, puede incluir varias fuentes de audio para mejorar la compatibilidad con los navegadores.
Ejemplo:
<audio controls>
<source src="example.mp3" type="audio/mpeg">
<source src="example.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
Reproducción automática y bucle
Puede hacer que los videos y el audio se reproduzcan automáticamente o en bucle agregando los atributos autoplay y loop.
Ejemplo:
Nota: Algunos navegadores pueden desactivar la reproducción automática por motivos relacionados con la experiencia del usuario.
<audio src="example.mp3" autoplay loop></audio>
Insertar videos de YouTube
Puede insertar videos de YouTube en su página mediante la etiqueta <iframe>.
Ejemplo:
Reemplace example por el ID único del video.
<iframe width="560" height="315" src="https://www.youtube.com/embed/example" frameborder="0" allowfullscreen></iframe>
¡Excelente trabajo!
¡Felicidades! Ha aprendido a agregar videos, audio e incluso contenido insertado de YouTube a sus páginas web. El contenido multimedia hace que sus contenidos sean más dinámicos y atractivos. En la próxima lección, profundizará en el uso de CSS para hacer que sus páginas web se vean increíbles. ¡Prepárese para explorar el mundo del diseño!
Preguntas frecuentes
¿La lección «Atributos de HTML» es gratis?
Sí — el texto completo de «Atributos de HTML» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML for Kids, actualiza a CoddyKit PRO. El curso de HTML for Kids incluye 4 lecciones en total.
¿Qué aprenderé en «Atributos de HTML»?
Comprenda cómo añadir detalles adicionales a sus elementos mediante atributos Practicas HTML for Kids con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML for Kids?
No se requiere experiencia previa. HTML for Kids en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Atributos de HTML»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML for Kids?
Sí. Cada lección de HTML for Kids incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Tablas: organización de datos
- Formularios: recopilación de datos del usuario
- Atributos de HTML
- Multimedia: añada vídeos y audio