Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Multimedia and the World Wide Web HCI 201 Lecture Notes #2B 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 2 “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 3 <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 4 <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 5 <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 6 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 7 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 8 <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 9 <br> clear clear=“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 HCI 201 Notes #2B <br clear=“left”> 10 <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 11 <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 12 <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 13 <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 14 <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 15 <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 16 <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 17 <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 18 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 19 <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 20 <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 21 <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 22 <hr> When to use <hr> ? To separate the body from - Header and footer - Bibliography. - Figures. - 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 23 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 contentbased style tags and physical style tags you used. Bonus: Anything exceptionally beyond the above list. Up to 5%. HCI 201 Notes #2B 24 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 25 Where to upload my finished page? I have my own web space You are welcome to post your homework anywhere online, as long as the link works properly. I do not have my own web space Each 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 26 How to manage my web space? 1. 2. 3. 4. Download and install SSH Create a “public_html” folder Upload your web pages to the right folder 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. HCI 201 Notes #2B 27