Web Pages Made Simple
Home
File Naming & Saving
Basic HTML Code
Adding Links
Adding Images
Organizing Your Classroom Page
Publishing Your Pages
Resources
E-Mail

Lesson 4

Adding Images

Now for one of the exceptions. Image tags do not have a "closing tag." They are complete in and of themselves. You put the code in where you want an image to appear. The only tricky thing is to get them to line up where you want them.

I will try to address all those issues and give clear examples of code to copy and paste into your documents.

All the code below will come between the <BODY> and </BODY> tags. You will also need to upload the photos to your server. Now, let's post some pictures.

Image Template
<IMG SRC="http://www.theURLof.your/image.gif"> This code will display a picture aligned to the left with the text lined up even with the bottom of the photo or graphic.

In order to have the text "wrap around" the image, you need to add an "attribute" to the image tag. This pic will be positioned to the left margin and have the text wrapped around it beginning at the top edge of the photo. The new code looks like this: <IMG SRC="http://www.theURLof.your/image.gif" ALIGN="LEFT">

If you want the same effect, positioned at the right of your page with the text wrapping around it, use this code: <IMG SRC="http://www.theURLof.your/image.gif" ALIGN="RIGHT">

To make sure that all your alignment tags will STOP and your text will go back to the left margin at a specific place, you can add this code:
<BR CLEAR="ALL">

One last alignment trick: If you want to center an image on a page, just surround the IMAGE tag with this coding:

<CENTER><IMG SRC="theURLofyourimage.jpg"></CENTER>

Back Next



Copyright © 1998 by MaryAnn D. Powell