Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Lecture Notes 2B
Transcript
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
