The Layout Component

Page 1 and 2 have the same layout: a colored margin, two PageLinks, and this text, around some content.
We did this by writing a component that outputs all of that and the contents of its body.
We called the component Layout, but we could have used any other name.
Then we put Layout in both pages, and moved the rest of their contents into Layout's body.
So on display, their contents are inside Layout!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- We need a DOCTYPE to allow us to use special characters like &nbsp;
We use a "strict" DTD to make IE follow the alignment rules. -->
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<body>
<div class="header">
<h1>The Layout Component</h1>
Page 1 and 2 have the same layout: a colored margin, two PageLinks, and this text, around some content.<br/>
We did this by writing a component that outputs all of that <em>and the contents of its body</em>.<br/>
We called the component <em>Layout</em>, but we could have used any other name. <br/>
Then we put <em>Layout</em> in both pages, and moved the rest of their contents into <em>Layout's</em> body.<br/>
So on display, their contents are inside Layout!<br/><br/>
<div class="nav">
<t:pagelink page="examples/component/TheLayoutComponent1">Page 1</t:pagelink>
<t:pagelink page="examples/component/TheLayoutComponent2">Page 2</t:pagelink>
</div>
</div>
<table class="middle">
<tr>
<td class="left">
Left
</td>
<td class="content">
<!-- t:body is a directive that says "output the content that I surround". -->
<t:body/>
</td>
<td class="right">
Right
</td>
</tr>
</table>
<div class="footer">
Footer
</div>
</body>
</html>