Website antics today; problem with SSI (server-side includes) already solved

While keeping up my drawing and painting skills, I'm also making progress on a website that serves as a sample of my HTML skills. The site (of course still in progress) is patiostudioproductions.biz.

My notes below are shared for people who may have the same problem I had with using server-side includes in my HTML files.

Today I worked with server-side includes for the first time in my life.

SSIs allows repeating elements like navigation bar and footer to be created once, and included in every page. My web host Freehostia.com allows SSIs and now that I've got it working, I'm grateful because apparently not all web hosts allow it.

It's an alternative to using templates like you find in fancy software like Dreamweaver. I don't use Dreamweaver so I can't use templates. There are other alternatives such as using PHP but I'm not aware of how to do that yet, so SSI is my faithful companion for having consistent repeating elements in all my pages.

Here's the line that includes my navigation bar to appear in all the pages at patiostudioproductions.biz:

!--#include file="navbar.htm" --

While following along in my big Missing Manual: Creating a Website book, my nav bar wasn't working correctly. My nav bar links would show up as the expected list of pages, but each link would go to a 'page is missing' notice.

I thought I did everything absolutely correctly.

It turns out, I did, and here's how an error creeped in without my awareness.

First of all I'm using a Mac. I use Blue Griffon as my HTML editor, and TextEdit for editing CSS pages.

To work with a SSI, I needed to create a separate HTML file for the navigation bar information - just three links that go to 2 pages and 1 bookmark in my site. Previously I copied and pasted the links into every page. I inserted the #include statement shown above.

At that point, links showed up but were leading to error pages.

I looked at the navbar.htm file closely. Just three links. No problem there, I thought.

I compared my two pages line by line and noticed a missing DIV tag. So that helped a little. When I manually typed in the address of the page, it looked a little weird to my surprise, but putting the missing tag in solved THAT problem.

Still, my nav bar wasn't working.

Again I looked at the navbar.htm file in TextEdit. The reason I needed a plain text editor for this is that Blue Griffon automatically places HTML and BODY tags, etc in the file whether you like it or not. Files that are going to be #include'd mustn't have those tags, so I created it with my Mac's basic text editor, TextEdit. To edit the file without introducing any tags or text formatting elements, I found the best solution was to simply rename the file as navbar.txt each time to open it in text mode (rather than RTF document mode). Then, just before uploading, I'd rename it as navbar.htm.

I had opened and closed the navbar.txt file several times, trying to make sure I had no spelling mistakes, etc., since it wasn't looking right once uploaded.

See if you can see the problem.

There's a problem there alright...but I've never noticed it before in other contexts!

Version A

Version B

One works, and the other doesn't. Which one is the correct one? Interesting, huh?

Well...maybe you noticed the error much sooner than I did. It's the quotation marks. Version A works. Version B doesn't recognize the Home link because the file name isn't technically surrounded by quotation marks. Just after the file name on the 2nd line, the closing quote mark is the curvy/slanted style used in word processors. When I copied and pasted the straight up-and-down style quote marks from elsewhere, the file worked perfectly.

If only I'd known. I wasted an hour copying and pasting before I noticed this finicky problem.

Now look at A versus B again. 

Those curvy quotation mark stands out in version B now!

As I said at the beginning, I'm sharing this to help people in a similar circumstance solve the problem quicker than I did.