LESSON 2: LINKING AND IMAGES

< Back to table of contents              
<Previous lesson              Next lesson >

HTML RESOURCES MATERIAL FOR GETTING STARTED:
Online HTML Reference Guide

On the Web:
· Webmonkey (www.webmonkey.com)
· HTML writer's guild (www.hwg.org)
· CNET's Builder.com (builder.cnet.com)
· World Wide Web Consortium (www.w3c.org)
· Lynda.com (www.lynda.com)

Printed material:
Elizabeth Castro, HTML 4.0 for the World Wide Web: Visual QuickStart Guide, PeachPit Press.

Today's concepts:
Creating links
Links have three parts: a destination (where the user goes when they click), a label (the part that the user sees and clicks) and a target (determines where the page will be displayed.

Note: Names and URLs are case sensitive and all "quotation marks" and hashes # must be included.

You can create four types of links in your documents:

HTML Links
ABSOLUTE LINKS:
LInk to other documents on the web <a href= "http://www.cea.edu">Center for Electronic Arts </a>

RELATIVE LINKS:
Local documents on your web server <a href= "page02.html">The link text goes here</a>

ANCHOR LINKS:
Jumps to a place within the current document (Internal links) First, name the section, (this is sometimes called an anchor or target) using <a name= "name">Set up your name here </a>Then refer back to that section using <a HREF= "#name">The link text goes here </a>

ANCHOR LINKS:
Specific places in other document First name the section using <a name= "name"> Set up your name here </a>Then refer back to that section within the file using <a HREF= "filename#name"> The link text goes here </a>

MAIL LINKS:
Links people to your email address <A HREF="mailto:youremail@hotmail.com"> Youremail@hotmail.com</a>

Note the filename depends on where in relation to the source file the link file is. If it's in the same folder, you simply type in the filename. If it's in another folder you need to include the path from the source file to that folder as well as the filename.

Image formats
Browsers read images in the GIF, JPEG or PNG formats. You will need to convert your images to these formats before adding them to your page. It's important to add the .gif or .jpg or .png extensions to your filename otherwise the web browser won't recognise it as an image file.

To convert images to these formats you can use image-editing software like Adobe PhotoShop (on Windows or Mac), Fireworks or Image-Ready.

Add images to your web pages:
Use the <IMG SRC> tag:
<img src="images/noirdesignlogo.jpg">

This is the image tag where "noirdesignlogo.jpg" is the name of the image, located in the images folder in your directory. (Note there is no closing tag). If the image file is in the same directory, you don't need to include the path to the images folder.

There are a number of attributes you can use with this tag:
src="nameofimage":
Required tag which locates the source of the image.
alt="text":
Displays text if the image is not displayed and when someone puts their mouse over the image
Align=top:
Aligns the image with the topmost item in the line
Align=texttop:
Aligns the image with the top of the tallest text in the line
Align=middle:
Aligns the middle of the image with the baseline of the text
Align=absmiddle:
Aligns the middle of the image with the middle of the largest item in the line
Align=bottom:
Aligns the image with the bottom of the line
Align=baseline:
Aligns the bottom of the image with the baseline of the text
Align=absbottom:
Aligns the bottom of the image with the lowest item in the line

Linking Images
You can make an image link to an outside Web site by including the <img> tag inside the opening and closing parts of the link tag. In the following example, the image will link to the CEA Web site:

<a href="www.cea.edu"><img src="images/noirdesignlogo.jpg"></a>

Once the image is "hot" (linked), it has a border around it. You can remove the border by including border=0 in the img tag.

Add a background to your page
Adding color to the Background
There are a couple of ways to add decoration to the background of your Web page:
· Specify the color you want, for a solid color background. OR
· Use an image file for a tiled-image background.

Solid color backgrounds
To specify the color of the background, you add the bgcolor attribute to the <body> tag:
<body bgcolor=#000000>

You can specify the color to use by either using the hexadecimal code for the RGB value or the name of one of the predefined colors (black, white, yellow, red, blue, green, maroon, silver, lime, gray, olive, navy, purple, teal and fushia). You can use PhotoShop to translate colors into hexadecimal codes.

Image backgrounds (tiled)
You can insert an image file instead of a solid colored background and the browser will automatically tiles to fill the screen. To specify an image as a tiled background, you add the background attribute to the <body> tag:
<body background="gradient.gif">

Change the color of your text and the text linking colors
Change text color
As well as changing the background color, you can also change the color of the body text and the link text using the following attributes in the <body> tag. Remember with these attributes you must use the hexadecimal code for the color, or one of the predefined color names that most browsers recognise:

text: changes the color of the body text (that is not a link).
link: allows you to change the color of unfollowed hyperlink text
vlink: changes the color of followed (or visited) hyperlink text
alink: changes the color of active links (when the mouse is pressed on a link)

<back to top>