MIS 114

Web Page Essentials

Project 5: Adding Color and Graphics Art Tools  to Your Document (Continued)

Lesson 3: Adding a Graphic to Your Document

Action   Eeek!   CoffeeCup   Beetle   Arch   Chili Pepper   Aww Shucks   Lightbulb   Crayons  
The appropriate graphic can be useful in helping you to get a message across to those who visit your web page.
The path (directory name) and filename of one of the above images was used in the IMaGe SouRCe tag below. Can you tell which one?
<IMG SRC="images/bug.gif" ALT="Beetle">
Just to the right of the graphic, text can be aligned:
Up Arrow to its TOP,     Up Down at its MIDDLE,     Down Hand Pic or next to its BOTTOM.
<IMG SRC="images/d_hand.gif" ALIGN=BOTTOM ALT="Down Hand Pic"> 


(BOTTOM is the default, if an alignment option is not made.)




Netscape Navigator 3.x (and later versions) also allows text to be aligned:



Up Arrow
to its TEXTTOP,
   
Up Down
at its ABSMIDDLE,
   
Down Hand Pic
or next to its BASELINE.




<IMG SRC="images/d_hand.gif" ALIGN=BASELINE ALT="Down Hand Pic">




(The image attribute ALIGN=ABSBOTTOM is a 4th option. Generally BASELINE and ABSBOTTOM produce the same result, though sometimes ABSBOTTOM may be below the baseline of the text. Note, in the examples here shown, these Netscape extensions did not produce any detectable difference in how the text/graphic alignment was displayed.)




Use the "ALT=" option to accomodate viewers with a text browser, or those who have set 
their browser to not display graphics (not a bad idea when accessing graphic intensive sites via a slow modem).



<IMG SRC="images/d_hand.gif" ALT="Down Hand Pic">





Can you identify the graphics on this page for which an ALT tag was not used?





Sailboat Bar GIF






Lesson 4: Using a Graphic for a Background




Instead of using the BGCOLOR option with the <BODY> tag
(Lessons 1 & 2)
you can designate a graphic file as your page's BACKGROUND, as was done on UAH's
 Administrative Science home page:








<BODY BACKGROUND="images/whtmarb.jpg">




High Wire Bar GIF







Lesson 5: Creating a Linked Graphic




In Project 4: 
Adding Links to Your Document
especially in
Lessons 5 & 6,
we used descriptive clickable text references to the links we created. 
It is just as easy to use a graphic:





<A HREF="http://www.uah.edu/"><IMG SRC="uah.jpg"></A>





Position your mouse's pointer Hand over the UAH graphic to verify it is a link to UAH's home page.



We added two variations in our next example. With the UAH link above, 


    

  1. we used only the 
"IMaGe SouRCe" graphic as the the clickable link to the designated URL "http://www.uah.edu/"
reference; and, 

  2. the graphic was local ("uah.jpg" is in the same directory as this file, "project5.htm").





In the following example we


    

  1. combined a graphic with text to create the clickable link refrence; and,

  2. used a remote, rather than local, URL address:








<A HREF="http://www.uah.edu/colleges/adminsci/">

<IMG SRC=http://www.uah.edu/images/coll_icon2.gif ALIGN=MIDDLE>

College of Administrative Science</A>





Below, position your mouse pointer Hand over the CAS
graphic and the text next to it; both are links to CAS's home page.





CAS Bldg
College of Administrative Science








Lesson 6: Creating a Transparent Graphic

See your textbook, pages 99-104, on how LView Pro converted the "bark.gif" image into 
the transparent "tbark.gif" below:



Opaque GIF



<IMG SRC="bark.gif">*


Transparent GIF



<IMG SRC="tbark.gif">*




*Note the ALIGN=MIDDLE is included in the actual
Image Source tags above.


   Return to Lesson One of Project 5;

   continue to Project 6
   or return to the Table of Contents.



Last updated: Dec. 9, 1998.