Assignment 3: Images

Words, images and links are the three vital components of Web Pages. Words are essential. If there is not a good idea and it is not expressed clearly, then the page will have a short life span. Images and graphics can bring the words to life and add some spice to ideas. Links are the essence of the Web: both internally to your own page, but to other sites as well.

Linking is related to locations on servers and on directories and sub-directories within those servers.

How do you make some text link to another page?

An Image Link

Below is an image. Its name is "tedlogo.gif".

I will use it as a link to the first HTML assignment page. To replace the text in the link above with the tedlogo.gif image, you simply replace the text that would appear on the page with an image command calling for the tedlogo.gif image.

This is the html code: This is what it gives you:

<A HREF="assign1.htm"><IMG SRC="tedlogo.gif"></A>

First, the image is placed on the page with the "IMG" tag. "SRC," which simply means "source," tells the computer where the image we want is located. The "IMG" tag is then sorrounded with the "A HREF" tag linking it to the first assignment page. Go ahead, place your pointer over the image. It's active and it points to the first HTML assignment page. You're done... Almost.

Removing the Blue Border

Look at the image above. See the blue border around it? That happens when you make an image active. Remember that when you make text into a link, that it turns blue? Well, that's what happens here. If you like it - great. You're done. I think it looks unprofessional in some cases. I get rid of it.
Here's how:	Here's what it looks like:
<A HREF="index.html"><IMG BORDER="0" SRC="sally.gif"></A>
Notice all I did was add the command BORDER="0" inside the image command, right between the IMG and the SRC. That sets the blue border around the active image to zero. Now, if you'd like, you can go the complete opposite way and write in BORDER="50". That will give you a huge blue border. Lay your pointer on the image - it's still active, but no blue. That looks much more crisp.

More Commands
You can add any of the following commands using the same format as the BORDER command:

WIDTH a numeric value that specifies the width (in pixels) you would like the image to be.
e.g. WIDTH="258"

HEIGHT a numeric value that specifies the height (in pixels) you would like the image to be.
e.g. HEIGHT="147"

ALIGN this command can take the value of either LEFT or RIGHT depending on where you want the image to be aligned on the page.
e.g. ALIGN="RIGHT"

Isn't html fun! ;)

I will use it as a link to the first HTML assignment page. To replace the text in the link above with the tedlogo.gif image, you simply replace the text that would appear on the page with an image command calling for the tedlogo.gif image.
This is the html code:	This is what it gives you:
<A HREF="assign1.htm"><IMG SRC="tedlogo.gif"></A>
First, the image is placed on the page with the "IMG" tag. "SRC," which simply means "source," tells the computer where the image we want is located. The "IMG" tag is then sorrounded with the "A HREF" tag linking it to the first assignment page.	Go ahead, place your pointer over the image. It's active and it points to the first HTML assignment page. You're done... Almost.

WIDTH	a numeric value that specifies the width (in pixels) you would like the image to be. e.g. WIDTH="258"
HEIGHT	a numeric value that specifies the height (in pixels) you would like the image to be. e.g. HEIGHT="147"
ALIGN	this command can take the value of either LEFT or RIGHT depending on where you want the image to be aligned on the page. e.g. ALIGN="RIGHT"