COAP:COAP-2100/week3-2011

Week 3

Topics Covered

Valid HTML

• Why is valid code important and what needs to be validated ?
• Validation strategies

Styling with CSS

• Introduction to CSS

Software

• We will continue to use NoteTab light, a fee editor you can install at home. Get it form the NoteTab WebSite.
• Browser extensions:
  • Install it if you didn't do in week2: HTML VALIDATOR is a Mozilla extension that adds HTML validation inside Firefox and Mozilla.
  • New: CodeBurner for Firefox (This is a HTML and CSS reference tool)
  • Once you installed it, it is available through menu Tools->Codeburner for Firefox (or hit CTRL-ALT-D).
  • This program also interfaces with the HTML reference at sitepoint online manual.

Teaching materials

• HTML and XHTML validation and repair

Classroom activities

Monday

On Monday we will continue learning how to code HTML with a special focus on validity.

(1) Online documentation about HTML

• We will use http://reference.sitepoint.com/html (also availabe through the Codeburner Firefox extension)
• See HTML links (Manuals and short references) for others if you wish...

(2) A introduction to W3C Quality Assurance Tool set. It includes several tools

1. http://validator.w3.org/ (Markup Validation Service)
   • You can enter a URL, upload file or directly copy/paste code
   • Supported formats (Sept 2009): HTML, XHTML, SMIL, MathML
2. http://validator.w3.org/checklink (W3C Links Checker)
3. http://jigsaw.w3.org/css-validator/ (on line CSS validation service)
   • URL validation: You can enter either an HTML/XHTML URL or just a CSS
   • Alternatively you can upload a CSS file (and pick the CSS profile).
4. Other tools, e.g. a Feed validator are available from the Quality page ...

(3) Using web browser development tools

• Use of HTML Validator (install it if you didn't do it on week2). Basically you just go View-Source and look at the errors.

(4) Using Tidy inside NoteTab light

• This may not work (since Tidy must installed on your computer)

(5) Using the tidy program (if time left)

• You can get various flavors from SourceForge. More precisely:

1. Get the Windows binary version from http://www.paehl.com/open_source/?HTML_Tidy_for_Windows
2. Unzip it somewhere on the harddisk (I stronly suggest the C: drive, we will discuss this with the Lab assistants, so wait)
3. Then configure NoteTab light, i.e. hit CTRL-F7 and the editor where to find tidy.exe
4. Alternatively (v.s. using it from NoteTab), you also can install GuiTidy: http://www.paehl.de/tidy/ (scroll all the way down)

Wednesday

We will start learning CSS, in particular

• Associating a stylesheet
  • Inline Styles
  • Embedded Style Sheets
  • Linking External Style Sheets
• CSS Validation ( http://jigsaw.w3.org/css-validator/ )
• CSS Selectors
• Text styling (e.g. fonts, size, aligns)
• HTML div and span tags
• Backgrounds
• CSS “boxes” , positioning elements and text flow (if time only !)

Homework

Task: Create a little HTML page that spells out a proposition for a term project

1. Think about objectives and requirements for your term project
2. Create an HTML page (either in HTML 4.01 strict or XHTML strict) and write down a draft proposal
3. Create an external CSS stylesheet that is linked to the HTML page

Constraints:

• HTML must include at least 3 titles plus paragraphs and lists (of your choice)
• Define a global default CSS rule or a rule for the body
• Define an extra rule for titles, paragraphs and list elements

Evaluation:

• I only will evaluate whether you comply with the constraints, the technical and design quality of the CSS and the validity of the HTML
• The term project proposal will not be evaluated and it is not yet binding.

Submission:

• Upload both the HTML and the CSS file to the Worldclassroom before start of week 4 lesson.