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] 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 [WWW]

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

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">

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 WWW logo on the left of the page. 

<IMG SRC="/Icons/WWWlogo48.gif"  alt="WWW" align=right>

displays the WWW logo on the right of the page. 

<IMG SRC="/Icons/WWWlogo48.gif"  alt="WWW" align=top>

displays the WWW with the top aligned. 

<IMG SRC="/Icons/WWWlogo48.gif"  alt="WWW" align=middle>

displays the WWW 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 [WWW] 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 [WWW] without a border. The graphic is still a hyperlink, but it looks like an inline image without a hyperlink.

Height and Width

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).

HTML for Web Graphics

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.

___________________
Up to => Home / Authoring / HTML / Body /

Help ! Index Library Site Map Search Topics Top100
Advertising. Hosted by Charm Net. © 1997 CyberWeb SoftWare. Legal Stuff.
10/Nov/1997 http://Stars.com/Authoring/HTML/Body/img.html
Comments ?
Made with Cascading Style Sheets The Web Developer's Virtual Library