Effective content delivery invariably depends on how this content is organized, and presented. Templates represent a standard framework for sections of a website. A good template provides consistency and flexibility. For example, all leaf pages on this site have a consistent look and feel while providing features required by different types of content. Many sites use one template across all of their content, here, the front page is notably different. Even the front page however uses the same styles present across the rest of the site.

There are a number of tools already available that use templates and help the user create an online presence while hiding most technical details. This tutorial will guide you through some steps of template creation.

A good way to start a template is with the core HTML code.

Every page will have this basic structure as required by the HTML standards. From this point on the page design will be added to the template.

The code examples above use two different W3C standards. One, XHTML is a very recent recommendation, it is the current standard for HTML. The other is an older version of HTML, version 4.01, and even then, the example uses 4.01 Transitional rather than Strict document type. The reasoning for this is simple. HTML 4.01 Transitional allows for HTML 3.x syntax while it also includes the new features of version 4.01. This makes site composition very easy. HTML of those versions is easy to learn, and is certainly much easier and exponentially better documented than XHTML 1.0 Strict. Having said that, we cannot simply ignore the current standards, hence there are samples in the newer version of HTML as well. One more thing to consider is support in browsers for web standards. As an author you can be confident that HTML 4.01 is well supported by a wide range of browsers on many platforms. With XHTML the support is less wide spread and is not yet complete or consistent across different software products.

There are two paths to follow when creating page layout. One is to use no style information in the template and put it instead into a separate file. The other, easier path is to use the earlier HTML standards that have style information together with the structure and the content of the page. One example of the difference between these two approaches is use of tables for layout rather than div elements.

Combining code examples two and three will make a HTML 4.01 page that will validate properly. Alternatively, using code samples one and four, then putting the source from code sample five into style.css will generate a page largely similar to the first one. The new page however will validate as XHTML 1.0 Strict. One significant difference between the two is that style information is external to the html file, it is contained in style.css.

Before continuing with our discussion on templates, let us look at various ways on integrating style data with the html document. Firstly, it is possible to link the style sheet to an html document as examples above do using the link tag inside the document header. Secondly, it is allowed to include the CSS information inline inside the document header as follows.

CSS also supports an import function. This allows style sheets to incorporate information from other CSS files. This method can be used in stand-alone css files as well as inside the style tags in the page header.

Lastly, CSS styles can be included inline with the element using the style attribute.

Code example 8 will create an element with style of the page class from style.css. There are benefits to including the CSS code externally from the html pages. This way it is easy to change the source in one place and affect all pages using this style sheet.

One oft-omitted and under-used feature of CSS2 is its ability to define information for different types of media. For example it is possible to define object properties for layout on screen and different properties for layout on paper or handheld device. The W3C has more information on this. This functionality is useful because it eliminates the need for maintaining multiple pages for different purposes. Many sites provide a printer friendly version which is a separate page. Instead, by using media types defined in CSS2, the webpage can automatically render to the printed page if the proper information is provided. This is also a usability benefit for the user since any page can just be printed.

The are three ways of utilizing the media directive. It can be appended to the import statement, it can be set as an attribute in the html link tag in the header, or it can be used to group css attributes in the css file itself. Also note that when linking stylesheets for non-screen media, the title attribute should not be included as it is in code samples 1 and 2.

Once a sample page has been created, it can be used as a template for future site content. Here is the sample page for this site. It demonstrates some of the features of the template. It was the first html page to be created and all subsequent pages were based on it. It may be useful to set file attributes on the template page as read-only to prevent accidental overwriting.

W3C is the place to get all the specifications for standards you might be using (XHTML, CSS2). The XHTML reference there is not very good, you can either opt to read the DTD itself, or look at W3 Schools tutorial on the topic. W3C also provides validation services for HTML and CSS, however many editors already support this internally.

As a natural outcome of site evolution, the design and therefore the templates will change over time. Because the style information is largely separate from the page content many changes are possible via modification of just the style sheets. More sophisticated changes will require changes to each individual file however. This process is time consuming and error prone. There are ways of solving this problem using XML and dynamic page generation. This topic will be covered soon.

Another benefit of templates is that they make it possible to deliver same content to different devices. The same page can be very readable on a full-fledged desktop or on a handheld device through use of appropriate style sheets.

Templates are a powerful tool to help publishers simplify their work, it need not be completely manual however. Dreamweaver, at least in their recent versions, supports templates as does FrontPage. I have no experience with either of these packages and cannot provide any further information.

Advanced templates with XML, introduces concepts in XML and discusses XML templates. It is now online.

Basic SEO techniques discusses search engine optimization - methods for getting your site to rank high on various search engines for particular topics.