Web Design

Hyperlinks

Learn It

  • Create a second web page just like what you have done with the web page index.html. If you forgot how to do it, just go back and follow the instructions. Save your second page as mySecondPage.html inside the same folder as your index.html.
  • This is my second page. Yours may be different:

page-2.png

  • You should now have two html files in your folder:

folder-2.png

  • We add a hyperlink on the body of our first web page to link it to our second web page.
  • Type a line like the following in your first web page:
<a href="mySecondWebPage.html">Click here to see many photos when Jack growing up!</a>
  • 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.
  • The new line for the link must be placed somewhere inside the body pairs.
<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>
  • After you added the hyperlink in your index.html file, save it. 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.

page-3.png

  • Test if the hyperlink works by clicking on it. You know it is working if your second page opens up in a browser window.
  • 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.

Badge It

  • 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.
    • Upload both HTML files to BourneToLearn.com for marking.
  • Silver: Create a working hyperlink.
  • Gold: Make both pages link to one another
  • Platinum: Complete all the above tasks, AND change the font on the page to 'Arial'.

Validate