In this blog post we are going to help Elian save his favourite cake recipe as a web page. Elian has already typed all the instructions for his lemon drizzle cake recipe but needs your help to format how the text appears on the page. To help him improve the look and feel of his page you will need to complete the six tasks listed below.
But first let’s look at Elian’s HTML page so far:
To edit Elian’s code, you will need to click on the “Edit on codepen” button in the top right corner above.
Task 1: Headings and Paragraphs
In order to give this page more structure we are going to add some headings, subheadings and paragraphs. We will do so using the following HTML tags:
Your task is to update Elian’s code by adding some <h1> tags for the main heading:
- Lemon Drizzle Cake Recipe
And some <h2> tags for the subheading of the page:
- About the Recipe:
- Recipe for the cake:
- Recipe for the lemon drizzle:
- Finding more recipes online:
All other pieces of text should be displayed as paragraphs using <p> tags.
Bullet Points Lists
In HTML, you can create a list of bullet points using both <ul> tags and <li> tags as follows.
<li>First Bullet point!</li>
<li>Second Bullet point!</li>
<li>Third Bullet point!</li>
Your task consist of displaying all the ingredients using bullet points so that it appears on the web page as follows:
- 225g unsalted butter
- 180g caster sugar
- 4 eggs
- 225g self-raising flour
- 1 lemon, zested
- 2 lemons, juiced
- 65g caster sugar
You can also use a similar approach to create a numbered list as opposed to a bullet point list. To do so, use an <ol> tag instead of the <ul> tag. You can for instance display the steps of the recipe using a numbered list:
- Pre-heat the oven to 180°C.
- Beat together the butter and caster sugar until creamy, then add the eggs, one at a time, slowly mixing through.
- Sift in the self-raising flour, then add the lemon zest and mix until well combined.
- Line a loaf tin (8 x 21cm) with greaseproof paper, then pour in the mixture and level the top with a spoon.
- Bake for 45 to 50 minutes.
We are now going to change the text colour using the <font> tag.
For instance to make text appear in orange we can use the following code:
<font color="orange">This text will appear in orange!</font>
Notice the American spelling for the attribute “color” inside the font tag!
Your task is to use several <font> tags to make the information such as preparation time, cooking time, level of difficulty and number of servings standout on the page using the colours of your choice.
Centred ,Bold, Italic and Underlined Text
You can use the <center>, <b>, <i> and <u> tags to make text appear in the centre, in bold, in italic or underlined.
<center>This text will appear in the centre!</center>
<b>This text will appear in bold!</b>
<i>This text will appear in italic!</i>
<u>This text will appear underlined!</u>
To add a hyperlink, you will need to use the <a> tag as follows:
<a href="https://www.101computing.net">Visit our computing blog!</a>
Now that you know how to use the basic HTML tags needed to create a web page, add some more content to this webpage:
- Add a section called “Tip of the day” (as a Heading 2). Add a paragraph to this section with the following text:
- Find some other recipes online and create hyperlinks to these pages.