Web Page Design
HTML Tutorial
PART 3:   Basic Graphics & Sound

Click here to return to "outline" page

Table of Contents

  1. Displaying images
    1.   Image formats
    2.   IMG tag
    3.   Image size
    4.   Image position on page
    5.   Image and text relationship
  2. Background images
    1.   Background image characteristics
    2.   Background image tag
  3. Image hyperlink references
    1.   Image hyperlink tag
    2.   Table image hyperlinks
  4. Sound
    1.   Sound formats
    2.   IMG tag
    3.   Background sound tag

A.   Displaying images

A - 1   Image formats

  1.   When & why to use images
  2.   Various image formats
  3.   gif & jpg
A - 2   IMG tag

A - 3   Image size

A - 4   Image position on page
  • Code:
    <IMG SRC="SATURN.GIF" WIDTH=100 HEIGHT=100
ALIGN=RIGHT> <BR CLEAR=RIGHT>
<HR>
<IMG SRC="saturn.gif" WIDTH=100 HEIGHT=100>
<HR>
<CENTER>
<IMG SRC="saturn.gif" WIDTH=100 HEIGHT=100>
</CENTER>
<HR>
  • Example:


A - 5   Image and text relationship

  • Code:
    Now is the time for all good men 
to come to the aid of thwir country.
<IMG Src="saturn.gif" width=100 height=100>
Now is the time for all good men 
to come to the aid of thwir country.
  • Example:

    Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of thwir country.

  • Code:
    Now is the time for all good men 
to come to the aid of thwir country.
<IMG Src="saturn.gif" width=100 height=100 
align="top">
Now is the time for all good men 
to come to the aid of thwir country.
  • Example:
    Now is the time for all good men to come to the aid of thwir country. Now is the time for all good men to come to the aid of thwir country.

  • Code:
    Now is the time for all good men to come to the aid of thwir country.
<IMG Src="saturn.gif" width=100 height=100 
align="center">
Now is the time for all good men to come to the aid of thwir country.
  • Example:
    Now is the time for all good men to come to the aid of thwir country. Now is the time for all good men to come to the aid of thwir country.

  • Code:
    Now is the time for all good men 
to come to the aid of thwir country.
<IMG Src="saturn.gif" width=100 height=100 
align="right">
Now is the time for all good men 
to come to the aid of thwir country.
  • Example:
    Now is the time for all good men to come to the aid of thwir country. Now is the time for all good men to come to the aid of thwir country.

  • Code:
    Now is the time for all good men 
to come to the aid of thwir country.
<
	
  • Example:

    
Now is the time for all good men to come to the aid of thwir country.

Right side text.

    
Now is the time for all good men to come to the aid of thwir country.

B.   Background images
B - 1   Background image characteristics
  • Why use an image background?
  • Characteristics
B - 2   Background image tag
  • Code examples:
    <BODY BACKGROUND="sky.gif">
<BODY BACKGROUND="../picfile/sky.gif">
<BODY BACKGROUND="http://www.abc.com/picfile/sky.gif">
C.   Image hyperlink references

C - 1   Image hyperlink tag

  • Code:
    <a href="test1.htm"><IMG SRC="sky.gif" 
width=100 height=100>Go to Test-1 page</a>
<a href="test2.htm"><img src="saturn.jpg" 
width=100 height=100>Go to Test-2 page</a>
  • Example:
    Go to Test-1 page Go to Test-2 page
Text / link color relationships
  • TEXT = text color
  • LINK = link color before selection
  • ALINK = Active link color
  • VLINK = Visited link color

  • Code example:
    <BODY . . . TEXT="#000000" LINK="#0000FF"
ALINK=#00FF00" VLINK="#FF0000">
C - 2   Table image hyperlinks

  • Code:

    See Part 2, "Complex Table Code."

  • Example:

    Go to Test-1 page Go to Test-1 page
    Go to Test-2 page Go to Test-2 page
    Go to Test-1 page
    Go to top-of-page

D.   Sound

D - 1   Sound formats

  • Sound files come in a variety of formats and require a variety of hardware and software to execute them. Today, most computers are equiped for a variety of sound files.
  • Most sound files are "called" or "executed" just like image files. A simple, and almost universal file that runs on most computers, is the "au" sound file format. Here's an example. (Note: it may take a while to load.)
D - 2   HREF tag

  • Code:

    <a href="frgs02.au"> <img src="sky.gif">Click to hear sound.</a>
  • Example:
    Click to hear sound.
D - 3   Background sound tag

  • Code example:

    <BGSOUND SRC="URL of sound file" 
LOOP="number of seconds">

<BGSOUND SRC="../sounds/sound.au" 
LOOP=INFINITE>
Return to top of page