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>