Web Site Template

Web Site Template Examples

Examples of web site templates in HTML

HTML document with a site template

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/site-template.xsl"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Example Only</title>
   </head>
   <body>
      <p>Hello World!</p>
   </body>
</html>

Web site template example

The template code is stored in a separate .xsl (extensible style sheet language) file. For the example code above, the file is located in the document root directory of the web server (/) and is named site-template.xsl.

<xsl:stylesheet version="1.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   xmlns:html="http://www.w3.org/1999/xhtml"
   xmlns="http://www.w3.org/1999/xhtml"
   exclude-result-prefixes="xsl html"
>
 <!-- Copyright 2011 Accilent Corp. Permission to use granted. Provided AS IS, no warranties. -->
 <xsl:output method="xml" version="1.0" omit-xml-declaration="no" indent="yes" doctype-system="about:legacy-compat"/>

 <xsl:template match="/">
 <!-- removes stylesheet processing option -->
  <xsl:copy>
   <xsl:apply-templates select="*"/>
  </xsl:copy>
 </xsl:template>

 <xsl:template match="/html:html/html:body">
  <xsl:if test="not(.//html:header[@id='top-header'])">
   <xsl:call-template name="top-header">
    <xsl:with-param name="style" select="'background-color: #aaffbb'"/>
   </xsl:call-template>
  </xsl:if>
  <xsl:copy>
   <xsl:apply-templates select="@*|node()"/>
   <footer id="page-footer">
    <nav>
     <a href="/contact-us.html">My Contact Info</a>
    </nav>
   </footer>
  </xsl:copy>
 </xsl:template>

 <xsl:template match="html:header[@id='top-header']">
  <xsl:copy>
   <xsl:apply-templates select="@*"/>
   <xsl:call-template name="top-header">
    <xsl:with-param name="style" select="'float: left'"/>
   </xsl:call-template>
   <xsl:apply-templates select="node()"/>
  </xsl:copy>
 </xsl:template>

 <xsl:template name="top-header">
  <xsl:param name="style"/>
  <div id="top-logo" style="{$style}">
   <a href="/" onfocus="this.blur()">
    <img src="/site-logo.png" width="222" height="66" alt="ExampleOnly.com"/>
   </a>
  </div>
 </xsl:template>

<!-- requires <nav id="left-nav"></nav> where navigation is to appear -->
 <xsl:template match="html:nav[@id='left-nav']">
  <xsl:copy>
   <xsl:apply-templates select="@*"/>
   <ul>
    <li><a href="/index.html">Home</a></li>
    <li><a href="/another-page.html">Another Page</a></li>
    <li><a href="/subdirectory/">More Info</a></li>
   </ul>
   <xsl:apply-templates select="node()"/>
  </xsl:copy>
 </xsl:template>

 <xsl:template match="@*|node()">
  <xsl:copy>
   <xsl:apply-templates select="@*|node()"/>
  </xsl:copy>
 </xsl:template>

</xsl:stylesheet>