More About Links - HTML Doctor

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.

Base URL

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/

Relative URL

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

Absolute URL

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

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.

More to Learn: Advanced Forms