Lesson Practice 2-4:
Make a List!

Task 1: Create a Bulleted List

1. Open template.htm.
2. In the title element, add the title: Unordered or Bulleted Lists
3. Add an h1 element with the same text.
   
   
4. Add the list:
   1. Between the body tags, type the unordered list element tags.
   2. Between the <ul> tags, add a list item element.
   3. Between the list item tags, type:
      This is the first item.
   4. In the same manner, before the closing </ul> tag, add three more list items with appropriate text.
   5. Indent each list item in your coding by adding 2-3 spaces before the opening <li> tags.
   6. Save the file as ulist.htm and display in the browser. You should see a bulleted list with the four items.
      
      
5. Format the bullet characters:
   1. Return to the file and edit by adding a second unordered list element.
      The next attributes will later be replaced by CSS styles, as mentioned before.
      
   2. Between the tags, add three list items as follows:
      <li type= “square”>This makes the bullet a square.</li>
      <li type= “circle”>This makes the bullet a circle.</li>
      <li type= “disc”>This makes the bullet a disc.</li>
   3. Indent the list items as before.
   4. Save the file in your text folder as list1.htm and display it in the browser. When you are satisfied with your list, save and close.

Task 2: Create a Multi-Level List

1. Open (or return to) ulist.htm in notepad++.
2. Resave the file using the new filename ulist2.htm. Change the title and h1 element text to:
   A Multi-Level List
3. Add a sublist:
   1. Inside the first set of <li> tags, after the text (after “This is the first list item”), press enter and type <ul>
   2. Indent this opening sublist tag 2-3 spaces to the right.
   3. Add a line that says: <li>This is a sub point.</li>
   4. Add another line that says: <li>This is another sub point.</li>
   5. Indent both sublist items to the right their list items
   6. Close out the sub list with </ul>, backing up the indenting to 'match' its opening <ul> tag.
   7. Save and preview the file - there should be a two bullet sublist under the first list item of the main list.
      
      
4. Create more sublists:
   1. Return to the htm file. Repeat the steps to create a sub-list three more times - you will add a sublist to each of the other three main list item elements.
   2. Indent the sublists and subitems properly.
   3. Save the file and display in the browser. You should have four main level bullets, each with two sub-bullets under it.
      
      
5. Create a sub-sub-list:
   1. Choose one list item from one of the sublists.
   2. Create another sublist consisting of three list items, under this chosen sub-item.
   3. Indent the list and items properly.
   4. Save in your text folder and preview. When you are satisfied with your lists, save and close.

Task 3: Create a Numbered List

1. Open template.htm.
2. In the title element, add the title: Ordered or Numbered Lists
3. Add an h1 element with the same text.
   
   
4. Create an ordered list:
   1. Between the body tags, type a set of ordered list tags.
   2. Between the <ol> tags, type:
      <li>Ordered lists display items with numbers</li>
      <li>But HTML doesn’t sort the items</li>
      <li>It only numbers them</li>
      <li>You have to set the correct arrangement yourself</li>
      
      
   3. Indent the list items as before.
   4. Save the file as olist.htm and display in the browser. When you are satisfied with your work, save and close.
      
      
5. Format the numbering characters:
   1. Return to the file and add another ordered list element.
      The next attributes will later be replaced by CSS styles, as mentioned before.
   2. In the opening tag, add the attributes: type= “I” start= “10”
   3. Add the list items:
      This is the tenth list item.
      This is the eleventh list item.
      This is the twelfth list item.
      This is the thirteenth list item.
   4. Indent the list items properly.
   5. Save the file in your text folder and display in the browser to see the result. When you are satisfied with your work, save and close.

Exercise 4: Create an Outline

1. Open template.htm.
2. In the title element, add the title: A Sample Outline
3. Add an h1 element with the same text.
   
   
4. Create the outline:
   1. Between the body tags, type the following, indenting as illustrated:
      <ol type= “I”>
           <li> First Main Point
                <ol type= “A”>
                    <li> First Sub-point</li>
                    <li> Second Sub-point</li>
               </ol>
           </li>
           <li> Second Main Point</li>
           <li> Third Main Point</li>
      </ol>
   2. Examine the coding, and notice how the lists are nested.
   3. Complete outline, adding properly indented Roman numeral list items to the 2nd and 3rd main points.
   4. Save the file as olist2.htm and display in the browser. When you are satisfied with your work, save and close.

Exercise 5: Create a Definition List

1. Open template.htm.
2. In the title element, add the title: A Definition List
3. Between the body tags, type the following, indenting as illustrated:
   <dl >
        <dt>HTML</dt>
             <dd>HTML stands for HyperText Markup Language</dd>
        <dt>Element</dt>
             <dd>An <u>element</u> is made up of two tags.</dd>
        <dt>Attribute</dt>
             <dd>An <i>attribute</i> describes an element’s characteristics.</dd>
        <dt>Value</dt>
             <dd>A <b>value</b> identifies a specific characteristic.</dd>
   </dl>
4. Examine the coding, and notice elements are arranged.
5. Save the file as dlist.htm and display in the browser to see the result. When you are satisfied with your work, save and close.

Exercise 6: Redesign the Link Section and Add List-links to your Home Page

1. Open your file index.htm.
2. Create a definition list element to contain the entire link section.
3. Change each category paragraph element to a definition term element.
4. Change each link paragraph to a definition definition element.
5. In the Links Pages section, add five new <dd> elements.
6. Link each to one of your list files, using the page title for the link text.
7. Add the title=" " attribute to each, using the filename of the page.
8. Properly indent your definition list.
9. Save and preview, testing the links, and making any adjustments needed.
   
   
10. Publish your new files, as well as your updated index file to your folder of the class Share file.
11. Open the index file in the new location and test your links.