eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak


Introducton to Web Design
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:

Attribute Description Example
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">

Previous Page | Next Page