Ejercicios

Dispones de 20 minutos para realizar este examen.

1. Identifica el tipo de elemento, en línea o en bloque, que es cada uno:

Elemento	En línea (inline)	Bloque (block)
p		X
ul		X
h4		X
li		X
abbr	X
img	X

2. Describe dos usos o funciones que proporciona la declaración DOCTYPE en una página web.

Identifica la versión de HTML empleada en la página web.
Ayuda a una herramienta de validación a realizar la validación y detectar los errores de la página.
Ayuda a un navegador web a visualizar correctamente la página web.

3. Dispones de dos páginas web, “inicio.html” y “contacto.html” y quieres crear un enlace en “inicio.html” dirigido a “contacto.html” con el texto "Datos de contacto". Escribe el código HTML necesario para crear ese enlace.

<a href="contacto.html">Datos de contacto</a>

4. En el directorio “sitioweb” tienes la página web “inicio.html”. Dentro de esa página quieres añadir un párrafo con el texto “Mis vacaciones en la playa:” y a continuación, dentro de ese mismo párrafo, quieres incluir una imagen llamada “foto.jpg” que se encuentra en el directorio “cosas” que se encuentra dentro de “sitioweb”. Escribe el código HTML del párrafo.

<p>Mis vacaciones en la playa: <img src=”cosas/foto.jpg” /></p>

5. Dentro de una página web quieres incluir un fragmento de un discurso de una persona famosa. ¿Cuál es la etiqueta más apropiada para hacerlo?

<blockquote>, porque permite incluir una cita que ocupe varias líneas. <q> sólo es adecuado para una cita en línea, sin saltos de línea.

6. Escribe el código HTML5 de un cuadro de texto de un formulario que debe ser rellenado con los apellidos del usuario antes de que el formulario pueda ser enviado al servidor.

<input type="text" name="apellidos" id="apellidos" required>

7. Nombra tres tipos nuevos de controles tipo <input> en HTML5.

Por ejemplo:

color
date
email
number
tel
url
search

8. ¿Qué etiqueta de HTML5 se emplea para marcar una fecha?

<time>

9. Escribe el código HTML5 mínimo necesario para enlazar una hoja de estilo externa.

<link rel="stylesheet" href="hoja.css">

10. ¿Qué error presenta el siguiente fragmento de HTML5?

<article>
	<header>Umbrella Corporation</header>
	<p>Article content</p>
	<sidebar>Footnotes</sidebar>
</article>

En HTML5 no existe la etiqueta <sidebar>, se debe emplear <aside>.

11. Un párrafo tiene un tamaño de letra definido como 1.25em. Expresado como un porcentaje, ¿cuánto más grande será el tamaño de letra de este párrafo comparado con el resto de párrafos?

1.25em equivale a 125%, por tanto, es un 25% más grande.

12. Escribe la regla CSS (selector y propiedades) necesaria para que todos los párrafos de una página web aparezcan en cursiva.

p {
  font-style: italic;
}

13. Escribe la regla CSS (selector y propiedades) necesaria para que todos los enlaces de una página web aparezcan:

Con el color rojo cuando el cursor del ratón se sitúe encima de ellos.
Con el color verde cuando el foco del teclado se sitúe en ellos.

a:hover {
  color: red;
}

a:focus {
  color: green;
}

14. Escribe la regla CSS (selector y propiedades) necesaria para que todos los elementos de una lista que tenga la clase “importante” y que se encuentre dentro de un contenedor <div> con la clase “destacado” aparezcan con el color rojo.

div.destacado ul.importante li {
  color: red;
}

15. ¿Qué error presenta el siguiente fragmento de CSS?

h1 {
  font-face: Georgia, Cambria, sans-serif;
  font-size: 24px;
}

p {
  font-face: Arial, Verdana, Calibri, serif;
  font-size: 16px;
}

La propiedad font-face no existe en CSS, se debe usar font-family.