In this blog post we are going to help Asya complete her homework research task about rainbows. Asya has collated a range of interesting facts about rainbows and has decided to submit her work as an HTML page.
She has started her page but needs your help to format this page further using a range of HTML tags. To help her improve the look and feel of her page you will need to complete the six tasks listed below.
But first let’s look at Asya’s HTML page so far:
To edit Asya’s code, you will need to click on the “Edit on codepen” button in the top right corner above.
Task 1: Headings and Paragraphs
When creating an HTML, page it is good practice to include headings, eventually subheadings and paragraphs. We can do so using the following HTML tags:
Your task is to update Asya’s code by adding some <h1> tags for the main heading:
- Rainbow facts!
And some <h2> tags for the subheading of the page:
- Colours of the rainbow
- What Makes a Rainbow?
- Rainbow Myths
- Find out more:
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 the seven colours of the rainbow using bullet points so that it appears on the web page as follows:
We are now going to change the text colour using the <font> tag.
For instance to make text appear in red we can use the following code:
<font color="red">This text will appear in red!</font>
Notice the American spelling for the attribute “color” inside the font tag!
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:
- Find some cool facts about rainbows and add them to the existing sections or create a new sub-heading to add your new content.
- Find some other webpages about rainbows and create hyperlinks to these pages.