The address for this web page is: http://www.onemathematicalcat.org/day_15_image_align.htm
On to the next lesson! Back to the COURSE SYLLABUS

15. ALIGNING IMAGES

INDEX CARD #15:

ALIGNING IMAGES (15a)

ALIGNMENT refers to how a graphic is positioned in relation to the flow of text. It is controlled by the ALIGN attribute in the <IMG> tag.
VERTICAL ALIGNMENT:

<IMG SRC="tigger.gif">

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.

Printable version of Index Card 15a

Printable version of Index Card 15b

WORKSHEET #15:

(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.

ASSIGNMENT #15:

(A15.1) Read pages 160–164 (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.
(A15.3) Click here to get some more practice with alignment!