In this HTML Tutorial I will teach you how to create an HTML URL (previously known as Hyper-Link). I’ll use HTML URL and HTML link (or just link) interchangeably, because they are different names for the same thing. We’ll also pay special attention to the Mailto function, which allows you to start your default email client to send an email message. Hopefully you got some crackers to eat while reading the post. My studies show it works best that way.
What is HTML URL?
All web-pages: websites, blogs and forums have their own addresses on the Internet called URL (Uniform Resource Locator). To find some information, you must know the exact address of the website where this information is located. Thanks God, Google.com is much help nowadays. You can see the URL of the file or web-page in your browser Address or Location bar.
HTML URL (aka HTML link)
HTML URL (or an HTML link) is a piece of text, usually highlighted with a color (blue by default). It can also be set to a button or an image located on the web-page. Clicking on it (button or image) will take you to a new web-page or another part of the current HTML document:
<a href="http://www.webdesy.com">This is an HTML URL</a> that will take you to WebDesy.com
This piece of code target="_blank" allows you to open an HTML URL in a new browser tab (or window) and still keep the visitor on your website:
<a href="http://www.webdesy.com" target="_blank">Click here</a> to open WebDesy.com in a new browser tab.
If HTML files are located in the same folder locally on your computer, an HTML URL can contain a file name only:
<a href="services.html">Click here</a> to see our Services.
Let’s imagine that your website is located locally on your computer in the folder called site. And all the images are located in the folder called images. Your site is located in the ‘site’ folder and your images are in the ‘images’ one. Damn, my imagination is really outstanding today! In this case a link to some photo would be:
<a href="images/photo1.jpg" target="_blank">Click here</a> to see a photo.
photo1.jpg is a name of the photo in the .jpg format. target="_blank" will show you the photo in a new browser tab. It is more user-friendly, because you do not need to click the Back button each time you want to get back to the previous page.
MailTo
The Mailto function allows to create an HTML URL that will open an email client like MS Outlook or The Bat with a specified email in the To field:
1. You can use the mailto attribute to create a link to an email address:
<a href="mailto:WebDesy@gmail.com">WebDesy@gmail.com</a>
2. To send email to multiple recipients, simply separate email addresses with a comma, but use NO spaces:
<a href="mailto:WebDesy@gmail.com,CorvinKevin@gmail.com">WebDesy@gmail.com and CorvinKevin@gmail.com</a>
3. It will be useful to add a subject to your email:
<a href="mailto:WebDesy@gmail.com?subject=Got the WebDesign?">
4. Use the following code if you want an email be sent with a copy
<a href="mailto:WebDesy@gmail.com?cc=CorvinKevin@gmail.com">
5. or a blind copy:
<a href="mailto:WebDesy@gmail.com?bcc=CorvinKevin@gmail.com">
6. It is even possible to embed some text in your email message:
<a href="mailto:WebDesy@gmail.com?body=I would like to order a following website:">
If you want to add one more line in your message, use “%0A” or use it 2 times like “%0A%0A” if you want to add an empty line:
<a href="mailto:WebDesy@gmail.com?body=This is Paragraph 1 %0A%0A And this is Paragraph 2">
7. Mailto features can be combined: use “?” before the first parameter and then “&” for the second and subsequent ones:
<a href="mailto:WebDesy@gmail.com?bcc=CorvinKevin@gmail.com&body=This is Paragraph 1 %0A%0A And this is Paragraph 2">
It looks that I am going to receive many emails today 🙂
Internal HTML URL (HTML link)
Your HTML document may be pretty long. To avoid scrolling, which takes much time, you can create a content with internal HTML URLs or anchors, which will take your website visitors directly to the required section. You may edit old HTML code one day and find that name=" " attribute was used for this purpose. However, the new HTML standard is using the id=" " attribute. Feel free to replace name with id, because all modern browsers support it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Internal HTML URL</title>
</head>
<body>
<h2>Hit the URL to get to the HTML jokes</h2>
<p><em><a href="#joke1">Joke1</a></em></p>
<p><em><a href="#joke2">Joke2</a></em></p>
<p><em><a href="#joke3">Joke3</a></em></p>
<h1>HTML jokes</h1>
<h2><a id="joke1">Image size</h2>
<p>The Italians apply <i></i> tags just wherever they want!</p>
<h2><a id="joke2">Joke2</h2>
<p>I always want to highlight the <sub><sub> tags with yellow! Do you know why?</p>
<h2><a id="joke3">Joke3</h2>
<p>Are you working on your <body></body> code? Well, kinda!</p>
</body>
</html>
You can create a URL to a specific part of an external HTML page in 2 steps:
1. Add the following code to the external HTML page your URL will point to:
<a id="#your-identifier">some text here</a>
Please note that is is strongly recommended to avoid using spaces in anchor names. It is better to use dashes instead.
2. Create a URL to an external page with adding #your-identifier in the end of it:
<a href="http://some-website.com/some-page.html#your-identifier"></a>
HTML tags we have learned so far:
Set a link to a piece of text:
<a href="http://some-website.com">some text</a>
Use target=”_blank” to open a new tab or browser window:
<a href="http://some-website.com" target="_blank">some text</a>
Create an HTML URL (aka HTML link) that will open an email client like MS Outlook or The Bat with an email specified in the To field:
<a href="mailto:some@email.com">some text</a>
Assign an identifier for an HTML URL (HTML link) to point to an exact place within the current or external HTML page:
<a id ="your-identifier" >some text</a>
And there’s more, guys. I’m just warming up. 🙂 To be continued …
