Web - Links and Images - Email and Telephone Links - Lesson

Web · Links and Images

Email and Telephone Links

The full text of this chapter, to read or revisit. To practise, do the exercises.

▶ Do the exercises

Exercise 1 — Creating Email Links

Email links allow users to quickly start composing an email to a specific address. These links use the

mailto:

protocol in the

href

attribute.

Here's the basic syntax for an email link:

<a href="mailto:email@example.com">Send an email</a>

When a user clicks this link, their default email client will open with a new message addressed to the specified email address.

<!DOCTYPE html> <html> <body> <h1>Contact Us</h1> <p> If you have any questions about Codémon training, please <a href="mailto:trainer@codemon.com">email our Codémon Trainer</a>. </p> <p> For technical support, contact <a href="mailto:support@codemon.com">our support team</a>. </p> </body> </html>

Email Client Required

For email links to work, the user must have an email client configured on their device. On mobile devices, this usually opens the default mail app.

App limitations

Depending on the device you use and how you use CodeLife (app/web), the email link may not work as expected. But in a real web browser, it will open the default email client.

Exercise 2 — Advanced Email Links with Parameters

Email links can include additional parameters to pre-fill parts of the email, such as the subject line, body text, CC recipients, and more.

Here's how to add parameters to an email link:

<a href="mailto:email@example.com?subject=Subject%20Here&body=Message%20body%20here">Send an email</a>

Common parameters include: -

subject

: The email subject line -

body

: The email message body -

: Carbon copy recipients -

bcc

: Blind carbon copy recipients

Special characters in parameters need to be URL-encoded. For example, spaces are replaced with

%20

<!DOCTYPE html> <html> <body> <h1>Codémon Support</h1> <p> <a href="mailto:support@codemon.com?subject=Help%20with%20my%20Codémon&body=Hello%2C%0A%0AI%20need%20help%20with%20my%20Codémon.%0A%0AType%3A%20%0ALevel%3A%20%0AProblem%3A%20%0A%0AThanks%21">Report a problem with your Codémon</a> </p> <p> <a href="mailto:trainer@codemon.com?subject=Training%20Question&cc=support@codemon.com">Ask a training question</a> </p> </body> </html>

URL Encoding

Here are some common URL-encoded characters: - Space: %20 - New line: %0A - Comma: %2C - Question mark: %3F - Equals sign: %3D - Ampersand: %26

Exercise 3 — Special Types of Links

Which of the following HTML codes would create a link that opens the user's email client with a new message addressed to "trainer@codemon.com"?

Options

• <a href="mailto:trainer@codemon.com">Email a Trainer</a>

• <a href="email:trainer@codemon.com">Email a Trainer</a>

• <a href="trainer@codemon.com">Email a Trainer</a>

• <a email="trainer@codemon.com">Email a Trainer</a>

Hint : Think about the special protocol that needs to be added to the href attribute for email links.

Exercise 4 — Complete the Email Link

Complete the HTML code to create an email link with a pre-filled subject line "Codémon Support Request".

Options: mailto: email: ? & = #

Hint : Remember that email links use the mailto: protocol, and parameters are added after a question mark (?).

Exercise 5 — Creating Telephone Links

Telephone links allow users to call a phone number directly from a mobile device. These links use the

tel:

protocol in the

href

attribute.

Here's the basic syntax for a telephone link:

When a user clicks this link on a mobile device, their phone will ask if they want to call the number.

<!DOCTYPE html> <html> <body> <h1>Codémon Support Hotline</h1> <p> International trainers can reach us at <a href="tel:+18005551234">+1 (800) 555-1234</a> </p> </body> </html>

When creating telephone links, it's important to use the international format in the href attribute (starting with +), but you can display the number in a more readable format for users.

Desktop Behavior

Telephone links work best on mobile devices. On desktop computers, they might open VoIP applications like Skype if available, or may not do anything at all.

Exercise 6 — Complete the Telephone Link

Complete the HTML code to create a telephone link for the Codémon Support Hotline.

<a ____="____+18005551234">Call Codémon Support: (800) 555-1234</a>

Options: href tel: phone: call: src link

Hint : Telephone links require a specific protocol in the href attribute. Think about what comes before the phone number.

Exercise 7 — Telephone Link Behavior

What happens when a user clicks on a telephone link (

) on a desktop computer?

Options

• It may open a VoIP application like Skype if installed, or nothing happens

• It automatically dials the number using the computer's speakers and microphone

• It always opens the default phone dialer application

• It downloads a contact file to the computer

Hint : Think about the differences between mobile devices and desktop computers when it comes to handling telephone functionality.

Exercise 8 — Link Types and Their Uses

Match each link type with its correct use case:

Items to match

• <a href="mailto:example@codemon.com">

• <a href="tel:+1234567890">

• <a href="https://www.example.com">

• <a href="#section-id">

Definitions

• Opening the user's email client to compose a message

• Dialing a phone number on mobile devices

• Navigating to a website

• Jumping to a specific location on the current page

Exercise 9 — Email Link Parameters

Which character is used to separate the email address from the first parameter in a mailto link?

Options

• ```?```

• ```&```

• ```#```

• ```=```

Hint : Think about URL query parameters and how they are formatted in web addresses.

Exercise 10 — Creating an Email Link with Multiple Parameters

Complete the HTML code to create an email link to feedback@codemon.com with a subject "Game Feedback" and CC to support@codemon.com.

<a href="mailto:feedback@codemon.com____subject=Game%20Feedback____cc=support@codemon.com">Send Feedback</a>

Options: ? & = + # ;

Hint : Consider how URL parameters are structured: the first parameter uses one character, while additional parameters use a different one.

← Previous lesson : Anchor Links Next lesson : Images in HTML →

Back to the course