COAP:COAP-2100/week3-2011

Week 3 COAP 2100

(old program, needs revision)

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 free 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.
• Screengrab. Allows to grab portions of a screen or window.

The tidy program:

• Go to HTML Tidy for Windows
• Download the EXE version. You will get a *.zip file called tidy.zip
• Extract the single tidy.exe to some directory, e.g. c:\bin\

Teaching materials

• HTML and XHTML elements and attributes‎‎ (continued)
• HTML and XHTML validation and repair
• Online HTML reference manual (at sitepoint, but you are free to choose others ...)
• CSS tutorial
• Online CSS reference manual

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) Q/A Homework 2

• I will give you some time to work on homework 2 (due next Wednesday)
• Make sure to turn in valide HTML code !

(6) 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 tell the editor where to find tidy.exe
4. Alternatively (v.s. using a default repair configuration through NoteTab ), you also can install GuiTidy: http://www.paehl.de/tidy/ (scroll all the way down). It will give you more options. Advanced users will have to use the command line.

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 3

Task: Create a little HTML page that spells out a proposition for a term project: creating a website with an online service (see homework 1)

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
• Details of the term project proposal will not be evaluated and it is not yet binding. However, I require that you you define certain key elements:
  • Objectives: What is the purpose of the web site ?
  • Audience: What is your main target audience ? Can others consult it/find it useful ?
  • Functions: What kind of information / applications should the site provide
  • Styling: Any ideas about its look and feel ?
  • Other information: ???

Submission:

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