CS 101 - Lab 3

Lists - Displaying information in an organized fashion. Each list is indented away from the left hand margin of the page. There are three main types of lists in HTML: ordered lists, unordered lists and definition lists. The ordered lists use the tag pair <ol> </ol> and preface the items in the list with a numeric value. The unordered lists us the tag pair <ul> </ul> and preface the items in the list with a symbol. The definition lists us the tag pair <dl> </dl> and have the list divided into two parts: the terms and the definitions. There are other list types, but these three are the most common.

The bulleted items (lines that begin with a dot) indicated what is to be done for the lab assignment.

Each item in the ordered and unordered lists is denoted by the use of the <li> tag (list item). The definition list terms are denoted by the <dt> tag and the definition list definitions are denoted by the <dd> tag.

The HTML code for a simple ordered list is as follows:

Here is a list of common pets:

<ol>

<li> Dogs

<li> Cats

<li> Fish

<li> Birds

</ol>

The above code would be displayed as follows:

Here is a list of common pets:

1. Dogs

2. Cats

3. Fish

4. Birds

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 value attribute allows you to specify the initial numeric value. This value is specified as a number and will be translated into the proper form according to which type is being use.

• Create an ordered list (list 1) for the items: apple, banana, grape, orange, pineapple, pear

• Copy the list and change the type (list 2)

• Copy the list and change the initial numberic value (list 3).

Unorder lists: <ul> - attributes: type

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

• Create an unordered list (list 4) for the items: chevy, dodge, ford, honda, nissan, volvo

• Copy the list and change the type (list 5).

List items: <li> - attributes: type, value

The attributes for the list item tag allows the page to change the type and value attributes that where originally specified in the <ol> or <ul> tags. Note: you cannot change from an ordered to an ordered list.

• Copy an ordered list and change the numeric type for a list item in the middle of the list (list 6)

• Copy an ordered list and change the value for a list item in the middle of the list (list 7)

• Copy an unordered list and change the symbol type for a list item in the middle of the list (list 8)

Nesting lists:

You can nest one list inside of another list. The nested list will be indented inside of the original list. Often you will wish to make sure the two lists have different type attributes.

• Copy list 1 and create a nested list under "apple" with the following values (list 9):

Red Delicious, Golden Delicious, Macintosh, Granny Smith, Jonathan

Definition lists: <dl> - attribute: compact

The compact attribute would list all of definitions on the same line as the term.Definition lists allow you to have two columns of indented material. See the example:

This is a list of common acronyms and their meanings:

<dl>

<dt>ACM<dd>The Association of Computer Machinists

<dt>IEEE<dd>The Institute of Electrical & Electronic Engineers

<dt>PESC<dd>Professional Engineering Society Council

<dt>SWE<dd>Society of Women Engineers

</dl>

The above example would appear as follows:

This is a list of common acronyms and their meanings:

ACM

The Association of Computer Machinists

IEEE

The Institute of Electrical & Electronic Engineers

PESC

Professional Engineering Society Council

SWE

Society of Women Engineers

• Create a definition list of your own choosing (list 10).

• Copy the definition list given above and add the compact attribute to it (list 11).

LAB Assignment

Print out the HTML code for all eleven lists mentioned in the above bulleted and turn them into your TA. All eleven lists can be contained in one file.

Other HTML Tags

This is not part of Lab 3, but other information that may be useful.

IMAGES: <img> - attributes: src, alt, border, height, width, hspace, vspace, align

The <img> tag allows a picture to be displayed on a web page. The src attribute is used to specify the file that contains an image. Files should be in the GIF or JPG format. There may be other formats acceptable to some Web Browsers, but GIF and JPG are the most common. An example of using the <img> tag is as follows.

ALT attribute - allows for text to be displayed in case the image is not loaded. This text should be descriptive of the image. For example

BORDER attribute - Places a border around the image. The value given specifies the width in pixels of the border.

HEIGHT and WIDTH attributes - Allows the user to specify how big the image is to be displayed. The size is given in pixels. Normally either height or width is used, but not both. When both height and width are used, the picture may get distorted if the proper ratio is not maintained.

HSPACE and VSPACE attributes - Allows the user to specify how much space should be placed around the image in either the horizontal or vertical direction. The space is given in pixels.

ALIGN attribute - This attribute is used when you want to have the image placed in the middle of some text. The various values of this attribute specify where the image should appear in relation to the text. Check out HTML Reference 2 from the EECS 101 Home page to find out more about this attribute.

When viewing a Web Page, you can use the menu option "Document Source" under the "View" drop-down menu to check out the HTML source for the current document. You can also make a copy of an image by holding down the RIGHT mouse button when over an image and selecting the "Save Image as..." option from the pop-up menu. This will save the image to the current machine that you are using. You may have to transfer the image (via FETCH or FTP) to get it to your UNIX account.

LINKS: <A> - attributes: href

The anchor tag pair (<a>, </a>) are used with the href attribute to link to another web page. You will need to know the URL (uniform resource locator) of the page you wish to connect to. The syntax of a URL is: "protocol:// host.domain [:port] /path / filename".

The protocol value is normally http, which indicates a World Wide Web server. The :port information is not always needed (the square brackets "[", "]" are used to indicate this). If the filename is left off, a default value is assumed. The default filename value on the EECS web server is Welcome.html.

CS 101 - Lab 3

Due at end of lab during the Fourth Week

Other HTML Tags