Lecture Notes 2A - DePaul University
Download
Report
Transcript Lecture Notes 2A - DePaul University
Multimedia and the World Wide Web
HCI 201 Lecture Notes #2A
What will we learn today?
<html>
<head>
<title>
<body>
Division and paragraphs <div>,<p>
Heading tags <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
Changing text appearance
Content-based styles
Physical styles
Web color 101
HCI 201 Notes #2A
2
Case Study 1
Our first client, Lori Simpson, just
graduated from DePaul University
with a master’s degree in
telecommunications.
Lori wants to explore as many
employment avenues as possible,
so she decides to post her resume
on the World Wide Web.
Lori asks us to help her create her
online resume. We’re happy to do
so, because that’s something we
want to learn anyway…
HCI 201 Notes #2A
3
<html>
Function:
Delimits the beginning and ending of a document.
Attributes:
dir, lang, version
End tag:
</html>, may be omitted in HTML.
Contains:
<head>, <body>, <frameset>
HCI 201 Notes #2A
4
<html>
dir
dir=ltr or dir=rtl
The direction the browser should render the tagged element(s).
lang
Specifies the language in a two-char language code (ISO-639
standard).
enEnglish, en-USUS English, frFrench, deGerman,
esSpanish, zhChinese, arArabic, jaJapanses
version (deprecated in HTML 4)
Defines the HTML standard version used to write this document.
Use SGML <!doctype> instead.
HCI 201 Notes #2A
5
<head>
Function:
Define the document header (encapsulate other
header tags).
Attributes:
dir, lang, profile
End tag:
</head>, rarely omitted in HTML.
Contains: head content
Used in: <html> tag
HCI 201 Notes #2A
6
<head>
Tags used in <head>
<base>,<isindex>,<link>,<meta>,<nextid>,
<object>,<script>,<style>,<title>
profile – an attribute of <head>
- <meta> tag is used to provide additional information about
the document.
- profile specifies the URL of the predefined profile, which
contains metadata describing the document.
- A placeholder for future development.
HCI 201 Notes #2A
7
<title>
Function:
Define the document title.
Attributes:
dir, lang
End tag:
</title>, never omitted.
Contains: plain text
Used in: <head> tag
HCI 201 Notes #2A
8
<title>
Browsers supply a generic title for documents lacking a
<title>.
Do NOT omit </title>
(check what happens if the ending tag is missing…)
How to choose an appropriate title
Descriptive
Useful
Content-independent
Bad examples: “Chapter One”, “My Home Page”, etc.
Let’s write the skeleton of Lori’s resume...
HCI 201 Notes #2A
9
<body>
Function:
Define the document body.
Attributes:
background, bgcolor, bgproperties, text, link,
alink, vlink, leftmargin, topmargin, class,
style, dir, lang, id, title, etc.
End tag: </body>, may be omitted in HTML.
Contains: content of the web page
Used in: <html> tag
Let’s
the#2A
content into Lori’s resume...
HCI
201add
Notes
10
Editorial Markup <ins> and <del>
Function:
Define inserted and deleted document content.
Attributes:
cite, datetime, dir, lang, style, etc.
End tag:
</ins>,</del>, never omitted.
Contains: content
Used in: <body> tag
HCI 201 Notes #2A
11
<ins> and <del>
Example
“WordsEditors move wordseditors around.”
<del>Words</del><ins>Editors</ins> move
<ins>words</ins><del>editors</del> around.
cite=URL
Indicates why the editing was made.
- URL locates a document that explains the reason.
-
datetime
-
Indicates when the editing was made.
-
YYYY-MM-DDThh:mm:ssTZD
(2004-09-30T14:00Z, 2004-09-30T14:00-05:00)
HCI 201 Notes #2A
12
<div>
What we’ve learned about <div>
-
Define a block of text.
Control the alignment and flow of text.
A little bit more about <div>
-
<div> may be nested.
align=left(default)/center/right/justify.
nowrap recognizes the carriage returns in your source code.
id=“text” to label this division for later reference by other
automated processes (hyperlink, style sheet, applet, etc).
HCI 201 Notes #2A
13
<p>
What we’ve learned about <p>
-
Signals the start of a paragraph.
Inserts one blank line plus extra vertical space.
Usually omit </p> in HTML.
A little bit more about <p>
-
The browser will take care of things like line length, word
wrapping, and line break within a paragraph.
Alignment remains in effect until </p> or another <p>.
-
id=“text” to label this paragraph for later reference
-
by other automated processes (hyperlink, style sheet,
applet, etc).
We could some paragraphs in Lori’s resume...
HCI 201 Notes #2A
14
Heading tags <h1> to <h6>
Function:
Define one of six levels of headers.
Attributes:
align, class, dir, lang, style, etc.
End tag:
</h1> to </h6>, never omitted.
Contains: text
Used in: <body> tag
HCI 201 Notes #2A
15
Heading tags
Rendering of headings
- Depending on the display technology, different browsers might
render a heading differently.
- Signifies the end of any preceding paragraph or text element.
- Starts a new line for the heading text.
Size
Largest size: <h1> Default size: <h4> Smallest size: <h6>
Tips for using headings appropriately
- Repeat the document title in your first heading tag.
- Use headings to improve the scanability of your document.
- Use <h5> and <h6> for text such as declaimer, copyright, etc.
Let’s format the headings of Lori’s resume...
HCI 201 Notes #2A
16
Content-Based Styles
Why should we use them?
- Alter the appearance of text based on the meaning, context,
or usage of the text.
- Browser chooses an appropriate display style for the user.
- Ensure that your document will make sense to a wider range
of readers.
- Have similar meanings and rendered styles as conventional
prints.
- Make your document look consistent and easy for automatic
processing.
Do not omit the end tags
HCI 201 Notes #2A
17
Content-Based Style Tags
<cite>
- Indicates that the enclosed text is an bibliographic citation.
- E.g., book, magazine, journal articles, etc.
- Usually rendered in italic.
<code>
- Renders the enclosed text in a monospaced, teletype-style font.
- Used for text that represents program source code.
<strong>
- To emphasize the enclosed text.
- Usually rendered in bold.
*See summary in Table 4-1, page 83.
HCI 201 Notes #2A
18
Physical Style Tags
When should we use them?
To explicitly display text in certain style.
Why should we avoid using them?
Try to provide the browser as much contextual information as
possible.
Do not omit the end tags
HCI 201 Notes #2A
19
Physical Style Tags
<b>
Boldfaces the enclosed text.
<i>
Renders the enclosed text in italic.
<big> Increases the text one font size larger, if possible.
<small> Decreases the text one font size smaller, if possible.
<sub>
Displays the text half a character’s height lower.
<sup>
Displays the text half a character’s height higher.
<tt>
<u>
Displays the text in a monospaced font.
Underlines the enclosed text.
*See summary in Table 4-2, page 88.
HCI 201 Notes #2A
20
Combining Different Styles
Content-based styles + content-based styles
<em>lalala<strong>lalala</strong>lalala<em>
Physical styles + physical styles
<b>lalala<i>lalala</i>lalala</b>
Content-based styles + physical styles
<cite>lalala<u>lalala</u>lalala</cite>
*Try the above lines in your code, what do you see?
A little more formatting of Lori’s resume...
HCI 201 Notes #2A
21
Web Color 101
RGB
Red
Green
Blue
CMYK
Cyan
Magenta
Yellow
Black
HSB
Hue
Saturation
Brightness
HCI 201 Notes #2A
22
Web Color 101
Additive Primaries
Red+GreenYellow
Green+BlueCyan
Blue+Red Magenta
R+G+B
White
Subtractive
Primaries
White-Red Cyan
White-GreenMagenta
White-Blue Yellow
HCI 201 Notes #2A
red
yellow
magenta
white
blue
green
cyan
23
Web Color 101
Hue
Each of those distinct colors is a hue.
Saturation
The “pureness” of the color.
You can change the saturation of a hue by adding white
(light) or black (shadow). The amount of saturation gives
us tints and shades.
brightness=100%
HCI 201 Notes #2A
brightness=0%
24
Web Color 101
Adjacent colors
They harmonize with each
other.
Contrasting colors
The more transitional colors
separating two colors, the
greater the contrast is.
Clashing colors
Colors that are directly
opposite from one another.
HCI 201 Notes #2A
25
Web Color 101
Colors and their meanings
- Warm color (exciting): Red, Orange, Yellow.
- Cold color (calming): Blue, Green, Cyan.
- Neutral color: Black, White, Tan, Beige, Gray, Silver, Brown.
Color and culture
White Wedding (western countries)
White Funeral (eastern countries)
HCI 201 Notes #2A
26
Working with Color in HTML
Using color names
16 color names are recognized by ALL versions of HTML:
Black
Blue
Red
Green
Lime
Aqua
Yellow
Silver
Navy
Maroon
Gray
Olive
Fuchsia
Teal
Purple
White
Using color values
color=RGB(0~255, 0~255, 2~255)
2563 more than 16 million distinct colors can be identified.
HCI 201 Notes #2A
27
Working with Color in HTML
Using hexadecimal expression
Decimal:
0
10
15
Hexadecimal:
0
A
F
(151*16+5=21, FF15*16+15=255)
21
15
255
FF
color=“red”
color=“#FF0000”RGB(255,0,0)
HCI 201 Notes #2A
28
Working with Color in HTML
Good combinations for web page
Blue on White
Yellow on Black
White on Gray
Red on Pink
Bad combinations for web page
Yellow on White
Blue on Purple
Red on Green
Green on Orange
HCI 201 Notes #2A
29
Working with Color in HTML
Color selection resources
Color Browser
(http://www.maximized.com/shareware/colorbrowser)
A windows program to view and select colors, with the
corresponding HTML fragments.
Two4U’s Color Page (http://www.two4u.com/color)
Contains color databases and a color-composing program you
can use to generate HTML code for the colors you choose.
Background Color Selector (http://www.imagitek.com/bcs.html)
A web page for various text and background color schemes.
The Color Center (http://www.hidaho.com/)
A web page that allows you to interactively select page colors,
textures, and the corresponding HTML fragments.
HCI 201 Notes #2A
30