Note: I strongly suggest you view all our videos in full screen mode: click the icon
in the lower right corner of the video area (it shows four arrows pointing
to the corners of the screen). When you are done, the Esc ("escape") key
returns you to regular mode.
Note: Below I've chosen to use the term "directives" to identify SSI statements in order to
distinguish them from HTML statements.
Hands on exercise
This exercise focuses on these objectives:
Retrofitting our existing solution files (index.html and tripsite.html) to use server side includes
Note that from now on, all page names should end with .shtml
This involves creating several include files, then modifying index.html and tripsite.html to use these files
Using a supplied file ("shtml_starter.txt") to create a couple of new pages
First, create some include files based on your current pages:
TNFstartPage.txt comprised of:
A doctype statement
A copyright statement (optional)
An <html> start tag with a language specified
A <head> start tag
A <meta> statement for the character set
Links to the workStyles.css and photos.css files
TNFafterHead.txt comprised of:
A </head> end tag
A <body> start tag, with "class=back"
TNFtripBox.txt comprised of a <p> tag with class=norm containing:
A link to the tripsite home page (that is, to itself, tripsite.shtml)
A link to a page about the Style of the trip (tripStyle.shtml)
A link to a page with the Detailed itinerary (itinerary.shtml)
A link to a page with the Prices for the trip (prices.shtml)
A link to a page that provides a Plot summary of the novel (tripPlot.shtml)
A link to a page for people to Sign up to go on the trip (signUp.shtml)
TNFendBox.shtml which contains:
All lines in index.html after the </div> end tag for the element
with class=contentColumn, to the end of the file
Use #config and #echo directives to display the copyright year
Use #config and #echo directives to display the last-updated date
Important Note: this file must have an extension
of ".shtml" so that the #config and #echo directives are looked for
Second, upload these files to your server
Third, update index.html as follows:
Replace the lines up to your <title> element with an include directive for TNFstartPage.txt
Leave your <title> element as it was
Replace your </head> end tag and your <body> start tag with an include directive for TNFafterHead.txt
In your links box, after the <p> element containing the internal links, add a new <p> element
with a link to "SuggestionBox.shtml" with text "Suggestion Box"
Replace all lines after the </div> element end tag with class=contentColumn, with an include directive for TNFendBox.shtml
Rename the file to end with ".shtml"
Upload the renamed file to your server
Test index.shtml to ensure all the links work (Well, the link to SuggestionBox.shtml won't work until after
you've completed the fifth step in this exercise)
Fourth, update tripsite.html as follows:
Replace the lines up to your <title> element with an include directive for TNFstartPage.txt
Leave your <title> element as it was
Replace your </head> end tag and your <body> start tag with an include directive for TNFafterHead.txt
The <div> element with class=sidePanelContents should contain:
A <p> element with class=norm10 and a link to the Activities home page (i.e.: index.shtml)
An include directive for TNFtripBox.txt
The remainder of the navBoxes <div> element remains unchanged
Replace all lines after the </div> element end tag with class=contentColumn with an include directive for TNFendBox.shtml
Rename the file to end with ".shtml"
Upload the renamed file to your server
Fifth, use the supplied file "shtml_starter.txt" to create a new page, "SuggestionBox.shtml"
Note that "shtml_starter.txt" expects TNFstartPage.txt, TNFafterHead.txt, and TNFendBox.shtml to be available
Merge the lines in "suggestionStyles.txt" in to your workStyles.css (copy and paste, put in alphabetical sequence)
Upload the updated workStyles.css to your server
Create an include file named "Webmaster.txt" with a name (yours or a made up one) as the only content; upload this to your server
Create an include file named "Webemail.txt" with an email address in it (yours or a made up one); upload it to your server
Open shtml_starter.txt and save it as SuggestionBox.shtml
Delete the first line (the comment)
Replace the value in the <title> element with "Feedback"
Delete the line containing "**sub_topic"
After the line containing <div> with class=contentColumn, insert an include directive for "suggest.shtml"
Save this updated version of "SuggestionBox.shtml" then upload it to your server
Test that the link from index.shtml works and that SuggestionBox.shtml displays as you would like.
(Note that the form submission will not work yet)
Sixth, use the supplied file "shtml_starter.txt" to create a new page, "signUp.shtml"
Open shtml_starter.txt and save it as signUp.shtml
Delete the first line (the comment)
Replace the value in the <title> element with "Trip sign up"
Replace the value "**activities_page" with "Sign up to join our trip to ...
Remove one of the <br> elements after this text
Replace the value "**sub_topic" with "Wales, following: 'Welsh Rarebit Gone'"
Replace "**Links" with "Links for trip"
The include file= should be "TNFtripBox.txt"
In the contentColumn DIV element, replace the blank lines with an include directive for "signUpForm.txt"
Save this updated version of "signUp.shtml" then upload it to your server
Test that the link for "Sign up to go" works.
(Note that the form submission will not work yet)
Supplemental materials
A cumulative summary of the contents of this course so far:
Click here
For a combined cumulative summary of both Web courses so far,
Click here
Email us
if you would like additional information.
We would love to see your comments and
recommendations for our site.
Our privacy
policy: we use cookies to keep track
of where you are on the site, but we do not
leave cookies on your site; we do not track
your visits; we do not disseminate any
information about you because we do not
gather any information about you.