Multimedia and the World Wide Web

HCI 201 Lecture Notes #4A

HCI 201 Notes #4A 2

What will we learn today?

Unordered list Ordered list <li> Definition list Text table Graphical table Table tags Table attributes

HCI 201 Notes #4A 3

Lists

Unordered listA collection of related item that have no special order or sequence.

<ul>

<li>Apple</li>

<li>Peach</li>

<li>Pear</li>

</ul>

- Browser automatically bullet each <li>-tagged item.- Indented from the left margin of the document.

- Never omit the end tag </ul>.

HCI 201 Notes #4A 4

Lists

Unordered list <ul> Let’s experiment some manipulations:

- Q: What happens if we omit the <li> tag?A: We’ll have an indented list without bullets.

- Q: Can we change the bullet?A: Yes, we sure can.

- Change the type attribute of <ul> type=disc | circle | square - Use cascading style sheet (in week #7)

- Q: Can we have nested list?A: Yes, and I’ll show you how…

HCI 201 Notes #4A 5

Lists

Ordered list <ol> Use an ordered list when the sequence of items is important.

<ol type=“A” start=“1”><li>Step 1</li><li>Step 2</li><li>Step 3</li>

</ol>- Never omit </ol>, but omitting </li> is Okay in HMTL.

- Change the number style with type. (Try “A”, “a”, “1” , “I”, “i”)

- Set the starting value with start.

HCI 201 Notes #4A 6

Lists

Change the “type” attribute of <ol>Value Generated style Sample

“A” Capital letters A, B, C, D, …

“a” Lowercase letters a, b, c, d, … “I” Capital roman numerals I, II, III, IV, … “i” Lowercase roman numerals i, ii, iii, iv, …

“1” Arabic numerals 1, 2, 3, 4, …

Set the starting value of an ordered liststart=# # is an integer, default=1Subsequent items are incremented by 1, following the same style.

HCI 201 Notes #4A 7

Lists

<li>Defines an item in a list.

Change the style of an individual item (not recommended)

<li type=“A”>ordered item</li><li type=“square”>unordered item</li>

Change the value of an individual item (ordered list only)<ol type=“I”>

<li>Item #1</li><li value=4>Item #4</li><li>Item #5</li>

</ol>

HCI 201 Notes #4A 8

Lists

Definition list <dl> A term (marked with <dt>) followed by its definition or explanation (marked with <dd>)

<dl><dt>Term 1</dt><dd>Definition: blah blah blah</dd><dt>Term 2</dt><dd>Definition: yahda yahda yahda</dd>

</dl>- An ideal way to present a glossary, encyclopedia, name-value list.

- Never omit </dl>, but omit </dt> and </dt> is OK in HMTL.

HCI 201 Notes #4A 9

Lists

When to use unordered lists - Hot lists and other link collections- Short, non-sequenced groups of text- Emphasizing the high points of a presentation

When to use ordered lists - Tables of contents- Sequential instructions- Sets of sequential sections of text- Assigning numbers to short phrases referenced somewhere else

When to use definition lists - Glossaries- Any list of name/value pairs- Custom bullets (make the item an icon-sized bullet image)

HCI 201 Notes #4A 10

Case Study 2Nicole Taylor, an advertising executive, is directing the effort to create web pages for her company. She hopes that the web page can improve the company’s visibility, as well as to show the company’s merchandise.

Nicole asks us to create web pages for the Gargoyle Collection. The page should display the product name, item number, description, and price.

HCI 201 Notes #4A 11

Text table vs. graphical table

Text table (simple, quick, easy to modify)

Manufacturer Model PriceCity Computers P500+ $2000

Midwest CPU 600/Ultra $4500

CMF Computers P588z $3100 Graphical table (greater control of appearance)

Manufacturer Model Price

City Computers P500+ $2000

Midwest CPU 600/Ultra $4500

CMF Computers P588z $3100

HCI 201 Notes #4A 12

Text table

Choose a fixed-width (typewriter) fontA text table relies on spaces and the characters to create its column boundaries.

Arial Times new roman Courier newWith proportional fonts, we cannot control the space between characters

Use the <pre> tagUsing the preformatted text tag, we’re ensured that the columns will keep aligned no matter what font the browser uses.<pre>

Manufacturer Model PriceCity Computers P500+ $2000...

</pre>

HCI 201 Notes #4A 13

<pre>

When to use it ?- Tables of numbers that must line up correctly.- Computer source code.- To set aside several blank lines.

Shall we use Tab in <pre> ?- Conveniently stops at every eight character positions.- Tabs are not consistently implemented in different browsers.- Using spaces would be safer.

width- Defines the number of characters to fit on a single line.- Does NOT mean the browser will wrap up a line.

HCI 201 Notes #4A 14

<pre>

What can be used in <pre> ?- Content-based styles or physical styles.- Entity equivalents for special characters.

(&lt; , &gt; , &amp , etc.)

What should not be used in <pre> ?- Tags that cause a paragraph break.

(heading tags, <p>, <address>, etc)

HCI 201 Notes #4A 15

Graphical table

Defining a table structure<table>

<tr>

<td>Row 1, Col 1</td>

<td>Row 1, Col 2</td>

</tr>

<tr>

<td>Row 2, Col 1</td>

<td>Row 2, Col 2</td>

</tr>

</table>

Row 1, Col 1

Row 1, Col 2

Row 2, Col 1

Row 2, Col 2

Let’s create a table for Nicole’s products

HCI 201 Notes #4A 16

Table tags

<table>- Encapsulates a table and its elements in the document’s

body content. <tr>

- Defines a row in the table. <td>

- Defines a data cell in the table. <th>

- Defines a header in the table. <caption>

- Defines a title or caption in the table.

HCI 201 Notes #4A 17

Table tags

<caption>caption text</caption>- A brief description of the table content.- Typically placed immediately after <table> tag.- By default, browsers place the caption centered above the

table.- To decorate captions (change color, add border, etc.), we

will have to use cascading style sheet (week#7)- align=top | bottom- For Internet Explorer

valign=top | bottom | middle | baselinealign=left | center | right

Let’s add a caption for Nicole’s products table.

HCI 201 Notes #4A 18

Table tags

<tr>...</tr>- Adds a row into the table.- Every row has the same number of cells as the longest

row. (We’ll discuss how to span rows/columns in next class.)

- align=left | right | center | justify | char- valign=top | bottom | baseline- char/charoff: line up decimal points for numbers. (the

default char is language-based, “.” in English, “,” in French.)- bgcolor: set the background color for the entire row.- nowrap: stops the common word wrapping in all cells in

that row.

HCI 201 Notes #4A 19

Table tags

<th>header text </th> and <td>data content</td>

- Stay inside the <tr> tag.- Define the content of one cell. You can throw anything in:

text, links, images, video clips, forms, even another table.- Two differences between <th> and <td>

- Header text is rendered in boldface font.- Header text is aligned centered by default.

- Any style defined in <th> or <td> will over write the style defined in <tr>.

- Add minimum content (&nbsp; or <br>) for empty cells.

HCI 201 Notes #4A 20

Table attributes

bgcolor and background- bgcolor specifies a color for the entire table.

- background specifies a background image for the entire table (available only in IE). The image will be - tiled if it is smaller than the table- clipped if it is larger than the table

- Background image overwrites the background color

<table bgcolor="#00FF00" background="BackgroundImage.jpg">

HCI 201 Notes #4A 21

Table attributes

border, cellspacing, and cellpadding bordercolorlight and bordercolordark

HCI 201 Notes #4A 22

Border colors <table bordercolor=red>

<table bordercolordark="#333366" bordercolorlight="#0099cc">

Table attributes

Internet Explorer Netscape

Internet Explorer Netscape

HCI 201 Notes #4A 23

Table attributes

border: default=0 pixel (thickness)

<table frame=value> Controls which side of the tablewill have borders: void, box, above, below, lhs, rhs, vsides, hsides<table rules=value> Controls how to draw the internaltable grids: none, all, rows, cols.

cellspacing: default=2 pixels. The space between adjacent cells and outer edges. (around cells)

cellpadding: default=1 pixel. The space between the edge of a call and its content. (inside cells)

HCI 201 Notes #4A 24

Table attributes

width- Default: as wide as needed to display the content- Integer number of pixels or a relative percentage of the

screen width<table width=400> <table width=“100%”>

- Use relative value to automatically resize the table to the reader’s window screen

- Use absolute value for specifically formatted table

height- Browser renders the table no shorter than this height, but will

make it taller if necessary.NOTE: Always test the appearance of your finished table with different browsers and monitors.

HCI 201 Notes #4A 25

Table attributes

Nicole wants us to make a few changes:- A thicker border- Increase the space surrounding the text content- Adjust alignment so that

caption and headers to be centeredName, Item #, Type, Finish to the leftPrice to the right

- Width for table: 550, for Item#: 60, for Price: 50.- Background color for header: black.