COAP:COAP-2100/week3-2011: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
 
(19 intermediate revisions by the same user not shown)
Line 1: Line 1:
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 2100</categorytree>
=== Week 3 ===
=== Week 3 ===


==== Topics Covered ====
==== Topics Covered ====


; Valid HTML
; HTML
* Why is valid code important and what needs to be validated ?
* Introduction to HTML and XHTML
* Validation strategies
* Valid HTML. Why is valid code important and what needs to be validated ?


; Styling with CSS
; Styling with CSS
Line 12: Line 14:
==== Software ====
==== Software ====


* We will continue to use [http://www.fookes.com/notetab/ NoteTab light], a fee editor you can install at home. Get it form the [http://www.fookes.com/notetab/ NoteTab WebSite].
We will use the following tools
* [http://kompozer.net/download.php Kompozer] (grab the latest development version !)
* [http://www.fookes.com/notetab/ NoteTab light] (optional)


Browser extensions:
Browser extensions (if installable):
* Install it if you didn't do in week2: [http://users.skynet.be/mgueury/mozilla/index.html HTML VALIDATOR] is a Mozilla extension that adds HTML validation inside Firefox and Mozilla.
* [http://users.skynet.be/mgueury/mozilla/index.html HTML Validator]. You can get it directly from [http://sourceforge.net/projects/htmlvalidator/files/ Source Forge]
* New: [https://addons.mozilla.org/en-US/firefox/addon/13048 CodeBurner for Firefox] (This is a HTML and CSS reference tool)
* [https://addons.mozilla.org/en-US/firefox/addon/13048 Codeburner for Firefox] (HTML and CSS reference)  
** Once you installed it, it is available through menu ''Tools->Codeburner for Firefox'' (or hit CTRL-ALT-D).
* [https://addons.mozilla.org/en-US/firefox/addon/1146 Screengrab] (easy tool to create screen captures of web sites. As of March 2012, this extension is dead)
** This program also interfaces with the [http://reference.sitepoint.com/html HTML reference at sitepoint] online manual.
* [http://chrispederick.com/work/web-developer/ web-developer]
* [https://addons.mozilla.org/en-US/firefox/addon/1146 Screengrab]. Allows to grab portions of a screen or window.


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 28: Line 31:
==== Teaching materials ====
==== Teaching materials ====


* [[HTML and XHTML elements and attributes‎‎]] (continued)
* [[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 ====


; Monday
===== Monday =====


On Monday we will continue learning how to code HTML with a special focus on validity.
(1) Some major HTML tags
 
Online documentation about HTML:
(1) Online documentation about HTML
* We will use [[HTML and XHTML elements and attributes‎‎]] (lecture notes)
* We will use http://reference.sitepoint.com/html (also availabe through the Codeburner Firefox extension)
* 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 others if you wish...
* 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 58: Line 64:


(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 2
(5) Homework 1 feedback and Q/A Homework 2 (if needed)
* I will give you some time to work on homework 2 (due next Wednesday)
* Overal: ok work ... some could have invested some more work, e.g. use all features (or at least remove unused pages).
* Make sure to turn in valide HTML code !
* Pay attention to copyright (i.e. lock the web site or kill it if you reuse copyrighted materials)
 
(6) Start of Homework 3 / Objectives and requirements for a term project
* Discussion of the [[COAP:COAP-2100/term project|term project]]


(6) Using the tidy program (if time left)
(6) Using the tidy program (if time left)
Line 71: Line 80:
# 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.
# 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
===== Wednesday =====


We will start learning [[CSS]], in particular
We will start learning [[CSS]], in particular


* Associating a stylesheet
* Associating a styles and stylesheets with HTML
** Inline Styles  
** Inline Styles  
** Embedded Style Sheets  
** Embedded Style Sheets  
Line 86: Line 95:
* CSS “boxes” , positioning elements and text flow (if time only !)
* CSS “boxes” , positioning elements and text flow (if time only !)


==== Homework ====
==== 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)
Task: Create a little HTML page that spells out a proposition for the [[COAP:COAP-2100/term project|term project]]: creating a website with an online service (see homework 1)


# 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 stylesheet that is linked to the HTML page
# Create an external CSS style sheet that is linked to the HTML page


Constraints:
Constraints:
Line 98: Line 107:
* 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, the technical and design quality of the CSS and the validity of the HTML
* 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 ?
** Audience: What is your main target audience ? Can others consult it/find it useful ?
** Audience: What is your main target audience ? Can others consult it/find it useful ?
Line 109: Line 119:


Submission:
Submission:
* Upload '''both''' the HTML and the CSS file to the Worldclassroom before start of week 4 '''wednesday''' lesson.
* Upload '''both''' the HTML and the CSS file to the World classroom before start of week 3 '''Monday''' lesson.
 
[[Category:COAP 2100 Archive]]

Latest revision as of 15:27, 28 March 2012

COAP 2100
COAP 2100 Archive
COAP:COAP-2100
COAP:COAP-2100/exams
COAP:COAP-2100/term project
COAP:COAP-2100/week1
COAP:COAP-2100/week2
COAP:COAP-2100/week3
COAP:COAP-2100/week4
COAP:COAP-2100/week5
COAP:COAP-2100/week6
COAP:COAP-2100/week7
COAP:COAP-2100/week8

Week 3

Topics Covered

HTML
  • Introduction to HTML and XHTML
  • Valid HTML. Why is valid code important and what needs to be validated ?
Styling with CSS
  • Introduction to CSS

Software

We will use the following tools

Browser extensions (if installable):

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

Alternatives

Classroom activities

Monday

(1) Some major HTML tags Online documentation about HTML:

(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 be installed on your computer)

(5) Homework 1 feedback and Q/A Homework 2 (if needed)

  • Overal: ok work ... some could have invested some more work, e.g. use all features (or at least remove unused pages).
  • Pay attention to copyright (i.e. lock the web site or kill it if you reuse copyrighted materials)

(6) Start of Homework 3 / Objectives and requirements for a term project

(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 styles and stylesheets with HTML
    • 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 the 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 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.
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week3-2011&oldid=38142"