Web Page Design
HTML Tutorial
PART 1:   Introduction, Text, Lists, Internal Links

Click here to return to "outline" page

Table of Contents

  1.   INTRODUCTION
    1.   Internet
    2.   World Wide Web (WWW)
    3.   Browsers
    4.   HTML
    5.   Basic web page structure
  2.   TEXT PRESENTATION
    1.   Text formatting
    2.   Text structuring
  3.   LISTS
    1.   Menus
    2.   Unordered lists
    3.   Ordered lists
    4.   Directory lists
  4.   INTERNAL LINKS
    1.   HREF tag
    2.   NAME tag
A.   INTRODUCTION
A - 1.   Internet

A - 2.   World Wide Web (WWW)

A - 3.   Browsers

A - 4.   HTML

  1.   Overview and history

  2.   Version 1 thru 3.2

  3.   Hardware & software considerations

  4.   The process of creating a page

    • Write the HTML code using a simple text editor.

    • Store the code (program) in a file. Be sure to save your file as a simple "text" file. If you save it as a Word Perfect or other word processing file it will not work because the word processing program has placed "hidden" codes in your file the browser can not read.

    • Test the program by reading it with your browser to make sure it does exactly what you want.

    • Transfer the program to a designated directory on your ISP's server.

    • It is now ready for people around the world to access.
A - 5.   Basic web page structure

  1. HTML uses "tags" to control browser presentation.

  2. Tag format

  3. Page "tag" structure 
    	<HTML>
		<HEAD> 
			<TITLE> XXXXXXXXX </TITLE>
		</HEAD>
		<BODY>
			XXXXXXXX
			XXXXXXXX
			XXXXXXXX
		</BODY>
	</HTML>
B.   TEXT PRESENTATION

B - 1   Text Formatting

B - bold tag
Purpose: To make text bold.
Example:

BASEFONT with SIZE tag
Purpose: Sets default font attributes.
Example 1:

  • Code:

    <BASEFONT SIZE=7>Here is the text.
  • Result:

    Here is the text.

Example 2:

  • Code:

    <BASEFONT SIZE=1>Here is the text.
  • Result

    Here is the text.

BIG tag
Purpose: Increases the text size by 1.
Example 1:

  • Code:
    The house was <BIG>larger</BIG> than the car.
  • Result:
    The house was larger than the car.

Example 2:
  • Code
    The ball is <BIG>gone <BIG>gone <BIG> gone.
  • Result:
    The ball is gone gone gone.

BLINK tag
Purpose: Tells browser to blink specified text.
Note: Does NOT work with Internet Explorer.
Example:

  • Code:
    When the light is red, you should <BLINK>STOP</BLINK>.
  • Result:
    When the light is red, you should STOP.
Comment tag
Purpose: To add comments to your code.
Example:
  • Code:
    <!-- This is a comment  -->
  • Result:
    No result - the comment will not appear.

EM tag
Purpose: Browser will emphasize text. Usually in italics.
Example:

  • Code:
    She uses a <EM>Netscape</EM> browser.
  • Result:
    She uses a Netscape browser.

FONT tag
Purpose: Sets font attributes - SIZE, COLOR, FACE
SIZE Examples:

  • Code: 
    <font size=7>This is font size 7
<font size=6>This is font size 6
<font size=5>This is font size 5
<font size=4>This is font size 4
<font size=3>This is font size 3
<font size=2>This is font size 2
<font size=1>This is font size 1
  • Result:
    This is font size 7
    This is font size 6
    This is font size 5
    This is font size 4
    This is font size 3
    This is font size 2
    This is font size 1

Example - changing size with + or -

  • Code: 
    <font size=7>This is seven
<font size=-4>This is 7 - 4 = size 3
<font size=+2>This is 3 + 2 = size 5

  • Result:
    This is seven
    This is 7 - 4 = size 3
    This is 3 + 2 = size 5

Example - FONT COLOR
Note: Some browsers will NOT accept the COLOR attribute. Internet Explorer 3.0 or greater recognizes the following named colors:

  • Code:
    <FONT COLOR="color name" OR "hexadecimal value">

    See Part 2 for more details on color. This is BLACK
    This is BLUE
    This is RED
    This is GREEN
    This is GRAY
    This is LIME
    This is NAVY
    This is SILVER
    This is WHITE
    This is FUCHSIA
    This is MAROON
    This is OLIVE
    This is TEAL
    This is YELLOW

FONT FACE Examples:

  • Code:
    <FONT FACE="ARIAL">
  • Examples:
    This is an example of COURIER face type.
    This is an example of LUCIDA face type.
    This is an example of ARIAL face type.
    This is an example of FUTURA face type.
    This is an example of PLAYBILL face type.
    This is an example of UMBRA face type.
    This is an example of VERDANA face type.
    This is an example of TIMES NEW ROMAN face type.

FONT SIZE, COLOR, FACE example:

  • Code:
    <FONT SIZE="4" COLOR="RED" FACE="PLAYBILL">
  • Result:
    Now is the time for all good men to come to the aid of their country.

/FONT tag
Purpose: Re-sets the font to whatever the previous setting was.
Examples:
  • Code:
    Before font set, 
< FONT SIZE="7" COLOR="RED" FACE="PLAYBILL">
after the font is changed. 
</FONT> 
and now the font is back to what it 
was before the change.
  • Result:
    Before font set,
    after the font is changed.
    and now the font is back to what it was before the change.
H tag
Purpose: Headins
Example:
  • Code:
    <H1> ..... </H1>
<H2> ..... </H2>
<H3> ..... </H3>
<H4> ..... </H4>
<H5> ..... </H5>
<H6> ..... </H6>
  • Result:

    This is H1

    This is H2

    This is H3

    This is H4

    This is H5
    This is H6

I tag
Purpose: Set text to italic.
Example:
  • Code:
    Regular type, 
<I>italic type
</I>regular type
  • Result:
    Regular type, italic type regular type
KBD tag
Purpose: Frequently used in reference material to indicate that the user needs to perform some activity. Normally, browsers will display the text in a bold, fixed-width font.
Example:
  • Code:
    Follow the steps outlined in the
<KBD>manual of operations </KBD>
before using.
  • Result:
    Follow the steps outlined in the manual of operations before using.

PRE tag
Purpose: Displays text exactly as typed.
Example:
  • Code:
    <PRE>Now is the time
for all good men
to come to the aid
of their country.</PRE>
  • Result:
    	Now is the time
	for all good men
	to come to the aid
	of their country.
STRIK tag
Purpose: Strikethrough text Example:
  • Code:
    Mr. Jones likes to <STRIKE>swim</STRIKE> during the summer.
  • Result:
    Mr. Jones likes to swim during the summer.
samp tag
Purpose: Types literal text.
Example:
  • Code:
    The screen printed <SAMP> ERROR, can not read file.</SAMP>
  • Result:
    The screen printed ERROR, can not read file.
SMALL tag
Purpose: Reduces font size by one.
Example:
  • Code: 
  • <FONT SIZE=7>The <SMALL> line <SMALL> is getting <SMALL> smaller, but </SMALL>
now </SMALL> is getting </SMALL> bigger.
  • Result:
    The line is getting smaller, but now is getting bigger.

STRONG tag
Purpose: Add emphasis to text.
Example:
  • Code:
    Here are some <STRONG>bold words.</STRONG>
  • Result:


    Here are some bold words.

SUB tag
Purpose: Subscript
Example:
  • Code:
    X <SUB> (a-3)</SUB> + Y <SUB>(b+2)</SUB>= Z
  • Result:
    X (a-3) + Y (b+2)= Z
SUP tag
Purpose: Superscript
Example:
  • Code:
    X <SUP> (a-3)</SUP> + Y <SUP>(b+2)</SUP>= Z
  • Result:
    X (a-3) + Y (b+2)= Z
TT tag
Purpose: Put text in fixed width font.
Example:
  • Code:
    <TT>Here is fixed width text</TT>
  • Example:
    Here is fixed width text
U tag
Purpose: Underline
Example:
  • Code:
    Here is how you <U>underline</u> a word.
  • Result:
    Here is how you underline a word.
VAR tag
Purpose: Smaller fixed width font
Example:
  • Code:
    The term <VAR> browser </VAR> was used incorrectly.
  • Result:
    The term browser was used incorrectly.
Special characters
Purpose: To display non-keyboard characters
Example:
  • Code:
    & # 1 6 9 ; = & c o p y ; = copyright sign
  • Result:
    © = © = copyright sign
  • Some more examples 
    & # 6 0 ;    =   & l t ;         =  <
& # 6 2 ;    =   & g t ;         =  >
& # 1 6 0 ;  =   & n b s p ;     =  Non-breaking space
& # 1 7 4 ;  =   & r e g ;       =  ®
& # 1 7 6 ;  =   & d e g ;       =  °
& # 1 7 7 ;  =   & p l u s m n ; = ±
& # 1 8 0 ;  =   & a c u t e ;   = ´
& # 1 8 9 ;  =   & f r a c 1 2 ; = ½
& # 1 9 4 ;  =   & c i r ;       = ○
& # 2 0 3 ;  =   & E u m l ;     = ë

B - 2   Text Structuring

ADDRESS tag
Purpose: Container tags for webmaster or contact person's address. Usually on bottom of first page.
Example:
  • Code:
    <ADDRESS> Webmaster is Sue Brown . . . < /ADDRESS>
  • Result:
    Webmaster is Sue Brown . . .
AU tag
Purpose: Lists authors. A 3.2 tag not used very much. Will display text between tags.
Example:
  • Code:
    <AU>Authors: Smith, J., Jones, R., Johnson, T.</AU>
  • Result:
    Authors: Smith, J., Jones, R., Johnson, T.
BLOCKQUOTE tag or BQ tag
Purpose: Indent a block of text
Example:
  • Code:
    <blockquote>Now is the time for all good men to come to 
the aid of their country.  Now is the time for all good men 
to come to the aid of their country.
</blockquote>
  • Example:
    Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country.
BR tag
Purpose: Single line feed
Example:
  • Code:
    Use <BR> to end a line and go to the next line.
Here is an example:<BR> The quick <BR>brown<BR> fox<BR> 
jumps over <BR> the lazy dog.<BR>
  • Result:
    Use
    to end a line and go to the next line. Here is an example:
    The quick
    brown
    fox
    jumps over
    the lazy dog.
CENTER tag
Purpose: To center text or images
Example 1:
  • Code:
    <center> This is centered  </center>
  • Result:
    This is centered

Example 2:

  • Code:
    <h2 align=center> This is centered

  • Result:

    This is centered

    CITE tag
    Purpose: To display a citation.
    Example:
    • Code:
      <CITE> JAVA Programming for Dummies </CITE> 
by <AU>Barbara Williams </AU> was published 
in 1997.
    • Result:
      JAVA Programming for Dummies by Barbara Williams was published in 1997.
    HR tag
    Purpose: Horizontal Rule
    Examples:
    • Code:
      A simple line <HR>
A simple line with noshading <HT NOSHADE>
A wider line <HR SIZE=10>
A wider line with no shade <HR SIZE=10 NOSHADE>
A short line <HR SIZE=10 WIDTH=100 NOSHADE>
A short line justified left <HR SIZE=10 WIDTH=100 ALIGN=LEFT NOSHADE>
A line with color <HR SIZE=10 WIDTH=100 ALIGN=CENTER COLOR=RED NOSHADE>
    • Result:
      A simple line
      A simple line with noshading
      A wider line
      A wider line with no shade
      A short line
      A short line justified left
      A line with color
    P tag
    Purpose: Paragraph break - double line feed
    Example:
    • Code:
      Use <P> to end a line and skip a line before starting 
the next line.  Here is an example:<P> The quick <P>brown<P> fox<P>
jumps over <P> the lazy dog.<P>
    • Result:
      Use

      to end a line and skip a line before starting the next line. Here is an example:

      The quick

      brown

      fox

      jumps over

      the lazy dog.

    C.   LISTS
    C - 1.     Menus
    MENU tag
    Purpose: Arrange items in a list.
    Example:
    • Code:
      <MENU>
<li>Sue
<li>Bob
<li>Pam
<li>Tom
</MENU>
    • Results:
    • Sue
    • Bob
    • Pam
    • Tom
    C - 2.   Unordered lists
    UL LI /UL tags
    Purpose: Arrange items in a list
    Example:
    • Code:
      <uL>
<li>Item 1
<li>Item 2
<li>Item 2
</ul>
    • Result:
      • Item 1
      • Item 2
      • Item 2
    C - 3.   Ordered lists
    OL LI /OL TYPE= tags
    Purpose: To display ordered lists.
    Examples: 

    <oL>
<li>Item 1
<li>Item 2
<li>Item 2
</ol>
    1. Item 1
    2. Item 2
    3. Item 2

    Ordered list using "type=1" 

    <oL type=I>
<li>Item 1
<li>Item 2
<li>Item 2
</ol>
    1. Item 1
    2. Item 2
    3. Item 2
    Ordered list using "type-i" 

    <oL type=i>
<li>Item 1
<li>Item 2
<li>Item 2
</ol>
    1. Item 1
    2. Item 2
    3. Item 2

    Ordered list using "type=A 

    <oL type=A>
<li>Item 1
<li>Item 2
<li>Item 2
</ol>
    1. Item 1
    2. Item 2
    3. Item 2

    Ordered list using "type=a" 

    <oL type=a>
<li>Item 1
<li>Item 2
<li>Item 2
</ol>
    1. Item 1
    2. Item 2
    3. Item 2

    Ordered list using "nested" types 

    <OL TYPE=I>
<LI>Main issue
	<OL TYPE=A>
	<LI>Sub-issue
		<OL TYPE=1>
		<li>Sub-sub-issue
			<OL TYPE=i>
			<LI>Sub-sub-sub-issue
			<LI>Sub-sub-sub-issue
			</OL>
		<LI>Sub-sub-issue 
			<OL TYPE=i>
			<LI>Sub-sub-sub-issue 
			<LI>Sub-sub-sub-issue 
			</OL>
		</OL>
	<LI>Sub-issue 
		<OL TYPE=1>
		<li>Sub-sub-issue
			<OL TYPE=i>
			<LI>Sub-sub-sub-issue
			<LI>Sub-sub-sub-issue
			</OL>
		<LI>Sub-sub-issue 
			<OL TYPE=i>
			<LI>Sub-sub-sub-issue 
			<LI>Sub-sub-sub-issue 
			</OL>
		</OL>
	</OL>
<LI>Main Issue
	<OL TYPE=A>
	<LI>Sub-issue
		<OL TYPE=1>
		<li>Sub-sub-issue 
			<OL TYPE=i>
			<LI>Sub-sub-sub-issue
			<LI>Sub-sub-sub-issue
			</OL>
		<LI>Sub-sub-issue 
			<OL TYPE=i>
			<LI>Sub-sub-sub-issue 
			<LI>Sub-sub-sub-issue 
			</OL>
		</OL>
	<LI>Sub-issue 
		<OL TYPE=1>
		<li>Sub-sub-issue 
			<OL TYPE=i>
			<LI>Sub-sub-sub-issue 
			<LI>Sub-sub-sub-issue 
			</OL>
		<LI>Sub-sub-issue 
			<OL TYPE=i>
			<LI>Sub-sub-sub-issue 
			<LI>Sub-sub-sub-issue 
			</OL>
		</OL>
	</OL>
</ol>

    1. Main issue
      1. Sub-issue
        1. Sub-sub-issue
          1. Sub-sub-sub-issue
          2. Sub-sub-sub-issue
        2. Sub-sub-issue
          1. Sub-sub-sub-issue
          2. Sub-sub-sub-issue
      2. Sub-issue
        1. Sub-sub-issue
          1. Sub-sub-sub-issue
          2. Sub-sub-sub-issue
        2. Sub-sub-issue
          1. Sub-sub-sub-issue
          2. Sub-sub-sub-issue
    2. Main Issue
      1. Sub-issue
        1. Sub-sub-issue
          1. Sub-sub-sub-issue
          2. Sub-sub-sub-issue
        2. Sub-sub-issue
          1. Sub-sub-sub-issue
          2. Sub-sub-sub-issue
      2. Sub-issue
        1. Sub-sub-issue
          1. Sub-sub-sub-issue
          2. Sub-sub-sub-issue
        2. Sub-sub-issue
          1. Sub-sub-sub-issue
          2. Sub-sub-sub-issue
    C - 4.   Directory lists
    DT LI /DT tags
    Purpose: Arrange a list of index items.
    Example:
    • Code:
      <DL>
<DT> This is a "data term"
<DD> This is a "data description"
<DT> HTML
<DD> HyperText Markup Language
<DT> Term
<DD> Description of term
</DL>
    • Results:
      This is a "data term"
      This is a "data description"
      HTML
      HyperText Markup Language
      Term
      Description of term
    D.   INTERNAL LINKS
    What is a hyperlink?

    A "hyperlink" is a command which tells the computer to "branch" or "go to" another part of the current page, another page on the current "host server computer," or a page on some remote computer.

    Hyperlinks begin with the "A" or "anchor" command followed by a space and the letters "HREF." Then the link is defined. Note that hyperlinks end with the "/A" command.

    Links to another part of the same page.

    NAME & HREF tags
    Purpose: Defines point you are linking from and place you are linking to on a page.
    Example:

    • Code:
      <A NAME="top">This is the top of a page</a>
or
<A NAME="top"></a>
Then, at the point where 
you want to do the link to, 
type the "HREF" tag:
<A HREF="#top">Go to top of page."</a>
    • Results:
      Go to top of page."
  • Browsers Go to top of page."