<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//MOZQUITO//DTD XHTML-FML 1.0//EN"
"http://www.mozquito.org/dtd/xhtml-fml1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:x="http://www.mozquito.org/xhtml-fml">
<head>
<title>Understand XML-UI In 10 Easy Lessons</title>
<meta name="generator" content="Mozquito Factory 1.5" />
<style type="text/css">
	<![CDATA[
	a:link			{ font-weight:bold;font-family:sans serif,MS Sans Serif,Arial,Verdana,Helvetica,AvantGarde; }
	a:active		{ font-weight:bold;font-family:sans serif,MS Sans Serif,Arial,Verdana,Helvetica,AvantGarde; }
	a:visited		{ font-weight:bold;font-family:sans serif,MS Sans Serif,Arial,Verdana,Helvetica,AvantGarde; }

	.bg					{ background-image:url(img_10steps/bg.gif); }
	.bgblank		{	background-image:url(img_10steps/blank.gif); }
	.bglbl1			{ font-size:1pt;background-image:url(img_10steps/blank.gif);background-color:#BFD4E4; }

	.bg11blk		{ font-size:11px;color:#000000;background-image:url(img_10steps/blank.gif);font-family:sans serif,MS Sans Serif,Arial,Verdana,Helvetica,AvantGarde; }
	.bgwh11blk	{ font-size:11px;color:#000000;background-color:#FFFFFF;font-family:sans serif,MS Sans Serif,Arial,Verdana,Helvetica,AvantGarde; }

	.blk11			{ font-size:11px;color:#000000;font-family:sans serif,MS Sans Serif,Arial,Verdana,Helvetica,AvantGarde; }
	.blk14			{ font-size:14px;color:#000000;font-family:sans serif,MS Sans Serif,Arial,Verdana,Helvetica,AvantGarde; }

	.wht12			{ font-size:12px;color:#FFFFFF;font-family:sans serif,MS Sans Serif,Arial,Verdana,Helvetica,AvantGarde; }
	.wht14b			{ font-size:14px;color:#FFFFFF;font-weight:bold;font-family:sans serif,MS Sans Serif,Arial,Verdana,Helvetica,AvantGarde; }

	.lblu14			{ font-size:14px;color:#547CAA;font-family:sans serif,MS Sans Serif,Arial,Verdana,Helvetica,AvantGarde; }
	.lblu14b		{ font-size:14px;color:#547CAA;font-weight:bold;font-family:sans serif,MS Sans Serif,Arial,Verdana,Helvetica,AvantGarde; }

	.dblu12b		{ font-size:12px;color:#222566;font-weight:bold;font-family:sans serif,MS Sans Serif,Arial,Verdana,Helvetica,AvantGarde; }
	.dblu14b		{ font-size:14px;color:#222566;font-weight:bold;font-family:sans serif,MS Sans Serif,Arial,Verdana,Helvetica,AvantGarde; }

	.dred10b		{ font-size:10px;color:#873940;font-weight:bold;font-family:sans serif,MS Sans Serif,Arial,Verdana,Helvetica,AvantGarde; }
	.dred12b		{ font-size:12px;color:#873940;font-weight:bold;font-family:sans serif,MS Sans Serif,Arial,Verdana,Helvetica,AvantGarde; }
	.dred14b		{ font-size:14px;color:#873940;font-weight:bold;font-family:sans serif,MS Sans Serif,Arial,Verdana,Helvetica,AvantGarde; }

	.dred				{ color:#873940; }
	.lred				{ color:#DF273E; }
	.dblu				{ color:#222566; }
	.lblu				{ color:#547CAA; }
	.b					{ font-weight:bold; }
	.size8			{ font-size:8px;font-family:Arial,Verdana,Helvetica,AvantGarde; }

	.margin1		{ margin:4px; }
	.m42t				{ margin-top:42px; }
	.m49l				{ margin-left:49px; }
	]]>
</style>
</head>
<body bgcolor="#ffffff" >

<!--  TEMPLATE  E L E M E N T S  -->
<x:template id="elements_templ">
	<tr>
		<td height="20" colspan="3" class="dblu12b">XML-UI Elements used in this lesson</td>
	</tr>
	<tr>
		<td width="75" height="20" bgcolor="#547CAA" class="wht12">Tags</td>
		<td width="75" bgcolor="#547CAA" class="wht12">Attributes</td>
		<td width="84" bgcolor="#547CAA" class="wht12">Event Handlers</td>
	</tr>
</x:template>

<div align="center">
	<table width="760" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td height="560" align="center" class="bg">
				
				<x:form id="in10steps">

<!--  N A V I G A T I O N   table -->
							<div class="m42t">
								<table width="737" border="0" cellspacing="0" cellpadding="0">
									<tr>
										<td width="323" height="23" align="left" valign="top" class="bgblank">
											<x:img src="img_10steps/understand.gif" width="280" height="20" preload="yes" alt="" />
										</td>
										<td width="228" align="left" valign="top" class="bgblank">
											<x:toggle id="navigation">
												<x:tg id="l_00"><x:img src="img_10steps/less_00.gif" alt="Introduction" width="90" height="20" preload="yes" /></x:tg>
												<x:tg id="l_01"><x:img src="img_10steps/less_01.gif" alt="Lesson 1  (Basics)" width="120" height="20" preload="yes" /></x:tg>
												<x:tg id="l_02"><x:img src="img_10steps/less_02.gif" alt="Lesson 2  (Template I.)" width="160" height="20" preload="yes" /></x:tg>
												<x:tg id="l_03"><x:img src="img_10steps/less_03.gif" alt="Lesson 3  (Template II.)" width="160" height="20" preload="yes" /></x:tg>
												<x:tg id="l_04"><x:img src="img_10steps/less_04.gif" alt="Lesson 4  (Toggle)" width="130" height="20" preload="yes" /></x:tg>
												<x:tg id="l_05"><x:img src="img_10steps/less_05.gif" alt="Lesson 5  (Forms)" width="120" height="20" preload="yes" /></x:tg>
												<x:tg id="l_06"><x:img src="img_10steps/less_06.gif" alt="Lesson 6  (Forms & Toggles)" width="190" height="20" preload="yes" /></x:tg>
												<x:tg id="l_07"><x:img src="img_10steps/less_07.gif" alt="Lesson 7  (Forms & Templates)" width="210" height="20" preload="yes" /></x:tg>
												<x:tg id="l_08"><x:img src="img_10steps/less_08.gif" alt="Lesson 8  (Calc)" width="110" height="20" preload="yes" /></x:tg>
												<x:tg id="l_09"><x:img src="img_10steps/less_09.gif" alt="Lesson 9  (Calc & Toggles)" width="170" height="20" preload="yes" /></x:tg>
												<x:tg id="l_10"><x:img src="img_10steps/less_10.gif" alt="Lesson 10  (Calc & Templates)" width="190" height="20" preload="yes" /></x:tg>
												<x:tg id="l_11"><x:img src="img_10steps/less_11.gif" alt="Summary" width="70" height="20" preload="yes" /></x:tg>
											</x:toggle>
										</td>
										<td width="65" align="right" valign="top" class="bgblank">
											<x:toggle id="backbutton">
												<x:img src="img_10steps/nav_back_g.gif" width="65" height="20" alt="click next" />
												<x:img src="img_10steps/nav_back_r.gif" onclick="toggle:chapter_tog,-;toggle:navigation,-;" width="65" height="20" preload="yes" alt="back" />
											</x:toggle>
										</td>
										<td width="65" align="right" valign="top" class="bgblank">
											<x:toggle id="indexbutton">
												<x:img src="img_10steps/nav_index_g.gif" width="65" height="20" preload="yes" alt="index" />
												<x:img src="img_10steps/nav_index_r.gif" onclick="toggle:chapter_tog,chap0;toggle:navigation,l_00;" width="65" height="20" preload="yes" alt="index" />
											</x:toggle>
										</td>
										<td width="56" align="right" valign="top" class="bgblank">
											<x:toggle id="nextbutton">
												<x:img src="img_10steps/nav_next_r.gif" onclick="toggle:chapter_tog,+;toggle:navigation,+;" width="56" height="20" preload="yes" alt="next" />
												<x:img src="img_10steps/nav_next_g.gif" width="56" height="20" preload="yes" alt="click back" />
											</x:toggle>
										</td>
									</tr>
								</table>
							</div>

					<x:toggle id="chapter_tog">
<!-- /////////////// CHAPTER 0 - Introduction /////////////// -->
						<x:tg id="chap0" onshow="toggle:backbutton;toggle:indexbutton;" onhide="toggle:backbutton;toggle:indexbutton;">
							<table width="737" border="0" cellspacing="0" cellpadding="0">
								<tr> 
									<td width="494" height="162" align="left" valign="top" class="bg11blk">
										<div class="margin1">
											<x:toggle id="less_0_extog">
												<x:tg>
													<span class="lblu14b">Introduction: </span><span class="lblu14">How does this tutorial work?</span>
												</x:tg>
												<x:tg>
													<span class="lblu14b">Example: </span>
												</x:tg>
											</x:toggle><br /><br />
											<div align="center">
												<x:button id="less_0_ex" value="Example" class="blk14" onclick="toggle:less_0_extog,+;toggle:less_0_extog2,+;" />
												<x:button id="less_0_theo" value="Theory" class="blk14" onclick="toggle:less_0_theotog,+;" />
												<x:button id="less_0_source" value="Source" class="blk14" onclick="toggle:less_0_sourcetog,+;" />
												<x:button id="less_0_faq" value="F.A.Q." class="blk14" onclick="toggle:less_0_faqtog,+;" />
												<x:button id="less_0_elem" value="Elements" class="blk14" onclick="toggle:less_0_elemtog,+;" />
											</div><br />
											<x:toggle id="less_0_extog2">
												<x:tg>Each lesson has a similar set-up.</x:tg>
												<x:tg>In this area, you see an small example of an interactive
													<x:toggle id="less_0_extog3">
														<x:textoutput value="application" onclick="toggle:less_0_extog3,1;" class="dred10b" />
														<x:button value="application (like that one)" class="dred10b" onclick="toggle:less_0_extog3,0;" />
													</x:toggle>
													 that you can try out "live".
												</x:tg>
											</x:toggle>
										</div>
									</td>
									<td rowspan="2" width="243" align="left" valign="top" class="bg11blk">
										<div class="margin1">
											<x:toggle id="less_0_theotog">
												<x:tg>
													<span class="dblu14b">Contents:</span><br /><br />
													<div class="margin1">
														<span class="dred10b">Introduction</span><br />
														<span class="size8"> </span><br />
														<x:textoutput class="dred" value="Lesson 1: Basics" onclick="toggle:chapter_tog,chap1;toggle:navigation,l_01;" /><br />
														<span class="size8"> </span><br />
														<x:textoutput class="dred" value="Lesson 2: Template I" onclick="toggle:chapter_tog,chap2;toggle:navigation,l_02;" /><br />
														<span class="size8"> </span><br />
														<x:textoutput class="dred" value="Lesson 3: Template II" onclick="toggle:chapter_tog,chap3;toggle:navigation,l_03;" /><br />
														<span class="size8"> </span><br />
														<x:textoutput class="dred" value="Lesson 4: Toggle" onclick="toggle:chapter_tog,chap4;toggle:navigation,l_04;" /><br />
														<span class="size8"> </span><br />
														<x:textoutput class="dred" value="Lesson 5: Forms" onclick="toggle:chapter_tog,chap5;toggle:navigation,l_05;" /><br />
														<span class="size8"> </span><br />
														<x:textoutput class="dred" value="Lesson 6: Forms & Toggles" onclick="toggle:chapter_tog,chap6;toggle:navigation,l_06;" /><br />
														<span class="size8"> </span><br />
														<x:textoutput class="dred" value="Lesson 7: Forms & Templates" onclick="toggle:chapter_tog,chap7;toggle:navigation,l_07;" /><br />
														<span class="size8"> </span><br />
														<x:textoutput class="dred" value="Lesson 8: Calc" onclick="toggle:chapter_tog,chap8;toggle:navigation,l_08;" /><br />
														<span class="size8"> </span><br />
														<x:textoutput class="dred" value="Lesson 9: Calc & Toggles" onclick="toggle:chapter_tog,chap9;toggle:navigation,l_09;" /><br />
														<span class="size8"> </span><br />
														<x:textoutput class="dred" value="Lesson 10: Calc & Templates" onclick="toggle:chapter_tog,chap10;toggle:navigation,l_10;" /><br />
														<span class="size8"> </span><br />
														<x:textoutput class="dred" value="Summary" onclick="toggle:chapter_tog,chap11;toggle:navigation,l_11;" />
													</div>                     
												</x:tg>
												<x:tg>
													<x:textoutput value="Theory:" class="dblu14b" /><br /><br />
													In this area, you will find an explanation for the example presented in the lesson, as well as information about the tags and attributes used.
													<br /><br /><br />
													<x:textoutput value="OK. But show me the contents again." onclick="toggle:less_0_theotog,0;" class="dred12b" />
												</x:tg>
											</x:toggle>
										</div>
									</td>
								</tr>
								<tr> 
									<td width="494" height="152" align="left" valign="top" class="bg11blk">
										<div class="margin1">
											<x:toggle id="less_0_faqtog">
												<x:hidden />
												<x:tg>
													<span class="lblu14b">Frequently Asked Questions:</span><br /><br />
													In every lesson, this area attempts to answer possible questions related to that section.
												</x:tg>
											</x:toggle>
										</div>
									</td>
								</tr>
								<tr> 
									<td width="494" height="186" align="left" valign="top" class="bg11blk">
										<div class="margin1">
											<x:toggle id="less_0_sourcetog">
												<x:hidden />
												<x:tg>
													<span class="lblu14b">Source code of the current Example:</span><br /><br />
													Here you can see the original source code of the examples above.
												</x:tg>
											</x:toggle>
										</div>
									</td>
									<td width="243" height="186" align="center" valign="top" class="bg11blk">
										<div class="margin1">
											<x:toggle id="less_0_elemtog">
												<x:hidden />
												<x:tg>
													<table width="234" align="center" border="0" cellspacing="0" cellpadding="0">
	                          <x:insert template="elements_templ"></x:insert>
														<tr>
															<td width="75" height="50" valign="top" class="bgwh11blk">
																x:toggle<br />x:button<br />x:textoutput<br />
															</td>
															<td width="75" valign="top" class="bgwh11blk">
																id<br />value<br />style<br />
															</td>
                           		<td width="84" valign="top" class="bgwh11blk">
																onclick
                           	 	</td>
														</tr>
														<tr>
															<td width="234" class="bg11blk" colspan="3">
																<br />This area shows you the source code including the tags 
																and attributes used in the lesson to help you see how things really work.<br /><br />
															</td>
														</tr>
													</table>
												</x:tg>
											</x:toggle>
										</div>
									</td>
								</tr>
							</table>
						</x:tg>
<!-- /////////////// CHAPTER 1 - Basics /////////////// -->
						<x:tg id="chap1">

                <table width="737" border="0" cellspacing="0" cellpadding="0">
                  <tr> 
                    <td width="494" height="162" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Example:</span><br /><br />
                        <table width="350" border="0" cellspacing="0" cellpadding="0" align="center">
                          <tr>
                            <td height="34" align="center" valign="middle" class="bgblank">
                              <x:toggle id="less_1_toggle">
                                <x:button id="less_1_button" value="Click me!" class="blk14" onclick="toggle:less_1_toggle,+;" />
                                <x:textoutput value="Well done! Now change it back, please!" class="dred14b" onclick="toggle:less_1_toggle,+;" />
                              </x:toggle>
                            </td>
                          </tr>
                        </table><br />
                        The <span class="b">tag </span><x:button /> defines a button.  Inside of the button, 
												an <span class="b">attribute </span> is defined, e.g., a label (value="Click me!").  
												An <span class="b">event handler </span> 
                        (onclick=""...) lets an action happen.  In this case, the action is a so-called toggle, 
												a switch between objects and/or tags (in this case, a button and a line of text) which lets them 
                        appear alternately in the same space.
                      </div>
                    </td>
                    <td rowspan="2" width="243" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                       <span class="dblu14b">Theory:</span><br /><br />
                        There are three types of tools available to you when creating XHTML-FML documents:<br /><br />
                        <span class="b">Tags:</span>  Just like in HTML 4.0, tags make up the basic structure of a document.  They format and embed functions in the document.<br /><br />
                        <span class="b">Attributes:</span>  An attribute describes the character of a tag (e.g., with an inline style like <span class="dred">style="color: yellow"</span>) you can define the color, 
                        form, size or position of the object).<br /><br />
                        <span class="b">Event Handlers:</span>  An event handler is placed in a tag just like an attribute, but is used to start a predefined function.  A well known event handler is onclick (when the user clicks on an 
                        object something happens). The type of event is described after the =.
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="152" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Frequently Asked Questions:</span><br /><br />
                        <span class="dred">
                          <span class="b">Q:</span>  I know a little bit of HTML.  Is this helpful in using XHTML?
                        </span><br />
                        <span class="b">A:</span>  Absolutely! The jump from HTML to XHTML is not a big one.  
												XHTML  looks very similar to HTML and the two might even be confused with each other.  
                        But "X" marks the spot. While HTML has barely changed over the years, XHTML allows 
												unlimited modifications to itself.<br />
                        <span  class="dred">
                          <span class="b">Q:</span>  I don't know any JavaScript. Is this a disadvantage in using Mozquito?
                        </span><br />
                        <span class="b">A:</span>  No. You doen't have to know any JavaScript at all. With XML-UI, 
												you can use markup to create complex applications and effects like 
                        the best JavaScript author and still have time left over for what's really important: the contents 
												of the Web page.<br />
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="186" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Source code of the current Example:</span><br /><br />
                        <x:toggle id="MyToggle"><br />
                         <x:button id="foo" value="Click me!" onclick="toggle:MyToggle;" /><br />
                         <x:textoutput value="Well done! Now change it back, please!" onclick="toggle:MyToggle;" /><br />
                        </x:toggle>
                      </div>
                    </td>
                    <td width="243" height="186" align="center" valign="top" class="bg11blk">
                      <div class="margin1">
                        <table width="234" align="center" border="0" cellspacing="0" cellpadding="0">
                          <x:insert template="elements_templ"></x:insert>
                          <tr>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															x:toggle<br />x:button<br />x:textoutput
                            </td>
                            <td width="75" valign="top" class="bgwh11blk">
															id<br />value<br />class<br />style
                            </td>
                            <td width="84" valign="top" class="bgwh11blk">
															onclick
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr> 
                </table>
              </x:tg>
<!-- /////////////// CHAPTER 2 - Template I /////////////// -->
						<x:tg id="chap2">
              <x:template id="MyTe">
                <td class="bgblank">
                  <x:img src="img_10steps/insect01.gif" alt="" width="32" height="32" preload="yes" />
                </td>
              </x:template>
	              <table width="737" border="0" cellspacing="0" cellpadding="0">
                  <tr> 
                    <td width="494" height="162" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Example:</span><br /><br />
                        <div align="center">
                          <table border="3">
                            <tr>
															<x:insert template="MyTe"></x:insert>
															<x:insert template="MyTe"></x:insert>
															<x:insert template="MyTe"></x:insert>
															<x:insert template="MyTe"></x:insert>
															<x:insert template="MyTe"></x:insert>
                            </tr>
                          </table>
                        </div><br />
                        Here you can see 5 butterflies embedded in a table tag. More important than the butterflies 
												is the fact that the command to show them is found in a
                        <span class="b">template </span> using the framework (<td>s) like the img tag does.
                      </div>
                    </td>
                    <td rowspan="2" width="243" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="dblu14b">Theory:</span><br />
                        <x:toggle id="less_2_theo">
                          <x:tg>
                            <div align="right">
                              <x:textoutput value="next page (2/2)" onclick="toggle:less_2_theo,+" class="dred10b" />  
                            </div><br />
															The Template Module in XML-UI is an innovative invention in the world of markup. If you 
															look at a lot of web sites, you'll notice that many documents are 
															made up almost exclusively of repeated code.  Whole passages are simply copied and pasted 
															one after another resulting in very long sections of code.<br /><br />
															But now to avoid these repetitions, a <span class="b">template </span> can be inserted 
															wherever and whenever you need it. It's a bit like the "master" of a cd from 
															which copies are made.  
															The original code is only typed once but the short <span class="b">insert </span> tag tells 
															the code where a copy of the original <span class="b">template </span> should go.<br /><br />
                          </x:tg>
                          <x:tg>
                            <div align="right">
                              <x:textoutput value="back" onclick="toggle:less_2_theo,+" class="dred10b" />...
                            </div><br />
															In XML-UI, there is a preload function, just like in JavaScript, but it is much 
															easier to use. All you need is
															<span class="dred">preload="yes" </span> within a 
															<span class="dred"><x:img /> </span>.
															When you use the <span class="dred">preload</span> attribute, then you 
															<span class="b">must </span> also provide the 
															<span class="dred">width </span> and <span class="dred">height </span> attributes on
															<span class="dred"><x:img /></span>!!!
                          </x:tg>
                        </x:toggle>
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="152" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Frequently Asked Questions:</span><br /><br />
                        <span class="dred">
                          <span class="b">Q:</span>  When I look at the code below, it doesn't really seem like much space has been saved.
                        </span><br />
                        <span class="b">A:</span>  But it has.  The butterflies are only a tiny example. Granted, if you had manually copied the contents of the template, the code would be just as long, but the funny thing is that
                        the content of the template can be extended. The longer the template, the greater the effect. If the template consists of 40 lines of code, the insert tag is still only one line. Plus, you can 
                        make variables in a template changeable and still only use one template.<br />
                       </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="186" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Source code of the current Example:</span><br /><br />
                        <table width="484" border="0" cellpadding="0" cellspacing="2">
                          <tr>
                            <td width="236" valign="top" class="bg11blk">
                              <x:template id="MyTe"><br />
                               <td bgcolor="#ffffff"><br />
                                <x:img src="images_10steps/insect01.gif"<br />
                                width="32" height="32" alt="" preload="yes" /><br />
                               </td><br />
                              </x:template><br />
                            </td>
                            <td width="1" valign="top" class="bglbl1"> </td>
                            <td width="236" valign="top" class="bg11blk">
                              <table border="3"><br />
                               <tr><br />
                                <x:insert template="MyTe"></x:insert><br />
                                <x:insert template="MyTe"></x:insert><br />
                                <x:insert template="MyTe"></x:insert><br />
                                <x:insert template="MyTe"></x:insert><br />
                                <x:insert template="MyTe"></x:insert><br />
                               </tr><br />
                              </table><br />
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                    <td width="243" height="186" align="center" valign="top" class="bg11blk">
                      <div class="margin1">
                        <table width="234" align="center" border="0" cellspacing="0" cellpadding="0">
                          <x:insert template="elements_templ"></x:insert>
                          <tr>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															x:template<br />x:insert<br />x:img
                            </td>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															id<br />template<br />src<br />alt<br />preload<br />width<br />height
                            </td>
                            <td width="84" height="130" valign="top" class="bgwh11blk"> </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr> 
                </table>
              </x:tg>
<!-- /////////////// CHAPTER 3 - Template II /////////////// -->
              <x:tg id="chap3">
                <x:template id="MyTe2">
                  <td class="bgblank">
                    <x:img src="img_10steps/insect|Insect_No|.gif" alt="" preload="yes" width="32" height="32" />
                  </td>
                </x:template>
                <table width="737" border="0" cellspacing="0" cellpadding="0">
                  <tr> 
                    <td width="494" height="162" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Example:</span><br /><br />
                        <div align="center">
                          <table border="3">
                            <tr>
                              <x:insert template="MyTe2"><x:prop name="Insect_No">01</x:prop></x:insert>
                              <x:insert template="MyTe2"><x:prop name="Insect_No">02</x:prop></x:insert>
                              <x:insert template="MyTe2"><x:prop name="Insect_No">03</x:prop></x:insert>
                              <x:insert template="MyTe2"><x:prop name="Insect_No">04</x:prop></x:insert>
                              <x:insert template="MyTe2"><x:prop name="Insect_No">05</x:prop></x:insert>
                            </tr>
                          </table>
                        </div><br />
                         Here you see some insects in boxes. In Lesson 2, we saw the same graphic 5 times but here 
												we have 5 different graphics.  But we are still only using <span class="b">one</span> template! 
												How is that possible?
                      </div>
                    </td>
                    <td rowspan="2" width="243" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="dblu14b">Theory:</span><br />
                        <x:toggle id="less_3_theo">
                          <x:tg>
                            <div align="right">
                              <x:textoutput value="next page (2/2)" onclick="toggle:less_3_theo,+" class="dred10b" />  
                            </div><br />
                            So far we've learned that we can avoid repetitive text in XML-UI by using a template.  
           									When we write a template we put in everything that we want repeated and then we
                            use a simple insert tag (<span class="dred"><x:insert></x:insert> </span>) in 
														the code to refer back to the template.<br /><br />
                            Now, you may notice that while many passages are repeated, in real life, most of these 
														repetitions are incomplete and vary a bit from the original passage. In our example, the 
                            code for showing the boxes is repeated exactly except for the data names of the 5 insect 
														graphics. This is a job for the Template Module. In the template, the area that varies is 
                            delimited with pipes "<span class="dred">|  |</span>" and the position is given a name.
                            This is called a place holder.<br /><br />
                            <x:toggle id="return_tog1">
                              <x:hidden />
                              <x:tg>
                                <div align="right">
                                  <x:textoutput value="Return to the lesson!" onclick="toggle:chapter_tog,chap7;toggle:navigation,l_07;toggle:return_tog1,0;" class="dred10b" />  
                                </div>
                              </x:tg>
                            </x:toggle>
                          </x:tg>
                          <x:tg>
                            <div align="right">
                              <x:textoutput value="back" onclick="toggle:less_3_theo,+" class="dred10b" />...
                            </div><br />
                            When you repeat code and want to change part of it, you need a prop tag inside your 
														insert tag. This prop tag tells the insert tag what the variable content is.  In the prop tag, 
                            the content is identified by a <span class="dred">name=""</span>.  This name information 
														is the place holder that you wrote in pipes in the template.<br /><br />
                            You can see how it works by checking out the Source code below. If you'd like to copy this code 
														into your own editor and test it out, make sure that the graphics (.gif or .jpg) shown 
                            actually exist at the address given.<br />
                          </x:tg>
                        </x:toggle>
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="152" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Frequently Asked Questions:</span><br /><br />
                        <span class="dred">
                          <span class="b">Q:</span>  What can I replace with pipes?
                        </span><br />
                        <span class="b">A:</span>  Basically, you can put any content or text into a piped place 
												holder and insert it with a prop tag. You can also use this technique with statements inside attributes. 
                        This creates a wide range of possibilities. But there are some syntax dependent limitations set on 
												place holders inside tags. You can put any type of text within the quotation 
                        marks but no strings that begin or end outside of the quotation marks<br />
                        (wrong: <span class="dred"><|placeholder|> </span> wrong: 
												<span class="dred"><x:img src=|placeholder| alt="foo" /> </span> correct:
                        <span class="dred"><x:img src="|placeholder|.jpg"  alt="" /></span> correct: <span class="dred"><x:img src="|picture|" alt="
                        Author: |authorname|" /> </span> etc...).<br />
                      </div>
                    </td>
                  </tr>
                </table>
                <table width="737" border="0" cellspacing="0" cellpadding="0">
                  <tr> 
                    <td width="494" height="186" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Source code of the current Example:</span><br /><br />
                        <table width="484" border="0" cellpadding="0" cellspacing="2">
                          <tr>
                            <td width="236" valign="top" class="bg11blk">
                              <x:template id="MyTe2"><br />
                               <td bgcolor="#ffffff"><br />
                                <x:img<br />
                                src="images_10steps/insect|Insect_No|.gif"<br />
                                width="32" height="32" alt="" preload="yes" /><br />
                               </td><br />
                              </x:template><br />
                            </td>
                            <td width="1" valign="top" class="bglbl1"> </td>
                            <td width="236" valign="top" class="bg11blk">
                              <table border="3"><tr><br />
                               <x:insert template="MyTe2"><br />
                                <x:prop name="Insect_No">01</x:prop><br />
                               </x:insert><br />
                               <x:insert template="MyTe2"><br />
                                <x:prop name="Insect_No">02</x:prop><br />
                               </x:insert><br />
                              ... etc<br />
                              </tr></table><br />
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                    <td width="243" height="186" align="center" valign="top" class="bg11blk">
                      <div class="margin1">
                        <table width="234" align="center" border="0" cellspacing="0" cellpadding="0">
                          <x:insert template="elements_templ"></x:insert>
                          <tr>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															x:template<br />x:insert<br />x:prop<br />x:img
                            </td>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															id<br />template<br />name<br />src<br />alt<br />preload<br />width<br />height
                            </td>
                            <td width="84" height="130" valign="top" class="bgwh11blk"> </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr> 
                </table>
              </x:tg>
<!-- /////////////// CHAPTER 4 - Toggle /////////////// -->
              <x:tg id="chap4">
                <table width="737" border="0" cellspacing="0" cellpadding="0">
                  <tr> 
                    <td width="494" height="162" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Example:</span><br />
                        <div align="center" class="dblu14b">
                          <x:toggle id="toggle_ex">
                            <x:tg>This is sentence number 1.</x:tg>
                            <x:tg>And here is number 2.</x:tg>
                            <x:tg>And now number 3!</x:tg>
                          </x:toggle>
                        </div><br />
												The above sentence is part of a toggle.  Variable content can exist in the same place but only 
												one set of content can be seen at any given time. With the proper command,
                        the content can be switched.  Normally, you can create this with a complex JavaScript routine, 
												but with Mozquito, this toggle effect can be created with simple markup code.<br />
                        The following links show examples of different  ways a toggle can be used:<br /><br />
                        <div align="center">
                          [ <x:textoutput value="Forwards" onclick="toggle:toggle_ex,+;" class="dred10b" /> ]
                          [ <x:textoutput value="Back" onclick="toggle:toggle_ex,-;" class="dred10b" /> ]
                          [ <x:textoutput value="Go to Position 1" onclick="toggle:toggle_ex,0;" class="dred10b" /> ]
                          [ <x:textoutput value="Go to Position 2" onclick="toggle:toggle_ex,1;" class="dred10b" /> ]
                          [ <x:textoutput value="Go to Position 3" onclick="toggle:toggle_ex,2;" class="dred10b" /> ]
                        </div>
                      </div>
                    </td>
                    <td rowspan="2" width="243" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="dblu14b">Theory:</span><br />
                        <x:toggle id="less_4_theo">
                          <x:tg>
                            <div align="right">
                              <x:textoutput value="next page (2/4)" onclick="toggle:less_4_theo,+;" class="dred10b" />  
                            </div><br />
                            A "toggle" lets you selectively activate and deactivate objects within a document. 
														Using this simple markup you can 
                            design &slide shows& and many other applications where objects need to be switched. 
														The results are in no
                            way inferior to complex applets and scripts. Only easier to make!<br /><br />
                            First thing,  the toggle tag needs an id. The event handler (e.g., 
														<span class="dred">onclick="" </span>)
                            needs it to refer to the right toggle.<br /><br />
                            Inside toggles, there are the single toggle groups. One toggle group can be shown 
														while the others are 
                            hidden. There are two methods for defining a toggle group.<br /><br />
                          </x:tg>
                          <x:tg>
                            <div align="right">
                              <x:textoutput value="previous page (1/4)" onclick="toggle:less_4_theo,-;" class="dred10b" />  
                              <x:textoutput value="next page (3/4)" onclick="toggle:less_4_theo,+;" class="dred10b" />  
                            </div><br />
                            First, objects that belong to the XML-UI Form Module (e.g., textinput, textoutput, hidden, etc...) can simply be 
                            placed within the toggle.<br /><br />
                            Second, to collect other elements within a toggle group (like loose text, 
														<span class="dred"><x:img /> </span>,
                            table/tr/td tags...) it is important to mark this passage off as a single toggle group. 
														The tag for this is called
                            <span class="dred"><x:tg></x:tg></span>. You can define nearly 
                            anything as a part of a toggle and be able to switch it between shown and hidden.<br /><br />
                            The toggle can be activated in many ways. The simplest way is by linear switching (see the 
														example to the left). In the 
                            event handler string, an "+" is used for toggling forward and "-" for 
														toggling back.<br /><br />
                          </x:tg>
                          <x:tg>
                            <div align="right">
                              <x:textoutput value="previous page (2/4)" onclick="toggle:less_4_theo,-;" class="dred10b" />  
                              <x:textoutput value="next page (4/4)" onclick="toggle:less_4_theo,+;" class="dred10b" />  
                            </div><br />
                            A toggle can be switched directly over to a position which isn't necessarily consecutive. 
														There are two ways to do this.
                            First of all, every toggle group in a toggle (regardless if it is a plain XML-UI form tag or a 
                            <span class="dred"><x:tg></span>) is numbered consecutively. The first position is 
														always "0",
                            the next is "1", etc. Be careful!  This means that, for example, toggle group "4" 
														is the fifth
                            grouü. In the event handler string, a toggle group can be called up by using its group number
                            (e.g., <span class="dred">onclick="toggle:MyToggle,2;"</span>).
                            Or, you can activate the toggle with the id, provided that this id has been created within the 
														needed object. This is
                            because an id is not required for some toggle elements
                            (<span class="dred"><x:tg></span>, <span class="dred"><x:textoutput /></span>, etc...).<br /><br />
                          </x:tg>
                          <x:tg>
                            <div align="right">
                              <x:textoutput value="previous page (3/4)" onclick="toggle:less_4_theo,-;" class="dred10b" />  
                              <x:textoutput value="first page again" onclick="toggle:less_4_theo,+;" class="dred10b" />  
                            </div><br />
                            A properly defined event handler contains exact syntax
                            (<span class="dred">onclick="toggle:MyToggle,Nr_4;"</span>).
                            First, you decide which event handler you want (<span class="dred">onclick=Quot;"</span>).
                            Then the kind of event you want to cause (<span class="dred">toggle:</span>) within it.
                            The action is followed by a colon which introduces the id of the toggle we want to trigger (in our example,
                            <span class="dred">MyToggle,</span> ). Finally, after the comma you define the position you want to bring forward
                            (or you define the forward/back modus (+/-). A semicolon terminates the string or separates the different triggers in
                            a multiple call up (see FAQ for this lesson).<br /><br />
                          </x:tg>
                        </x:toggle>
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="152" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Frequently Asked Questions:</span><br /><br />
                        <span class="dred">
                          <span class="b">Q:</span>  What kind of content can be toggled?
                        </span><br />
                        <span class="b">A:</span>   Basically all HTML/XHTML elements can be toggled. But remember to enclose the whole area within a toggle tag
                        (e.g., complete <td></td>, <tr></tr>, <table></table>). Otherwise you
                        may create conflicts in the rest of the document and the page will not work.<br />
                        <span class="dred">
                          <span class="b">Q:</span>  Can I activate more than one toggle with just one "onclick"?
                        </span><br />
                        <span class="b">A:</span>  No problem. You can define any number of triggers within the same event handler delimited by semicolons
                        (e.g., <span class="dred"><x:button id="foo" value="X" onclick="toggle:test1,+;toggle:test2,+;toggle:test3,+;" /></span>)<br />
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="186" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Source code of the current Example:</span><br /><br />
                        <table width="484" border="0" cellpadding="0" cellspacing="2">
                          <tr>
                            <td width="236" valign="top" class="bg11blk">
                              <x:toggle id="toggle_ex"><br />
                                <x:tg>This is sentence number 1.</x:tg><br />
                                <x:tg>And here is number 2</x:tg><br />
                                <x:tg>And now number 3!</x:tg><br />
                              </x:toggle><br />
                              ...<br />
                            </td>
                            <td width="1" valign="top" class="bglbl1"> </td>
                            <td width="236" valign="top" class="bg11blk">
                              <x:textoutput value="Forwards"<br />
                                  onclick="toggle:toggle_ex,+;" /><br />
                              <x:textoutput value="Back"<br />
                                  onclick="toggle:toggle_ex,-;" /><br />
                              <x:textoutput value="Go to Position 1"<br />
                                  onclick="toggle:toggle_ex,0;" /><br />
                              <x:textoutput value="Go to Position 2"<br />
                                  onclick="toggle:toggle_ex,1;" /><br />
                              <x:textoutput value="Go to Position 3"<br />
                                  onclick="toggle:toggle_ex,2;" />
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                    <td width="243" height="186" align="center" valign="top" class="bg11blk">
                      <div class="margin1">
                        <table width="234" align="center" border="0" cellspacing="0" cellpadding="0">
                          <x:insert template="elements_templ"></x:insert>
                          <tr>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															x:toggle<br />x:tg<br />x:textoutput
                            </td>
                            <td width="75" valign="top" class="bgwh11blk">
															id<br />value<br />class<br />style
                            </td>
                            <td width="84" valign="top" class="bgwh11blk">
															onclick
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr> 
                </table>
              </x:tg>
<!-- /////////////// CHAPTER 5 - Forms /////////////// -->
              <x:tg id="chap5">
                <table width="737" border="0" cellspacing="0" cellpadding="0">
                  <tr> 
                    <td width="494" height="162" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Example:</span><br />
                        <div align="center">
                          <table border="0" cellpadding="4" cellspacing="4">
                            <tr>
                              <td valign="top" rowspan="2" bgcolor="#547CAA">
                                <x:radio id="less5_3">
                                  <x:item class="wht12">1</x:item>
                                  <x:item class="wht12">2</x:item>
                                  <x:item class="wht12">3</x:item>
                                </x:radio>
                              </td>
                              <td valign="top" rowspan="2" bgcolor="#547CAA">
                                <x:checkbox id="less5_4">
                                  <x:item class="wht12">1</x:item>
                                  <x:item class="wht12">2</x:item>
                                  <x:item class="wht12">3</x:item>
                                </x:checkbox>
                              </td>
                              <td valign="top" align="center" bgcolor="#547CAA">
                                <x:textinput value="I am a textinput field" size="19" class="dred12b" />
                              </td>
                              <td valign="top" align="center" bgcolor="#547CAA">
                                <x:listbox id="less5_2" rows="2" class="dred12b">
                                  <x:option value="1">One</x:option>
                                  <x:option value="2">Two</x:option>
                                  <x:option value="3">Three</x:option>
                                </x:listbox>
                              </td>
                              <td valign="top" align="center" bgcolor="#547CAA">
                                <x:textarea rows="1" cols="5" class="dred12b">textarea</x:textarea>
                              </td>
                            </tr>
                            <tr>
                              <td valign="top" align="center" bgcolor="#547CAA">
																<x:textoutput value="I am a textoutput field" class="wht14b" />
                              </td>
                              <td valign="top" align="center" bgcolor="#547CAA">
                                <x:pulldown id="less5_1" class="dred12b">
                                  <x:option>One</x:option>
                                  <x:option>Two</x:option>
                                  <x:option>Three</x:option>
                                </x:pulldown>
                              </td>
                              <td valign="top" align="center" bgcolor="#547CAA">
                                <x:button value="Button" class="wht14b" />
                              </td>
                            </tr>
                          </table>
                        </div><br />
                        <div align="left">
                          In contrast to HTML 4.0,  these new tags have great potential.
                        </div>
                      </div>
                    </td>
                    <td rowspan="2" width="243" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="dblu14b">Theory:</span><br /><br />
                        Since their introduction in 1993, HTML Forms have not changed significantly. With the emergence of  
												XHTML/XML, a fundamental reform of online forms is now possible.<br /><br />
                        Every form tag in the Form Module (textinput, textoutput, textarea, pulldown, button, etc...) needs 
												to be nested in a form tag (<span class="dred"><x:form></x:form></span>).
                        Otherwise, the form element can't function.<br /><br />
                        If a form control should send its value to the server on submission, then the form control's 
												<span class="b">send </span> attribute
                        must be set to <span class="b">yes</span>, e.g.: 
												<span class="dred"><x:textinput id="name" send="yes" /></span><br /><br />
                        <x:toggle id="return_tog2">
                          <x:hidden />
                          <x:tg>
                            <div align="right">
                              <x:textoutput value="Return to the lesson!" onclick="toggle:chapter_tog,chap8;toggle:navigation,l_08;toggle:return_tog2,0;" class="dred10b" />  
                            </div>
                          </x:tg>
                        </x:toggle>
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="152" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Frequently Asked Questions:</span><br /><br />
                        <span class="dred">
                          <span class="b">Q:</span>  Can I use the XML-UI forms the same way as the HTML 4.0 forms?
                        </span><br />
                        <span class="b">A:</span>   Yes. The <span class="dred"><x:form></span> tag uses the same 
												attributes,<br />e.g., <span class="dred">method="", action="", </span>
                        or <span class="dred">enctype="" </span> as HTML 4.0.<br />
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="186" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Source code of the current Example:</span><br />
                        <div align="right">
													<x:toggle id="less5_codenav">
                            <x:textoutput value="next page (2/2)" onclick="toggle:less5_code,+;toggle:less5_code2,+;toggle:less5_codenav,+;" class="dred10b" />
                            <x:textoutput value="previous page (1/2)" onclick="toggle:less5_code,+;toggle:less5_code2,+;toggle:less5_codenav,+;" class="dred10b" />
													</x:toggle>
                        </div><br />
                        <table width="484" border="0" cellpadding="0" cellspacing="2">
                          <tr>
                            <td width="236" valign="top" class="bg11blk">
                              <x:toggle id="less5_code">
                                <x:tg>
                                  <x:radio id="MyRadio"><br />
                                   <x:item style="color:#ffffff">1</x:item><br />
                                   <x:item style="color:#ffffff">2</x:item><br />
                                   <x:item style="color:#ffffff">3</x:item><br />
                                  </x:radio style="color:#ffffff"><br />
                                  ...<br />
                                  <x:textinput value="I am a textinput field" /><br />
                                  ...<br />
                                </x:tg>
                                <x:tg>
                                  <x:listbox id="MyListbox" rows="2"><br />
                                   <x:option value="1">One</x:option><br />
                                   <x:option value="2">Two</x:option><br />
                                   <x:option value="3">Three</x:option><br />
                                  </x:listbox><br />
                                  ...<br />
                                  <x:textarea rows="2" cols="4"  /><br />
                                  ...<br />
                                </x:tg>
                              </x:toggle>
                            </td>
                            <td width="1" valign="top" class="bglbl1"> </td>
                            <td width="236" valign="top" class="bg11blk">
                              <x:toggle id="less5_code2">
                                <x:tg>
                                  <x:checkbox id="MyCheckbox"><br />
                                   <x:item>1</x:item><br />
                                   <x:item>2</x:item><br />
                                   <x:item>3</x:item><br />
                                  </x:checkbox><br />
                                  ...<br />
                                  <x:textoutput value="I am a textoutput field" /><br />
                                  ...<br />
                                </x:tg>
                                <x:tg>
                                  <x:pulldown id="MyPulldown"><br />
                                   <x:option>One</x:option><br />
                                   <x:option>Two</x:option><br />
                                   <x:option>Three</x:option><br />
                                   </x:pulldown><br />
                                  ...<br />
                                  <x:button value="Button" /><br />
                                </x:tg>
                              </x:toggle>
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                    <td width="243" height="186" align="center" valign="top" class="bg11blk">
                      <div class="margin1">
                        <table width="234" align="center" border="0" cellspacing="0" cellpadding="0">
                          <x:insert template="elements_templ"></x:insert>
                          <tr>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															x:radio<br />x:checkbox<br />x:item<br />x:listbox<br />x:pulldown<br />x:option<br />
															x:textinput<br />x:textoutpt<br />x:textarea<br />x:button
                            </td>
                            <td width="75" valign="top" class="bgwh11blk">
															id<br />value<br />size<br />class<br />style<br />rows<br />cols
                            </td>
                            <td width="84" valign="top" class="bgwh11blk"> </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr> 
                </table>
              </x:tg>
<!-- /////////////// CHAPTER 6 - Forms & Toggles /////////////// -->
              <x:tg id="chap6">
                <table width="737" border="0" cellspacing="0" cellpadding="0">
                  <tr> 
                    <td width="494" height="162" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Example:</span>
                        <div align="center">
                          <table width="480" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                              <td colspan="3" align="center" height="23" class="bgblank">
                                <span class="dblu14b">Shipping address:</span>
                              </td>
                            </tr>
                            <tr>
                              <td width="225" height="25" align="right" class="bgblank">
                                <x:toggle id="ship1" shared="yes">
                                  <x:textoutput value="Name:" onclick="toggle:ship1,1;" class="dred12b" />
                                  <x:textinput size="9" onblur="toggle:ship1,0;" class="dred12b" />
                                </x:toggle>
                              </td>
                              <td width="25" align="center" class="bgblank"> | </td>
                              <td width="225" class="bgblank">
                                <x:toggle id="ship2" shared="yes">
                                  <x:textoutput value="Street:" onclick="toggle:ship2,1;" class="dred12b" />
                                  <x:textinput size="9" onblur="toggle:ship2,0;" class="dred12b" />
                                </x:toggle>
                              </td>
														</tr>
                          </table>
                          <table width="480" border="0" cellspacing="0" cellpadding="0">
														<tr>
                              <td width="175" height="25" align="right" class="bgblank">
                                <x:toggle id="ship3" shared="yes">
                                  <x:textoutput value="Zip:" onclick="toggle:ship3,1;" class="dred12b" />
                                  <x:textinput size="9" onblur="toggle:ship3,0;" class="dred12b" />
                                </x:toggle>
                              </td>
                              <td width="20" height="25" align="center" class="bgblank"> | </td>
                              <td width="90" height="25" align="center" class="bgblank">
                                <x:toggle id="ship4" shared="yes">
                                  <x:textoutput value="City:" onclick="toggle:ship4,1;" class="dred12b" />
                                  <x:textinput size="9" onblur="toggle:ship4,0;" class="dred12b" />
                                </x:toggle>
                              </td>
                              <td width="20" height="25" align="center" class="bgblank"> | </td>
                              <td width="175" height="25" class="bgblank">
                                <x:toggle id="ship5" shared="yes">
                                  <x:pulldown id="ship_list" class="dred12b">
                                    <x:option value="United States" onclick="toggle:ship5,1;">United States</x:option>
                                    <x:option value="Canada" onclick="toggle:ship5,1;">Canada</x:option>
                                    <x:option value="Albania" onclick="toggle:ship5,1;">Albania</x:option>
                                    <x:option value="Algeria" onclick="toggle:ship5,1;">Algeria</x:option>
                                    <x:option value="American-Samoa" onclick="toggle:ship5,1;">American Samoa</x:option>
                                    <x:option value="Andorra" onclick="toggle:ship5,1;">Andorra</x:option>
                                    <x:option value="Argentina" onclick="toggle:ship5,1;">Argentina</x:option>
                                    <x:option value="Angola" onclick="toggle:ship5,1;">Angola</x:option>
                                    <x:option value="Anguilla" onclick="toggle:ship5,1;">Anguilla</x:option>
                                    <x:option value="Antigua-and-Barbuda" onclick="toggle:ship5,1;">Antigua and Barbuda</x:option>
                                    <x:option value="Armenia" onclick="toggle:ship5,1;">Armenia</x:option>
                                    <x:option value="Aruba" onclick="toggle:ship5,1;">Aruba</x:option>
                                    <x:option value="Ascension-Island" onclick="toggle:ship5,1;">Ascension Island</x:option>
                                    <x:option value="Australia" onclick="toggle:ship5,1;">Australia</x:option>
                                    <x:option value="Austria" onclick="toggle:ship5,1;">Austria</x:option>
                                    <x:option value="Hey, it is just an example" onclick="toggle:ship5,1;">etc, etc...</x:option>
                                    <x:option value="" onclick="toggle:ship5,2;">other...</x:option>
                                  </x:pulldown>
                                  <x:textoutput onclick="toggle:ship5,0;" class="dred12b" />
                                  <x:textinput size="9" onchange="toggle:ship5,1;" class="dred12b" />
                                </x:toggle>
                              </td>
                            </tr>
                          </table>
                        </div><br />
                        Forms uses event handlers in connection with other XML-UI modules (Toggle, Template, Calc, ...) to achieve a very high level of flexibility.
                      </div>
                    </td>
                    <td rowspan="2" width="243" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="dblu14b">Theory:</span><br /><br />
                        Using Toggle, Forms become more dynamic and contribute to an enhanced visual experience on your Web 
												site.<br /><br />
                        If you want to toggle between an input field and an output field (see example left), you need an 
												event handler. So far, we've only looked at
                        <span class="dred">onclick="" </span> which requires clickable objects (e.g., button, 
												text, pulldown field, etc...). But you can't click on an input field.
                        You can only leave it using the <span class="b">mouse</span> or <span class="b">tab keys</span>. 
												The appropriate event handler to use here is <span class="dred">onchange=""</span>.<br /><br />
                        The attribute <span class="dred">shared="yes" </span> lets toggle groups within a toggle 
												share currently
                        chosen values. This means that chosen values can be modified to be viewed in another format
                        (e.g., pulldown to textoutput).
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="152" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Frequently Asked Questions:</span><br /><br />
                        <span class="dred">
                          <span class="b">Q:</span>  It might be useful to put a toggle inside of an already existing 
													toggle group.  Are toggles within toggles ok?
                        </span><br />
                        <span class="b">A:</span>   Of course. The are only two basic rules to watch out for: properly 
												nested tags (e.g., <span class="dred"><b><x:tg></x:tg></b> </span> NOT
                        <span class="dred"><x:tg><b></x:tg></b></span>) and making sure that the 
												IDs properly correspond to the commands in the event handler
                        (watch out for typos!).<br />
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="186" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Source code of the current Example:</span><br />
                        <x:toggle id="less6_code">
                          <x:tg>
                            <div align="right">
                              <x:textoutput value="next page (2/3)" onclick="toggle:less6_code,+;" class="dred10b" />  
                            </div><br />
                            <x:form><br />
                            Shipping address:<br /><br />
                            <x:toggle id="ship1" shared="yes"><br />
                             <x:textoutput value="Name:" onclick="toggle:ship1,1;"  style="color:#990000" /><br />
                             <x:textinput onchange="toggle:ship1,0;" /><br />
                            </x:toggle>  | <br />
                            <x:toggle id="ship2" shared="yes"><br />
                             <x:textoutput value="Street:" onclick="toggle:ship2,1;" style="color:#990000" /><br />
                             <x:textinput onchange="toggle:ship2,0;" /><br />
                            </x:toggle> | 
                          </x:tg>
                          <x:tg>
                            <div align="right">
                              <x:textoutput value="previous page (1/3)" onclick="toggle:less6_code,-;" class="dred10b" />
                               | 
                              <x:textoutput value="next page (3/3)" onclick="toggle:less6_code,+;"  class="dred10b"/>  
                            </div><br />
                            <x:toggle id="ship3" shared="yes"><br />
                             <x:textoutput value="Zip:" onclick="toggle:ship3,1;" style="color:#990000" /><br />
                             <x:textinput onchange="toggle:ship3,0;" /><br />
                            </x:toggle> | <br />
                            <x:toggle id="ship4" shared="yes"><br />
                             <x:textoutput value="City:" onclick="toggle:ship4,1;" style="color:#990000" /><br />
                             <x:textinput onchange="toggle:ship4,0;" /><br />
                            </x:toggle> | 
                          </x:tg>
                          <x:tg>
                            <div align="right">
                              <x:textoutput value="previous page (2/3)" onclick="toggle:less6_code,-;" class="dred10b" />
                               | 
                              <x:textoutput value="first page again" onclick="toggle:less6_code,+;" class="dred10b" />  
                            </div><br />
                            <x:toggle id="ship5" shared="yes"><br />
                             <x:pulldown id="ship_list"><br />
                              <x:option value="United States" onclick="toggle:ship5,1;">United States</x:option><br />
                              <x:option value="Canada" onclick="toggle:ship5,1;">Canada</x:option><br />
                              ...<br />
                              <x:option value="" onclick="toggle:ship5,2;">other...</x:option><br />
                             </x:pulldown><br />
                             <x:textoutput onclick="toggle:ship5,0;" style="color:#990000" /><br />
                             <x:textinput onchange="toggle:ship5,1;" /><br />
                            </x:toggle></x:form><br />
                          </x:tg>
                        </x:toggle>
                      </div>
                    </td>
                    <td width="243" height="186" align="center" valign="top" class="bg11blk">
                      <div class="margin1">
                        <table width="234" align="center" border="0" cellspacing="0" cellpadding="0">
                          <x:insert template="elements_templ"></x:insert>
                          <tr>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															x:textinput<br />x:textoutput<br />x:pulldown<br />x:option
                            </td>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															id<br />value<br />shared<br />size<br />class<br />style
                            </td>
                            <td width="84" height="130" valign="top" class="bgwh11blk">
															onclick<br />onblur<br />onchange
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr> 
                </table>
              </x:tg>
<!-- /////////////// CHAPTER 7 - Forms & Templates /////////////// -->
							<x:tg id="chap7">
								<x:template id="fruits">
									  #  |fruit|
									<x:pulldown class="dred12b">
										<x:option value="1">1 kg</x:option>
										<x:option value="2">2 kg</x:option>
										<x:option value="3">3 kg</x:option>
									</x:pulldown>
								</x:template>
                <table width="737" border="0" cellspacing="0" cellpadding="0">
                  <tr> 
                    <td width="494" height="162" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Example:</span><br /><br />
                        <div align="center">
                          <table width="390" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                              <td colspan="3" height="35" class="bgblank">
                                <span class="dblu14b">You can order:</span>
                              </td>
                            </tr>
                            <tr>
                              <td align="center" width="130" class="bg11blk">
                                <x:insert template="fruits">
                                  <x:prop name="fruit">Apples</x:prop>
                                </x:insert>
                              </td>
                              <td align="center" width="130" class="bg11blk">
                                <x:insert template="fruits">
                                  <x:prop name="fruit">Bananas</x:prop>
                                </x:insert>
                              </td>
                              <td align="center" width="130" class="bg11blk">
                                <x:insert template="fruits">
                                  <x:prop name="fruit">Peaches</x:prop>
                                </x:insert>
                              </td>
                            </tr>
                          </table>
                        </div><br />
                        As we saw in Lesson 2 and 3, templates are used to avoid repetitive code.
                      </div>
                    </td>
                    <td rowspan="2" width="243" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="dblu14b">Theory:</span><br /><br />
                        Templates are just the thing for long complex questionnaires and form applications.  
												With the help of place holders set in pipes
                        (<x:textoutput value="see Lesson 3" onclick="toggle:chapter_tog,chap3;toggle:navigation,l_03;toggle:return_tog1,1;" class="dred10b" />),
                        the differing content in the separate input fields can be resolved.
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="152" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Frequently Asked Questions:</span><br /><br />
                        <span class="dred">
                          <span class="b">Q:</span>  Is there a maximum to the number of times a template can be used?
                        </span><br />
                        <span class="b">A:</span>  Because all Mozquito processes occur on the client, there will most 
												likely never be a problem. Of course, there is always a performance limit dependant on the 
                        PC being used. Huge numbers of templates can sometimes slow down performance despite the reduced code 
												length.<br />
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="186" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Source code of the current Example:</span><br /><br />
                        <table width="484" border="0" cellpadding="0" cellspacing="2">
                          <tr>
                            <td width="236" valign="top" class="bg11blk">
                              <x:template id="fruits"><br />
                                #  |fruit|<br />
                               <x:pulldown><br />
                                <x:option value="1">1 kg</x:option><br />
                                <x:option value="2">2 kg</x:option><br />
                                <x:option value="3">3 kg</x:option><br />
                               </x:pulldown><br />
                              </x:template>
                            </td>
                            <td width="1" valign="top" class="bglbl1"> </td>
                            <td width="236" valign="top" class="bg11blk">
                              <x:form><br />
                              You can order:<br /><br />
                              <x:insert template="fruits"><br />
                               <x:prop name="fruit">Apples</x:prop><br />
                              </x:insert><br />
                              <x:insert template="fruits"><br />
                               <x:prop name="fruit">Bananas</x:prop><br />
                              </x:insert><br />
                              <x:insert template="fruits"><br />
                               <x:prop name="fruit">Peaches</x:prop><br />
                              </x:insert>
                              </x:form><br />
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                    <td width="243" height="186" align="center" valign="top" class="bg11blk">
                      <div class="margin1">
                        <table width="234" align="center" border="0" cellspacing="0" cellpadding="0">
                          <x:insert template="elements_templ"></x:insert>
                          <tr>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															x:pulldown<br />x:option<br />x:template<br />x:insert<br />x:prop
                            </td>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															id<br />template<br />name<br />value<br />class<br />style
                            </td>
                            <td width="84" height="130" valign="top" class="bgwh11blk"> </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr> 
                </table>
              </x:tg>
<!-- /////////////// CHAPTER 8 - Calc /////////////// -->
              <x:tg id="chap8">
                <table width="737" border="0" cellspacing="0" cellpadding="0">
                  <tr> 
                    <td width="494" height="162" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Example:</span>
                        <div align="center">
                          <table width="480" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                              <td width="265" height="25" align="right" class="bgblank"><span class="dblu14b">3 + 5 * 2 = </span></td>
                              <td width="215" align="left" valign="middle" class="bgblank">
                                <x:toggle id="trick">
                                  <x:hidden />
                                  <x:tg>
                                    <x:calc id="example3" term="3 + 5 * 2">
                                      <x:textoutput class="dred14b" />
                                    </x:calc>
                                  </x:tg>
                                </x:toggle>
                              </td>
                            </tr>
                            <tr>
                              <td colspan="2" height="35" align="center" class="bgblank">
                                <x:button value="process" class="blk14" onclick="toggle:trick,1;" />
                              </td>
                            </tr>
                          </table>
                        </div><br />
                        The Calc Module is another example of Mozquito technology in action.
                      </div>
                    </td>
                    <td rowspan="2" width="243" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="dblu14b">Theory:</span><br /><br />
                        Mathematical functions are everywhere on the Web. But we wanted to design a program that enables 
												client side functionality that doesn't have to communicate directly with the server.<br /><br />
                        The <span class="dred"><x:calc></span> tag itself can not display results.  To show a result, 
												you need to nest a <span class="dred"><x:textoutput /> </span> in 
                        the calc tag. Remember that a textoutput field
                        (<x:textoutput value="see Forms Module Lesson 5" onclick="toggle:chapter_tog,chap5;toggle:navigation,l_05;toggle:return_tog2,1;" class="dred10b" />)
                        needs to be inside a <span class="dred"><x:form></span> tag.<br /><br />
                        The attribute <span class="dred">term=""</span> is used in the calc tag to describe 
												mathematical operations (+, -, *, /). The symbols are known mathematical
                        expressions in ECMAscript (for example, math.sqrt (number) is the square). 
 												<span class="dblu14b">TIP: </span> Do not use these characters in IDs or you may have problems 
												using these IDs in calc elements.
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="152" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Frequently Asked Questions:</span><br /><br />
                        <span class="dred">
                          <span class="b">Q:</span>  Can Mozquito do complex calculations like multiplying 
													two sums (4+3)x(8+1)?
                        </span><br />
                        <span class="b">A:</span>   You can use brackets.  In this case the syntax is like this:<br />
                        <span class="dred"><x:calc id="test" term=" ( 4 + 3 ) * ( 8 + 1 ) "><x:textoutput id="result" /></x:calc></span><br />
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="186" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Source code of the current Example:</span><br /><br />
                          3 + 5 * 2 =<br />
                          <x:calc id="example3" term="3 + 5 * 2"><br />
                           <x:textoutput  /><br />
                          </x:calc>
                      </div>
                    </td>
                    <td width="243" height="186" align="center" valign="top" class="bg11blk">
                      <div class="margin1">
                        <table width="234" align="center" border="0" cellspacing="0" cellpadding="0">
                          <x:insert template="elements_templ"></x:insert>
                          <tr>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															x:calc<br />x:textoutput
                            </td>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															id<br />term<br />value<br />class<br />style
                            </td>
                            <td width="84" height="130" valign="top" class="bgwh11blk">onclick</td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr> 
                </table>
              </x:tg>
<!-- /////////////// CHAPTER 9 - Calc & Forms /////////////// -->
              <x:tg id="chap9">
                <table width="737" border="0" cellspacing="0" cellpadding="0">
                  <tr> 
                    <td width="494" height="162" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Example:</span>
                        <div align="center">
                          <table width="240" border="0" cellspacing="0" cellpadding="0">
														<tr>
															<td width="240" height="70" align="center" valign="middle" class="dblu14b">
																Quantity x Price:<br /><br />
	                           			<x:pulldown id="calc_price" class="dred12b">
  	       	                    		<x:option value="0">choose</x:option>
    	      	                   		<x:option value="1">1</x:option>
      	      	                 		<x:option value="2">2</x:option>
        	      	               		<x:option value="3">3</x:option>
                           			</x:pulldown>
                           			* 3 $ = 
                            		<x:calc id="calc_it" term="calc_price * 3">
                              		<x:textoutput class="dred14b" />
                            		</x:calc><span class="dred14b"> $</span>
															</td>
														</tr>
                          </table>
                        </div>
                      </div>
                    </td>
                    <td rowspan="2" width="243" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="dblu14b">Theory:</span><br /><br />
                        Instead of putting a number inside a term attribute, you can input a form ID.  When the user 
												activates the form element (e.g., a pulldown) inside of the calculation and chooses a 
                        listed amount, the Calc object takes this value and calculates it accordingly. This is how 
												immediate price calculations are made directly on your Web page.
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="152" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Frequently Asked Questions:</span><br /><br />
                        <span class="dred">
                          <span class="b">Q:</span>  So can the result of a calculation inside the calc tag be used 
													as a variable in further calculations, instead of being directly shown in a text output field?
                        </span><br />
                        <span class="b">A:</span>   Of course. With calc, you can do subtotals and cascading 
												calculations. Just make sure the calc tag id where the suboperation takes place is also put into 
												the next calc object so that the calculation can continue.<br />                        
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="186" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Source code of the current Example:</span><br /><br />
                        Quantity x Price:<br /><br />
                        <x:pulldown id="calc_price"><br />
                          <x:option value="0">choose</x:option><br />
                          <x:option value="1">1</x:option><br />
                          <x:option value="2">2</x:option><br />
                          <x:option value="3">3</x:option><br />
                        </x:pulldown><br />
                        * 3$ =<br />
                        <x:calc id="calc_it" term="calc_price * 5"><br />
                          <x:textoutput /><br />
                        </x:calc>$<br />
                      </div>
                    </td>
                    <td width="243" height="186" align="center" valign="top" class="bg11blk">
                      <div class="margin1">
                        <table width="234" align="center" border="0" cellspacing="0" cellpadding="0">
                          <x:insert template="elements_templ"></x:insert>
                          <tr>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															x:calc<br />x:textoutput<br />x:pulldown<br />x:option
                            </td>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															id<br />term<br />value<br />class<br />style
                            </td>
                            <td width="84" height="130" valign="top" class="bgwh11blk"> </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr> 
                </table>
              </x:tg>
<!-- /////////////// CHAPTER 10 - Calc & Template /////////////// -->
              <x:tg id="chap10">
                <x:template id="book_sell">
                  <td width="300" align="left" class="blk11">|author| - |work| (|price| $)</td>
                  <td width="50" align="right" bgcolor="#EBF2F7" class="blk11"><x:calc id="book_calc" term="|price|+2"><x:textoutput class="blk11" /></x:calc></td>
                  <td width="50" bgcolor="#EBF2F7" class="blk11"> $</td>
                </x:template>
                <table width="737" border="0" cellspacing="0" cellpadding="0">
                  <tr> 
                    <td width="494" height="162" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Example:</span><br /><br />
                        <div align="center">
                          <table width="400" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                              <td width="300" align="left" class="blk11"><span class="dred14b">Bookworm's catalogue:</span></td>
                              <td colspan="2" width="100" align="center" class="blk11"><span class="dblu12b">incl. shipping:</span></td>
                            </tr>
                            <tr>
                              <x:insert template="book_sell">
                                <x:prop name="author">Graham Greene</x:prop>
                                <x:prop name="work">The Quiet American</x:prop>
                                <x:prop name="price">12</x:prop>
                              </x:insert>
                            </tr>
                            <tr>
                              <x:insert template="book_sell">
                                <x:prop name="author">Paul Theroux</x:prop>
                                <x:prop name="work">Kowloon Tong</x:prop>
                                <x:prop name="price">7</x:prop>
                              </x:insert>
                            </tr>
                            <tr>
                              <x:insert template="book_sell">
                                <x:prop name="author">Somerset Maugham</x:prop>
                                <x:prop name="work">The Trembling Of A Leaf</x:prop>
                                <x:prop name="price">6</x:prop>
                              </x:insert>
                            </tr>
                            <tr>
                              <x:insert template="book_sell">
                               	<x:prop name="author">Paul Bowles</x:prop>
                                <x:prop name="work">Allal</x:prop>
                              	<x:prop name="price">11</x:prop>
                            	</x:insert>
                            </tr>
                          </table>
                        </div><br />
                        <span class="bg11blk">More efficient calculations with the help of the Template Module.</span>
                      </div>
                    </td>
                    <td rowspan="2" width="243" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="dblu14b">Theory:</span><br /><br />
                        Even templates can be used to create complex results in the Calc Module. By using piped place 
												holders inside a calculation, you can create long price lists with the help of different
                        templates. This method can result in code that is easily up to a third less than normal code.
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="152" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Frequently Asked Questions:</span><br /><br />
                        <span class="dred">
                          <span class="b">Q:</span>  Can more than two modules be used in the same application?
                        </span><br />
                        <span class="b">A:</span>  Yes. A dynamically created comprehensive price list could 
												theoretically include every XML-UI module: The Form Module for the text input fields, the 
                        Template Module for structuring the code, the Calc Module for client side calculations, etc. 
												In the Mozquito Examples you can find various applications of XML-UI, giving you just a small taste
												of what you can do!<br />
                      </div>
                    </td>
                  </tr>
                  <tr> 
                    <td width="494" height="186" align="left" valign="top" class="bg11blk">
                      <div class="margin1">
                        <span class="lblu14b">Source code of the current Example:</span><br /><br />
                        <table width="484" border="0" cellpadding="0" cellspacing="2">
                          <tr>
                            <td width="236" valign="top" class="bg11blk">
                              <x:template id="book_sell"><br />
                               <td>|author| - |work| (|price|$)  </td><br />
                               <td bgcolor="#c0c0c0" align="right"><br />
                               <x:calc id="book_calc" term="|price| + 2"><br />
                               <x:textoutput /></x:calc>$</td><br />
                              </x:template><br />
                              <table border="0"<br />
                                cellpadding="0" cellspacing="0"><br />
                               <tr><td>Bookworm's catalogue:</td><br />
                                <td>incl. shipping:</td></tr><br />
                               <tr><br />
                            </td>
                            <td width="1" valign="top" class="bglbl1"> </td>
                            <td width="236" valign="top" class="bg11blk">
                               <x:insert template="book_sell"><br />
                               <x:prop name="author">Graham Greene</x:prop><br />
                               <x:prop name="work">The Quiet American</x:prop><br />
                               <x:prop name="price">12</x:prop><br />
                               </x:insert><br />
                               </tr><br />
                               etc...<br />
                               </table>
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                    <td width="243" height="186" align="center" valign="top" class="bg11blk">
                      <div class="margin1">
                        <table width="234" align="center" border="0" cellspacing="0" cellpadding="0">
                          <x:insert template="elements_templ"></x:insert>
                          <tr>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															x:template<br />x:insert<br />x:prop<br />x:calc<br />x:textoutput
                            </td>
                            <td width="75" height="130" valign="top" class="bgwh11blk">
															id<br />template<br />name<br />term<br />class<br />style<br />align<br />bgcolor
                            </td>
                            <td width="84" height="130" valign="top" class="bgwh11blk"> </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr> 
                </table>
              </x:tg>
<!-- /////////////// CHAPTER 11 - Summary /////////////// -->
						<x:tg id="chap11" onshow="toggle:nextbutton;" onhide="toggle:nextbutton;">
							<table width="737" border="0" cellspacing="0" cellpadding="0">
								<tr> 
									<td width="494" height="162" align="left" valign="top" class="bg11blk">
										<div class="margin1">
											<span class="lblu14b">Congratulations! You made it!</span><br /><br />
											This very short tutorial is meant only to be a limited overview of the world of XML-UI. 
											There are even more tags, attributes and event handlers to be found in XML-UI.
											<br /> <br /> To continue 
											learning about Mozquito XML-UI, 
											we recommend checking out the source code of the various XML-UI sites on the example pages on 
											the Mozquito Web site. The XML-UI Reference (available as a 
											.pdf file, as well as the XML-UI Quick Ref Card available as .pdf file 
											 are also available. It's definitely worth 
											checking our site for the latest products and feature updates.
										</div>
									</td>
									<td rowspan="2" width="243" class="bgblank"> </td>
									</tr>
									<tr> 
										<td width="494" height="152" class="bgblank"> </td>
									</tr>
									<tr> 
										<td width="494" height="186" class="bgblank"> </td>
										<td width="243" height="186" class="bgblank"> </td>
									</tr>
								</table>
							</x:tg>
						</x:toggle>
					</x:form>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>