This series introduces the foundation for web development using basic HTML and CSS markup. It is intended for those who have zero web development experience, though it might be a solid "foundation" refresher for anyone.
HTML & CSS Basics Series →
Links are the building block of the internet—allowing everything to connect: all the pages on your website, your website to another website, a search engine to your site. They’re easy to make, but there are a few different types that you should know about that work slightly differently. Regardless of the type, links, when clicked, serve to take you to another space.
In the last tutorial we saw how to link HTML and CSS files together, now we’ll build on that and see how we can connect multiple HTML files. After the last tutorial, we should have an HTML file (called index.html) that looks like this:
<!DOCTYPE html> <html> <head> <title>This is my page title.</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>This is a heading 1 element</h1> <p>Hello world, this is a simple paragraph.</p> </body> <html>
Note: From here on out, instead of listing the entire file (it’ll get pretty long), I’m just going to reference the part of the file we’re changing.
Step 1
Find the h1 and p elements on your page and add the additional link code in the paragraph:
<h1>This is a heading 1 element</h1> <p>Hello world, this is a simple paragraph. <a href="http://www.google.com">Link to Google</a></p>
It should look like this on the page:
Figure 1: Screenshot of the example index page
This is the code for a simple link to Google. This should look familiar—we used this example in the HTML Overview tutorial to explain attributes. Let’s review the parts of a link:
This a element has an href attribute where the name is href and the value is http://www.google.com.
Absolute links
Notice in the above example how the value of the attribute is the entire link to Google, including the http://. Although many modern browsers don’t require you to actually type this in, nor do they display it, when you are coding links to external websites, you must include the entirety of the link, or the absolute link location. This link type is the most specific type of link we can use, and it’s generally used to access pages outside of our own website.
Relative links
By contrast, a relative link does not specify the entire address, it only specifies the name of the file and the location of the file we’re linking to relative to the current webpage we’re on. We’ll generally use relative links when linking to other pages on the websites we build.
But before we can actually write a link to another webpage on our site, we need to make another web page.
Step 2
Since our existing HTML page is nicely set up, and we don’t want to start from scratch, let’s create a copy of our index file. I’m just going to duplicate my index.html file and rename it about.html so that I now have three files in my website folder, as shown below.
Figure 2: Screenshot of the files in our website folder
Now, we need to be careful about which HTML file we’re editing, since we have two that are very similar.
Step 3
Go ahead and open your new about.html file in your editor. The code is exactly the same as the index.html file (obviously), because we simply made a duplicate file. Let’s just change a few things, so we know which page we’re viewing. I’ll make these changes:
<!DOCTYPE html> <html> <head> <title>This is my page title.</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>About Page</h1> <p>This is where I'll eventually write some info about me!</p> </body> <html>
Note: the link to the previously-created style.css file is still in the <head> section of our file. This means that both this about.html file and our index.html file are linked to the exact same CSS file, so any changes made to the CSS file will effect both HTML files. This is actually a good thing. We’ll explore why in later tutorials.
Step 4
Okay, we’re all set up. Now we want to create clickable links between our two pages. So, on my about.html file, I’m going to add a relative link to my index.html file, as seen below:
<a href="index.html">Link to Home Page</a> <h1>About Page</h1> <p>This is where I'll eventually write some info about me!</p>
Step 5
And so we can get back and forth between the pages, I’m going to open my index.html file in my code editor, and add a link to my about page, as such:
<a href="about.html">Link to About Page</a> <h1>This is a heading 1 element</h1> <p>Hello world, this is a simple paragraph. <a href="http://www.google.com">Link to Google</a></p>
Take a look at the example pages to see how this works—click to open the example index page in a new tab.
Building site navigation
These series of posts are meant to be strung together so you can build your own website—and the most basic feature of all websites is navigation to get to all of the pages. We’ll start building that right now.
Step 6
Let’s go ahead and make one more page by repeating step 2, but this time calling the resulting page contact.html.
Step 7
Before I even open that new page, I’m going to edit the link on my index.html page—this time adding links to the other two pages. So open index.html and replace the original link code with the following:
<a href="index.html">Home</a> <a href="about.html">About</a> <a href="contact.html">Contact</a>
I added three links—one for each of my pages. It’s worth noting that I don’t especially need the first link to the index.html page, since we’re already on that page. But for consistency across my pages, I’m going to leave it there for now. The resulting page should look something like the screenshot below:
Figure 3: Screenshot of revised home page
Step 8
Now you’re going to take that exact code, and add it in the same place on the other two files, making sure to replace the previously written links, and also ensuring it’s pasted at the correct spot in the page—below the opening body tag and above our h1 element.
The resulting website should look and work like the example website, which you can view here (click on the links and notice the changing url in your browser’s address bar—you should be seeing the names of the files you just made.)
Or, you can download a zipped folder of all of the site files here.
Special links
Anchor links
So we just linked to different pages on our site with relative links, and perviously we made a link to an external web page (Google) using an absolute link. Both of those links take us to different web pages. But what if we want to create a link to a different spot on the page we’re already on? That’s just a tad more tricky—but we can do it using an anchor link. I’ll talk about that in another tutorial, after we learn a bit more about the structure of our pages and have more content on them.
Opening links in new tabs or windows
At some point, you may want to open certain links in new browser tabs or windows, most notably if you’re including links to an external resource that is not on your own site. This is pretty easy as well: just add the target attribute to your link tag, as shown below, with the value _blank .
<a href="http://www.google.com" target="_blank">Link to Google (opens in new tab)</a>
I should note that opening links in a new tab is a debated, contentious issue. (Yes, those links opens in new tabs. Yes, I think this is perfectly acceptable practice—you should read the comments section from that second link above if you’re interesting in others’ opinions.)
Opening an email link
You can also create a link to open a new mail message. This time, the value of the href attribute changes: we add mailto: before the link address.
<a href="mailto:alex@turnwall.com">alex@turnwall.com</a>
You should also think about how you use this type of link, since many people use browser-based email services (like Gmail) to send emails these days. For those people, the link might not open a new mail window, so the visible content of your link should actually be the email address instead of something like “email me”. You might want to include that before the link, as seen below (you can try the mail link, it works.)
Email Alex at alex@turnwall.com
Yes, there are concerns that you might get a ton of spam if you go around putting your email address on websites in plain HTML. There are methods to get around (obfuscate) that, but with spam filters these days, I don’t worry about it—here’s a great post about why.
Wrapup
Okay, now your collection of code is starting to act a little bit more like a website. Let’s start to dress it up with CSS in the next tutorial in the series…