Religion 345:
Lab Session: Alignment of Images and Text

This is the default alignment of the image and text. The bottom of the image is aligned with the text. The HTML format for the inline image tag is: 

     <img src="filename.gif">

Notice how the text immediately follows the image above? What if we want the text to start on the line below the image?

To force the text to begin below the image, simply insert a paragraph tag after the image tag: 

   <img src="filename.gif">  <p>

If you change your tag to <img align=top src="filename.gif"> you instruct the first line of your text to align with the top of the image and the following lines to drop immediately below the image.

With this tage, <img align=middle src="filename.gif">, you can change the placement of that first line of text to the middle of the image.

You can gain even more control over the design of your page - and present more attractive exhibitions - with another set of tags:

This tag, <img align=left src="filename.gif">, pushes the image to the left of the page and lets the text wrap to the right of the image. The tag <br clear=left > clears the flow of text and
allows the text to continue on the line below the image. Or you can try:

<img align=right src="filename.gif">, which aligns the image along the right margin of your page and allows the text to wrap to the left of the image.

With all of these tags your design is at the mercy of the window size of your web browser. Change the window size (drag the small square at the left corner of your Netscape window) and you'll see what I mean. By using TABLES in your document you can exert much tighter control over your page layout. The following is a tabular listing of basic table tags.

HTML Table Tags
Starting
Tag		Ending
Tag
Tag Description
<TABLE> </TABLE> Containers for borderless table.
<TABLE BORDER> </TABLE> Tag pair for table with borders.
<TR> </TR> Establishes a row within a table.
<TD> </TD> Defines a cell within a table.
<TH> </TH> Centers a heading at a table's top or side.
<CAPTION> </CAPTION> Places a title at the top of the table.

Here's an example of a very simple 2 x 2 table with a narrow border:

Akan.
Clay head.
1981.96.2
Akan.
Clay head.
1981.96.3

<table border>
	<tr>
		<td> <IMG SRC="Akan_clay_head2.GIF"></td> 
		<td>Akan<br>Clay head<br>1981.96.3</td> 
	</tr>
	<tr>
		<td> <IMG SRC="Akan_clay_head3.GIF"></td> 
		<td>Akan<br>Clay head<br>1981.96.3</td> 
	</tr>
</table>

If we'd like the table to fill up the window we change the tag slightly:

Akan.
Clay head.
1981.96.2
Akan.
Clay head.
1981.96.3

<table width=100% border>
	<tr>
		<td> <IMG SRC="Akan_clay_head2.GIF"></td> 
		<td>Akan<br>Clay head<br>1981.96.3</td> 
	</tr>
	<tr>
		<td> <IMG SRC="Akan_clay_head3.GIF"></td> 
		<td>Akan<br>Clay head<br>1981.96.3</td> 
	</tr>
</table>

If we'd like to align the images in the center of each table row we need to add to those tags:

Akan.
Clay head.
1981.96.2
Akan.
Clay head.
1981.96.3

<table width=100% border>
	<tr>
		<td align=center valign=middle><IMG SRC="Akan_clay_head2.GIF"></td> 
		<td>Akan<br>Clay head<br>1981.96.3</td> 
	</tr>
	<tr>
		<td align=center valign=middle><IMG SRC="Akan_clay_head3.GIF"></td> 
		<td>Akan<br>Clay head<br>1981.96.3</td> 
	</tr>
</table>

For more information on tables see the Table Sampler.

For general information on HTML see this excellent web reference site, Webmaster Reference Library.

Return to Class Home Page