Intermediate Web Publishing

HTML for Images

A (Anchor) -- links

<A HREF="uo.gif">UO letters</A>
 

UO letters

IMG (IMaGe) -- embedding images in text

<IMG
 SRC="Frohnmayer56x74.GIF" 
 ALT="Photo of the UO Pres" 
 ALIGN="right"
 WIDTH=28 HEIGHT=37 
 BORDER=5 HSPACE=10 
 VSPACE=10> The President

 

The "Object Editor" for images in Claris Home Page:

[CHP Image Object Editor]

 

HTML Code
Explanation
Example

SRC="http://www.uoregon.edu/
images/Frohnmayer56x74.GIF"

source URL (required)

ALT="Photo of the UO Pres"

alternative text if graphic cannot load

Photo of the UO Pres

ALIGN="right"

alignment of graphic with text (bottom, middle, top, left, right)

The University of Oregon President

WIDTH=28 HEIGHT=37

browser scaling -- number of pixels for browser to display graphic

“Photo

BORDER=5

border around graphic -- number of pixels thickness
default is 0 for most images, 1 for images used as link text

HSPACE=10 VSPACE=10

space around graphic -- number of pixels

ALIGN parameter examples:

ALIGN=

Example

TOP

UO garlandFive generations of outstanding leaders and citizens have studied at the University of Oregon ...

MIDDLE

UO garlandFive generations of outstanding leaders and citizens have studied at the University of Oregon ...

BOTTOM

UO garlandFive generations of outstanding leaders and citizens have studied at the University of Oregon ...

LEFT

(Netscape
extension)

UO garlandFive generations of outstanding leaders and citizens have studied at the University of Oregon since it opened in 1876. Today's students, like the 350,000 who came before them, have access to the most current knowledge ...

RIGHT

(Netscape
extension)

UO garlandFive generations of outstanding leaders and citizens have studied at the University of Oregon since it opened in 1876. Today's students, like the 350,000 who came before them, have access to the most current knowledge in classes, laboratories, and seminars conducted by active researchers....

BODY -- specifying background etc.

   <BODY BACKGROUND="http://www.uoregon.edu/new/images/bkgd.ot2.jpg">

(example)

hint: small backround images tile to fill the window

 

hint: large background images are frequently combined with table cells that have absolute pixel widths, allowing placement of text relative to the background image. [see <http://www.killersites.com/1-design/tables.html>]

hint: recent (v4) versions of browsers also allow background as an attribute on individual table cells, e.g. <TD BACKGROUND="greenbar.gif">

EXERCISE

Change the attributes for an image

[next]Next: Image Formats