HTML for Web Graphics
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 |
|---|
Just place the IMG tag inside anchor tags, as you would to link text:
<A href = "...">
<IMG src = "..."></A>
Note that the closing anchor tag is completely up
against the closing right angle bracket of the IMG tag. Otherwise..
I keep getting little 'nicks' or underscores next to my linked images.
Why?
Whitespace between the image and the closing anchor tag will cause
that. Note that 'whitespace' also includes newlines, e.g.
<A href="..."><IMG src="...">
</A>
are usually transparent but I've used my 2x2 gold
gif here so you can see how this technique works.
You can align the gif left or right or put it in a table
cell to force it to at least that width.
Note that the height and width are declared to be whatever you please,
they don't have to match the gif's actual size (it's OK to lie!).
I've also put some space around them, to show that you could use a
non-transparent gif padded with white space for design effect.
Note also the use of the ALT attribute to avoid that browsers
with image loading turned off, or text-mode browsers, will display
spurious information such as [IMAGE].
<Img src = "/Icons/gold.gif"
width = 60
height = 60
vspace = 20
hspace = 20
align = right
alt = ""
>
Tables were not designed for
layout per se (they were designed for
representing tabular data) but their layout properties are less of a
"side effect" than the above methods; they are fairly flexible but do
take some effort to master, and complicate your HTML code.
Brief tutorial on placing images opposite each other on the same level
Linda Cole illustrates more
techniques for placing images.
How to design them, create them, and use them. And where to find them.
Transparency, anti-aliasing, image-maps, GIF animation, applying text
to images, and other general advice.
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.
|
