Documentación de Tecnologías Web: HTML5, CSS3 y JavaScript

Tecnología	Versión Anterior	Versión Actual	Principales Mejoras
HTML	HTML4	HTML5	Elementos semánticos (header, nav, section), soporte nativo para audio/video, APIs avanzadas.
CSS	CSS2	CSS3	Animaciones, transiciones, flexbox, grid, media queries para diseño responsivo.
JavaScript	ES5 (ECMAScript 5)	ES6+ (ECMAScript 2015+)	Arrow functions, promises, async/await, módulos, clases para programación orientada a objetos.

Quiz: Preguntas de Selección Múltiple

Responde estas preguntas basadas en el contenido de la página. Las respuestas correctas están al final de cada pregunta.

Preguntas sobre HTML5, CSS3 y JavaScript

¿Qué es HTML5 y cuál es su principal contribución al desarrollo web según el código?
A) Un lenguaje de programación para interactividad.
B) Una versión del lenguaje de marcado que introduce elementos semánticos y soporte para multimedia.
C) Una evolución de hojas de estilo para animaciones.
D) Un estándar para bases de datos en la web.
Respuesta correcta: B
¿Cómo describe el código la evolución de CSS3 en comparación con versiones anteriores?
A) Como una versión que elimina animaciones.
B) Como la última evolución que permite diseños avanzados con animaciones y efectos visuales.
C) Como un lenguaje de marcado para páginas web.
D) Como un estándar para interactividad en páginas.
Respuesta correcta: B
¿Qué rol juega JavaScript en las páginas web, y qué estándares menciona el código para su evolución?
A) Añade estilos visuales, evolucionando con CSS3.
B) Añade interactividad, evolucionando con estándares como ECMAScript.
C) Crea elementos semánticos, evolucionando con HTML5.
D) Gestiona multimedia, evolucionando con APIs avanzadas.
Respuesta correcta: B
¿Por qué se considera a estas tres tecnologías como "fundamentales" para el desarrollo web, basado en las descripciones del código?
A) Porque cubren marcado, estilos e interactividad.
B) Porque solo se usan para multimedia.
C) Porque son versiones antiguas de la web.
D) Porque no requieren navegadores modernos.
Respuesta correcta: A

Preguntas sobre la Tabla Comparativa

¿Qué versiones anteriores y actuales se comparan en la tabla para HTML, CSS y JavaScript?
A) HTML3 vs HTML6, CSS1 vs CSS4, JS1 vs JS8.
B) HTML4 vs HTML5, CSS2 vs CSS3, ES5 vs ES6+.
C) HTML2 vs HTML4, CSS1 vs CSS2, ES3 vs ES5.
D) HTML5 vs HTML6, CSS3 vs CSS4, ES6 vs ES7.
Respuesta correcta: B
¿Cuáles son las principales mejoras de HTML5 sobre HTML4, según la tabla?
A) Eliminación de elementos semánticos.
B) Elementos semánticos (header, nav, section), soporte nativo para audio/video, APIs avanzadas.
C) Solo soporte para texto plano.
D) Animaciones y transiciones.
Respuesta correcta: B
¿Qué características nuevas introduce CSS3 que no estaban en CSS2, y cómo benefician al diseño responsivo?
A) Elementos semánticos y APIs.
B) Animaciones, transiciones, flexbox, grid, media queries para diseño responsivo.
C) Arrow functions y promises.
D) Soporte nativo para video.
Respuesta correcta: B
¿Qué avances en JavaScript se destacan en la tabla para ES6+ en comparación con ES5?
A) Elementos semánticos.
B) Arrow functions, promises, async/await, módulos, clases para programación orientada a objetos.
C) Animaciones y flexbox.
D) Soporte para audio/video.
Respuesta correcta: B
¿Cómo se relacionan las fechas de lanzamiento (si se añadieron) con la evolución de estas tecnologías?
A) No se mencionan fechas.
B) Las fechas muestran el progreso cronológico, como HTML5 en 2014 y ES6 en 2015.
C) Todas las fechas son del mismo año.
D) Las fechas indican versiones obsoletas.
Respuesta correcta: B

Preguntas sobre Multimedia

¿Qué tipo de imagen se incluye en el código y cuál es su propósito en la documentación de HTML5?
A) Una imagen local de un logo genérico.
B) Una imagen remota del logo oficial de HTML5 para ilustrar el tema.
C) Un video de YouTube.
D) Un enlace a documentación externa.
Respuesta correcta: B
¿Por qué se usa un `` para el video de YouTube, y qué atributos avanzados se aplican (como `target="_blank"` en otros enlaces)? A) Para insertar texto plano, sin atributos avanzados. B) Para incrustar video multimedia, con atributos como `allow` y `title` para seguridad y accesibilidad, y `target="_blank"` en enlaces para abrir en nueva pestaña. C) Para crear tablas. D) Para añadir estilos CSS. Respuesta correcta: B</li> <li>¿Cómo ilustra el video de YouTube el tema de las tres tecnologías, y qué ajustes se mencionan en el sello de aprendizaje para mejorarlo? A) Solo cubre HTML5, sin ajustes mencionados. B) Cubre HTML5 y CSS3 inicialmente, pero se ajustó para incluir JavaScript. C) Cubre solo JavaScript. D) No se relaciona con el tema. Respuesta correcta: B</li> <li>¿Qué atributo `alt` se usa en la imagen, y por qué es importante para la accesibilidad? A) Un atributo vacío, sin importancia. B) Una descripción detallada del logo de HTML5, importante para lectores de pantalla y accesibilidad. C) Un enlace a YouTube. D) Un título para el video. Respuesta correcta: B</li> </ol> <h3>Preguntas sobre Metadatos y Atributos Avanzados</h3> <ol start="14"> <li>¿Qué metadatos se incluyen en el `<head>` del código (como `description`, `author`, `keywords`) y cuál es su función? A) Solo el título de la página. B) Description, author, keywords, para describir el contenido y mejorar SEO. C) Solo enlaces a videos. D) Atributos para tablas. Respuesta correcta: B</li> <li>¿Cómo se usa `target="_blank"` en los enlaces del código, y qué beneficio aporta? A) Para cerrar la página actual. B) Para abrir enlaces en una nueva pestaña, mejorando la navegación sin perder la página actual. C) Para centrar el contenido. D) Para añadir multimedia. Respuesta correcta: B</li> <li>¿Por qué es útil el atributo `lang="es"` en la etiqueta `<html>`? A) Para cambiar el idioma del navegador. B) Para indicar que el contenido está en español, ayudando a motores de búsqueda y lectores de pantalla. C) Para añadir estilos CSS. D) Para incrustar videos. Respuesta correcta: B</li> <li>¿Qué otros atributos avanzados se mencionan en el código para mejorar la experiencia del usuario? A) Solo bordes en tablas. B) `alt` en imágenes, `title` en iframes, `allow` en videos para accesibilidad y seguridad. C) Fechas en el footer. D) Comentarios visibles. Respuesta correcta: B</li> </ol> <h3>Preguntas sobre el Sello de Aprendizaje</h3> <ol start="18"> <li>¿Qué problema inicial se describe en el sello de aprendizaje con el primer video de YouTube? A) Era demasiado largo. B) Era un rickroll no relacionado con HTML5, CSS3 o JavaScript. C) Cubría solo multimedia. D) No tenía atributos. Respuesta correcta: B</li> <li>¿Qué ajustes se hicieron al video para que cubriera las tres tecnologías (HTML5, CSS3 y JavaScript)? A) Se eliminó el video. B) Se cambió a uno que incluye tutoriales sobre las tres. C) Se añadió solo CSS3. D) Se mantuvo el original. Respuesta correcta: B</li> <li>¿Cómo se mejoró la tabla según el sello, y qué cambios se hicieron en fechas o hitos? A) Se eliminaron filas. B) Se añadieron fechas importantes y se ajustaron hitos para las tres tecnologías. C) Se cambió el borde. D) Se añadió multimedia. Respuesta correcta: B</li> <li>¿Por qué es importante incluir un "Sello de Aprendizaje" en el código, y qué lecciones aprendiste al ajustar el código generado por la IA? A) Para hacer el código más largo. B) Para documentar ajustes y aprender de errores, como cambiar videos irrelevantes y añadir fechas. C) Para ocultar contenido. D) Para añadir enlaces. Respuesta correcta: B</li> </ol> </section> <footer> © 2023 Documentación Web. Todos los derechos reservados. </footer>  </body> </html>

Introducción a las Tecnologías Web Básicas

HTML5

CSS3

JavaScript

Comparación de Versiones

Ejemplos Multimedia

Imagen

Video de YouTube

Quiz: Preguntas de Selección Múltiple

Preguntas sobre HTML5, CSS3 y JavaScript

Preguntas sobre la Tabla Comparativa

Preguntas sobre Multimedia