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
Image Size  
  • Image size is controlled by the WIDTH and HEIGHT attributes.

  • It is a good idea for you to always include these values because when they are defined, the web browser will know how much space to leave for the image and can continue to display the rest of the page while the image loads. Otherwise, text does not appear until after the images have loaded, and it is no fun waiting for graphics on a 28.8 modem!

  • The height and width need not be the actual height and width of the images either. The web browser will scale images to fit in the space you define with the HEIGHT and WIDTH attributes.

  • The attributes are applied as usual. The following example shows an image sized to its true size and the same image scaled:

  • Here is the code I used to produce the images above:

<IMG SRC = "afraid_icon.gif" WIDTH = "36"
HEIGHT = "39">
<IMG SRC = "afraid_icon.gif" WIDTH = "100"
HEIGHT = "80">

Previous Page | Next Page