All About links
<a href ="http://www.whereever.com"> In between the code is the visible text of the link. </a>
Simply a pointer from one page or file to another page or file or document (sound, video, image, etc).
referring page (where you are)
target (where you are going)
Three ways to make links
- Insert bar
- Properties Inspector
- Point to file
Kinds of links: Relative, Absolute, Site relative and Anchors
Specifc links for specific purposes.
Absolute Links
http://www.designinteract.com/sow/
Describes an absolute address. Always use for a link that refers outside of your site.
Relative Links
../courses/myfile.html
myfile.html
Describes an address relative to the referring file. Use when linking within your own site or directory.
../ means jump one directory
../../ jump two directories
Site Relative Links
/sow
Links are coded relative to the root folder of the site. Good for navigation bars.
Anchors
#bottom
thefile.html#bottom
Point to a specific section within a page. Or to a specific section within another page. Here is an example.
To create an anchor do this
- Select the chunk of text that you want to be the anchor (the destination)
- Put your cursor next to it and choose the anchor icon from the Insert panel
- Name your anchor. Keep the name short, no spaces, no illegal characters.
- Select the item that links to the anchor
- Either use point to file or type in #anchorname in the link box
- That's it.
Not Just for text anymore-Images as links
Due to downloading constraints, keep this to a minimum. Good for logos, navigation bars.
An image that is linked with no border. You must assign a border of = 0.
An image that is linked and has a border of 1. I specified the border color in the code. Otherwise the border color is your default text color. You can make the border as large as you like.
border = 10
Image maps
A way to use different sections of one image to navigate to multiple locations. Like this. We'll go over this in more detail when we study image compression.
Deciding how your links will look
GO TO: MODIFY| PAGE PROPERTIES
Visited links
This is what your links look like after they have been visited (or followed)
Rollover links
This is also called a "hover state" what the link looks like as the mouse rolls over or "hovers" over it. Not supported by all browesers, but code it anyhow.
Active links
Describes the state of the link as it is being clicked on
Underline style
This is a personal choice, but I think underlined links are really annoying. Most users are savvy enough to know a link when they see it. Heaven help you if you make your links blink.
Helpful hints about links
- Make your links make sense
- Don't make them really long, it's annoying. Really annoying, actually. I mean who would do such a thing?
- PAY ATTENTION to what kind of link you are making!
- File hierarchy is everything.
Linking to an email address
The code is simple. Highlight the text you want to link and type mailto:emailaddress@yahoo.com
You can do the same thing by clicking the letter icon on the Insert Panel
making links open in a new window
When you create your link, choose a target.
_blank
This opens a new, blank window. Use this sparingly. Why do you want viewers to leave your site?
_Top
Opens in the referring page. This is the default. If you don't choose anything, this will happen.
The other choices refer to pages with frames, something you learn later.