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.

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

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="https://www.101computing.net">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: 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.