A little HTML trickery

Throughout this tutorial, we have indented paragraphs. How we did this is by employing 1-pixel Gifs.

This is an example of a text paragraph you might find on a web page. As you can see, it is flush to the left margin.

This is an example of a text paragraph that has been indented. As you can see, it is indented from the left margin. It looks more like a paragraph you might find in a book or magazine.

We get the indentation by specifying a 1-pixel Gif in front of the paragraph. For ex.:
<IMG SRC="images/dot_clea.gif" HSPACE=8> This is an example of a text paragraph.....

You say you can't see the image specified above? That's sorta the point; we use a clear dot, which doesn't show up on a white background. The image is also tiny, only 1-pixel wide.
If you look closely, you can just make out a 1-pixel black image
<-here. It looks smaller than a "period".

The "Attributes" of this Gif are what give it power. In the above case, we gave it an attribute of HSPACE=8.
In this case, we wanted to indent the paragraph by 16 pixels, and since "HSPACE=8" adds pixels to the left and to the right of the dot, the 8 is doubled to 16. It moves the text to the right by 16 pixels, indenting the paragraph.
Using the same pixel, we can also add vertical space by specifying VSPACE=20
Examples:
<IMG SRC="dot_blac.gif" HSPACE=15 VSPACE=15 BORDER=0> gives you a square of space like this -
<IMG SRC="dot_blac.gif" HSPACE=30 VSPACE=5 BORDER=0> gives you a rectangle of space like this -

If you have a graphic, which you want to appear on your purple colored web page, 200 pixels from the left of the screen and 60 pixels from the top, you would put this in front of your graphic:
<IMG SRC="dot_purp.gif" hspace=100 vspace=30><BR><IMG SRC="mygraphic.gif">

You always want to use a colored dot that will not be visible on your web page.
Where do you get a colored 1-pixel dot?
Just right-click on each small square below and "Save As"
Black Dot -
Blue Dot -
Red Dot -
Purple Dot -
Green Dot -
Dark Dot -
Clear Dot -

More examples:
You have two images. If you write your HTML code like this:
<IMG SRC="images/img-ex1.gif"><IMG SRC="images/img-ex2.gif">
they will appear right next to each other with no space in between.

If you write your HTML code like this:
<IMG SRC="images/img-ex1.gif"> <IMG SRC="images/dot_clea.gif" HSPACE=24> <IMG SRC="images/img-ex2.gif">
the images will appear side by side with a blank space of 24 pixels in between them.

or
<TABLE><TR>
<TH VALIGN=TOP>
<IMG SRC="images/img-ex1.gif">
<TH>
<IMG SRC="images/dot_clea.gif" HSPACE=12 VSPACE=70>
<IMG SRC="images/img-ex2.gif"><BR>
</TH></TR></TABLE>

gives you this:

Note: Using the <IMG SRC="dot_xxxx.gif:> tag with text allows the text to be spaced around them. Example
<IMG SRC="images/dot_red.gif" vspace=20 hspace=20 border=0 align=left> then some text, gives you this:

Did you know you can place anything anywhere on your web page, move a graphic over or up or down from 1 pixel to as many pixels as you can put in, with two very simple methods. Did you know you can place anything anywhere on your web page, move a graphic over or up or down from 1 pixel to as many pixels as you can put in, with two very simple methods.
Did you know you can place anything anywhere on your web page, move a graphic over or up or down from 1 pixel to as many pixels as you can put in, with two very simple methods. Did you know you can place anything anywhere on your web page, move a graphic over or up or down from 1 pixel to as many pixels as you can put in, with two very simple methods.

<- Previous | Next ->