Difference between revisions of "AIM Class2"

Revision as of 00:22, 22 August 2006

Review History of Markup from last class

What is the connection between XML, XHTML and CSS?

XHTML: Extending HTML

Last class we spoke about the benefits of XML and why we are moving away from pure HTML documents. So why was HTML extended instead of replacing it entirely with XML?

Why Extend HTML

XML is a "meta" markup language. In order to have anything meaningful, you must either use a pre-existing set of elements or create your own (unlike HTML, XML doesn't come with a predefined set of tags). For those looking to quickly markup a document, or for those who mainly need the set of tags already defined by HTML, XHTML is a more appropriate language to start with. XML languages can then be used in XHTML documents (HTML can not be used in XML languages - extending HTML allows us to use XHTML in conjunction with XML)

The Differences

XHTML is almost exactly the same language as HTML 4.0 with a few important differences.

1. Syntax - See the W3 Guidelines

XHTML Compliant Documents

Introduction to CSS

There are four ways to use stylesheets:

  1. In-line
  2. Embedded
  3. Linked (External)
  4. Import* 

In class we will discuss the first three methods and create an example of the third. The fourth method, import, will not be covered in class because there is sketchy support for it (which actually turns out to be a plus if you want a specific style sheet that some browsers won't be able to see or use).

Class Assignment

Create an experimental CSS file that does the following:

         * Use a div
         * Use a span
         * Use at least one class
         * Use at least one ID
         * Change the background color of a div, and the text color
         * Change the background color of a span, and the text color

Homework

AIM Assignment 2

AIM Quiz 1

Reading

XHTML: Chapter 24

Online Article: Peter Morville's Strange Connections

Online Article: Dan Willis's Classic IA Tools

Quiz

AIM Class Quiz 01

Resources

Helpful links:
• <a href="http://www.pixy.cz/apps/barvy/index-en.html">Color Scheme</a> (color scheme generator)
• <a href="http://www.colorschemer.com/online.html">Color Schemer</a> (color scheme generator)
• <a href="http://colormatch.dk/">Color Match 5k</a> (color scheme generator)
• <a href="http://archive.devx.com/projectcool/developer/gzone/color/color_symbolism02.html">Color Symbolism</a> (devx.com article)
• <a href="http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/SchHome.html">Color Use Guidelines for Mapping and Visualization</a>
• Web Graphics for Non-Designers Excerpt <a href="http://www.webreference.com/authoring/graphics/color/nondesigners/chap2/">Chapter 2: Using Color</a>
• <a href="http://webdesign.about.com/cs/color/a/aacolorharmony.htm">Color Harmony</a> (about.com article)
• <a href="http://colormatters.com/colortheory.html">Basic Color Theory</a> (color matters.com article)
• <a href="http://www.colormatters.com/chameleon.html">Color, the Chameleon of the Web</a> (color matters.com article)
• <a href="http://colormatters.com/des_ecom.html">Color and E-Commerce</a> (color matters.com article)
• <a href="http://webdesign.about.com/cs/color/ht/htrgbhexwindows.htm">How To Convert From RGB to Hex on a Windows Computer</a> (about.com article)
• <a href="http://www.colordream.net/research/eresult.htm">Study of color preferences in Japan</a>
• <a href="http://www.personal.psu.edu/faculty/c/a/cab38/ColorBrewerBeta.html">Color Brewer</a> (color scheme tool)