University of Alaska Fairbanks
Geophysical Institute

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

Lab 7: HTML/CSS

Lab slides

none.

Exercise 0: Warm-up

Download these files (right click+save as):

• very basic HTML file for you to fill with contents and structure
• image file

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

• Open a webbrowser (Firefox), open the file empty_1.html in the webbrowser using the file menu.
• Make the image file you downloaded appear in your website (help: http://www.w3schools.com/tags/tag_img.asp
)
• Make this image a link to the Lab 06 website: http://www.gps.alaska.edu/programming/LAB06_matlab_io2.html
• Hint: instead of text put the img stuff inside the link tags
• Add another link to Lab 06 below the image (linebreak tag is <br />) this time with some text indicating the link.
• save this file and send it to me.

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):

• basic HTML file for you to fill with contents and structure

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:

• Line 7: You should replace the text "KEYWORDS THAT DESCRIBE YOUR WEBSITE" with actual keywords or delete this line.
• Line 11: You should replace the text "EMPTY FILE" with a title for your website. The word 'website' doesn't have to appear, it's implied by the fact that you're building a website. Keep in mind that names of HTML files and title strings are also indexed by search engines. So be creative.
• Line 17: This is the place to put your menu.
• Line 21: This is the place to put your contents.
• Line 26: This is the place to put your footer.

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):

• Some sort of header which is enclosed in <h1> </h1> tags
• A menu (in the place where it says 'the menu goes here') for which you should use an unordered list
• The menu items (list items) are going to be links:

  <li><a href="link-target">TEXT TO APPEAR AS LINK</a></li>

• If you want to link to certain passages on the same page you'll use anchors:

  <li><a href="#anchor-name">TEXT TO APPEAR AS LINK</a></li>
Here goes lots of stuff, actual content, blabla ...
somewhere in the text is the passage you wanted to anchor to, simply insert:
<a name="anchor-name"></a>


• I suggest the following rather generic menu items (use anchors): about, research projects, teaching, cv, publications

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:

• For each item in your menu list, add a h2 header, name it the same as the menu link
• Next to each of these headers, you'll put the anchor link targets as described above
• In the about section you can add some of your details in another unordered list
• Below each header you can add paragraphs with text.
• If you're working on several research projects (see generic_website.pdf), you can add more sub-headings, use h3

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:

• basic css file that allows for a two column, header, footer design like this website

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.

• THE FOOTER: set the parameter id to footer so that the last paragraph is formatted as described in the css file.
• THE MENU: set the parameter id to navigation so that this unordered list is formatted as described in the css file:

  ul#navigation {
   font-size: 0.83em;
   float: left;
   width: 12.3em;
   margin: 0;
   padding: 1em 0 0;
   display: block;
   font-weight: bold;
   list-style: none;
   color: navy;
}

• refresh the website in the browser window. Voila!
• You'll find similar definitions for the two divcontainers that I already gave you. One has the id the_page the other contents
• Now play with the parameters. It would be very easy to move the menu from the left to the right side. In the CSS file I indicate in the comments which places need to be changed. Try it! It's easy! That's why we use CSS
• Could also download this image and uncomment a line in the CSS definition for h1 that says something about backgrounds
• Play with some of the other parameters to figure out what they change. If nothing seems changed, set them back to the initial value - it might be a setting that affects other browsers.

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