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

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í están presentes en el código fuente:

Resultado: www.ejemplos-de-abrirllave.com/html/comentarios.html

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

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

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”.

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

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”.

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

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.

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”.

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:

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:

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;

}

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:

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

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:

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).