Multimedia: añada vídeos y audio
Inserte vídeos y archivos de audio en su página web
Multimedia: añada vídeos y audio es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 4 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.
Estilos en línea: aplicar estilos sencillos al HTML
¡Bienvenido al mundo de los estilos! Hoy aprenderá a usar estilos en línea para cambiar la apariencia de los elementos de su página web. Los estilos en línea son una forma sencilla y rápida de mejorar el aspecto de su página.
¿Qué son los estilos en línea?
Los estilos en línea permiten aplicar CSS (hojas de estilo en cascada) directamente a un elemento HTML mediante el atributo style.
Ejemplo:
<h1 style="color: red;">Hello, World!</h1>
Esto mostrará un encabezado rojo. ¡Exploremos cómo funciona!
Cambiar el color del texto
Puede cambiar el color del texto mediante la propiedad color en el atributo style.
Ejemplo:
<p style="color: blue;">This is blue text.</p>
Cambiar el tamaño de la fuente
Para cambiar el tamaño del texto, use la propiedad font-size.
Ejemplo:
<p style="font-size: 20px;">This text is 20 pixels large.</p>Agregar un color de fondo
Puede agregar un color de fondo a un elemento mediante la propiedad background-color.
Ejemplo:
<p style="background-color: yellow;">This text has a yellow background.</p>Combinar varios estilos
Puede combinar varios estilos separándolos con un punto y coma ;.
Ejemplo:
<p style="color: white; background-color: black; font-size: 18px;">
This text has multiple styles applied!
</p>Aplicar estilos a otros elementos
Los estilos en línea funcionan en todos los elementos HTML, como encabezados, párrafos y botones.
Ejemplo:
<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: lightblue; border: none; padding: 10px;">
Styled Button
</button>Pruébelo usted mismo
Vamos a crear una página web con estilos en línea. Este es un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<h1 style="color: purple;">Welcome to My Styled Page</h1>
<p style="color: gray; font-size: 16px;">
This paragraph has styled text.
</p>
<button style="background-color: coral; color: white; padding: 10px;">
Click Me!
</button>
</body>
</html>
¡Excelente trabajo!
¡Enhorabuena! Ha aprendido a utilizar estilos en línea para añadir estilos sencillos y eficaces a sus páginas web. Los estilos en línea son una excelente forma de hacer cambios rápidos, pero ¡hay mucho más que aprender sobre los estilos! En la próxima lección, exploraremos los conceptos básicos de CSS para aprovechar todo el potencial del diseño web. ¡Prepárese para crear páginas web impresionantes!
Preguntas frecuentes
¿La lección «Multimedia: añada vídeos y audio» es gratis?
Sí — el texto completo de «Multimedia: añada vídeos y audio» 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 «Multimedia: añada vídeos y audio»?
Inserte vídeos y archivos de audio en su página web 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 4 de 4.
¿Cuánto tiempo toma la lección «Multimedia: añada vídeos y audio»?
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