Week 1

HTML and CSS introduction

1 Introduction

The computers in this lab have MoWeS Portable installed. You can find it under "Programmes" in the Start Menu. It creates a local webserver which can only be used on that computer (i.e. not via the web). You can use MoWeS for this class but you don't have to. If you happen to have access to a webserver somewhere else or on your laptop, you can use those as well.

Instructions for MoWes:

After starting MoWes, enter the address 127.0.0.1 into your browser
The directory C:/mowes/www is the root of your server
When editing html files you should use Notepad++ or similar (don't use Word, Notepad, etc)

2 Basic HTML

For the exercises below you should use the resources provided in this class, but you can also search for examples on the web. As a learning exercise for this week, your HTML code should be hand-coded and nicely formatted so that it is human-readable. (In future weeks you can decide yourself whether you hand-code your HTML or generate it using a tool.)

(Note: if you already know basic HTML syntax and are bored with the exercises on this page, have a look at the end of this page.)

2.1 Exercises

1) Create a webpage "helloworld.html" which just displays "Hello World". Open the page in your browser at "127.0.0.1/helloworld.html".

2) Add a picture, a table, a list, some comments and a form to your webpage.

3) Add some non-ASCII characters (such as German umlauts or French accents) to your webpage.

4) Have your webpage display some HTML source code, i.e. as preformatted text.

3 Basic CSS

3.1 Exercises

1) Create a stylesheet for your webpage. Set a background colour (search for "color picker" on the web in order to find the values for your favourite colour). Define different classes of headings and text blocks (using div). For each class, choose a font, a colour, a size, and an alignment.

2) Move a block of text to a specific location on your page and use different colours for it.

Alternative exercises for students who already know HTML

Have a look at some of the tools that come with MoWes. For example, create and configure a blog with Wordpress, have a look at Typo3 or familiarise yourself with the programs identify.exe and convert.exe from ImageMagick for working with image files (see here for more information).