Multimedia and the World Wide Web HCI 201
Multimedia and the World Wide Web HCI 201 Lecture Notes #2 A # HCI 201 Notes #2 A
What will we learn today? n <html> <head> <title> <body> Division and paragraphs <div>, <p> Heading tags <h 1>, <h 2>, <h 3>, <h 4>, <h 5>, <h 6> n Changing text appearance n n n n Content-based styles Physical styles Web color 101 HCI 201 Notes #2 A 2
Case Study 1 Our first client, Lori Simpson, just graduated from De. Paul 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 #2 A 3
<html> n Function: Delimits the beginning and ending of a document. n Attributes: dir, lang, version n End tag: </html>, may be omitted in HTML. n Contains: <head>, <body>, <frameset> HCI 201 Notes #2 A 4
<html> n dir=ltr or dir=rtl The direction the browser should render the tagged element(s). n lang Specifies the language in a two-char language code (ISO-639 standard). en English, en-US US English, fr French, de German, es Spanish, zh Chinese, ar Arabic, ja Japanses n version (deprecated in HTML 4) Defines the HTML standard version used to write this document. Use SGML <!doctype> instead. HCI 201 Notes #2 A 5
<head> n Function: Define the document header (encapsulate other header tags). n Attributes: dir, lang, profile n End tag: </head>, rarely omitted in HTML. Contains: head content n Used in: <html> tag n HCI 201 Notes #2 A 6
<head> n Tags used in <head> <base>, <isindex>, <link>, <meta>, <nextid>, <object>, <script>, <style>, <title> n 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 #2 A 7
<title> n Function: Define the document title. n Attributes: dir, lang n End tag: </title>, never omitted. Contains: plain text n Used in: <head> tag n HCI 201 Notes #2 A 8
<title> n n Browsers supply a generic title for documents lacking a <title>. Do NOT omit </title> (check what happens if the ending tag is missing…) n How to choose an appropriate title n n Descriptive Useful Content-independent Bad examples: “Chapter One”, “My Home Page”, etc. Let’s write the skeleton of Lori’s resume. . . HCI 201 Notes #2 A 9
<body> n Function: Define the document body. n 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. n Contains: content of the web page n Used in: <html> tag n Let’s the#2 A content into Lori’s resume. . . HCI 201 add Notes 10
Editorial Markup <ins> and <del> n Function: Define inserted and deleted document content. n Attributes: cite, datetime, dir, lang, style, etc. n End tag: </ins>, </del>, never omitted. Contains: content n Used in: <body> tag n HCI 201 Notes #2 A 11
<ins> and <del> n Example “Words. Editors move wordseditors around. ” <del>Words</del><ins>Editors</ins> move <ins>words</ins><del>editors</del> around. n cite=URL Indicates why the editing was made. - URL locates a document that explains the reason. - n datetime - Indicates when the editing was made. - YYYY-MM-DDThh: mm: ss. TZD (2004 -09 -30 T 14: 00 Z, 2004 -09 -30 T 14: 00 -05: 00) HCI 201 Notes #2 A 12
<div> n What we’ve learned about <div> - n 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 #2 A 13
<p> n What we’ve learned about <p> - n 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 #2 A 14
Heading tags <h 1> to <h 6> n Function: Define of six levels of headers. n Attributes: align, class, dir, lang, style, etc. n End tag: </h 1> to </h 6>, never omitted. Contains: text n Used in: <body> tag n HCI 201 Notes #2 A 15
Heading tags n 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. n Size Largest size: <h 1> Default size: <h 4> Smallest size: <h 6> n Tips for using headings appropriately - Repeat the document title in your first heading tag. - Use headings to improve the scanability of your document. - Use <h 5> and <h 6> for text such as declaimer, copyright, etc. Let’s format the headings of Lori’s resume. . . HCI 201 Notes #2 A 16
Content-Based Styles n 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. n Do not omit the end tags HCI 201 Notes #2 A 17
Content-Based Style Tags n <cite> - Indicates that the enclosed text is an bibliographic citation. - E. g. , book, magazine, journal articles, etc. - Usually rendered in italic. n <code> - Renders the enclosed text in a monospaced, teletype-style font. - Used for text that represents program source code. n <strong> - To emphasize the enclosed text. - Usually rendered in bold. *See summary in Table 4 -1, page 83. HCI 201 Notes #2 A 18
Physical Style Tags n When should we use them? To explicitly display text in certain style. n Why should we avoid using them? Try to provide the browser as much contextual information as possible. n Do not omit the end tags HCI 201 Notes #2 A 19
Physical Style Tags n <b> Boldfaces the enclosed text. n <i> Renders the enclosed text in italic. n n <big> Increases the text one font size larger, if possible. <small> Decreases the text one font size smaller, if possible. n <sub> Displays the text half a character’s height lower. n <sup> Displays the text half a character’s height higher. n <tt> <u> Displays the text in a monospaced font. n Underlines the enclosed text. *See summary in Table 4 -2, page 88. HCI 201 Notes #2 A 20
Combining Different Styles n Content-based styles + content-based styles <em>lalala<strong>lalala</strong>lalala<em> n Physical styles + physical styles <b>lalala<i>lalala</b> n Content-based styles + physical styles <cite>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 #2 A 21
Web Color 101 n RGB Red Green Blue n CMYK Cyan Magenta Yellow Black n HSB Hue Saturation Brightness HCI 201 Notes #2 A 22
Web Color 101 n Additive Primaries Red+Green Yellow Green+Blue Cyan Blue+Red Magenta R+G+B White n Subtractive Primaries White-Red Cyan White-Green Magenta White-Blue Yellow HCI 201 Notes #2 A red yellow magenta white green blue cyan 23
Web Color 101 n Hue Each of those distinct colors is a hue. n 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 #2 A brightness=0% 24
Web Color 101 n Adjacent colors They harmonize with each other. n Contrasting colors The more transitional colors separating two colors, the greater the contrast is. n Clashing colors Colors that are directly opposite from one another. HCI 201 Notes #2 A 25
Web Color 101 n 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. n Color and culture White Wedding (western countries) White Funeral (eastern countries) HCI 201 Notes #2 A 26
Working with Color in HTML n Using color names 16 color names are recognized by ALL versions of HTML: Black Blue Navy Maroon n Red Green Gray Olive Lime Aqua Fuchsia Teal Yellow Silver Purple White Using color values color=RGB(0~255, 2~255) 2563 more than 16 million distinct colors can be identified. HCI 201 Notes #2 A 27
Working with Color in HTML n Using hexadecimal expression Decimal: 0 10 15 Hexadecimal: 0 A F (15 1*16+5=21, FF 15*16+15=255) 21 15 255 FF color=“red” color=“#FF 0000” RGB(255, 0, 0) HCI 201 Notes #2 A 28
Working with Color in HTML n n 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 on Orange HCI 201 Notes #2 A 29
Working with Color in HTML n Color selection resources n Color Browser (http: //www. maximized. com/shareware/colorbrowser) A windows program to view and select colors, with the corresponding HTML fragments. n Two 4 U’s Color Page (http: //www. two 4 u. com/color) Contains color databases and a color-composing program you can use to generate HTML code for the colors you choose. n Background Color Selector (http: //www. imagitek. com/bcs. html) A web page for various text and background color schemes. n 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 #2 A 30
- Slides: 30