All Tutorials  >

Introduction to Hyperlinks

Learning Goals

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

You can view finished versions of the two sample web pages to which you will add hyperlinks in this Tutorial by clicking the links below. The finished samples will each open in a new tab of your web browser.

Sample image page-5.html
Sample image page-10.html

Contents

About hyperlinks

Hyperlinks: same or different website?

Hyperlinks with absolute URLs

Hyperlinks with relative URLs

Hyperlinks: same or new web browser tab?

New page, same browser tab

New page, new browser tab

Preventing web page hijacking

Preparing your sample web page

Adding hyperlinks to a sample web page

Adding hyperlinks to a second sample web page

Uploading your files to GitHub

Further resources

Preparing your sample web page

In this section, you will work with the sample page-5.html web page and style-5.css stylesheet in your websites folder.

You created this web page and stylesheet in the Introduction to Images Tutorial and updated it in the Working with Google Fonts Tutorial.

  1. In Visual Studio Code, open the following two files:   page-5.html
    style-5.css
  2. Your first task is to make the web page responsive by using media queries and fluid font sizes.   At the top of the page-5.css stylesheet, replace the current web browser resets by copying-and-pasting the following:
    /*  ============= WEB BROWSER RESETS ============ */
    * { margin: 0; padding: 0; border: none }
    html { height: 100% }
    body { min-height: 100%; max-width: 1600px; margin-left: auto; margin-right: auto }  
    img { width: 100%; height: auto; display: block }
    
  3. Under the web browser resets, replace the current body styles with the following:
    /* ========== PAGE CONTAINER ========= */
    
    /* All screen sizes */
     body { background-color: #FFFFBD }
    
    /* Desktops */
    @media (min-width: 768px) { body { padding: 4% 20% } }
    
    /* Mobiles */
    @media (max-width: 767px) { body { padding: 11% 9% } }
    Next, you will update the font sizes of the web page content.
  4. For the h1 main heading selector, update the font-size property from the fixed value of 84px by copying-and-pasting this fluid value:
      font-size: calc(44px + (84 - 44) * ((100vw - 320px) / (1600 - 320)));
    
  5. For the h2 sub-heading selector used to style the introduction text, update the font-size property from the fixed value of 26px by copying-and-pasting this fluid value:
      font-size: calc(20px + (26 - 20) * ((100vw - 320px) / (1600 - 320)));
    
  6. For the h3 sub-heading selector, update the font-size property from the fixed value of 42px by copying-and-pasting this fluid value:
      font-size: calc(26px + (42 - 26) * ((100vw - 320px) / (1600 - 320)));
    
  7. And for the text paragraphs styled with the p selector, update the font-size property from the fixed value of 22px by copying-and-pasting this fluid value:
      font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1600 - 320)));
    
  8. Save the page-5.css stylesheet and view the page-5.html web page in your browser on both desktop/laptop and mobile-sized screens.
Tutorial RWD: Media Queries

Click page-5.html (before hyperlinks added) to view a finished sample of this updated and responsive web page in a new tab of your web browser.

Uploading your files to GitHub

Upload the following web pages and stylesheet to your account on GitHub:

page-5.html
style-5.css
page-10.html

Your web pages will be published at web addresses similar to the following:

https://username.github.io/page-5.html
https://username.github.io/page-10.html

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

Further resources

HTML links
From W3 Schools

Links and Images
From Interneting is Hard

Creating hyperlinks
From the Mozilla Developer Network

Video: How to create links in HTML
By Multimedia Tutorials

Video: Linking your web pages together
By Gaute Michel Ferstad


Return to All Tutorials.