COAP:COAP-2100/week3-2011: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
|||
Line 1: | Line 1: | ||
=== Week 3 [[Help:COAP-2100|COAP 2100]] === | === Week 3 [[Help:COAP-2100|COAP 2100]] === | ||
==== Topics Covered ==== | ==== Topics Covered ==== | ||
; | ; HTML | ||
* Why is valid code important and what needs to be validated ? | * Introduction to HTML and XHTML (continued) | ||
* Valid HTML (continued) Why is valid code important and what needs to be validated ? | |||
; Styling with CSS | ; Styling with CSS | ||
Line 14: | Line 13: | ||
==== Software ==== | ==== Software ==== | ||
As HTML editor, we will continue to use: | |||
* Kompozer | |||
* [http://www.fookes.com/notetab/ NoteTab light] (optional) | |||
Browser extensions | Browser extensions (install it if you didn't do in week2: | ||
* [http://users.skynet.be/mgueury/mozilla/index.html HTML VALIDATOR] - [http://htmlvalidator.sourceforge.net/mozilla/tidy_firefox_win_0861.xpi Download for Windows] (1/2011) | |||
* | * [https://addons.mozilla.org/en-US/firefox/addon/13048 Codeburner for Firefox] (HTML and CSS reference) | ||
* [https://addons.mozilla.org/en-US/firefox/addon/1146 Screengrab] (easy tool to create screen captures of web sites) | |||
* [https://addons.mozilla.org/en-US/firefox/addon/1146 Screengrab] | |||
The tidy program | The tidy program (optional, if you need a local validator that also works with NoteTab light) | ||
* Go to [http://www.paehl.com/open_source/?HTML_Tidy_for_Windows HTML Tidy for Windows] | * Go to [http://www.paehl.com/open_source/?HTML_Tidy_for_Windows HTML Tidy for Windows] | ||
* Download the EXE version. You will get a *.zip file called tidy.zip | * Download the EXE version. You will get a *.zip file called tidy.zip | ||
Line 30: | Line 29: | ||
==== Teaching materials ==== | ==== Teaching materials ==== | ||
* [[HTML and XHTML elements and attributes]] ( | * [[HTML and XHTML elements and attributes]] (lecture notes) | ||
* [[HTML and XHTML validation and repair]] | * [[HTML and XHTML validation and repair]] | ||
* [http://reference.sitepoint.com/html Online HTML reference manual] (at sitepoint, but you are free to choose others ...) | * [http://reference.sitepoint.com/html Online HTML reference manual] (at sitepoint, but you are free to choose others ...) | ||
* [[CSS tutorial]] | * [[CSS tutorial]] | ||
* [http://reference.sitepoint.com/css Online CSS reference manual] | * [http://reference.sitepoint.com/css Online CSS reference manual] | ||
; Alternatives | |||
* See [[HTML links]] | |||
==== Classroom activities ==== | ==== Classroom activities ==== | ||
Line 40: | Line 42: | ||
; Monday | ; Monday | ||
On Monday we will | On Monday we will introduce some major HTML tags. | ||
(1) Online documentation about HTML | (1) Online documentation about HTML | ||
* We will use http://reference.sitepoint.com/html | * We will use [[HTML and XHTML elements and attributes]] (lecture notes) | ||
* See [http://edutechwiki.unige.ch/en/HTML_links#Manuals_.26_Short_References HTML links] (Manuals and short references) for | * We also will demonstrate the Codeburner Firefox extensions and the related [http://reference.sitepoint.com/html Sitepoint] web site. | ||
* See [http://edutechwiki.unige.ch/en/HTML_links#Manuals_.26_Short_References HTML links] (Manuals and short references) for other HTML documentation if you wish... | |||
(2) A introduction to [http://www.w3.org/QA/Tools/ W3C Quality Assurance Tool set]. It includes several tools | (2) A introduction to [http://www.w3.org/QA/Tools/ W3C Quality Assurance Tool set]. It includes several tools | ||
Line 60: | Line 63: | ||
(4) Using Tidy inside NoteTab light | (4) Using Tidy inside NoteTab light | ||
* This may not work (since Tidy must installed on your computer) | * This may not work (since Tidy must be installed on your computer) | ||
(5) Q/A Homework | (5) Q/A Homework 2 (if needed) | ||
(6) Using the tidy program (if time left) | (6) Using the tidy program (if time left) | ||
Line 94: | Line 95: | ||
# Think about objectives and requirements for your 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 HTML page (either in HTML 4.01 strict or XHTML strict) and write down a draft proposal | ||
# Create an external CSS | # Create an external CSS style sheet that is linked to the HTML page | ||
Constraints: | Constraints: | ||
Line 100: | Line 101: | ||
* Define a global default CSS rule or a rule for the body | * Define a global default CSS rule or a rule for the body | ||
* Define an extra rule for titles, paragraphs and list elements | * Define an extra rule for titles, paragraphs and list elements | ||
* You should make a serious attempt to define a project (i.e. explicitly define some objectives and requirements) | |||
Evaluation: | Evaluation: | ||
* I only will evaluate whether you comply with the constraints, | * I only will evaluate whether you comply with the constraints, e.g. technical and design quality of the CSS, 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: | * 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 ? | ** Objectives: What is the purpose of the web site ? | ||
Line 111: | Line 113: | ||
Submission: | Submission: | ||
* Upload '''both''' the HTML and the CSS file to the | * Upload '''both''' the HTML and the CSS file to the World classroom before start of week 3 '''Monday''' lesson. |
Revision as of 22:32, 23 January 2011
Week 3 COAP 2100
Topics Covered
- HTML
- Introduction to HTML and XHTML (continued)
- Valid HTML (continued) Why is valid code important and what needs to be validated ?
- Styling with CSS
- Introduction to CSS
Software
As HTML editor, we will continue to use:
- Kompozer
- NoteTab light (optional)
Browser extensions (install it if you didn't do in week2:
- HTML VALIDATOR - Download for Windows (1/2011)
- Codeburner for Firefox (HTML and CSS reference)
- Screengrab (easy tool to create screen captures of web sites)
The tidy program (optional, if you need a local validator that also works with NoteTab light)
- 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 (lecture notes)
- 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
- Alternatives
- See HTML links
Classroom activities
- Monday
On Monday we will introduce some major HTML tags.
(1) Online documentation about HTML
- We will use HTML and XHTML elements and attributes (lecture notes)
- We also will demonstrate the Codeburner Firefox extensions and the related Sitepoint web site.
- See HTML links (Manuals and short references) for other HTML documentation 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 be installed on your computer)
(5) Q/A Homework 2 (if needed)
(6) 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 tell the editor where to find tidy.exe
- 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)
- 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 style sheet 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
- You should make a serious attempt to define a project (i.e. explicitly define some objectives and requirements)
Evaluation:
- I only will evaluate whether you comply with the constraints, e.g. technical and design quality of the CSS, 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 World classroom before start of week 3 Monday lesson.