HTML and CSS 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.)
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
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
yourself with the programs identify.exe and convert.exe from ImageMagick
for working with image files
for more information).