MIS 114

Web Page Essentials

Project 3: Formatting Your Document

Lesson 1: Adding Headings

Six levels of heading stlyes are available to you:
<H1>Header 1</H1> <H2>Header 2</H2> ... <H6>Header 6</H6> are displayed as follows:

    Header 1

    Header 2

    Header 3

    Header 4

    Header 5
    Header 6

    Lesson 2: Grouping Text Logically

    A <BR> tag will force a hard (or carriage) return to single space text.

    Earlier versions of HTML only had a single <P> tag to indicate the beginning of a new paragraph.

    The <P> generates a blank row between paragraphs. Restore (rather than maximize your browser window, then drag the browser's window left or right border to change its horizontal size on the screen and observe how paragraph text adjusts within the confines of the window's pane.

    HTML 3 and later versions require both a <P> at the beginning and a </P> at the end of a paragraph as standard syntax.


    Text can easily be formatted with physical tags to appear:
    1. Bold by entering: <B>Bold</B>
    2. Italic by entering: <I>Italic</I>
    3. Underlined by entering: <U>Underlined</U>

    You may also combine any two of the above formatting types,
    1. Bold & Italic by entering: <B><I>Bold & Italic</I></B>
    2. Bold & Underlined by entering: <B><U>Bold & Underlined</U></B>
    3. Italic & Underlined by entering: <I><U>Italic & Underlined</U></I>

    Finally you can combine all three: Bold & Italic & Underlined,


    The above are referred to as physical tags because they are intended to define how text is to be displayed in a web document. Tags which emphasize how text is used in a web page is covered in Lesson 6.

    Lesson 3: Creating Lists

      An Ordered List is numbered automatically:
    1. List Item one
    2. List Item two
    3. List Item three

    The above list can be generated with the following code:


    Ordered Lists' attributes include:
    TYPE="1" ;   for: 1, 2, 3, 4, ...
    "a" ;   for: a, b, c, d, ...
    "A" ;   for: A, B, C, D, ...
    "I" ;   for: I, II, III, IV, ...
    "i" ;   for: i, ii, iii, iv, ...
    START=x
    where x = 1 to ..., indicating the number of the initial List Item.

    An Unordered List is bulleted automatically:

    The above list can be generated with the following code:


    Unordered List attribute:
    TYPE="disc" ; the default, or
    "square"
    "circle"

    Notice, how the List's title is indented is determined by where it is placed before or after the beginning List tag regardless of whether it is <OL> or <UL>.

    Lesson 4: Creating a Definition List

    A Definition List
    displays a term on one line, and its meaning is indented on the next line as illustrated here.
    <DL> and </DL>
    The Definition List beginning and ending tags are placed around the entire list of terms and definitions making up the entire list.
    <DT>
    Definition Term, a <DT> is placed at the beginning of each term to be defined, it does not require an end tag.
    <DD>
    Definition Description, a <DD> is place at the beginning of each term's definition, it has no end tag.

    Definition List syntax:

    <DL>
    <DT>The Term
    <DD>The definition of the term.
    <DT>A Word
    <DD>A description of the word's meaning.
    </DL>


    Lesson 5: Adding a Horizontal Rule

    The Horizontal Rule (or line) across a page, marks the beginning and/or ending of a page segment. It is generated by a single <HR> tag.

    Horizontal Rule optional attributes: WIDTH="X%", WIDTH=X, SIZE=X, ALIGN=, NOSHADE.

    The following Horizontal Rule options are illustrated respectively below:

    <HR WIDTH=25 ALIGN=LEFT SIZE=2>
    <HR WIDTH="25%" ALIGN=LEFT SIZE=3>
    <HR WIDTH="50%" SIZE=5>
    <HR WIDTH="75%" ALIGN=RIGHT SIZE=8>
    <HR NOSHADE>

    Lesson 6: Logical Formatting Characters

    In addition to the making text appear, bold, italicized, or underlined, as illustrated in Lesson 2, the following logical tags can be used as follows:

    Logical style tags should be used to indicate how designated text is used in a page and how it is displayed is determined by browser settings. Physical style tags define the appearance of text and is generally uniform across most browsers.

    Lesson 7: Adding Preformatting Text

    Spaces are ignored in HTML so that entering the following text:


    will still appear when viewed with a browser as if it was entered without spaces as follows:


    unless it is entered between PREformat tags:

    <PRE>Here a space           there a space       everywhere
            a        "space         space."</PRE>

    Lesson 8: Adding Comments

    Comments are used to document a web page. Text entered between comment tags is not displayed in the normal browser window. Comments can be read by a viewer utilizing a browser's feature allowing a user to read a web page's source code.


    Lesson 9: Using Character Entities

    Special character strings are used to display certain characters that would otherwise interpreted by a browswer as HTML code. Most of these can be entered from HTML Assitant Pro's HTML menu.
    An example, in order to display the beginning Hypertext tag, <HTML> you must enter: &lt;HTML&gt;
    Continue with Project 3 or go back to the Table of Contents.
    Last updated: Dec. 6, 1998.