HTML

Practice Assignment 2
Creating Links and Lists

The purpose of Practice 2 is to create an ORDERED LIST which includes a NESTED UNORDERED LIST of at least two links followed by a NESTED ORDERED LIST of at least two links to Web sites you like or visit frequently. You will have to use the URLs to these sites in the link code and an appropriate text for the link that describes the site. Study the sample codes below for creating lists:

Browser Windows
  1. Item 1
    1. sub item a
    2. sub item b
  2. Item 2
    1. etc.
    2. . . .
  1. Item 1
    • sub item
    • sub item
  2. Item 2
    • etc.
    • . . .
HTML Code
Nested Ordered Lists Nested Ordered & Unordered Lists 
<ol type="1">
   <li>Item 1
       <ol type="A">
           <li>sub item a</li>
           <li>sub item b</li>
       </ol>
   </li>
   <li>Item 2
       <ol type="a">
           <li>etc.</li>
           <li>. . .</li>
       </ol>
   </li>
</ol>
 
<ol type="I">
   <li>Item 1
      <ul type="square">
         <li>sub item a</li>
         <li>sub item b</li>
      </ul>
   </li>
   <li>Item 2
     <ul type="circle">
        <li>etc.</li>
        <li>. . .</li>
     </ul>
   </li>
</ol>

The above code does not use Cascading Style Sheets (CSS) to format the lists as it requires more explanation than intended for this exercise. During class, we will look at the CSS options for lists. NOTE: Some of the code listed above is depricated.

Ordered list – creates a list with a specified hierarchy. By default it is 1, 2, 3, etc.

    Code in <body> area           How it looks in the browser
<ol>
<li>content goes here</li>        1. Content goes here
<li>content goes here</li>        2. Content goes here
<li>content goes here</li>        3. Content goes here
</ol>

If you wanted to have your list use a different symbol for the hierarchy you can specify the type of number or letter your list uses. For an ordered list you can specify with CSS the kind of symbol that should be used in the ordered list:

Choose upper-alpha for uppercase letters (A, B, C,...), lower-alpha for lowercase letters (a, b, c, ...), upper-roman for uppercase Roman numerals (I, II, III, ...), lower-roman for lowercase Roman numerals (i, ii, iii, ...) and number for numbers, which, as mentined, is the default.

You create the ordered list in the html of the body then specify the following CSS in the style area of the head section:

ol {list-style-type: upper-alpha;}

This would cause your list to use upper case letters: A, B, C, etc.

Unordered list – creates a list with an unspecified hierarchy. By default it is a solid ● disc.


    Code in <body> area          How it looks in the browser
<ul>
<li>content goes here</li>        ● Content goes here
<li>content goes here</li>        ● Content goes here
<li>content goes here</li>        ● Content goes here
</ul>

To specify the bullet for an unordered list use disc for a solid round bullet (default for first level lists), circle for an empty round bullet (default for second level lists), square for square bullets (default for third level and subsequent lists)

You create the unordered list in the html of the body then specify the following CSS in the style area of the head section:

ul {list-style-type: square;}

This would cause your list to use a square ■ bullet. See CSS Lists for more examples.

In the example below there is one ordered list that has one nested unordered list and one nested ordered list.

TRY TO MAKE A PAGE SIMILAR TO THE EXAMPLE BELOW:

Nested lists example

This will be considered Practice 2 of the Web practices for Project 2B - Part 3. We will have worked on this together in class so that you should have:

  1. Open your lastname_html5_template.html file with Notepad++ (or Notepad), so you can see the html code and SAVE AS your file as: lastname_p2.html For example, my file would be named: erdman_p2.html. Do not just hit save or you will overwrite your template file. Be sure there is a .html extension on the file name.
  2. In the <title> tag of the <head> section put your Lastname Practice 2.
  3. Choose an approriate background color (your choice) and text color (your choice). You just have to modify the body colors in the CSS in the <head> section.
  4. Choose colors for your links (these are set as attributes in the CSS for links or anchor tags <a href=""> and are already in your lastname_html5_template.html file). The link color should contrast well with the background color. For example, don't use blue as your background color and blue as your links color because the links won't show. Also, don't use colors which may have a bad contrast, such as, red on green.
  5. Use a heading for your page, such as My Favorite Sites, in Level 1 Heading <h1>, centered on your page. Don't forget to end your heading </h1>. Use CSS to format your heading tag.
  6. NOTE: The default text alignment is "left" unless otherwise specified in your code. Use the default "left" alignment for your lists so they will line-up properly.
  7. Set the size for your list's font size in the CSS for the <body> tag. This will cause all fonts in your lists and page to be the same size. If you were to have additional text besides the list items, then you could specify the font size for the list item, <li>, in the CSS for the page.
  8. Build your list structure before you try to put in any links. Use the code and examples at the top of this page and the assignment example.
  9. Once you have finished your list structure, create your links to the Internet. You will have to use the entire URL (Web address) to the page/site. Use the anchor tag to create the link. For example, to link to Google, you would use the following code for a hypertext link: (We did this in practice 1.) The (target="_blank") attribute causes the link to open in a new window.

    <a href="http://www.google.com/" target="_blank">Search Google</a>

  10. Include your name and campus, in Level 3 Heading letters, <h3> on separate lines (no space between lines - use the break <br/> tag between your name and campus), centered at the bottom of the page. Create a <footer> tag or class paragraph selector, for example, p.links to center your name and campus.

Click here to see a CSS Nested List Example

Click here to see W3Schools CSS Lists

Click here to see Listamatic Sample HTML/CSSLists

Click on the link below to get a copy of the RGB Hex Triplet Color Chart.

RGB Hex Triplet Color Chart

The chart will give you the hexadecimal code for other colors you may want to use in your page.

Practice 2 is 20% of the web practices grade.