Capítulo 14 Ejercicios de HTML

14.1 Capítulo 3

14.1.1 Ejercicio 1

Determinar el código HTML correspondiente a la siguiente página:

Página HTML sencilla que resalta algunas partes del texto

Figura 14.1 Página HTML sencilla que resalta algunas partes del texto

14.2 Capítulo 4

14.2.1 Ejercicio 2

Estructurar y marcar el siguiente texto extraído de la Wikipedia para que el navegador lo muestre con el aspecto de la siguiente imagen:

Resultado de estructurar y marcar el texto original

Figura 14.2 Resultado de estructurar y marcar el texto original

14.2.2 Ejercicio 3

Estructurar y marcar el siguiente texto para que el navegador lo muestre con el aspecto de la siguiente imagen:

Texto HTML correctamente estructurado y marcado

Figura 14.3 Texto HTML correctamente estructurado y marcado

14.2.3 Ejercicio 4

Determinar el código HTML que corresponde al siguiente documento:

Texto HTML con espacios en blanco y nuevas líneas

Figura 14.4 Texto HTML con espacios en blanco y nuevas líneas

14.2.4 Ejercicio 5

Determinar el código HTML que corresponde al siguiente documento:

Texto HTML que incluye caracteres especiales

Figura 14.5 Texto HTML que incluye caracteres especiales

14.3 Capítulo 5

14.3.1 Ejercicio 6

A partir de la estructura de directorios y archivos indicada en la siguiente imagen:

Estructura de archivos y directorios de un sitio web de ejemplo

Figura 14.6 Estructura de archivos y directorios de un sitio web de ejemplo

  1. Crear la siguiente página llamada indice.html que sirva como página principal del sitio:
Página principal del sitio web de ejemplo

Figura 14.7 Página principal del sitio web de ejemplo

  1. Crear la página de índice del portfolio:
Página con la información sobre los proyectos realizados

Figura 14.8 Página con la información sobre los proyectos realizados

14.3.2 Ejercicio 7

Enlazar el favicon en todas las páginas del ejercicio 6 y añadir todos los atributos posibles a los enlaces.

14.4 Capítulo 6

14.4.1 Ejercicio 8

Determinar el código HTML que corresponde a la siguiente lista anidada simple:

Ejemplo de lista anidada simple de dos niveles

Figura 14.9 Ejemplo de lista anidada simple de dos niveles

14.4.2 Ejercicio 9

Determinar el código HTML que corresponde a la siguiente lista anidada compleja:

Ejemplo de lista anidada compleja de dos niveles

Figura 14.10 Ejemplo de lista anidada compleja de dos niveles

14.5 Capítulo 7

14.5.1 Ejercicio 10

Modificar la página de índice del portfolio de los ejercicios 6 y 7 para mostrar directamente las imágenes de los proyectos.

Nueva página del portfolio que muestra la imagen de cada uno de los proyectos

Figura 14.11 Nueva página del portfolio que muestra la imagen de cada uno de los proyectos

14.6 Capítulo 8

14.6.1 Ejercicio 11

Determinar el código HTML necesario para crear la tabla que se muestra en la siguiente imagen:

Tabla sencilla con celdas de cabecera

Figura 14.12 Tabla sencilla con celdas de cabecera

Utilizar las celdas de cabecera donde sea necesario y añadir todos los atributos posibles.

14.6.2 Ejercicio 12

Determinar el código HTML necesario para crear la tabla que se muestra en la siguiente imagen. Utilizar las celdas de cabecera donde sea necesario y añadir todos los atributos posibles.

Tabla con los resultados de una búsqueda

Figura 14.13 Tabla con los resultados de una búsqueda

14.6.3 Ejercicio 13

Determinar el código HTML necesario para crear la tabla que se muestra en la siguiente imagen:

Ejemplo de tabla con una estructura compleja

Figura 14.14 Ejemplo de tabla con una estructura compleja

Emplear las etiquetas <table>, <tr>, <td>, <th>, <caption> y los atributos colspan, rowspan, abbr, scope, summary.

14.7 Capítulo 9

14.7.1 Ejercicio 14

Determinar el código HTML necesario para crear el formulario que se muestra en la siguiente imagen:

Formulario con controles de varios tipos

Figura 14.15 Formulario con controles de varios tipos

  1. Elegir el método más adecuado para el formulario (GET o POST) y cualquier otro atributo necesario.
  2. La aplicación que se encarga de procesar el formulario se encuentra en la raíz del servidor, carpeta "php" y archivo "insertar_cv.php" .
  3. El nombre puede tener 30 caracteres como máximo, los apellidos 80 caracteres y la contraseña 10 caracteres como máximo.
  4. Asignar los atributos adecuados al campo del DNI.
  5. Por defecto, debe estar marcada la casilla de suscripción al boletín de novedades.

14.7.2 Ejercicio 15

Determinar el código HTML necesario para crear el formulario que se muestra en la siguiente imagen:

Formulario con controles de tipo lista desplegable

Figura 14.16 Formulario con controles de tipo lista desplegable

14.7.3 Ejercicio 16

Determinar el código HTML necesario para crear el formulario que se muestra en la siguiente imagen:

Formulario complejo

Figura 14.17 Formulario complejo

14.8 Ejercicio final

Determinar el código HTML necesario para crear las siguientes páginas, utilizando el máximo de atributos posibles que añadan semántica al contenido. Crear así mismo, la estructura de directorios necesaria para almacenar imágenes (comunes y de post), hojas de estilos, scripts y los propios documentos HTML.

Portada del blog

Figura 14.18 Portada del blog

Vista del post

Figura 14.19 Vista del post