Web Design - Web Authoring / Intermediate HTML: Hyperlinks

Sections:  Introduction  |  Section 1  |  Section 2  |  Section 3
Section One:  Part A  |  Part B  |  Part C  |  Part D  |  Part E  |  Part F  |  Part G  |  Part H   |  Part I  |  Part J  |  Part K  |  Part L  |  Part M

Relative References

Relative Reference Links

Remember from our previous dirt bike scenario that you decided to create a group of web pages, all about dirt bikes, and link them together to create a dirt bike web site. Pretend that you already created two pages to be listed on the site – one page about Yamaha dirt bikes and one page about Honda dirt bikes – and that you saved the two pages to the same folder in your dirt bike web site structure.

To link the two pages together you could upload the pages to your web server on the internet and create absolute reference links using each page's URL, but this would be a lot of work. Instead, when dealing with pages you have created, that are listed in your web site's folder structure, it is best to use relative references links.

Like absolute reference links, Relative reference links use the href="" attribute to reference the page to be linked to. Unlike an absolute reference, you do not need to list the entire URL. In fact, if the two pages to be linked are saved in the same folder, you need only list the full file name (plus the .html or htm extension) in the href="" attribute.

Let's See it in Action icon. Let's See it in Action: Relative Reference Links

Imagine that you created a web page named yamaha.html and another named honda.html and saved them both to your dirt_bike folder. To create a link from the yamaha.html web page to the honda.html web page you could add the following code to the yamaha.html web page.

honda link

Notice that the value listed in the href="" attribute above is simply the full file name of the Honda web page, honda.html, created in our fictional dirt_bike scenario. NOTE: The link above only works if the two web pages to be linked, in this case: yamaha.html and honda.html, are listed in the same folder.

NextNext

© 2008 KCDL. All rights reserved.