Introduction to Hyperlinks

Understanding the difference between absolute and relative hyperlinks, and adding hyperlinks to sample web pages.

Learning Goals

At the end of this Tutorial, you will be able to:

  • Recognise the structure of a hyperlink.
  • Understand the difference between absolute and relative hyperlinks.
  • Add hyperlinks to sample web pages.

You can view the finished version of the sample web page to which you will add hyperlinks in this Tutorial by clicking the link below. The finished sample will each open in a new tab of your web browser.

Uploading your files to GitHub

After finishing your web page, you are now ready to upload it to your account on GitHub.

  1. Open a new tab in your web browser and go to If you are not already signed in to your GitHub account, sign in now. github-signin
  2. On your GitHub home page, click the ‘repo’ that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub. github-signin
  3. On the next GitHub screen displayed, click the portfolio folder.
  4. Now click the van-gogh folder to display it.
  5. With your portfolio/van-gogh folder displayed on GitHub, click Add file button. github-upload-portfolio
  6. From the dropdown list displayed, choose the option Upload files. Project Animation Google Fonts
  7. In File Explorer (Windows 10) or Finder (Apple Mac), drag-and-drop the index.html file from your portfolio/van-gogh to upload it to the portfolio/van-gogh folder within your repository on GitHub. Introduction to HTML
  8. Scroll down to the bottom of the GitHub screen, and accept or edit the short message (Add files via upload) in the Commit changes box.
  9. Finally, click the green Commit changes button to upload your files. Project Animation Google Fonts

Your updated web page is now published on GitHub at a web address similar to the following:

or simply:

It may take a few minutes for your uploaded file to appear on GitHub.