CS 101

Lab 2

This lab assignment will have you create a simple HTML page that will contain lists.

HTML Tags

HTML uses "tags" to assign special meaning to text. Every tag is similarly structured: a <, followed by the tag name and some optional attributes, followed by a >. You may think of < and > as "less-than" and "greater-than", but in this context, they are usually referred to as "angle-brackets".

When the browser reads an HTML file, it displays the page according to the tags. Some tags are simply replaced by some content, as in <br>, but some can also contain other tags, as in <p><strong>Some Text</strong></p>. This nesting of tags is what gives HTML its power, and is allowed, so long as the concept of "which tag is in which" is obvious. In the previous example, we say that "Some Text" is inside the <strong> tag, which is inside the <p> tag. The following example is not allowed, as it violates this rule: <a><p>Stuff</a></p>.

Also, certain tag combinations are not allowed, but rather than talking about that here, you should check out the World Wide Web Consortium to learn more about HTML if you are curious.

HTML Lists

A list displays information in an organized fashion. Each list is indented away from the left hand margin of the page. There are two main types of lists in HTML: ordered lists and unordered lists. The ordered lists use the tag pair <ol> </ol> and preface the items in the list with a number or letter. The unordered lists uses the tag pair <ul> </ul> and prefaces the items in the list with a symbol.

Each item in the ordered and unordered lists is denoted by the <li> tag (list item) as shown by the example below:

Here is a list of common pets:
<ol>
	<li>Dogs</li>
	<li>Cats</li>
	<li>Fish</li>
	<li>Birds</li>
</ol>

The above HTML code will display as an ordered list when rendered by the browser as shown below (note how the list is indented from the text):

Here is a list of common pets:
  1. Dogs
  2. Cats
  3. Fish
  4. Birds

Here is a description of the order list and unordered list tags.

Ordered lists: <ol></ol> - attributes: type, value

The type attribute allows the numeric values to be expressed in one of five ways: numbers, upper case Roman numerals, lower case Roman numerals, upper case letters and lower case letters. The attribute values for the type attribute are respectively: 1, I, i, A, a.

The start attribute allows you to specify the initial numeric value. This value is specified as a number and will be translated into its proper form according to the type.

Unorder lists: <ul></ul> - attribute: type

The type attribute allows the symbol that denotes each list item to be changed. Possible attribute values include: disc, circle and square.

Lab Assignment 2

Due: Tuesday 1/29/2008 by 11:59 pm.

Create a file with two lists of information, each of which is at least five items long. The first should list 5 interesting things you did since last week. The second should list the top five ____, where ____ might be "chicago museums", or "best movies ever". Be creative. Make sure you using the correct syntax for the lists you create, as well as the appropriate list tag.

Email the file as an attachment to i101@cs.uic.edu. Remember to include CS 101 in the subject line. Also, remember to put your name on your paper!

Grading Criteria