HTML: Link and Anchor Tags - Target Link




To contact us



HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]

© 2002 - 2013 All Rights Reserved Total Application Works


  • Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)
    <html>
    <head>
    <title>Example of a link </title>
    </head>
    <body>
    <a href="http://sumtotalz.com/TotalAppsWorks/HTML/Links.html">
    Links and anchor Tags </a>

    </table>
    </body>
    </html>




Introduction to links and anchors Tags

In this tutorial, we will explore how to use links and anchors in a web page. This tutorial assumes that you have read and mastered some of the Tutorials listed on the left. What is HTML (HyperText Markup Language)? HTML is a layout/tag language that is used to organize text and/or images on a web page. What is the purpose of the HTML link and anchor tags?

  • The purpose of the link tag is that it allows the designer to define a relationship between two linked documents. Consider the following example that shows how to link to an external style sheet.

     
    <head>
    <link rel="stylesheet" type="text/css" href="stsht.css" />
    </head>
     
    Figure 1: Linking to an external style sheet


    In this case, the linked page's contents are included in a similar fashion as occurs when you use a Java or a C++ include. In addition, the linked-to external page defines the page layout for the linking page. The tags and attributes used in Figure 1 are:
    1. <Link> - links to an external style sheet
    2. rel - this defines the relationship between the current document and the targeted document
    3. type - this specifies the MIME type of the target URL
    4. href - this specifies the target URL of the resource
  • The purpose of the anchor tag is that it allows the designer to define a branch to another part of the same document or to another document. Consider the following examples:

    Link to another Website Link to another part of the same Page
    <html>
    <head>
    <title>Example of a link </title>
    </head>
    <body>
    <a href=
    "http://sumtotalz.com/TotalAppsWorks/HTML/Links.html">
    Links </a>
    </body>
    </html>
    • <a href=
      "#ITLAAT">Introduction to links and anchors Tags </a>
    • <a href=
      "#JUST">Paragraph - Align Justification </a>
    • <a href=
      "#CENT">Paragraph - Align Center </a>
    • <a href=
      "#RIGHT">Paragraph - Align Right </a>
    • <a href=
      "#DEPR">Deprecated </a>


    Introduction to links and anchors Tags </a>

    Figure 2: Linking to another document or to another part of the same document


    The tags and attributes used in Figure 2` are:
    1. <A> - used to define links and anchors.
    2. href - is the URL of the linked resource. href is short for Hypertext Reference.
    3. name - is used to define an anchor.
    4. </a> - is used to end the definition of an anchor.

How can you link to a different part of the same page?

You can create a link to a different part of the same page by using the name attribute of the <a> anchor tag. In this document, I am able to link to this section using the following code:

 
<a href="#HCIL"> How can you link to a different part of the same page? </a>
 

When the above link is clicked on, a jump is made to the following tag within the same document:
 
<a  name="HCIL"> How can you link to a different part of the same page? </a>
 

You will note that name="HCIL"> does not contain a #
Words between <a> and </a> tags will become links to the addresses given in the HREF attributes.

Figure 3: Linking to another part of the same document


We will explore how to link to another page in the next section.

Linking to Another Web Page

On this page, I used the example of how to link to a web page on my web site. I have repeated the example in the following table.

 

<html> 
<head>
<title>Example of a link </title>
</head>
<body>
<a href="http://sumtotalz.com/TotalAppsWorks/HTML/Links.html">
Links and anchor Tags </a>
</table>
</body>
</html>

  • The address of the page you want to link to is placed within quotes (e.g.,
    "http://sumtotalz.com/TotalAppsWorks/HTML/Links.html" )
  • When you click on Links and anchor Tags, the page at "http://sumtotalz.com/TotalAppsWorks/HTML/Links.html" will be displayed.
  • To illustrate the use of the above link click on the following:
    Links and anchor Tags example
Figure 4: Linking to Another Web Page


  • How do we link to another page?
      We use a html hyper reference (href) like the following:

      <a href="nextpage.html">click here</a>
  • How do we link to another website?
      We use a html hyper reference (href) like the following:

      <a href="http://www.sumtotalz.com">click here</a>

      Note: we use the other website's full address.
  • How do we link to another website in a new window?
      We use target="_blank" in the html hyper reference like the following:

      <a href="http://www.sumtotalz.com" target="_blank">my site</a>

A table showing many of the <a> attributes is described in the next section.

Table showing anchor attributes

In figure 5, additional anchor attributes and their descriptions are shown.

Element: <a> - anchor
Attribute Description
charset char encoding of linked resource
type advisory content type
name named link end
href URI for linked resource
hreflang language code
rel forward link types
rev reverse link types
accesskey accessibility key character
shape for use with client-side image maps
coords for use with client-side image maps
tabindex position in tabbing order
onfocus the element got the focus
onblur the element lost the focus
Figure 5: Anchor attributes


Link examples

1- What is a Link This an example of defining a basic link
2- Local Link This is an example of how to display the contents of a disk drive.
3- Target Link This is an example of how to display the contents of a web page in a new window.





HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]


To contact us

© 2002 - 2013 All Rights Reserved Total Application Works