ALIGNMENT refers to how a graphic is positioned in relation to the flow
of text. It is controlled by the ALIGN attribute in the
bottom of image aligned with text (default)
<IMG SRC="tigger.gif" ALIGN=middle>
middle aligned with text
<IMG SRC="tigger.gif" ALIGN=top>
top of image aligned with text
WRAPPING TEXT (15b)
Horizontal alignment can be used to push an image to either the left or right margin,
and let text flow around it. By using the HSPACE (Horizontal SPACE)
and VSPACE (Vertical SPACE) attributes, you can prevent your text
from "bumping up against" the image:
<IMG SRC="tigger.gif" ALIGN=left HSPACE=10 VSPACE=20> Notice how the
graphic is placed along the left margin of the page, and text flows around it.
There are 10 pixels of space to the left and right of the image; there are 20 pixels
of space above and below. It's not possible to specify an amount of space along
a particular side of an image. You can stop the text wrap and have text resume
below the image by inserting <BR CLEAR=all>. This says,
roughly, "resume the text when ALL the margins are clear."<IMG SRC="tigger.gif" ALIGN=right HSPACE=40> Notice how the
graphic is placed along the right margin of the page, and text flows around it.
There are 40 pixels of space to the left and right of the image.
(W15.1) Please read the FOREWORD, INTRODUCTION, and REQUIREMENTS in the next tutorial, "HTML 2.0: FORMS AND OBSCURITIES" located at:
http://www.cwru.edu/help/interHTML/toc.html (link is no longer valid)
Also read Chapter 1 (LATIN-1 CHARACTER ENTITIES) and do all the exercises at the end of Chapter 1; this is mostly review material.
(A15.1) Read pages 160164 (from "Vertical Alignment" up to
"Tips for Placing Graphics") in the Weasel Book.
(A15.2) Use some ALIGNMENT features for the graphics on your homepage. If I were
to give you a sheet of pictures showing various alignments (sample below), then
you should be able to write the code that would produce the desired effects!
This picture of Tigger is pushed to the left margin, and there are 50 pixels of space between the graphic and the text. After this sentence, I want the text to resume 30 pixels below the graphic.
Now, the text is 30 pixels below the graphic.