Tuesday 26 November 2013

Chapter 8: HTML Links

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:


<html>
<body>
<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:
<a href="mailto:user@hotmail.com?subject=Hello%20world">Send mail</a>
</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>
<a
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:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrYUPGj6sa6-AVw1335E9nLFE0tYcPttm-pOz0v5ZGcy-sP6OcARJwVm2eODYqUdzF9-0TZVO_YyR_WShYXW-lc8JrHiXtgGie6LzHjVyzA2SV-s9PwszYDpj-xrz5xSJkMscuPBrXpg0B/w140-h140-p/html.jpg" alt="EASILYLEARNHTML tutorial" />
</a></p>

</html>
</body>


» Result:


Click on the image: EASILYLEARNHTML tutorial







No comments:

Post a Comment