DAW - Diseño de Interfaces Web

COMENTARIOS

ESTADÍSTICAS

RÉCORDS

REALIZAR TEST

Título del Test:

DAW - Diseño de Interfaces Web

Descripción:
T2.- IES AGUADULCE 25/26

Autor:

anukamind

OTROS TESTS DEL AUTOR

Fecha de Creación: 2026/01/28

Categoría: Informática

Número Preguntas: 25

Valoración:

(0)

COMPARTE EL TEST

Nuevo Comentario

Comentarios
NO HAY REGISTROS

Temario:

Si quieres definir la presentación de una página web utilizas... CSS. HTML. Javascript. PHP.

Relaciona la prioridad de menor a mayor (1-5) con la que se aplica una regla de estilo. Declaraciones de estilo marcadas como !important. Hojas de estilo incrustadas. Hojas de estilo externas importadas con la regla @import. Hojas de estilo externas vinculadas con link. Estilos en línea.

Relaciona los elementos HTML con el tipo de elemento que son: de bloque o en línea. div. span. strong. em. p.

¿El padding es el margen exterior del objeto?. Verdadero. Falso.

¿En qué orden se dan las medidas de los márgenes en CSS?. top bottom right left. left right top bottom. top left right bottom. top right bottom left.

Cuando definimos la propiedad width de un objeto al que se le ha asignado la propiedad box-sizing con valor border-box, este valor incluye... La zona de contenido. La zona de contenido + la zona de relleno. La zona de contenido + la zona de relleno + el borde. La zona de contenido + la zona de relleno + el borde + el margen.

Tenemos el siguiente documento HTML con una hoja de estilo incrustada: <html> <head> <style> h2 + p { color: red; } </style> <title>Una prueba de selectores adyacentes</title> </head> <body> <h1>Título 1</h1> <h2>Subtítulo 1</h2> <p>Párrafo 1 </p> <h2>Subtítulo 2</h2> <p>Párrafo 2</p> </body> </html> Al abrir este documento en un navegador ¿qué texto aparecerá en color rojo?. Título 1. Subtítulo 1. Párrafo 1. Subtítulo 2. Párrafo 2. Subtítulo 1 y Subtitulo 2. Párrafo 1 y Párrafo 2.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Ejemplo pseudoclase nth-chi</title> <style> main, p:nth-child(3n+4) { color: red; } </style> </head> <body> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <main> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> </main> </body> </html> Teniendo como base el código anterior (código básico con pseudoclase nth-child), ¿qué elementos p no contenidos en la etiqueta main tendrán color rojo?. 3,7,10,13. 4,7,10,13. Todos. 4,8,12,13.

¿Cuál de los siguientes es el selector CSS que selecciona a todos los objetos con class=“nuevo” que están contenidos en un tabla?. table .nuevo. table.nuevo. table#nuevo.

Queremos realizar un documento web donde la fuente base de toda la página sea: de color negro, de tipo Arial, con un tamaño 0.9 veces la letra por defecto del navegador y un espaciado entre líneas de 1,4. ¿Cuál sería la regla CSS que consigue esto?. body { font: 0.9em/1.4 Arial, Helvetica, sans-serif; color: #000; }. body { font: 0.9em/1.4 Arial, sans-serif; color: #000; }. body { color: #000; font: .9em/1.4 Arial; }. body { font: .9em/1.4 Arial; color: #000; }.

<!DOCTYPE html> <html lang="es"> <head> <style> body {background: #00f; color: black} #saludo { background: black; width: 200px; height: 200px; filter: opacity(50%); opacity: 0.5; } #frase { background: white; width: 200px; height: 200px; filter: opacity(100%); opacity: 1; } #despedida { background: white; width: 200px; height: 200px; filter: opacity(0%); opacity: 0; } </style> </head> <body> <div id="saludo"><h1>¡Hola!</h1></div> <div id="frase">Este es un ejemplo de opacidad</div> <div id="despedida"><h2>¡Adiós!></h2></div> </body> </html>. El color del fondo de toda la página es blanco. El color de fondo del saludo es blanco. El color de fondo de la frase es blanco. El color de fondo de la despedida es blanco. El saludo no se ve. La frase no se ve. La despedida no se ve. El fondo del saludo es el mismo que el el fondo de la página. El fondo del texto es el mismo que el de la página. El fondo de la despedida es el mismo que el de la página.

La sombra de una caja solo puede propagarse hacia abajo y a la derecha. Verdadero. Falso.

¿Es posible aplicar a una etiqueta span tres sombras a la vez?. Verdadero. Falso.

Dado el siguiente código: <!DOCTYPE html> <html lang="es"> <head> <title>Título de la WEB</title> <meta charset="UTF-8"> <meta name="title" content="Título de la WEB"> <meta name="description" content="Ejemplo de página con etiqutas HTML5"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">       <style> * { box-sizing: border-box; /* Dejamos 5px de separación vertical entre cada uno de los elementos y centramos los elementos de forma horizontal */ margin: 5px auto; font-size: 16px; } /* medida relativa que va a depender de elemento raiz en nuestro caso 1rem sería 16px*/ h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1rem; } .pagina { /* definimos nuestra página como flexbox*/ display: flex; /* Los elementos pricipales se mostrarán por columnas*/ flex-direction: column; /* permitimos el desbordamiento de tal forma que puedan existir varias líneas */ flex-wrap: wrap; } p { font-size: 0.5rem; } header { background-color: aqua; /* Utilizamos viewpor: definimos el ancho de la cabecera con el 99% del tamñao de nuestra*/ width: 99vw; height: 15vh; } nav { background-color: pink; width: 99vw; height: 10vh; } main { background-color: rgb(191, 201, 202); border: solid 2px black; /* 99 porciento de ancho de nuestra pantalla */ width: 98vw; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } .titulo { width: 90vw; border: black 2px solid; } .contenido_principal { border: solid 0.2vw black; background-color: rgb(210, 180, 222); width: 58vw; } aside { background-color: rgb(210, 180, 222); border: solid 2px red; width: 30vw; } section { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } article { background-color: antiquewhite; border: solid 2px greenyellow; border-radius: 20px; } footer { background-coloR: rgb(88, 214, 141); width: 99vw; height: 10vh; } @media screen and (max-width:640px) { /* Cuando la resolución de la pantalla es inferior a 640 px la barra lateral la ocultamos y ampliamos el ancho del main al 100% */ header { height: 20vh; } aside { display: none; } main { background-color: red; flex-direction: row; } h1 { font-size: 1rem; } h2 { font-size: 0.8rem; } h3 { font-size: 0.5rem; } } @media screen and (max-width:1024px) and (min-width:640px) { /* Cuando nuestra resolución es menor de 1024px y mayor de 640px cambiamos los porcentajes de los elementos aside y main y jugamos con los colores */ .titulo { width: 50vw; } aside { background-color: rgb(235, 152, 78); } main { flex-direction: column; align-items: center; background-color: rgb(253, 235, 208); } </style> </head> <body> <div class="pagina">  <header> <h1>Zona de cabecera: HEADER</h1> </header>  <nav> <h2> Zona de navegación: NAV</h2> </nav>  <main> <h2 class="titulo">Título del Contenido Principal: MAIN</h2> <div class="contenido_principal"> <section> <h2 class="titulo">Sección: SECTION</h2> <article> <h3>Artículo: ARTICLE 1</h3> <p>Descripción 1 </p> </article> <article> <h3>Artículo: ARTICLE 2</h3> <p>Descripción 2</p> </article> <article> <h3>Artículo: ARTICLE 3</h3> <p>Descripción 3</p> </article> </section> </div> <aside> <h3>Zona lateral: ASIDE</h3> </aside> </main>  <footer> <h4>Zona de pie de página: FOOTER</h4> </footer> </div> </body> </html> ¿Qué ocurrirá con la barra lateral (etiqueta aside) cuando la resolución de la interfaz de visualización sea de 800px?. Dicho bloque desaparecerá. Cambiará de color. Cambiará de color y se posicionará debajo de la etiqueta main. Seguirá igual.

Marca las reglas de estilo que eliminan el marcador de los elementos de una lista, de entre las que se muestran a continuación. ul {list-style-type: none; }. ul li {list-style-type: none; }. ul {list-style: none; }. ul li {list-style: none; }.

Indica de los siguientes framework cuales se pueden considerar como Framework CSS. Vue.js. Foundation. React. Bootstrap.

¿Qué carácter se utiliza al inicio del nombre de un módulo para poder ser importado?. $. -. _. @.

Para poder incorporar una nueva fuente a nuestra página web, ésta tiene que estar instalada en nuestro sistema operativo: Verdadero. Falso.

Si a un contenedor le configuramos un borde de 1 píxel de ancho por defecto adquiere el estilo solid: Verdadero. Falso.

La propiedad flex-grow permite hacer crecer un elemento hijo contenido en un elemento definido como flex : Verdadero. Falso.

En el posicionamiento absoluto el origen de coordenadas dependerá de si el elemento a posicionar está contenido dentro de otro que ya está previamente posicionado absoluta o relativamente: Verdadero. Falso.

Dado un conjunto de 15 párrafos cada uno en una etiqueta (p) diferente, contenidos dentro de una etiqueta (main), ¿qué regla utilizaríamos para poner los párrafos 4,7,10,13 de color rojo?. main p:nth-child(3n+4). main+p:nth-child(4n+3). p:nth-child(3n+3). main,p:nth-child(3n+4).

Indica la regla que pone de color rojo sólo el texto enfatizado (em) de las anclas (a) que se encuentren en las listas ordenadas (ol). ol a em {color: red;}. em a ol {color: red;}. em a p {color: red;}. ul ol a em {color: red;}.

Selecciona las propiedades que permitirán que un texto se escriba en cuatro columnas: columns: 80px 4;. column-count:4;. columns: 80px 100px 200px 40px;. columns: 80px 2 60px 2;.

La propiedad inline en CSS hace que todos los elementos tengan una línea en la zona interior bordeando el elemento: Verdadero. Falso.

Denunciar Test

▲