Boletín 1 de Exercicios sobre HTML
Sumario
EJERCICIO 1
Crear el archivo "dos-parrafos.html" con un editor de texto y comprobar que se muestra correctamente en distintos navegadores. Por ejemplo, en Google Chrome:
EJERCICIO 2
Crear el archivo "comentarios.html" y comprobar que, aunque los comentarios escritos no se muestran en pantalla, sí están presentes en el código fuente.
EJERCICIO 3
Escribir el código de un documento HTML que al visualizarlo en pantalla se vea:
EJERCICIO 4
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:
EJERCICIO 5
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:
EJERCICIO 6
Crear el archivo "enlaces-favoritos.html":
En este caso, pinchando en "Facebook", "Instagram" y "Twitter", hay que abrir nuevas pestañas a los sitios web:
EJERCICIO 7
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).
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:
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:
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.
EJERCICIO 8
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 de texto | Tamaño |
|---|---|---|
| h1 | #333 | 20px |
| h2 | #666 | 16 px |
| p li |
#000 | 12 px |
EJERCICIO 9
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 de texto | Tamaño |
|---|---|---|
| h1 | #333 | 20px |
| h2 | #666 | 16 px |
| celdas cabeceras de la tabla | white | 12 px |
| enlace | blue | 12 px |
| párrafo elementos de la lista Datos, cuerpo y pie de tabla |
#000 | 12 px |
| Título de la tabla | #000 | 14 px |
Los colores de fondo de la tabla son:
| Partes de la tabla | Color de fondo |
|---|---|
| cabecera | #666 |
| cuerpo | #fff |
| pie | #ccc |
EJERCICIO 10
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:
Referencias
- Licencia Creative Commons Reconocimiento 4.0 Internacional (CC BY 4.0). Autor. [abrirllave.com https://www.abrirllave.com/]
