Lesson 5 - More About Links
In Lesson 8 of the Basic HTML Tutorials we showed how to utilize links and hyperlinks to navigate our way around. In this lesson we firstly explain what URLs are all about and then we show you how to set a base URL for the links on your current page. All links within the page will be relative to the base location specified. This tag is only allowed within the <head> </head> element.
The base Tag
The <base /> tag defines a base URL for the links on a page and is self closing.
An Explanation of URLs
Ok, before we go into the practicals for this lesson lets take a bit of time to explain Uniform Resource Locators (URLs) and what they're all about.
The base url normally consists of the protocol being used, which in our case will be the HTTP protocol and the server name directory, which for us will be htmldoctor.info/
This will give us a base url of http://htmldoctor.info/
The common use of a relative URL is by omitting the protocol and server name, as documents generally reside on the same server. So this would be directoryName/fileName.extension.
For example the relative url images/chickenpiesmall.jpg
An absolute url is the complete address of the resource.
For example the absolute url http://htmldoctor.info/images/chickenpiesmall.jpg
Viewing the Tag
Let's take a look at the base tag and it's usages.
Open the file with Notepad we created and tested in Lesson: 4 Definition Lists
You saved the file to your computer in the C:\_HTMLIntermediate folder as lesson_4_webpage.html
Copy and paste the following code into the reopened file, overwriting the existing contents.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Using The base URL --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> HTML Doctor - HTML Tutorials - Intermediate HTML Lesson 5 - More About Links </title> <base href="http://htmldoctor.info/" /> </head> <body> <h3>List OF Images</h3> <dl> <dt>Pie Pictures</dt> <dd><img src="images/chickenpiesmall.jpg" alt="Chicken Pie" width="75" height="50" /> </dd> <dd><img src="images/fishpiesmall.jpg" alt="Fish Pie" width="75" height="50" /> </dd> <dd><img src="images/shepherdspiesmall.jpg" alt="Shepherds Pie" width="75" height="50" /> </dd> </dl> </body> </html>
Save the file in the C:\_HTMLIntermediate folder as lesson_5_webpage.html and close the Notepad.
Viewing Our Changed File
From the C:\_HTMLIntermediate folder, double click on the saved file and it will appear in your default web browser and look something like the following image.
Reviewing Our Changes
The <base /> tag allows us to set a base URL location in our HTML documents to let us use relative URLs to point to addresses in our web pages.
Lesson 5 Complete
Modify the HTML to point to files on your own computer to get a real feel of how the base and relative URLs hang together.
We show how to organize our display data into tables.
The <base /> base URL location tag