Links
There are two ways that you can link to a page or document, one is relative and the other is absolute. You use relative links to link to pages or documents within a site and absolute links when you link to another site.
Absolute links require the Hypertext Transfer Protocol (http://), then the domain name whereas relative links only require the name of the page.
Although links in a menu do not have to be underlined (text-decoration) it is a common practice and makes navigation easier if the links within the rest of the content are underlined.
Relative Links
Link to a Page: A link to a page that is in the same folder/directory as the page that contains the link would be written like this:
<a href="pagename.htm">text or image</a>
Link to a Page in a Directory (folder): A link to a page that is in a folder/directory named gallery which is in the same folder as the page would be written like this:
<a href="gallery/pagename.htm">text or image</a>
To link to a page that is in a directory that is outside the directory that the page is in.
<a href="../gallery/pagename.htm">text or image</a> An Anchor: An anchor is used to mark a section within a page. For instance on some sites at the bottom of the page you will see click here for top of page. For this you would need an anchor at the top of the page and a link to that anchor at the bottom of the page.
<a name="top" id="top"></a>
You need to include the “id” in order for it to work in IE.
Link to an Anchor: When you link to the anchor:
<a href="#top">top of page</a>
The name “top” is the variable you can use any name that you want. You must include the #before the name that corresponds to the name that you used in the anchor.
A Link on an Image: When you place a link on an image the image needs to have “border: 0px;” in the CSS or you will get a line around the image.
Email Link This link will open the default email program on the users computer:
<a href="mailto:your email address">text or image </a>
Absolute Links
Absolute links are used to link to another site:
<a href="http://www.juude.info">text or image </a>
Styles for LinkedText Link
In order for the rollover (hover) to work the styles must be in the order shown below.
- Link is how the text will look normally
- Visited is how the text will look after the user has clicked on the link and and then returns to the page.
- Hover is how the text will look when you roll the mouse over it.
- Active is how the text will look just at the moment the user clicks on the link
(you really do not need this).
Menus Etc
When using the CSS on a menu I think that it is better if the link and visited are the same color. Within the text they could be different colors. You should remove the text decoration for the menu but your links should be underlined within the text.
Opening a Page into a New Tab
In the past <a href="pagename.htm" target="_blank"> was often use for opening a new window but it is not W3C compliant for XHTML strict. You can still open the page in a new tab if you use the rel attribute and a little javaScript.
Rel Attribute
Use
rel="external" in place of
target="_blank'
javaScript
Create a text file for your java script name the file "target.js" and place it in a
folder named "js"
Place the following in your text file:
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors =
document.getElementsByTagName(”a”);
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute(”href”)
&&
anchor.getAttribute(”rel”) == “external”)
anchor.target = “_blank”;
}
}
window.onload = externalLinks;
Link to javaScript
Place the following link in the HEAD of your document
<script type=”text/javascript” src='js/target.js" >
CSS Text Rollovers
In order to have the rollovers take effect you just need to
place the following code into your CSS.
To get rid of the underline:
text-decoration: none
a:link {
font-family:
font-size:
font-weight:
color:
text-decoration: none;
}
a:visited {
font-family: Arial, Helvetica, san-serif;
font-size: 12px;
font-weight: bold;
color: #990000;
text-decoration: none;
}
a:hover {
font-family: Arial, Helvetica, san-serif;
font-size: 12px;
font-weight: bold;
color: #333399;
text-decoration: none;
}
If you want to have another set of links with different colors you will need to add a class to the link tag. If my class was “secondLink” the CSS would be as shown below:
a.secondLink:link{ <
font-family: Arial, Helvetica, san-serif;
font-size: 12px;
font-weight: bold;
color: #333399;
text-decoration: none;
}
It is more interesting if in place of the underline you use borders then the underline can also change colors with the hover.
