Multimedia and the World Wide Web HCI 201 Lecture Notes #2B

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 Precise spacing and layout , <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 or another .

Let’s align up the headings in Lori’s resume...

HCI 201 Notes #2B 4



Function:Specify the font appearance for text

Attributes:size, color, face, style, etc.

End tag:, always used.

Contains: text

Used in : text

HCI 201 Notes #2B 5



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 :

- 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



face- face=“fontname”- The font face displayed by the browser depends on which

fonts are available on the user’s computer:

Show Text

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

 

Function:Insert a line break into a text flow

Attributes:class, clear, id, style, title.

End tag:None in HTML; , or <br.../> in XHTML.

Contains: nothing

Used in : text

HCI 201 Notes #2B 10

 

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 


<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


<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.


<pre>

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

(< , > , &amp , etc.)

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

(headings, , <address>, etc)


<blockquote>

Function:Define a block quotation

Attributes:cite, class, dir, id, style, title,…

End tag:</blockquote>, never omitted.

Contains: body content

Used in: block


<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).


<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.


<address>

Function:Define an address

Attributes:class, dir, id, style, title, etc.

End tag:</address>, never omitted.

Contains: body content

Used in: address content


<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...


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?


<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


<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>.


<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.


<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?


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%.


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.


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


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.

Documents

Multimedia and the World Wide Web HCI 201 Lecture Notes #2B