Enunciados de los ejercicios resueltos en el tutorial de HTML de "Abrirllave.com"

1. Ejercicios de HTML de “Abrirllave.com” 1 / 18
Ejercicios de HTML
{Abrirllave.com – Tutoriales de informática
Ejercicios resueltos del tutorial de HTML www.abrirllave.com/html/
(Este documento incluye enlaces a los apartados del tutorial y a las soluciones de los ejercicios en la Web)
1. Qué es HTML
2. Primer documento HTML
[ EJERCICIO 1 ] Crear primer documento HTML
3. Comentarios
[ EJERCICIO 2 ] Crear documento HTML con comentarios
4. Estilos
[ EJERCICIO 3 ] Cuatro párrafos con estilos
5. Párrafos
[ EJERCICIO 4 ] Datos y números
6. Formato de texto
[ EJERCICIO 5 ] Formatos de texto
7. Cabeceras
8. Enlaces
[ EJERCICIO 6 ] Enlaces favoritos
9. Listas
[ EJERCICIO 7 ] Listas de enlaces
10. Imágenes
[ EJERCICIO 8 ] Receta de patatas fritas
11. Tablas
[ EJERCICIO 9 ] Grupo de música (Queen)
12. Divisiones
[ EJERCICIO 10 ] Diseño fluido con dos columnas
13. Formularios
[ EJERCICIO 11 ] Notificar una incidencia

2. Ejercicios de HTML de “Abrirllave.com” 2 / 18
[ EJERCICIO 1 ] Crear primer documento HTML
Siguiendo las indicaciones dadas en el apartado “Primer documento HTML” crear el archivo “dos-parrafos.html” con
un editor de texto y comprobar que se muestra correctamente en distintos navegadores web (Google Chrome,
Internet Explorer, Mozilla Firefox...). Por ejemplo, en Google Chrome:
O, por ejemplo, en Mozilla Firefox:
Resultado: www.ejemplos-de-abrirllave.com/html/dos-parrafos.html

3. Ejercicios de HTML de “Abrirllave.com” 3 / 18
[ EJERCICIO 2 ] Crear documento HTML con comentarios
Crear el archivo “comentarios.html” visto en el apartado “Comentarios” y comprobar que, aunque los comentarios
escritos no se muestran en pantalla, sí están presentes en el código fuente:
Resultado: www.ejemplos-de-abrirllave.com/html/comentarios.html

4. Ejercicios de HTML de “Abrirllave.com” 4 / 18
[ EJERCICIO 3 ] Cuatro párrafos con estilos
Escribir el código de un documento HTML que al visualizarlo en pantalla se vea:
Para ello, escribir donde corresponda las siguientes declaraciones solamente una vez:
 background:aqua;
 background:silver;
 color:blue;
 color:red;
 font-family:verdana;
 font-size:20px;
 text-align:center;
 text-align:right;
Resultado: www.ejemplos-de-abrirllave.com/html/cuatro-parrafos-con-estilos.html
Solución: www.abrirllave.com/html/ejercicio-cuatro-parrafos-con-estilos.php

5. Ejercicios de HTML de “Abrirllave.com” 5 / 18
[ EJERCICIO 4 ] Datos y números
Haciendo uso de los elementos “p”, “pre”, “br” y “hr” vistos en el apartado “Párrafos”, escribir el código de un
documento HTML que al visualizarlo en un navegador web se muestre lo siguiente:
Resultado: www.ejemplos-de-abrirllave.com/html/datos-numeros.html
Solución: www.abrirllave.com/html/ejercicio-datos-y-numeros.php
[ EJERCICIO 5 ] Formatos de texto
Utilizando algunos de los elementos nombrados en el apartado “Formato de texto”, escribir el código HTML
necesario para ver lo siguiente en un navegador:
Resultado: www.ejemplos-de-abrirllave.com/html/formatos-de-texto.html
Solución: www.abrirllave.com/html/ejercicio-formatos-de-texto.php

6. Ejercicios de HTML de “Abrirllave.com” 6 / 18
[ EJERCICIO 6 ] Enlaces favoritos
Crear el archivo “enlaces-favoritos.html”:
Al pinchar en el enlace “Buscadores” se debe acceder (en la misma pestaña del navegador) al archivo siguiente:
En el documento “buscadores.html”, al pinchar sobre los enlaces “Bing”, “DuckDuckGo” y “Google”, hay que acceder
respectivamente a los siguientes sitios web en nuevas pestañas:
 http://www.bing.com/
 http://duckduckgo.com/
 http://www.google.com/
Y haciendo clic en el enlace “aquí”, se tiene que volver a la página “enlaces-favoritos.html”.

7. Ejercicios de HTML de “Abrirllave.com” 7 / 18
Por otra parte, al pinchar en el enlace “Redes sociales” se debe acceder (también en la misma pestaña del
navegador) al archivo siguiente:
En este caso, pinchando en “Facebook”, “Instagram” y “Twitter”, hay que abrir nuevas pestañas a los sitios web:
 http://www.facebook.com/
 http://www.instagram.com/
 http://www.twitter.com/
Resultado: www.ejemplos-de-abrirllave.com/html/enlaces-favoritos.html
Solución: www.abrirllave.com/html/ejercicio-enlaces-favoritos.php

8. Ejercicios de HTML de “Abrirllave.com” 8 / 18
[ EJERCICIO 7 ] Listas de enlaces
Crear el archivo “listas-de-enlaces.html”:
En dicho archivo se debe escribir la siguiente estructura de listas anidadas (fíjese que hay dos listas dentro de otra):
<ul>
<li>Buscadores
<ul>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>Redes sociales
<ul>
<li>...</li>
<li>...</li>
</ul>
</li>
</ul>
En el documento, al hacer clic sobre los enlaces “Bing”, “Google”, “Facebook” y “Twitter”, se accederá en nuevas
pestañas a las direcciones web siguientes:
 http://www.bing.com/
 http://www.google.com/
 http://www.facebook.com/
 http://www.twitter.com/
Además, hay que tener en cuenta las siguientes consideraciones:
 El texto de los enlaces no visitados –en este caso “Facebook” y “Twitter”– debe mostrarse de color rojo
(color:red;), y estar subrayado (la opción por defecto del navegador).
 Al pasar el puntero del ratón por encima del texto de un enlace que todavía no se haya visitado, el color
cambiará de rojo a verde (color:green;) y no se mostrará subrayado (text-decoration:none;).
En la imagen es el caso del enlace a “Google”.

9. Ejercicios de HTML de “Abrirllave.com” 9 / 18
 El texto de un enlace a un sitio web ya visitado se mostrará de color púrpura (color:purple;), como es
el caso del enlace a “Bing”.
 El texto de un enlace activo debe ser de color lima (color:lime;). Por ejemplo, véase en la siguiente
imagen que el enlace a “Twitter” está activo, es decir, se está haciendo clic sobre él:
A continuación, se muestra el código necesario para cumplir dichas consideraciones:
a:link {
color:red;
}
a:hover {
color:green;
text-decoration:none;
}
a:visited {
color:purple;
}
a:active {
color:lime;
}
También hay que cumplir las siguientes indicaciones:
 El tipo de letra utilizado en todo el documento es Verdana.
 El color de fondo de pantalla es amarillo (color:yellow;).
 El texto “Listas de enlaces” está escrito dentro de un elemento “h1” definido de color naranja
(color:orange;), tamaño 20px y centrado.
 Todos los textos contenidos en los elementos “li” de las listas, tienen un tamaño de 15px.
Resultado: www.ejemplos-de-abrirllave.com/html/listas-de-enlaces.html
Solución: www.abrirllave.com/html/ejercicio-listas-de-enlaces.php

10. Ejercicios de HTML de “Abrirllave.com” 10 / 18
[ EJERCICIO 8 ] Receta de patatas fritas
Dada la siguiente estructura de archivos y carpetas:
 C:/html/recetas-de-cocina/patatas-fritas.html
 C:/html/recetas-de-cocina/estilos.css
 C:/html/recetas-de-cocina/imagenes/patatas-fritas.jpg
Al visualizar el archivo “patatas-fritas.html” en un navegador web, se verá algo parecido a:
Escribir el código de los archivos “patatas-fritas.html” y “estilos.css”, teniendo en cuenta las siguientes indicaciones:
 Todos los estilos están especificados en el archivo “estilos.css”.
 El tipo de letra utilizado en todo el documento es Verdana.
 El tamaño de la imagen es 300 x 225 píxeles.

11. Ejercicios de HTML de “Abrirllave.com” 11 / 18
En la siguiente tabla se indican los colores y tamaños de los diferentes elementos que aparecen en la página web:
Elementos Color del texto Tamaño
h1 #333 20px
h2 #666 16px
p
li
#000 12px
Se puede utilizar esta imagen o cualquier otra.
Resultado: www.ejemplos-de-abrirllave.com/html/recetas-de-cocina/patatas-fritas.html
Solución: www.abrirllave.com/html/ejercicio-receta-de-patatas-fritas.php
[ Ampliación del ejercicio ]
En la carpeta “recetas-de-cocina” crear el archivo “index.html” que muestre un listado de enlaces a varias recetas de
cocina. Por ejemplo:
Crear por tanto los archivos “pollo-al-horno.html”, “quiche-de-bacon-y-jamon-york.html”, etc. Todos ellos deben
hacer uso del archivo “estilos.css”. Además, en cada receta de cocina, incluir un enlace al archivo “index.html” para
volver.
Todos los enlaces deben mostrarse de color azul y 12 píxeles.
Todas las imágenes deben estar en la carpeta “imagenes”.

12. Ejercicios de HTML de “Abrirllave.com” 12 / 18
[ EJERCICIO 9 ] Grupo de música (Queen)
Dada la siguiente estructura de archivos y carpetas:
 C:/html/grupos-de-musica/queen.html
 C:/html/grupos-de-musica/estilos.css
 C:/html/grupos-de-musica/imagenes/queen.jpg
Al ver el archivo “queen.html” en un navegador web, se verá algo similar a:

13. Ejercicios de HTML de “Abrirllave.com” 13 / 18
Escribir el código de los archivos “queen.html” y “estilos.css”, teniendo en cuenta las siguientes indicaciones:
 Todos los estilos están especificados en el archivo “estilos.css”.
 El tipo de letra utilizado en todo el documento es Verdana.
 El tamaño de la imagen es 400 x 200 píxeles.
 El borde de la tabla es de 1px y color negro.
 El espacio entre en contenido de las celdas de la tabla y su borde es 10px.
 El enlace al sitio web oficial de Queen debe abrirse en una pestaña nueva.
En la tabla siguiente se indican colores y tamaños de diferentes elementos mostrados en la página web:
Elementos Color del texto Tamaño
Cabecera h1 #333 20px
Cabeceras h2 #666 16px
Celdas cabecera de la tabla white 12px
Enlace blue 12px
Párrafo.
Elementos de la lista.
Datos del cuerpo y pie de la tabla.
#000 12px
Título de la tabla #000 14px
Los colores de fondo de la tabla son:
Partes de la tabla Color de fondo
Cabecera de la tabla #666
Cuerpo de la tabla #fff
Pie de la tabla #ccc
Se puede utilizar esta imagen o cualquier otra.
Resultado: www.ejemplos-de-abrirllave.com/html/grupos-de-musica/queen.html
Solución: www.abrirllave.com/html/ejercicio-grupo-de-musica-queen.php
[ Ampliación del ejercicio ]
En la carpeta “grupos-de-musica” crear el archivo “index.html” que muestre un listado de enlaces a varios grupos de
música. Por ejemplo:

14. Ejercicios de HTML de “Abrirllave.com” 14 / 18
Por consiguiente, crear también los archivos “coldplay.html”, “green-day.html”, etc. Todos ellos deben hacer uso
del archivo “estilos.css”. Además, en cada grupo de música, incluir un enlace al archivo “index.html” para volver.
Todas las imágenes de los grupos de música deben estar en la carpeta “imagenes”.
[ EJERCICIO 10 ] Diseño fluido con dos columnas
Dado el archivo “estilo-dos-columnas.css”, cuyo contenido es:
* {
margin:0;
padding:0;
}
a:link, a:visited, a:hover, a:active {
color:#cfc;
font-size:1em;
}
body {
background:#eed;
font-family:verdana;
}
h1 {
color:#00a;
font-size:1.8em;
padding-bottom:.5em;
}
img {
height:auto;
margin-bottom:.5em;
margin-top:.2em;
max-width:100%;
}
li {
margin-left:1.3em;
padding-bottom:.3em;
padding-right:.2em;
}

15. Ejercicios de HTML de “Abrirllave.com” 15 / 18
p {
font-size:1em;
padding-bottom:.5em;
}
#cabecera {
background-color:#000;
color:#f96;
padding:2%;
}
#columnas {
background-color:#ddd;
overflow:hidden;
padding-bottom:2%;
}
#contenedor {
margin:10px auto;
width:95%;
}
#contenido {
background-color:#ddd;
float:left;
margin-bottom:-32767px;
max-width:-moz-calc(92% - 120px);
max-width:-webkit-calc(92% - 120px);
max-width:calc(92% - 120px);
padding:2%;
padding-bottom:32767px;
width:71%;
}
#menu {
background-color:#999;
float:left;
margin-bottom:-32767px;
min-width: 120px;
padding:2%;
padding-bottom:32767px;
width:21%;
}
#pie {
background-color:#bbb;
clear:both;
color:#900;
padding:2%;
text-align:center;
}
Escribir el código de un documento HTML (“layout-fluido-con-dos-columnas.html”) asociado al archivo “estilo-dos-
columnas.css” para que al visualizarlo en un navegador web se vea:

16. Ejercicios de HTML de “Abrirllave.com” 16 / 18
 El valor del atributo href de los enlaces del menú debe ser: "#"
 En el pie, el enlace hacia el Tutorial de HTML tiene que abrirse en una nueva pestaña del navegador.
 La imagen del “logo de Abrirllave” se puede descargar aquí.
Resultado: www.ejemplos-de-abrirllave.com/html/layout-fluido-con-dos-columnas.html
Solución: www.abrirllave.com/html/ejercicio-layout-fluido-con-dos-columnas.php

17. Ejercicios de HTML de “Abrirllave.com” 17 / 18
[ EJERCICIO 11 ] Notificar una incidencia
Supóngase que Ana Sanz Tin es una empleada del departamento de marketing de una empresa y, a través de un
formulario web de la intranet de dicha empresa, quiere informar de que la impresora de su departamento ha dejado
de funcionar y muestra el siguiente mensaje:
 “El tóner de color amarillo está vacío.”
En un navegador web, el formulario tendrá un aspecto similar a:
Escribir el código del archivo “notificar-incidencia.html” teniendo en cuenta que:
 Los controles de la primera agrupación hay que etiquetarlos utilizando atributos for en elementos “label” y
asociándolos con atributos id.
 Los datos del formulario (usuario, departamento, etc.) se tienen que enviar a “procesar-incidencia.php”.
 En la empresa existen 3 departamentos: Informática, Marketing y Ventas.
 En la descripción de la incidencia se pueden escribir varias líneas de texto. No obstante, este control hay que
definirlo de 3 filas por 40 columnas.
 En la segunda agrupación del formulario hay dos botones, uno para resetear los datos introducidos y otro
para enviarlos.
Cuando Ana Sanz Tin rellene el formulario, en pantalla se podría ver:

18. Ejercicios de HTML de “Abrirllave.com” 18 / 18
Resultado: www.ejemplos-de-abrirllave.com/html/notificar-incidencia.html
Solución: www.abrirllave.com/html/ejercicio-notificar-una-incidencia.php
ACERCA DE LOS CONTENIDOS DE ESTE DOCUMENTO
Todos los contenidos de este documento forman parte del Tutorial de HTML de Abrirllave y están bajo la Licencia
Creative Commons Reconocimiento 4.0 Internacional (CC BY 4.0).