Images
- Okay, links are pretty cool. But we had links before the web was graphical, before Mosaic and Netscape completely revolutionized the web universe.
- What everyone wants to know how to do, is to add images to their web page.
Referencing Images
- Adding images to your page is as easy as adding links to it. In fact, the
HTML code for it is very similar.
Unlike the anchor tag, however, your document is not replaced by the referenced image. Instead, the web server retrieves the image and actually sets it "within" the HTML document in which the reference occurs and displays them both together.
- Specifically, you will use the <IMG> tag to load images into your HTML document.
- Like the anchor tag, you never really use the IMG tag without any attributes. Instead, you will use one of several attributes.
- The attribute you will most often use, however, is the SRC attribute that specifics the location of an image that you would like incorporated into your HTML document.
- Thus, the following code would retrieve the image named "ball_red_icon.gif", that is located at "www.eff.org" in the "Icons/Balls" directory and would insert it into the HTML document.
| <IMG SRC = "http://www.eff.org/Icons/Balls/ball_red_icon.gif"> |
- One final note about referencing images. It is very possible that someone will be viewing your page in a non-graphical way. Perhaps they are blind. Perhaps they have turned off image loading to speed up their browsing (since images take a long time to load up). Or perhaps they are using a non-graphical web browser like LYNX.
- Whatever the case, it is considered good form to always include a value for the ALT attribute in the IMG tag. The ALT attribute specifies some text that will be displayed if the image cannot be and looks like the following:
| <IMG SRC = "http://www.eff.org/Icons/Balls/ball_red_icon.gif" ALT = "[*]"> |
- The IMG tag has several other attributes that we will discuss in the next
few pages, but that we will include in the following table here:
ALIGN
Aligns text around an image in a word wrap style. Can be TOP, MIDDLE, BOTTOM, RIGHT or LEFT.
<IMG SRC = "x.gif" ALIGN = "LEFT">
ALT
Specifies text that should be displayed if the user cannot see images.
<IMG SRC = "x.gif" ALT = "x">
BORDER
Specifies the pixel size of the border that surrounds the image
<IMG SRC = "x.gif" BORDER = "10">
HEIGHT
Specifies the height of the image in pixels
<IMG SRC = "x.gif" HEIGHT = "202">
HSPACE
Specifies the horizontal margin around the image in pixels
<IMG SRC = "x.gif" HSPACE = "5">
SRC
Specifies the source of the image that should be displayed
<IMG SRC = "x.gif">
VSPACE
Specifies the vertical margin around the image in pixels
<IMG SRC = "x.gif" VSPACE = "5">
WIDTH
Specifies the width of the image in pixels
<IMG SRC = "x.gif" WIDTH = "202">
Exercise Six
- In this exercise, we'll take our familiar HTML document and using the sample <IMG> tag, from the previous page, place a ball icon in front of each of our favorite web site links.
- Try it out....
- The figure below shows what your page might look like:
- And here is the code we used to get the page
<HTML>
<HEAD>
<TITLE>Bob Frog</TITLE>
</HEAD>
<BODY>
<BLOCKQUOTE>
<ADDRESS>
<P ALIGN = "RIGHT">
Bob Frog
<BR>26 Ayer Rajah Cres. 12-01
<BR>Singapore, 12994466556
</P>
</ADDRESS>
<P ALIGN = "LEFT">
<FONT SIZE = "4" COLOR = "RED"><B>
About me</B></FONT><BR>
<BLOCKQUOTE>
Hello, my name is <B>Bob the Frog</B>
and I am 278 years old from the <I>Gamma
Quadrant</I>. Please send me
<A HREF = "mailto:bob@email.com">email</A>!
</BLOCKQUOTE>
<P>
<FONT SIZE = "4" COLOR = "RED"><B>
About my work</B></FONT><BR>
<BLOCKQUOTE>
I am currently a software engineer working in
Singapore doing <U>training</U> and
<U>development</U>.
</BLOCKQUOTE>
Here is a list of my favorite links:
<BLOCKQUOTE>
<IMG SRC = "http://www.eff.org/ball_red.gif"
ALT = "[*]">
<A HREF = "http://www.eeye.com.sg">Electric Eye</A>
<BR><IMG SRC = "http://www.eff.org/ball_red.gif"
ALT = "[*]">
<A HREF = "http://www.extropia.com">Selena Sol's
Homepage</A>
</BLOCKQUOTE>
</BLOCKQUOTE>
</BODY>
</HTML> |
More HTML and CSS: 
