COAP:COAP-2100/week3-2011

Week 3

Topics Covered

Valid HTML

• Why is valid code important ?
• Validation strategies

Teaching materials

• HTML and XHTML validation and repair

Classroom activities

Monday

We will look at three kinds of validation tools:

• Various online services, in particular the W3C Quality Assurance Tools
• Using browser extensions in Firefox
• Using validation tools in your web authoring system

There are several types of validation tools:

• HTML/XHTML validation
• CSS validation
• Links checking (are they broken ?)
• Accessibility checking (can impaired people use the web site)

The W3C Quality Assurance Tool set 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 ...

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.

Using Tidy inside NoteTab light

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

Using the tidy program

• You can get various flavors from SourceForge
  • download HTML Tidy (command prompt tool that can be used withing several free/open source text editors like NoteTab Light).

Wednesday (and some of Monday probably)

• Associating a stylesheet
  • Inline Styles
  • Embedded Style Sheets
  • Linking External Style Sheets
• CSS Validation
• 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 writes down potential objectives and requirement for your term project.

1. Create an HTML page (either in HTML 4.01 strict or XHTML stict)
2. 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 qualitity of the CSS and the validity of the HTML
• The term project proposal will not be evaluated and it is not yet binding.

Submission:

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