Research Projects
Classes GEOS 293/393 Hawaii Field Course GEOS 436/636 Beyond the Mouse GEOS 602 Geophysical Fields GEOS 620 Geodynamics GEOS 655 Tectonic Geodesy GEOS 692 Geophys. Seminar
Current & Past Students
Student Opportunities
Curriculum Vitae
Recent Publications
Info for Surveyors
Personal Info

Climb higher, beyond the mouse...

Beyond the Mouse LAB 12: HTML+CSS

November 29, December 1, 6

Instructor: Jeff Freymueller

x7286 Elvey 413B jfreymueller@alaska.edu

TA: Matvey Debolskiy

Last Updated: November 27, 2017

Due: Wednesday Dec 6

Note that you can finish this lab off in class Tuesday next week if you need to. However, we will be using Thursday December 7 for you to show off your final projects.

Lab slides

A short summary of HTML.

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 (See the example from our demo (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 will find the basic structure necessary to make a nice 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 have your menu set up, 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 (Here is an example , 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

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 Kyle a nice looking website and all the files we would need to enjoy it!

Some useful files

A link to my own css file for the screen (right click, Save Link As... to download): jeff.css

A link to my own css file for print (right click, Save Link As... to download): print.css

Dr. Jeffrey T. Freymueller
Professor of Geophysics
Geophysical Institute
University of Alaska, Fairbanks
Fairbanks, AK 99775-7320

jfreymueller -at- alaska.edu
Phone 907-474-7286
Fax 907-474-7290
Office 413B Elvey