MMDT1021 Chapter 13 Notes - page 3

Creating Definition Lists

Code Result
This is some text before the list.
<dl>
<dt>TermOne</dt>
<dd>Definition TermOne Definition</dd>
<dt>TermTwo</dt>
<dd>Definition TermTwo Definition</dd>
<dd>This is another line under TermTwo.</dd>
<dt>TermThree</dt>
<dt>TermFour (follows TermThree)</dt>
<dd>Definition Termfour Definition</dd>
</dl>
This is some text after the list.
 This is some text before the list.
TermOne
Definition TermOne Definition
TermTwo
Definition TermTwo Definition
This is another line under TermTwo.
TermThree
TermFour (follows TermThree)
Definition Termfour Definition
This is some text after the list.
 

Creating Nested Lists

Ordered Inside of Unordered.

Note:  The indentation done by the programmer (you) is for your own personal benefit when reading and debugging the code.  It has NO effect when displayed by the web browser.

The web browser does the indentation and creation of the list icons based on the HTML list tags.
Code Result
This is some text before the list.
<ul>
<li>This is the first item in the
    unordered  list
   <ol>
   <li>This is the first item in the
       ordered list</li>
   <li>This is the second item in the
       ordered list</li>
   <li>This is the third item in the
       ordered list</li>
   <li>This is the fourth item in the
       ordered list</li>
   </ol>
<li>This is the second item in the
    unordered list</li>
<li>This is the third item in the
    unordered list</li>
<li>This is the fourth item in the
    unordered list</li>
</ul>
This is some text after the list.
 This is some text before the list.
  • This is the first item in the unordered list
    1. This is the first item in the ordered list
    2. This is the second item in the ordered list
    3. This is the third item in the ordered list
    4. This is the fourth item in the ordered list
  • This is the second item in the unordered list
  • This is the third item in the unordered list
  • This is the fourth item in the unordered list
This is some text after the list.
 
Unordered Inside of Ordered inside of Ordered.
Code Result
This is some text before the list.
<ol>
<li>This is the first item in the
      ordered list</li>
   <ol type="a">
   <li>This is the first item in the
       ordered list</li>
   <li>This is the second item in the
       ordered list</li>
      <ul type="square">
      <li>This is the first item in
          the unordered list</li>
      <li>This is the second item in
          the unordered list</li>
      <li>This is the third item in
          the unordered list</li>
      <li>This is the fourth item in
          the unordered list</li>
      </ul>
   <li>This is the third item in the
       ordered list</li>
   <li>This is the fourth item in the
       ordered list</li>
   </ol>
<li>This is the second item in the
    ordered list</li>
<li>This is the third item in the
    ordered list</li>
<li>This is the fourth item in the
    ordered list</li>
</ol>
This is some text after the list.
 This is some text before the list.
  1. This is the first item in the ordered list
    1. This is the first item in the ordered list
    2. This is the second item in the ordered list
      • This is the first item in the unordered list
      • This is the second item in the unordered list
      • This is the third item in the unordered list
      • This is the fourth item in the unordered list
    3. This is the third item in the ordered list
    4. This is the fourth item in the ordered list
  2. This is the second item in the ordered list
  3. This is the third item in the ordered list
  4. This is the fourth item in the ordered list
This is some text after the list.