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
Positioning Text  
  • Besides controlling the size of the text, you will also want to control the placement of the text. In HTML placing text is very, very difficult because the language is meant to describe formatting, not layout. For example, since HTML does not really pay attention to white space, you cannot simply tab groups of text over.

  • However, there are a few tags that you can use for basic layout that are discussed in the following table.

Opening Tag Closing Tag Description
<CENTER> </CENTER> Centers the text between the tags
<BLOCKQUOTE> </BLOCKQUOTE> Indents the text between the tags
<NOBR> </NOBR> Specifies that the browser should not word wrap the text within the tags.
<PRE> </PRE> Specifies that text should be displayed as pre-formatted text. This tag was not exactly meant to be used for positioning text, but it can be. In fact, many web designers have created some very nice ASCII art sites using this tag. Check out Crystal Water's Page for a great example.
  • The following HTML code demonstrates how you might use these tags

<HTML>
<HEAD>
<TITLE>Text Positioning</TITLE>
</HEAD>
<BODY>

This is normal text
<CENTER>This is centered text</CETNER>
<BLOCKQUOTE>This is blockquoted text</BLOCKQUOTE>
<NOBR>This is <NOBR> text that will
not stop even when the browser wants to word wrap</NOBR>
</BODY>
</HTML>

  • The following figure shows the above HTML in the browser's window.

  • Notice that both the <CENTER> and the <BLOCKQUOTE> tags have an embedded new line character in them although this is browser dependent last I checked.

Layout Resources

Previous Page | Next Page