Sunday, 28 August 2016

HTML Links and Mail System element

HTML Link or Hyperlink
This allows us to navigate from one page to another. Anchor (a) element is used for hyperlink.

Attributes of Hyperlink

  • target : specifies the location where the links of an html document will open.
values of target Attributes

  • _blank - opens the link in new window
  • _parent - opens the link in the same frame the link is clicked.
  • _self - opens the link in the present frameset.
  • _top - opens the link in the samewindow.
  • <framename>- opens the link in the respective frame.

  •  id : It is used to create fragment identifier within a document. Fragment identifier specifies a particular location within a document. we can navigate to different location within a document by using the id attribute.  
ex: <A id="top"></a> defines a location within a document.
<a href="#top"> go to top </a>provides reference to that location.

example 1: Simple use of Anchor
<!Doctype Html>
<html>
<head><title>Use of Anchor</title></head>
<body>
<h1>Use of Anchor element in navagation</h1>
<h2><a href="http://www.webtechomaster.com/2016/06/html-root-element-and-metadata-element.html"
>HTML Root Element </a>
</body>
</html>

Onclick of HTML Root Element page will redirect to the given URL.



Example: Anchor tab with id

<!Doctype Html>
<html>
<head><title>Use of Anchor With id</title></head>
<body>
<h1>Use of Anchor element with id</h1>
<h1> this is top</h1>
<a id="top"></a>
<a href="#middle">Go to middle</a><br/>
<a href="#bottom">Go to bottom</a>

<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />

<h1> this is middle</h1>
<a id="middle"></a>
<a href="#top">Go to top</a><br/>
<a href="#bottom">Go to bottom</a>


<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />


<h1> this is bottom</h1>
<a id="bottom"></a>
<a href="#top">Go to top</a><br/>
<a href="#middle">Go to middle</a>
</body>
</html>





Mail System
A mail system allows us to send and receive emails.

example:
<!Doctype Html>
<html>
<head><title>Mail System linking</title></head>
<body>
<h1><a href="mailto:san231991@gmail.com">E-mail us</a></h1> 
</body>
</html>

When you click on E-mail us you will be redirected to reference mail message window.

0 comments:

Post a Comment