... HTML & Webpages ...

... Recommend this series to a friend.

PLACING OUR FIRST GRAPHIC

The basic html tag for placing a graphic on your page is:

<IMG SRC="LOCATION OF FILE"> … and as usual, it includes those quotes.

Just like with the background, you can go right to that graphic in your FM, open it, right-click, and click "Copy Image Location" (it is now on your clipboard so don't copy anything else; not yet). That's what you will paste next to the first quote in the above tag. Here it is with the eyes file; if you uploaded a different file, just follow the same format:

<IMG SRC="Files/eyes.jpg">

Notice that the entire URL is not needed when we are moving a lower directory. However, with that background file (tanbkg.gif if that's the one you are using) the one where you might have it in a special folder you designated for backgrounds (or for any other graphic you might have in this Files folder), to "tag" it from any other page in a different sub-directory, you will need to use the entire URL in the "image source" tag.

If you want the image in the center, surround the image with the "center" tags:

<CENTER> <IMG SRC="Files/eyes.jpg"> </CENTER">

Without the closing tag, the entire page will have all it's text and images centered; horror of horrors, but now you understand these html tags so you fix it. A word about mistakes; it was Thomas Carlyle (a writer and mathematician) who said, and I quote (like the Lady's Man on Saturday Night Live): "Do not be embarrassed by your mistakes. Nothing can teach us better than our understanding of them. This is one of the best ways of self-education."

Let's write a sentence under the picture. If we place a <P> tag after the picture, we will skip a line. If we want the sentence to be closely connected to the picture (which we'll do in this case), we put a <BR> tag after the picture. That will take us to the next line instead of skipping a line. So the resulting html line will look like this:

<CENTER> <IMG SRC="Files/eyes.jpg"> </CENTER"> <BR>

I've separated these four tags with spaces so they are easier to see; in actuality, those spaces are unnecessary. You might preview your work, and if the picture is now under those paragraphs you wrote, and centered on the page, you can click "Save and Continue" and we continue.


Something new, continuing on the … Next Page … placing a caption under a picture.

Return to ... Navigator ... that's it.

1