- Linking to Sections of a Web Page 5:38
- Root-relative Paths 2:54
- Links and Paths Challenge 3 objectives
- Link to Email 2:31
- HTML Entities and Reserved Characters 4:36
- Email Links and Entities Challenge 2 objectives
- Adding Developer Notes with HTML Comments 2:04
- Working on a Website Project Locally 4:22
- Next Steps 3:20
- Going Further with HTML Review 6 questions
Preview
Video Player
00:00
00:00
Link to Email
2:31Learn to create "mailto" links that auto-launch a user's default email program with pre-filled 'subject', 'to' and 'from' fields.
Have you ever visited a site or
app where you clicked an email address and
0:00
it auto-launched your default
email program with the subject,
0:04
to and
from address fields already filled out.
0:08
It let you begin composing an email
without first having to copy or
0:11
enter an email address
into the email client.
0:15
Well, that functionality was
created with just a link.
0:17
No fancy scripting or
programming necessary.
0:20
Let me show you.
0:22
So, first, back in index.html,
0:24
I'll place the email address in
the contact section inside <a> tags.
0:27
So to open the default mail program
with the link, you begin the email
0:37
links href value with mailto:
0:42
followed by the email address you
want the email to be sent to.
0:47
In this case it's
coolvrexperience@gmail.com.
0:51
So I'll go ahead and copy it and
paste it right after mailto.
0:54
These types of links are often called
mailto links because the mailto
0:59
command inside the href attribute is
what allows users to send an email
1:04
to the specified address.
1:09
So click to preview the page, and
scroll down, to the Contact email link.
1:11
And that's it, clicking on the link
starts up my default email program, and
1:17
includes the email address,
coolvrexperience@gmail.com,
1:21
in the To field.
1:25
And you're also able to open the mail
program with the Subject field filled out.
1:27
To provide a default subject,
you add a question mark right after
1:33
the email address followed
by the subject parameter,
1:38
an equals sign, and
the subject you want to display.
1:42
Let's display, Hi There.
1:46
Now, most modern email programs
will include the space in
1:50
the subject field by default,
1:55
but it's good practice to
define each space in a subject
1:57
value using %20.
2:02
This is a special character code
known as percent in coding or
2:05
URL in coding, for
explicitly defining spaces.
2:09
So let's give this a save.
2:13
Refresh the browser,
click on the Email, and
2:15
we see, Hi There, as the email subject.
2:20
Go ahead and check out the teacher's
notes to learn more about parameters and
2:22
values from mailto links.
2:27