A Tag Example – HTML Syntax – Anchor Examples
A Tag Example – HTML Syntax – Anchor Examples
Purpose: – Illustrates the HTML syntax for the anchor tag.
You can download an excellent free html editor at nvu. This HTML editor will allow you to easily experiment with these examples. You can view an 8-minute video tutorial that I did at NVU HTML Editor
Function: a Anchor tag defines an anchor within the document. An anchor is user to link to another document. It can also be a a label to a fragment of a document (these are called “named anchors”).
Attributes: href=”url” – href specifies the url of the target destination.
Attributes: name=”text” – text identifies and names a part of the document. It is usually called a fragment. The fragment can be referenced within a URL. It is prceded by the hash (#) symbol.
Attributes: title=”text” – Text specifies a title for the target document.
Attributes: target=”name|_blank|_self|_parent|_top”> –
- name specifies the window or frame that the target window should be displayed in.
- _blank – opens a new browser window.
- _self – Loads the linked document into the same frame or window as the source document. This is the default target for all links.
- _parent – linked document loads into the parent frame – one step up in the frame hierarchy.
- _top – causes document to load into top-level window.
- _blank – opens a new browser window.
Restrictions: Named fragments does not work in Firefox
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Anchor Tag Example</title>
<!-- link - refers to all links
visited -refers to visited links
hover - refers to when you hover over a link
active - refers to all enabled links -->
<style type="text/css">
a:link {
background: blue;
color: white;
}
a:visited {
background: crimson; color: pink;
}
a:hover {
background: black;
color: white;
}
a:active {
background: red;
color: white;
}
a:focus {
background: gray;
color: white;
}
</style>
</meta></head>
<body>
<a href="http://idealprogrammer.com"
target="blank" title="Ideal Programmer">IdealProgrammer.com</a>
<br />
<br />
<a href="#lower">lower on
page</a>
<br />
<br />
<a href="mailto:youremailaddress.com">Send
E-mail</a>
<br />
<br />
<a href="ftp://server/path/filename">Download
a file</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 />
<a name="#lower">lower on
page</a>
</body>
</html> |
