Hyperlinks are what make the internet an actual internet. Without our trusty hyperlinks, there wouldn’t be much inter in the net now would there? Hyperlinks are pretty simple in many ways, we click hundreds of them every day. When you start to dig into their structure a little more closely however, you’ll uncover useful and powerful attributes about them that will help you to be a better web developer. In this episode, we’ll take a close look at things like Uniform Resource Locators, Relative URLs, Base URLs, Image Links, and more. Let’s jump right in and get started building some links.
Uniform Resource Locator
The short hand of the Uniform Resource Locator is quite simply URL. Surely you are familiar with them, as you needed to visit one in order to read this webpage! The technical definition for an URL is a way of specifying the location of a given resource on the web. Now often when we think of URL’s we simply think of it representing a website address we can type into the browser window. While this is true, the URL can specify any number of different types of resources including webpages, images, files, or even an API. We can break down a URL like so:
http://www.vegibit.com:80/thing?variable1=value1&variable2=value2#location
The components of this Uniform Resource Locator break down like so.
-
scheme
http:// The scheme tells us the protocol in use. In web development this is usually http:// or https://
host www.vegibit.com The host name is the domain or ip address that has the resources you are looking for.
port :80 The port field tells us what TCP port is in use for this URL. This can usually be omitted.
path /thing The path contains the path to the resource you want access to.
query string ?variable1=value1&variable2=value2 The query string is used to pass name value pairs to the server.
fragment identifier #location This field can be used to jump to a specific location in a given web page.
Creating HTML Hyperlinks
It’s a good thing to know all the parts of an URL like we investigated above. We surf around the internet with easy, often times not even really knowing what each piece of the address we use means. We have been reduced to pointers and clickers. Point the mouse, click away! The Hyperlink is the tool we need to create those links for our users. It’s easy to do, let’s see how.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<title>
Creating HTML Hyperlinks
</title>
</head>
<body>
<h1>
Creating HTML Hyperlinks
</h1>
<p>
It's easy to create links. We can link to Google if we'd like to complete a search!
<a href="http://www.google.com">Google</a>. Very easy!
</p>
</body>
</html>
You can copy the HTML source into your own HTML file, and you will now have a nice link to Google so you can search the Internet. The hyperlink itself is created using the anchor or a tag. There are a few attributes you can set but in this example all we are concerned with is the href attribute. The value you specify inside the href attribute tells the a tag where to send a user when she click on the link in the page.
The a tag is pretty flexible and you can use it in many ways. An interesting property of the a tag is that it allows block level content inside of the element. Recall, block level elements take up vertical space. Certainly text links are the most common use case of using the a tag but we can also wrap the a tag around any sized image, or even a div which may be taking up large amounts of vertical space. The provides a much larger clickable surface area if you need to provide that for your users.
What Are Relative URLS?
You may have heard the term Relative URL and wondered what that means. Relative URLs are relative because they do not specify a complete host and path. This also works for files that are located in different directories on the server. Let’s imagine we have two HTML files on the filesystem. In the base directory we have webpage.html and in a directory aptly named directory, we have a file named hyperlinks.html Here is the simple HTML for your viewing pleasure.
webpage.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<title>
Relative HTML Hyperlinks
</title>
</head>
<body>
<h1>
Relative HTML Hyperlinks
</h1>
<p>
We can use relative URLs to link to other resources in the same domain.
<a href="directory/hyperlinks.html">This is a relative URL!</a>
</p>
</body>
</html>
hyperlinks.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
This page is in a directory
</title>
</head>
<body>
<h1>
A webpage
</h1>
<p>
I'm located in the directory folder
</p>
<p>
We can link back to the original document like so. <a href="../webpage.html">Link Back!</a>
</p>
</body>
</html>
This simple code will set up links between two HTML files located in different directories using a Relative URL format. We have a link on each page to show how you can navigate both up and down the directory structure. When you want to navigate up, you simple provide the name of the directory followed by a forward slash, followed by the name of the file to link to. If you need to span multiple directories, that is easy to do as well. You simply specify them in this format. directory/otherdirectory/hyperlinks.html. When you need to navigate down the directory path, you can use the special ../ notation to go back one level. If you need to span multiple directories while going back you can do so by doing something like this ../../webpage.html.
What Is A Base URL?
When working with Relative URLs, the HTML is able to intelligently determine where the current working file lives. From there it calculates where all the other files you link to on that server are located. Well guess what, there is a way you can use the <base> tag to specify what the base / root / starting point is for the relative calculations. We can modify some of our example HTML to show you how this works. We are going to set up the link <a href="hyperlinks.html">This is a relative URL!</a>. Now you can see we are only linking to the file hyperlinks.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<base href="http://shell.cas.usf.edu/mccook/uwy/" />
<title>
Relative HTML Hyperlinks
</title>
</head>
<body>
<h1>
Relative HTML Hyperlinks
</h1>
<p>
Changing what the HTML will use for Relative URL Calculations can be done with the base tag.
<a href="hyperlinks.html">The base tag modified the Base URL!</a>
</p>
</body>
</html>
In this code, even though we only specified the href in the a tag as hyperlinks.html, if we click the link, we are taken to the URL of http://shell.cas.usf.edu/mccook/uwy/hyperlinks.html. Wow! This was possible since we specified the base of http://shell.cas.usf.edu/mccook/uwy/ in the <base> tag. This is a very powerful feature, but seldom used in popular web development. The reasons is that it can lead to confusion and problems in maintaining the code as new pages are added to your website.
HTML Page Jumps With Fragments
This is a really awesome feature of HTML and I’m sure you have run across this technique plenty of times. Have you ever noticed that if you visit a webpage that is particularly large and scrolls a long distance on the page, the webmaster often gives you some links that you can click and you will be taken to very specific points in the page. This is a great way to give users an option to get right at the content that they are interested in without having to scan and search the page. We’ll test this out right in our page right now! All you have to do is specify an id attribute on the element in the page you would like to jump to, then specify that id as the href for the link you are dealing with. Just remember that on the element you would like to jump to where you specify the id, you do not use the # sign, however the # is required to be prepended to the id in the href of the a tag.
<ul>
<li><a href="#url">Uniform Resource Locator</a></li>
<li><a href="#chh">Creating HTML Hyperlinks</a></li>
<li><a href="#waru">What Are Relative URLS?</a></li>
<li><a href="#wiabu">What Is A Base URL?</a></li>
</ul>
Another popular use of this technique is to provide a fragment that the user can click at various places in the web page to bring them back to the top of the page. It uses the same technique. You simply place an id on an element near the top of the page, then provide a link somewhere else that uses that id as its href value, and when the user clicks – they will go right to the top of the page. Fun!
Creating Links With Images
It’s pretty easy to make links by using images. The end result is the same as text links, the user will be taken to the destination upon clicking the link. Sometimes its nice for design purposes to provide images as the basis of links in the web page. You especially see it a lot on really design heavy websites, where a simple text links is just a little too boring 🙂
For example, we can easily link to two other pages on this website using this HTML.
<a href="https://vegibit.com/what-is-html/">Learn HTML</a>
<a href="https://vegibit.com/what-is-html/"><img src="https://vegibit.com/wp-content/uploads/2014/06/html.png" /></a>
<a href="https://vegibit.com/getting-started-with-javascript-programming/">Learn JavaScript</a>
<a href="https://vegibit.com/getting-started-with-javascript-programming/"><img src="https://vegibit.com/wp-content/uploads/2014/04/javascript.png" /></a>
Text Link
Image Link
Text Link
Image Link
Conclusion
Links are so common in our everyday use that we rarely even think twice about them. It was fun to review all of the fundamentals of HTML Hyperlinks in this episode. In fact, revisiting the page jump with fragments concept has me thinking I should implement that technique more often!
