HTML Part 4 – Links – Internal, External and Anchor

In the previous guide, we talked about how to make headers and do some basic formatting of the text. While this is all well and good, what can really help a website is the use of links. As one builds a simple website, one will eventually need links (both internal and external links).

Links (Internal)

Part of what makes a website functional is the use of links. This can be both to help navigate through your website and to link to other websites. One reason why people have often referred to the Internet as the “World Wide Web” is the fact that many websites link to each other in an intricate and complex web. Without linking, your website will probably be just a boring static one-page HTML website. How many websites outside of Zombocom depends almost exclusively on a single page?

So, the first thing we need to do is look at the folder where we created our first webpage. Create a new webpage in that folder by, much like how we described in the first par of the tutorial. The only difference is that we can name this page anything so long as the file extension is “.html”. For practicality reasons, I recommend making the name small and a single word. In my case, I named my second webpage “test.html”:

Next, we will open up our test file in Notepad and insert the following code:

We won’t worry about document declaration for this particular webpage since this is just to test out how linking works. Still, it’s good practice to put doctype code at the top of every page as well as metadata for real pages. All this code does is tell us if we were successful in our test. Once that code is written out and saved, you can close that page.

Next, open up your “index.html” in notepad. When you do, add the line just above the body closing tag:

You’ll notice that the code uses “a”. The “a” basically tells the browser that what it’s seeing is a link that can be clicked on. So, since it’s an “a” tag, we close with merely the “a” link. Of course, in this case, it’s more than a link, this link is referring us to a different page. So, in the opening tag, we add a space and add in “href”. I link to think of “href” as “hyper referral” meaning it’s referring to something. Since links are probably one of the most common kinds of code you’ll be using in any web developing scenario, this kind of HTML code will eventually be burned into your brain and you won’t need anything special to remember this. So, after the “href” part of the code, I added in an equals sign, then in quotation marks, add in the name of the file we are referring to. Then, it’s the other angle bracket to close out the opening tag. This is what is referred to as an internal link. It’s an internal link because it’s on the same website as the page you would be looking at.

One important note on internal pages is the fact that links are case sensitive. That means if there are any characters in upper case, this must be in the link itself. Otherwise, the link will be broken. This is why it’s best to leave filenames in lower case.

Another important note is that if you put your test file inside a folder, you have to include the folder name, then a forwards slash and the file name. So, if your folder name is “testfolder” and your test page is “test.html”, then your link should look like this instead:

This is <a href=”testfolder/test.html”>my first link</a>!

If you wanted that “test.html” file to link internally back to the “index.html” and it’s inside the test folder, then your code in the “test.html” file should look like this:

This link <a href=”../index.html”>points back to the home page</a>

The “../” tells the browser to look one directory up from the folder it’s already in, then look for the file “index.html” in that parent directory. Every folder you have to go up, you have to add in an extra “../” before the file name. While useful to know, we are keeping things simple by keeping everything in the same folder here. If all went well, your page up to this point should look something like this:

If you click on the link (blue and underlined text), you should be taken to your test page. When you go back, the linked text will be purple to indicate that you’ve already been to that page already.

Linking (External)

External links are links that point outside of the website. In this case, we need the full URL (Uniform Resource Locator) which can be retrieved by simply copying the address you need from the address bar in your browser and pasting it into your code. Let’s demonstrate how we can get a URL and paste it into our code. Let’s presume we want to link to Google. So, we, in a different tab or window, type in Google in the address bar:

When we hit Enter, we will be taken to Google. The address (or URL) will change to the following:

(Of course, the “.ca” you see at the end in this screenshot is simply directing me to the Canadian version of Google. What is at the end of the URL really doesn’t matter as much as what’s in the beginning.

Now, right click on the text of the address (make sure all of it is highlighted) and copy the text:

Now, we need to paste it into our HTML document in a way that links to it. Below, I’ve added a line of code towards the bottom above the closing body tag:

Note that on the previous line, I added two break tags. This is to push the text down two lines when a browser sees it.

Little is different from the internal links other than the use of the full URL. You can easily point to your own website with an external link, but ideally, you’ll use internal links instead.

These specific kinds of links will open up in the same window. If, however, you want users to view those websites, but have them open up in a new tab/window instead, there’s a simple solution to this. After the URL in the “a” tag, we insert target=_blank” like so:

This should cover a vast majority of your text related links and add functionality to your website.

Anchor Links

There’s one more noteworthy kind of linking and those are anchor links. Anchor links are something you put in to guide users through a particular page by automatically scrolling to the necessary part. This can be often found on larger Wikipedia entries where there’s a table of contents towards the top. Anchor links are typically used either as part of forum technology where there’s lots of posts in a thread and when a particular HTML document contains a lot of text that requires a significant amount of scrolling to browse through. In this demonstration, we’ll simply add a “Back to top” link at the bottom of our page.

The first step would be to insert where we want our link to be in our HTML code. So, I’ll add this towards the bottom of the HTML code just above the closing body tag (remembering to add line breaks in the previous line to keep this in it’s own separate line):

We’ll keep that line at the bottom of our page from now on just in case our page get’s a little crazy. We also want to give our anchor link code a name that is unique. Since we are wanting this anchor link pointing to the top, let’s name it “top”. Note that I added a “#” at the beginning. Make sure that is put at the front of the name so that the browser knows that this is simply an ID and not pointing to a particular file name. Now, remember this little name we gave it for later (I’ll tell you when we need to put it in the code again). Now that we put the link in, we need a place for it to point to. In this case, it would be pointing to the top of the page. So, we go up to the top of the page right after the opening “body” tag and insert this line of code:

Remember that code name we had earlier? We need to put that after the “id=” part. No “#” before it because this is the destination of our ID. We can put text in between the opening and closing “a” tags here, but it is optional. In this particular case, I’ll leave it blank and close the tag.

If you test this now, it’ll probably look like nothing is really happening because you don’t need to scroll through our test webpage yet. If you’re really wanting to know what it does, just shrink the window enough so that you can scroll up and down on your page. Clicking on the “Back to top” link will cause the browser to scroll all the way up.

Another important note is that these names or IDs you give your anchor links are unique to the page. So, for instance, you can use “top” on your index page, then on your “test” page, you can name your “back to top” link “top” because they are on separate pages. If you use multiple anchor links on the same page, make sure they are all named differently and in a way that makes sense to you.

That’s it! That’s basic linking! In the next part of our tutorial, we’ll show you how to post and optimize pictures with HTML.

Part 3 (Headers and Basic Text Formatting) | HTML Guide List | Part 5 – Images