Multimedia and the World Wide Web
HCI 201 Lecture Notes #2B
HCI 201 Notes #2B 2
What will we learn today?
Alignment of headings and paragraphs <font> Precise spacing and layout <br>, <pre> Block quotes <blockquote> Address <address> Special characters
Horizontal rules <hr>
HCI 201 Notes #2B 3
“align” in headings and paragraphs
The align attribute- By default, align=left.
- Four choices for content justification: left, right, center, justify.
- Alignment remains in effect until </p> or another <p>.
Let’s align up the headings in Lori’s resume...
HCI 201 Notes #2B 4
<font>
Function:Specify the font appearance for text
Attributes:size, color, face, style, etc.
End tag:</font>, always used.
Contains: text
Used in : text
HCI 201 Notes #2B 5
<font>
size- Defines as an absolute size for the enclosed text size=1~7
- Use absolute size for extremes (large or small).- Defines a font size relative to the basefont size (default
basefont size is 3), with a preceding + or -. size=+3- Use relative font size to render text in a size different than
the surrounding text.- A little different from <big> and <small>:
- Change is relevant to the basefont, not the current font size.- Increase/decrease the font size one or more levels.
HCI 201 Notes #2B 6
<font>
face- face=“fontname”- The font face displayed by the browser depends on which
fonts are available on the user’s computer:
<font face=“Arial, sans-serif”>Show Text</font>
color- RGB value denoted by a preceding # and a 6-digit
hexadecimal number.
color=“#FFFFFF”RGB(255,255,255)- Used RGB color name (see appendix G).
HCI 201 Notes #2B 7
Color
Conversion and dithering- Conversion: Browser replace the color it cannot show
with the closest color in the color map. It makes your colors look “off”.
- Dithering: Browser mixes two or more available colors to form a color close to the original one. It makes your colors look fuzzy.
HCI 201 Notes #2B 8
Color
The safe (standard) color map- Use color names does not guarantee it is a “safe” color.
- color=“#FFFFFF” RGB(255,255,255)- 6 red, 6 green, 6 blue 216 colors- Any combination of 00, 33, 66, 99, CC, and FF.
Change the background color- <body bgcolor="#FFFFCC">
HCI 201 Notes #2B 9
<br>
Function:Insert a line break into a text flow
Attributes:class, clear, id, style, title.
End tag:None in HTML; </br>, or <br.../> in XHTML.
Contains: nothing
Used in : text
HCI 201 Notes #2B 10
<br>
clearclear=“left”|“right”|“all”- Let the current text flow resume below any tables or
images currently blocking the left or right margin.- Only works with left- or right-aligned images or tables.- Use clear=“all” after <img> or <table> tag to ensure
no subsequent text follows up.
image <br clear=“left”>
HCI 201 Notes #2B 11
<pre>
Function:Render a block of text without any formatting
Attributes:align, class, dir, id, style, etc.
End tag:</pre>, never omitted.
Contains: Preformatted content
Used in: block
HCI 201 Notes #2B 12
<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 #2B 13
<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.
(headings, <p>, <address>, etc)
HCI 201 Notes #2B 14
<blockquote>
Function:Define a block quotation
Attributes:cite, class, dir, id, style, title,…
End tag:</blockquote>, never omitted.
Contains: body content
Used in: block
HCI 201 Notes #2B 15
<blockquote>
When to used it ?To set off long quotations from other sources.
How does it render the text ?- The block of the text is set off from the regular document text.
- Usually indented left and right margins, depends on browsers.
cite=“URL” - Indicates the source of this quote, preferably the exact location in the source document.
- This link will not be shown on your web page (might be explicitly shown in the future).
HCI 201 Notes #2B 16
<q>
Introduced in HTML 4.0. Almost identical to <blockquote>. Use <q> for short quotes that may be in line with
surrounding plain text. Enclosed text begin and end with double-quote
marks. NOT YET supported by popular browsers.
HCI 201 Notes #2B 17
<address>
Function:Define an address
Attributes:class, dir, id, style, title, etc.
End tag:</address>, never omitted.
Contains: body content
Used in: address content
HCI 201 Notes #2B 18
<address>
Browser formats the enclosed text differently. Accessible to automated searching process. Can not nest <address> in another one. “Anonymous documents carry little credibility on the
Web.”
Let’s tag up Lori’s address information in her resume...
HCI 201 Notes #2B 19
Special Character Encoding
Special characters (see Appendix F)- Not all characters are available on the keyboard. (e.g., ,,)- Special meanings confuse the browser.
(“<” – a less-than sign, or a start tag?)
Symbol Code Code Name Description
  Non-breaking space
· · Middle dot
< < < Less than symbol
> > > Greater than symbol
& ' & Ampersand
Any special characters in Lori’s resume?
HCI 201 Notes #2B 20
<hr>
Function:Break a text flow and insert a horizontal rule
Attributes:align,color,noshade,size,width,style
End tag:None in HTML, </hr>, or <hr.../> in XHTML.
Contains: nothing
Used in: body content
HCI 201 Notes #2B 21
<hr>
What does an <hr> look like ? - Might be rendered differently by various browsers.- By default, it extends across the entire document.- Graphical browsers - an embossed 3D effect
Text-based browsers – dashes or underscores.
- No extra space above/below an <hr>.
HCI 201 Notes #2B 22
<hr>
How can we change its default looking ?- size The “height” or “thickness”, 2~3 pixels by default.
- noshade If you prefer a 2D rule line. No value needed.
- width width=“100%” (by default)- width=“100%” relative, percentage value- width=150 absolute, integer value (not recommended)
- align align=left|right|center (default)
- color Use color name or hexadecimal triplet.
HCI 201 Notes #2B 23
<hr>
When to use <hr> ? To separate the body from
- Header and footer - Figures.
- Bibliography. - Index.
To mark up a form/table- Beginning and end of a form/table.
- Sections inside a form/table.
Could Lori’s resume use a few horizontal rules?
HCI 201 Notes #2B 24
Assignment 1
Write an HTML file that includes:- A descriptive title. - An address tag.
- Heading tags. - Paragraph tags.
- Content-based style tags. - Physical style tags.
- Horizontal lines. - Font tags.
Your web page should apply a pleasant color scheme.
In your .DOC submission, indicate what are the content-based style tags and physical style tags you used.
Bonus: Anything exceptionally beyond the above list. Up to 5%.
HCI 201 Notes #2B 25
Assignment 1
About assignments- Due on Wednesday (01/19) NOON.- Penalty for last submission: 10 points off per week.- Save (copy & paste) ALL your HTML code into ONE DOC
file.- Highlight the following items in your submission:
- Your name - URL of this submission- Required code - Function properly? Unfixed bugs?- Time used - Self grading & your rationale
- Submit your assignment online via COL.
HCI 201 Notes #2B 26
Where to upload my finished page?
I have my own web spaceYou are welcome to post your homework anywhere online, as long as the link works properly.
I do not have my own web spaceEach student has 15 Mb space on the
http://students.depaul.edu/~yourUserID
Follow the instructions at http://is.depaul.edu/communication/web/personal_students.asp
HCI 201 Notes #2B 27
How to manage my web space?
1. Download and install SSH
2. Create a “public_html” folder
3. Upload your web pages to the right folder
4. Example: http://student.depaul.edu/~sxu/HCI201/assignment1/HelloWorld.html
NOTE: Although “HCI201” is a folder under “public_html”, you should not include “public_html” in your URL.