Chapter 8: HTML Links

HTML Links

A link is address located on the World Wide Web.We will show you two types of links.

» EXAMPLE:

<p>

<a href="default.htm">This is link</a>to page in website</p>

<p>

<a href="http://www.easilylearnhtml.blogspot.com">This is link</a> on World Wide Web</p>

</body>

</html>

» Result:

This is link to page in website
This is link on World Wide Web

How To Open Link In New Window?

Its very easy to control how to responds when you click on the link.We are going to show you how to open a link in new browser window.

» EXAMPLE:

<html>

<body>

<a href="http://easilylearnhtml.blogspot.com/" target="_blank">Link to Easilylearnhtml</a>

<p>Click on the link. The page will open in new window.</p>

</body>

</html>

» Result:

Link to easilylearnhtml
Click on the link. The page will open in new window.

You can use the following options for the target attribute.

OPTION	DESCRIPTION
_blank	Opens the link in a new window.
_self	Opens the link in the same frame as it was clicked (default).
_parent	Opens the link in parent frameset.
_top	Opens the link in the full body of the link.
framename	Opens the link in a named frame

Links on the Same Page

You will see how to use a link to jump to another part of the document.
It's not posible to display the result of this code in our blog.

» EXAMPLE:

<html>

<body>

<p>

<a href="#C7">Go to chapter 7.</a>

</p>

<h2>Chapter 1</h2>

<p>This is chapter</p>

<h2>Chapter 2</h2>

<p>This is chapter</p>

<h2>Chapter 3</h2>

<p>This is chapter</p>

<h2>Chapter 4</h2>

<p>This is chapter</p>

<h2>Chapter 5</h2>

<p>This is chapter</p>

<h2>Chapter 6</h2>

<p>This is chapter</p>

<h2 id="C7">Chapter 7</h2>

<p>This is chapter</p>

<h2>Chapter 8</h2>

<p>This is chapter</p>

<h2>Chapter 9</h2>

<p>This is chapter</p>

<h2>Chapter 10</h2>

<p>This is chapter</p>

<h2>Chapter 11</h2>

<p>This is chapter</p>

<h2>Chapter 12</h2>

<p>This is chapter</p>

</body>

</html>

How to create a mialto: Link

» EXAMPLE:

How to link to an email address and generate a new email message?

EXAMPLE:

<html>

<body>

<p>Mail link:

</p>

</html>

</body>

ATTENTION:

You can add spacing between words by "%20".

» Result:

Mail link: Send mail

» SPECIAL:

Add cc, bcc, a subject line, and the message body.

<html>

<body>

<p>Another mailto link:</p>

href="mailto:someone@hotmail.com?cc=someoneelse@ hotmail.com&bcc=andsomeoneelse2@hotmail. com&subject=Summer%20Party&body=You%20are%20invited%20 to%20a%20big%20summer%20party!">Send mail!</a>

</body>

</html>

» Result:

Another mailto link:
Send mail!

Image Link

After src attribute You can add two values - image name and format or link to Your image. (<img src="image.jpg" />)

» EXAMPLE:

<html>

<body>

<p>Click on the image:

</a></p>

</html>

</body>

» Result:

Click on the image:

Pages

Tuesday, 26 November 2013