More About Links
In the HTML5 Basic Tutorials - Lesson 9 - Links lesson 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 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.
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!)
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
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!
- Open up your HTML editor or text editor, which in my case is Notepad++.
- Open a document if required.
- 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>
Saving the document
Save the file as
View Page in Web Browser
Either navigate to the location you saved the
morelinks.htmlfile 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:
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.
We show how to organize our display data into tables.
The <base> base URL location tag