COAP:COAP-2100/week3-2011: Difference between revisions
Jump to navigation
Jump to search
m (→Software) |
|||
Line 29: | Line 29: | ||
On Monday we will continue learning how to code HTML with a special focus on validity. | On Monday we will continue learning how to code HTML with a special focus on validity. | ||
(1) A introduction to [http://www.w3.org/QA/Tools/ W3C Quality Assurance Tool set]. It includes several tools | (1) Online documentation about HTML | ||
* We will use http://reference.sitepoint.com/html (also availabe through the Codeburner Firefox extension) | |||
* See [http://edutechwiki.unige.ch/en/HTML_links#Manuals_.26_Short_References HTML links] (Manuals and short references) for others if you wish... | |||
(2) A introduction to [http://www.w3.org/QA/Tools/ W3C Quality Assurance Tool set]. It includes several tools | |||
# http://validator.w3.org/ (Markup Validation Service) | # http://validator.w3.org/ (Markup Validation Service) | ||
#* You can enter a URL, upload file or directly copy/paste code | #* You can enter a URL, upload file or directly copy/paste code | ||
Line 39: | Line 43: | ||
# Other tools, e.g. a Feed validator are available from the [http://www.w3.org/QA/Tools/ Quality page] ... | # Other tools, e.g. a Feed validator are available from the [http://www.w3.org/QA/Tools/ Quality page] ... | ||
( | (3) Using web browser development tools | ||
* Use of [https://addons.mozilla.org/en-US/firefox/addon/249 HTML Validator] (install it if you didn't do it on week2). Basically you just go ''View-Source'' and look at the errors. | * Use of [https://addons.mozilla.org/en-US/firefox/addon/249 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) | * 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 [http://tidy.sourceforge.net/#binaries SourceForge]. More precisely: | * You can get various flavors from [http://tidy.sourceforge.net/#binaries SourceForge]. More precisely: | ||
# Get the Windows binary version from http://www.paehl.com/open_source/?HTML_Tidy_for_Windows | # Get the Windows binary version from http://www.paehl.com/open_source/?HTML_Tidy_for_Windows |
Revision as of 17:53, 6 September 2009
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
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
- 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 ...
(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:
- Get the Windows binary version from http://www.paehl.com/open_source/?HTML_Tidy_for_Windows
- Unzip it somewhere on the harddisk (I stronly suggest the C: drive, we will discuss this with the Lab assistants, so wait)
- Then configure NoteTab light, i.e. hit CTRL-F7 and the editor where to find tidy.exe
- 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
- 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.