Document Structures

This HTML file, shell.html, illustrates some basic HTML tags for structuring Web pages. Below you will find examples of:
Headers, Lists, Tables, and Text Formatting.

Headers

Use headers to define the logical structure of a document, do not use them to change font size. The headers are used to outline a document when viewing the document information.

Formatted by Browser HTML Code

Header 1

 <H1>Header 1</H1>

Header 2

 <H2>Header 2</H2>

Header 3

 <H3>Header 3</H3>

Header 4

 <H4>Header 4</H4>


Lists

Formatted by Browser HTML Code
Unordered List
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
    • nested 1
      • nested 2
        • nested 3 
<UL>
<LI>item 1
<LI>item 2
<LI TYPE="square">item 3
<LI TYPE="circle">item 4
<LI TYPE="disc">item 5
   <UL>
   <LI>nested 1
      <UL>
      <LI>nested 2
         <UL>
         <LI>nested 3
         </UL>
      </UL>
   </UL>
</UL>
The TYPE attribute can be placed in the <UL> tag.
Ordered List
  1. item 1
  2. item 2
  3. item 3
  4. item 4
  5. item 5

<OL>
<LI>item 1
<LI TYPE="1">item 2
<LI TYPE="i">item 3
<LI TYPE="A">item 4
<LI TYPE="a">item 5
</OL>

The TYPE attribute can be placed in the <OL> tag.
Definition List
Definition Term 1.
Definition Description, blah, blah, blah.
Definition Term 2.
Definition Description, blah, blah, blah.

<DL>
<DT>Definition Term 1.
<DD>Definition Description, blah, blah, blah.
<DT>Definition Term 2.
<DD>Definition Description, blah, blah, blah.
</DL>


Tables

This table uses the following parameters: <TABLE BORDER="1" CELLSPACING="4" CELLPADDING="4">.

header - column 1 header - column 2 header - column 3
row 1 - item 1 row 1 - item 2 row 1 - item 3
row 2 - item 1 row 2 - item 2 row 2 - item 3

This table uses the following parameters: <TABLE BORDER="6" CELLSPACING="6" CELLPADDING="6">.

Here's an example table with a caption.
header - column 1 header - column 2 header - column 3
row 1 - item 1 row 1 - item 2 row 1 - item 3
row 2 - item 1 row 2 - item 2 row 2 - item 3

Use the View, Page Source of the browser to see the source code for these tables.

Text Formatting

Use the paragraph tags:
<P> </P>
to define a block of text. The text will word-wrap to fit the width of the page, and line feeds will be placed before and after the paragraph. 

Use the preformatted tags:
<PRE>  </PRE>
when you want a fixed-width font that maintains as-typed returns, spaces, and 
tabs. These tags will also place line feeds before and after the tagged text. 
The text will not word wrap so keep the lines short or they will run off of the page to the right......................Don't you just hate having to scroll sideways to read things!
Examples
Formatted by Browser HTML Code

lines and lines and lines of text

lines and lines and lines of text

<P>
lines and lines and lines of text
</P><P>
lines and lines and lines of text
</P>
Two line feeds following text:

Insert extra spaces with       &nbsp;.

Horizontal rule:
 Two line feeds following text: <BR><BR>

Insert extra spaces with &nbsp; &nbsp; &nbsp; &nbsp;.

Horizontal rule:<HR>
lines and lines and lines of text 
line 1      and six spaces
line 2       and seven spaces
line 3        and eight spaces
more lines and lines and lines of text		 lines and lines and lines of text
<PRE>
line 1      and six spaces
line 2       and seven spaces
line 3        and eight spaces
</PRE>
more lines and lines and lines of text
Examples of in-line formatting for text:
fixed-width font
emphasized, usually italicized
strong, usually bold 		Examples of in-line formatting for text: <BR>
<TT>fixed-width font</TT> <BR>
<EM>emphasized, usually italicized</EM> <BR>
<STRONG>strong, usually bold</STRONG>


An HTML File Document Structures Template Document using an Internal Style Sheet Template Document using an External Style Sheet

Return to the Workshop Index.

http://www.chem.vt.edu/chem-ed/gdh/gdh/structures.html, updated 10/16/98.

Copyright © 1997-98 by Brian M. Tissue, all rights reserved.