IES Sorolla

---------------------------------------------------------------------------------------------
Nombre y Apellidos: ………………………………………
Curso: ………………………………………
---------------------------------------------------------------------------------------------

Examen HTML/CSS
Test
Las preguntas tipo test penalizan ⅓ del valor de la preguntas

1. ¿Cuál de las siguientes no es una etiqueta conocida en HTML?

a) ol
b) a
c) section
d) al

2. Si quisiéramos añadir espacio entre diferentes elementos HTML, ¿Qué propiedad

del css deberiamos manejar?
a) Spaccing
b) Padding
c) Margin
d) Distance

3. ¿Cuál es la correcta?
a) <!-- Esto es un comentario en HTML –!>
b) // Esto es un comentario en HTML
c) /* Esto es un comentario en HTML
d) <!-- Esto es un comentario en HTML -->

4. Si quisiera crear 2 listas ordenadas con 4 items cada una, ¿Qué comando del
editor debería utilizar?
a) ol*2>li*4
b) ol>li*4*2
c) (ol>li*4)*2
d) ol>li*2*4

5. ¿Cuál es la sintaxis correcta para utilizar un selector de clase denominado class?

a) #class
b) class
c) .class
d) class[attr]

6. Si quisiera aplicar un padding superior e inferior de 15px y lateral (derecha e

izquierda) de 20px. ¿Cuál sería la sintaxis correcta en css?
a) padding: 20px 15px;
b) padding: 15px 20px;
c) padding: 15px 15px 20px 20px;
d) padding: 20px 20px 15px 15px;

1/4
IES Sorolla

7. Dado el siguiente código en HTML

<p> Lorem ipsum ...</p>
<p id=”uno”> Lorem ipsum ..</p>
<p class=”uno”> Lorem ipsum </p>

¿Qué selector emplearíamos para seleccionar el elemento en negrita?

a) .uno
b) p
c) #uno
d) p1

8. ¿Cuál sería la sintaxis correcta en el editor para crear una tabla de 3x5 (flas x
columnas)

a) table>tr*3>td*5
b) table>tbody>tr*5>td*3
c) table>thead>tr*5>th*3
d) table>tbody>tr*3>td*5

9. ¿Cuál es el signifcado de las siglas HTML?

a) Hyper Text Markup Language
b) Home Tool Markup Language
c) Hyperlinks and Text Markup Language

10. ¿Cuál es el elemento correcto para insertar un salto de linea?

a) <break>
b) <lb>
c) <br>

11. ¿Cuál es la sintaxis correcta para crear un enlace?

a) <a name="http://www.w3schools.com">W3Schools.com</a>
b) <a url="http://www.w3schools.com">W3Schools.com</a>
c) <a href="http://www.w3schools.com">W3Schools</a>
d) <a>http://www.w3schools.com</a>

12. ¿Cuál de los siguientes elementos no es un elemento en linea (inline)?

a) span
b) a
c) p
d) img

13. Los elementos de bloque se muestran por norma general en una misma
linea
a) Verdadero
b) Falso

2/4
IES Sorolla

14. ¿Cuál de los atributos HTML se usa para mostrar un texto alternativo en
caso de que la imagen no pueda ser cargada?
a) title
b) src
c) longdesc
d) alt

Respuesta breve
Emmet

Introduce el código emmet (una sola linea!!!) necesario para generar el

siguiente código html

a)
<div class="w3-container">
<figure>
<img src="" alt="">
<figcaption></figcaption>
</figure>
<div>
<p></p>
<button></button>
</div>
</div>

codigo emmet:
__________________________________________________________
__________________________________________________________

b)
<section>
<header>
<h1></h1>
</header>
<p>Lorem ipsum dolor sit amet. Iure architecto, </p>
<p>Dolorem nostrum sapiente, am ullam ab minus,</p>
<p>Quo ex incidunt odio cumques rerum officia</p>
<p class="epigrafe"></p>
<h2></h2>
<p>Lorem ipsum dolor adipisicing elit. Unde modi </p>
<p>Beatae quidem acculuptatem totam iusto atque </p>
<p>Modi voluptatem corporis excepturi tenetur itaqe </p>
</section>

codigo emmet:
__________________________________________________________
__________________________________________________________

3/4
IES Sorolla

Selectores

Descripción Selector
Todos los elementos de una lista
Las listas ordenadas
La tabla de clase chessboard
Las imágenes descendiente directo de un
contenedor div
Los párrafos de clase epigrafe

Práctica

1. Accede a tu cuenta en github.com y crea un repositorio con el nombre

mi_nombre_de_usuario.github.io.
2. Clona el repositorio la carpeta Documentos de tu usuario en el ordenador (git
clone url_del_repositorio)
3. Utiliza el editor atom para llevar a cabo la práctica, una vez fnalizada, deberás
utilizar los comandos de git para subir la página, la página se podrá consultar en
la url mi_nombre_de_usuario.github.io
4. Crea un fchero index.html
5. Enlaza la hoja de estilo trabajada en clase
(https://www.w3schools.com/w3css/4/w3.css)
6. Para obtener los iconos, deberás enlazar la hoja de estilo de fontawesome
(https://cdnjs.cloudfare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.css), para evitar errores tipo gráfcos, recomiendo buscar en google “fa
cdn” y obtener la url del primer resultado mostrado
7. Realiza el siguiente trabajo que se deberá visualizar de forma diferente
dependiendo del tamaño de pantalla, por lo que deberás utilizar la clase w3-row-
padding(deja hueco entre columnas) entre otras.

4/4