Tuesday, June 11, 2013

HTML Links


HTML uses the <a> anchor tag to create a link to another document or web page.

The Anchor Tag and the Href Attribute
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to tell the address of the document or page we are linking to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

This Code
Would Display
<a href="http://www.austincc.edu/">Visit ACC!</a>
Visit ACC!

The Target Attribute
With the target attribute, you can define where the linked document will be opened. By default, the link will open in the current window. The code below will open the document in a new browser window:

<a href=http://www.austincc.edu/ target="_blank">Visit ACC!</a>

Email Links
To create an email link, you will use mailto: plus your email address. Here is a link to ACC's Help Desk:

<a href="mailto:helpdesk@austincc.edu">Email Help Desk</a>

To add a subject for the email message, you would add ?subject= after the email address. For example:

<a href="mailto:helpdesk@austincc.edu?subject=Email Assistance">Email Help Desk</a>

The Anchor Tag and the Name Attribute
The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly to a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. Unlike an anchor that uses href, a named anchor doesn't change the appearance of the text (unless you set styles for that anchor) or indicate in any way that there is anything special about the text. Below is the syntax of a named anchor:

<a name="top">Text to be displayed</a>
To link directly to the top section, add a # sign and the name of the anchor to the end of a URL, like this:
This Code
Would Display
<a href="http://profdevtrain.austincc.edu/html/10links.html#top">Back to top of page </a>
A hyperlink to the top of the page from within the file 10links.html will look like this:
<a href="#top">Back to top of page </a>
Back to top of page




Back to top of page

Note: Always add a trailing slash to subfolder references. If you link like this: href="http://profdevtrain.austincc.edu/html", you will generate two HTTP requests to the server, because the server will add a slash to the address and create a new request like this: href="http://profdevtrain.austincc.edu/html/"
Named anchors are often used to create "table of contents" at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document. If a browser cannot find a named anchor that has been specified, it goes to the top of the document. No error occurs.

No comments:

Post a Comment