Web Publishing II Outline University of Oregon Libraries
Web Publishing II
- To increase knowledge of HTML
- To be able to locate an image on the web and incorporate it into a web page
- To understand the relationship between HTML and CSS
- To be able to incorporate a style sheet into an HTML document
- To reinforce good web publishing practices
Exercise 1: Web Publishing I Refresher [ 15 minutes ]
- Creating/editing and publishing an HTML document
- HTML as structural language
- Containers, case, nesting
- New HTML elements: address, block quotation, ordered list
- New HTML construct: named anchors
- HTML is a web standard; there are different versions out there, developed over time – we're using HTML 4.01
entity n.: also character entity reference. Symbol or code that represents a character that cannot easily be entered on a keyboard.
- Reference chart
- Uses of entities: special symbols (e.g., ©, , £); math symbols and fractions (e.g., ∞, ½); diacritics (e.g., é, å, Æ); Greek symbols (e.g., Ω, ψ); punctuation (e.g., ¿, « »); and typographical symbols (e.g., -, ‡)
- Most entities have both a character and numerical notation
- Browser support (uneven)
- Some common entities:
Entity Name Numeric Code Descriptive Code Character ampersand 1 & & & less-than sign 2 < < < copyright © © © fraction: one-half ½ ½ ½ small e, acute accent 3 é é é small u, dieresis or umlaut mark 3 ü ü ü
1. Should be used instead of a plain & in web pages (& has special meaning in HTML).
2. If you want to display HTML code on a web page, replace the initial angle bracket (<) with its entity.
3. To save time use a word processor to create a document in another language then convert it to HTML.
Exercise 2: Copyright Your Web Page [ 5 minutes ]
More on Images
- Review of the image element
- More attributes: width, height, align (deprecated), border (deprecated)
- File types: GIF, JPEG
- Finding images on the web
- Optimizing images for the web
Exercise 3: Images from the Web [ 25 minutes ]
Introduction to Cascading Style Sheets
deprecate v.: to express disapproval of
- CSS summary
- Separation of presentation (aesthetic) from structure and content (semantic)
- Deprecated HTML elements: basefont, center, font, s, strike, u
- Deprecated HTML attributes:
attribute elements to which they apply align caption, div, h1...h6, hr, img, p, table, td, tr alink body background body, table bgcolor body, table color basefont, font hspace img, object link body size basefont, font start ol text body type li vlink body vspace img, object
- Style sheet rules replace these deprecated elements and attributes
- Style element
- Browser support of style sheets is uneven
Exercise 4: Add A Little Style [ 25 minutes ]
- HTML elements: address, block quotation, image, ordered list, style
- Web Standards
- Separating presentation from structure and content
- Creating a style sheet
Guidelines for good practice
- When using color, make sure there is as much contrast as possible between the background and foreground (text, links, borders, etc.) colors.
- Keep it simple - don't go overboard with graphical elements and color.
- The goal is graceful degradation - can your web page stand on its own, without the style sheet? If yes, it will degrade gracefully in older browsers, and users will lose none of the content.