Developed with
QA

Contents

keyboard_tab

The course is part of this learning path

Developing Web Applications with HTML and CSS
course-steps
7
certification
1
lab-steps
2
description
1
play-arrow
Start course
Overview
DifficultyBeginner
Duration11m
Students28
Ratings
3/5
starstarstarstar-borderstar-border

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

Hyperlinks are great for linking to other resources from other pages within your own sites or to external websites, but you can also use them to create emails, which is great. If you have a contact us page, for instance, or maybe you just want to give users a way to email a company or person directly, let's have a look at how this works. So first up you need to change the scheme, which is the first part of URL from HTTPS to Mailto when you do this, you're telling the browser that when a user selects the link, it should execute its default email behavior.

Normally this will mean opening a new email, ready for the user to start writing. In practice this looks like this first I'll open with an anchor element and a href attribute like this. Then I'll follow the href with an equals mailto colon someperson@qa so whoever that person at QA is, and I'll close that opening tag, then I'll add the text which will be Contact QA. And then I will close an overall anchor elements. Now the text contact QA is hyperlinked with a Mailto link. And when the user selects it they'll automatically have an email address ready. which in this case is someperson@qa.com.

So while this is obviously already really useful, you can actually take this a little further by adding an automatic subject line and even some body text. For the subject line, all you need to do is add a question mark. After the final part of the email address, then followed up with the subject equals to, and whenever subject line you want. To add body text, follow up your subject line with an ampersand. Then body equals like this. Then whatever text you want to include, and this I'll go with just dropping a line to say hello and close the tag. And that's all there is to adding Mailto links to your pages. This is a really important and powerful piece of functionality that you can use, but at the same time, as you've seen, it's also really easy to do.

Lectures

About the Author
Students2874
Labs8
Courses29
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics