Coding Links: Absolute & Relative URLs

Topics covered in this HTML & CSS tutorial:

Anchor tags & hrefs, Linking to other websites, Linking to pages within a website, Opening a link in a new browser window/tab

Exercise Preview

Exercise Overview

What would a webpage be without links? In this exercise, you’ll code a few links to learn how it’s done for both external websites and other pages on your site.

1. If you completed the previous exercise, microsoft.html should still be open in your code editor, and you can skip the following sidebar. If you closed microsoft.html, re-open it now (from the News Website folder). We recommend you finish the previous exercise (1A) before starting this one. If you haven’t finished it, do the following sidebar.

   If You Did Not Do the Previous Exercise (1A)

   1. Close any files you may have open.
   2. In your code editor, open microsoft-ready-for-links.html from the News Website folder.
   3. Do a File > Save As and save the file as microsoft.html, replacing the older version in your folder.

The Anchor Tag & HREF Attribute

1. In the first paragraph, wrap an <a> tag (which stands for anchor) around Microsoft Corporation, as shown below in bold:

   <p><strong>REDMOND, WA:</strong> In what CEO Bill Gates called an unfortunate but necessary step to protect our intellectual property from theft and exploitation by competitors, the <a href="https://www.microsoft.com">Microsoft Corporation</a> patented the numbers one and zero Monday.</p>
   

   NOTE: The anchor tag wouldn’t do anything without the href attribute. Href stands for hyperlink reference. Its value is equal to the URL (uniform resource locator) of the page you’re linking to.

2. Take a moment to review the code and check for typos. Remember that attributes are only added to a start tag and are written like this <tag attribute="value">
3. Save the file.

4. Preview microsoft.html in a browser.

   Browser Preview Shortcuts

   If you’re using Visual Studio Code with the open in browser extension installed, hit Option–B (Mac) or Alt–B (Windows) to open the saved HTML document in your default browser. If asked what browser you want to open it with, ideally you should choose Google Chrome (which is the most widely used browser).

5. Click the link to make sure it works. Links that include the entire address (including the http://www) are called absolute links.

6. Return to microsoft.html in your code editor. Create another link, this time to The Onion’s website (in the last paragraph, just before the end body tag):

      <p>Wall Street reacts to MS Patent News. <em>Read more...</em></p>
      <p>This report was written by <a href="https://www.theonion.com"> The Onion</a></p>
   </body>
   

7. Save the file.

8. Preview microsoft.html in a browser and test the new link.

   We just made two links to outside websites, but what about a link to a page in this site? We made another page (called wall-street.html) which is in the same folder as the page you’re currently editing.

9. Return to microsoft.html in your code editor and below the bulleted list, create that link by adding the code shown in bold:

      <p>Wall Street reacts to MS Patent News. <a href="wall-street.html"><em>Read more...</em></a></p>
      <p>This report was written by <a href="https://www.theonion.com">The Onion</a></p>
   </body>
   

   Links like this, which don’t include the full address, are called relative links. The link is relative to the current .html file. In this case, the link will look for a page called wall-street.html in the same folder as this file (microsoft.html).

10. Save the file.

11. Preview microsoft.html in a browser and test out the links. If the browser is still open to the page, you can hit the Reload button.

Opening a Link in a New Browser Tab/Window

We can make a link open in a new browser tab or window (depending on the user’s preference) using the target attribute.

1. Return to microsoft.html in your code editor.

2. In the first paragraph, add the target attribute to the microsoft.com link as shown below. NOTE: Attributes must be separated by a space character.

   <p><strong>REDMOND, WA:</strong> In what CEO Bill Gates called an unfortunate but necessary step to protect our intellectual property from theft and exploitation by competitors, the <a href="https://www.microsoft.com" target="_blank">Microsoft Corporation</a> patented the numbers one and zero Monday.</p>
   

3. In the last paragraph, add the target attribute to the theonion.com link as shown below:

   <p>This report was written by <a href="https://www.theonion.com" target="_blank">The Onion</a></p>
   

4. Save the file.
5. Preview microsoft.html in a browser. Click the links for Microsoft Corporation and The Onion and those pages should open in a new browser tab or window!

6. Return to your code editor and close any files you have open. We’ll be moving on to a new file in the next exercise.