CGS 3063 HTML tutorial QuickRead 6

QuickRead 6: Adding links and images to your Web Page

Adding links <a href="url">

The World Wide Web is not called a web for nothing. Everything is linked. Well, almost everything. Here's how you can add yours:

Visit CNN
<a href="http://www.cnn.com">Visit CNN</a>

Have you heard of Anggun
Have you heard of <a href="http://www.anggun.com">Anggun</a>

The Harn museum of art proudly presents it's latest exhibit.
The Harn museum of <a href="http://www.arts.ufl.edu/harn/">art</a>proudly presents it's latest exhibit

What ever you have between the opening <a href> and the closing </a> tags gets underlined and turns blue or to whatever color you had specified for the links in the body tag. This is now a clickable link.

The <a href> tag needs to be given a unique resource locator or url (more familiarly known as the address) to reference. http://cnn.com, http://www.anggun.com etc.. are url's. There are two ways you can have your url's specified. You can list the entire path starting from the http:// and onwards. Or, if you are already in a certain directory(in our case, for the most part, it should be the same directory as index.html, i.e. the public_html directory) and you would like to reference a file that is also present in the same directory, we could just specify the name of the file to link to. However if the file we are linking to is in a directory one level down from public_html, then we would need to specify the name of the directory and then the file name.

Let's assume you have two files in your public_html directory: 1. index.html and 2. myfriends.html. To reference myfriends.html from index.html you could say:

<a href="myfriends.html">friends</a>
or
<a href="http://grove.ufl.edu/~c3063xyz/myfriends.html">friends</a>

If you had a directory called connections within your public_html directory and myfriends.html was a file in that directory, you would then use the following:

<a href="connections/friends.html">friends</a>

Alternatively, you could also have specified the entire path like:

<a href="http://grove.ufl.edu/~c3063xyz/connections/friends.html">friends</a>

Again, don't forget that all files to be used on the web page need 644 permissions while directories need 755.

Adding email links <a href="mailto:emailaddress">

This is an easy one. You create an email link in a very similar way to creating a link to another page. The general syntax is

<a href="mailto:emailaddress">

So for example, the assignment address of this class is u3063bnk@grove.ufl.edu; to create an email link you would put

<a href="mailto:u3063bnk@grove.ufl.edu">

somewhere between <body> and </body> That creates the link. However, you need something for the link to be hooked to, ie something for the user to click on just like with a regular link. Something like
<a href="mailto:u3063bnk@grove.ufl.edu"> Email me </a>

Adding Images <img src="picture name" attributes>

Adding images is pretty straightforward. Once you have the neccessary images residing in either your public_html or another directory below, you would reference them by either specifying the entire path or relatively, just like we did with the links.

<img src=picture1.jpg align=right>

Unless you are experienced at calculating precise scaling percentages, don't try to use the width and height attributes. Use a photoeditor like Photoshop or Paint shop pro to make your picture smaller or larger. Also depending on the resoulution you saved your picture at, you would get a mosaic if you enlarged the picture beyond a certain limit. Using photoeditors also lets you adjust the number of colors in the picture which can reduce the amount of time it takes to download the picture (by reducing how many bytes it takes up).

<img src=picture1.jpg width=700 height=80>

For our example we use a jpg picture (jpeg) but you can also use a gif file. Don't use bmp files as they show up only on the Internet Explorer. Likewise, don't use art files as they only show up for AOL users (typically). If you have a picture in a format other than jpg or gif use a photo editer to change/convert the format/type of the picture (Paint which comes with windows can change bmp to jpg). The <img> tag does not have a closing tag.

You can use an img tag between the <a href= ...> and </a> if you want to make a picture into a link.

<a href="flowers.html> <img src=picture1.jpg> </a>
Notice that the picture has a border of the same color as your links. This is to let the viewer know that the picture is a link.

If you want some text to pop up when the mouse is over the picture, use the alt attribute of the img tag. If you want multiple words to come up make sure you use quotation marks around it (without the quotes bad things happen).

Get behind the wheel!

Try typing out the following. Also use your own stuff. Be imaginative!

<html>
<head><title>Pictures and Links</title></head>
<body bgcolor=gray text=white link=orange alink=yellow vlink=purple>

Ode to the <a href=http://www.cranberries.com>Cranberries</a> 

The <a href=http://www.apa.org/>Psycho</a> league. 

<img src=http://grove.ufl.edu/~u3063bnk/tutorial/pat.jpg > 

<img src=http://grove.ufl.edu/~u3063bnk/tutorial/missy2.jpg > 

<img src=http://grove.ufl.edu/~u3063bnk/tutorial/max.jpg > 

</body>
</html>

Index