Web Design - Introduction to HTML: Hyperlinks

Sections:   Introduction  |  Section 1  |  Section 2  |  Section 3  |  Section 4  |  Section 5

Section Three:  Part A  |  Part B  |  Part C  |  Part D  |  Part E  |  Part F  |  Part G

Relative References Relative References 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 a server on the internet and create absolute references – but this would be a lot of work. Instead when dealing with pages you have created, that are listed in your web site folder structure, it is best to used relative references. Relative references point to a file in your folder structure using the href="" attribute. 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 file name in the href="" attribute. Extend Your Learning 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. Notice that the value listed in the href="" attribute above is simply the name of the Honda web page you created, Honda.html. NOTE: The link above only works if the two web pages to be linked are listed in the same folder. Helpful Hint You can also use the target="_blank" attribute when creating relative reference links, if that is the effect you desire. Be aware that this may confuse visitors to your site. Next

© 2008 KCDL. All rights reserved.