Developed with
QA

Contents

keyboard_tab

The course is part of this learning path

Hyperlinks
Overview
Difficulty
Beginner
Duration
11m
Students
212
Ratings
4.5/5
starstarstarstarstar-half
Description

One of the best parts of HTML is its ability to hyperlink to pretty much anything. This lets you link to external websites, and pages within your own site easily. In this module, you’ll learn how to hyperlink and how to use named anchors to move around pages. After this, you’ll learn about the difference between absolute and relative URLs, and when to use them. We’ll end the module off with a discussion on how to include mailto links on your sites.

Transcript

The real power of HTML is its ability to include hyperlinks in a document. This is because it gives you the ability to connect any other piece of content or websites to yours, which is extremely useful for users. In text form, a hyperlink is shown in a different color from the rest of the text and is underlined, but images can also have hyperlinks embedded within them.

In this video, I'll take you through how to create basic hyperlinks using the anchor tag and href attributes. Okay, so to create a hyperlink, we'll need the anchor element, which is represented by the a tag. One of the anchor elements attributes is the hypertext reference or href. Aside from this, the container can also include text, which, as I mentioned ago, will normally be highlighted in a different color and underlined so using those as the hyperlink.

Here's a quick example of the anchor attribute in action. So let's say I want to add a hyperlink to a contact page. This might look something like this. So, I've already got the text in, but I need to add the hyperlink, that's pretty easy as I know I want to hyperlink the text that says QA's training on page, so I've got a reference point.

Next, I'll open my anchor tag, then after the href, I'll type equals. Now all I need to do is add the website link inside quotation marks, then closing the opening tag. Now, after the hyperlink text, I close the anchor tag, and just like that, I've got a working hyperlink. So that's the basics of hyperlinking. The anchor element is an awesome tool that will help you create dynamic and useful web pages down the line, and we'll be using it throughout this course.

Lectures

About the Author
Avatar
Ed Wright
Senior Learning Consultant
Students
10446
Labs
7
Courses
29
Learning Paths
7

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics