1. coding links
Use the <a> tag. This is an inline tag, so even if you want a link standing alone in its own paragraph you must still enclose the <a> in a block-level tag.
You always need the href attribute to indicate the destination of the link. The value of this attribute varies depending on the type of link: all of these have their own detailed page in the online materials.
- for internal links, the value is a filename, e.g. href="nextpage.html". Never include drive letters like "m:". You can use this to link to other file types like Word documents, PDF files, images and so on as well.
- for external links, the value is a URL, e.g. href="http://www.leeds.ac.uk". Always include the "http://".
- for anchor links, the value is a named anchor point in the file prefixed by the hashmark (#), e.g. href="#top". Remember that you must include a tag which actually defines the anchor, in this case <a name="top" />.
- for mailto links, the value is "mailto:" plus an e-mail address, e.g. href="mailto:drew@comp.leeds.ac.uk".
PRACTICAL EXERCISE: Try adding a link to your "film quotes" page (or to whatever else you've started working on by now). For example, a URL of other quotations about cinema is http://www.quotegarden.com/cinema.html. Try adding an external link to this site from your own. Or, try creating a second web page, saved alongside your first with a different name. Then create links between the two pages.
|
2. styling links
The page on pseudo-classes has more detail here and you should read it after the lecture. But briefly:
...there are two main "classes" of link, and the browser can apply a different style to each. These are:
- what the link text will look like before you have visited the linked page. This is defined by the pseudo-class a:link.
- what the text will look like after you have visited the linked page. This is defined by the pseudo-class a:visited.
You really should ensure you define both as otherwise browsers will use their default settings and this may not match the colour scheme of your site. You can define them as the same colour though, if you want.
A third pseudo-class, a:hover, is also useful.
Remember that <a> tags are inline tags and will therefore inherit properties off whatever block-level tag they are contained within. a:hover will also inherit properties off the other two pseudo-classes. There are some examples of link styling on the handout.
PRACTICAL EXERCISE: go to your style sheet and add properties for at least a:link and a:visited. Try a:hover as well if you want. You can play around with a number of different things: text colour, font, what happens with the hover and maybe use text-decoration: none to try turning off the underlining (browsers default to underlining links). Try also seeing what is inherited off other tags when you add links inside block-level tags.
IF YOU HAVE ANY DIFFICULTY WITH THIS - carry on with the lecture. The online teaching materials will give you further examples and, after the lecture, you can read them then run through these exercises again until you're confident with coding and styling links - with the help of a demonstrator if you require it.
|
