CISC103, Fall 2006

lab03: explanding 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 lab02, 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 lab02, and turn it into a web site with

(at least) three pages
relative links from the main page to the other two 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 destinition 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 and 2 in Head First HTML with XHTML and CSS
Do the exercise from lecture on 09/12, and have your marked up "back of the napkin" ready to go. (Folks in the Thursday lab got photocopies of these back immediately on 09/12—the rest of you can get them back from me in Thursday's lecture).
- This exercise asked you to think about a web site with three pages on it—what the basic content of each page would be, and how they would link together.
You may also want to consult the lecture notes for 09/07, where I've posted some feedback on common problems I found when going over your papers from the "marked up back of the napkin" exercise for 09/05

Detailed Instructions

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

Open up the SSH Secure File Transfer program, and use the "Quick Connect" button to access your account on copland.udel.edu

If you are not sure about how to do this, consult step 6a of lab01
If you don't have SSH Secure File Transfer on your own PC, you can download it from udeploy.udel.edu

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

(If you need help with this step, review the instructions from step 2 of lab02).

In the right hand window (the one on copland.udel.edu)

First, double click to open up the public_html folder.
Then double click in the cisc103 folder. You should then see your lab02.html file listed.
Then, make a new folder called lab03. (The instructions from step2 of lab02 will show you where to click to do this.)
Make sure your new directory lab03 is readable for web users
- To do this, right click on it and check the properties. You want the "permission mode" to be 755.
- If the permission mode isn't 755, change it to 755. If you aren't sure how to do this, consult step 6e of lab01
- To double check that your new directory is readable, go to the web page http://copland.udel.edu/~username/cisc103/lab03/ (substituting in your username in place of username). You should see an empty directory.

Step 3: Navigate on the Windows Desktop to a place where you can create HTML files

If you are in the Memorial 028/033 lab, go to the H drive, and to the folder with your name that you created in lab01.

If you did lab01 at home or somewhere, else, refer to the instructions for step 2 of lab01 for instructions on creating your own personal folder on the H drive in Memorial 028/033.

If you are at home:

Navigate to a folder on your hard disk where can create work for CISC103. I suggest you make a folder called cisc103 somewhere on your hard drive. Once you are in that place, create a folder for lab03. It will be easier to manage your files if you create a new folder for each new lab, and do all your work inside that folder.

Step 4: Copy last week's lab02.html file into your new lab03 folder on the hard drive.

We now are going to copy last week's lab02.html file

from your public_html/cisc103 folder on the copland.udel.edu server
to your new lab03 folder on the hard drive.

To do this:

In your SSH Secure File Transfer window, navigate in the left window (the hard drive window) to your newly created cisc103/lab03 folder.
In the right hand window, navigate up one level (using the button indicated in the picture below). You should be in the public_html/cisc103 folder, and you should see your lab02.html folder
Drag it from right to left to make the transfer happen.

Step 5: Decide on filenames for your web site, and then rename your lab02.html page.

Before you do this, you need to decide on the names of the pages you will have on your web site. In class on 09/12, you designed a site "on the back of a napkin" with a main page, and (at least) two subpages. Now you need to give them names.

The main page should be called index.html. The names of the other two 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. Once you've decided on the names of your three pages, you need to rename lab02.html to be whichever of the three names is most appropriate.

Web Site Topic	Description	Main page name	First subpage Name	Second Subpage Name
Hiking Trails	main page links to two pages: a page with information on trails, and a page with hiking safety tips	index.html	trails.html	safety.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
Fall Bash '06	main page has a list of bands that will be playing at an event	index.html	motionCitySountrack.html	takingBackSunday.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
etc...

Step 6: Create the other two pages, and edit the page that you renamed.

This step is straightforward. You want to use the skills you practiced in lab01 and lab02 (editing in notepad or wordpad) to create your three web 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 two links 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 an 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>.
The two 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.

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. Also,

The following web site might be particularly helpful

Once you've finished typing in the HTML, save your work, and check your documents by opening it in the web browser using "File|Open File" in Firefox, or "File|Open..." in Internet Explorer.

You can refer to step 4 and step 5 of lab01 for instructions if you are not sure how to proceed.

Step 7: Transfer this file to the web, inside the cisc103/lab03 folder, and view it on the web

Using the SSH Secure File Transfer program again do the following (consult step 6 of lab01 if you are not sure how)

do a quick connect to copland.udel.edu (if you are not already connected)
navigate in the left window to the folder on the hard drive where you are keeping your files for lab02
navigate in the right window to the public_html/cisc103/lab03 folder (if you are not already there)
copy all three of your files from the hard drive to the public_html/cisc103/lab03 folder by dragging from left to right.

Then, check that the web site is readable at the address http://copland.udel.edu/~username/cisc103/lab03 (substituting in your username in place of username).

If it is not readable, check the properties on the folder lab03, and the files inside it, as before. The folder permissions should be 755 and the file permissions should be either 644 or 755 (either one will work.)

Also, look at how the page displays, and whether all the links work. If anything is not right, fix it.

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

Add a comment into all three 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 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 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/2006
       a page for a local hiking club  -->
  <head>
    <title>Newark Hiking Club</title>

...

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

...

Evaluation and Grading (100 pts total)

Specifications for the lab03 web site

The file should be readable on the web at the student's web page at http://copland.udel.edu/~username/cisc103/lab03
(be sure this is all lowercase!)
The main page should link to two 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 that was marked up "on the napkin" during lecture on 09/05, or similar content (for those who missed the lecture, see your instructor to make up this exercise).
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). And for now, stick to what you can accomplish with hand editing with Notepad (or a similar tool such as WordPad, or on the Macintosh, TextEdit).

Due date: This is "due" on 09/26/06 by 11:55pm. There is nothing to "turn in"... we'll just check your page on the web.

Grading: 30 points for each of the three web pages, 10 points for general style issues and correct submission.

Your next steps

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

As you read, consult the online reading notes

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 2006, 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.