Different kinds of Links

Absolute links and relative links

Links are the HYPER part of hypertext. They are very important to web pages as they are what make your pages interactive and link up so easily to other information. Links link to another web pages, a directory relative to the current directory or a directory relative to the root directory. A link can also link to information somewhere else on the same web page.

To make links we use the anchor-tag <a>, with the href attribute. The syntax of the hyper reference is as follows:

The opening anchor-tag, <a followes by the href attribute which is followed by an equals sign. The link is surrounded by quotation marks following the equals sign and then an angled bracket closes the opening tag. The text that becomes clickable follows the closing bracket of the opening tag and precedes the closing tag. Whoa, that's kind of confusing. Here it is in plain typing:

<a href="web address or path to file"> clickable text</a>

Creating Links

The Gender Changer Academy	<a href="http://genderchangers.org">The Gender Changer Academy</a>
links	<a href="links.html"> links</a>
one directory higher	<a href="./index.html"> </a>one directory higher
thumbnail photo of a willow leaf sunflower	<a href="./images/wlsunflower_small.jpg"> thumbnail photo of a willow leaf sunflower</a>
email Tali at The Gender Changer Academy	<a href="mailto:tali@genderchangers.org">email Tali </a> at The Gender Changer Academy

Adding Images

I always have trouble designating the file path to an image. I think it is a mental block. Usually, I have to play around with all my hyper references and paths to images once I publish the web page to make sure all the links are working. It's a good idea to make a central directory for all your images to make it easier on yourself. If you put all your images in the same place then it should be easier to figure out the path to those files from different places on your web page. I have created a directory called "images" at the same level as the index.html file for this web page and put all the images there. In a file path like this "./images/talibug.jpg" the dot means "one-directory level up". Another thing to keep in mind is use a small image that will actually fit into the browser window and will load quickly.

	<img src="./images/talibug.jpg" alt="Tali and her bike" />
	<img src="./images/duckiecake_small.jpg" alt="thumbnail photo of Isolde's duckie cake which was decorated by Tali." /> Note: Images align to the left of the data cell by default.
	<img src="./images/tali_harriet_tb.jpg" alt="thumbnail photo of Tali and the wallmount pc, Harriet, built in September 2002 at the next5minutes" /> Note: I have used the ALIGN-attribute to align the image to the right hand side of the data cell.
	<img src="http://www.genderchangers.org/lib/reader/hardware_course/img1.png" alt="a line drawing of a gender changer" /> Note: I have used the ALIGN-attribute to align the image in the center of the data cell.