COAP:COAP-2100/week2-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

1. Go http://www.csszengarden.com/ (Zen Garden)
2. 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)
3. Create an HTML page (either in HTML 5 or HTML 4.01 strict or XHTML 1.x stict) and write down your (short) analysis
4. 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)
5. You should, however, insert screen shots using the img tag
6. We suggest that you look at some prior homework that can be found here. Username and password is available on the worldclass room.

Constraints:

1. 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)
2. You must a include two screenshots
3. 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