HCDE532 » Understanding Links
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
Links are specified in HTML using the <a> tag.
1 |
<a href="http://www.w3schools.com/">Visit W3Schools</a>
|
The <a> tag can be used in two ways:
- To create a link to another document, by using the href attribute
- To create a bookmark inside a document, by using the name attribute
See Also: HTML Links | W3 Schools
Links to URLs
Links are the distinguishing feature of the web Links allow you to navigate from page to page, view pictures, open or download a media file, etc.
Links have three fundamental parts to make them work:
- Label: the actual text of graphic item the user clicks on to activate the link
- Destination: the specified place that the user ends up when they activate the link
- Target: how the destination will be displayed in the browser
Relative Page Links
A relative page link is used when creating a link to a page within a website:
1 2 3 4 5 6 |
<h2>Pages</h2>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html" >Contact</a></li>
</ul>
|
Where we use the <a> tag to create the (relative) link and use the href attribute with the value of page.html to specify the destination of the link.
Absolute Page Links
Absolute page links are used when creating a link to a page in another (or external) website:
1 |
<p><a href="http://www.w3schools.com/html_links.htm#tips" target="_blank">Visit the Useful Tips Section</a></p>
|
Where we still use the <a> tag with the href attribute to create the (absolute) link . But, this time we use the value of http://www.doamain.com/folder/page.html to specify the destination of the link.
We will also open this page in a new browser window because we have used the target attribute with the value of _blank.
Email Links
Instead of using a form to send an email via a web page, it is also possible to simply create a link that will open up in an email application program:
1 |
<p><a href="mailto:msinkula@premiumdw.com">msinkula@premiumdw.com</a></p>
|
Where we are using a similar text link with the <a> tag, but in this case the href attribute gets a value written with a mailto: just before the email address of msinkula@premiumdw.com.
This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.
Social