HTML Basics

Lesson 3: Adding Images

Wrapping text

Images and text

In fact when I create "buttons" as navigational tools (see the left side of a site I created Trippel Survey and Research page), I use the simple Paint program that came with my PC (Macs now come with similar simple paint programs, or a Mac user can use AppleWorks). Basically I preset the number of pixels I want, then create the image; it's that simple.

Basic wrapping

The problem for me was never adding images in html, but wrapping text around them! It took a lot of trial and error to get this right when I was a beginner. By default, however, text will naturally wrap itself around an image unless you tell it not to.

If you want you image on the left side, and the text to wrap around it beginning on the right, use this code (let's keep to the image called "imagename.gif"):

<img src=imagename.gif" align="left">

Then, using the "font" tags for your text, proceed to let your text wrap around the image. See page 48 of the text to see how this works.

If you only want the title of the text and the caption to appear on the right of the image, but the rest of the text below the picture and flush with the left side of the page, use the <br clear="left"> tag.

If you want a borderlike space around the image so that when the text wraps, it won't look as if the text is right next to the image (which is sloppy, sort of), use this tag (similar to the tag above)

<img src="image.gif" align="left" hspace="20" vspace="20">

if you want a 20 pixel space, horizontally and vertically around the image to separate it from the text ("hspace" means horizontal space, and "vspace" means vertical space).

Finally, if you want text such as a caption to appear at the top of the picture, use align="top" tag; if in the middle, use align="middle"; if at the bottom, use align="bottom". See page 50 for how this works. And if you want text between two images, first write the code for the left and right images, then write the text. See page 49.

  1  2  3  4