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
- Browser extensions for Firefox. You must install at least:
- 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://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
- However, again, we suggest to install the Codeburner for Firefox extension.
1.3 Classroom activities
- Catching up week 1: Social networking software
- Q/R HomeWork 1
- Short demo of Kompozer and creation of a little HTML page
- 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
- 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 HTML 4.01 transitional or XHTML 1.x stict) and write down your (short) analysis
- 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)
- 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 are available in the worldclass room.
- 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)
- You must a include two screenshots
- You are free to structure your analysis as you like as long as you look at three design versions.
- Upload the html file + other assets to the worldclassroom before start of the Wednesday week 3 lesson
- 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