HTML WEB DESIGN

 

separator-blank.png

 

GUIDE – LINKS

 

  • Create a new HTML document called index.html.  It is probably best to simply copy another document.  Look back at a past guide if you forgot how to do this.

    Here is my new index.html document with all other docs:

 

 

  • Open index.htm in your text editor and remove everything but the HTML template so that in matches the following:

 

 

<html>

<head>

</head>

<body>

</body>

</html>

 

 

  • This page is going to hold links to all our other pages so let’s add a heading called My Site.

 

 

<html>

<head>

</head>

<body>

<b><h1>My Site</h1></b>

</body>

</html>

 

 

·       Now let’s build a link.  This requires three steps that you are encouraged to follow.

Step 1 – Write the text that you want to appear as the link.

          Page #1


Step 2 – Add the <a> and </a> tags before and after your text.  This is the tag that allows us to create links.

 

          <a>Page #1</a>

Step 3 – In the <a> tag, add the href attribute.  Its value is the filename of the destination webpage.  In our case, it is the file named webpage1.html (or something similar).

 

          <a href="webpage1.html">Page #1</a>

 

Do this in your document.  Test your document.  It should now link to your other page.

 

 

<html>

<head>

</head>

<body>

<b><h1>My Site</h1></b>

 

<a href="webpage1.html">Page #1</a>

</body>

</html>

 

 

·       Add a link to your second HTML document.  Try to figure it out on your own before looking below.  Test to see if it works.

 

 

<html>

<head>

</head>

<body>

<b><h1>My Site</h1></b>

 

<a href="webpage1.html">Page #1</a>

<a href="webpage2.html">Page #2</a>

 

</body>

</html>

 

 

·       Instead of adding a link to one of our own pages, we can also add a link to a website on the internet by providing the full url address to the site.  You can get this by simply copying it from a browser.

 

Again, you are encouraged to use the three-step approach.

Step 1 – The text

          TSN

Step 2 – The <a> tags

 

          <a>TSN</a>

Step 3 – The href attribute with the address to the website

 

     <a href="https://www.tsn.ca/">TSN</a>

Notice that adding the address instantly makes this tag messy.  So you are encouraged to do that last.

 

 

<html>

<head>

</head>

<body>

<b><h1>My Site</h1></b>

 

<a href="webpage1.html">Page #1</a>

<a href="webpage2.html">Page #2</a>

<a href="https://www.tsn.ca/">TSN</a>

</body>

</html>

 

 

Test your page to make sure that your link works.

·       Add two more links to a website (school appropriate) that you like.  Once again, try to do this without looking below. 

Also, be sure to test that every link works!

 

 

<html>

<head>

</head>

<body>

<b><h1>My Site</h1></b>

 

<a href="webpage1.html">Page #1</a>

<a href="webpage2.html">Page #2</a>

<a href="https://www.tsn.ca/">TSN</a>

<a href="https://www.cbc.ca/news">CBC News</a>

<a href="https://slashdot.org/">Slashdot</a>

</body>

</html>

 

 

  • To make the row of links look nicer, one common approach is to place a vertical line between them.  This is simply a character on your keyboard.

    Make sure there is a space on each side of the vertical line character.

 

 

<html>

<head>

</head>

<body>

<b><h1>My Site</h1></b>

 

<a href="webpage1.html">Page #1</a> |

<a href="webpage2.html">Page #2</a> |

<a href="https://www.tsn.ca/">TSN</a> |

<a href="https://www.cbc.ca/news">CBC News</a> |

<a href="https://slashdot.org/">Slashdot</a>

</body>

</html>

 

 

Test your page.

 

·       Instead of placing text inside the <a> and </a> tags, we can actually place an image and that image will be the link.

Again, you are encouraged to use the three-step approach.

Step 1 – The image tag

          <img src="tsnlogo.png">

Step 2 – The <a> tags

 

          <a><img src="tsnlogo.png"></a>

Step 3 – The href attribute with the address to the website

 

     <a href="https://www.tsn.ca/"><img src="tsnlogo.png"></a>

 

          Try the above on your page.  Check to make sure the image can be clicked.

 

 

<html>

<head>

</head>

<body>

<b><h1>My Site</h1></b>

 

<a href="webpage1.html">Page #1</a> |

<a href="webpage2.html">Page #2</a> |

<a href="https://www.tsn.ca/">TSN</a> |

<a href="https://www.cbc.ca/news">CBC News</a> |

<a href="https://slashdot.org/">Slashdot</a>

<br>

<br>

<br>

<a href="https://www.tsn.ca/"><img src="tsnlogo.png"></a>

</body>

</html>

 

 

Did you know that you can create an entire user interface using images of buttons and links in html?  Web designers spend a fair bit of time creating such interfaces.

 

GOT EXTRA TIME?

 

·       The <a> tag has an attribute called target.  If you set the value of target to _blank, then the link will open in a new tab instead of in the current tab.

Try it out on one of your links:

 

<a href="webpage1.html" target="_blank">Page #1</a>