Ejercicios de HTML de Abrirllave.

com 1 / 18

Ejercicios de HTML
{Abrirllave.com Tutoriales de informtica

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 prrafos con estilos

5. Prrafos
[ EJERCICIO 4 ] Datos y nmeros

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. Imgenes
[ EJERCICIO 8 ] Receta de patatas fritas

11. Tablas
[ EJERCICIO 9 ] Grupo de msica (Queen)

12. Divisiones
[ EJERCICIO 10 ] Diseo fluido con dos columnas

13. Formularios
[ EJERCICIO 11 ] Notificar una incidencia
 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
 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 estn presentes en el cdigo fuente:

Resultado: www.ejemplos-de-abrirllave.com/html/comentarios.html
 Ejercicios de HTML de Abrirllave.com 4 / 18

[ EJERCICIO 3 ] Cuatro prrafos con estilos

Escribir el cdigo 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

Solucin: www.abrirllave.com/html/ejercicio-cuatro-parrafos-con-estilos.php
 Ejercicios de HTML de Abrirllave.com 5 / 18

[ EJERCICIO 4 ] Datos y nmeros

Haciendo uso de los elementos p, pre, br y hr vistos en el apartado Prrafos, escribir el cdigo 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

Solucin: 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 cdigo HTML
necesario para ver lo siguiente en un navegador:

Resultado: www.ejemplos-de-abrirllave.com/html/formatos-de-texto.html

Solucin: www.abrirllave.com/html/ejercicio-formatos-de-texto.php
 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 pestaa 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 pestaas:

http://www.bing.com/
http://duckduckgo.com/
http://www.google.com/

Y haciendo clic en el enlace aqu, se tiene que volver a la pgina enlaces-favoritos.html.

 Ejercicios de HTML de Abrirllave.com 7 / 18

Por otra parte, al pinchar en el enlace Redes sociales se debe acceder (tambin en la misma pestaa del
navegador) al archivo siguiente:

En este caso, pinchando en Facebook, Instagram y Twitter, hay que abrir nuevas pestaas 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

Solucin: www.abrirllave.com/html/ejercicio-enlaces-favoritos.php
 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 (fjese 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
pestaas a las direcciones web siguientes:
http://www.bing.com/
http://www.google.com/
http://www.facebook.com/
http://www.twitter.com/

Adems, 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 opcin por defecto del navegador).
Al pasar el puntero del ratn por encima del texto de un enlace que todava 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.
 Ejercicios de HTML de Abrirllave.com 9 / 18

El texto de un enlace a un sitio web ya visitado se mostrar de color prpura (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, vase en la siguiente
imagen que el enlace a Twitter est activo, es decir, se est haciendo clic sobre l:

A continuacin, se muestra el cdigo necesario para cumplir dichas consideraciones:

a:link {
color:red;
}
a:hover {
color:green;
text-decoration:none;
}
a:visited {
color:purple;
}
a:active {
color:lime;
}

Tambin 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;), tamao 20px y centrado.
Todos los textos contenidos en los elementos li de las listas, tienen un tamao de 15px.

Resultado: www.ejemplos-de-abrirllave.com/html/listas-de-enlaces.html

Solucin: www.abrirllave.com/html/ejercicio-listas-de-enlaces.php
 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 cdigo de los archivos patatas-fritas.html y estilos.css, teniendo en cuenta las siguientes indicaciones:
Todos los estilos estn especificados en el archivo estilos.css.
El tipo de letra utilizado en todo el documento es Verdana.
El tamao de la imagen es 300 x 225 pxeles.
 Ejercicios de HTML de Abrirllave.com 11 / 18

En la siguiente tabla se indican los colores y tamaos de los diferentes elementos que aparecen en la pgina web:

Elementos Color del texto Tamao

h1 #333 20px

h2 #666 16px

p #000 12px
li

Se puede utilizar esta imagen o cualquier otra.

Resultado: www.ejemplos-de-abrirllave.com/html/recetas-de-cocina/patatas-fritas.html

Solucin: www.abrirllave.com/html/ejercicio-receta-de-patatas-fritas.php

[ Ampliacin 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. Adems, en cada receta de cocina, incluir un enlace al archivo index.html para
volver.

Todos los enlaces deben mostrarse de color azul y 12 pxeles.

Todas las imgenes deben estar en la carpeta imagenes.

 Ejercicios de HTML de Abrirllave.com 12 / 18

[ EJERCICIO 9 ] Grupo de msica (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:

 Ejercicios de HTML de Abrirllave.com 13 / 18

Escribir el cdigo de los archivos queen.html y estilos.css, teniendo en cuenta las siguientes indicaciones:

Todos los estilos estn especificados en el archivo estilos.css.

El tipo de letra utilizado en todo el documento es Verdana.
El tamao de la imagen es 400 x 200 pxeles.
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 pestaa nueva.

En la tabla siguiente se indican colores y tamaos de diferentes elementos mostrados en la pgina web:

Elementos Color del texto Tamao

Cabecera h1 #333 20px

Cabeceras h2 #666 16px

Celdas cabecera de la tabla white 12px

Enlace blue 12px

Prrafo. #000 12px

Elementos de la lista.
Datos del cuerpo y pie de la tabla.

Ttulo 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

Solucin: www.abrirllave.com/html/ejercicio-grupo-de-musica-queen.php

[ Ampliacin del ejercicio ]

En la carpeta grupos-de-musica crear el archivo index.html que muestre un listado de enlaces a varios grupos de
msica. Por ejemplo:
 Ejercicios de HTML de Abrirllave.com 14 / 18

Por consiguiente, crear tambin los archivos coldplay.html, green-day.html, etc. Todos ellos deben hacer uso
del archivo estilos.css. Adems, en cada grupo de msica, incluir un enlace al archivo index.html para volver.

Todas las imgenes de los grupos de msica deben estar en la carpeta imagenes.

[ EJERCICIO 10 ] Diseo 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;
}
 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 cdigo 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:
 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 pestaa 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

Solucin: www.abrirllave.com/html/ejercicio-layout-fluido-con-dos-columnas.php
 Ejercicios de HTML de Abrirllave.com 17 / 18

[ EJERCICIO 11 ] Notificar una incidencia

Supngase que Ana Sanz Tin es una empleada del departamento de marketing de una empresa y, a travs 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 tner de color amarillo est vaco.

En un navegador web, el formulario tendr un aspecto similar a:

Escribir el cdigo del archivo notificar-incidencia.html teniendo en cuenta que:

Los controles de la primera agrupacin hay que etiquetarlos utilizando atributos for en elementos label y
asocindolos con atributos id.
Los datos del formulario (usuario, departamento, etc.) se tienen que enviar a procesar-incidencia.php.
En la empresa existen 3 departamentos: Informtica, Marketing y Ventas.
En la descripcin de la incidencia se pueden escribir varias lneas de texto. No obstante, este control hay que
definirlo de 3 filas por 40 columnas.
En la segunda agrupacin 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 podra ver:

 Ejercicios de HTML de Abrirllave.com 18 / 18

Resultado: www.ejemplos-de-abrirllave.com/html/notificar-incidencia.html

Solucin: 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 estn bajo la Licencia
Creative Commons Reconocimiento 4.0 Internacional (CC BY 4.0).