★ wanayoo — archive 1999 http://www.wdvl.com/Authoring/Graphics/Techniques/HTML.html

HTML for Web Graphics

The IMG Tag

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	= "/old?u=http%3A%2F%2Fwww.wdvl.com%2FAuthoring%2FGraphics%2F&y=1999">
<Img	src	= "/old?u=http%3A%2F%2Fwww.wdvl.com%2FIcons%2Fgraphics.gif&y=1999"
	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

Hyperlinking Images

Just place the IMG tag inside anchor tags, as you would to link text:

<A	href	= "/old?u=http%3A%2F%2Fwww.wdvl.com%2FAuthoring%2FGraphics%2FTechniques%2F...&y=1999">
<IMG	src	= "/old?u=http%3A%2F%2Fwww.wdvl.com%2FAuthoring%2FGraphics%2FTechniques%2F...&y=1999"></A>

Note that the closing anchor tag is completely up against the closing right angle bracket of the IMG tag. Otherwise..

Q:

I keep getting little 'nicks' or underscores next to my linked images. Why?

A:

Whitespace between the image and the closing anchor tag will cause that. Note that 'whitespace' also includes newlines, e.g.

<A href="/old?u=http%3A%2F%2Fwww.wdvl.com%2FAuthoring%2FGraphics%2FTechniques%2F...&y=1999"><IMG src="/old?u=http%3A%2F%2Fwww.wdvl.com%2FAuthoring%2FGraphics%2FTechniques%2F...&y=1999">
</A>

GIF Spacers

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	= "/old?u=http%3A%2F%2Fwww.wdvl.com%2FIcons%2Fgold.gif&y=1999"
	width	= 60
	height	= 60
	vspace	= 20
	hspace	= 20
	align	= right
	alt	= ""
	>

HTML Tables

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.

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.