Working with images
HTML tag for images is img. This tag has no closing one.
The attribute src specifies the URL of the image file and the
attribute alt specifies the text to be shown by the text-only
browsers. The attribute alt is required.
<img src="URL" alt="text" />
The img tag also supports other attributes to be considered
later.
| Layout | HTML tags |
|---|
 |
<img src="sunset.gif" alt="sunset" /> |
Controlling the image alignment
The syntax for the image align attribute is:
<img src="URL" align="alignment"
alt="alt" />
Examples:
| align="bottom" | align="middle" |
|---|
|
sample text sample text sample text sample text sample text sample text
sample text sample text sample text |
sample text sample text sample text sample text sample text sample text
sample text sample text sample text |
| |
| align="middle" | align="top" |
|---|
|
sample text sample text sample text sample text sample text sample text
sample text sample text sample text |
sample text sample text sample text sample text sample text sample text
sample text sample text sample text |
| |
| align="left" | align="right" |
|---|
|
sample text sample text sample text sample text sample text sample text
sample text sample text sample text |
sample text sample text sample text sample text sample text sample text
sample text sample text sample text |
Controlling vertical and horizontal space
The vertical and horizontal space around the image can be increased with
the vspace and hspace attributes:
<img src="URL" vspace="value"
hspace="value" />
Examples:
| align="middle" vspace="20" |
|---|
|
sample text sample text sample text
sample text sample text sample text sample text sample text sample text
sample text sample text sample text | |
| align="left" hspace="20" |
|---|
|
sample text sample text sample text sample text sample text sample text
sample text sample text sample text sample text sample text sample text
sample text sample text sample text sample text sample text sample text
|
|
Controlling the image size
Width and height attributes instruct the browser to display the image at a
specific size. These attributes can be used to increase or decrease the
image size. The syntax for setting these attributes is:
<img src="URL" width="value" height="value" />
The original image size is (width)x(height) = 132x116. If one of the
attributes width/height is not specified the image will be scaled
proportionally.
| height="150" |
|---|
|
| |
| width="200" |
|---|
|
| |
| width="200" height="116" |
|---|
|
|
|
Background images
Background images can be specified within the <body> tag.
The syntax for inserting a background image is:
<body background="URL">
Usually the background image is a small file which be multiplied
automatically by the browser. Examples of background images are
presented below. Clicking on the buttons opens a small new window with the
corresponding background image.
