CISC103, Fall 2007

lab05: expanding your web page
into a web site

Goals

In lab01, you learned how to create a basic .html file, and upload it on to the web server for student web pages at UD, namely copland.udel.edu. In lab03, you learned how to make a basic web page, complete with headers, title, content, and some very basic CSS to give it style (e.g. choosing colors for the different levels of headers, etc.)

In this lab, you'll take the web page from lab03, and turn it into a web site with

(at least) three pages
relative links from the main page to the other three pages
at least one absolute link to a page on some other web site

You'll learn how to:

create hyperlinks with the <a> element
use the href attribute to specify the destination for the hyperlink

You'll also get more practice with using

basic HTML elements (e.g. <h1>,<h2>, <p>), and
basic CSS properties (e.g. color, background-color)

Before doing this lab, you should:

Read Chapters 1, 2, 3 and 4 in Head First HTML with XHTML and CSS

Detailed Instructions

Step 1: Use the SSH Secure Shell program to access copland.udel.edu

Open up the SSH Secure Shell program, and use the "Quick Connect" button to access your account on copland.udel.edu, and bring up the Unix prompt.

By now this step should be familiar, but if you need a reminder, consult the previous labs for instructions.

Step 2: Navigate under public_html/cisc103 and create a lab05 folder

Now type the unix command to move into your public_html/cisc103 folder, and create a new folder called lab05.

Here's the Unix commands you will need (note that being able to come up with these commands could be a question on the exam):

copland.udel.edu% cd public_html/cisc103
copland.udel.edu% mkdir lab05
copland.udel.edu% cd lab05
copland.udel.edu% pwd
/home/usra/d9/55560/public_html/cisc103/lab05
copland.udel.edu%

If you need help with this step, review the instructions from step 3 and step 4 from lab04

Step 3: Copy your lab03.html file into your new lab05 folder

We are going to copy the lab03.html file into your lab05 folder with a Unix command.

The lab03.html file is probably stored in the directory ~/public_html/cisc103. We can check that by typing:

copland.udel.edu% ls ~/public_html/cisc103
lab03.html    lab05   
copland.udel.edu%

Since the directory ~/public_html/cisc103 is also the parent directory of our current directory, we can also see the lab03.html file this way:

copland.udel.edu% ls ..
lab03.html    lab05   
copland.udel.edu%

So, we can copy that file into our current directory, ~/public_html/cisc106/lab05, with this command:

copland.udel.edu% cp ../lab03.html .  
copland.udel.edu% ls
lab03.html
copland.udel.edu%

Now we can rename lab03.html to index.html. That will allow us to bring up the file by simply typing http://copland.udel.edu/~userid/cisc103/lab05 in the browsers address bar. We use the Unix mv command to do the renaming:

copland.udel.edu% mv lab03.html index.html 
copland.udel.edu% ls
index.html
copland.udel.edu%

Now we still need to make the files readable. We can make both the current folder and all the files in it readable with the following useful command:

copland.udel.edu% chmod -R 755 . 
copland.udel.edu%

Now we should be able to visit http://copland.udel.edu/~userid/cisc103/lab05 (changing userid to your user id) and see a copy of the work we did from lab03. That will be our starting point for lab05.

Step 4: Decide on filenames for your web site

In lab03, you made a page with a list of three items on it—e.g. three ski resorts, three Justin Timberlake albums, etc.

In this lab, you are going to make three more pages for your web site. Each of these three pages will correspond to one of the items in your list.

The main page should be called index.html. The names of the other three pages are up to you.

The main page will link to the subpages, and the subpages will have at least one link somewhere on them back to the main page.

Below are some examples of names. Come up with names appropriate to your site.

Web Site Topic	Description	Main page name	First subpage Name	Second Subpage Name	Third Subpage Name
Hiking Trails	main page links to three pages: a page with information on trails, a page with hiking safety tips, and a page on where to buy gear.	index.html	trails.html	safety.html	gear.html
Paintball Games	Main page has a list of paintball games; names of individual game link to pages with rules of the game	index.html	captureTheFlag.html	assasination.html	foxAndHounds.html
Snowboard Shop	main page has a list of merchandise categories; each category name links to a list of specific items in that category	index.html	boards.html	womensClothing.html	mensClothing.html
etc...

Step 5: Create the other three pages, and edit the page that you renamed.

This step is straightforward. However, you have a choice.

Edit directly on server with emacs, or use Notepad/TextEdit and do file transfer?

In lab01 and lab03, we created files on the PC's hard drive using Notepad (or TextEdit if you are working on a Mac), and then used a file transfer program to copy the files on to the server

But in lab04, we learned how to use emacs to edit files directly on the server.

For this lab it is up to you which method you use.

Edit the index.html file to add links to the three other pages.

Use <a> elements with the href attribute to link the pages together. For example, consider the hiking trails example:

The main page, index.html, will contain at least three links to other pages with relative addresses:
- <a href="trails.html">Hiking Trails</a>
- <a href="safety.html">Safety Tips </a>
At least one of the pages should also have a link to some external page with an absolute URL, e.g.
- <a href="http://www.destateparks.com/wccsp/">White Clay Creek State Park</a>
If your links are also headings, nest the <a> element inside the heading element, e.g.
- <h2><a href="trails.html">Hiking Trails</a></h2>
If your links are "inline text", just link the works that you want to link, e.g.
- Here are some important <a href="safety.html">safety tips</a>.
Avoid the phrase click here—this is considered a no-no in good web design
- Poor style: Click <a href="specials.html">here</a> for our weekly specials
- Better style: Check out our <a href="specials.html">weekly specials</a> for some great bargains.
The three subpages should both have links back to the main page, e.g.
- <p>Return to the <a href="index.html">main page</a>.</p>
- That link could be a <p> element or an <h2> or <h3> element, as you see fit.

Add some style

All of your pages should use CSS so that they have a little style—some colors and fonts would be nice. You can look ahead to later chapters in the book, and/or use the web to learn more about the various CSS properties you can use.

The following web site might be particularly helpful

Step 6: Make your files readable on the web

To make your files readable, you can either use the following Unix command:

copland.udel.edu% chmod -R 755 ~/public_html/cisc103/lab05

or, you can use the SSH File Transfer program, and individually click on each file separately to modify its permissions (following the example from lab01).

In any case, check that the web site is readable at the address http://copland.udel.edu/~username/cisc103/lab05 (substituting in your username in place of username), and that you can navigate between and among all four of the pages on your site.

Step 7: If you didn't already, add header comments to your file

Add a comment into all four of your HTML files similar to this one, following the opening <html> tag but before the <head> tag. Substitute your own name, date and section number, and a brief description of what your page is (mine is hiking trails, but yours could be ski resorts, pizzas, ways you can help the homeless, or whatever you chose as a topic).

After you add the comments, refresh your browser, and do a "view source" to make sure that the comment shows up in each file.

Note that the ... at the end of each file indicates that the file continues beyond that point. It is not actually part of the content.

<html>
  <!-- index.html   John Smith for CISC103, section 011, 09/06/2007
       a page for a local hiking club  -->
  <head>
    <title>Newark Hiking Club</title>

...

<html>
  <!-- trails.html   John Smith for CISC103, section 011, 09/06/2007
       a page of trails linked to directly from the main page -->
  <head>
    <title>Newark Hiking Club--Trails</title>

...

And that's it! You are finished with lab05.

Some Common Mistakes (and how to avoid them)

Here are a few mistakes that students in past semesters have made, and how to avoid them.

If you are using Wordpad, Notepad, or TextEdit to edit your files, remember to copy...

If you are making changes to files using the local editor on your PC (as opposed to using emacs directly on the server), then be sure after you make your changes in Wordpad or Notepad, copy the files AGAIN with the ssh secure file transfer program. Refresh your browser, and do a "view source" to make sure that your change shows up in each file.

(If you edit directly on the server using emacs, you avoid having to take this step.)

Be sure it is the version on the web that are you looking at, and not a local copy

Be sure that when you you are checking your work, you are looking at a copy on the server.

The URL in the address bar of the browser should be something like
http://copland.udel.edu/~yourusername/cisc103/lab05

It should NOT be something like
file:///C:/Documents%20and%20Settings/pconrad/Application%20Data/SSH/temp/fireworks.shtml

If it is the second kind of URL, this is a major danger sign. You are looking here at a "temporary" file on the hard drive of the PC. This file is not on the web, and your instructor will not be able to see it—in fact it will disappear forever after you logout of the PC, or restart your computer!

If you get this kind of file in your browser's address bar, it probably means that you double clicked in the right hand side of the SSH File Transfer Window, instead of dragging files from side to side. If this is happening, ask your instructor or TA for help in how to use the SSH Secure File Transfer window properly.

Evaluation and Grading

Specifications for the `lab05` web site

A site with one main page and (at least) three other pages should be readable on the web at the student's web page at http://copland.udel.edu/~username/cisc103/lab05
(be sure this is all lowercase!)
The main page should link to three other pages using relative links—those pages should link back to the main page.
Each of the pages should have a "reasonable" amount of content, similar to the examples in the textbook for the "Starbuzz" coffee shop. They don't have to be huge—they just need to illustrate the ideas of building a web page.

The following applies to all HTML files:

All HTML files should consist of a single html element, that has two nested elements inside it, a head element, and a body element.
There should be a comment  inside the html element, but before the <title> element, with content as explained in the instructions above.
The head element should contain a title element, and a style element.
The style element should have the attribute type="text/css"
The body element should contain the content of the web page from lab03, or similar content.
The style element should contain CSS markup similar to that on p. 30 of the text, but with a different background-color value for the body element, and with rules changing the foreground color (i.e. the color property) for h1 and h2 elements.
If you want to add some extra stuff, fine. Just be sure that all of your tags are properly nested (i.e. matching open and close tags).

There is nothing to "turn in" or submit on WebCT we'll just check your page on the web.

Grading: 100 points

step	what we're looking for	points
step5	The new index.html page (http://copland.udel.edu/~username/cisc103/lab05/index.html) File exists, is readable on web, and is named correctly? (10 pts) File has correct content (10 pts)	20
step5	The three other .html pages (Each is http://copland.udel.edu/~username/cisc103/lab05/___.html) File exists, is readable on web, and is named correctly? (30 pts—10 pts each ) File has correct content (30 pts—10 pts each )	60
overall following of directions	student should follow good style, following examples from the textbook, and from previous sample code from labs and lectures	10
overall following of directions	student should follow the directions given	10
Total

Your next steps

Next step: Read through Chapters 5 and 6 in your Head First HTML textbook.

As you read, you may like to try the examples online. Send me email if I can help in any way, and cc your TA.

Copyright 2007, Phillip T. Conrad, CIS Dept., University of Delaware. Permission to copy for non-commercial, non-profit, educational purposes granted, provided appropriate credit is given; all other rights reserved.