Lesson 5

Now we come to the fun part. A page with just text isn't too much fun. Let's take a look at how to spice up your page with pictures and links.

<IMG SRC="picture.jpg"> (no closing tag required)
This is the basic tag for inserting a picture into the document. Wherever you put this tag is where the picture will appear on the page. There are quite a few options you can use with this tag.

WIDTH=width
The width of the images, in pixels. If you put a different value than the actual width of the image, it will stretch it to the width you say. You should always use the width tag. The reason is simple. By specifying a width, the browser will know what size it is before it loads, and can go on putting the text on the page around it. This helps to keep your page loading quickly. Most graphics programs will tell you the size of your image.
HEIGHT=height
Same as width, only height (surprise!).
BORDER=0
This keeps a border from being put around the image. The only time you have to worry about this is when you use an image as a link. If you do this, the image will have a blue border around it to indicate it is a link. Using this option will get rid of that blue border.
ALT="text"
The ALT tag is used to display a description of the picture for text based browsers. On graphical browsers, the text will pop up in a caption box when a mouse is over the image.
ALIGN=alignment
This aligns the image with the text around it. The valid aligments are bottom, top, left, right, and middle. The image will be aligned with the part of the image you specify in line with the text around it. For example, if you say left, the image will be aligned to the left with text along side it to the right. Please note that some browsers interperate these alignments differently, so results may vary.

Now let's take a look at linking. Links are those fun little thing that take you to a different page when you click on them. The basic link tag looks like this

<A HREF="http://link.to.somewhere">The is the link text</A>

The A HREF stands for A HyperReference. Whatever you put between the tags will be what is clicked on for the link. There are a couple of ways to specify where the link is. First, if it is in the same direcotry as the current page, just do this:

<A HREF="page2.html">Go to the next page</A>

If it's in another directory in your WWW directory, do it like this:

<A HREF="/~username/direcotry/page2.html">Go to the next page</A>

The /~username will point the browser to your WWW directory. Then the /directory part will tell it to look in a directory in your WWW directory. Finally, it will look there for page2.html.

Finally, if you want to link to an external page, just do this:

<A HREF="http://www.yahoo.com">Yahoo</A>

A quick tip on linking: if you want to spaces between the link text, do this:

If you want to use an image as a link, just put an image tag between the link tags like this: This is a <A HREF="http://link.to.somewhere">link</A> in the middle of a sentence. And not this: This is a<A HREF="http://link.to.somewhere"> link t</A>in the middle of the sentence. Doing the latter may cause the spaces to not be displayed on some browsers.

<A HREF="http://link.to.somewhere"><IMG SRC="mypic.jpg"></A>

The link tag has very few options. The only one I can think you might use is the target option. For example, if you do this:

<A HREF="http://www.somewhere.com" target="blank">Go to somewhere</A>

When the link is clicked, a new window will open up and load the linked page. The only other use for target's is when using frames, and since frames have no place on a web page, we won't talk about that.

You can also link to a location on the same page. To do that, you first need to specify a location to link to. You do that like this:

<A NAME="top"></A>

This is called an anchor. After defining that anchor, you can then link to that location on the page by doing this:

<A HREF="#top">Go to the top of the page</A>

When someone clicks on that link, they will magically be taken to the top of your page.

The last thing you can do with linking is set up an e-mail tag. It looks like this:

<A HREF="mailto:ccunning@socrates.math.ohio-state.edu">E-mail me!</A>

When this link is clicked on, it will open the visitor's default e-mail program and stick your e-mail address in the To: window.

Back: Lesson 4-Formatting

Next: Lesson 6-Tables

[Introduction] [Lesson 1] [Lesson 2] [Lesson 3] [Lesson 4] [Lesson 5] [Lesson 6] [More Resources]

Send questions or comments about this site to website@socrates.math.ohio-state.edu Copyright © 1998, Calculus&Mathematica