COAP:COAP-2100/week2-2011: Difference between revisions
Jump to navigation
Jump to search
| Line 19: | Line 19: | ||
** [http://users.skynet.be/mgueury/mozilla/index.html HTML VALIDATOR] | ** [http://users.skynet.be/mgueury/mozilla/index.html HTML VALIDATOR] | ||
** [https://addons.mozilla.org/en-US/firefox/addon/13048 Codeburner for Firefox] (HTML and CSS reference) | ** [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] | |||
; Text and HTML editors | ; Text and HTML editors | ||
* [[Text editor]] (definition and pointers to recommended editors) | * [[Text editor]] (optional reading, definition and pointers to recommended editors) | ||
* [[Web authoring system]]s (a list of web editing tools) | * [[Web authoring system]]s (optional reading, a list of web editing tools) | ||
* At Webster, the "official" text editor is NoteTab light: http://www.notetab.com/ | * At Webster, the "official" text editor is NoteTab light: http://www.notetab.com/ | ||
* For this class, we will use Kompozer: http://www.kompozer.net/download.php | * For this class, we will use Kompozer: http://www.kompozer.net/download.php (free software, multiplatform) | ||
See also [[XML editor]]s, an alternative for XHTML editing | See also [[XML editor]]s, an alternative for XHTML editing | ||
; HTML and XHTML | ; HTML and XHTML documentation | ||
* [[HTML and XHTML elements and attributes]] | * [[HTML and XHTML elements and attributes]] (lecture notes) | ||
* [[World Wide Web]], [[HTML]] and [[XHTML]] (for background information) | * [[World Wide Web]], [[HTML]] and [[XHTML]] (for background information) | ||
You also may either consult the Reference book (Deitel) or do an online tutorial. Recommended: | You also may either consult the Reference book (Deitel) or do an online tutorial. Recommended: | ||
| Line 40: | Line 39: | ||
; HTML elements reference | ; HTML elements reference | ||
* http://en.wikipedia.org/wiki/HTML_element | * http://en.wikipedia.org/wiki/HTML_element | ||
* However, again, we suggest to install the [https://addons.mozilla.org/en-US/firefox/addon/13048 Codeburner for Firefox] extension. | |||
==== Classroom activities ==== | ==== Classroom activities ==== | ||
Revision as of 13:22, 17 January 2011
Week 2
Topics Covered
- What do we mean by the Internet ?
- Web markup, HTTP and web applications
- Your development environment (Web browser and text editor)
- Introduction to HTML and XHTML
- Validation services (if time left)
Teaching materials
- What do we mean by the Internet ?
- Slides used: internet-intro.pdf
- Internet tutorial (first part of the slides above spelled out ...)
- Configuring your Web browser with extensions
- Browser extensions for Firefox. You must install at least:
- HTML VALIDATOR
- Codeburner for Firefox (HTML and CSS reference)
- Screengrab (easy tool to create screen captures of web sites)
- Text and HTML editors
- Text editor (optional reading, definition and pointers to recommended editors)
- Web authoring systems (optional reading, a list of web editing tools)
- At Webster, the "official" text editor is NoteTab light: http://www.notetab.com/
- For this class, we will use Kompozer: http://www.kompozer.net/download.php (free software, multiplatform)
See also XML editors, an alternative for XHTML editing
- HTML and XHTML documentation
- HTML and XHTML elements and attributes (lecture notes)
- World Wide Web, HTML and XHTML (for background information)
You also may either consult the Reference book (Deitel) or do an online tutorial. Recommended:
- http://en.wikibooks.org/wiki/HyperText_Markup_Language
- http://www.w3schools.com/html (part 1) followed by /http://www.w3schools.com/xhtml/ (W3C Schools tutorial)
- HTML links includes pointers for other online tutorials
- HTML elements reference
- http://en.wikipedia.org/wiki/HTML_element
- However, again, we suggest to install the Codeburner for Firefox extension.
Classroom activities
- Monday
- Catching up week 1: Social networking software
- Q/R HomeWork 1
- Short lecture: What do we mean by Internet and the World-Wide Web
- Browser configuration
- Wednesday
- Introduction to XHTML
- HTML Coding with Kompozer and NoteTab light
- HTML Validation with various tools
- Adding/editing HTML fragments to/in on-line services with through the web editors
Homework 2
Task: Create a little HTML page that evaluates a web design at CSS Zen Garden
- Go http://www.csszengarden.com/ (Zen Garden)
- Pick two designs that you like and one that you dislike
- http://www.mezzoblue.com/zengarden/alldesigns/ will list all submitted design that made it into the CSS ZenGarden.
- (New) You also can pick rejected designs from: http://www.mezzoblue.com/zengarden/alldesigns/others/ (links may be broken though, since they point to original submissions)
- Create an HTML page (either in HTML 5 or HTML 4.01 strict or XHTML 1.x stict) and write down your (short) analysis
- Keep to simple tags (e.g. h1,h2,p,ul,ol,a,p) and do not try to make it look good (CSS is for another homework)
- You should, however, insert screen shots using the img tag
- We suggest that you look at some prior homework that can be found here. Username and password is available on the worldclass room.
Constraints:
- Your page should be valid HTML/XHTML strict (either use the HTML validator of the editor, an online tool or the Firefox extension to validate)
- You must a include two screenshots
- You are free to structure your analysis as you like.
Submission
- Upload the html file to the worldclassroom before start of the Wednesday week 3 lesson