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 Placement and Alignment  
  • There are several attributes that affect how images are set within the page. These include: ALIGN, HSPACE and VSPACE, and HEIGHT and WIDTH.

  • The ALIGN attribute specifies where text will be placed relative to an image and how it will wrap around an image. You can specify an alignment of TOP, BOTTOM, CENTER, LEFT or RIGHT. The attribute is applied generically as follows:
<IMG SRC = "x.gif" ALIGN = "LEFT">
  • Let's take a look at an example since this is the easiest way to really understand image alignment coding. Consider the following HTML code:

<HTML>
<HEAD>
<TITLE>Image Alignment</TITLE>
</HEAD>
<BODY>
<B>No alignment</B><BR>
<IMG SRC = "afraid_icon.gif">
Here is some text for the non aligned image

<P>

<B>left alignment</B><BR>
<IMG SRC = "afraid_icon.gif" ALIGN = "LEFT">
Here is some text for the left aligned image

<BR CLEAR = "ALL">

<P>

<B>right alignment</B><BR>
<IMG SRC = "afraid_icon.gif" ALIGN = "RIGHT">
Here is some text for the right aligned image

<BR CLEAR = "ALL">

<P>

<B>center alignment</B><BR>
<IMG SRC = "afraid_icon.gif" ALIGN = "CENTER">
Here is some text for the center aligned image

<BR CLEAR = "ALL">

<P>

<B>top alignment</B><BR>
<IMG SRC = "afraid_icon.gif" ALIGN = "TOP">
Here is some text for the top aligned image

<BR CLEAR = "ALL">

<P>

<B>bottom alignment</B><BR>
<IMG SRC = "afraid_icon.gif" ALIGN = "BOTTOM">
Here is some text for the bottom aligned image
</BODY>
</HTML>

  • Notice the use of the <BR CLEAR = "ALL"> tag. By using this tag, you let the web browser know that your alignment instructions have terminated. This allows you to return to normal alignment.

  • The following image shows how a web browser would interpret the code above:

Previous Page | Next Page