CALS 85/002 Lab: Updating your Web Page
using Cascading Style Sheets (CSS)

FIRST: How to copy a file using AIX on zoo:

On zoo use the cp command to copy your web page into a new page, so you have the option of updating your home page without changing the Lab 7 web page. Be sure to change directories after you log in to zoo:

cd public_html

Then issue the command to copy your web page file from last week (lab7.html) into a new file called lab8.html:

cp lab7.html lab8.html

How to make links:

The basic tag for links looks something like: <a href=http://www.destination.site.dom>Click here to go to Destination Domain</A>

If the link you want to make is to a file in the same directory on the server (your public_html directory for example) the tag's address only needs to have the file name: <a href=file.html>Click here to go to file.html</A>

If you want to make a picture "hot" (see example below) so that clicking on it will go to that link: <a href=http://www.somewhere.com><img alt="NASA Logo" src=picture.gif></a>

Two ways to make an e-mail link:

<a href=mailto:youremail@uvm.edu>Send me e-mail</a>

<a href="http://www.uvm.edu/talk_to_us/?email=Jonathan.Leonard%40uvm.edu" id="contactus" name="contactus">Contact Jonathan Leonard</a>

How to take a text file and turn it into a web page:

The tag <pre> can be inserted above and below a large text file if you wish to preserve the format of the original text. You still should have the regular tags at the top and bottom of the page. The complete tag set might look something like:

    <html>
    <head> <title> pre tag example </title> </head>
    <body>
    <pre>
    Here is where the large text file
    would be inserted.
    </pre>
    </html>

How to create a table:

Here is a table:

Relationship Between Global Surface
Temperature and Weather Damage, World-Wide. Data Source: Vital Signs 2000, 2001, Worldwatch Institute
Year	Billions of Dollars Lost	Global Temp C
1980	2.80	14.18
1981	13.30	14.30
1982	3.40	14.09

Here's the code that created the table above:

<table border="1" width="30%" bgcolor="#99FF99" >
<caption>Relationship Between Global Surface
Temperature and Weather Damage, World-Wide. Data Source: Vital Signs 2000, 2001, Worldwatch Institute</caption>
<tr>
<td>Year</td>
<td>Billions of Dollars Lost</td>
<td>Global Temp C</td>
</tr>
<tr>
<td>1980</td>
<td>2.80</td>
<td>14.18</td>
</tr>
<tr>
<td>1981</td>
<td>13.30</td>
<td>14.30</td>
</tr>
<tr>
<td>1982</td>
<td>3.40</td>
<td>14.09</td>
</tr>
</table>

Making your files public on zoo:

chmod 644 *.* The "chmod" means "Change Mode". The next three numbers refer to the Owner, that's you (6); the group (4); and everyone else (4). The Permission numbers as follows:

Permission Number Meanings:

0 No Permission at all
1 Execute Only
2 Write Only
3 Write and execute
4 Read only
5 Read and execute
6 Read and write
7 Read, write, and execute

By typing 644 *.* when you are in your public_html directory, you are giving yourself Read and write permission, your group and everyone else read only. This way only you can change the files in your public_html directory. If, for example you wanted to make the file MINE.HTML so that only you can see or edit a file, then:

chmod 600 MINE.HTML

Using Cascading Style Sheets (CSS):

The content of the web page is saved in the html file, but the formating style is saved in the stylesheet file (ex. stylesheet1.css). The stylesheet file must be in the same directory or folder as the .html file

The content of the stylesheet for this lab's web page is:

body {background-image: url(""); 
background-color: aqua}
h1 {color: blue; font-family: Arial;}
h2 {color: black; font-family: Arial;}
h3 {color: red; font-family: Arial;}
p {font-size:12pt; font-family: Arial; margin-left: 15px}
a:link        {color:blue}
a:visited  {color:cyan}
a:hover    {color:black}
a:active   {color:aqua}

In the head tag of your html file, make a link to the stylesheet as follows:

<link rel="stylesheet" type="text/css" href="stylesheet1.css">

So, for example, the head section of this web page is:

<head> 
  <link rel="stylesheet" type="text/css" href="stylesheet1.css">
  <title>CALS 85/002 Lab 8 Web Page 2</title>
</head>

Resources:

W3.org HTML Reference:

http://www.w3schools.com/html/default.asp

CSS Introductions and guides:

http://www.w3schools.com/css/default.asp is a great tutorial that will lead you through all the options.

ASSIGNMENT:

Make a copy of your original web page from last week in your public_html directory on zoo. Expand the copy of your original web page so you keep the lab 7 web page separate from this lab 8 assignment. The expanded lab 8 style formats should be saved in a stylesheet file. Your expanded lab 8 web page should have a minimum at least three links to other pages outside UVM, at least four images, an e-mail link, and a link to your resume page. Your page should also contain a table. Your resume page must have a link back to your lab 8 page. Add the DATE your page was last updated at the bottom of your page. Hand in a printout of the webpage itself (include the ZOO URL) and a printout of the HTML code (30 points), and a printout of the stylesheet file. Type the tags yourself. Do not use an HTML editor! See: This example of what Lab 8 might look like.

CALS 85/002 Lab: Updating your Web Page using Cascading Style Sheets (CSS)