html5 Site Icon CSS3 Site Icon CSS Site Icon

HTML4 Intermediate

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.

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 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.

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.

notepad

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.

Related Tutorials

HTML4 Basic Tutorials - Lesson 8 - Links

What's Next?

We show how to organize our display data into tables.



Definition Lists  << Prev          Next >>  An Introduction To Tables

HTML4 Reference

The <base /> base URL location tag

go to home page Homepage go to top of page Top

HTML4 Elements

The complete set of HTML elements also known as HTML tags from the latest HTML 4.01 Specification.

Click the links for more information on individual tags and their attributes.

<!--...-->

<!DOCTYPE>

<a>

<abbr>

<acronym>

<address>

<applet>

<area />

<b>

<base />

<basefont />

<bdo>

<big>

<blockquote>

<body>

<br />

<button>

<caption>

<center>

<cite>

<code>

<col />

<colgroup>

<dd>

<del>

<dfn>

<dir>

<div>

<dl>

<dt>

<em>

<fieldset>

<font>

<form>

<frame />

<frameset>

<h1> - <h6>

<head>

<hr />

<html>

<i>

<iframe>

<img />

<input />

<ins>

<isindex />

<kbd>

<label>

<legend>

<li>

<link />

<map>

<menu>

<meta />

<noframes>

<noscript>

<object>

<ol>

<optgroup>

<option>

<p>

<param />

<pre>

<q>

<s>

<samp>

<script>

<select>

<small>

<span>

<strike>

<strong>

<style>

<sub>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<title>

<tr>

<tt>

<u>

<ul>

<var>