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

Multimedia and the World Wide Web

HCI 201 Lecture Notes #1B

HCI 201 Notes #1B 2

An overview of a little bit everything…

Your first HTML document The Tags The Skeleton The Fresh What we will learn in this quarter

HCI 201 Notes #1B 3

Your first HTML document

“Hello, World Wide Web!”<html><head><title>My document title</title></head><body><h2>My first HTML document</h2><p> Hello, World Wide Web!<br><a href=“http://www.depaul.edu”>DePaul Univeristy</a></body></html>

HCI 201 Notes #1B 4

HTML Skeleton

<html>

<head>

<title>Title of this web page</title>

</head>

<body>

Stuff you want to present on this page

</body>

</html>

HCI 201 Notes #1B 5

HTML Skeleton

What’s in <head> The title of your document Parameters the browser may use when

displaying your document

What’s in <body> The actual content of your document

Tags (advise the browser how to present the content) Content (things shown on your web page)

HCI 201 Notes #1B 6

The Flesh on an HTML document

Tags + Contents + Comments Comments



Contents- Text

- Multimedia

HCI 201 Notes #1B 7

The Flesh on an HTML document

Browser Screen User

Tag Read and follow it to present content

Won’t show Can only see it in the source file

Content Show it Show it Can see it both on the screen and in the source file

Comment Ignore it Won’t show Can only see it in the source file

HCI 201 Notes #1B 8

Comments

- Will not be rendered by browsers.

- Only appears in the source file.

- You can put any comments between , including carriage returns.

- You cannot nest comments.

HCI 201 Notes #1B 9

Embedded Tags

Tag syntax

<TagName Property=“value”>Content</TagName> - Only “Content” will be shown to users.

- Tags tell browser how to display or treat the subsequent contents.

- One formal name, followed by one or more attribute-value pairs (separated by tab, space, or return character).

- Tag and property names are not case-sensitive in HTML, but should be all in lowercase in XHTML.

- The value of properties are usually case-sensitive.

- width=6, width =6, width= 6, and width = 6 all mean the same.

HCI 201 Notes #1B 10

Embedded Tags

Starting and ending tags- Some tags do not have an ending tag in HTML:

<area><base><basefont><br><col><frame>

<hr><img><input><isindex><link><meta>

<param>- XHTML always requires ending tag, in the following format:

<tag>content</tag> or <tag ... />


Embedded Tags

Proper and improper nesting The right way – “starts first, ends last”

<a><b></b></a>, <a><b><c></c></b></a>, <a><b></b><c></c></a>

The wrong way

<a><b></a></b>, <a><b><c></a></b></c>, <a><b></a><c></b></c>, ...


Embedded Tags

Ignored or redundant tags Most HTML browsers ignore the following tags:

Tags that the browser doesn’t understand/support. Tags that are incorrectly spelled. Some redundant tags whose effects cancel or substitute.

Watch out the content you put behind non-standard tags…


In the following slides, I am going to show you the tip of the iceberg --- don’t worry if you didn’t get them now, because we’ll discuss them in details later on.


Text - Appearance

Things you should keep in mind…

- The purpose of manipulating text appearance is to make it easy to read and understand, not to show off.

- We can only advise, not dictate, the various browsers and platforms to display our documents in certain ways.

- “Cool pages are a flesh in the pan, deep content will bring people back again.” … but people would surely appreciate if the deep content was presented nicely.


Text - Appearance

Content-based text styles- Indicates that the tagged text has a specific usage/meaning.- Easy to be located by search engines.

Tag Description

<em> Indicates that characters should be emphasized. Usually in italics.

<strong> Emphasize characters more strongly than <em>. Usually in bold.

<code> Indicates a sample of code. Usually in a mono-space typeface.

<kbd> Denotes user’s keyboard input. Usually in a mono-space typeface.

<var> Indicates a variable. Usually in italics or underlined.

<cite> Indicates short quotes or citations. Usually italicized by browsers.

*See details in Chapter 4.4 Content-based Styles


Text - Appearance

Physical styles- Explicitly tells the browser how to display the tagged text.- Use the content-based styles often, since they convey

meaning as well as style.

Tag Description

<b> Indicates that the text should be bold.

<i> Indicates that the text should be italic.

<tt> Indicates that the text should be in a mono-space typeface.

<big> Indicates that the text should be displayed in a bigger font if possible.

<small> Indicates that the text should be displayed in a smaller font if possible.

Text<sub> The text should be displayed as a subscript, in a smaller font if possible.

Text<sup> The text should be displayed as a superscript, in a smaller font if possible.

*See details in Chapter 4.5 Physical Styles


Text - Appearance

Special characters- Not all characters are available on the keyboard. (e.g., ,,)- Special meanings. (“<” – a less-than sign, or a start tag?)

Symbol Code Code Name Description

© © Copyright symbol

Non-breaking space

· · Middle dot

™ Trademark symbol

< < < Less than symbol

> > > Greater than symbol

& & & Ampersand

*See details in Chapter 3.5.2 Character Entities or Appendix F


Text - Structure

Divisions, paragraphs, and line breaks

Tag Function Vertical Space Properties End Tag

<div> Defines a block of text

Break a line. See Ch.4.1.1, page 63.

</div>, usually omitted in HTML.

<p> Defines a paragraph of text

Add more vertical space than the <div> and <br> tags.

See Ch.4.1.2,

page 66.

</p>, usually omitted in HTML.

<br> Insert a line break.

Break a line. See Ch.4.7.1,

page 96.

None in HTML.

</br> or <br…/>

in XHTML.


Text - Structure

Headings<h1>, <h2>, <h3>, <h4>, <h5>, <h6> Very large Very small

- Divide and title discrete passages of text.

- Convey meaning visually.

- Ready for machine-automated processing of your documents.

- Do not omit the end tags.


Text - Structure

Horizontal rules <hr>- Break the flow of text.

- Draw a horizontal rule on a new line.

- Resume the flow of text below this rule.

- Appearance can be altered.

- No end tag in HTML, but need </hr> or <hr…/> in XHTML.

Preformatted text <pre>- Let browser display a block of text as-it-is.

- Most browsers render the block in a mono-space typeface.


Hyperlinks

URL – Uniform Resource Locator

protocal://server_domain_name/directory/file_name Protocol: a set of rules describing how to transmit data.

E.g. “http”, “ftp”, “https”

Domain name or server IP address: E.g. “www.yahoo.com” or “64.58.76.223”

Directories:E.g. “/HCI201/Assignments/assignment1/”

File name: “FileName.FileExtension”

E.g. “MyFirstPage.html”

Case sensitive


Hyperlinks

Anchor tag <a> Link to documents on the Internet

<a href=“www.depaul.edu”>DePaul University</a>

Link to a section of a document <a href=“home.htm#Intrest”>My Interest</a> Link to a document in the same folder

<a href=“Assignments.htm”>Assignments</a> Link to a document in other folders

- “parent” folder: <a href=“../home.htm”>- “sibling” folder: <a href=“../class2/notes.htm”>- “child” folder: <a href=“assignment/grade.htm”>


Images

Inline Images<img src=“URL” OtherProperties>- Specify the location of this image file in src.

- Provide alternative text (if image cannot be shown) with alt.

- Change the position with align[=top/middle/bottom/left/right]

- Resize the image on your page with width and height.

Image links or image maps <a href=“…”><img src=“depaul_logo.jpg”></a>

(We’ll talk about advanced image links in future classes.)


Lists

Unordered lists<ul>

<li>Apple</li>

<li>Peach</li>

<li>Pear</li>

</ul>- Use unordered list when the order of the items is not important.

- Never omit </ul>, but omitting </li> is Okay in HMTL.

- Want to use your own cool bullet icon for unordered list? I’ll show you how in future class.


Lists

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


Lists

Definition lists<dl>

<dt>Term 1</dt>

<dd>Term 1 means blah blah blah</dd>

<dt>Term 2</dt>

<dd>Term 2 means yahda yahda yahda</dd>

</dl>- An ideal way to present a glossary, lists of terms, name-value list.

- Never omit </dl>, but omit </dt> and </dt> is OK in HMTL.


Forms

<form>...</form>- A power tool to collect user input and transfer data.

- Various elements can be inserted in a form.

- After data are collected via a form, they will usually be sent to and processed by a server-side program.


Tables<table OtherProperties> <caption>Table Title</caption> <tr> <td>row1, column1</td> <td>row1, column2</td> </tr> <tr> <td>row2, column1</td> <td>row2, column2</td> </tr></table>


Frames

Advantages

- Divide the browser window into multiple display areas, each containing a different document.

- Avoid scrolling back and forth on a long page.

Disadvantages- Loading multiple documents might result in longer delay for users.

- Unnecessary scrolling bar vs. cut-off pages.

- “Orphan” pages.

- Nested frameset.


Style Sheets

Control how your web page looks.

Font style, size, color, background, alignment, and so on…

Impose consistent display features over the entire document and a collection of documents.

Easier for modification and maintenance.

Separate the content from the design, as much as possible.


JavaScript

Control how the browser behaves for the user. Font style, size, color, background, alignment, and so

on… Things we can do with JavaScript:

- Change the appearance of the document.(font, color, rollover images, pull-down menus, etc.)

- Provide dynamic information.(status bar, date and time updates, etc.)

- Interact with user.(alert messages, open a new window, etc.)

- Validate user’s input.- General computational tasks.- … …


No assignment this week

But you might want to…- Read Chapter 1 and 2.- Find / install a web page editor (text or WYSIWYG editor).- Get familiar with the interface / functions available in the

WYSIWYG editor.- Write up a simple web page and play around with it.- Make sure you can upload files to your web site.- Be prepared for the quiz next Monday.

Documents

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