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
Basic HTML Body Tags  
  • Once you have defined the minimum HTML document, it is time to go about displaying some information. For the most part, displaying information is a matter of simply typing text into the body of the HTML document (between the <BODY> and </BODY> tags).

  • However, as we mentioned earlier, web browsers do not pay attention to white space, thus the following bits of text are displayed exactly the same way in a web browser window.

    This is some text that is displayed as you would expect
    
    
    This     is  some     text
    that is displayed in a way
    you
    would not expect: exactly the same as the above
    

  • So in order to control line breaks and paragraph marks, you must specify exactly where you want them to go (making two spaces between characters is another matter and will be covered in Day Two).

  • To specify a paragraph break, you will use the <P> tag and to specify a line break, you will use te <BR> tag.

  • You can also instruct the browser draw a line between text using the <HR> tag, but many design theorists recommend against using the tag.

  • The following table reviews the features of the tags

Opening Tag Closing Tag Description
<P> </P> Indicates a new paragraph and instructs the browser to add a blank line. Takes optional alignment parameters of LEFT, RIGHT or CENTER to align the paragraph.
<BR> none Forces a line break in the text. This tag takes an optional parameter to specify how text should wrap around images however we will discuss this on Day Two.
<HR> none This tag creates a horizontal line across the screen. By default the line will span the entire width of the document according to the specifications of BLOCKQUOTE and LIST tags. However, you can modify the look of the line by using any of the following attributes. ALIGN may equal LEFT, RIGHT, or CENTER. SIZE may equal some pixel value. WIDTH may equal some pixel value or some percentage of the document width. NOSHADE will turn off the beveling look. COLOR may equal some color hexvalue.

Basic HTML Body Tags by Example

  • The following HTML code shows the basic HTML body tags in action.

<HTML>
<HEAD>
<TITLE>Hello World</TITLE>
</HEAD>
<BODY>

This is a very simple web page.  Notice that
the browser does not pay  attention    too     spaces that
we
add to our document unless you specify what type of
spacing                                you want

<P>

Like when you use a paragraph tag or a <BR>
break line tag

<P>

And here is a hard rule

<P>

<HR ALIGN = "CENTER" SIZE = "10" WIDTH = "50%"
       COLOR = "AA0000" NOSHADE>

</BODY>
</HTML>

  • When read by a web browser, the previous HTML code would look the following:

Previous Page | Next Page