HTML 2: Lists and style tags

In this page we will review and demonstrate the three basic types of lists and some basic style tags.

  1. Lists

    The type of lists we will use are Ordered Lists <OL>, Unordered Lists <UL>, and Definition Lists <DL>. Of course each has a correspond closing tag.

    1. The structure of the code.
      Here is the format for Ordered Lists. Unordered Lists are similar.
      <OL>
      <LI> Item 1 goes here </LI>
      <LI> Item 2 goes here </LI>
      .
      .
      .
      </OL>
      Here is the format for a Definition List.
      <DL>
      <DT> The Defined Term goes here </DT>
      • <DD> The Defined Definition goes here </DD>
      <DT> The Defined Term goes here </DT>
      • <DD> The Defined Definition goes here </DD>
      </DL>

    2. Attributes
      Ordered Lists
      START, TYPE, and VALUE (used with the <LI> tag)
      The choices for TYPE are
      • A (upper-alpha),
      • a (lower-alpha),
      • I (upper-roman),
      • i (lower-roman), and
      • 1 (decimal - the default)
      Unordered Lists
      The TYPE (or STYLE) choices for Unordered Lists are:
      • DISC (a solid bullet - the default),
      • CIRCLE (a hollow bullet),
      • SQUARE (a square hollow bullet), and
      • NONE (for no bullet - this is a great way to indent text).
      Definition Lists
      The <DT> and <DD> tags have no attributes.

    3. Nesting & Combining Lists
      Look at the code for this page.

  2. Inline Styles

    The two general forms of inline styles are physical and logical.

    1. Physical Styles
      Bold <B>, Italics <I>, Underline <U>, Monospace <TT>, Big <BIG>, Small <SMALL>
      (The largest size the <BIG> will produce, in increments of 1, is size 7; the smallest that <SMALL> will produce, in steps of 1, is size 1.)
      <SUB> and <SUP> are useful in mathematics, like x10 or x2

    2. Logical Styles
      Emphasized text
      <STRONG> Emphasis, <EM> emphasized text
      Other Logical tags include: <BLOCKQUOTE>, <CITE>, and <ADDRESS>


      Font tags (deprecated in HTML 4.0 in favor of STYLE tags)
      <BASEFONT> changes the font size in the whole page. The size can be any integer from 1 to 7 with 3 being the normal (12 point) size. Attributes include COLOR, FACE, and SIZE.

      The basic <FONT> tag allows the attributes COLOR, FACE, and SIZE. See below for a special use of the FACE attribute. SIZE can be either relative or absolute.


  3. Other formating

    No formating
    <PRE>
    What                           !!!
     you                   get
         see          you
             is what
    </PRE>


    Special Characters
    One frequently needs to use special symbols like ©, <, a, and é. These are produced using either special HTML code, like &deg; to produce the degree ° symbol, or the Symbol FACE attribute of the FONT tag, like
    <FONT FACE="symbol">G<FONT>
    to produce G.
    A list of symbols can be found on my Math Symbols page.


    Lists using CSS
    Samples of the code needed to construct vertical and horizontal lists using Cascading Style Sheets can be found at Listamatic.