In this tutorial, we explore how to add URL links to HTML pages using anchor tags, including external links, internal links, and image links. We also discuss how to open links in new tabs and create anchors for easy navigation within a page. This guide is perfect for beginners looking to enhance their web development skills with HTML5 and CSS3.
Welcome to part 11 of the DCP Web Designers HTML and CSS beginners tutorial. In this session, we will learn how to add URL links to a web page. This is an essential skill for anyone looking to create interactive and navigable websites.
To begin, open your web browser and a notepad file. We will be working with the HTML page we created in the previous tutorial, which contains a table. Drag and drop the HTML file into your browser to view it.
Before we add links, let’s create a horizontal line for better organisation. Add the following code to your HTML file:
<hr>
Save the file and refresh the browser to see the line appear.
When browsing the internet, you often click on links to navigate to different pages. These links are known as URL links. In HTML, we use the anchor tag (<a>) to create these links. The anchor tag has an attribute called href, which stands for hypertext reference. This attribute specifies the URL to which the link points.
Creating a Basic Link
To create a link to Google, use the following code:
<a href="https://www.google.com">Visit Google</a>
After saving and refreshing your page, clicking on the link will take you to Google. Note that this link opens in the same tab, which means you lose your original page.
To ensure that links open in a new tab, we can use the target attribute with the value _blank. Here’s how to modify the previous link:
<a href="https://www.google.com" target="_blank">Visit Google</a>
Now, when you click the link, it will open in a new tab, allowing you to return to your original page easily.
Let’s create another link to the Chelsea Flower Show website. First, find the URL for the Chelsea Flower Show and use the following code:
<a href="https://www.rhs.org.uk/shows-events/rhs-chelsea-flower-show" target="_blank">Why not visit the Chelsea Flower Show?</a>
This link will also open in a new tab. To separate multiple links, you can use the <br> tag, which acts like a line break without adding extra space like a paragraph tag would.
Sometimes, you may want to link to a specific part of the same page. This is done using anchors. To create an anchor, you need to define it with an id attribute. For example:
<a id="top"></a>
You can then create a link that points to this anchor:
<a href="#top">Go to the top of the page</a>
When clicked, this link will scroll the page to the top.
Images can also be linked. To do this, wrap the image tag within an anchor tag. Here’s an example:
<a href="https://www.rhs.org.uk/shows-events/rhs-chelsea-flower-show" target="_blank">
<img fetchpriority="high" fetchpriority="high" decoding="async" src="images/image1.jpg" alt="Chelsea Flower Show" width="300" height="250">
</a>
This way, clicking on the image will take users to the Chelsea Flower Show website.
To create internal links, you need to have multiple pages. Let’s create a new HTML page called new_page.html. In this new page, you can add a link back to the original page:
<a href="index.html">This is a link back to the main page</a>
Now, when you refresh the original page, you can create a link to this new page:
<a href="new_page.html">Link to new page</a>
This allows navigation between different pages of your website.
In this tutorial, we covered how to create various types of URL links in HTML, including external links, internal links, and image links. We also learned how to open links in new tabs and create anchors for easy navigation within a page. These skills are fundamental for building interactive and user-friendly websites.
I hope you found this tutorial helpful, and I look forward to seeing you in the next DCP web tutorial!
