main/tutorial.php
author Grauw
Sun Mar 08 04:26:25 2009 +0100 (2009-03-08)
changeset 4 d0d63d87ed2b
child 5 0cfcc0bf3ed6
permissions -rw-r--r--
Some additions to scrolling article.
     1 <?php include $_SERVER['DOCUMENT_ROOT'].'/scripts/functions.php'; addHTTPHeader(); ?>
     2 <!DOCTYPE html
     3      PUBLIC "-//W3C//DTD XHTML 1.1//EN"
     4      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
     5 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
     6 <head>
     7   <title>MSX Assembly Page</title>
     8   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
     9   <meta http-equiv="Content-Style-Type" content="text/css" />
    10   <?php addStyles(); ?>
    11 </head>
    12 <body id="msxasm">
    13 <?php addHeader(); ?>
    14 
    15 
    16 
    17 <h1>MSX Assembly Page article tutorial</h1>
    18 
    19 <p>On this page I'll try to explain the structure of a document. Check <a href="tutorial.html">this</a> link for the plain document, without any added headers and footers. You can see how everything is done in this (and other) page's source code.</p>
    20 
    21 <p>Well then, let's sum up the 'rules' you have to stick to when you are working on the MAP on a somewhat regular basis (as in, you're a member of the MAP team :)). These are here to avoid that two people work on the same file at the same time, creating inconsistency. First of all, the <i>main.html</i>, <i>planned.html</i> and other section files should be downloaded, edited and uploaded as fast as possible, to avoid conflicts. Aside from those and the articles which are yours or of which you indicated that you're working on it, everything else is off-limits, so no tampering with the style sheet index script, or someone else's article. If you want to do such things, for example because you'd like to see an addition to the style sheet, please consult me (Grauw) first.</p>
    22 
    23 <p>There is a file called <i>planned.html</i> in the root directory, everything which is being worked on or will be worked on in the future should be put in there. If you have an idea for an article (which you not necessarily have to write yourself), put it in that file, if you need an idea for an article, check out that file. If you are working or are going to work on a certain item, add your name behind the specific article between &lt;em&gt;<em>emphasis</em>&lt;/em&gt; tags to 'allocate' it for yourself. You can optionally include some additional info like a progress indication. Feel free to add new subsections when needed. You can optionally use the 'wip' directory for saving work-in-progress texts, and for testing the layout.</p>
    24 
    25 <p>Once an article is more or less done, and fit for publishing, you can remove it from <i>planned.html</i>, and put it online on the site. Think of an appropriate section and category within the site structure, and if it isn't there yet, add it. Try to keep the organization as logical as possible. Then upload your file into the directory of the section you've chosen, and add a link to it in the section overview file (like for example <i>articles.html</i>). If you've written the article yourself, or put a large effort in it like translating or transscribing, don't forget to add a 'MAP' bullet by changing the &lt;li&gt; tag into &lt;li class="map"&gt;, so that people can see that it is authored by us and can exclusively be found on the MAP.</p>
    26 
    27 <p>Furthermore, if you publish or update a text (unless it's a really minor update), you need to add it to the Last Updates section in <i>main.html</i> so that people can easily see what's been done recently, and also to keep ourselves informed about what the rest has been doing. The updates block is present right after the document title, and if you take a short look at the code, the method of adding an entry should be self-explanatory. Don't forget to change the date, by the way. If the list becomes too long, you can comment out one or two of the latest updates to make it a little shorter again. You can also put update blocks in your texts, which can be quite useful aswell. A block inside your text can hold details about the more minor updates not mentioned of the mainpage, and gives a quick overview of the recent changes of that article only. The method of adding such a block is explained in the example updates block below.</p>
    28 
    29 
    30 <h2>Let's get started...</h2>
    31 
    32 <p>...with the layout tags you should use. Every page on this site is made from a combination of XHTML, CSS2, and Unicode (UTF-8). Here are links to the <a href="http://www.w3.org/TR/html4">HTML documentation</a>, the <a href="http://www.w3.org/TR/xhtml11/">XHTML documentation</a>, and the <a href="http://www.w3.org/TR/REC-CSS2">CSS2 documentation</a>. The HTML and CSS2 docs are quite easy to use once you know how they're structured.</p>
    33 
    34 <p>XHTML Strict basically works as follows: it is largely the same as HTML Strict (meaning HTML without any of the tags marked Deprecated), with the difference that every tag has to be terminated with a slash (/). So if you write down a &lt;li&gt;, always close it with a &lt;/li&gt;, and the same goes for &lt;p&gt;. Also, don't write &lt;img src="image.jpg"&gt; and &lt;br&gt; but &lt;img src="image.jpg" /&gt; and &lt;br /&gt;. The space before the / in single tags is important for HTML compatibility. Another requirement of XHTML is that all tags shoult be lowercase. And on a sidenote, don't forget that img tags always need an alt="description" property. You can check the correctness of your text by putting it online (in the wip directory), and running it through the <a href="http://validator.w3.org/">W3C MarkUp Validation Service</a>.</p>
    35 
    36 <p>P.S. For HTML file editing purposes Notepad suits me just fine, but I can imagine getting tired of typing tags sometimes, especially if you need to do some major editing job with lots of search/replace stuff and all. In that case I can recommend the HTML editor 'HTML Kit', I have good experiences with 
    37 it.</p>
    38 
    39 <p>Well then, here goes the layout tags explanation:</p>
    40 
    41 
    42 <h1>&lt;h1&gt;Main topic&lt;/h1&gt;</h1>
    43 
    44 <div class="updates">
    45 <h1>Latest updates:</h1>
    46 
    47 <p><em>4/1/1900</em><br />
    48 If you update an article, you can add an 'updates' block to your code. Just use the same code as is used here, and place it right after your first heading. By the way, the time notation format is day/month/year.</p>
    49 
    50 <p><em>3/1/1900</em><br />
    51 Also, when you update an article (if it's a really tiny update this isn't really necessary), place a notification in the <i>main.html</i> file, so that people who visit the page can see that it has been changed.</p>
    52 
    53 <p><em>2/1/1900</em><br />
    54 You should outdated updates between &lt;!-- comments --&gt;, so that they can still be viewed in the code for reference (updates usually become 'outdated' when the updates list is getting too long).</p>
    55 
    56 <!--
    57 <p><em>1/1/1900</em><br />
    58 outdated</p>
    59 -->
    60 </div>
    61 
    62 <p>You should put the main topic on the first line of your article, and you can also use it later on to indicate different chapters for example.</p>
    63 
    64 <h2>&lt;h2&gt;Sub head&lt;/h2&gt;</h2>
    65 
    66 <h3>&lt;h3&gt;Sub sub head ;p&lt;/h3&gt;</h3>
    67 
    68 <p>&lt;p&gt;&lt;b&gt;<b>Paragraph</b>&lt;/b&gt; blablablablabla blabla blablabla blablablablablablabla bla bla blabla. The word &lt;i&gt;<i>italics</i>&lt;/i&gt; is rather difficult, and &lt;em&gt;<em>emphasis</em>&lt;/em&gt; might need some er, emphasis :). blablablabla bla blabla blablablablablablablablablablabla blablablabla bla blablablabla &lt;a href=""&gt;<a href="">link</a>&lt;/a&gt; end of paragraph.&lt;/p&gt;</p>
    69 
    70 <h2>Some more tags (look at the code)</h2>
    71 
    72 <p>Let's display an unordered list of items now...</p>
    73 
    74 <ul>
    75 <li>first item</li>
    76 <li>second item</li>
    77 </ul>
    78 
    79 <p>And an ordered list...</p>
    80 
    81 <ol>
    82 <li>first item</li>
    83 <li>second item</li>
    84 </ol>
    85 
    86 <p>And a differently ordered list (use CSS!)...</p>
    87 
    88 <ol style="list-style-type: upper-roman">
    89 <li>first item</li>
    90 <li>second item</li>
    91 </ol>
    92 
    93 <p>Some preformatted text/tables/code:</p>
    94 
    95 <pre>
    96                 MSB  7   6   5   4   3   2   1   0  LSB
    97                    +---+---+---+---+---+---+---+---+
    98    Port #1         |A7 |A6 |A5 |A4 |A3 |A2 |A1 |A0 | First byte
    99                    +---+---+---+---+---+---+---+---+
   100 
   101 	xor a
   102 Label:	cpl
   103 	jp Label
   104 </pre>
   105 
   106 
   107 <p>And tables must only be used if you want to display a table...</p>
   108 
   109 <table>
   110 <tr>
   111   <th colspan="2">Name of table</th>
   112 </tr>
   113 <tr>
   114   <td>row 1</td>
   115   <td>Dude, what does my tattoo say</td>
   116 </tr>
   117 <tr>
   118   <td>row 2</td>
   119   <td>Sweet, what does my tattoo say</td>
   120 </tr>
   121 </table>
   122 
   123 
   124 <p>If you want to render a matrix-like table, add a class="matrix" to the table tag:</p>
   125 
   126 <table class="matrix">
   127 <tr>
   128   <th colspan="2">Name of table</th>
   129 </tr>
   130 <tr>
   131   <td>row 1</td>
   132   <td>Dude, what does my tattoo say</td>
   133 </tr>
   134 <tr>
   135   <td>row 2</td>
   136   <td>Sweet, what does my tattoo say</td>
   137 </tr>
   138 </table>
   139 
   140 
   141 <p>Also, a list of definitions (if you ever need it); Japanese lesson no. 1:</p>
   142 <dl>
   143    <dt>Ittadakimasu</dt>
   144    <dd>Japese say this when they are about to start dinner. In English, it can be somewhat translated like 'thank you for the food' (they don't really have a way of saying this, how impolite!). In Dutch it is simply 'Smakelijk eten'.</dd>
   145 </dl>
   146 
   147 
   148 <h2>Use unicode!</h2>
   149 
   150 <p>If you save your documents as Unicode (UTF-8), then you don't need to use HTML character entity tags (those annoying ones starting with an &amp; and ending with a ;, they can make your texts a bitch to read :)) for special characters like ë, ×, 日本語, ©, ½, etc. In notepad this can easily be done by selecting UTF-8 as the codepage in the Save As dialog. However, saving as ASCII is fine too, just as long as you don't use any special characters then.</p>
   151 
   152 <p>However you'll still need to use &amp;amp;, &amp;lt; and &amp;gt; for &amp;, &lt; and &gt;, because in HTML they are escape characters. They also need to be used inside preformatted (&lt;pre&gt;) tags.</p>
   153 
   154 
   155 <h2>Custom styles</h2>
   156 
   157 <p>You can also add custom styles to them to either block-level tags like &lt;div&gt; and &lt;p&gt; (p adds an empty line while div does not), or inline tags like &lt;span&gt; and &lt;i&gt; (generally you'll want to use the span tag). This can be done with a class="" or a style="" identifier. The former refers to predefined classes in the style sheet, while you can specify any CSS2 style in the latter.</p>
   158 
   159 <ul>
   160 <li>Example 1: &lt;span class="inv"&gt;<span class="inv">negative logic (invert)</span>&lt;/span&gt; is an overline usually used for indicating negative logic.</li>
   161 <li>Example 2: &lt;span style="color: rgb(255,0,0)"&gt;<span style="color: rgb(255,0,0)">red color</span>&lt;/span&gt;, if you must... you really shouldn't do colors, actually :), it is just an example of how to do a custom style. You can btw also use color: red, but that on a sidenote.</li>
   162 </ul>
   163 
   164 <p>Some more examples (note how they are not separated by an empty line because I use &lt;div&gt; instead of &lt;p&gt;) (although you'll generally want to use &lt;br /&gt; for common line breaks):</p>
   165 
   166 <div style="text-align: right">&lt;div style="text-align: right"&gt;right-aligned&lt;/div&gt;</div>
   167 <div style="text-align: center">&lt;div style="text-align: center"&gt;centered&lt;/div&gt;</div>
   168 
   169 <h3 style="clear:none">XHTML Conformance</h3>
   170 
   171 <p>Finally, here is an extract of a <a href="http://www.mozilla.org/projects/mathml/authoring.html">Mozilla.org document about MathML</a>, which gives a pretty good explanation of the XHTML basics compared to HTML.</p>
   172 
   173 <p>Here are the main rules to produce XHTML compliant
   174 documents that will work with Mozilla:</p>
   175 
   176 <ul>
   177   <li><b>XHTML tags are all lowercase</b> 
   178     <table border="1" width="75%">
   179       <tr> 
   180         <td width="50%" align="center"> 
   181           <p><b>HTML</b></p>
   182         </td>
   183         <td width="50%" align="center"> 
   184           <p><b>XHTML</b></p>
   185         </td>
   186 
   187       </tr>
   188       <tr> 
   189         <td width="50%"> 
   190           <p><b><code>&lt;H1 Align=&quot;CENTER&quot;&gt;Cauchy<br />
   191             Integral&lt;/H1&gt;</code></b></p>
   192         </td>
   193         <td width="50%"> 
   194           <p><b><code>&lt;<font color="red">h1 a</font>lign=&quot;<font color="red">center</font>&quot;&gt;Cauchy<br />
   195 
   196             Integral&lt;/<font color="red">h1</font>&gt;</code></b></p>
   197         </td>
   198       </tr>
   199     </table>
   200     <br />
   201   </li>
   202   <li><b>All non-empty elements must be terminated</b> 
   203     <table border="1" width="75%">
   204 
   205       <tr> 
   206         <td width="50%" align="center"> 
   207           <p><b>HTML</b></p>
   208         </td>
   209         <td width="50%" align="center"> 
   210           <p><b>XHTML</b></p>
   211         </td>
   212       </tr>
   213       <tr> 
   214         <td width="50%" valign="top"> <b> 
   215           <pre>
   216 
   217 &lt;p&gt;MathML
   218   &lt;ul&gt;
   219     &lt;li&gt;Presentation markup
   220     &lt;li&gt;Content markup
   221   &lt;/ul&gt;
   222             </pre>
   223           </b> </td>
   224         <td width="50%" valign="top"> <b> 
   225           <pre>
   226 
   227 &lt;p&gt;MathML
   228   &lt;ul&gt;
   229     &lt;li&gt;Presentation markup<font color="red">&lt;/li&gt;</font>
   230     &lt;li&gt;Content markup<font color="red">&lt;/li&gt;</font>
   231   &lt;/ul&gt;
   232 
   233 <font color="red">&lt;/p&gt;</font>
   234             </pre>
   235           </b></td>
   236       </tr>
   237     </table>
   238     <br />
   239   </li>
   240   <li><b>Empty elements must include a trailing slash (/)</b> 
   241     <table border="1" width="75%">
   242 
   243       <tr> 
   244         <td width="50%" align="center"> 
   245           <p><b>HTML</b></p>
   246         </td>
   247         <td width="50%" align="center"> 
   248           <p><b>XHTML</b></p>
   249         </td>
   250       </tr>
   251       <tr> 
   252         <td width="50%"> 
   253           <p><b><code>&lt;img src=&quot;myimage.gif&quot;&gt;</code></b></p>
   254         </td>
   255 
   256         <td width="50%"> 
   257           <p><b><code>&lt;img src=&quot;myimage.gif&quot; <font color="red">/</font>&gt;</code></b></p>
   258         </td>
   259       </tr>
   260       <tr> 
   261         <td width="50%"> 
   262           <p><b><code>&lt;br&gt;</code></b></p>
   263         </td>
   264         <td width="50%"> 
   265           <p><b><code>&lt;br <font color="red">/</font>&gt;</code></b></p>
   266         </td>
   267 
   268       </tr>
   269       <tr> 
   270         <td width="50%"> 
   271           <p><b><code>&lt;hr&gt;</code></b></p>
   272         </td>
   273         <td width="50%"> 
   274           <p><b><code>&lt;hr <font color="red">/</font>&gt;</code></b></p>
   275         </td>
   276       </tr>
   277     </table>
   278 
   279     <br />
   280   </li>
   281   <li><b>All attribute values must be quoted</b></li>
   282   <table border="1" width="75%">
   283     <tr> 
   284       <td width="50%" align="center"> 
   285         <p><b>HTML</b></p>
   286       </td>
   287       <td width="50%" align="center"> 
   288         <p><b>XHTML</b></p>
   289       </td>
   290 
   291     </tr>
   292     <tr> 
   293       <td width="50%"> 
   294         <p><b><code>&lt;table border=0&gt;</code></b></p>
   295       </td>
   296       <td width="50%"> 
   297         <p><b><code>&lt;table border=<font color="red">&quot;</font>0<font color="red">&quot;</font>&gt;</code></b></p>
   298       </td>
   299     </tr>
   300   </table>
   301 
   302   <br />
   303   <li><b>Attribute-value pairs must be written in full</b></li>
   304   <table border="1" width="75%">
   305     <tr> 
   306       <td width="50%" align="center"> 
   307         <p><b>HTML</b></p>
   308       </td>
   309       <td width="50%" align="center"> 
   310         <p><b>XHTML</b></p>
   311       </td>
   312 
   313     </tr>
   314     <tr> 
   315       <td width="50%"> 
   316         <p><b><code>&lt;td nowrap&gt;</code></b></p>
   317       </td>
   318       <td width="50%"> 
   319         <p><b><code>&lt;td nowrap<font color="red">=&quot;nowrap&quot;</font>&gt;</code></b></p>
   320       </td>
   321     </tr>
   322 
   323   </table>
   324   <br />
   325   <li>The root element of the document must be <code>&lt;html&gt;</code> and must designate 
   326     the XHTML namespace<br />
   327     <code>&lt;html xmlns="http://www.w3.org/1999/xhtml"></code><br />
   328     <br />
   329   </li>
   330 
   331   
   332 <li>All documents must have a <code>DOCTYPE</code> declaration
   333 <pre>
   334 &lt;!DOCTYPE html 
   335      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   336      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
   337 
   338 &lt;!DOCTYPE html 
   339      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   340      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
   341 
   342 &lt;!DOCTYPE html 
   343      PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   344      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;
   345 </pre>
   346   </li>
   347 
   348 </ul>
   349 
   350 
   351 
   352 <p>Here is an example of a minimal XHTML document.</p>
   353 
   354   
   355 <pre><font color="#500000"><b>&lt;?xml</b> <font color="#0000A0"><b>version=&quot;</b></font><font color="#000080">1.0</font><font color="#0000A0"><b>&quot;</b></font><font color="#500000"></font><b>?&gt;</b></font>  
   356 <font color="#500000"><b>&lt;!DOCTYPE</b> <font color="#0000A0"><b>html PUBLIC</b></font><font color="#000080"> &quot;-//W3C//DTD XHTML 1.0 Strict//EN</font><font color="#0000A0">" &quot;DTD/xhtml1-strict.dtd"</font><b>&gt;</b></font>  <font color="#500000"><b>
   357 
   358 &lt;html</b> <font color="#0000A0"><b>xmlns=&quot;</b></font><font color="#000080">http://www.w3.org/1999/xhtml</font><font color="#0000A0"><b>&quot;</b></font><b>&gt;</b></font>  
   359   <font color="#500000"><b>&lt;head</b><b>&gt;</b></font>  
   360     <font color="#500000"><b>&lt;title</b><b>&gt;</b></font><font color="#005000">Minimum XHTML Document</font><font color="#500000"><b>&lt;/title&gt;</b></font>  
   361   <font color="#500000"><b>&lt;/head&gt;</b></font>  
   362   <font color="#500000"><b>&lt;body</b><b>&gt;</b></font>  
   363     <font color="#500000"><b>&lt;p</b><b>&gt;
   364 
   365       </b></font><font color="#005000">Accept all valid XHTML, including therefore</font> 
   366 <font color="#005000">      </font><font color="#500000"><b>&lt;a</b> <font color="#0000A0"><b>href=&quot;</b></font><font color="#000080">http://www.mozilla.org/</font><font color="#0000A0"><b>&quot;</b></font><b>&gt;</b></font><font color="#005000">links</font><font color="#500000"><b>&lt;/a&gt;</b></font>.<font color="#500000">
   367 <b>    &lt;/p&gt;</b></font>  
   368   <font color="#500000"><b>&lt;/body&gt;</b></font>  
   369 
   370 <font color="#500000"><b>&lt;/html&gt;</b></font>
   371 </pre>
   372 
   373 
   374 
   375 <p class="signed">~Grauw</p>
   376 
   377 
   378 <pre>
   379 
   380 
   381 
   382 
   383 
   384        .;;.a,      .,.        .,,.
   385      ,@;;;;.,a  ,@@a;a@@,   ,@@@@@@,
   386      @@`;;;;'@,@@@'@;@`@@@,@@@oooo@@
   387      @@,Ssss';@@@@aaaaa@@@@;@@oooo@@
   388       `SSSS;,@@@@@@@@@@@@@@@,@@@@@' ,;;,
   389      .sSSSS;@@@@@@@@@@@@@@@@@     ;,;;;;
   390      sSSSSS;`@@@@@@@@@@@@@@@'      ;;;;'
   391      SSSSSSSs;%%ssssssss%%,sSSs, .SsssS
   392      SSSSSSSS;%%sSSSSSSSs%%;SSSSSSSSSS'
   393      `SSSSSSS;%%sSSSSSSSSs%%;SSSSSSS'
   394        `SSSS;%%%%%%%%%%%%%%%% """""       ..,,,,..
   395          `SS;%%%%%%%%%%%%%%%%,     .,;;;;;;'''''';;;;;;,
   396            %%%%%%%%%%%%%%xx%%%.;;;;;;'                `;;;.
   397            %%%%%%%%%%%%%xx%%%%%                         `;;.
   398            %%%%%%%xxx%^%%%%%%%%%                         `;;
   399            %%%%%%%%%%' `%%%%%%%%.,                        ;'
   400            %%%%%%%%%'    `%%%%';;;'oOOo                  ;'
   401            %%%%%%%%%       `%';;'oOOOOO                 '
   402            `%%%%%%%'         `;'OOOOOO'
   403              ;;;;;             `OOOOO'
   404         ',,''oOOOo'',,'          """
   405             OOOOOOO
   406           ..,,,,,,,,.                      `;;.//
   407         ,'`;;;;;;;;;;;',                   .oOOoOOo.
   408        ;   ;;;;;;;;;;;  ;                  OOOOOOOOO
   409        ;  .;;;;;;;;;;;, ;,;;;;;;;,.        `OOOOOOO'
   410         `;;;;;;;;;;;;;;' ;;;;;;;;;;`,      ;`OOOOO',
   411          .%%%%%%%%%%,' ,;;;;;;;;;;  ;      ;;,,,,,;'
   412         .%%%%%%%%%%%%,%%%%%;;;;;;;, ;    .;;;;;;;;'       ;
   413        ,%%%%%%%%%%%%%,%%%%%%;;;;;;;'   .;;;;;;;;'        ;   .'
   414        %%%%%%%%%%%%%%,%%%%%%%        .;;;;;;;;;'        ;  .'
   415       ,%%%%%%%%%%%%%'%%%%%%%;,.     ;;;;;;;;;;    .a@~~a, '
   416       %%%%%%%%%%%%%'%%%%%%%,%%%%%%,,;;;;;;;;'  .a@@@@a@@@@a.
   417      ,%%%%%%%%%%%%'%%%%%%%,%%%%%%%%%,;;;;;;; .a@@oOOOo@@@@@@a.
   418      %%%%%%%%%%%%'%%%%%%%%%,'''',%%%%%%%%,;.a@@OOOOOOOO@""@ @@a.
   419     ,%%%%%%%%%%%'%%%%%%%,;;;,,,,,%%%%;;`%%.@@@OOOOOOOOO@@@a@@@@@.
   420     %%%%%%%%%%%%%%%%%%,;;;;;;;;,%%%,;;;;;.@@@@@OOOOOOO@@@@@@@@@@@
   421     ####%%%%%%%%%%%%%,;;;;;;;;,%%%%%%%%,;,@@@@@@@@@@@@@@@@@@@@@@@
   422     ####%%%%%%%%%%%%%;;;;;;;;;;;;;;;;;;%%,@@@@@@@@@@@@`aa.@@@@@@@
   423     `###%%%%%%%%%%%%%;;;;;;;;;;;;;;;;;;;;%%`@@@@@@@@@@`@@@.@@@@@'
   424       `%%%%%%%%%%%%"""`;;;;;;;;;;;;;;;;;;;;;''`@@@@@@@@`@@@.@@'@
   425        .;''''';.  .;;;;;,    ..,,,,,..    ,;;;;;.   ,;'''@@@a @@
   426        ;,,,,,,;; ;;;' `;;;,::;;;;;;;;;::,;;;' `;;; ;;,,,,@oo@a`@
   427        `;;;;;;;; ;;;,,,;;;;;:';;;;;;;;`;;;;;,,,;;; ;;;;;;@@oo@@a
   428         `;;;;;;;;,`;;;;;;;:,;;;;;;;;;;;;,;;;;;;;',;;;;;;;@@oooo@@a
   429          `;;;;;;'%%% .:::;;;;' ;;;;;' ;;;;:::, %%%`;;;;;'@@@ooooo@@a
   430            ;;'%%%%%%.::;;;;;a@@@. .@@@a;;;;;::.%%%%%%`;  `@@@oooooo@@a
   431           ,%%%%%%%%%.::;;;;@@@@@@;@@@@@@;;;;::.%%%%%%%%%, @@@oooooooo@@a
   432           `%%%%%%%%%%.::;;;@@@'@@;@@`@@@;;;::.%%%%%%%%%%' `@@ooooooooo@@a.
   433              `%%%%%%%%%`::;;@@@aaaaa@@@;;::'%%%%%%%%%'     @@oooooooooo@@@a
   434             .%%%%%%%%%%;!!,,,,,,,,,,,,,,,!!;%%%%%%%%%%%,  .@@@ooooooooo@@@@
   435            %%%%%%%%%%%;!!!!!!!!!!!!!!!!!!!!!;%%%%%%%%%%%  @;@@@oooooooo@@@'
   436            %%%%%%%%%%%;!!!!!!!!  "  !!!!!!!!;%%%%%%%%%%%  @a;@@@ooooo@@@@'
   437            `%%%%%%%%%;!!!!!!!!!!, .!!!!!!!!!!;%%%%%%%%%'  @@@a;@@@@@@@@'
   438               `%%%%%;!!;!!;!!;!!;!!;!!;!!;!!;!;%%%%%'     `@@@@aaaaaa'
   439                   .!!!!!!!!!!!!!!!!!!!!!!!!!!!!!.           `@@@@@@'
   440                  .!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!.
   441                 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
   442                ,!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!,
   443               ! !!! !!! !!! !!! !!! !!! !!! !!! !!! !
   444              .!!! !!! !!! !!! !!! !!! !!! !!! !!! !!!.
   445              !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
   446             !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!
   447             !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!',;'!!!!!   ';,
   448             `!!`!!`!!`!!`!!`!!`!!`!!`!!`!!`!!',;; !'!!'    ;;,
   449                       ;;;;;;;;;;;^;;;;;;.,,,,.;;;a@@@@@@@@a;;;  .,,.      ,
   450                       ;;;;;;;;;;' `;;',a@@a%%%%%%%%%@@@@@%%%%,@@@@@@@@%%;'
   451        _             .::;;;;;;,'   ; a@@@@@%%%%%%%''%@@%%``%%%%@@@@@%%;;'
   452      ('v')    ;    ,@a,`;;;,aa@,  , a@@@%%%^%%%%%,%%%%%%%%%,%%%%%%%;;;'
   453      (,_,)   ;;; ,' `@@ @@@@@@';  ; @@@%%'  %%%%%%% `%%% `%%%%%%%;;'
   454     .,;;;;.  `;' :.           ,'  `,`@'  ..,;%%a@@@@@@@@@@@@@a%%'
   455   .;;'|/ `;;;;'.aaaaaaaaaaaaaa%%%%%%%%%%%%%%%a@@@@@@@@@@@@@@@@@a
   456   ;;.      .a@@@@@@@@@@%%%%%%%%%%%%%%%%%%%%%%@@@@(`@@@@@@@')@@@@
   457   `;;.   ,a@@@@@@@@@@@@@a%%%%%%%%%%%%%%%%%%%::@@@@a@@@@@@@a@@@@:.
   458     `;;.a@@@@@@@@@@@@@@%%%%%%%%%%%%%%a@@@%%::%%`@@@@@@@@@@@@@'%%::  ,'',
   459       `@@@@@@@@@@@@@@@%%%%%%%@@a%a@@@@@@@%::%%%%%%%%%%%%%%%%%%%%%::'   ;
   460       @@@@@@@@@@@@@@@@@a%%%%@@@@@@@@@@@@@%;;|;,;|;,;|;,;|;.;|;,;|;;   / \
   461       @@@@@@@@@@@@@@@@%%%%%%%@@@@@@@@@@@@%`;;,|;,;|;,;|;,;|;,;|;,;'  | A |
   462       %%%%%%@@@@@%%%;%%%%%%@@@@@@@@@@@@@@@%`|;,;|;,;|;,;|;,;|;,;|'   | P |
   463       `@@%%%%%%%%;'%%%%%%%%%%@@@@%%@@%%%%%%%,`|;,;|;,;|;,;|;,;|'     | P |
   464        `@@a%%%%%%.%%% '''%%%%%%%%%%%%%%%'''''' %%%@@@%%.%%%%'        | L |
   465         @@@@%%%%.%%%'                          %%%@@@@.%%%a@         | E |
   466         @@@%%%%.@a%%                           %%%@@%%.%%@@@         | S |
   467  ~~~~~~ @%%%%%%.@@%% ~~   ~~~~~~~~~    ~~~~~~~ %%%%@@@.%%%@@ ~~~~    `~~~'
   468         `:::::'`:::'                           `:::::'`::::' Susie Oviatt
   469 </pre>
   470 
   471 
   472 
   473 
   474 <?php addFooter(); ?>
   475 </body>
   476 </html>