on the Internet or to some anchor on the same page. Documents linked in this manner need not be HTML (or PHP/ASP) files. You can place a link to any kind of file.
Anchor Tag attributes
charset= text
Character encoding which specifies the character encoding of the target URL.
Example: charset=utf-8
href = relative address (i.e. the address of a file RELATIVE to the current document)
move up to next higher folder using ../
move down to a lower folder using folder (or 'directory' on the server) name
display from fragmentation-id position on document using #fragmentation-id.
Example-1: - current document displayed with fragmentation-id section at top of display. This is coding for moving round the same document, perhaps with an index at the top linking to sub-sections lower down.
Example-2: - file in current folder displayed with top of page at top of display. With no fragmentation id specified, the display is from the top of the page.
Example-3: - file in next highest folder is displayed with the top of the page at the top of the display.
Example-4: - a file in a lower folder is displayed with fragmentation-id at the top of the display.
href = absolute address
Example-5: - the server default file in directory at this absolute address is displayed from top of page.
Example-6: - specified file at this absolute address is displayed from top of page.
Example-7: - file with this absolute address is displayed from fragmentation-id position.
Example-8: - file (schedule.htm) with absolute address (http://www.bbc.com/radio4/) - is displayed from fragmentation-id position (#today) , and gives a fragmentation-id (refbbc) for the current position in the current document.
types of file
Normally the link is to another webpage (with file extension htm or html), but links to other file extensions are possible. An extensive variety of files can be accommodated, but the presumption is that the user has associated the file extension with a suitable application program, for example:
.doc associated with MS Word. .pdf associated with Adobe Reader. .ppt associated with MS Powerpoint.
Formats may include .wav for audio, .pdf / .doc for desktop publishing, .ppt for presentation, .exl for spreadsheet, etc. Consequently, only the most popular, legacy formats should be linked, in order to ensure that the majority of users' set-ups can deal with the format presented.
Note 1: A file-type icon is often added to the link for visual confirmation of a non-HTML link -
word minutes.doc estimates.exl excel
adobe acrobat instructions.pdf presentation.ppt adobe acrobat
Note 2: A link to a PDF format document is often accompanied by
adobe reader Link to Adobe Reader download
providing the user with a link to downloadable software, which can be used to view the file.
href = mailto (i.e. to send an e-mail)
Example: e-mail
Note 1: Minimise spam, frustrate the spambots by using coding to hide the e-mail address.
Note 2 : Make it clear that it is an e-mail link.
name= text
Example: - signifies a Fragmentation Identifier (anchor) position on the current document.
Note: a linking href must use a leading # after the document name (see Examples - 1,4,7,8)
further Fragmentation Identifier
The id attribute in the start tag of A (and other elements) identifies a reference position in the document. Name (or id) must be unique for the document. When linked using the fragmentation identifier, the browser shows the start of the fragment at the top of the display.
id=text
Example:
- signifies a fragmentation identifier position on the page.
Note: the linking href must use a leading # after the document name (see Examples - 1,4,7,8)
rel= text
Specifies the relationship between the current document and the target URL.
Example: rel=index
Options: alternate,designates,stylesheet,start,next,prev,contents,index,glossary,copyright, chapter,section,subsection,appendix,help,bookmark
rev= text
Specifies the reverse relationship between the document and the target URL
Example: rel=subsection
Options: alternate,designates,stylesheet,start,next,prev,contents,index,glossary, copyright,chapter,section,subsection,appendix,help,bookmark
target= text
Example: target="_blank" - retains 'stickability' and hence generally preferable.
Options: a href="URL" target="_blank" creates a new window of default size
a href="URL" target="_parent" targets the frameset in which the current page belongs
a href="URL" target="_self" targets the current window
a href="URL" target="_top" targets the main browser window, eliminating all frames
title= text
The text displayed when the mouse hovers over the text-link (mouse-over tool-tip).
Note: In the case of a graphic link (depending on the browser), the ALT attribute of the IMG tag may take precedence.
Example: title="Tool Tip displayed on hover" - when the mouse hovers over the link, a tool tip is displayed.
Mouseover Tool Tip
* an exciting description can encourage the user to investigate the link
* use to give extra information
Anchor Tag hypertext link
hypertext as text
Example: Anchor tag definition - SEs use linking text as keywords to categorise the content of the link. Decide which are the most appropriate keywords for the content and use them in the link text.
Link-text content
* One way to improve your Search Engine ranking.
* Carefully select appropriate, hypertext keywords within the website.
* Ask external link creators to use your own, selected, keyword-rich anchor-text in their external hypertext link.
Link-text appearance
* length can be controlled by incorporating the line return character
* change font characteristics using CSS (see below)
hypertext as graphic
Note 1: Always specify IMG attributes width, height, alt, border.
Note 2: According to the browser, with the Tool Tip the IMG, alt attribute may take priority over the A, title attribute.
Homepage Example: 
- image is bordered by the link colour if border=0 is omitted.
Homepage Example:
- use border=0 to eliminate link-colour border to graphic.
Homepage
Home
Example:
Home
- a combination of graphic and text is often used to clearly identify the hyperlink.
Client-side mapping
By moving the cursor to different parts of the graphic, different links can be created.
See the IMG tag attribute usemap for further information.
Web link legacy and consistency
In the early days of the WWW, links were all coloured blue and underlined. Users still expect text of this colour to operate as a link, so to meet their expectations and to give them confidence when using the site, it is recommended that link text throughout the site is generally coloured blue.
Such a global feature should be coded in a Linked CSS stylesheet.
Dynamic link - styled attributes
To attract the user's attention, and to confirm that a hyperlink exists, it is always good policy to make the hypertext dynamic.
These sort of changes are particularly powerful for the navigation components, which could involve contrasts of the 'a hover' and 'a' css properties and values. However dynamic changes which could drastically affect nearby text and alter the layout (e.g. font-size) are not recommended.
Example:
Homepage
Home The style attributes for the link text and graphic can be selected so that a mouseover produces a dynamic change of appearance.
This graphic has a transparent background, with the 'white' background-color showing through.
On 'hover' the background-color changes from 'white' to 'purple' with the link-text font-color changing from 'blue' to 'orange'.
Note: IE produces the expected result, Firefox makes transparent only the lower half of the graphic.
Linked CSS style sheet Pseudo-class selectors
Currently these are: hover, active, link, visited, lang, focus
The first four are directly relevant to an anchor tag link.
A linked style sheet contains declarations of global properties and values.
Example:
a:link {color:#0000CC; text-decoration:none; font-weight: bold; }
a:active {color:#FF0000; text-decoration:none; }
a:visited {color:#660099; text-decoration:none; font-weight: bold; }
a:hover {color:#FF9900; text-decoration:none; background-color: white; }
Note: use of the COLON rather than the usual full stop.
Varied CSS link tags
In general, it is very confusing for the user if the link tags vary throughout the website, but in exceptional cases this may be required.
On a linked style sheet an alternative set of parameters could be defined for the anchor attributes.
Example:
a.exc:link {color:#0000CC; text-decoration:none; font-weight: bold; }
a.exc:active {color:#FF0000; text-decoration:none; }
a.exc:visited {color:#660099; text-decoration:none; font-weight: bold; }
a.exc:hover {color:#FF9900; text-decoration:none; background-color: purple; }
Notes:
* See above example in 'Dynamic link - styled attributes'. On 'hover' the background-color is 'purple' rather than the usual 'white', making 'hover' dynamic - on a white, transparent-background, graphical link.
* Coded using the class="exc" notation.
e.g.
Use CSS to change link characteristics
On rare occasions, it may be necessary to change locally, the global characteristics inherited from the linked stylesheet.
Change the static anchor-text attributes
The anchor-text can be changed within the anchor coding using CSS attributes.
This could involve:
color style="color:red;" font color
font-family style="font-family: times new roman;" font-family
font-weight style="font-weight: bold;" bold
font-style style="font-style: italic;" italic
font-size style="font-size: x-small;" x-small
text-decoration style="text-decoration: underline;" underline
background-color style="background-color: #ffccff;"
No comments:
Post a Comment