Setting up a Web Site - HTML

Image Files

JPG Scanned Photo GIF Graphic Animated GIF
Paul Dempsey Mail

The Image Tag

To display the file handup.gif, use the following tag:

<IMG SRC="handup.gif"> Here's a sample image<P> This would be displayed as:

Here's a sample image

The ALIGN parameter can change placement of adjoining text:

<IMG SRC="handup.gif" ALIGN=TOP> Text at the top<P> <IMG SRC="handup.gif" ALIGN=MIDDLE> Text in middle<P> Here's what ALIGN does:

Text at the top

Text in middle

SRC may specify relative or absolute references (like HREF):

<IMG SRC="http://www.ship.edu/~pfdemp/quest.gif"> What? <IMG SRC="http://www.ship.edu/~pfdemp/new.gif"> New! Those tags would retrieve these images :

What? New!

Images and Links

Use the image handup.gif to link to section of this document named "Top":

<A HREF="#Top"> <IMG SRC="handup.gif"> </A>

Here is the linked image (try clicking it):

Parameter BORDER=0 can be used to eliminate the border:

<A HREF="#Top"> <IMG BORDER=0 SRC="handup.gif"> </A>

You may like this better:

Parameter ALT can be used to specify alternate text if browser is not using graphics:

<A HREF="#Top"> <IMG BORDER=0 ALT="Go Up" SRC="handup.gif"> </A>

Colors and Backgrounds

Image files can be used to create a background for web pages:

For a background, use the <BODY> tag at beginning of document (after TITLE tag). The format is:

<BODY BACKGROUND="su2.gif">

Image is repeated throughout the document.

Using the <BODY> tag to change the colors in document:

<BODY BGCOLOR="#FFFFFF">

Different codes for background colors:

FF00FF FFFF00 00FF00 00FFFF 0000FF

Different colors may also be assigned to text and links using the <BODY> tag:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#003399">

Review

Examples of the <IMG> tag and <BODY> tag:

<IMG SRC="handup.gif">
Displays the image in the file handup.gif, which is located in the same directory as the HTML document.

<IMG SRC="handup.gif" ALIGN=MIDDLE> Text
Displays the image and aligns the adjoining text in the middle of the image.

<IMG SRC="http://www.ship.edu/~pfdemp/new.gif">
An absolute reference to an image file.

<A HREF="#Top"> <IMG BORDER=0 SRC="handup.gif"> </A>
Using an image as a link (with no border).

<A HREF="#Top"> <IMG ALT="Go Up" SRC="handup.gif"> </A>
The ALT parameter, which displays text for non-graphical browsers (such as Lynx).

<BODY BACKGROUND="backwhit.gif">
Using an image as background.

<BODY BGCOLOR=#FFFFFF>
Setting the background color to white.

Go to Top of Page

Back to Contents Page On to Next Section

Web Development Workshop
1999 MSACROA Conference
Sunday, November 28, 1999