CISC103, Fall 2006

lab04: using Server Side Includes (SSI) to
add a common navigation header to
your 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 lab03, you turned in this into a web site with at least three pages, and hyperlinks connecting those pages.

In this lab, you'll learn how to use Server Side Includes (SSI) to create a common header for all the pages on your site, to

give it a more professional look
make is easier for users to get around your site
make it easier for you, as the web designer, to make changes

In addition to learning about SSI, you'll also learn other new concepts:

a new HTML element, namely the <div> element
learn how to set CSS properties for a particular element by its id
- specifically, you'll add an id attribute to an element, e.g. <div id="navHeader"> ...
- then, you'll specify properties using the CSS selector #navHeader

Before doing this lab, you should have completed the following:

Finished lab01, lab02 and lab03
Read Chapters 1 and 2 in Head First HTML with XHTML and CSS
- It would be helpful to have already read Chapter 3 (to understand the difference between block and inline elements), but it is not strictly essential

Detailed Instructions

Step 0: Do some background reading about Server Side Includes

I'm calling this "Step 0" for two reasons:

It isn't really part of the work for the lab—its' more like preparation.
In programming (as we'll see with JavaScript), often things are numbered starting with zero instead of starting with one. It may seem a little goofy and hard to adjust to at first, but trust me—there's a good reason for it. So, I'm just getting you used to the idea—planting a seed, so to speak.

Go to the following web directory (open it in a new window)

http://www.udel.edu/CIS/103/pconrad/06F/examples/HTML/ssi

Note that you can get to this link from the main course web page by the following navigation:

 Main course web page
 ==> More Code Examples
     ==> HTML
         ==> ssi

Once you are there, click on the file navigation.html and look at the contents. It should show up something like this:

If you do a view source on this file, you'll see that it is not a complete web page

Try it. The view source should show something like the following:

A few things to note:

This is not a complete web page—there is no<html>, <head> or <body> open tag, for example.
In fact, there is just an HTML comment (i.e. ) followed by one element, a <div> element, with some content inside it.
The <div> element means "division", and it is used for a "division" of a larger web page.
Inside the <div> element there is a header, and then a "paragraph" element of sorts, with three links in it.
The links are to the other three pages on this web site, which is a tutorial about Server Side Includes (the subject of today's lab).

A few words about <div> vs. <span> and block vs. inline

If you already know the difference between block and inline elements (from reading Chapter 3 in Head First HTML), then you will understand when I tell you that <div> is the block equivalent of the <span> element we've already seen in lecture.
<span> is, or course, an inline element, since it is used in the middle of paragraphs and stuff.
If this block and inline stuff makes no sense to you, don't worry about it for now —you'll still be able to complete today's lab.
But do worry about it once you finish the lab—if you don't understand, go read Chapter 3 in Head First HTML.
Why?
- Because some questions about "block" vs. "inline" will definitely be on the first midterm exam!

Ok. Now go back and click on the other three HTML files

Click on any of the other three files in this directory, namely:

Note that each of them has a common header, and the header looks something like this:

In fact, this common header is produced by the code inside the file navigation.html. Do a view source on any or all of the three files:

You'll see that it looks like the file navigation.html has been "cut and pasted" into each of these three files.

In fact, what happened instead is that a "Server Side Include" was used.

Instead of cutting and pasting the contents of navigation.html into each of these files, I just put one line inside each of them:

  <!--#include file="navigation.html"-->

That one line of code does a "cut and paste" into the files every time the file is downloaded from the server.

That way, if you make a change in navigation.html, it automatically gets made on all three of the web pages that "include" the contents of "navigation.html".

Spend some time to read over the content of the three pages and learn about SSI. Your task in this week's lab is to do something similar with your lab03 web site—that is, to add "common navigation" through a header at the top of each of your pages.

What about the formatting?

Note that the common header looks different when you look at it in its own browser window, vs. when you see it "included" in the other three pages.

That's because of the CSS style rule (the <style> element) inside each of those pages. Here's what that rule looks like:

 #navHeader { text-align:center;
               background-color: #ccccff;
	       font-family: sans-serif;
	       color: #ff3333;
               font-size: 80%;
	     }

It specifies that for an element with the attribute id="navHeader" (that's that the #navHeader part means), we should use a nice lavender background (#ccccff), a dark red color for the foreground (#ff3333), etc.

As the page notes, the fact that this CSS has to be repeated in three different HTML files is kind of lame. You might thing we'd use SSI to fix that problem too, but in fact there is a preferred solution—see p. 303-307 for information about that. Next week, we'll tackle that problem as well—or you can do it this week too if you feel ambitious, and get a little bit ahead of the game.

Ok, now that we understand SSIs, let's make a common header for the web site you build in lab03

That's what the rest of this lab is all about.

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 lab04 folder on the server

(If you are not sure how to do this, review the instructions from step 2 of lab02, and/or step2 of lab03. )

Step 3: Navigate to a place where you can create HTML files and make a local lab04 folder

Create a subdirectory called lab04 on the hard drive of the system where you are working where you can make the files you'll be working with this week.

(Refer to step3 from lab03 if you need more detailed instructions)

Step 4: Copy the files from last weeks lab03 folder into the folder lab04 on the hard drive.

We now are going to copy all of last week's files:

from your public_html/cisc103/lab03 folder on the copland.udel.edu server
to your new lab04 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 lab04 folder.
In the right hand window, navigate to the public_html/cisc103/lab03 folder, and you should see your index.html file, and the other two .html files you created last week. You may need to use the "up one level" button, shown below.
Drag all three files from right to left to make the transfer happen.

Step 4: Create a file called navigation.html, similar to the one on the example web site.

Follow the example, and make your own navigation.html file.

Test it out—you should be able to open it and follow the links to all three pages.

Notes:

It is ok—in fact, preferred—required even! —for your main page to have the name index.html, just like it did in lab03.
The only reason I called mine "mainPage.html" in the example, was so that you could "see" all of the pages in the directory http://www.udel.edu/CIS/103/pconrad/06F/examples/HTML/ssi/—on a real web site, mainPage.html would definitely have the name index.html.

Step 6: Add the #include SSI directive, and some CSS

Add the following into all three of your other .html files pages, just after the opening <body> tag

  <!--#include file="navigation.html"-->

Then, add a CSS rule to the style sheet on all three pages so that the element with navHeader id attribute looks nice, and has formatting that is consistent with the color scheme of your existing pages.

You can just add the rule into the existing <style> element on the pages you already have.

Step 6.5: Rename the .html files to .shtml (except the navigation.html file) and fix links

After I did the original version of the instructions, I realized that there is a difference between how SSIs work on the server www.udel.edu (where the example documents are hosted) and the server copland.udel.edu (where your web pages are hosted.)

So, for your SSIs to work, a few additional steps are needed.

Rename all of the .html files except the navigation.html file, and give them a file extension of .shtml instead of .html

For example, rename index.html to index.shtml
Rename foobar.html to foobar.shtml
etc.

Then, go into the code for navigation.html, and change all your hyperlinks to say .shtml instead of .html.

E.g. instead of <a href="index.html">Main Page</a>, you should have <a href="index.shtml">Main Page</a>

You'll also need to change any other links you have in your .html files (i.e., the hyperlinks that you made during lab03.)

If you are doing this step "after the fact", remember to copy your files back up the server again after you do it (i.e. redo Step 7)

Step 7: Transfer these file to the web, inside the cisc103/lab04 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/lab04 folder (if you are not already there)
copy all three of your files from the hard drive to the public_html/cisc103/lab04 folder by dragging from left to right.

Then, check that the web site is readable at the address http://copland.udel.edu/~username/cisc103/lab04 (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: Double check all your files for header comments

Make sure that your files all have appropriate comments in them, with your own name, date and section number, and a brief description of what your page is.

If you make any changes, 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.

Evaluation and Grading (100 pts total)

Specifications for the lab04web site

All specifications from lab03 still apply
In addition, there should be common navigation, implemented as described above, using SSIs
The common navigation header should be a single <div> element, appropriately styled using CSS

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

Grading: 30 points for the navigation.html file, 20 points each for correctly including the SSI directive and CSS in the other three web pages, 10 points for general style issues and correct submission.

Your next steps

Next step: If you haven't done so already, read through Chapter 6 in your Head First HTML textbook.

Also, read the JavaScript Notes from the Wiki

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.