HTML 9..17

Da estructura HTML al texto de la receta de hummus. Distingue su título, los párrafos y las secciones de ingredientes, preparación y conservación.

Texto de partida

Quick hummus recipe

This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.

Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.

Ingredients
1 can (400g) of chick peas (garbanzo beans)
175g of tahini
6 sundried tomatoes
Half a red pepper
A pinch of cayenne pepper
1 clove of garlic
A dash of olive oil

Instructions
Remove the skin from the garlic, and chop coarsely
Remove all the seeds and stalk from the pepper, and chop coarsely
Add all the ingredients into a food processor
Process all the ingredients into a paste.
If you want a coarse "chunky" hummus, process it for a short time.
If you want a smooth hummus, process it for a longer time.

For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.

Storage
Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.
Hummus is suitable for freezing; you should thaw it and use it within a couple of months.

Continúa sobre la receta anterior. Convierte las dos alternativas de procesado del hummus en una sublista dentro del paso correspondiente de la preparación:

• If you want a coarse "chunky" hummus, process it for a short time.
• If you want a smooth hummus, process it for a longer time.

Estructura con HTML el contenido de la captura. Distingue el título principal, los apartados The Llama y The Anaconda, y los párrafos de cada uno.

Estructura el contenido de la captura mediante una lista no ordenada de verduras y una lista ordenada con las instrucciones para abrir la puerta.

Marca el contenido con HTML según su estructura, importancia o énfasis. Reproduce las distinciones que se muestran en el texto de la captura.

Completa los dos enlaces de la página Information on Whales:

1. El primer enlace debe abrir whales.html, situado en el mismo directorio. Al pasar el puntero sobre él, debe aparecer un texto informativo que indique que la página incluye información sobre ballenas azules y ballenas blancas.
2. El segundo enlace debe abrir la aplicación de correo predeterminada con whales@example.com como destinatario.

Bonificación indicada en la diapositiva: configura también el asunto Preguntas sobre Ballenas.

Crea un menú sencillo de navegación con las páginas Home, Pictures, Projects y Social.

1. Añade una lista no ordenada con los nombres de las páginas.
2. Convierte cada nombre en un enlace a la página correspondiente.
3. Copia el menú en todas las páginas.
4. En cada página, conserva el nombre de la página actual, pero quita su enlace a sí misma.

Completa los cuatro enlaces para que se dirijan a estos destinos:

1. La imagen blue-whale.jpg, en una carpeta llamada blue dentro del directorio actual.
2. La imagen narwhal.jpg, en una carpeta llamada narwhal situada un nivel por encima del directorio actual.
3. La búsqueda de imágenes de Google del Reino Unido: la URL base es https://www.google.co.uk y el subdirectorio es imghp.
4. El párrafo situado al final de la página actual, cuyo identificador es bottom.

Crea los siguientes enlaces. Respeta los nombres de archivo, las carpetas, los destinatarios y los identificadores indicados.

1. Un enlace a guia.pdf, en la carpeta docs del directorio actual.
2. Un enlace a manual.zip, en la carpeta archivos del directorio actual.
3. Un enlace a foto.jpg que permita descargar el archivo al pulsarlo. Investiga el atributo HTML correspondiente.
4. Un enlace a la documentación de Mozilla en español: https://developer.mozilla.org/es.
5. Un enlace a un artículo de Wikipedia cuya URL incluya un parámetro de idioma.
6. Un enlace a la página de inicio de miweb.com que se abra en una pestaña nueva.
7. Un enlace que abra la aplicación de correo con info@empresa.com como destinatario.
8. Un enlace de correo a soporte@empresa.com con el asunto Problema Técnico.
9. Un enlace a la sección de esta misma página cuyo identificador es contact.
10. Un enlace al párrafo de esta misma página cuyo identificador es introduction.
11. Un enlace que lleve a la parte superior de la página. Investiga qué debe contener href.
12. Un enlace a index.html, situado un nivel de carpetas por encima del directorio actual.
13. Un enlace a notas.txt, situado dos niveles de carpetas por encima del directorio actual.

Reproduce en HTML el formulario Payment form de las capturas.

• Sección Contact information: grupo de opciones Ace, King y Queen; nombre, correo electrónico y contraseña.
• Sección Payment information: selector de tipo de tarjeta, número de tarjeta y fecha de caducidad con la indicación MM/YY.
• Identifica los campos obligatorios que aparecen marcados con un asterisco.
• Incluye las etiquetas de los campos y el botón Validate the payment.