Online Book Reader

Home Category

HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [358]

By Root 1314 0
them. (It’s possible to use special server configurations to allow SSI with normal .html extensions.)

♦ Servers don’t always allow SSI technologies. Not every server is configured for Server-Side Includes. You may have to check with your server administrator to make this work.

The nice thing about Server-Side Includes is the way that it separates the content from the structure. For example, look at the code for the first content block:

This code notifies the server to look for the file story1.html in the current directory and place the contents of the file there. The file is a vastly simplified HTML fragment:

Book I - Creating the XHTML Foundation

  1. Sound XHTML Foundations
  2. It’s All About Validation
  3. Choosing your Tools
  4. Managing Information with Lists and Tables
  5. Making Connections with Links
  6. Adding Images
  7. Creating Forms

This approach makes it very easy to modify the page. If I want a new story, I simply make a new file, story1.html, and put it in the directory. Writing a program to do this automatically is easy.

Like PHP code, SSI code doesn’t work if you simply open the file in the browser or drag the file to the window. SSI requires active participation from the server; to run an SSI page on your machine, therefore, you need to use localhost, as you do for PHP code.


Using AJAX and jQuery for client-side inclusion

If you don’t have access to Server-Side Includes, you can use AJAX to get the same effect.

Figure 5-2 shows what appears to be the same page, but all is not what it appears to be.

Figure 5-2: This time, I grabbed content from the client side using AJAX.

Figures 5-1 and 5-2 look identical, but they’re not. I used totally different means to achieve exactly the same output, from the user’s point of view.

The code reveals what’s going on:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

CMS using AJAX

type = ”text/css”

href = ”csStd.css” />

id = ”content1”>

id = ”content2”>

Once again, the page content is empty. All the contents are available in the same text files as they were for the Server-Side Includes example. This time, though, I used a jQuery AJAX call to load each text file into the appropriate element.

The same document structure can be used with very different content by changing the JavaScript. If you can’t create a full-blown CMS (because the server doesn’t allow SSI, for example) but you can do AJAX, this is an easy way to separate content from layout. See Book VII, Chapter 2 for more information on using jQuery and AJAX for page includes.


Building a page with PHP includes

Of course, if you have access to PHP, it’s quite easy to build pages dynamically.

The csInclude.php program shows how this is done:

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

®Online Book Reader