eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   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 Margins  
  • Image margins are controlled with the HSPACE and VSPACE attributes.

  • Simply put, the HSPACE and VSPACE attributes define the margin around your image in pixels.

  • Since this is best seen by example, let's look at one. Consider the following code:
<HTML>
<HEAD>
<TITLE>Margins</TITLE>
</HEAD>
<BODY>
Here is some text that should wrap around this image
very snuggly.  <IMG SRC = "afraid_icon.gif"
ALIGN = "LEFT"> That is because we are using the default
margins and the default margins are not very large.

<BR CLEAR = "ALL">

This image on the other hand should have a decent margin
<IMG SRC = "afraid_icon.gif" VSPACE = "15" HSPACE = "15"
        ALIGN = "LEFT">
around it so that the image will seem displaced a bit.
This usually looks nicer.
</BODY>
</HTML>

  • When interpreted by the browser, the previous code would be displayed as follows:

Here is some text that should wrap around this image very snuggly. That is because we are using the default margins and the default margins are not very large.
This image on the other hand should have a decent margin around it so that the image will seem displaced a bit. This usually looks nicer.

Previous Page | Next Page