COAP:COAP-2100/week3-2011
Jump to navigation
Jump to search
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
Teaching materials
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
- 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
- http://validator.w3.org/checklink (W3C Links Checker)
- 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).
- 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 ( 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
- Think about objectives and requirements for your term project
- Create an HTML page (either in HTML 4.01 strict or XHTML strict) and write down a draft proposal
- 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.