Difference between revisions of "AIM Class3"
(→Anchor Tags and Pseudo Classes) |
(→CSS) |
||
Line 88: | Line 88: | ||
===CSS=== | ===CSS=== | ||
− | Wrapping text with CSS | + | Aligning Text with CSS |
+ | |||
+ | Wrapping text around a block-level element (such as an image or div) with CSS | ||
==Anchor Tags and Pseudo Classes== | ==Anchor Tags and Pseudo Classes== |
Revision as of 20:08, 23 August 2006
Class Goals
- Introduce the concept of standardization and validating documents
- Introduce web accessiblity
- Reinforce previously learned (DID) image formats and compression
Contents
Compliance and Verification of Documents
Review
1. Who creates the standards?
2. Are the standards mandatory for browser developers and for those who post content online?
Compliant XHTML/CSS
1. What do you need in order to make a document "verifiable"?
2. How can you "verify" a document?
Web Accessibility
1. What is web accessibility?
2. Why is web accessibility important?
3. How can you make a site more accessible?
Images on the Web and Compression Schemes
Formats
Main image formats for web publishing at this time: jpg, gif, png, svg (however the most accessible to older browsers are jpg and gif).
JPG
When to use: an image that has a lot of detail (like a photograph).
Algorithm used: JPG
Pros and Cons:
- Lossy
- Works well with detailed images
GIF
When to use: an image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)
Algorithm used: LZW
Pros and Cons:
- Limited to 256 colors
- Compression works well with broad areas of color, but not with details
- Patent
- Animation (flip-book type animation, as a layered stack)
PNG
When to use: When target audience browser support is known, or when transparency is needed
Algorithm used: PNG
Pros and Cons:
- Lossless
- Limited support in older browsers
- Potentially larger file size
- Transparency
SVG
Size (visual and file size)
Compression
Copyright
Fair Use, Copyright Issues, Creative Commons
Wrapping Text
Review: block-level vs. inline elements (how does this affect flow?)
"Clearing" flowing content using the clear attribute with the br element (left, right, all)
Images
Deprecated: Using the align attribute (align="right" means the image goes to the right, the text goes to the left)
CSS
Aligning Text with CSS
Wrapping text around a block-level element (such as an image or div) with CSS
Anchor Tags and Pseudo Classes
Psuedo classes: definition and examples
Linking Within a Page
Links
W3c: http://www.w3.org/
Web Accessibility: http://www.w3.org/WAI/intro/accessibility.php
Overview of Accessibility: http://www.w3.org/WAI/References/QuickTips/Overview.php
Creative Commons: http://creativecommons.org/
Homework
Reading
ZEN: Chapter 1, pages 34-45; Chapter 4(pages 125-129)
XHTML: Chapter 5, pages 83-98; Chapter 6, 104-115, Chapter 7, pages 117-132