Lesson 4 - HYPERLINKS

LEARNING OUTCOMES

ASPIRE: To be able to design a navigation menu

CHALLENGE: To be able to create a hyperlink to another page

TASK 1: LINKING TO ANOTHER WEBSITE

Hyperlinks are found in nearly all web pages. Links allow users to click their way from page to page, or from website to website.

This is an example of a link

YOUR CHALLENGE

Use the Trinket given below and change the link from http://www.bbc.co.uk to http://www.google.com, so that when a user clicks the link, it takes them to the Google website.

Test out your linking skills below.

If you complete this quickly, experiment with creating another link below it to an appropriate website of your choice.

TASK 2: LINKING TO ANOTHER WEB PAGE

This time, because all the pages we are linking to are made by us, you do not need to include the http:// part. You can just use the page name. You will notice that there is more than one html file in this example.

An estate agent has made an advert for a house and would like people to be able to have a 'virtual tour'. She has only managed to make the link to the kitchen work so far. To fix this you will need to:

Create a link from index.html to all of the other pages
Create a link from kitchen.html to garden.html
Create a link from garden.html to livingroom.html

Extension Task: Add another room in the house. You will have to experiment with using the '+' button for this and adding a brand new html document.

TASK 3: CREATING A NAVIGATION MENU

This time, you need to add another three items to the navigation menu, so that all of the links work.

When you have finished your navigation menu, you will need to copy and paste it on to every page.

You might notice there is another file added here called style.css. Leave this alone for now, it is what makes the page look nicer! We will be looking at this in more detail later.

Extension:

Can you work out on the style.css file how to change the colour of the menu when you move your mouse over the buttons?

TASK 4: CREATING A MINI-WEBSITE

You are now going to create a new mini-website using Notepad. The website is only going to be three pages.

1. Create a new folder in Your Documents called 'Countries Website'

2. Create three basic webpages in that folder, as you did in Lesson 1. Use the code below for each of the pages. You will just need to change the page title for now:

You should have one page named index.html
You should have one page named spain.html
You should have one page named france.html

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

3. index.html is your home page, so create two links from there to Spain and France, using the skills you have just practiced.

4. Test your website (open index.html in Google Chrome).

Extension:

You have probably noticed that you cannot get back from Spain or France page.... Fix it by adding hyperlinks on these pages!

Now that you have created the pages, you are to make a mini-site with some information about the countries. You must include the following on each:

Country Flag
Population
Capital City
Currency

You might also want to make your homepage look nicer too! You could change the font color and sizes.

Report abuse