Inline Images
|
Inline images give the Web much of its visual appeal.
They can also cause people on the end of a slow link to give up and
go elsewhere; so unless large inline images are somehow vital to your
goal, try to avoid them or offer smaller versions or offer alternate
pages for those who prefer to avoid your images.
|
<IMG src="URL" alt="Alternate Text">
Embed a graphic image in the document.
Small icons like the following however have almost negligible
transfer cost and can greatly enhance the appearance of your pages.
The Img tag declares an in-line image; the URL pointing
to it is specified by the Src tag:
<IMG src="/Icons/WWWlogo48.gif" Alt="[WWW]">
which produces ![[WWW]](../../../Icons/WWWlogo48.gif)
In-line images are often placed inside anchors so that clicking on
them follows a hyperlink:
<a href="http://WWW.Stars.com/">
<IMG src="/Icons/WWWlogo48.gif" Alt="[WWW]"></a>
which produces
Here's a comprehensive example of an image tag.
It's linked to a URL; it has plenty of hspace to keep the text away.
|
|---|
<a href = "../">
<Img src = "/Icons/graphics.gif"
width = 108
height = 44
border = 0
hspace = 16
alt = "Graphics"
align = left ></a>
|
|---|
Be sure to supply WIDTH and HEIGHT attributes in the IMG tag.
This allows the browser to layout the page before all the graphics have
downloaded, otherwise it won't know how much space to allocate till the
graphics are fully downloaded.
Here's a list of the main
IMG attributes:
| src |
URL of image to embed |
|---|
| alt |
description for text mode browsers |
|---|
| align |
vertical or horizontal alignment
(top, middle, bottom, left or right) |
|---|
| height |
suggested height in pixels |
|---|
| width |
suggested width in pixels |
|---|
| border |
suggested link border width |
|---|
| hspace |
suggested horizontal gutter |
|---|
| vspace |
suggested vertical gutter |
|---|
| usemap |
use
client-side
image map |
|---|
| ismap |
use
server-side
image map |
|---|
Images: The Align Attribute
Specify a relationship to surrounding text.
The argument for align can be one of
left,
right,
top,
middle, or
bottom.
<IMG SRC="/Icons/WWWlogo48.gif" alt="WWW">
displays the .
By default the bottom of the image is aligned
with the bottom of the text.
<IMG SRC="/Icons/WWWlogo48.gif" alt="WWW" align=left>
displays the
logo
on the left of the page.
<IMG SRC="/Icons/WWWlogo48.gif" alt="WWW" align=right>
displays the
logo
on the right of the page.
<IMG SRC="/Icons/WWWlogo48.gif" alt="WWW" align=top>
displays the
with the top aligned.
<IMG SRC="/Icons/WWWlogo48.gif" alt="WWW" align=middle>
displays the
with the middle aligned.
Images: The Alt Attribute
Allows a text string to be put in place of the image
in clients that cannot display images.
<IMG SRC="/Icons/WWWlogo48.gif" alt="text">
will display the text in a text environment.
Unfortunately it's not used when image loading is suppressed.
Images: The Border Attribute
An inline image can also be a hyperlink. The Border attribute
allows the image to be displayed without the normal hyperlink
highlighting and appear like a normal inline image.
<a href="/index.html">
<IMG src="/Icons/WWWlogo48.gif" Alt="[WWW]"></a>
which produces
with a border.
To display a graphic hyperlink withoug a border, set the border
attribute to 0:
<a href="/index.html">
<IMG src="/Icons/WWWlogo48.gif" border=0 Alt="[WWW]"></a>
which produces
without a border. The graphic is still a hyperlink, but it looks
like an inline image without a hyperlink.
Allows the browser to set aside space for the graphic so text can load
quickly. Helps to retain page formatting even when image links are
broken. Units are in pixels.
<IMG SRC="/Icons/WWWlogo48.gif" height=48 width=48>
Of course, with every rule there is an exception.
In this case, if the alt text won't fit into the space set aside by the
height & width attributes, the attributes should be omitted.
The alt text will then be fully displayed (image loading off).
When
authoring
HTML with
style, you might use
cascading style sheets, or
graphics
tools to create
background
images,
icons,
3d graphics.
Multimedia can help to
animate them, e.g. using
GIF animation or
Java
applets.
For interactivity use
forms processed by
JavaScript or
CGI
software.
Use
META tags to help
search
engines find you on the
Internet.
Our
reference
index or the
WWW-VL can help you
locate more.
|
