<<header.inc>>
==Hello==
This is an un-ordered list of things:
* Item 1
* Item 2
* Item 3
with a right justified picture with an alternate text tag: {{mypicture.jpg|some text description }} Notice the space at the rightm just before the curly brackets - that makes the image right aligned.
<<footer.inc>>
Now this could be expanded by Macro HTML's inbuilt pre-processor and compiler to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="Description" content="Bonamy House, Wilson, Soane" />
<meta name="Keywords" content="Wilson, Soane" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="James Collings jamie at cgisys dot net" />
<meta name="Robots" content="index,follow" />
<link rel="stylesheet" href="images/PixelGreen.css" type="text/css" />
<title>Bonamy House, Guernsey</title>
</head>
<body>
<!-- wrap starts here -->
<div id="wrap"><p> <div id="header"><div id="header-content">
<h1 id="logo">Bonamy <span class="gray">House</span></h1>
<h2 id="slogan">Guernsey</h2>
<!-- Menu Tabs -->
<ul>
<li><a href="index.html" id="current">Home</a></li>
<li><a href="renovation/index.html">Renovation</a></li>
<li><a href="index.html">Downloads</a></li>
<li><a href="index.html">Support</a></li>
<li><a href="index.html">About</a></li>
</ul>
</div></div>
<div class="headerphoto"></div>
<!-- content-wrap starts here -->
<div id="content-wrap"><div id="content">
<div id="sidebar" >
</p> <div class="sidebox">
<h1>Restoration tricks</h1>
<p>Epoxy beam splicing</p>
<p>Industrial paints</p>
<p>Stucco</p>
<p><A HREF="boilers.html">Heating</A></p>
<p><A HREF="http://www.cgisys.com/macrohtml.html">Site generator (mine :-))</A></p>
</div>
</div>
<div id="main">
<div class="post">
<h1>Hello</h1><p>This is an un-ordered list of things:</p>
<ul><li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul>with a right justified picture with an alternate text tag: <IMG SRC="mypicture.jpg" ALT="some text description"ALIGN=RIGHT> Notice the space at the rightm just before the curly brackets - that makes the image right aligned.
</div>
</div>
<!-- content-wrap ends here -->
</div></div><p><!-- footer starts here -->
<div id="footer"><div id="footer-content">
</p> <div class="col float-left">
<h1>Products we used</h1>
<ul><li><A HREF="http://www.sindat.cz">Sindat paints</A></li> <li><A HREF="http://www.keimpaints.co.uk">Keim paints</A></li> <li><A HREF="boilers.html">Protherm boilers</A></li> </ul> </div>
<div class="col float-left">
<h1>Architecture</h1>
<ul><li><A HREF="http://www.soane.org/">Soane museum</A></li> <li><A HREF="http://www.stjames.gg/">St. James the Less</A></li> <li><A HREF="http://www.themarketplace.gg/h_architecture.html">Markets</A></li> <li><A HREF="http://www.museum.guernsey.net/download/Elizabeth_College.pdf">Elizabeth College</A></li> </ul> </div>
<div class="col2 float-right">
<h1>Other</h1>
© copyright 2007 <strong>James Collings</strong><br />
Design by: <a href="index.html"><strong>styleshout</strong></a>
</div>
</div></div>
<!-- footer ends here -->
<!-- wrap ends here -->
</div><p></p></body>
</html>
So. What's easier to edit and maintain? The raw HTML that is directly above, or MacroHTML's simple syntax, right at the start?
Oh, and here's the finished page:
Notice the central area:
This was the text between the <<header.inc>> and <<footer.inc> include directives:
==Hello==
This is an un-ordered list of things:
* Item 1
* Item 2
* Item 3
with a right justified picture with an alternate text tag: {{mypicture.jpg|some text description }} Notice the space at the rightm just before the curly brackets - that makes the image right aligned.
You may notice that the image 'mypicture.jpg' is missing (bottom right) and that the browser is displaying the 'alt text' 'some text description' that was defined in the image link in the sample snippet.
Of course, this example also relies on a sophisticated stylesheet to make everything look good, and I used one of the ones at styleshout.com.