[Home]

Topics

Tutorial

HTML

Dreamweaver

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

s


Tutorial HTML - Creating Lists and Headings


Lists

Ordered Lists: <OL>
    • Enclosed the list.
    • The easiest way to code the ordered list is to simply enter the <OL> container tag and then enter the individual ist items, each preceded by the <LI> (list item) tag.
    • START attribute:

      It is good.

      <OL START=8>

      <LI>Feeling Good!

      </OL>

      output:

      It is good.

      8. Feeling Good!

    • TYPE attribute:

      It is good.

      <OL TYPE=a>

      <LI>Feeling Good!

      </OL>

      output:

      It is good.

      a. Feeling Good!

       

Type
Generated Styles
Description

A

Uppercase letters A. B. C. D.
a
Lowercase letters a. b. c. d.
I
Uppercase Roman numerals I. II. III. IV.
i
Lowercase Roman numerals i. ii. iii. iv.
1
Arabic numerals (default) 1. 2. 3. 4.

up


<LI>, List Item

  • The <LI> container can contain almost anything if it defines an element of an ordered or unordered list.
  • TYPE attribute:

    <OL>

    <LI TYPE=A> This element is of type A

    <LI TYPE=a> This element is of type a

    <LI TYPE=I> This element is of type I

    <LI TYPE=i> This element is of type i

    </OL>

    output:

    A. This element is of type A

    b. This element is of type a.

    III. This element is of type I

    iv. This element is of type i

  • Value attribute

    <OL>

    <LI VALUE=5> This is the first element of the list

    <LI VALUE=1> This is the second element of the list

    <LI VALUE=11> This is the third element of the list

    <LI TYPE=i> The fourth element changes number type, but not VALUE

    <LI VALUE=1> And the last element has VALUE 1 too, notice that the type continued!

    output:

    5. This is the first element of the list

    1. This is the second element of thelist

    11. This is the third element of the list

    xii. The fourth element changes number type, but not VALUE

    i. And the last element has VALUE 1 too, notice that the type continued!

up


Unordered, or Bulleted List <UL>

  • Produce an unordered list.
  • TYPE attribute

    <UL TYPE="disk">

    <LI> First material

    </UL>

    <UL TYPE="square">

    <LI> First material - first item

    </UL>

    <UL TYPE="circle">

    <LI> First material - first item - orange

    </UL>

     

    output:

    • First material

     

    • First material - first item

     

    • First material - first item - orange

     

up


Nested List

<UL TYPE="disk">

<LI> First material

<UL TYPE="square">

<LI> First material - first item

<UL TYPE="circle">

<LI> First material - first item - orange

</UL>

</UL>

</UL>


up


Headings

  • Web pages should be broken up with appropriate headings to divide the next flow into manageable pieces.
  • HTML allows six different levels of headings, <h1>... </h1> to <h6>...</h6>.

up


Tag
Description

<OL> ... </OL>

Ordered List.
Produce an ordered list.
<UL> ... </UL>
Unordered List.
Produce an unordered list.
<LI>
List Item.
The list begins as a new line in an ordered list and in an unordered list.
<h1> ... </h1> Heading level 1 (the biggest heading)
<h2> ... </h2> Heading level 2
<h3> ... </h3> Heading level 3
<h4> ... </h4> Heading level 4
<h5> ... </h5> Heading level 5
<h6> ... </h6> Heading level 6 (the smallest heading)

 

EXERCISES

Please copy these exercise into Notepad and save (Don't forget to put .html). Then, launch Internet Explorer and go to File > Open > Browse (find your saved file). Click OK.

up


back Adding Graphics | Creating Tablesnext


 

 

 

 

 

 

 

Copyrights Reserved © Web Publishing 2003

Assessment

  • Assignment 1
  • Assignment 2
  • Quiz 1
  • Quiz 2
  • Project

 

Announcement

To all my students!

Please visit this web site regularly.