Tag Archives: links

Horizontal lists

This tutorial explains how to create horizontal lists and use list items as links in order to create a horizontal navigation bar. The result will look like the image below. You could then go and add some CSS styling to turn this into a nicely themed navigation bar.

Horizontal list with links.
Horizontal list with links.

Watch the video below (or click here to watch it on YouTube) and then scroll down to see the code.

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Horizontal lists</title>
 <link rel="stylesheet" href="resources/stylesheet19.css"/>
</head>
 
<body>
 <div id"nav">
 <ul id="navlist">
 <li><a href="#">Link one</a></li>
 <li><a href="#">Link two</a></li>
 <li><a href="#">Link three</a></li>
 <li><a href="#">Link four</a></li>
 <li><a href="#">Link five</a></li>
 </ul>
 </div>
</body>
</html>

And here is the sample CSS code:

#navlist li{
 display: inline;
 list-style-type: none;
 padding-right: 20px;
}

Linking to the same page

We have already looked at how to link pages on a website. However, we can also link to different sections of a single web page. For example, if you have a long web page with lots of content, you can have a table of contents with links allowing the user to click on a link which will take them to a certain part of that web page.

You can link to other elements on a web page such as a heading, paragraph, div, or image. In this tutorial, we will look at how to link to different headings and images on a web page.

The example in the image below shows some links which when clicked will take the user to the corresponding headings with different sections of content. This example obviously looks a bit plain but using some CSS code we can style the links, headings and the rest of the content. You could also add some more code for a scrolling transition effect.

Screen Shot 2017-04-14 at 4.33.25 pm

Watch the video below which explains how to link to content on the same page, and then scroll down to see the sample code.

Here is the HTML code for the example shown in the video:

<!DOCTYPE html>
<html>
<head>
 <title>Linking to the same page</title>
 <meta charset="utf-8"/>
</head>
<body>
<h1>Linking to sections on the same page</h1>
<p>We have already looked at how to link pages on a website. However, we can also link to different sections of a single web page. For example, if you have a long web page with lots of content, you can have a table of contents with links allowing the user to click on a link which will take them to a certain part of that web page. You can link to other elements on a web page such as a heading, paragraph, div, or image. </p>
 
<a href="#one">One</a><br>
<a href="#two">Two</a><br>
<a href="#three">Three</a><br>
<a href="#four">Four</a><br>
<a href="#five">Five</a><br>
 
<h1> <a name="one"></a>One</h1>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
<h1> <a name="two"></a>Two</h1>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
<h1> <a name="three"></a>Three</h1>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
<h1> <a name="four"></a>Four</h1>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
<img src="resources/canada.jpg" width="300" height ="200"/><a name="five"></a>
 
 
</body>
</html>

Linking pages in HTML

This tutorial explains how to create links in HTML using the <a> tag (which stands for anchor). This tutorial covers the following:

  • Linking pages in the same folder/directory
  • Linking pages in other folders/directories
  • Linking to other websites

When creating links, you need to be aware of the filename of the document you are linking to eg. page2.html and the folder/directory it is located in. A link’s structure looks like this:

The structure of a HTML link
The structure of a HTML link

As you can see above, you use the <a> tag to create a link and the href attribute to specify the filepath or filename of the page you are linking to. If you are linking to a file in another folder than you must specify the folder it is in eg. “folder2/page2.html” and if the folder is above the current folder in the folder hierarchy then you use two periods to specify the folder above eg. “../index.html”.

If the folder you are trying to link to is several folders above the current folder in the hierarchy, then you can use multiple periods eg. ../../../index.html will link to a page three folders above the current folder.

If you are linking to another website, then specify the full URL eg. “http://www.google.com”. Make sure you start off with http:// or https:// (if the website is secure) at the beginning of the website URL.

Watch the video below and then scroll down to see the sample code.

The sample code below shows the different ways that you can link to other pages and websites.

<!DOCTYPE html>
<html>
<head>
 <title>Linking your webpages</title>
 <meta charset="utf-8"/>
</head>

<body>
 <!-- To link to another page in the same folder: -->
 <a href="page2.html">Click here to go to page 2</a>
 <br/>
 <!-- To link to another page in another folder: -->
 <a href="folder2/page2.html">Click here to go to page 2 in folder 2</a>
 <br/>
 <!-- To link to a page in a folder above the current folder -->
 <a href="../index.html">Click here to go to the homepage</a>
 <br/>
 <!-- To link to another website, include the full URL: -->
 <a href="http://www.google.com">Click here to go to Google</a>
 <br/>

 <!-- You can place links inside paragraphs of text -->
 <p>You can <a href="page2.html">click here</a> to go to page 2.</p>
</body>

</html>

Most links will be in the form of clickable text. However, you can make any content on your page a link to other content. For example, an image or button could be a link, or an entire div could also be a link.

If you would like to know how to link to sections of content on the same page, you can find out how to do that at this tutorial.