Third Grade HTML - Links and Graphics

Welcome to Third Grade HTML. This document will teach you how to incorporate links into your html documents. Links allow your html document to reference other computer files or parts of them, either to display them when it displays your document, or to allow you quickly to load other files.

A Little History

The Defense Department people who first invented the Internet didn't know what to use it for, so one of them invented e-mail to make it useful. At first, people looked for documents by sending e-mails to each other and asking about what they were interested in. Later on, a physicist in Switzerland invented hypertext to make it possible to make html documents with reference links in them. This allowed readers automatically to link to other documents, which created the World Wide Web. Today there are hundreds of billions of documents that people can easily find on the World Wide Web. The number of them doubles every few months. The web search engine Google currently has references to over 40 billion! (When I first wrote this, it was four billion!) They claim to have identified a trillion addresses, but some of them are duplicates, some of them are spam, and some of them are not worth indexing for a variety of other reasons.

Since the first popular use of the Internet was to send e-mail, we're going to learn how to incorporate a "mailto" (e-mail) link into an html document. This link launches your e-mail client, opens a new e-mail window, and inserts an address in the new message. You can type the e-mail message, send it or save it, and continue reading the html document. Of course, this works only if you have an e-mail client program to begin with. If you don't, clicking on this link does nothing.

Anchor Tags

The most basic part of this link is an anchor tag, <a>. This is the beginning tag. The ending tag is </a>, as expected. These tags begin and end the link element, which contains the text you click on to make the link work. There are anchors that don't contain any text, so they don't have an end tag. We'll get to those later.

"Mailto" Links

Like a ship's anchor, the anchor tag doesn't do anything unless it's connected to something, called an attribute. In the case of the mailto element, the required attribute is the html reference, which tells your client what the element links to. It is identified by "href=", so the tag "<a href="mailto:wizard@lindorfer.us">" identifies the html reference "mailto:wizard@lindorfer.us." This tells your client that you want to send an e-mail message (mailto) to "wizard@lindorfer.us." The colon (:) between "mailto" and the address is very important: if you forget it, the link won't work and your client will get confused. Whatever comes after the beginning tag is what you click on. There has to be an end tag (</a>) so that the client doesn't get confused and make the rest of the html document part of the link element.

Let's see how this works. If you open this document you can click on the link that says "e-mail link" and open up your e-mail client. If nothing happens, you either don't have an e-mail client, or it's not working right.

<html>
<head>
<title>
An Example of a "mailto" Link
</title>
</head>
<body>
This is an example of an <a href="mailto:wizard@lindorfer.us?subject=This is the Subject">e-mail link</a>
</body>
</html>

If everything worked correctly, you should have a new message window open that is addressed to "wizard@lindorfer.us," with the subject: "This is the Subject" which you can close, or type something in the body and send it or save it to edit later.

E-Mail Subjects

While we're on the subject of e-mail, you should always use your e-mail subject line to identify what the message is about. Subjects like "Congratulations!" or "Important Message!" (or no subject at all) tell the recipient nothing. "Congratulations on Your High School Graduation!" or "Important Message About Your Internet Account" are OK. Some clients simply delete messages with bad subjects. The mailto link might not insert a subject because it doesn't know what you're going to write about. You have to decide that. On the other hand, if you want to insert a subject in the e-mail that someone sends to you, you can add the string "?subject=[whatever the subject is]" as shown in the example. In this case, "[whatever the subject is]" is simply, "This is the Subject."

Reference Links

Probably the most important link of all is the reference link. It uses the anchor tag and html reference element to identify an address of a document on the Internet. This address is called a "Universal Resource Locator," or "URL" because it enables your client to locate the document regardless of where in the universe it is. Clicking on this link loads and displays that document. An example of such a link is "<a href="http://lindorfer.us/wizard/index.html"></a>. " This would create a link in a document, but you couldn't see it because it doesn't specify anything for you to click on. To use the link, you have to click on something, such as "<a href="http://lindorfer.us/wizard/index.html">something</a>. " The word "something" would show up as a link in the document, and clicking on it would load and display whatever document is addressed by the URL "http://lindorfer.us/wizard/index.html." For example,

<html>
<head>
<title>
Visible and Invisible Reference Links
</title>
</head>
<body>
This is an example of an invisible reference link: <a href="http://lindorfer.us/wizard/index.html"></a> 
This is an example of a visible reference link: <a href="http://lindorfer.us/wizard/index.html"> with some words that you can click on to activate the link</a>.
</body>
</html>

Try it out.

Note that the invisible link is in fact invisible and the client makes the second link look different from the rest of the text so that you know that it's a link and clicking on it does something.

An important thing to remember is that the link that you see is whatever the author of the document decided to put there. It has nothing whatever to do with the actual html reference URL. This is because the client (program) must know the URL to find the document it refers to, but the reader (you) doesn't necessarily have to. The URL may be long and complicated and hard to remember, and it may change as the author updates his document. The author may want to refer to a certain URL in various ways, so this method of creating links allows the author to make the link look like anything he wants to and still follow the rules that the client understands for finding documents on the Internet.

"Sneaky" Links

Some dishonest people try to trick their readers by making a link look like a html reference URL, when the real URL is something else. Take a look at this example:

<html>
<head>
<title>
"Sneaky Links"
</title>
</head>
<body>
This is a reference link to John Lindorfer's Home Page at <a href="http://lindorfer.us/wizard/index.html">http://lindorfer.us/wizard/index.html</a>.

This is a reference link to the Federal Deposit Insurance Corporation's privacy policy at <a href="http://lindorfer.us/wizard/index.html"> https://www.fdic.gov/policies/index.html</a>.
</body>
</html>

If you click on either of these links, you'll find that they're both the same, even though this site is indeed John Lindorfer's Home Page, as the first link says it is, and has nothing to do with the Federal Deposit Insurance Corporation's privacy policy, as the second link suggests. Of course, https://www.fdic.gov/policies/index.html is a perfectly valid html reference (or was when I put it here), as you can see by either clicking on it above, or here or by copying it and pasting it into your client's address window and going to it. This shows that it is the html reference of the link (and not the link itself) that determines what it links to. Of course, the html reference and the link can be the same, as in the first example, but they don't have to be, and usually aren't.

A dishonest spammer actually used a "fake link" like this in an e-mail to make the people who got the spam think that they were providing bank account information to the Federal Deposit Insurance Corporation when in fact they were linking to the spammer's site so he could use this information to steal their money. You can read all about it at http://www.FDIC.gov/news/news/press/2004/pr0604.html.

Linking Errors

It sometimes happens that the html reference of a link is a document that doesn't exist (because it's been removed or the URL is just plain wrong) or the server has been instructed not to let you see it (because it's private or secret). In this case, you will get an error message. For example, if you click on http://lindorfer.us/wizard/Nosuchdocument.html, you'll get an error message like this one:

Not Found
The requested URL /wizard/Nosuchdocument.html was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

This message is a little html document that is generated by the server when it can't find the document that the link requested. The URL "http://lindorfer.us/wizard" is OK, but there is no document named "Nosuchdocument.html" in that directory. This is what the source document looks like. Note that our familiar tags are in capital letters. The client doesn't care.

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html><head> <title>404 Not Found</title> </head><body> <h1>Not Found</h1> The requested URL /wizard/Nosuchdocument.html was not found on this server. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request. </body></html>

The line "<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">" contains information that we haven't talked about yet. You can ignore it for now. (For those interested, the element is called a "document type definition." It tells your client what version of the html language is being used. It is very important for programs that check html documents for syntax errors, but is usually unnecessary otherwise. I have yet to find or hear of a client that can't format an html document that follows the rules in this tutorial without it.)

You have probably noticed that none of these URLs have spaces in them. That's because spaces are not allowed. If you see a space in a URL, it's a misprint.

Windows

When you click on a link in an HTML document, the client establishes communication with the server specified by the link, loads the document onto your computer, and displays it. It stores the URL of the document it was previously connected to in its memory so you can click your BACK button to go back to it, but otherwise essentially forgets the previous document. You can continue to display the old document behind the new one by using the TARGET attribute with the "_BLANK" value. This will open the new document in a new window, leaving the old one where it was behind it. When you're done with the new document, you can just close its window, as in these examples. You might note that the new window BACK button is dimmed or doesn't work, because there is nothing in the new window to go back to. The syntax for a link in a new window is <a href="URL" target="_blank">. Don't forget the quotation marks and the underscore before the word "blank."

By the way, there is an address element that tells the client (not necessarily the reader) that the element is an address, or URL. The user of the client (you), or the document itself, can tell the client how to display addresses, and the client can use them for various purposes, such as storing them in a "favorites" list. Sometimes they look just like regular type. There is an example in the html source, above, which shows the address rendered in italics. Whatever it looks like in the message above is how your client displays addresses. (As shown, mine makes it italic.)

Relative Addressing

Up to now we have been discussing html references that are absolute universal resource locators. This means that the URL completely identifies where on the Internet the referenced document is. It not only tells us the address of the document, it tells how to get it. As billions and billions more documents are put on the Internet, URLs will get longer and longer, and may become larger than the text of the document to which they refer! To keep from spending most of our client's time downloading references instead of text, we can use relative URLs. A relative URL tells where a document is relative to the address of another document that your client already knows.

For example, the address of our "Sneaky Links" document is Third3.html. Notice that there is no domain name, no ".com," or anything else to tell where the document is. The reference is only the name of the document itself. How on earth (literally!) does the client know where it is?

The answer is that the client knows where this document is, otherwise you couldn't be reading it. If we just give the client the name of the document we want, it will assume that the document is in the same directory that the referencing one (this one) is in, and will look for it there. If you load the "Sneaky Links" document, you will be able to see the full URL in your address (or "goto") window. It should be the same as this document except the very last part. This document is called "Thirdgrade.html" and the document titled "Sneaky Links" is named "Third3.html". Note that the document's title is what is between the <title> </title> tags in its text, while the document's name is part of its address, or URL. The two have nothing at all to do with each other, so be careful not to confuse them.

Relative addressing allows documents to be portable, that is, you can move them around from one directory or one server to another without having to change the links in them. If we put all our documents in one folder, we can use relative addressing in each of them to the others in the same folder by using only their names as references. If we move the folder anywhere in the known universe, the links in the documents will still work because each document's URL will refer to the same folder the referencing document is in.

For example, if this document's URL is "http://lindorfer.us/wizard/HTML/Thirdgrade.html," the link to "Third3.html" in it will cause your client to look for it at "http://lindorfer.us/wizard/HTML/Third3.html" because the directory (or folder) that both of them are in is "http://lindorfer.us/wizard/HTML." We could transfer all the documents in the folder to "http://www.serverinjapan.jp/JohnLindorfersmirror/htmldocuments" in Japan. The address of this document (that you're reading) would then be "http://www.serverinjapan.jp/JohnLindorfersmirror/htmldocuments/Thirdgrade.html" and the "Sneaky Links" document would be at "http://www.serverinjapan.jp/JohnLindorfersmirror/htmldocuments/Third3.html," which is where the client would look for it with nothing in the reference but "Third3.html."

Of course, to do that, there would have to be a server called "www.serverinjapan.jp," which there isn't. If you looked there, GOTCHA!

The downside of portability and relative URLs is that all the relative documents have to stay in the same folder. If you move one, all its html references will generate error messages or do something weird.

Base References

There are ways to use relative addressing for documents in other folders if you know their relationship to the referencing documents, but we're only going to study one of them because they're confusing and the others are suitable only for large websites where such addressing makes sense.

The one we're going to study is specified by the <base> tag. It goes in the head element between the <head> and </head> tags. It looks like this:

When your client sees this in the document head, it knows that anytime you specify a document with a html reference that does not include the "http://" part, the client is supposed to add the prefix "http://www.domainname.type/directory/" to whatever html reference you put there, behind the "href=" part. Thus, if you included something like, "See <a href="mobydick.html">Moby Dick,</a> by Herman Melville" in a document that had the element "<base href="http://www.domainname.type/directory/">" in its head, the client would look for the referenced document, Moby Dick, in the directory "http://www.domainname.type/directory/mobydick.html" just as if the html reference you specified had been <a href="http://www.domainname.type/directory/mobydick.html">.

Of course, you can still use absolute URLs in a document that contains a <base> reference by specifying the full URL with the "http://" part. This makes the client temporarily ignore what the base reference you specified was. But it won't forget. As soon as you use another relative URL in your document, the client will add the base reference to the URL you specify and then try to go get your document. If you forgot you used a base reference, too bad.

You can use only one <base> reference in any document. If you try to use more than one, or put it anywhere except the document head, strange things will start happening... and may never stop until you press "control-alt-delete!"

Internal Links

The only other document link we're going to study in third grade is an internal link, to a place in the same document the link is in. Referring to your own document might seem strange, but some documents can be really long, and the author might want you to refer to something somewhere else in it. He can do that by inserting an internal link. Clicking on that link will take you to that place, whether it's before or after the link. You can use your "back" button to get back to where you were, just as you would if the link were to a separate document.

For example, this link is a link to the very bottom of this document. You can scroll down to it, but it's much simpler to click on this link. There is a link at the bottom of this document to this paragraph, which contains a link to... well, you get the idea. You can click back and forth a few times if you like.

The way this works is that this link actually has the form: <a href="#bottom">this link</a>. As you can see, it is a perfectly valid link, with beginning and ending anchors, the words "this link" in the middle, so you have something to click on, and the relative URL "#bottom." The "#" sign tells the client that there is a name in this same document called "bottom" that it is supposed to find and display the document starting at that point. The link This link takes you back to the paragraph on internal links. actually looks like:

<a name="bottom"><center><a href="#thistext">This link takes you back to the paragraph on internal links.</a></center>.

The name "bottom" is the name of the place in the document where the link actually is, and is the target of the link called "this link," above. So when you click on this link, you go to the place called "bottom" where you will find the link This link takes you back to the paragraph on internal links. Clicking on it will take you back to the paragraph above, called "thistext" because "<center><a href="#thistext">This link takes you back to the paragraph on internal links.</a>" is a link to it. The link text is centered because of the <center> and </center> tags.

Like other URLs, your names shouldn't have any spaces in them. They are invisible when you are reading the text they're in because only the client has to see them to know where to go when the reader clicks on the referencing links. You can use any name that makes sense to you, but each name has to be different because if two of them are the same the client wouldn't know which one to go to if the reader clicked on the link. There can be as many links to the same name as you want, though.

Just remember that the "#" sign goes in the link href, not the name. Note that although there is a beginning anchor in the name tag, there is no ending anchor because there is nothing else in the element. Not so with the link, element, which has to have a beginning anchor and an end anchor (</a>), and preferably something in between them to link on.

A document has to load completely for the internal html references to work. If you click on an internal link in a document while the document is still loading, it will usually (but not always) just take you to the beginning of that document. It's the "not always" part that is the most interesting. Sometimes the only way to continue is to press "control-alt-delete" again. Bummer!

You can use internal references to go to specific parts of other documents, too. For example, we already know that a link like <a href="http://lindorfer.us/wizard/index.html">John Lindorfer's Home Page</a> will take you to my home page, but adding "#sermons" to it will take you to a list of sermons and lectures. The link then becomes <a href="http://lindorfer.us/wizard/index.html#sermons">John Lindorfer's Sermons</a>. Try it. The title won't change, because it's the title of the whole document, but the place where you go in the document will.

Image Links

The form of the image link is <img src="URL of image">. Although this looks like text in the source document (and in this one, of course), the IMG tag tells the client that the URL is that of an image, and that it should handle this image in the way the user specified when he set up his preferences when he first installed the client program on his computer. When the client displays the image, there will be a picture that was loaded from the server at the URL named "URL of image." This has to be a real URL of a real image. If it isn't, the picture will look like an icon of a torn little drawing, which is the way the client has of telling you that it's confused. The torn drawing means that the client couldn't find the image it was told to, or can't display it for some reason, or both. If it is a real URL of a real image, and the client knows how to display it, this image will be put wherever the image link is in the document. Instead of text, there will be an image. While the image is loading (which can take a long time for big images) you will see an icon of a little drawing to tell you that there's supposed to be a real image there when it's finished.

The reason we need an image link is because you can't just stick an image in an html document as you can text. If you want to put some words in your document, you can just type them in. But with an image, you have to tell the client where the image is stored, how to get it, where to put it, and possibly other things. That's what the image link does.

The image itself can be anything the client is capable of displaying. Almost all clients can display GIF and JPEG images, so these are good to use in Internet documents that anybody would be expecting to read. Image manipulation programs such as Adobe Photoshop and Gif Converter can be used to change other formats into one of these. GIF (pronounced "Jiff," as in peanut butter) is a better format for drawings and sketches, while JPEG (usually called JPG for short) was developed specifically for photographs and paintings. You can tell which is which because GIF images end in ".GIF" or ".gif" and JPEG images end in ".JPG" or ".jpg". It's a good idea to include this information in the name of your images because some clients from a famous software company can't figure out what they are otherwise. Make sure you remember the names exactly, because the client may distinguish between upper and lower case. If you type "GIF" when you really mean "gif," the client may not be able to find it.

If the client can display it, the image can be a line drawing, a black and white sketch, a color photograph, an animated drawing, a film clip, a recorded lecture on inappropriate behavior of employees at Lockheed Martin Corporation, or the entire extended version of "The Lord of the Rings." Because moving images take a long time to load, it is best not to use them unless they are fairly small and simple, like animated smileys.

Changing Size and Shape of Images

We can manipulate the image by changing its size and (if we really want) it's shape. If we don't specify a size, the image will be displayed full size, whatever that size is. We can change the size with the "height" and "width" attributes. This specifies the image height and width in pixels (the little dots that make up the image on a display), which will result in different image sizes on display screens with different sized pixels. If we reduce the size, it may sometimes begin to look "grainy" at about 1/4 the original size. If we enlarge it, it will begin to look like little squares at about 4 times its original size. It is best to enlarge or reduce by whole numbers, the same in both height and width, such as 2x, 3x, 5x, 9x, or 1/2, 1/3, 1/5, 1/9. This will make the image look best at the different sizes. You can use any number, but the image might look strange.

The form for this is <img src="URL of image" width=www height=hhh>, where the document wants to display the image at "URL of image" with a width www and a height hhh. Strictly speaking, "src," "width" and "height" are the attributes of the element "img," so they can be put in any order, as long as they come after "img." I think it's logical to specify the source (src) of the image first and then tell how to display it.

The image at http://lindorfer.us/wizard/Graphics/Me.jpg is 432 pixels wide by 380 pixels high. These numbers can be divided evenly by 2 and 4, and of course can be multiplied by any number. This makes it easy to fit this image into just about any space we want. <img src="http://lindorfer.us/wizard/Graphics/Me.jpg" width=432 height=380> will display it full sized, as will <img src="http://lindorfer.us/wizard/Graphics/Me.jpg">, which leaves out the width and height attributes and lets the client display it as is.

If the link is <img src="http://lindorfer.us/wizard/Graphics/Me.jpg" width=216 height=190>, it will display the image 1/2 size in both dimensions (1/4 the area), because 1/2 of 432 is 216 and 1/2 of 380 is 190. The link <img src="http://lindorfer.us/wizard/Graphics/Me.jpg" width=864 height=760> will display the image twice normal size, four times the area, because 864 is 2 x 432 and 760 is 2 x 380. Notice that the height and width are specified in pixels. You have to figure out how many there should be for yourself. Macintoshes like mine display 72 pixels per inch.

Let's take a look at this example:

<html>
<head>
<title>
Examples of Image Links
</title>
</head>
<body>
This is an example of the picture at the URL "lindorfer.us/wizard/Graphics/Me.jpg" displayed in different sizes.

The first one is full size because we have left out the width and height information:

<img src="http://lindorfer.us/wizard/Graphics/Me.jpg">

The second one is almost 1/3 size:

<img src="http://lindorfer.us/wizard/Graphics/Me.jpg" width=144 height=127>

Just for fun, we can make it look fat by reducing the height by 1/3 but reducing the width by only 1/2:

<img src="http://lindorfer.us/wizard/Graphics/Me.jpg" width=216 height=127>

We can make it look like an icon by reducing it really small:

<img src="http://lindorfer.us/wizard/Graphics/Me.jpg" width=32 height=28>
</body>
</html>

Be careful loading images. Although you can display the image any size you want, the image size is whatever size it really is. It will still take the same amount of time to load, whatever its display size is. You might have noticed that the above example took a long time to load. That means if you use a big picture, even if it looks small, the client will grind away loading it while the reader looks helplessly on, wondering when (or if) it's going to stop. "Control-alt-delete" again.

To solve this problem with large images, first load them to your own disk, taking as long as you need, and then use Photoshop or GIF Converter or some other program to make them the size you want, then put them on the server you use for your html documents. In your documents, link to the image on your server. Then you can use the customized image the way you want, and you know it won't go away when you don't expect it. You will know what it looks like at that size, and it won't take any more time than necessary for someone else to load and look at it.

You can even have pictures of two sizes. One small one, sometimes called a "thumbnail," is to show the reader what the image looks like. Then, if he wants, he can download a bigger version of it. We'll see how that works in a little while.

Finding Images

An image to be used on a web page must be in digital format. Photos taken with a digital camera are already in digital format, but they are generally too large for economical use on the Internet. The books that come with the viewing software don't always tell you this. For example, the photo may consist of 300 pixels per inch (270 kilobytes per square inch), which looks like a photograph when printed on paper, but will be from 3 to 4.17 times larger each way when displayed on a web page. If you are going to use a digital photo, use a graphics program to reduce it to a reasonable size. Save it in GIF or JPG format, GIF for cartoons and sketches and JPG for photographic quality. Then link to the GIF or JPG image.

Web page designers, especially civil servant types, sometimes don't understand the concept of image size, and take personal offense when someone points out to them by e-mail that an image on their US Government certified web page is actually big enough to be used for battleship target practice.

Images already on the Internet are usually (but not always) already of the correct size. To be sure, click on the address of the image in the document source to view it full size. Reduce it if it is not the size you want; enlarging it will make it look "grainy." Then save it on your computer to assure that it will always be available and link to your saved image. You can find images of virtually everything and anyone very easily by using Google at http://www.google.com/imghp?hl=en&tab=wi&ie=UTF-8. If you are looking for a specific person, put the full name in quotation marks, like "John Lindorfer," which will link to images that Google associates with my name (but not necessarily with me).

Send only small images as attachments in e-mails. I recommend nothing larger than a wallet snapshot. If you want your recipient to see a large photo, put it on a server somewhere and tell him how to link to it and how big it is. If you don't have a server, get one. If you don't know how to use it, call your Internet service provider and learn how. You have to know this stuff anyway to make web pages for other people to see. I have some friends whose e-mails I have automatically deleted at the server because they keep trying to send me megabytes of digital photos by e-mail. They probably don't know why I don't reply any more, but I asked them nicely and they just didn't listen.

Copyright Issues

At this point I should probably point out that downloading someone else's picture to your server and then doing things to it has copyright implications. Basically, it's unlawful to copy someone else's work without his permission. I consider that anyone who has put something out on the Internet for other people to download has already given his permission to do that. Downloading a picture automatically copies it to your hard disk, as anyone should know. If there is a notice on a website that says "don't use these pictures without permission," I leave them alone. I also don't use images of anybody who tells me he doesn't want me to, regardless of who may hold the copyright. I'm not in jail yet. People who really don't want unauthorized people to use their images can encrypt them so the riff-raff can't see them, or not put them on the Internet in the first place. The courts (and legislatures) still have a ways to go to clear up the water on this matter.

Alignment of Images

Think of the <img> element as an actual image and you will find it easy to use. If it were text, it would go along with the other text in the document. If you put in the text that way, when the image is displayed there will be text leading up to the upper left corner of the image, then the image specified by the <img> element, then the text continuing from the lower right of the image. This will work, but it will look stupid. Normally, you would put the image where you want it on the page, and let the text flow around it.

To do this, we need the "align" attribute. This tells the client how to align the image with respect to the text that comes after it, if any. The possible values are "top," "left," "right" and "bottom." To see how this works, consider the following example:

<html>
<head>
<title>
More Examples of Image Links
</title>
</head>
<body>
This is an example of the picture at the URL "lindorfer.us/wizard/Graphics/Me.jpg" displayed in different places.

<img src="http://lindorfer.us/wizard/Graphics/Me.jpg" width=108 height=95 align=left> This picture is left aligned. The paragraph before the image is treated as the client would normally format it. But the alignment of the image tells the client to display it on the left side of the paragraph. The text wraps around the left aligned image to make it look like we actually wanted, that is the picture to the left and the text on the right. The text will continue to wrap around the right side of a left-aligned image until it ends, or until it gets to the bottom of the image, and then it will continue to wrap over to the left margin of the document, as it usually does.

<img src="http://lindorfer.us/wizard/Graphics/Me.jpg" width=108 height=95 align=right> We can put the image on the right and let the text wrap around it on the left by inserting the image this way. The image on the right is aligned right. In this case the image shows up on the right of the text that follows in the same paragraph.

One can also align top and align bottom, but I prefer to use the "align" attribute for left and right alignment and format the rest of the document with paragraph marks as one would if you were pasting the picture into an existing document, such as a newspaper, where a picture is associated with a specific paragraph

<a href="Third6.html">Click here to see an example of a document with horizontal and vertical spaces between the images and the text.</a>

<a href="Thirdgrade.html#Example5">Click here to go back to the Third Grade HTML text that follows this example</a>
</body>
</html>

If we would like to have some blank space around the images, we can use the "hspace" and "vspace" attributes, which put horizontal space and vertical space in pixels between the image and the surrounding text. This example is the same as the preceding one, except that it has 10 pixels of horizontal space and 15 pixels of vertical space around each of the images, as shown in this example.

<html>
<head>
<title>
More Examples of Image Links with Horizontal and Vertical Spaces
</title>
</head>
<body>
This is an example of the picture at the URL "lindorfer.us/wizard/Graphics/Me.jpg" displayed in different places with horizontal and vertical spaces inserted to form white space borders around the image.

<img src="http://lindorfer.us/wizard/Graphics/Me.jpg" width=108 height=95 hspace=10 vspace=15 align=left>This picture is left aligned. The paragraph before the image is treated as the client would normally format it. But the alignment of the image tells the client to display it on the left side of the paragraph. The text wraps around the left aligned image to make it look like we actually wanted, that is the picture to the left and the text on the right. The text will continue to wrap around the right side of a left-aligned image until it ends, or until it gets to the bottom of the image, and then it will continue to wrap over to the left margin of the document, as it usually does.

<img src="http://lindorfer.us/wizard/Graphics/Me.jpg" width=108 height=95 hspace=10 vspace=15 align=right>We can put the image on the right and let the text wrap around it on the left by inserting the image this way. The image on the right is aligned right. In this case the image shows up on the right of the text that follows in the same paragraph.

One can also align top and align bottom, but I prefer to use the "align" attribute for left and right alignment and format the rest of the document with paragraph marks as one would if you were pasting the picture into an existing document, such as a newspaper, where a picture is associated with a specific paragraph

<a href="Third5.html">Click here to see the previous example without horizontal and vertical spaces between the images and the text.</a>

<a href="Thirdgrade.html#Example6">Click here to go back to the Third Grade HTML text that follows this example</a>
</body>
</html>

Images Used as Links

Images can be used instead of text in links so that you click on the image rather than text to activate a link. If you are using Netscape, the image will have a colored border to indicate that it is a link, like link text that is colored and underlined. If you are using a Microsoft product, the border may not be there, leaving you no clue that the image is actually a link. Microsoft calls this a "feature," not a "bug." In either case, the link can be any kind of link that you would ordinarily use text for, such as mailto links, external links, and internal links. Just substitute the image in the link for the text you would normally use.

You can even use an image as a link to another image, so that you can use a small (thumbnail) image to link to a full-sized version of the same image. You can even use an image in a link to itself, so the image displayed could be small, while the (same) image linked to could be full sized. You might do this in a catalog, where you would want to show a number of images on the same page, but allow viewers to look at them in more detail by making them bigger. (Of course, the better way to do this is to use pictures that are actually small to link to bigger ones that show the same thing. This would cut down on loading time.)

Let's take a look at another example

<html>
<head>
<title>
Examples of Images Used Instead of Text in Links
</title>
</head>
<body>
This is an example of the use of the image of me at "lindorfer.us/wizard/Graphics/MeL.jpg" as a link. Notice that this is not the same image use previously, because it is named "MeL.jpg," not "Me.jpg." Because it is only 1/4 the total area of the big picture, it loads 4 times as fast.

<a href="http://lindorfer.us/wizard/index.html"> <img src="http://lindorfer.us/wizard/Graphics/MeL.jpg" width=32 height=28 align=left hspace=10></a>This is a link to "John Lindorfer's Home Page."

<a href="http://lindorfer.us/wizard/Graphics/MeL.jpg"> <img src="http://lindorfer.us/wizard/Graphics/MeL.jpg" width=32 height=28 align=right hspace=10></a>This is a link to the my picture (MeL.jpg) used in this example. It is a demonstration of the use of an image as a link to itself.
</body>
</html>

Notice that, just as with text, what the link looks like has nothing to do with where it links to. In each of the two cases in the example above, the image used as a link was the same, but the addresses linked to were quite different. Note also that an image used as a link can be used for anything text can. It can link to itself, another image, or something else.

Images Used as Backgrounds

One useful way of using images is to use them as background in an otherwise dull document. The image for the background goes in the "background" attribute of the "body" element. In the example above, the background is the default background for your client, which may be white or light gray. We can change it to a background image that looks like marble by telling the client to display the image of marble as background. The form is:

This tells the client that you want to use the image at "http://lindorfer.us/wizard/Graphics/frmarbl.jpg" as the background for the body of the document. The image will be repeated like wallpaper when the document is displayed, so it's best to use a wallpaper type image that will seamlessly spread across the page. This can really spice up a document! It's best to use light backgrounds, like the one in this example so it will be easy to see the text and any graphics.

<html>
<head>
<title>
The Previous Example With a Background
</title>
</head>
<body background="http://lindorfer.us/wizard/Graphics/frmarbl.jpg"> This is an example of the use of the image of me at "lindorfer.us/wizard/Graphics/MeL.jpg" as a link. Notice that this is not the same image used previously, because it is named "MeL.jpg," not "Me.jpg." Because it is only 1/4 as large a file size as the big picture, it loads 4 times as fast.

<a href="http://lindorfer.us/wizard/index.html"> <img src="http://lindorfer.us/wizard/Graphics/MeL.jpg" width=32 height=28 align=left hspace=10></a>This is a link to "John Lindorfer's Home Page."

<a href="http://lindorfer.us/wizard/Graphics/MeL.jpg"> <img src="http://lindorfer.us/wizard/Graphics/MeL.jpg" width=32 height=28 align=right hspace=10></a>This is a link to the picture of me (MeL.jpg) used in this example. It is a demonstration of the use of an image as a link to itself.
</body>
</html>

Alternate Text

One final attribute of hypertext images that we will study is the "alt" attribute. The "alt" stands for "alternatively," and consists of a text string that the client will display if it can't display the image. In the example of the image "<img src="http://lindorfer.us/wizard/Graphics/MeL.jpg" width=32 height=28>" we could add the alternate attribute "Me" to it so that it would be "<img src="http://lindorfer.us/wizard/Graphics/MeL.jpg" width=32 height=28 alt="Me">" It's all right to use spaces in the "alt" string, because the string is a piece of text, not part of the link to the image. It tells the client, "If you can't display the image, display the alternate text instead." Sometimes, the "alt" string will be something like "If you can't see the image, look at the one at http://lindorfer.us/wizard/Graphics/MeL.jpg." You can also use it to remind yourself or someone else looking at the html source (with all the tags) what the image is. Don't use quotation marks in the "alt" string, though, because then the client will think the second quotation mark it comes to is the end of the string and only heaven knows what it will do with the rest of the string. Murphy's law says it won't be good.

Of course, the alternate text will be only one line high, but as long as the text is, which will probably not be the same size and shape of your image. A client that can't display images won't care, but one that does won't display the "alt" text the same way it does the image, so the document with the "alt" text won't look like the document with the image. If you specify a "height" and "width," even if it's the same as the actual height and width of the image, the client will usually draw a box and attempt to put the "alt" text inside it, but not always.

Again, since "alt" is an attribute, it can be put anywhere in the image element after "img," but I like to put it at the very end because that's where it logically goes.

Naming Images

Remember, the way to insert an image into a document is to use the "img" tag and the html reference to the image. You can use relative URLs rather than absolute URLs if they will work. For example, if you had an image called "Picture.jpg" in the same folder with a document that referenced it, you could use the element <img src="Picture.jpg"> and the image would show up full sized in the place where the image link was. It's best to make the name a little more descriptive, though. "Picture.jpg" doesn't say much about what it is. "AnnaKornikova.jpg" would be much better, especially if the picture is in fact a JPEG image of Anna Kornikova!

Embedded Objects

Since links in HTML documents are to computer files, a URL can be a link to any file at all. We have been discussing links to text documents and graphics, but the link can be to a sound recording, a list of commands that makes our computer play virtual musical instruments, or the operating program for the computers on the Space Shuttle (which is pretty small, by today's standards). The computer file that we want to embed in our HTML document is called an object, and it is put there by the EMBED element. The syntax is <embed src="URL">. Actually this element is not in the HTML language specification, but it's so useful that virtually all clients support it, albeit with somewhat different ways of handling it for each one.

What happens to the embedded object depends on the way the client is configured to handle it. Most embedded objects will be handled by plugins, that are small programs that take over for the client and execute the embedded object program, doing whatever the object tells them to do. If you don't have a plugin that works, either the client will ignore the embedded object or it will pop up a little window that tells you that you have loaded the embedded object, tells you that the client can't handle it, and asks what you want to do. Either the object or the client can have a list somewhere of URLs to plugins, which themselves can be embedded objects, so you can download them. Sometimes the object will do that automatically.

Sometimes the object will be a program that simply replicates itself on your hard disk, possibly wiping our all your data. Such a program is called a virus. Other objects make your computer do bad or unexpected things, possibly on a certain date or time or upon the occurrence of a certain event. These programs are called Trojan horses. If you don't have an application that allows you to scan your hard disk periodically to get rid of these things, you should have, especially if you have Internet Explorer, and ESPECIALLY if you use Microsoft Windows, which has special attraction for virus makers because it's so popular.

The embedded object may or may not have some kind of graphic representation associated with it. It depends on the client, the plugin and the object. If it does, the graphic will show up wherever in the document the object specifies. Sometimes it is wherever the "<embed src="URL">" command appears, sometimes it's in a separate window, and sometimes it's somewhere else. It can even have a size of zero and be nowhere at all! We can include the graphic attributes that our client recognizes, such as HEIGHT and WIDTH, and the client will display it that way (usually). There is a difference, however, in that what you see is not really a graphic, it is a construction by the client, based on drawing instructions that are part of the object. The HEIGHT, WIDTH and other graphic attributes are incorporated into these instructions and interpreted in a manner that is usually different from the way the client normally interprets them. For example, increasing the WIDTH on the control bar below doesn't make it fatter, it makes it longer: the buttons stay round, but the slide gets longer. Incidentally, the control bar isn't a graphic; it's a real control bar. Click on the button on the bar below to hear the music.

If you didn't hear "Dueling Banjos," it's because your computer can't reproduce sound, or your client can't handle MIDI files, but most can.

The object here is a MIDI file, a program that displays the control bar and plays virtual musical instruments, in this case according to instructions supplied by Don Carroll, who did the MIDI sequencing. When embedded in an HTML document, a MIDI file plays virtual musical instruments defined by the MIDI plugin. The same file can also be used with a digital interface gismo to play real musical instruments, to generate and print sheet music, and probably musical things that I don't even know about. The complete EMBED tag is:

<embed src="http://lindorfer.us/wizard/Graphics/DuelingBanjos.mid" width=340 height=64 controls=smallconsole autostart="false" loop="false">

The URL of the object to be embedded is specified by the "http://lindorfer.us/wizard/Graphics/DuelingBanjos.mid" string; the .mid suffix identifies the object as a MIDI file. The width (or, more properly, length) of the displayed control bar is 340 pixels. The height is 64 pixels, which accommodates different plugins that have control bars of different heights. What the control bar actually looks like is determined by the client and the plugin. Among the commands that MY object program recognizes are "controls," "autostart" and "loop," which tell it to display a small console control bar, to wait until the viewer clicks the "play" button before playing the music, and stop playing when it's finished, respectively.

A Hypothetical Example of an Embedded Object

When the client downloads a HTML document, it gets the file in pieces from the server (specified by the URL) it's stored on, and then attempts to display it according to the elements it contains. When it encounters the EMBED element, it gets that file and attempts to execute it if it can. The attributes of the EMBED element can be any commands at all. If the client doesn't recognize them, it simply passes them on to the object program for execution. If the object program doesn't recognize them, it will do something, or nothing, depending on what its internal code tells it to do (or not do). This gives us the capability to EMBED any program at all in an otherwise ordinary HTML document. For example, consider the element:

<embed src="http://lindorfer.us/wizard/StarTrekVoyager.exe" width="fullscreen" height="letterbox" controls="SONYXBox" Janeway="command" Chakotay="helm" B'Elanna="comm" Paris="tactical" Neelix="kitchen" EMHP="PDICU" Tuvok="science" SevenofNine="looking good" Kim="watching Seven of Nine">

There is a way to tell your client what to do if it doesn't understand the object, but this capability has been abused of late, so I'm not going to add to the confusion. If you run into an HTML document that has an embedded object that your client can't handle, either follow the instructions contained in the object, or that came with your client, or ask somebody else what you should do. Not me.

A kind of "non-embed" element is the COMMENT. The form of the element is . Your client will ignore anything represented by XXX when it displays the document. This allows you to put comments, remarks, explanations or other things in your source code that will be visible to anyone reading the source, but will be invisible otherwise. This element is also used to write programs in a language called "Javascript," which DOES read the XXX part. This can be the Javascript code that is executed on instructions from the HTML client, but I am not going to talk about that any more because I don't know enough about it.

In Fourth Grade HTML we will learn to use tables and lists. For now, try making some html documents with images and links in them.

John Lindorfer

This link takes you back to the paragraph on internal links.