The colours of the rainbow (HTML task)

rainbowIn 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:

See the Pen
Rainbow Facts
by 101 Computing (@101Computing)
on CodePen.


To edit Asya’s code, you will need to click on the “Edit on codepen” button in the top right corner above.

Your Tasks


Task 1: HeadingsTask 2: Bullet pointsTask 3: ColoursTask 4: Formatting textTask 5: HyperlinksTask 6: Your turn

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:

<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 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:

All other pieces of text should be displayed as paragraphs using <p> tags.
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.

Your task consist of displaying the seven colours of the rainbow using bullet points so that it appears on the web page as follows:

  • Red,
  • Orange,
  • Yellow,
  • Green,
  • Blue,
  • Indigo,
  • Violet.
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 red we can use the following code:

Notice the American spelling for the attribute “color” inside the font tag!

Your task is to use several <font> tags to display each colour of the rainbow in its own colour.
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.

Adapt Asya’s code so that the myth “There’s a pot of gold at the rainbow’s end.” appears in the centre of the page, in bold, and in italic.
Watch Video Tutorial #4

Adding hyperlinks


To add a hyperlink, you will need to use the <a> tag as follows:

You can now add a hyperlink to the last paragraph to point to the wikipedia page about rainbows. The URL of the page is: https://en.wikipedia.org/wiki/Rainbow
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:

  • 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.
Share Button