<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" style="xslt-template" id="html.page">
 <info>
  <link type="guide" xref="html" group="templates"/>
  <link type="guide" xref="templates" group="html"/>
  <desc>Create an HTML document.</desc>
  <revision version="3.28" date="2017-08-04" status="final"/>
 </info>
 <title>html.page</title>
 <synopsis>
  <title>Parameters</title>
  <terms>
   <item>
    <title><code>$node</code></title>
    <p>The node to create HTML for.</p>
   </item>
  </terms>
 </synopsis>
 <p>This template creates the actual HTML output for <code>$node</code>. It outputs top-level
 elements and container divs, and calls various templates and modes to output
 the inner content. Importing stylesheets should implement at least
 <code xref="html.title.mode">html.title.mode</code> and <code xref="html.body.mode">html.body.mode</code> for any elements that could be passed
 as <code>$node</code> to this template. Importing stylesheets should also implement
 <code xref="html.header.mode">html.header.mode</code> to output link trails and <code xref="html.footer.mode">html.footer.mode</code> to output
 credits and other page information.</p>
 <p>This template outputs the HTML <sys>body</sys> element, which takes it attributes
 from two sources. First, it calls <code xref="html.lang.attrs">html.lang.attrs</code>, which automatically
 outputs correct <sys>lang</sys>, <sys>xml:lang</sys>, and <sys>dir</sys> attributes. It then calls
 <code xref="html.body.attr.mode">html.body.attr.mode</code> on <code>$node</code> for additional attributes.</p>
 <p>This template also calls a number of stub templates that can be overridden
 by extension stylesheets.</p>
 <list>
  <item>
   <p>Override the <code xref="html.head.custom">html.head.custom</code> template to put custom content at the end
   of the HTML <sys>head</sys> element.</p>
  </item>
  <item>
   <p>Override the <code xref="html.head.top.custom">html.head.top.custom</code> template to put custom content at the
   beginning of the HTML <sys>head</sys> element.</p>
  </item>
  <item>
   <p>Override the <code xref="html.top.custom">html.top.custom</code> and <code xref="html.bottom.custom">html.bottom.custom</code> templates to add
   site-specific content at the top and bottom of the page.</p>
  </item>
  <item>
   <p>Override the <code xref="html.header.custom">html.header.custom</code> and <code xref="html.footer.custom">html.footer.custom</code> templates to
   provide additional content directoy above and below the main content.</p>
  </item>
  <item>
   <p>Use the <code xref="html.sidebar.left">html.sidebar.left</code> and <code xref="html.sidebar.right">html.sidebar.right</code> parameters to create
   stock sidebars, or override <code xref="html.sidebar.custom">html.sidebar.custom</code> to create your own.</p>
  </item>
 </list>
 <p>This template also calls <code xref="html.css">html.css</code> and <code xref="html.js">html.js</code> to output CSS and JavaScript
 elements. See those templates for further extension points.</p>
 <list style="compact">
  <title>Calls Parameters</title>
  <item>
   <p><link xref="color.bg"/></p>
  </item>
  <item>
   <p><link xref="color.bg.blue"/></p>
  </item>
  <item>
   <p><link xref="color.bg.dark"/></p>
  </item>
  <item>
   <p><link xref="color.bg.gray"/></p>
  </item>
  <item>
   <p><link xref="color.bg.green"/></p>
  </item>
  <item>
   <p><link xref="color.bg.red"/></p>
  </item>
  <item>
   <p><link xref="color.bg.yellow"/></p>
  </item>
  <item>
   <p><link xref="color.blue"/></p>
  </item>
  <item>
   <p><link xref="color.fg"/></p>
  </item>
  <item>
   <p><link xref="color.fg.blue"/></p>
  </item>
  <item>
   <p><link xref="color.fg.dark"/></p>
  </item>
  <item>
   <p><link xref="color.fg.gray"/></p>
  </item>
  <item>
   <p><link xref="color.fg.green"/></p>
  </item>
  <item>
   <p><link xref="color.fg.orange"/></p>
  </item>
  <item>
   <p><link xref="color.fg.purple"/></p>
  </item>
  <item>
   <p><link xref="color.fg.red"/></p>
  </item>
  <item>
   <p><link xref="color.fg.yellow"/></p>
  </item>
  <item>
   <p><link xref="color.gray"/></p>
  </item>
  <item>
   <p><link xref="color.red"/></p>
  </item>
  <item>
   <p><link xref="color.yellow"/></p>
  </item>
  <item>
   <p><link xref="html.basename"/></p>
  </item>
  <item>
   <p><link xref="html.extension"/></p>
  </item>
  <item>
   <p><link xref="html.sidebar.left"/></p>
  </item>
  <item>
   <p><link xref="html.sidebar.right"/></p>
  </item>
  <item>
   <p><link xref="html.syntax.highlight"/></p>
  </item>
  <item>
   <p><link xref="html.xhtml"/></p>
  </item>
  <item>
   <p><link xref="icons.size.quote"/></p>
  </item>
 </list>
 <list style="compact">
  <title>Calls Templates</title>
  <item>
   <p><link xref="html.bottom.custom"/></p>
  </item>
  <item>
   <p><link xref="html.css"/></p>
  </item>
  <item>
   <p><link xref="html.footer.custom"/></p>
  </item>
  <item>
   <p><link xref="html.head.custom"/></p>
  </item>
  <item>
   <p><link xref="html.head.top.custom"/></p>
  </item>
  <item>
   <p><link xref="html.header.custom"/></p>
  </item>
  <item>
   <p><link xref="html.js"/></p>
  </item>
  <item>
   <p><link xref="html.lang.attrs"/></p>
  </item>
  <item>
   <p><link xref="html.sidebar"/></p>
  </item>
  <item>
   <p><link xref="html.sidebar.custom"/></p>
  </item>
  <item>
   <p><link xref="html.top.custom"/></p>
  </item>
 </list>
 <list style="compact">
  <title>Calls Modes</title>
  <item>
   <p><link xref="html.body.attr.mode"/></p>
  </item>
  <item>
   <p><link xref="html.body.mode"/></p>
  </item>
  <item>
   <p><link xref="html.footer.mode"/></p>
  </item>
  <item>
   <p><link xref="html.header.mode"/></p>
  </item>
  <item>
   <p><link xref="html.title.mode"/></p>
  </item>
 </list>
</page>
