I85PREP
⌘ K
INFOTEP Técnico en Programación de Páginas Web study materials
INFOTEP Técnico en Programación de Páginas Web study resources

INFOTEP Técnico en Programación de Páginas Web practice questions

One question at a time. Build your INFOTEP Técnico en Programación de Páginas Web understanding.

First 50 of 200 questions. Each one lists the choices, the correct answer, and an explanation. The checker at the top of this page saves progress in this browser when it is available.

Continue in the practice tool above to load more questions, 50 at a time.

Question 1Fundamentos de la web y arquitectura cliente-servidor

En el modelo cliente-servidor de la web, ¿qué función cumple el navegador del usuario?

  1. Actúa como servidor que almacena las bases de datos del sitio.
  2. Funciona como proxy inverso que reparte la carga entre varios servidores.
  3. Actúa como cliente que envía solicitudes HTTP y presenta la respuesta recibida. Correct answer.
  4. Ejecuta únicamente el sistema operativo del servidor web.

Explanation

El navegador es el cliente: inicia la comunicación enviando una petición HTTP al servidor y se encarga de interpretar y mostrar el recurso devuelto. El servidor es quien aloja los archivos y procesa la lógica del lado del servidor.

Question 2Fundamentos de la web y arquitectura cliente-servidor

¿Cuál es el propósito principal del protocolo HTTP en la arquitectura web?

  1. Asignar direcciones IP dinámicas a los dispositivos de la red.
  2. Traducir nombres de dominio a direcciones IP numéricas.
  3. Cifrar obligatoriamente todo el tráfico entre cliente y servidor.
  4. Definir el formato de las solicitudes y respuestas entre cliente y servidor. Correct answer.

Explanation

HTTP es un protocolo de aplicación que establece la estructura de las peticiones (método, ruta, cabeceras) y de las respuestas (código de estado, cabeceras, cuerpo). No cifra por sí mismo ni resuelve nombres.

Question 3Fundamentos de la web y arquitectura cliente-servidor

Un usuario escribe https://tienda.ejemplo.com en su navegador. ¿Qué sistema se consulta primero para obtener la dirección IP de ese dominio?

  1. El firewall del equipo del usuario.
  2. El proxy inverso del proveedor de hosting.
  3. El servidor web de la tienda.
  4. El sistema DNS. Correct answer.

Explanation

Antes de establecer la conexión TCP, el navegador necesita la IP del dominio y para ello consulta al sistema de nombres de dominio (DNS). Solo después contacta con el servidor correspondiente.

Question 4Fundamentos de la web y arquitectura cliente-servidor

¿Qué indica el código de estado HTTP 404 devuelto por un servidor?

  1. Que el recurso solicitado no se encontró en el servidor. Correct answer.
  2. Que el cliente no está autenticado para acceder al recurso.
  3. Que el servidor sufrió un error interno al procesar la solicitud.
  4. Que la solicitud fue redirigida de forma permanente a otra URL.

Explanation

Los códigos de la familia 4xx indican errores atribuibles al cliente, y el 404 señala concretamente que el recurso pedido no existe en la ruta indicada. Los errores del servidor se representan con la familia 5xx.

Question 5Fundamentos de la web y arquitectura cliente-servidor

En una URL como https://ejemplo.com/cursos/html/index.html, ¿qué parte corresponde a la ruta del recurso?

  1. /cursos/html/index.html Correct answer.
  2. ejemplo.com
  3. https
  4. index.html?tema=1

Explanation

La ruta identifica la ubicación del recurso dentro del servidor y comienza tras el nombre de host. En este caso abarca los directorios y el archivo final solicitado.

Question 6Fundamentos de la web y arquitectura cliente-servidor

Un formulario HTML usa method="GET" para enviar una búsqueda. ¿Qué consecuencia directa tiene esta elección?

  1. Los datos se cifran automáticamente antes de salir del navegador.
  2. Los datos se almacenan en una cookie de sesión del servidor.
  3. Los datos se incluyen en la cadena de consulta de la URL y quedan visibles. Correct answer.
  4. Los datos se envían en el cuerpo de la petición y nunca aparecen en la URL.

Explanation

Con GET los campos del formulario se serializan y se añaden a la URL como cadena de consulta, por lo que son visibles en el historial y en los registros. Por eso GET se reserva para solicitudes que no modifican estado.

Question 7Fundamentos de la web y arquitectura cliente-servidor

¿Cuál es la diferencia esencial entre un sitio web estático y uno dinámico?

  1. El dinámico no requiere un servidor web para funcionar.
  2. El estático entrega archivos tal como están guardados; el dinámico genera la respuesta en el servidor o cliente según la petición. Correct answer.
  3. El estático no puede usar hojas de estilo CSS.
  4. El estático solo usa HTML y el dinámico solo usa JavaScript.

Explanation

En un sitio estático el servidor devuelve el archivo almacenado sin modificarlo, mientras que en uno dinámico el contenido se construye en tiempo de ejecución a partir de datos o lógica. Ambos pueden combinar HTML, CSS y JavaScript.

Question 8Fundamentos de la web y arquitectura cliente-servidor

En una arquitectura de tres capas para una aplicación web, ¿qué elemento representa típicamente la capa de presentación?

  1. El servidor de base de datos relacional.
  2. La interfaz que se ejecuta en el navegador del usuario. Correct answer.
  3. La lógica de negocio implementada en el backend.
  4. El sistema de archivos del servidor de aplicaciones.

Explanation

La capa de presentación es la que interactúa con el usuario, normalmente el HTML, CSS y JavaScript renderizados en el navegador. La lógica de negocio y el acceso a datos ocupan las otras capas.

Question 9Fundamentos de la web y arquitectura cliente-servidor

Un desarrollador necesita que una operación del servidor no se repita si el usuario recarga la página tras enviar un formulario. ¿Qué método HTTP es el más adecuado para enviar ese formulario?

  1. HEAD, porque devuelve solo las cabeceras de la respuesta.
  2. GET, porque conserva los datos en la URL.
  3. OPTIONS, porque describe los métodos disponibles en el recurso.
  4. POST, porque su semántica indica el envío de datos que pueden crear o modificar un recurso. Correct answer.

Explanation

POST está pensado para enviar datos que producen efectos en el servidor, y su repetición accidental se mitiga con el patrón de redirección tras el envío. GET no debería usarse para operaciones que cambian estado.

Question 10Fundamentos de la web y arquitectura cliente-servidor

¿Qué hace un proxy inverso situado delante de varios servidores web?

  1. Recibe las peticiones de los clientes y las distribuye hacia los servidores internos. Correct answer.
  2. Sustituye al protocolo HTTP por un protocolo binario propietario.
  3. Resuelve los nombres de dominio en direcciones IP para el navegador.
  4. Ejecuta el código JavaScript del sitio en el lado del cliente.

Explanation

El proxy inverso actúa en nombre de los servidores: recibe el tráfico entrante y lo reenvía a los servidores de origen, aportando balanceo, caché o terminación TLS. El cliente cree estar hablando con un único servidor.

Question 11Fundamentos de la web y arquitectura cliente-servidor

Al analizar una petición HTTP se observa la cabecera Cookie enviada por el navegador. ¿Qué explica su presencia?

  1. Que el recurso solicitado se encuentra en la caché del proxy.
  2. Que el navegador devuelve al servidor cookies previamente establecidas para ese dominio. Correct answer.
  3. Que el servidor ha incluido el contenido del recurso en la cabecera.
  4. Que la conexión se ha cifrado con TLS en ese instante.

Explanation

El servidor puede establecer cookies con Set-Cookie en una respuesta, y el navegador las reenvía automáticamente en peticiones posteriores al mismo dominio mediante la cabecera Cookie. Así se mantiene el estado entre peticiones HTTP sin estado.

Question 12Fundamentos de la web y arquitectura cliente-servidor

Un equipo quiere que la primera visita a un sitio use HTTPS y que las siguientes peticiones al mismo host se realicen siempre por ese canal. ¿Qué mecanismo del lado del servidor lo consigue de forma más directa?

  1. Configurar el método del formulario como POST.
  2. Añadir el atributo target="_blank" a los enlaces.
  3. Definir la cabecera Content-Type con valor text/html.
  4. Enviar la cabecera Strict-Transport-Security en la respuesta HTTPS. Correct answer.

Explanation

La cabecera Strict-Transport-Security (HSTS) indica al navegador que durante un periodo determinado solo acceda al host mediante HTTPS. Es una instrucción que el servidor envía y el navegador respeta en visitas posteriores.

Question 13Fundamentos de la web y arquitectura cliente-servidor

¿Qué caracteriza a una aplicación web de una sola página (SPA) frente a una tradicional de múltiples páginas?

  1. La navegación ocurre mayormente en el cliente, que actualiza la vista sin recargar el documento completo. Correct answer.
  2. El navegador debe descargar de nuevo todos los recursos en cada cambio de vista.
  3. Todas las peticiones se resuelven mediante el método HEAD.
  4. El servidor deja de enviar HTML en cualquier circunstancia.

Explanation

En una SPA el navegador carga un documento inicial y luego el JavaScript del cliente gestiona la navegación y las actualizaciones de la interfaz, a menudo solicitando datos al servidor. Esto evita recargar la página completa en cada transición.

Question 14Fundamentos de la web y arquitectura cliente-servidor

Un cliente solicita un recurso y el servidor responde con el código 304. ¿Cómo debe interpretarlo el navegador?

  1. Que el recurso fue eliminado de forma definitiva del servidor.
  2. Que puede reutilizar la copia almacenada en su caché porque no ha cambiado. Correct answer.
  3. Que debe repetir la petición con credenciales de administrador.
  4. Que la conexión fue rechazada por el firewall del servidor.

Explanation

El código 304 Not Modified se emite cuando el cliente envía validadores de caché y el servidor confirma que el recurso sigue igual. En ese caso el navegador reutiliza la versión local sin descargar el cuerpo de nuevo.

Question 15Fundamentos de la web y arquitectura cliente-servidor

Un formulario envía datos de una compra mediante POST sobre HTTPS. ¿Qué afirmación describe correctamente el recorrido de esos datos?

  1. Viajan en texto plano porque POST no admite cifrado.
  2. Viajan cifrados solo si el formulario usa el método GET.
  3. Viajan cifrados en la URL y quedan visibles en los registros del proxy.
  4. Viajan cifrados en el cuerpo de la petición y el servidor los descifra al recibirlos. Correct answer.

Explanation

HTTPS cifra el canal completo con TLS, de modo que el cuerpo de un POST viaja protegido entre cliente y servidor. El servidor descifra la petición al recibirla para procesar los datos.

Question 16Fundamentos de la web y arquitectura cliente-servidor

Una empresa coloca una CDN delante de su sitio. ¿Qué efecto tiene sobre la arquitectura cliente-servidor?

  1. Obliga a que todas las peticiones usen el método POST.
  2. Hace que el navegador deje de actuar como cliente HTTP.
  3. Sustituye al DNS y elimina la necesidad de resolver nombres de dominio.
  4. Acerca copias del contenido a los usuarios y reduce la carga sobre el servidor de origen. Correct answer.

Explanation

Una red de entrega de contenido mantiene copias en nodos distribuidos geográficamente, de modo que las peticiones se atienden desde el punto más cercano. Esto disminuye la latencia y la carga que soporta el servidor de origen.

Question 17HTML5: estructura, semántica y accesibilidad

Al escribir una página HTML5, ¿cuál es la función del elemento <main>?

  1. Delimitar el contenido principal y único del documento, excluyendo cabecera, navegación y pie repetidos Correct answer.
  2. Definir el encabezado visible de la página con el logotipo y el título
  3. Marcar el pie de página con los datos de contacto y derechos de autor
  4. Agrupar los enlaces de navegación global del sitio

Explanation

El elemento <main> representa el contenido dominante del documento y debe aparecer una sola vez por página, sin incluir elementos que se repiten en todas las vistas como la navegación o el pie. Los lectores de pantalla pueden saltar directamente a él, lo que mejora la accesibilidad.

Question 18HTML5: estructura, semántica y accesibilidad

¿Qué diferencia existe entre los elementos <article> y <section> en HTML5?

  1. Una <section> solo puede contener imágenes y un <article> solo puede contener texto
  2. <article> es un elemento obsoleto reemplazado por <section> en HTML5
  3. Un <article> es contenido autocontenido y distribuible por sí solo, mientras que una <section> agrupa contenido temáticamente relacionado dentro de un contexto mayor Correct answer.
  4. Ambos son sinónimos y su uso depende únicamente del estilo CSS aplicado

Explanation

Un <article> puede publicarse de forma independiente, como una entrada de blog o una noticia, y conserva sentido fuera del documento. Una <section> agrupa contenido relacionado dentro de un documento y normalmente requiere un encabezado que describa su tema.

Question 19HTML5: estructura, semántica y accesibilidad

¿Cuál es la forma correcta de declarar el idioma principal de una página en HTML5?

  1. <html language="es">
  2. <html lang="es"> Correct answer.
  3. <meta lang="es">
  4. <body lang="es">

Explanation

El atributo global lang se declara en el elemento raíz <html> para indicar el idioma principal del documento. Esto permite que los lectores de pantalla seleccionen la voz y la pronunciación adecuadas, y que los navegadores apliquen reglas de guionado correctas.

Question 20HTML5: estructura, semántica y accesibilidad

Un desarrollador necesita marcar un fragmento de texto en inglés dentro de una página en español para que el lector de pantalla cambie de voz. ¿Qué código es el adecuado?

  1. <span xml:lang="en">Hello world</span>
  2. <span lang="en">Hello world</span> Correct answer.
  3. <span language="en">Hello world</span>
  4. <span translate="en">Hello world</span>

Explanation

El atributo global lang puede aplicarse a cualquier elemento para indicar un cambio de idioma respecto al valor heredado. Al envolver el texto en un <span> con lang="en", los lectores de pantalla pronunciarán ese fragmento con la voz inglesa.

Question 21HTML5: estructura, semántica y accesibilidad

¿Qué elemento HTML5 se utiliza para asociar un texto descriptivo a un control de formulario de manera programática?

  1. <caption>
  2. <legend>
  3. <label> Correct answer.
  4. <figcaption>

Explanation

El elemento <label> asocia una etiqueta textual a un control mediante el atributo for con el id del control, o envolviendo el control. Esta asociación permite que los lectores de pantalla anuncien el nombre accesible y que al hacer clic en la etiqueta se enfoque el campo.

Question 22HTML5: estructura, semántica y accesibilidad

¿Cuál es el propósito del atributo alt en una imagen dentro de una página web accesible?

  1. Proporcionar una alternativa textual que describa la imagen cuando no puede percibirse visualmente Correct answer.
  2. Definir el texto que aparece como tooltip al pasar el ratón sobre la imagen
  3. Especificar la ruta del archivo de imagen que debe cargarse
  4. Establecer el tamaño máximo de la imagen en píxeles

Explanation

El atributo alt ofrece el texto alternativo que los lectores de pantalla leen en lugar de la imagen y que se muestra si la imagen no carga. Debe describir la función o el contenido relevante de la imagen, no repetir información ya presente en el texto adyacente.

Question 23HTML5: estructura, semántica y accesibilidad

Una imagen es puramente decorativa y no aporta información al contenido. ¿Qué valor de alt es el más adecuado según las prácticas de accesibilidad?

  1. alt="imagen decorativa"
  2. alt="" (cadena vacía) Correct answer.
  3. alt="fondo"
  4. Omitir el atributo alt por completo

Explanation

Una cadena vacía en alt indica a los lectores de pantalla que la imagen es decorativa y debe ignorarse, evitando que se anuncie ruido innecesario. Omitir el atributo provoca que algunos lectores anuncien el nombre del archivo, lo que resulta confuso.

Question 24HTML5: estructura, semántica y accesibilidad

¿Qué elemento HTML5 define el contenido de navegación principal de un sitio?

  1. <menu>
  2. <nav> Correct answer.
  3. <aside>
  4. <header>

Explanation

El elemento <nav> identifica un bloque de enlaces de navegación, como el menú principal o una tabla de contenidos. Los lectores de pantalla lo exponen como punto de referencia de navegación, permitiendo saltar directamente a él.

Question 25HTML5: estructura, semántica y accesibilidad

En una tabla de datos, ¿qué elemento debe usarse para marcar la celda de encabezado de una columna?

  1. <caption scope="col">
  2. <tr scope="col">
  3. <td scope="col">
  4. <th scope="col"> Correct answer.

Explanation

Las celdas de encabezado se marcan con <th> y el atributo scope indica si encabezan una columna (col) o una fila (row). Así, los lectores de pantalla pueden anunciar el encabezado correspondiente al navegar por las celdas de datos.

Question 26HTML5: estructura, semántica y accesibilidad

¿Cuál es el elemento recomendado para agrupar un conjunto de controles relacionados en un formulario y proporcionarles un título accesible?

  1. <section> con <h1>
  2. <fieldset> con <legend> Correct answer.
  3. <form> con <title>
  4. <div> con <label>

Explanation

El elemento <fieldset> agrupa controles relacionados y su primer hijo <legend> proporciona un título que los lectores de pantalla anuncian al entrar en el grupo. Esto resulta especialmente útil en grupos de botones de opción o casillas de verificación.

Question 27HTML5: estructura, semántica y accesibilidad

¿Qué atributo permite que un campo de formulario esté asociado a una descripción adicional que los lectores de pantalla anuncian junto con la etiqueta?

  1. aria-expanded
  2. aria-live
  3. aria-describedby Correct answer.
  4. aria-hidden

Explanation

aria-describedby contiene el id de uno o varios elementos cuyo texto se anuncia como descripción complementaria del control. Es útil para añadir instrucciones o mensajes de error que no deben sustituir al nombre accesible definido por <label>.

Question 28HTML5: estructura, semántica y accesibilidad

¿Qué elemento HTML5 se utiliza para marcar contenido complementario o tangencial, como una barra lateral de artículos relacionados?

  1. <footer>
  2. <article>
  3. <aside> Correct answer.
  4. <section>

Explanation

El elemento <aside> representa contenido que está relacionado de forma tangencial con el contenido principal, como barras laterales, notas o enlaces relacionados. Si se elimina, el contenido principal sigue teniendo sentido completo.

Question 29HTML5: estructura, semántica y accesibilidad

¿Cuál es la función del atributo tabindex="0" en un elemento no interactivo como un <div>?

  1. Excluirlo completamente del orden de tabulación
  2. Convertirlo automáticamente en un botón con comportamiento de activación
  3. Asignarle la primera posición del orden de tabulación de la página
  4. Incluirlo en el orden natural de tabulación del teclado sin alterar la secuencia Correct answer.

Explanation

tabindex="0" hace que el elemento sea enfocable y se inserte en el orden de tabulación según su posición en el documento. No añade comportamiento interactivo ni rol, por lo que suele combinarse con role y controladores de teclado adecuados.

Question 30HTML5: estructura, semántica y accesibilidad

¿Qué elemento HTML5 representa el pie de una página o de una sección, con información como autoría o derechos de autor?

  1. <address>
  2. <main>
  3. <footer> Correct answer.
  4. <header>

Explanation

El elemento <footer> representa el pie de su ancestro más cercano de seccionamiento o del documento completo. Puede contener información de autoría, enlaces legales o datos de contacto, y puede repetirse en distintas secciones.

Question 31HTML5: estructura, semántica y accesibilidad

¿Qué elemento HTML5 se emplea para agrupar una imagen con su leyenda descriptiva?

  1. <div> con <label>
  2. <figure> con <figcaption> Correct answer.
  3. <img> con <legend>
  4. <picture> con <caption>

Explanation

El elemento <figure> agrupa contenido ilustrativo, como imágenes, gráficos o fragmentos de código, y <figcaption> proporciona su leyenda. La leyenda queda asociada semánticamente a la figura, lo que aporta contexto a las tecnologías de asistencia.

Question 32HTML5: estructura, semántica y accesibilidad

¿Qué jerarquía de encabezados es la más adecuada para un documento con una sección principal y dos subsecciones dentro de ella?

  1. <h3> del documento, <h2> para la sección y <h1> para cada subsección
  2. Todos los títulos con <h1> para mantener el mismo tamaño
  3. <h1> del documento y <h6> para todas las subsecciones
  4. <h1> del documento, <h2> para la sección y <h3> para cada subsección Correct answer.

Explanation

Los encabezados deben reflejar la estructura del contenido de forma descendente y sin saltos que rompan la jerarquía. Un <h1> para el título del documento, <h2> para las secciones y <h3> para las subsecciones permite a los lectores de pantalla navegar por niveles.

Question 33HTML5: estructura, semántica y accesibilidad

¿Cuál es el propósito del atributo for en el elemento <label>?

  1. Referenciar el id del control de formulario al que se asocia la etiqueta Correct answer.
  2. Definir el método HTTP del formulario contenedor
  3. Indicar el nombre del campo que se enviará al servidor
  4. Especificar la acción a la que se envía el formulario

Explanation

El atributo for de <label> debe coincidir con el id de un control del mismo documento, estableciendo una asociación programática. Gracias a ella, el lector de pantalla anuncia la etiqueta al enfocar el campo y el clic en la etiqueta activa el control.

Question 34HTML5: estructura, semántica y accesibilidad

¿Qué elemento HTML5 describe mejor un contenido que puede distribuirse de forma independiente, como una entrada de un blog con su propio título y fecha?

  1. <aside>
  2. <article> Correct answer.
  3. <main>
  4. <section>

Explanation

El elemento <article> está pensado para contenido autocontenido que conserva sentido fuera del documento, como entradas de blog, noticias o comentarios. Puede incluir su propio <header> con título y fecha sin perder independencia semántica.

Question 35HTML5: estructura, semántica y accesibilidad

En una tabla con encabezados tanto de fila como de columna, ¿qué atributo debe usarse en la celda de encabezado para indicar su alcance?

  1. headers con valor "row" o "col"
  2. abbr con valor "row" o "col"
  3. id con valor "row" o "col"
  4. scope con valor "row" o "col" Correct answer.

Explanation

El atributo scope en <th> indica si la celda encabeza una fila (row) o una columna (col), permitiendo a los lectores de pantalla asociar cada celda de datos con su encabezado. Es la forma más simple y ampliamente soportada de establecer esa relación.

Question 36HTML5: estructura, semántica y accesibilidad

¿Qué atributo ARIA debe añadirse a un <nav> cuando existen varios bloques de navegación en la misma página para diferenciarlos?

  1. aria-hidden con valor true
  2. aria-label con un nombre descriptivo Correct answer.
  3. aria-checked con valor true
  4. aria-live con valor polite

Explanation

Cuando hay varios puntos de referencia de navegación, aria-label proporciona un nombre único que los lectores de pantalla anuncian al listar los puntos de referencia. Así el usuario puede distinguir, por ejemplo, entre navegación principal y navegación secundaria.

Question 37HTML5: estructura, semántica y accesibilidad

¿Cuál es la función del elemento <time> en HTML5?

  1. Marcar fechas u horas de forma legible por máquinas mediante el atributo datetime Correct answer.
  2. Mostrar la hora del sistema del visitante en tiempo real
  3. Insertar un temporizador que se actualiza automáticamente en la página
  4. Definir la zona horaria del servidor que entrega la página

Explanation

El elemento <time> representa una fecha, hora o duración y permite usar el atributo datetime para expresar el valor en un formato legible por máquinas, como 2024-03-15. Esto facilita el procesamiento automático por navegadores y motores de búsqueda.

Question 38HTML5: estructura, semántica y accesibilidad

Un formulario tiene un campo obligatorio. ¿Qué combinación de atributos comunica mejor la obligatoriedad tanto a usuarios visuales como a lectores de pantalla?

  1. disabled en el control y un color rojo en el borde del campo
  2. required en el control y ocultar la indicación a las tecnologías de asistencia con aria-hidden
  3. readonly en el control y un asterisco sin explicación en la etiqueta
  4. required en el control y un texto visible como "Obligatorio" asociado con aria-describedby Correct answer.

Explanation

El atributo required aporta validación nativa y expone el estado obligatorio a las tecnologías de asistencia. Añadir una indicación textual visible asociada con aria-describedby garantiza que todos los usuarios comprendan el requisito sin depender solo del color.

Question 39HTML5: estructura, semántica y accesibilidad

¿Qué elemento HTML5 se utiliza para marcar el título principal visible de una página dentro de su cabecera?

  1. <header>
  2. <h1> Correct answer.
  3. <title>
  4. <head>

Explanation

El elemento <h1> representa el encabezado de mayor nivel visible en el contenido de la página. No debe confundirse con <title>, que define el título de la pestaña del navegador dentro de <head>.

Question 40HTML5: estructura, semántica y accesibilidad

¿Qué atributo debe añadirse a un enlace que abre una nueva pestaña para advertir de ello a los usuarios de lectores de pantalla?

  1. target="_blank" es suficiente, porque los lectores de pantalla anuncian automáticamente la nueva pestaña
  2. download="nueva" indica a las tecnologías de asistencia que se abrirá otra pestaña
  3. Un texto visible o asociado que lo indique, ya que no existe un atributo nativo que anuncie la apertura en nueva pestaña Correct answer.
  4. rel="noopener" comunica al lector de pantalla el cambio de contexto

Explanation

No hay ningún atributo HTML que anuncie de forma fiable la apertura en una nueva pestaña a las tecnologías de asistencia. La práctica accesible consiste en incluir en el texto del enlace o en su descripción asociada una advertencia explícita para evitar cambios de contexto sorpresivos.

Question 41HTML5: estructura, semántica y accesibilidad

¿Cuál es la finalidad del elemento <meta name="viewport" content="width=device-width, initial-scale=1"> en un documento HTML5?

  1. Establecer la hoja de estilos principal que se aplicará a la página
  2. Declarar la codificación de caracteres del documento
  3. Adaptar el ancho del área de visualización al ancho del dispositivo y fijar el nivel de zoom inicial Correct answer.
  4. Definir la descripción del sitio para los motores de búsqueda

Explanation

La metaetiqueta viewport indica al navegador móvil que use el ancho del dispositivo como ancho del área de visualización y establezca el zoom inicial en 1. Es la base del diseño responsivo y evita que la página se muestre como una versión reducida del escritorio.

Question 42HTML5: estructura, semántica y accesibilidad

En HTML5, ¿qué papel cumple el atributo lang en el elemento <html> para la accesibilidad y el procesamiento del documento?

  1. Define la codificación de caracteres que el navegador debe usar al interpretar los bytes del archivo.
  2. Especifica la hoja de estilo predeterminada que se aplicará a los elementos del documento.
  3. Establece la dirección de escritura del texto, alternando entre izquierda a derecha y derecha a izquierda.
  4. Indica el idioma principal del contenido, lo que permite a los lectores de pantalla seleccionar la voz y las reglas de pronunciación adecuadas. Correct answer.

Explanation

El atributo lang declara el idioma natural del contenido y los lectores de pantalla lo usan para elegir la voz, el diccionario y las reglas de pronunciación correctas. También ayuda a los motores de búsqueda y a las herramientas de traducción a identificar el idioma del documento. No confunde su función con la codificación de caracteres, que se declara con <meta charset>.

Question 43HTML5: estructura, semántica y accesibilidad

Un desarrollador construye un formulario de registro y desea que el campo de correo electrónico muestre un mensaje de error específico cuando el usuario escriba un valor que no tenga formato de correo. ¿Qué combinación de atributos HTML5 logra este comportamiento sin usar JavaScript?

  1. type="email" y pattern con una expresión regular, junto con title para describir el formato esperado. Correct answer.
  2. type="text" y required, junto con placeholder para indicar el formato esperado.
  3. type="text" y maxlength, junto con aria-describedby para enlazar un mensaje de error.
  4. type="email" y novalidate, junto con autocomplete para sugerir direcciones válidas.

Explanation

El tipo email activa la validación nativa de formato de correo, y el atributo pattern permite exigir un formato más estricto mediante una expresión regular. El atributo title se muestra en el mensaje de validación del navegador y sirve como descripción del formato esperado. Esta combinación aprovecha la validación del lado del cliente sin necesidad de scripts.

Question 44HTML5: estructura, semántica y accesibilidad

Al revisar el código de una página, se observa que el contenido principal está envuelto en un <div id="contenido"> y que los artículos internos usan <div class="articulo">. ¿Qué cambio mejora la semántica y la accesibilidad del documento sin alterar su presentación visual?

  1. Reemplazar el div externo por <section> y los internos por <div role="region">, manteniendo las clases.
  2. Convertir el div externo en <body> y los internos en <section>, eliminando los identificadores.
  3. Sustituir el div externo por <main> y cada div de artículo por <article>, conservando los identificadores y clases para los estilos. Correct answer.
  4. Añadir role="main" al div externo y role="article" a cada div interno, sin cambiar las etiquetas.

Explanation

Los elementos main y article aportan significado estructural que los lectores de pantalla y los motores de búsqueda interpretan directamente, sin depender de atributos ARIA. Mantener los identificadores y las clases permite conservar los estilos CSS existentes. Esta sustitución es la forma más directa de mejorar la semántica sin cambiar la apariencia.

Question 45CSS3: maquetación, responsive design y preprocesadores

En CSS3, ¿qué valor de la propiedad display convierte un contenedor en una caja flexible unidimensional que distribuye sus hijos en fila o columna?

  1. grid
  2. table
  3. flex Correct answer.
  4. inline-block

Explanation

display: flex activa el modelo Flexbox, pensado para distribuir elementos a lo largo de un único eje principal (fila o columna) con control de alineación y reparto de espacio. grid crea una rejilla bidimensional, por lo que no es la respuesta adecuada para un layout de un solo eje.

Question 46CSS3: maquetación, responsive design y preprocesadores

¿Cuál es la función de la declaración @media screen and (max-width: 768px) en una hoja de estilos?

  1. Aplicar reglas solo cuando el ancho del viewport sea igual o mayor que 768 píxeles
  2. Aplicar reglas cuando la resolución del monitor sea exactamente 768 píxeles
  3. Aplicar reglas únicamente en dispositivos con pantalla táctil
  4. Aplicar reglas solo cuando el ancho del viewport sea igual o menor que 768 píxeles Correct answer.

Explanation

Una media query con max-width es una condición de techo: el bloque se aplica mientras el ancho del viewport no supere el valor indicado, es decir, en pantallas de 768 px o menos. Esto se usa habitualmente para adaptar el diseño a tablets y móviles.

Question 47CSS3: maquetación, responsive design y preprocesadores

En un preprocesador como Sass, ¿qué permite el anidamiento de selectores?

  1. Sustituir las media queries por variables globales
  2. Combinar automáticamente todas las hojas en un único archivo
  3. Ejecutar código JavaScript dentro del CSS compilado
  4. Escribir reglas hijas dentro de la regla padre para reflejar la jerarquía del HTML Correct answer.

Explanation

El anidamiento permite declarar selectores descendientes dentro del bloque del padre, lo que reduce la repetición y hace visible la estructura del marcado. El preprocesador resuelve la combinación de selectores al compilar el CSS final.

Question 48CSS3: maquetación, responsive design y preprocesadores

¿Qué propiedad de CSS Grid define el número y tamaño de las columnas de una cuadrícula?

  1. grid-column-gap
  2. grid-area
  3. grid-template-columns Correct answer.
  4. grid-auto-flow

Explanation

grid-template-columns declara explícitamente la pista de columnas, por ejemplo repeat(3, 1fr) para tres columnas iguales. Las demás propiedades controlan la colocación automática, la separación o la ubicación de un ítem concreto.

Question 49CSS3: maquetación, responsive design y preprocesadores

¿Cuál de estas unidades es relativa al tamaño de fuente del elemento raíz y se usa para escalar tipografía en diseños responsive?

  1. px
  2. pt
  3. rem Correct answer.
  4. vh

Explanation

rem equivale al font-size del elemento html, de modo que cambiar ese valor base reescala toda la interfaz de forma coherente. px es absoluta y vh depende de la altura del viewport, no del tamaño de fuente.

Question 50CSS3: maquetación, responsive design y preprocesadores

En Flexbox, ¿qué hace justify-content: space-between sobre el eje principal?

  1. Obliga a los ítems a ocupar el mismo ancho
  2. Alinea los ítems en el eje transversal
  3. Distribuye el espacio libre entre los ítems, pegando el primero al inicio y el último al final Correct answer.
  4. Centra todos los ítems y deja el espacio sobrante en ambos extremos

Explanation

space-between coloca el primer ítem al inicio del eje principal y el último al final, repartiendo el espacio sobrante solo entre ellos. La alineación del eje transversal corresponde a align-items.