2 – Hyperlinks

🎯 Learning Objectives

Developing Programming and Development (learning strand) skills, specifically:

  • Understand and be able to use tags to format data in a web page.
  • Understand that web pages are linked by hyper links.
  • Be able to create hyper links to external web sites as well as to local files, such as images and files
💬 Key Vocabulary

  • Hyperlink
  • href hypertext reference

📝 Code It

Step 1

  1. Create a second web page, follow the instructions in the previous lesson for the web page index.html.
  2. Save your second page as mySecondWebPage.html inside the same folder as your index.html.
  3. This is my second web page. Yours may be slightly different:

You should now have two html files in your folder:

Step 2

We will now add a hyperlink on the body of our first web page to link it to our second web page.

  1. Open the web page index.html.
  2. Type a line like the following in the body section below the </p> tags : 
<a href="mySecondWebPage.html">Click here to see many photos when Jack growing up!</a>

📖 Learn It

In between the <a> and </a> tags is where you put the hyperlinked text. A hyperlinked text when clicked will take you to another page. In this we want to go to our second web page.

The href is called an attribute. An attribute is used to give more information about a tag. In this case it tells the browser where our second page is. href stands for hypertext reference.

Below is an example of how your index.html will now look, you may have different wording.

<head>
<title>My Dog Jack</title>
</head>
<body>
<p>My dog Jack is a minature schnauzer. He is 8 months old.</p>
<a href="mySecondWebPage.html">Click here to see many photos when Jack growing up!</a>
</body>
</html>

📝 Code It

Step 3

  1. After you added the hyperlink in your index.html file, save it.
  2. Go to your folder, open the index.html file by either double clicking on it or right click then choose Open with a browser of your choice. You should see something similar to the image shown below.

3. Test if the hyperlink works by clicking on it. You know it is working if your second page opens up in a browser window.

4. After you added the hyperlink in your index.html file and have tested it successfully, try to add a hyperlink in your second web page that links to your first page independently first.

💬 Summary

In this lesson, you…

  • Understand and be able to use tags to format data in a web page.
  • Understand that web pages are linked by hyper links.
  • Be able to create hyper links to external web sites as well as to local files, such as images and files
In the next lesson, you will…

  • Understand that CSS is a model for formatting HTML web pages
  • Understand that CSS organises web contents in “boxes” – the box model
  • Be able to apply CSS box model to an element of a web page

🏅 Badge it

For this lesson’s assessment you are marking your own work. This will allow you see your own progress. This process is often used for online training programmes and is called the ‘honour’ or ‘trust system’. Obviously the key to these systems is being honest. Your teacher will randomly check some students work to moderate their marking.

🥈 Silver Badge

  • You have added a working hyperlink to the index.html page that links to the mySecondWebPage.html page.
🥇 Gold Badge

  • Develop a pair of web pages, called page1.html and page2.html
    • They should link to one another.
    • Include a link to two of your favourite websites.
🥉 Platinum Badge

  • Complete all the above tasks, AND change the font on the page to ‘Arial’.

Once you have done above tasks and tested they are working as intended, click here for the self assessment.