COAP:COAP-2100/week2-2011

From EduTech Wiki
Jump to: navigation, search

1 Week 2

1.1 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)

1.2 Teaching materials, software and reference manuals

What do we mean by the Internet ?
Configuring your Web browser with extensions
Text and HTML editors

See also XML editors, an alternative for XHTML editing

HTML and XHTML documentation

You also may either consult the Reference book (Deitel) or do an online tutorial. Recommended:

HTML elements reference

1.3 Classroom activities

Monday
  • Catching up week 1: Social networking software
  • Q/R HomeWork 1
  • Short demo of Kompozer and creation of a little HTML page
Wednesday
  • Short lecture: What do we mean by Internet and the World-Wide Web
  • Browser configuration
  • Short Introduction to HTML and XHTML (principle and most important tags)
  • Homework 2 (why and how, visit of http://www.csszengarden.com/)
  • HTML Coding with Kompozer (and optionally NoteTab light or another text editor)
  • HTML Validation with various tools (we suggest using the Firefox extension)
  • Adding/editing HTML fragments to/in on-line services with through the web editors (if time left)

1.4 Homework 2

Task: Create a little HTML page that evaluates three web designs at CSS Zen Garden

  1. Go http://www.csszengarden.com/ (Zen Garden)
  2. Pick two designs that you like and one that you dislike
  3. Create an HTML page (either in HTML 5 or HTML 4.01 strict or HTML 4.01 transitional or XHTML 1.x stict) and write down your (short) analysis
  4. Just use Kompozer and/or 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 are available in the worldclass room.

Constraints:

  1. Your page should be valid HTML/XHTML transitional or 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 as long as you look at three design versions.

Submission

  1. Upload the html file + other assets to the worldclassroom before start of the Wednesday week 3 lesson
  2. Do not forget to upload the screenshots (most likely about 3 pictures, else the instructor won't be able to see them)

To get a good grade:

  • Try to be principled and systematic, i.e. look at these three designs using some interesting criteria. You also can discuss the criteria.
  • Turn it in on time