A simple sample page

This is Design D for the HTML/CSS assignment. Please rebuild the page as close as possible. By rebuilding it you'll learn how to use HTML and CSS. Knowing the basics of web publishing is important to use webmapping tools.

Assignment helpers

Step 1: Create the structure of the page with HTML

Rebuild the basic structure of the page with the elements we learned in block 1.

Step 2: Write the CSS to match the given design

Create a CSS file and connect it to your HTML file.
Style the page using text formatting, background and positioning properties.
Design specific properties:
- Color in headings: #35f (blue)
- Logo file: "logo_d.png"
- Background image: "bg_d.png"
- Font families: Arial, Courier
Add the following hower effects to the links in your navigation:
white background color (#eee) and blue text color (#36f)
You might have to go back to your HTML file and add <div> or <span> tags.
If you need help positioning your elements in the correct layout, search for "CSS positioning" or "easy CSS layouts". You'll find plenty of tutorials and helpers, e.g. csslayoutgenerator.com

Step 3: Checking the results

To compare the similarity of your work with the given design, open the file in Photoshop (or a similar raster graphic software) and overlay a transparent screenshot of your webpage.
Check if your markup is valid by using the W3C Markup Validation Service.
Check your file in the latest version of Chrome, Firefox and Internet Explorer. Try to archieve a matching design in all browsers. Grading will be done in the latest version of Chrome.
Make sure you are using relative paths for linking your CSS and graphic files, to ensure that your website can be viewed on a different computer as well.

Step 4: Upload

Zip your website folder (including all files necessary to view your page correctly).
Upload the zip file to TUWEL.

This is the footer. Add your name and student ID: Herbert Wotzel, 6725173.