NOTE: If you contribute, please leave your name next to your contributions, so I can credit you.

I want to demonstrate the creation of a web page. I want to start out with a basic HTML page, then add CSS to make it look pretty. Then I want to add some (unobtrusive) JavaScript functionality, such as form validation, navigation menus, tabs, tooltips, and maybe a WYSIWYG text area. Then I want to add some AJAX.

I could use some ideas on what kind of page to use as a demo. Here are my ideas for consideration:

• Entry form for an CD database application
  • HTML: Web form
  • CSS: Make it look nice
  • JS: Validation, menus, tabs, WYSIWYG, tooltips; show thumbnail of album art, full size pop-up on hover?
  • AJAX: When barcode is entered, fetch/fill other info from web

• HTML page should work in any browser, without CSS, JS, or AJAX enabled.
• XHTML is a little easier for server-side and JS to process than HTML.
  • Especially if transforming the document, like with XSLT.
  • Or if translating from some other form of XML.
  • No significant reason other than that to choose it over HTML 4.01.
  • Emphasize why we separate markup from presentation.
    • Google, search engines, screen readers for the blind.
    • Zeldman's arguments are good to use.
    • Semantic meaning.
      • Semantic web.
      • Little semantic web.
• Must use server-side validation, even if we have client side validation.
• Unobtrusive JavaScript.
  • No JavaScript in the HTML page at all; only REL references.
  • JavaScript adds handlers to page elements by ID, class, or type.
    • Examples.
• Explain how the browser loads a page (conceptually).
  • Loads the HTML.
  • HTML headers say what CSS file(s) to load.
    • CSS is loaded, applied to HTML to render.
  • HTML headers say what JavaScript file(s) to load.
    • JS files are loaded and run.
  • One thing JS can do is register event handlers.
    • When something happens, those JavaScript functions are run.
      • Like a pop-up when a click happens.
      • Like a pop-up or color change on hover.
    • Event handlers can also be declared in the HTML.
      • But it is not recommended.
• AJAX: Asynchronous JavaScript and XML.
  • Means that the web page gets info from a server without reloading the page.
    • The server usually sends XML.
  • New name, not all that new an idea/technique.
    • Started coming into common use/vogue recently, with many Google initiatives.
      • Google Suggest - suggests completions according to what you type.
      • Google Maps - can move around and zoom map without reload.