University of Alaska Fairbanks
Geophysical Institute

Beyond the Mouse 2010 - The geoscientist's computational chest.

Lab 7: HTML/CSS

"Programming is legitimate and necessary academic endeavor."
Donald E. Knuth

Lab slides

none.

Exercise 0: Warm-up

Download these files (right click+save as):

Open the HTML file in a text editor (notepad). Remove the comment in Line 11. This is the place to put your contents:

Exercise 1: HTML - Creating the document structure (Solution (It's a website, use right-click+save-as to save))

Download this file (right click+save as):

Open the file in a text editor (notepad) and save it as index.html. This way you keep the empty file as a template for future projects. Inside index.html you find I give you the information necessary to make it a webpage. There are certain parts that need your attention, though, before you go any further:

Starting from this empty template, we'll create something that's similar to this document: generic_website.pdf

Add the following elements to your website (open the file index.html in a browser window and episodically refresh to see what it looks like on the screen):

Now you got your menu set up (yay!), but nothing yet that it links to (if you click on any of the menu items in the browser window, nothing will happen). Here's what you'll do:

Add another paragraph in the place that contains the footer comment. A footer can contain brief contact information, site update information, etc. You've seen them.

Exercise 2: CSS - Changing the design (Solution HTML, CSS)

Well, we have a website that looks rather 90's but is well structured. We should, however, do something to the design. Download this file (right click+save as) to the same directory as your index.html:

We have to make just a few slight changes to our structure document to make it look like this: generic_website_css.pdf (see how it would be useful to have the css set to medium "screen" then not as much space would be wasted in the pdf, but you'd also not see what you're supposed to create ... )

Quite a bit is already prepared for you which you'll see when you open the CSS file in a text editor. Here's the big secret on website design questions: secret. Grab a template that looks good to you and modify it until it fits your taste.

Have fun! Send me a nice looking website and all the files I would need to enjoy it!

ronni <at> gi <dot> alaska <dot> edu | last changed: October 28, 2010