|
Resizing Images
Adding height and width attributes to
your images, will resize the image to your liking.
Also adding the exact height & width
of your image, without resizing it, will
speed up the load time of the image
on your Web Page.
Click Here For A Tool To Find Out Image Sizes
|
HTML Attribute
|
Effect
|
|
HEIGHT="number"
|
Specifies the height
of the image
in pixels
|
|
WIDTH="number"
|
Specifies the width
of the image
in pixels
| |
Here is an example on the placement
of these attributes within your image code.
I will be using the exact image size to aid
in the loading of the image on our Web Page.
<IMG SRC="aruba.jpg" HEIGHT="361" WIDTH="251" ALT="sunset">
If the exact height and width is not known.
Then add either the width or the height alone.
The browser will figure the missing attribute
on it's own.
Aligning The Image
You can control how images align on
your Web Page. By default everything
on the document aligns to the left.
Here are the attributes for alignment of images.
|
HTML Attribute
|
Effect
|
|
ALIGN="bottom"
|
Aligns the bottom
of the image
with the
baseline of the
current line
|
|
ALIGN="left"
|
Allows an image to float
down and over
to the left margin.
Subsequent text
wraps to the right
of the image
|
|
ALIGN="middle"
|
Aligns the baseline
of the current line
with the middle
of the image
|
|
ALIGN="top"
|
Aligns the text
with the top
of the tallest
item in the line
|
|
ALIGN="right"
|
Aligns the image
with the right margin
and wraps the
text aound the left
|
|
HSPACE="number"
|
Controls the
horizontal space
around the
image in pixels
|
|
VSPACE="number"
|
Controls the
vertical space
around the
image in pixels
|
Centering The Image
Centering the image requires the use of
two tags. The <CENTER> and </CENTER>
This is how it would be used in your document:
<CENTER>
<IMG SRC="aruba.jpg" HEIGHT="361" WIDTH="251" ALT="sunset">
</CENTER>
Aligning The Image To The Right
The alignment tags are nested within the image code.
This is how it would be used in your document:
<IMG SRC="aruba.jpg" HEIGHT="361" WIDTH="251" ALIGN="right" ALT="sunset">
Aligning The Image To The Left
Text and images automaticlly default to the left.
The ALIGN="left" tag is use in conjunction with text.
This is how it would be used in your document:
<IMG SRC="aruba.jpg" HEIGHT="361" WIDTH="251" ALIGN="left" ALT="sunset">
Using The HSPACE And VSPACE
The HSPACE and VSPACE will put blank
space around your images. This will keep
your text from being right up close to your images.
I will show the HSPACE tag for horizontal spacing
but the VSPACE tag is used in the same way
to have some vertical spacing around your image.
This is how it would be used in your document:
<IMG SRC="aruba.jpg" HEIGHT="361" WIDTH="251" ALIGN="left" HSPACE="40" ALT="sunset">
You Will See Some Example Pages
Using Alignment Tags On The Next Page.
 Back------Next 
| 
