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:

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

---

<P>Paragraph</P>

---

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:
• Ingredients:
• 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.

Note that, within a paragraph, we can also force the text to go to the next line using the <br/> tag.
Watch Video Tutorial #1

Bullet Points Lists

In HTML, you can create a list of bullet points using both <ul> tags and <li> tags as follows.

<ul>
   <li>First Bullet point!</li>
   <li>Second Bullet point!</li>
   <li>Third Bullet point!</li>
</ul>

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:

1. Pre-heat the oven to 180°C.
2. Beat together the butter and caster sugar until creamy, then add the eggs, one at a time, slowly mixing through.
3. Sift in the self-raising flour, then add the lemon zest and mix until well combined.
4. Line a loaf tin (8 x 21cm) with greaseproof paper, then pour in the mixture and level the top with a spoon.
5. Bake for 45 to 50 minutes.

Watch Video Tutorial #2

Adding Colours!

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.
Watch Video Tutorial #3

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>

Adapt Elian’s code so that some of the key information from the recipe appear in bold or in italic.
Watch Video Tutorial #4

Adding hyperlinks

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>

You can now add a hyperlink to the last paragraph to point to the BBC Good Food website. The URL of the page is: https://www.bbcgoodfood.com/
Watch Video Tutorial #5

Your Turn

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:
“To find out is your cake can come out of the oven, insert a thin skewer or knife into the centre of the cake. Your skewer/knife should come out clean. If it doesn’t you will need to leave the cake to bake for a bit longer.”
• Find some other recipes online and create hyperlinks to these pages.