multimedia and the world wide web hci 201 lecture notes #4a
Post on 20-Dec-2015
218 views
TRANSCRIPT
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.
(< , > , & , 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 ( 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.