|
Home : Tutorial Ten : Next Tutorial Tutorial Ten: LinksThe
Anchor Tag When reading a book there is no question about which way to turn the page. On the web the only way to get around is to use links - or hypertext - just as you have been doing in this tutorial series. If all formatting, graphics and other considerations disappeared from the web, hypertext would still have to exist a navigational necessity. The Anchor TagThese links are created by using anchor <a> </a> tags either with text - a word, group of words or entire sentence - or with graphics. The resulting link can be to:
This tag has three attributes - href, name and target - and must have an end tag. If no end tag is present, the browser considers the rest of the page to be part of the link. Once a link is created, it is displayed in the browser as underlined, or in the case of a graphic, surrounded by a link border. When a mouse is placed over a link, the mouse pointer changes to indicate the link can be clicked. The action of depressing the mouse activates the link - displaying its active color- and the browser initiates the required action. The browser 'remembers' that the link was activated and when a visitor returns to the page, displays the visited link color as a reminder that the link has been clicked. The status bar along the bottom of the browser window displays the full URL of a link, unless a javascript 'window.status' command has been added to the document. (This script overrides the status line with a description determined by the author). Please note: In the examples below the link elements wrap to a new line for the sake of clarity - in actual html it is important not to wrap any link syntax. This may cause an unwanted underline appearing as an orphan on the page. Keep the entire link reference on one line. HREF - Hypertext Reference
HREF (hypertext reference) denotes a reference file that you wish to point to while URL (Uniform Resource Locator - the address of a unique resource somewhere on the web) will be the location of that file, whether that be a relative or absolute reference - a topic we covered in Tutorial 2. The reference must be enclosed in quotes. HTTP specifies the protocol (sometimes called a scheme) to be used - in this case http. Others that are common are ftp and mailto. The link to the Science Faculty page is an absolute link - no matter which website you click from, the document is accessible. It is necessary to use such an address if linking to a document or file that exists outside of your own website. The link to the course index is relative - it can only be found from within this website because it is being referenced from within this site. It is not necessary to use an absolute reference in this case; although this would work, there would be no apparent difference to visitors, and as mentioned previously there are other issues to be considered when using relative or absolute links. Named AnchorsThe name attribute works in two parts and is necessary if you wish to link to an exact point in a document, either from within the document itself, or from elsewhere in the site. The first part marks or names a point on the page so that it can be referenced. The name is irrelevant, although something meaningful is useful, and can be alphabetical or numerical. For example, at the top of this page there is a list which mimics the topic headings on this page - they are named links to the headings, allowing you to 'jump' to any given section. The name must be enclosed in quotes. At the bottom of the page we have inserted a named anchor:
which brings you back to this point by use of a second named anchor pair. Note that to anchor a point you do not have to enclose anything specific within the start and end tag - you are simply marking the spot. Unlike an HREF link, if you were to enclose a block of text or graphic with a named anchor, it would not be marked with underlining or a link border. To refer to that anchor we must state it's name exactly and place a hash ( # ) before the name: the user needs something to click to get to the anchor - whether that be text or a graphic - which must be enclosed by the start and end tags. To link to a named anchor on another page the process is the same except that the href will point to that page (in this case index.html) and the anchor mark (in this case jump) - don't forget to add the hash in front of the anchor name:
Targeting a LinkLinks can be targeted or told where to load new information. This is commonly used with frames - a method of displaying the content of a number of pages simultaneously in one browser window which will be discussed in the advanced section of this course. By default a link will cause a new page to load and replace the content of the current page. Specifying the target attribute as _self performs the same function:<a href="http://www.sci.monash.edu.au" target="_self">This attribute supports a few variations however - the most useful one causing new content to load in an entirely separate browser window which opens automatically, leaving the original page open and as it is. The target attribute for this is: <a href="http://www.sci.monash.edu.au" target="_blank"> Creating an Email LinkIt is a simple exercise to display contact email addresses on a web page - for example: wendy@sci.monash.edu.au. This is indeed useful information, however in order for it to be used in a practical sense, it must be either written down on paper or cut and pasted into an email program by the visitor. How more beneficial and convenient would it be for visitors to be able to click the email address as a link and automatically launch the email program configured on their own system! Thankfully this is easy to accomplish with the use of the mailto scheme or protocol:
The syntax is very similar to ordinary linking, with the anchor tag and it's href attribute, and again the actual link can be text, the full email address or a graphical icon. The third example demonstrates how to simultaneously generate an email to two different email addresses. The fourth is the correct format for applying a preset subject line in the generated email - the result being that Tutorials appearing in the new email as the subject. Graphical Links
Links can be applied to images as easily as they can be to pure text. Use your mouse on the images above. The syntax is exactly the same - the reference to the image sits in between the <a> and </a> tags, either as a page link or an email link. Using images will be covered in detail in the next tutorial.
In the
visual example above the first button has an obvious border - the default
link border produced as a substitute for the automatic underlining that
occurs with link text. Usually not desired (as it spoils the hard work
put into your graphic!), this can be turned off by inserting border="0"
within the img tag. Links to Downloadable FilesFiles in many different formats can be pointed to from within a browser, making them available to the general public viewing your page. These could include compressed files (ie zip or stuffit), PDF (portable document files), video or audio formats. As long as you supply information as to what is required once the file downloads from the host computer to the visitors computer (for instance any third party plugins) it is easy to create a link directly to the file itself. The link simply points to where the file resides on this server:
Link AppearanceLinks stand out due to their color and underlining. We discussed link colors when reviewing the body tag in Tutorial 4. The color is determined by:
No matter what color you choose for links, retain consistency across the entire site for the benefit of your visitors. Links are an important consideration in the design of a website, taking into consideration their color, placement and form. This tutorial series was authored by Wendy Phillips It is copyrighted which means you may not pinch any of it |
