Contact Hour 3: To be discussed on Thursday 2nd February, 2012.

Lecturer: Dr Chris P. Jobling.

Revision of the most commonly used subsets of the Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS).

Material covered here is expanded in Chapters 3 and 4 of the module textbook: Nigel Chapman and Jenny Chapman, Web Design: A complete introduction, Wiley, 2006.

• These notes revise the most commonly used subsets of the Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS).
• Because it is revision, you are expected to read these notes and if necessary work through the exercises in your own time.
• More detailed notes and examples are to be found on-line.

These slides and notes are based on Chapters 2 and 3 of Robert W. Sebasta, Programming the World-Wide Web, 3rd Edition, Addison Wesley, 2006. The examples presented there use XHTML markup. I have updated these to HTML5.

A different treatment of XHTML given in Part I (Chapters 2-3) of the textbook Chris Bates, Web Programming: Building Internet Applications, 3rd Edition, John Wiley, 2006.. However, you should note that though that book tends to use a simpler, non-validated form of XHTML, the examples are actually valid HTML5 which has a simpler more forgiving syntax. You will find additional information about cascading style sheets and further examples in Chapters 4 and 5 of Bates and in Elisabeth Freeman and Eric Freeman, Head First HTML with CSS & XHTML, O'Reilly Media,Inc., 2006.

• There are quite a few for this lecture.
• See the review questions in the individual sub-lectures.

Revision: To Be Read Offline

• The Structural Layer: HTML
• The Presentation Layer: CSS

New Material

• HTML 5 Browser Support
• HTML 5 Video
• XHTML 2 and HTML5
• CSS 3

• XHTML
• CSS
• HTML 5
• CSS 3

• All the exercises in this lecture were taken from Chapters 2 and 3 of Robert W. Sebasta, Programming the World-Wide Web, 3rd Edition, Addison Wesley, 2006. They are gathered together here in a homework sheet for your convenience.

Forms and Web User Interfaces

• Forms
• User Interface Components (Widgets)
• Two Examples

Previous Lecture | home | Next Lecture