ALS 3203 - Lesson 7
Inserting Images into HTML Documents
To insert any image into a web document use the <img src="filename.gif"> tag for a .gif image, or <img src="filename.jpg"> for a .jpg file (these are the most commonly used graphics formats that you can use to place an image into a web document).
You can define the dimensions of an image, or let the browser decide for you.
Inserting Images into HTML Documents
To place an image called filename.gif into a table cell, use the following tags:
<table>
<tr>
<td><img src="filename.gif"></td>
</tr>
</table>
As an example, the file bat.gif (animated bat) will be placed in a table, along with another image (cool_dragon.gif), also animated. The HTML codes for this table with images are to the right of the images.
 |
<table border> <tr> <td> <IMG SRC="bat.gif" WIDTH="150" HEIGHT="150" ALT="Flying bat"> </td> </tr> <tr><td> <IMG SRC="cool_dragon.gif" WIDTH="64" HEIGHT="64" ALT="Running dragon"> </td> </tr> </table> |
 |
Notice that the size of each table cell is determined by the size (height) of the image. I have centered the dragon to add some symmetry to the table.
Background Images:
Sometimes you want a graphical backgound image for the entire page. A single image is copied by the browser as many times as necessary to fill the entire page. Any image will do.
Tags for creating a background for the entire page are: <body background="filename.gif"> . You may also define a background color in the body tag using the <body bgcolor="#ff0000"> tags. A background image will be painted over a background color (i.e., an image has priority over a backgound color).
