More LinksS2C Home « More Links

In the HTML5 Basic Tutorials - Lesson 9 - Links lesson we showed how to utilize links and hyperlinks to navigate our way around.

SIn 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 URL Location Element

The <base> tag is a self closing used for defining a base URL for the links on a page.

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/ (Which is basically the homepage of a site!)

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

Absolute URL

An absolute url is the complete address of the resource.

For example the absolute url http://htmldoctor.info/images/chickenpiesmall.webp

Viewing the Element

Let's take a look at the base tag and it's usages.

Creating A Webpage

Lets create a webpage for our base tag to see what it does!

  1. HTML Editor

    1. Open up your HTML editor or text editor, which in my case is Notepad++.
    2. Open a document if required.
    3. Copy and paste the following code into the document.
    
<!DOCTYPE html>
<!-- Using the base HTML tags -->
<html lang="en">
  <head>
    <title>
      More About Links
    </title>
    <meta charset="utf-8">
    <base  href="http://htmldoctor.info/" />
  </head>
  <body>
  <h2>List OF Images</h2>
  <dl>
   <dt>Pie Pictures</dt>
      <dd><img src="images/chickenpiesmall.webp"
               alt="Chicken Pie" width="75" height="50" /> </dd>
      <dd><img src="images/fishpiesmall.webp"
               alt="Fish Pie" width="75" height="50" /> </dd>
      <dd><img src="images/shepherdspiesmall.webp"
               alt="Shepherds Pie" width="75" height="50" /> </dd>
  </dl>
  </body>
</html>

  2. Saving the document

    Save the file as morelinks.html

    save more links tags
    Screenshot 1. Saving the morelinks.html HTML file.

  3. View Page in Web Browser

    Either navigate to the location you saved the morelinks.html file to and double click the file. This will take you to the page in your default web browser, or from your web browser click File --> Open File and navigate to the file and open it.

    After doing either of these you should see a similar webpage in your browser to the following screenshot:

    view more links tags
    Screenshot 2. Viewing the morelinks.html HTML file.

    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.

    You can have zero or one <base> elements witin a HTML document.

Lesson 8 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/Quizzes

HTML5 Basic Tutorials - Lesson 9 - Links

More About Links Quiz

What's Next?

We show how to organize our display data into tables.

HTML5 Reference

The <base> base URL location tag