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>


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.

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

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

<font color="red">This text will appear in red!</font>

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.

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

<a href="">Visit our computing blog!</a>

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


The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area

Did you like this challenge?

Click on a star to rate it!

Average rating 3.1 / 5. Vote count: 132

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!