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:

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:
 3. Cuatro párrafos con estilo

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;

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:

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:

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

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/

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".
 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.

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.

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 #000 12px
li

Se puede utilizar esta imagen

https://drive.google.com/file/d/104VKkAbPZIB7kQlvew6Wl0yDmPQn4fci/view?usp=sh
aring o cualquier otra.

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".
 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:

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. #000 12px

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

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:

https://drive.google.com/file/d/142okXmTNMEegQo_5UKctVZKXWzDkn3Ug/view?usp
=sharing o cualquier otra.

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:
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".

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;
}
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:
 Ejemplos-HTML

Ejemplo del Tutorial de HTML de Ejemplos-HTML

 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 Ejemplos-HTML" se puede descargar en
https://drive.google.com/file/d/1YgKzn3ehDM07YEe3CA7u3EKmmwIa3IML/view?u
sp=sharing

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: