Working with Hyperlinks

About hyperlinks

Hyperlinks, or more simply links, enable users to click or tap their way from one section of a web page to another, from one web page to another web page, and from one website to another website.

Hyperlinks typically have the following format:

 <p>To learn more, please click <a href="webpage.html">here</a>.</p>

The above code would produce the following result.

This is an example of a hyperlink placed around an item of text. Hyperlinks can also be placed around an image, as shown below.

 <p>Please click on the picture of a cat below.</p>

 <a href="webpage.html"><img src="cat.jpg" alt="cat"></a>

This second example would produce the following result.

The general format of a hyperlink in HTML is as shown below.

A hyperlink begins and ends with the a (for ‘anchor’) tag. After the opening a tag comes the href attribute that is followed by an equal to sign (=). The href value holds, within quotation marks, the link destination – that is, the location to where the user will be taken when they click or tap on the link.

Hyperlink destinations

One way of looking at hyperlinks is to ask: what is the destination of the link? Where will it send the user to?

Different website, same web browser tab

In the example below, the linked-to web page is on another, different web site. The new page replaces the current web page in the user’s web browser tab.

 <a href="https://www.ibat.ie/courses/web-design-diploma-course.html">IBAT Web Design Course</a>

Different website, same web browser tab

In this second example, the linked-to web page opens in a new tab of the user’s web browser. The original page is still displayed in a web browser tab.

 <a href="https://www.ibat.ie/courses/web-design-diploma-course.html" target="_blank" rel="noopener">IBAT Web Design Course</a>

The target="_blank" attribute forces the new page to open in a new tab. The rel="noopener" attribute is a security feature designed to prevent exploitation by malicious websites.

Within the opening <a> hyperlink tag, you can place the three attributes in any order. All three examples below are valid.

Same website, different web page

The above two examples are known as absolute hyperlinks. In each case, the destination contains the full web address beginning with ‘https://’.

When a hyperlink takes a user to a location of the same website, you do not need to include the ‘https://’ as part of the destination. It is enough to specify only:

• The name of the web page, such as services.html or privacy-statement.html.
• If required, the name of the folder that contains the web page.   For example, products/shoes.html or services/financial/insurance.html

These are called relative hyperlinks.

For example, the relative hyperlink below will take the user to a different page within the same folder of the same website.

 <p>Read about our <a href="about-us.html">team members</a>.</p>

You will commonly see relative hyperlinks used in navigation menus that provide users with access to the various pages of a website.

Same web page, different section

In the final case, a hyperlink can take a user to a different location within the same web page. This is known as an internal hyperlink.

In the sample code below, the user is taken to the section of the same web page that has an id of #summary.

 <p>Read the report <a href="#summary">summary</a>.</p>

 ...

 <h3 id="summary">Summary</h3>

Note that there are two parts to an internal hyperlink:

• The hyperlink: This has as its destination text beginning with a hash symbol (#).
• The named anchor: The destination within the linked-to web page is identified with an ID selector that is unique within the destination web page.

In the example below, you can see a table of contents with hyperlinks to five sections located further down the web page.

And below are the sections of the web page to which the internal hyperlinks take the user. Note that each has a unique ID as part of its opening <h2> sub-heading tag.

The four hyperlink states

Hyperlinks have four possible states. They are as follows:

• Unvisited: The link has not been clicked (desktop/laptop display) or tapped (tablet/mobile display) by the user.   By default, web browsers display unvisited hyperlinks in the colour blue.
• Visited: The link has been previously clicked/tapped by the user.   By default, web browsers display visited hyperlinks in the colour purple.
• Hover: The user is hovering the mouse over the link (desktop and laptop screens only).   By default, web browsers display hovered-over links in blue (in not previously visited) and purple (if visited before by the user).
• Active: The link is currently been clicked/tapped by the user.   By default, web browsers show active hyperlinks in the colour red.

Note that, by default, all four hyperlink states are highlighted with an underline. Web browsers achieve this effect by automatically assigning the following CSS rule:

  a:link, a:visited, a:hover, a:active { text-decoration: underline }

Except for the special cases of hyperlinks in menus and as buttons, it is good practice to underline the visited and unvisited states of hyperlinks within blocks of text.

You can use CSS rules to control the appearance of hyperlinks. In most cases, it is enough to style the links for just two cases:

• Visited and unvisited links. For example:

  
    a:link, a:visited { color: blue }
  

• Hovered-over and active links. For example:

  
    a:hover, a:active { text-decoration: darkblue }
  

Your two work files: base-8.html and base-8.css

In this Tutorial you will work with these two files:

• The web page named base-8.html. This is a copy of the base-7.html file from the previous Tutorial.
• The stylesheet named base-8.css. This is a copy of the base-7.css file, also from the previous Tutorial.

First, let’s edit the HTML file from your previous Tutorial:

1. In your text editor, open the file named base-7.html.
2. In the <head> of the base-7.html file, change the title as follows:  

   
   <title>Responsive web page with hyperlinks</title>
   

3. Also in the <head>, change the description as follows:  

   
   <meta name="description" content="A sample responsive web page with examples of hyperlinks.">
   

4. Also in <head>, change the stylesheet link as follows:  

   	
     <link rel="stylesheet" href="base-8.css">
   

5. Use the File | Save As command to save your HTML file with the following new name:   base-8.html
6. Switch to the base-7.css file, and use the File | Save As command to save the file with this new name:   base-8.css

You are now ready to work with your new web page (base-8.html) and stylesheet (base-8.css).

Using internal hyperlinks for page navigation

Let᾿s begin by creating a 'table of contents' that will help users navigate through a single web page.

1. In your text editor, open the base-8.html web page.
2. Before the first <h2> sub-heading, add the following new text:

   
   <h1>Heading 1</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in ipsum at risus feugiat facilisis at et orci.</p>
   
   <h3>Contents</h3>
   <ul>
     <li>Section One</li>
     <li>Section Two</li>
     <li>Section Three</li>
   </ul>
   

3. Next, add internal hyperlinks as follows: Save the web page and view it in your web browser. You can see the three items in the bulleted list look like hyperlinks – but they are not clickable. They do not lead anywhere.   That is because the three link destinations do not yet exist. Let’s add these now.
4. Add three named anchor destinations to the three <h3> sub-headings in the web page as shown below. Save the web page and view it in your web browser. The three links in the 'table of contents' should now work correctly.
5. You can see that, when clicked, the links 'jump' quickly to their respective destinations further down the web page. To change this to a so-called smooth-scrolling effect, switch to the base-8.css stylesheet, and add this new rule to the resets section at the top of the CSS file.

   
     html { scroll-behavior: smooth }
   

6. Save the stylesheet and verify that the scroll effect work correctly.
7. Let’s add one further internal hyperlink. At the very top of the web page, add the following named anchor to the opening <body> tag.

   
     <body id="top-of-page">
   

8. At the very end of the page, just before the closing </body> tag, add the following internal hyperlink.

   
     <p><a href="#top-of-page">Return to top of page</a></p>
   

9. Save your web page and verify the link works correctly.

Styling hyperlinks

In this next section of the Tutorial, you will apply some CSS styles to a hyperlink that is positioned within a block of paragraph text.

1. In your text editor, open the base-8.html web page.
2. In the paragraph text under the first <h2> sub-heading, add a hyperlink as shown below.

   
     <h2>Heading 2</h2>
     <p>Donec ut leo eget risus mattis mattis non vitae massa. <a href="https://www.ibat.ie">Suspendisse potenti</a>. Aenean efficitur fermentum orci ac blandit. Quisque tempus tincidunt metus at interdum. Aenean elementum vehicula tellus id gravida. Aenean mollis sollicitudin elit.</p>
   

3. Save the web page and view the result in your web browser. Verify that the hyperlink works correctly.
4. Next, you will create a new class for the styled hyperlink and name it 'fancy-link.' In your base-8.html file, edit the hyperlink as follows:

   
     <a href="https://www.ibat.ie" class="fancy-link">Suspendisse potenti</a>.
   

   Alternatvively, you could position the class attribute before instead of after the href attribute, as shown below. The order does not matter.

   
     <a class="fancy-link" href="https://www.ibat.ie">Suspendisse potenti</a>.
   

5. In your text editor, switch to your base-8.css stylesheet. Before the /* ==== TEXT BOXES ==== */ section, add the following new CSS class, with CSS properties and values for all four possible states of the hyperlink.

   
   /* ==== HYPERLINKS ==== */
   
   a.fancy-link:link,
   a.fancy-link:visited,
   a.fancy-link:hover,
   a.fancy-link:active { 
       text-decoration: none;
       color: inherit;
       border-bottom-style: solid;
       border-bottom-width: 2px;
       padding-bottom: 2px;
   }
   

   Save both your stylesheet and web page, and view the result in your web browser. It should look as shown below.

   Note the following:

   • The text-decoration: none rule removes the default underline from the hyperlink.
   • The color:inherit rule replaces the default hyperlink colour(s) with the colour of the surrounding text paragraph.
   • In place of the default underline, the two bottom-border rules add a solid, 2-pixel thick border under the hyperlink.
   • The padding-bottom value adds some vertical space between the hyperlinked text and the bottom border of the button.
6. The final step is to add some colours to the hyperlink: one colour for the 'link' and 'visited' states, and a second colour for the 'hover' and 'active' states.

   
     a.fancy-link:link,
     a.fancy-link:visited { border-bottom-color: blue}
     a.fancy-link:hover,
     a.fancy-link:active { color: red; border-bottom-color: red }
   

7. Save your stylesheet and view the result in your web browser. It should look as shown below.

Hyperlinks styled as buttons

Links can be styled to look like 'click/tap me' buttons. Such links are styled differently to links within paragraphs of text.

• They do not have underlines.

• They have padding all around them to create the button appearance.
• They have bottom margins to push down whatever content follows them, and often top, left and right margins too.
• They have borders and, typically, background colours too.
• Their corners can be square, rounded or semi-circular.
• Their CSS class names typically begin with 'btn'. For example, btn-solid, btn-rounded or btn-ghost.

1. In your text editor, open the base-8.html file, and, under the 'table of contents' near the top of the page, add the following three new hyperlinks. Each hyperlink has a class named 'btn'.

   
     <a class="btn" href="https://www.ibat.ie">Join Now</a>
     <a class="btn" href="https://www.ibat.ie">Sign Up</a>
     <a class="btn" href="https://www.ibat.ie">Special Offer</a>
   

2. Switch to your base-8.css stylesheet file. Add the following new class after the a.fancy-link class.

   
    a.btn:link, .btn:visited, a.btn:hover, a.btn:active { 
       text-decoration: none;
       color: inherit;
       border-style: solid;
       border-width: 2px;
       padding: 12px 24px;
       display: inline-block;
       margin: 20px 40px 20px 0;
       text-transform: uppercase;
       font-weight: bold;
       font-family: sans-serif;
       letter-spacing: 1px
       line-height: 1
    }
   

   This btn class creates the basic structure of the button-styled hyperlink. Save your base-8.html and base-8.css files and view the web page on your web browser. The three hyperlinks should look as shown below.

In the next parts of this Tutorial, you will add some colours and shapes to these styled-as-a-button hyperlinks.

Hyperlinks styled as solid buttons

In the following steps you will create a class in CSS for styling hyperlinks as buttons with a solid background.

1. In your text editor, open the base-8.html web page. Add the following new class named btn-solid to the three hyperlinks.

   
     <a class="btn btn-solid" href="https://www.ibat.ie">Join Now</a>
     <a class="btn btn-solid" href="https://www.ibat.ie">Sign Up</a>
     <a class="btn btn-solid" href="https://www.ibat.ie">Special Offer</a>
   

2. Switch to the base-8.css stylesheet and add the following rules for the new CSS btn-solid class.

   
   a.btn-solid:link, .btn-solid:visited {
       border-color: blue;
       background-color: blue;
       color: #fff
   } 
   
   a.btn-solid:hover, .btn-solid:active {
       border-color: green;
       background-color: green;
       color: #fff
   }
   

   Save your base-8.html and base-8.css files, and view the

Styling hyperlinks as buttons with transparent backgrounds

In the following steps you will create a class in CSS for styling hyperlinks as buttons with a transparent background. Such buttons are known as ‘ghost buttons‘.

1. In your text editor, open the base-8.html web page. Copy-and-paste the three styled hyperlinks as shown below. Enter a blank paragraph to separate the top three hyperlinks from the lower three.

   
     <a class="btn btn-solid" href="https://www.ibat.ie">Join Now</a>
     <a class="btn btn-solid" href="https://www.ibat.ie">Sign Up</a>
     <a class="btn btn-solid" href="https://www.ibat.ie">Special Offer</a>
   
     <p>&nsbp;</p>
   
     <a class="btn btn-solid" href="https://www.ibat.ie">Join Now</a>
     <a class="btn btn-solid" href="https://www.ibat.ie">Sign Up</a>
     <a class="btn btn-solid" href="https://www.ibat.ie">Special Offer</a>
   

2. For the second group of three hyperlinks, rename the class btn-solid to btn-ghost as shown below.

   
     <a class="btn btn-ghost" href="https://www.ibat.ie">Join Now</a>
     <a class="btn btn-ghost" href="https://www.ibat.ie">Sign Up</a>
     <a class="btn btn-ghost" href="https://www.ibat.ie">Special Offer</a>
   

3. Switch to the base-8.css stylesheet and add the following rules for the new btn-ghost CSS class.

   
   a.btn-ghost:link, .btn-ghost:visited {
       border-color: blue;
       background-color: transparent;
       color: blue
   } 
   
   a.btn-ghost:hover, .btn-ghost:active {
       border-color: green;
       background-color: transparent;
       color: green
   }
   

   Save your base-8.html and base-8.css files, and view the web page in your web browser. The three hyperlinks styled as ghost buttons should look as shown below.

Styling button shapes

In the following steps you create two new classes in CSS to control the shape of hyperlinks styled as buttons.

1. In your text editor, open the base-8.html web page. To the second and third buttons in the top and bottom groups of three hyperlinks, add the new classes of btn-soft and btn-round as shown below.

   
     <a class="btn btn-solid" href="https://www.ibat.ie">Join Now</a>
     <a class="btn btn-solid btn-soft" href="https://www.ibat.ie">Sign Up</a>
     <a class="btn btn-solid btn-round" href="https://www.ibat.ie">Special Offer</a>
   
     <p>&nsbp;</p>
   
     <a class="btn btn-ghost" href="https://www.ibat.ie">Join Now</a>
     <a class="btn btn-ghost btn-soft" href="https://www.ibat.ie">Sign Up</a>
     <a class="btn btn-ghost btn-round" href="https://www.ibat.ie">Special Offer</a>
   

2. Switch to the base-8.css stylesheet and add the following rules for the new btn-softand btn-round CSS classes.

   
     a.btn-soft { border-radius: 5px }
     a.btn-round { border-radius: 25px }
   

   Save your base-8.html and base-8.css files, and view the web page in your web browser. The hyperlinks styled with soft and round edges should look as shown below.

Adding icons with Font Awesome

In the final part of this Tutorial, you will add some icons from Font Awesome to the hyperlinks styled as buttons. You will use version 4 of Font Awesome, rather than the more recent version 5.

1. In your text editor, open the base-8.html file and in the <head> section add the following new line just after the link to your base-8.css stylesheet.

   
   <link href="base-8.css" rel="stylesheet">
   
   <!-- Link to icons for Font Awesome 5 -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
   

   This new line adds the Font Awesome stylesheet to your web page.
2. Use your web browser to go to this web address:   https://fontawesome.com/
3. Click on the menu option named Icons. On the next page displayed you use the Search box to locate icons by name from the Font Awesome range of over 600 free icons.
4. In the Search box, enter the word:   user   and click the result displayed below.
5. On the next screen displayed, you can see the code to generate the 'user' icon. Drag across the code to select it and then copy it.
6. In your text editor, open your base-8.html file. Within the first hyperlink on the top line, paste the Font Awesome code for 'user' as shown below.

   
   <a class="btn btn-solid" href="https://www.ibat.ie"><i class="fas fa-user"></i> Join Now</a>
   

   Save the base-8.html file and view the web page in your web browser. You can see that there is only a small space between the user icon and the text 'JOIN NOW'. To increase the spacing, replace the single white space character with two non-breaking space characters as shown below. Here is the final code for the 'JOIN NOW' button.

   
   <a class="btn btn-solid" href="https://www.ibat.ie"><i class="fas fa-user" ></i>&nbsp;&nbsp;Join Now</a>
   

7. Update the second and third hyperlink buttons as follows.

   
   <a class="btn btn-solid btn-soft" href="https://www.ibat.ie"><i class="fas fa-sign-in-alt" ></i>&nbsp;&nbsp;Sign In</a>
   <a class="btn btn-solid btn-round" href="https://www.ibat.ie"><i class="far fa-credit-card" ></i>&nbsp;&nbsp;Special Offer</a>
   

   Save the base-8.html file and view the web page in your web browser. The top three hyperlink buttons should now look as shown below.
8. Update the three hyperlink buttons in the second row as follows.

   
   <a class="btn btn-ghost" href="https://www.ibat.ie">Join Now&nbsp;&nbsp;<i class="fas fa-arrow-right"></i></a>
   <a class="btn btn-ghost btn-soft" href="https://www.ibat.ie">Sign In&nbsp;&nbsp;<i class="fas fa-arrow-circle-right" ></i></a>
   <a class="btn btn-ghost btn-round" href="https://www.ibat.ie">Special Offer&nbsp;&nbsp;<i class="far fa-credit-card" ></i></a>
   

   Save the base-8.html file and view the web page in your web browser. The bottom three hyperlink buttons should now look as shown below.

Updating the <head> of your web page

Before you validate your web page and upload it to GitHub, ensure the following details are correct within the <head> of your base-8.html file.

• You have replaced the name ‘Mary Smith’ with your own name.
• You have replaced the sample Google Tracking ID with your own Google Tracking ID. The instructions for viewing your website’s unique Google Tracking ID are here.

Validating your web page

To check the HTML in your web page is correct or valid, use the official W3C Markup Validation Service as follows.

1. Go to this web page: https://validator.w3.org.
2. Click the Validate by Direct Input tab.
3. Select your entire HTML file (both <head> and <body>), and copy-and-paste it into the box named Enter the Markup to validate.
4. Click the Check button.
5. If you see any errors, return to your base-8.html file in your text editor, fix the errors, save the file, and copy-and-paste the entire file again.  In the HTML Validator, click the Back button of your web browser to again display the Validate by Direct Input tab. Click once in the tab and paste in your corrected HTML file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Validating your stylesheet

To check your CSS is correct, use the official W3C CSS Validation Service. Follow these steps.

1. Go to this web page: https://jigsaw.w3.org/css-validator.
2. Click the By direct input tab.
3. Copy and paste your CSS file into the box named Enter the CSS you would like validated.
4. Click the Check button.
5. If you see any errors (other than those related to the fluid typographic equation, as shown below), return to your base-8.css file in your text editor, fix the errors, save the file, and copy the entire file again.
6. In the CSS Validator, click the Back button of your web browser to again display the By direct input tab. Click once in the tab and paste in your corrected CSS file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.