MMDT1021 Chapter 15 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 
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>
  <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.
Result
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 
This is some text before the list.
<ol>
  <li>This is the first item in the ordered list
    <ol type="a">
      <li>This is the first item in the ordered list </li>
      <li>This is the second item in the ordered list
        <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>
      <li>This is the third item in the ordered list </li>
      <li>This is the fourth item in the ordered list </li>
    </ol>
  </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>
This is some text after the list.
Result
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.