1. Multimedia and the World Wide Web HCI 201 Lecture Notes #4A

2. HCI 201 Notes #4A2 What will we learn today? Unordered list Ordered list Definition list Text table Graphical table Table tags Table attributes

3. HCI 201 Notes #4A3 Lists Unordered list A collection of related item that have no special order or sequence. Apple Peach Pear - Browser automatically bullet each -tagged item. - Indented from the left margin of the document. - Never omit the end tag.

4. HCI 201 Notes #4A4 Lists Unordered list Let’s experiment some manipulations: -Q: What happens if we omit the 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 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…

5. HCI 201 Notes #4A5 Lists Ordered list Use an ordered list when the sequence of items is important. Step 1 Step 2 Step 3 - Never omit, but omitting is Okay in HMTL. - Change the number style with type. (Try “A”, “a”, “1”, “ I ”, “i”) - Set the starting value with start.

6. HCI 201 Notes #4A6 Lists Change the “type” attribute of ValueGenerated styleSample “A” Capital lettersA, B, C, D, … “a” Lowercase lettersa, b, c, d, … “I” Capital roman numeralsI, II, III, IV, … “i” Lowercase roman numerals i, ii, iii, iv, … “1” Arabic numerals1, 2, 3, 4, … Set the starting value of an ordered list start=# # is an integer, default=1 Subsequent items are incremented by 1, following the same style.

7. HCI 201 Notes #4A7 Lists Defines an item in a list. Change the style of an individual item (not recommended) ordered item unordered item Change the value of an individual item (ordered list only) Item #1 Item #4 Item #5

8. HCI 201 Notes #4A8 Lists Definition list A term (marked with ) followed by its definition or explanation (marked with ) Term 1 Definition: blah blah blah Term 2 Definition: yahda yahda yahda - An ideal way to present a glossary, encyclopedia, name-value list. - Never omit, but omit and is OK in HMTL.

9. HCI 201 Notes #4A9 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)

10. HCI 201 Notes #4A10 Case Study 2 Nicole 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.

11. HCI 201 Notes #4A11 Text table vs. graphical table Text table (simple, quick, easy to modify) ManufacturerModelPrice City ComputersP500+$2000 Midwest CPU600/Ultra$4500 CMF ComputersP588z$3100 Graphical table (greater control of appearance) ManufacturerModelPrice City ComputersP500+$2000 Midwest CPU600/Ultra$4500 CMF ComputersP588z$3100

12. HCI 201 Notes #4A12 Text table Choose a fixed-width (typewriter) font A text table relies on spaces and the characters to create its column boundaries.  Arial  Times new roman Courier new With proportional fonts, we cannot control the space between characters Use the tag Using the preformatted text tag, we’re ensured that the columns will keep aligned no matter what font the browser uses. ManufacturerModelPrice City ComputersP500+$2000...

13. HCI 201 Notes #4A13 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 ? - 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.

14. HCI 201 Notes #4A14 What can be used in ? - Content-based styles or physical styles. - Entity equivalents for special characters. (<, >, &amp, etc.) What should not be used in ? - Tags that cause a paragraph break. (heading tags,,, etc)

15. HCI 201 Notes #4A15 Graphical table Defining a table structure Row 1, Col 1 Row 1, Col 2 Row 2, Col 1 Row 2, Col 2 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

16. HCI 201 Notes #4A16 Table tags - Encapsulates a table and its elements in the document’s body content. - Defines a row in the table. - Defines a data cell in the table. - Defines a header in the table. - Defines a title or caption in the table.

17. HCI 201 Notes #4A17 Table tags caption text - A brief description of the table content. - Typically placed immediately after 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 | baseline align=left | center | right Let’s add a caption for Nicole’s products table.

18. HCI 201 Notes #4A18 Table tags... - 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.

19. HCI 201 Notes #4A19 Table tags header text and data content - Stay inside the tag. - Define the content of one cell. You can throw anything in: text, links, images, video clips, forms, even another table. - Two differences between and - Header text is rendered in boldface font. - Header text is aligned centered by default. - Any style defined in or will over write the style defined in. - Add minimum content ( or ) for empty cells.

20. HCI 201 Notes #4A20 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

21. HCI 201 Notes #4A21 Table attributes border, cellspacing, and cellpadding bordercolorlight and bordercolordark

22. HCI 201 Notes #4A22 Border colors Table attributes Internet Explorer Netscape

23. HCI 201 Notes #4A23 Table attributes border : default=0 pixel (thickness) Controls which side of the table will have borders: void, box, above, below, lhs, rhs, vsides, hsides Controls how to draw the internal table 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)

24. HCI 201 Notes #4A24 Table attributes width - Default: as wide as needed to display the content - Integer number of pixels or a relative percentage of the screen width - 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.

25. HCI 201 Notes #4A25 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 centered Name, Item #, Type, Finish to the left Price to the right - Width for table: 550, for Item#: 60, for Price: 50. - Background color for header: black.