Changing the way Text Flows around a Paragraph

 

Introduction

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.

 

Wrapping Text Around Images.

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.

For Example, Open the HTML Property Sheet:

  1. On the View menu, select “Resource Manager”.

  2. In the “Resource Manager” submenu, select “HTML Property Sheet”.

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

Aligning Text with Images

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.

NETSCAPE

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.

 

 

Microsoft Internet Explorer 3 (MSIE3)

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.