My HTML Way...: The Anchor Tag

The meaning of Hypertext Markup Language is the language used to build pages that are connected to each other (Hypertext pages). To achieve this connectivity HTML provides us with "Anchor" tag. Its called anchor tag as it provides an anchor on the page. The syntax looks like:

<A href = "Destination_Page">Text/Image as anchor <A>
where "href" stands for Hyper reference.

This is the code showing the use of anchor tag.

<HTML>
<BODY>
This is the link to <A href = "http://www.vijaykamat-html.blogspot.com">My Blog</A>
</BODY>
</HTML>

As you can notice the text "My Blog" is now an active link to the address mentioned in the href attributes value,
You may also notice that the text also changes color and is now underlined. This can be changed to any other color using the FONT tag:

<HTML>
<BODY>
This is the link to
<A href = "http://www.vijaykamat-html.blogspot.com">
<FONT Color = "Black">My Blog</FONT>
</A>
</BODY>
</HTML>

The other aspects can also be changed, like for example we can add a little special effect, and for that we need styles, which is explained here: http://vijaykamat-html.blogspot.com/2011/02/css-styling-and-html.html

Linking within the same page:

Often you will require to provide links to traverse within the same web page. For example, when user reaches the end of the page may be you want to provide a link to the top of the page. This can easily be done with NAME attribute of the Anchor tag. Lets take an example. Below you can see a page where the top of the page is marked with a name. Later the text "Top" is linked to this area so a click takes user to the top of the page.

<HTML>
 <BODY>
  <A Name = "Top">
  <Font Face = "Verdana" Size = "2">This is the top of the page.</Font>
  <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>
  <A href = "#Top">"Top"</A>
 </BODY>
</HTML>

Web Page:

Notice how the name must start with a "#" symbol when used in Anchor tag.

My HTML Way...

Saturday, February 19, 2011

The Anchor Tag

Linking within the same page:

No comments:

Post a Comment