Understanding how to position text around images is a key element in Webpage presentation. Aligning text and images (or tables) is discussed at length in this section.
Give your table or image an alignment to the left and then insert text after it. For example, to create the example seen left, use the following HTML code:
<IMG
src="graphics/image.gif" ALIGN=LEFT>
Lots of text goes here...
Give
your table or image an alignment to the right and then insert text
after it. For example, to create the example seen left, use the
following HTML code:
<IMG src="graphics/image.gif" ALIGN=RIGHT>
Lots of text goes here.. .
Put
your images next to one another, but give them opposite alignments,
that is, left and right. For example:
Lots of text goes here.. .
<IMG src="graphics/image1.gif" ALIGN=LEFT> some text here
<IMG src="graphics/image2.gif" ALIGN=RIGHT>
Lots more text goes here.. .
This
Webpage alignment is not possible using standard HTML alignment
attributes. However, using tables you can easily design such a layout.
It would seem that this tutorial presupposes a lot of information, like knowing about the alignment attribute of images. With time, you will become familiar with the different attributes in each tag. For the meantime, use the HTML Property Sheet or Code Completion to become familiar with each tag.
On the View menu, select Resource Manager.
In the Resource Manager submenu, select HTML Property Sheet.
Now the HTML Property Sheet is open, place your cursor in the IMG tag in your document.
The HTML Property Sheet now displays all the attributes associated with the IMG tag.
Clicking on each attribute updates the help at the bottom of the Property Sheet. Click on the ALIGN attribute for help.
Images also have vertical alignment properties. However, every browser treats these properties slightly differently. The following attributes can be used:
TEXTTOP
TOP
ABSMIDDLE
MIDDLE
BOTTOM
BASELINE
ABSBOTTOM
The problem is that while most of these attributes do the same thing, how they look differs from browser to browser. In Netscape and MS Internet Explorer there are actually only 3 different alignments you can choose. Below is a summary of the different alignments under different browsers.
NOTE |
In each of the pictures below, the HTML is the word pivot followed by an image. Only the alignment attribute of the image changes. |
Text
top aligned with the top of the image. This is equivalent to
ALIGN=TOP or TEXTTOP Notice how Netscape puts
an envelope around the text and aligns the invisible envelope with
the top of the image.
Absolute
middle of text aligned with the center of the image. This is
equivalent to ALIGN=ABSMIDDLE only. The absolute middle
of the text is the midpoint between the absolute top and bottom
(i.e., the top and the bottom of the envelope around the text) of the text.
Baseline
of text aligned with the bottom of the image. This is equivalent to
ALIGN=MIDDLE or BOTTOM or BASELINE
or having no alignment at all. This is the default alignment.
Absolute
bottom of the text aligned with the bottom of the image. This is
equivalent to ALIGN=ABSBOTTOM only. The bottom of the
envelope surrounding the text is aligned with the bottom of the image.
Text
aligned with the top of the image. This is equivalent to
ALIGN=TOP or TEXTTOP. Notice how there seems
to be a text envelope at the top of the text. This envelope seems
incongruous because MSIE3 has no other use for the ABS tags. Perhaps
it is a rendering flaw.
Center
of the text aligned with the center of the image. This is equivalent
to ALIGN=MIDDLE or ABSMIDDLE.
Bottom
of text aligned with the bottom of the image. This is equivalent to
ALIGN=BOTTOM or BASELINE or
ABSBOTTOM or having no alignment at all. This is the
default alignment. That is, the alignment that is used if you specify
no alignment at all.