|
|
| |
|
Basic Rules of Image
|
|
-
|
<IMG SRC="image"
BORDER=n
WIDTH=pixel HEIGHT=pixel
ALIGN=anchor
ALT='text'>[image description or link]
|
| |
All web browsers support both GIF
(CompuServe Graphics Interchange Format)
and JPEG (Joint Photographic Experts Group)
graphic images in web page. You can use either
graphic format for the visual elements of your
web pages.
However, in practice most web developers will continue
to favor the GIF format for most page design
elements, and choose the JPEG format mostly for
photographs, complex "photographic" illustrations.
Keep in mind that HTML 4.0 standard forbids the
use of the anchor tag, </A>
for <IMG SRC=image> tag.
- BORDER=n
- Thickness of the border around the image.
However BORDER=0
(i.e., no border) is used most nowadays.
See below for detailed examples.
- WIDTH=pixel HEIGHT=pixel
- WIDTH and
HEIGHT originally used to give the actual size
of the image in pixels for the browsers.
However, these two parameters
are increasingly used nowadays to scale the display size
of image "on-the-fly" without physically resizing
the source image.
- VSPACE=pixel HSPACE=pixel
- Some browser interprets hard return/line feed combinations
as spaces and inserts a space between images. As a result,
images are not "seamless."
In order to remove the
gap between two or more images, you'll need to
place their <IMG SRC=image>
tags on the same
line without any spaces between them. Problem is that
if you are listing, let's say, 100 images, the line
gets too long and becomes very difficult to edit/modify.
In such case, you can use VSPACE
and HSPACE, both set to 0
and achive the same result.
- ALIGN=anchor
- Control horizontal alignment of adjacent text/image
relative to the image.
Infrequently used nowadays.
If you need to align adjacent text/image,
use <TABLE> tag
with VALIGN entity instead.
See below for detailed examples.
- ALT='text'
- Alternative "image-name."
Originally designed for "Text-based"
browsers that can not display.
However, this entity becomes
increasingly important to convey
additional information associated to
an image/link. Also appicable when
browsers cannot support a certain image type
or when browsers are configured not to display images.
|
| |
|
Original image size is
788x793 pixels
|
|
<IMG SRC="/stuff/gzone.jpg"
WIDTH=138 HEIGHT=143
BORDER=0
ALT='Example of IMG tag'>
|
 |
|
|
<IMG SRC="/shape/board.gif" BORDER=0>
<IMG SRC="/shape/board.gif" BORDER=0>
<IMG SRC="/shape/board.gif" BORDER=0>
<IMG SRC="/shape/board.gif" BORDER=0>
|
|
|
|
|
<IMG SRC="/shape/board.gif"VSPACE=0 HSPACE=0 BORDER=0>
<IMG SRC="/shape/board.gif"VSPACE=0 HSPACE=0 BORDER=0>
<IMG SRC="/shape/board.gif"VSPACE=0 HSPACE=0 BORDER=0>
<IMG SRC="/shape/board.gif"VSPACE=0 HSPACE=0 BORDER=0>
|
|
|
|
Image Alignment
|
-
|
|
<IMG ALIGN=top|texttop|middle|absmiddle|
baseline|bottom|absbottom>
|
| |
Control horizontal alignment of adjacent text/image
relative to the image.
Used infrequently nowadays. If you really need
to align adjacent text/image,
use <TABLE>
tag with VALIGN entity instead for
consistent and predictable results.
<IMG ALIGN=anchor>
tag will not gurantee the absolute
positioning in case of font
See below for detailed examples.
- ALIGN=top
- Aligns itself with the top of the tallest item in the line.
- ALIGN=texttop
- Aligns itself with the top of the
tallest text in the line (this is usually
but not always the same as
ALIGN=top).
- ALIGN=middle
- Aligns the baseline of the current
line with the middle of the image.
- ALIGN=absmiddle
- Aligns the absolute middle of the current line with the middle of the image.
- ALIGN=baseline
- Aligns the bottom of the image with the baseline of the current line.
- ALIGN=bottom
- Identical to ALIGN=baseline
but baseline is a better name.
- ALIGN=absbottom
- Aligns the absolute bottom of the image
with the bottom of the current line.
|
|
| |
top -- IMG ALIGN example
|
<IMG SRC=URL ALIGN=top>
top -- IMG ALIGN example
|
|
|
|
texttop -- IMG ALIGN example
|
<IMG SRC=URL ALIGN=texttop>texttop -- IMG ALIGN example
|
|
|
|
middle -- IMG ALIGN example
|
<IMG SRC=URL ALIGN=middle>middle -- IMG ALIGN example
|
|
|
|
absmiddle -- IMG ALIGN example
|
<IMG SRC=URL ALIGN=absmiddle>absmiddle -- IMG ALIGN example
|
|
|
|
baseline -- IMG ALIGN example
|
<IMG SRC=URL ALIGN=baseline>baseline -- IMG ALIGN example
|
|
|
|
bottom -- IMG ALIGN example
|
<IMG SRC=URL ALIGN=bottom>bottom -- IMG ALIGN example
|
|
|
|
absbottom -- IMG ALIGN example
|
<IMG SRC=URL ALIGN=absbottom>absbottom -- IMG ALIGN example
|
|
|
|
Image Border Line
|
-
|
|
<A HREF="URL"><IMG BORDER=n>[description]
|
| |
Thickness of the border around the image normally indicates
that the image is a hyperlinked object and 'clickable.'
(i.e., anchored by </A>)
However, BORDER=0
(i.e., no border display) can be used
to make image displayed seamlessly with the body of text.
|
|
| |
|
<A HREF="/sunny">
<IMG SRC="/sunny/girlboy.sunny.gif"
BORDER=0
ALT='Sunny Side Homepage'></A>
|
|
|
|
|
<A HREF="/sunny">
<IMG SRC="/sunny/girlboy.sunny.gif"
BORDER=1
ALT='Sunny Side Homepage'></A>
|
|
|
|
|
<A HREF="/sunny">
<IMG SRC="/sunny/girlboy.sunny.gif"
BORDER=5
ALT='Sunny Side Homepage'></A>
|
|
|
|
|
<A HREF="/sunny">
<IMG SRC="/sunny/girlboy.sunny.gif"
BORDER=20
ALT='Sunny Side Homepage'></A>
|
|
|
|
|
