The concept of “browsing” or “surfing” the web comes from the act of moving quickly from one webpage to another. By the end of this lesson, you’ll learn how to:
- Create links from one website to another
- Create links from one page to another on the same website
- Link an email address that opens your default email application with an email addressed to someone
- Link in a new browser window or tab
- Link from one part of a webpage to another part of the same webpage
Open your homepage, index.html, in Visual Studio Code.
Linking From One Website to Another
Here’s an example of a link to an external website:
<a href="http://nmi.cool/web/">Web Development Workbook</a>
Let’s break this down.
<a href=“URL”>Link Preview Text</a>
Notice links consist of four elements:
- An opening tag – a href
- The URL, in quotes
- The link preview text, between the tags. This is what the user sees on your page.
- A closing tag – </a>
If we were to preview this file, we’d just see the link preview text:
Web Development Workbook
Important Note: All the links in this reading belong in the <body> of your HTML files. Don’t get it mixed up with stylesheets. Those links go in the <head> of your HTML files. Not sure what a stylesheet is— don’t worry, we’ll talk about it soon!
Styling and writing links
By default, links are blue and underlined.
While you can change the style of links to not be blue and underlined (via CSS), it’s best to leave some indicator that they are interactive, whether that’s changing the color and making links bold, using text-transform: uppercase, or even placing very important links in button.
When deciding what to make your link preview text, explain where the link is going, rather than saying “click here,” or something along those lines. The following example is a great resource for styling links—and shows a way to make a link really stand out.
Uniform Resource Locator
When linking to an external website (you know, any website that isn’t yoursite.com), you’ll use the entire URL. For instance, this is the entire URL of the NMI’s website: https://nmi.cool/.
URL, commonly referred to as a web address, stands for Uniform Resource Locator. This is the address you type in the browser to access a webpage.
The full web address, with all characters (including the http://) is referred to as an absolute URL. Keep reading to learn about the other type of URL.
Linking to webpages in the same website
Relative URLs on the other hand, are pages that live in the same site. When you’re linking webpages on the same website, you don’t need to use the full URL. Instead, you use the file path. Chances are, this will include folder names, unless your files live at the same level.
On your homepage at your root directory (index.html, the one not in any folders), link your webdev index:
<a href="webdev/index.html">Web Development</a>
These links consist of the same four elements, except, instead of typing in a URL, you type in the file path.
- An opening tag – a href
- The file path, in quotes
- The link preview text, between the tags. This is what the user sees on your page.
- A closing tag – </a>
When you’re done, upload your new and improved index.html to the server.
Tip: For an in-depth look at absolute URLs vs relative URLs check out this handy YouTube tutorial! It's also a good video to watch if you're still feeling a little uncertain about file paths!
Linking an Email Address
Type in mailto followed by the email address. This will open an email in the user’s default mail application.
<a href="mailto:yourname@uga.edu">Email Me</a>
Links in a New Browser Window/Tab
To link in a new window or tab (will vary depending on browser and the user’s settings), you add the following:
target="_blank"
Here’s what it looks like in action:
<a href="https://www.w3schools.com/" target="_blank">W3Schools</a>
Usually, if you’re linking to another website in a new tab, it’s because you want the user to return to your website when they’re done. Typically, a good rule of thumb is to make external links—links to another site—open in a new tab.
Link from one part of a webpage to another part of the same webpage
It’s pretty popular to see websites that are designed to look like one really, really long page. Instead of making the user scroll and scroll and scroll to find their desired content, these websites add navigation through links.
The only difference about this navigation is that instead of including links that open new webpages, these links jump the user down (or up) to a specific part on that same webpage.
For instance, maybe you’re creating an online portfolio and you want users to immediately be able to find your contact information so they can offer you an exciting job in web development.
Before you can add such a link, you must create an identifier that names a particular section of your webpage.
Create a new HTML file called links.html. Save it in your webdev folder.
Copy and paste the following dummy (placeholder) text:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Add a horizontal line <hr /> and paste the dummy text again. Do this until you have three sections of dummy text and two lines separating them. Here’s what it should look like when you preview:
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
Add an h2 element to each section. We’ll name them About, Experience and Contact, for no particular reason. When you’re done, your code should look like this:
<h2> About </h2> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <hr /> <h2>Experience</h2> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <hr /> <h2>Contact</h2> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Now let’s add an id attribute to each h2 element—meaning, go back and edit the h2 tags to look like this:
<h2 id="about"> About </h2> <h2 id="experience">Experience </h2> <h2 id="contact"> Contact </h2>
When naming attributes, always start with a letter, not a number.
To link to an element with an id attribute, you use the same <a href> attribute, but instead of typing in a relative or absolute URL, you type in a hashtag (#) followed by the ID attribute:
<a href="#about>About</a>
Here’s how we link to those attributes we just defined (<br> added to create line breaks). Go ahead and add this to the top of the body section:
<a href="#about">About</a><br> <a href="#experience">Experience</a><br> <a href="#contact">Contact</a>
Sometimes, you’ll see this type of link used at the bottom of the page that says Top or Home to get users back to the top of a really long page.
When you’re done, save the file and preview it in Chrome, but don’t worry about uploading it.