This material covers the basics of CSS – the use of appropriate selectors , ids and classed etc.
Lecture slides on CSS: CSS lecture handouts
Lab exercises: CSS lab exercises
The following resources are used in the CSS exercises
This material covers the basics of semantic XHTML – the use of appropriate elements (tags) such as head, body, title, h1..h6, p, img, table, ul etc.
Lecture slides on HTML: HTML handout
Lab exercises: HTML Lab
The following resource are used in the HTML exercises
Use a right mouse click (and select save image as) and place these images in the same folder as your other files.
This session talks about the architecture of a typical web application and shows how a series of technologies (and accompanying standards) allow a web transaction to take place. TCP/IP, DNS, HTTP, Web servers and browsers, along with a discussion of server side code and database servers are all explained (some of it at an abstract level).
Handouts for this session (PDF)
This is a practical session, implementing the site redesign in semantic HTML and CSS. This exercise requires a plain text editor – Textmate (mac) or Notepad++ (PC) are recommended but will do. A modern browser should be used to check the changes you make as you progress (Firefox with the Firebug debugging toolset are recommended).
This session is about moving an existing site into semantic HTML and CSS. By reducing the complexity (and mess) of the pre-existing HTML and moving the design into CSS broken into separate files, the site should be cleaner, better structured and more maintainable.
Slides for this session (PDF) (Cut down version without all the CSS explanations)
Slides for this session (PDF) (Full set of every slide that’s used)
This session is about the HTTP protocol, web servers and browsers, handouts (PDF)
Two excellent posts about Web Browsers
The second from Glyn Moody contains a potted history of the development of browser technology. His Computer World column is always worth reading.
Video from a symposium organized by Finland’s Technology Academy Foundation, found at Beet.TV