main/tutorial.php
author Grauw
Sun, 08 Mar 2009 04:26:25 +0100
changeset 4 d0d63d87ed2b
child 5 0cfcc0bf3ed6
permissions -rw-r--r--
Some additions to scrolling article.
Grauw@0
     1
<?php include $_SERVER['DOCUMENT_ROOT'].'/scripts/functions.php'; addHTTPHeader(); ?>
Grauw@0
     2
<!DOCTYPE html
Grauw@0
     3
     PUBLIC "-//W3C//DTD XHTML 1.1//EN"
Grauw@0
     4
     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Grauw@0
     5
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Grauw@0
     6
<head>
Grauw@0
     7
  <title>MSX Assembly Page</title>
Grauw@0
     8
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
Grauw@0
     9
  <meta http-equiv="Content-Style-Type" content="text/css" />
Grauw@0
    10
  <?php addStyles(); ?>
Grauw@0
    11
</head>
Grauw@0
    12
<body id="msxasm">
Grauw@0
    13
<?php addHeader(); ?>
Grauw@0
    14
Grauw@0
    15
Grauw@0
    16
Grauw@0
    17
<h1>MSX Assembly Page article tutorial</h1>
Grauw@0
    18
Grauw@0
    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>
Grauw@0
    20
Grauw@0
    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>
Grauw@0
    22
Grauw@0
    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>
Grauw@0
    24
Grauw@0
    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>
Grauw@0
    26
Grauw@0
    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>
Grauw@0
    28
Grauw@0
    29
Grauw@0
    30
<h2>Let's get started...</h2>
Grauw@0
    31
Grauw@0
    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>
Grauw@0
    33
Grauw@0
    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>
Grauw@0
    35
Grauw@0
    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 
Grauw@0
    37
it.</p>
Grauw@0
    38
Grauw@0
    39
<p>Well then, here goes the layout tags explanation:</p>
Grauw@0
    40
Grauw@0
    41
Grauw@0
    42
<h1>&lt;h1&gt;Main topic&lt;/h1&gt;</h1>
Grauw@0
    43
Grauw@0
    44
<div class="updates">
Grauw@0
    45
<h1>Latest updates:</h1>
Grauw@0
    46
Grauw@0
    47
<p><em>4/1/1900</em><br />
Grauw@0
    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>
Grauw@0
    49
Grauw@0
    50
<p><em>3/1/1900</em><br />
Grauw@0
    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>
Grauw@0
    52
Grauw@0
    53
<p><em>2/1/1900</em><br />
Grauw@0
    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>
Grauw@0
    55
Grauw@0
    56
<!--
Grauw@0
    57
<p><em>1/1/1900</em><br />
Grauw@0
    58
outdated</p>
Grauw@0
    59
-->
Grauw@0
    60
</div>
Grauw@0
    61
Grauw@0
    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>
Grauw@0
    63
Grauw@0
    64
<h2>&lt;h2&gt;Sub head&lt;/h2&gt;</h2>
Grauw@0
    65
Grauw@0
    66
<h3>&lt;h3&gt;Sub sub head ;p&lt;/h3&gt;</h3>
Grauw@0
    67
Grauw@0
    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>
Grauw@0
    69
Grauw@0
    70
<h2>Some more tags (look at the code)</h2>
Grauw@0
    71
Grauw@0
    72
<p>Let's display an unordered list of items now...</p>
Grauw@0
    73
Grauw@0
    74
<ul>
Grauw@0
    75
<li>first item</li>
Grauw@0
    76
<li>second item</li>
Grauw@0
    77
</ul>
Grauw@0
    78
Grauw@0
    79
<p>And an ordered list...</p>
Grauw@0
    80
Grauw@0
    81
<ol>
Grauw@0
    82
<li>first item</li>
Grauw@0
    83
<li>second item</li>
Grauw@0
    84
</ol>
Grauw@0
    85
Grauw@0
    86
<p>And a differently ordered list (use CSS!)...</p>
Grauw@0
    87
Grauw@0
    88
<ol style="list-style-type: upper-roman">
Grauw@0
    89
<li>first item</li>
Grauw@0
    90
<li>second item</li>
Grauw@0
    91
</ol>
Grauw@0
    92
Grauw@0
    93
<p>Some preformatted text/tables/code:</p>
Grauw@0
    94
Grauw@0
    95
<pre>
Grauw@0
    96
                MSB  7   6   5   4   3   2   1   0  LSB
Grauw@0
    97
                   +---+---+---+---+---+---+---+---+
Grauw@0
    98
   Port #1         |A7 |A6 |A5 |A4 |A3 |A2 |A1 |A0 | First byte
Grauw@0
    99
                   +---+---+---+---+---+---+---+---+
Grauw@0
   100
Grauw@0
   101
	xor a
Grauw@0
   102
Label:	cpl
Grauw@0
   103
	jp Label
Grauw@0
   104
</pre>
Grauw@0
   105
Grauw@0
   106
Grauw@0
   107
<p>And tables must only be used if you want to display a table...</p>
Grauw@0
   108
Grauw@0
   109
<table>
Grauw@0
   110
<tr>
Grauw@0
   111
  <th colspan="2">Name of table</th>
Grauw@0
   112
</tr>
Grauw@0
   113
<tr>
Grauw@0
   114
  <td>row 1</td>
Grauw@0
   115
  <td>Dude, what does my tattoo say</td>
Grauw@0
   116
</tr>
Grauw@0
   117
<tr>
Grauw@0
   118
  <td>row 2</td>
Grauw@0
   119
  <td>Sweet, what does my tattoo say</td>
Grauw@0
   120
</tr>
Grauw@0
   121
</table>
Grauw@0
   122
Grauw@0
   123
Grauw@0
   124
<p>If you want to render a matrix-like table, add a class="matrix" to the table tag:</p>
Grauw@0
   125
Grauw@0
   126
<table class="matrix">
Grauw@0
   127
<tr>
Grauw@0
   128
  <th colspan="2">Name of table</th>
Grauw@0
   129
</tr>
Grauw@0
   130
<tr>
Grauw@0
   131
  <td>row 1</td>
Grauw@0
   132
  <td>Dude, what does my tattoo say</td>
Grauw@0
   133
</tr>
Grauw@0
   134
<tr>
Grauw@0
   135
  <td>row 2</td>
Grauw@0
   136
  <td>Sweet, what does my tattoo say</td>
Grauw@0
   137
</tr>
Grauw@0
   138
</table>
Grauw@0
   139
Grauw@0
   140
Grauw@0
   141
<p>Also, a list of definitions (if you ever need it); Japanese lesson no. 1:</p>
Grauw@0
   142
<dl>
Grauw@0
   143
   <dt>Ittadakimasu</dt>
Grauw@0
   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>
Grauw@0
   145
</dl>
Grauw@0
   146
Grauw@0
   147
Grauw@0
   148
<h2>Use unicode!</h2>
Grauw@0
   149
Grauw@0
   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>
Grauw@0
   151
Grauw@0
   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>
Grauw@0
   153
Grauw@0
   154
Grauw@0
   155
<h2>Custom styles</h2>
Grauw@0
   156
Grauw@0
   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>
Grauw@0
   158
Grauw@0
   159
<ul>
Grauw@0
   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>
Grauw@0
   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>
Grauw@0
   162
</ul>
Grauw@0
   163
Grauw@0
   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>
Grauw@0
   165
Grauw@0
   166
<div style="text-align: right">&lt;div style="text-align: right"&gt;right-aligned&lt;/div&gt;</div>
Grauw@0
   167
<div style="text-align: center">&lt;div style="text-align: center"&gt;centered&lt;/div&gt;</div>
Grauw@0
   168
Grauw@0
   169
<h3 style="clear:none">XHTML Conformance</h3>
Grauw@0
   170
Grauw@0
   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>
Grauw@0
   172
Grauw@0
   173
<p>Here are the main rules to produce XHTML compliant
Grauw@0
   174
documents that will work with Mozilla:</p>
Grauw@0
   175
Grauw@0
   176
<ul>
Grauw@0
   177
  <li><b>XHTML tags are all lowercase</b> 
Grauw@0
   178
    <table border="1" width="75%">
Grauw@0
   179
      <tr> 
Grauw@0
   180
        <td width="50%" align="center"> 
Grauw@0
   181
          <p><b>HTML</b></p>
Grauw@0
   182
        </td>
Grauw@0
   183
        <td width="50%" align="center"> 
Grauw@0
   184
          <p><b>XHTML</b></p>
Grauw@0
   185
        </td>
Grauw@0
   186
Grauw@0
   187
      </tr>
Grauw@0
   188
      <tr> 
Grauw@0
   189
        <td width="50%"> 
Grauw@0
   190
          <p><b><code>&lt;H1 Align=&quot;CENTER&quot;&gt;Cauchy<br />
Grauw@0
   191
            Integral&lt;/H1&gt;</code></b></p>
Grauw@0
   192
        </td>
Grauw@0
   193
        <td width="50%"> 
Grauw@0
   194
          <p><b><code>&lt;<font color="red">h1 a</font>lign=&quot;<font color="red">center</font>&quot;&gt;Cauchy<br />
Grauw@0
   195
Grauw@0
   196
            Integral&lt;/<font color="red">h1</font>&gt;</code></b></p>
Grauw@0
   197
        </td>
Grauw@0
   198
      </tr>
Grauw@0
   199
    </table>
Grauw@0
   200
    <br />
Grauw@0
   201
  </li>
Grauw@0
   202
  <li><b>All non-empty elements must be terminated</b> 
Grauw@0
   203
    <table border="1" width="75%">
Grauw@0
   204
Grauw@0
   205
      <tr> 
Grauw@0
   206
        <td width="50%" align="center"> 
Grauw@0
   207
          <p><b>HTML</b></p>
Grauw@0
   208
        </td>
Grauw@0
   209
        <td width="50%" align="center"> 
Grauw@0
   210
          <p><b>XHTML</b></p>
Grauw@0
   211
        </td>
Grauw@0
   212
      </tr>
Grauw@0
   213
      <tr> 
Grauw@0
   214
        <td width="50%" valign="top"> <b> 
Grauw@0
   215
          <pre>
Grauw@0
   216
Grauw@0
   217
&lt;p&gt;MathML
Grauw@0
   218
  &lt;ul&gt;
Grauw@0
   219
    &lt;li&gt;Presentation markup
Grauw@0
   220
    &lt;li&gt;Content markup
Grauw@0
   221
  &lt;/ul&gt;
Grauw@0
   222
            </pre>
Grauw@0
   223
          </b> </td>
Grauw@0
   224
        <td width="50%" valign="top"> <b> 
Grauw@0
   225
          <pre>
Grauw@0
   226
Grauw@0
   227
&lt;p&gt;MathML
Grauw@0
   228
  &lt;ul&gt;
Grauw@0
   229
    &lt;li&gt;Presentation markup<font color="red">&lt;/li&gt;</font>
Grauw@0
   230
    &lt;li&gt;Content markup<font color="red">&lt;/li&gt;</font>
Grauw@0
   231
  &lt;/ul&gt;
Grauw@0
   232
Grauw@0
   233
<font color="red">&lt;/p&gt;</font>
Grauw@0
   234
            </pre>
Grauw@0
   235
          </b></td>
Grauw@0
   236
      </tr>
Grauw@0
   237
    </table>
Grauw@0
   238
    <br />
Grauw@0
   239
  </li>
Grauw@0
   240
  <li><b>Empty elements must include a trailing slash (/)</b> 
Grauw@0
   241
    <table border="1" width="75%">
Grauw@0
   242
Grauw@0
   243
      <tr> 
Grauw@0
   244
        <td width="50%" align="center"> 
Grauw@0
   245
          <p><b>HTML</b></p>
Grauw@0
   246
        </td>
Grauw@0
   247
        <td width="50%" align="center"> 
Grauw@0
   248
          <p><b>XHTML</b></p>
Grauw@0
   249
        </td>
Grauw@0
   250
      </tr>
Grauw@0
   251
      <tr> 
Grauw@0
   252
        <td width="50%"> 
Grauw@0
   253
          <p><b><code>&lt;img src=&quot;myimage.gif&quot;&gt;</code></b></p>
Grauw@0
   254
        </td>
Grauw@0
   255
Grauw@0
   256
        <td width="50%"> 
Grauw@0
   257
          <p><b><code>&lt;img src=&quot;myimage.gif&quot; <font color="red">/</font>&gt;</code></b></p>
Grauw@0
   258
        </td>
Grauw@0
   259
      </tr>
Grauw@0
   260
      <tr> 
Grauw@0
   261
        <td width="50%"> 
Grauw@0
   262
          <p><b><code>&lt;br&gt;</code></b></p>
Grauw@0
   263
        </td>
Grauw@0
   264
        <td width="50%"> 
Grauw@0
   265
          <p><b><code>&lt;br <font color="red">/</font>&gt;</code></b></p>
Grauw@0
   266
        </td>
Grauw@0
   267
Grauw@0
   268
      </tr>
Grauw@0
   269
      <tr> 
Grauw@0
   270
        <td width="50%"> 
Grauw@0
   271
          <p><b><code>&lt;hr&gt;</code></b></p>
Grauw@0
   272
        </td>
Grauw@0
   273
        <td width="50%"> 
Grauw@0
   274
          <p><b><code>&lt;hr <font color="red">/</font>&gt;</code></b></p>
Grauw@0
   275
        </td>
Grauw@0
   276
      </tr>
Grauw@0
   277
    </table>
Grauw@0
   278
Grauw@0
   279
    <br />
Grauw@0
   280
  </li>
Grauw@0
   281
  <li><b>All attribute values must be quoted</b></li>
Grauw@0
   282
  <table border="1" width="75%">
Grauw@0
   283
    <tr> 
Grauw@0
   284
      <td width="50%" align="center"> 
Grauw@0
   285
        <p><b>HTML</b></p>
Grauw@0
   286
      </td>
Grauw@0
   287
      <td width="50%" align="center"> 
Grauw@0
   288
        <p><b>XHTML</b></p>
Grauw@0
   289
      </td>
Grauw@0
   290
Grauw@0
   291
    </tr>
Grauw@0
   292
    <tr> 
Grauw@0
   293
      <td width="50%"> 
Grauw@0
   294
        <p><b><code>&lt;table border=0&gt;</code></b></p>
Grauw@0
   295
      </td>
Grauw@0
   296
      <td width="50%"> 
Grauw@0
   297
        <p><b><code>&lt;table border=<font color="red">&quot;</font>0<font color="red">&quot;</font>&gt;</code></b></p>
Grauw@0
   298
      </td>
Grauw@0
   299
    </tr>
Grauw@0
   300
  </table>
Grauw@0
   301
Grauw@0
   302
  <br />
Grauw@0
   303
  <li><b>Attribute-value pairs must be written in full</b></li>
Grauw@0
   304
  <table border="1" width="75%">
Grauw@0
   305
    <tr> 
Grauw@0
   306
      <td width="50%" align="center"> 
Grauw@0
   307
        <p><b>HTML</b></p>
Grauw@0
   308
      </td>
Grauw@0
   309
      <td width="50%" align="center"> 
Grauw@0
   310
        <p><b>XHTML</b></p>
Grauw@0
   311
      </td>
Grauw@0
   312
Grauw@0
   313
    </tr>
Grauw@0
   314
    <tr> 
Grauw@0
   315
      <td width="50%"> 
Grauw@0
   316
        <p><b><code>&lt;td nowrap&gt;</code></b></p>
Grauw@0
   317
      </td>
Grauw@0
   318
      <td width="50%"> 
Grauw@0
   319
        <p><b><code>&lt;td nowrap<font color="red">=&quot;nowrap&quot;</font>&gt;</code></b></p>
Grauw@0
   320
      </td>
Grauw@0
   321
    </tr>
Grauw@0
   322
Grauw@0
   323
  </table>
Grauw@0
   324
  <br />
Grauw@0
   325
  <li>The root element of the document must be <code>&lt;html&gt;</code> and must designate 
Grauw@0
   326
    the XHTML namespace<br />
Grauw@0
   327
    <code>&lt;html xmlns="http://www.w3.org/1999/xhtml"></code><br />
Grauw@0
   328
    <br />
Grauw@0
   329
  </li>
Grauw@0
   330
Grauw@0
   331
  
Grauw@0
   332
<li>All documents must have a <code>DOCTYPE</code> declaration
Grauw@0
   333
<pre>
Grauw@0
   334
&lt;!DOCTYPE html 
Grauw@0
   335
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Grauw@0
   336
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
Grauw@0
   337
Grauw@0
   338
&lt;!DOCTYPE html 
Grauw@0
   339
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Grauw@0
   340
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
Grauw@0
   341
Grauw@0
   342
&lt;!DOCTYPE html 
Grauw@0
   343
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
Grauw@0
   344
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;
Grauw@0
   345
</pre>
Grauw@0
   346
  </li>
Grauw@0
   347
Grauw@0
   348
</ul>
Grauw@0
   349
Grauw@0
   350
Grauw@0
   351
Grauw@0
   352
<p>Here is an example of a minimal XHTML document.</p>
Grauw@0
   353
Grauw@0
   354
  
Grauw@0
   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>  
Grauw@0
   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>
Grauw@0
   357
Grauw@0
   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>  
Grauw@0
   359
  <font color="#500000"><b>&lt;head</b><b>&gt;</b></font>  
Grauw@0
   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>  
Grauw@0
   361
  <font color="#500000"><b>&lt;/head&gt;</b></font>  
Grauw@0
   362
  <font color="#500000"><b>&lt;body</b><b>&gt;</b></font>  
Grauw@0
   363
    <font color="#500000"><b>&lt;p</b><b>&gt;
Grauw@0
   364
Grauw@0
   365
      </b></font><font color="#005000">Accept all valid XHTML, including therefore</font> 
Grauw@0
   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">
Grauw@0
   367
<b>    &lt;/p&gt;</b></font>  
Grauw@0
   368
  <font color="#500000"><b>&lt;/body&gt;</b></font>  
Grauw@0
   369
Grauw@0
   370
<font color="#500000"><b>&lt;/html&gt;</b></font>
Grauw@0
   371
</pre>
Grauw@0
   372
Grauw@0
   373
Grauw@0
   374
Grauw@0
   375
<p class="signed">~Grauw</p>
Grauw@0
   376
Grauw@0
   377
Grauw@0
   378
<pre>
Grauw@0
   379
Grauw@0
   380
Grauw@0
   381
Grauw@0
   382
Grauw@0
   383
Grauw@0
   384
       .;;.a,      .,.        .,,.
Grauw@0
   385
     ,@;;;;.,a  ,@@a;a@@,   ,@@@@@@,
Grauw@0
   386
     @@`;;;;'@,@@@'@;@`@@@,@@@oooo@@
Grauw@0
   387
     @@,Ssss';@@@@aaaaa@@@@;@@oooo@@
Grauw@0
   388
      `SSSS;,@@@@@@@@@@@@@@@,@@@@@' ,;;,
Grauw@0
   389
     .sSSSS;@@@@@@@@@@@@@@@@@     ;,;;;;
Grauw@0
   390
     sSSSSS;`@@@@@@@@@@@@@@@'      ;;;;'
Grauw@0
   391
     SSSSSSSs;%%ssssssss%%,sSSs, .SsssS
Grauw@0
   392
     SSSSSSSS;%%sSSSSSSSs%%;SSSSSSSSSS'
Grauw@0
   393
     `SSSSSSS;%%sSSSSSSSSs%%;SSSSSSS'
Grauw@0
   394
       `SSSS;%%%%%%%%%%%%%%%% """""       ..,,,,..
Grauw@0
   395
         `SS;%%%%%%%%%%%%%%%%,     .,;;;;;;'''''';;;;;;,
Grauw@0
   396
           %%%%%%%%%%%%%%xx%%%.;;;;;;'                `;;;.
Grauw@0
   397
           %%%%%%%%%%%%%xx%%%%%                         `;;.
Grauw@0
   398
           %%%%%%%xxx%^%%%%%%%%%                         `;;
Grauw@0
   399
           %%%%%%%%%%' `%%%%%%%%.,                        ;'
Grauw@0
   400
           %%%%%%%%%'    `%%%%';;;'oOOo                  ;'
Grauw@0
   401
           %%%%%%%%%       `%';;'oOOOOO                 '
Grauw@0
   402
           `%%%%%%%'         `;'OOOOOO'
Grauw@0
   403
             ;;;;;             `OOOOO'
Grauw@0
   404
        ',,''oOOOo'',,'          """
Grauw@0
   405
            OOOOOOO
Grauw@0
   406
          ..,,,,,,,,.                      `;;.//
Grauw@0
   407
        ,'`;;;;;;;;;;;',                   .oOOoOOo.
Grauw@0
   408
       ;   ;;;;;;;;;;;  ;                  OOOOOOOOO
Grauw@0
   409
       ;  .;;;;;;;;;;;, ;,;;;;;;;,.        `OOOOOOO'
Grauw@0
   410
        `;;;;;;;;;;;;;;' ;;;;;;;;;;`,      ;`OOOOO',
Grauw@0
   411
         .%%%%%%%%%%,' ,;;;;;;;;;;  ;      ;;,,,,,;'
Grauw@0
   412
        .%%%%%%%%%%%%,%%%%%;;;;;;;, ;    .;;;;;;;;'       ;
Grauw@0
   413
       ,%%%%%%%%%%%%%,%%%%%%;;;;;;;'   .;;;;;;;;'        ;   .'
Grauw@0
   414
       %%%%%%%%%%%%%%,%%%%%%%        .;;;;;;;;;'        ;  .'
Grauw@0
   415
      ,%%%%%%%%%%%%%'%%%%%%%;,.     ;;;;;;;;;;    .a@~~a, '
Grauw@0
   416
      %%%%%%%%%%%%%'%%%%%%%,%%%%%%,,;;;;;;;;'  .a@@@@a@@@@a.
Grauw@0
   417
     ,%%%%%%%%%%%%'%%%%%%%,%%%%%%%%%,;;;;;;; .a@@oOOOo@@@@@@a.
Grauw@0
   418
     %%%%%%%%%%%%'%%%%%%%%%,'''',%%%%%%%%,;.a@@OOOOOOOO@""@ @@a.
Grauw@0
   419
    ,%%%%%%%%%%%'%%%%%%%,;;;,,,,,%%%%;;`%%.@@@OOOOOOOOO@@@a@@@@@.
Grauw@0
   420
    %%%%%%%%%%%%%%%%%%,;;;;;;;;,%%%,;;;;;.@@@@@OOOOOOO@@@@@@@@@@@
Grauw@0
   421
    ####%%%%%%%%%%%%%,;;;;;;;;,%%%%%%%%,;,@@@@@@@@@@@@@@@@@@@@@@@
Grauw@0
   422
    ####%%%%%%%%%%%%%;;;;;;;;;;;;;;;;;;%%,@@@@@@@@@@@@`aa.@@@@@@@
Grauw@0
   423
    `###%%%%%%%%%%%%%;;;;;;;;;;;;;;;;;;;;%%`@@@@@@@@@@`@@@.@@@@@'
Grauw@0
   424
      `%%%%%%%%%%%%"""`;;;;;;;;;;;;;;;;;;;;;''`@@@@@@@@`@@@.@@'@
Grauw@0
   425
       .;''''';.  .;;;;;,    ..,,,,,..    ,;;;;;.   ,;'''@@@a @@
Grauw@0
   426
       ;,,,,,,;; ;;;' `;;;,::;;;;;;;;;::,;;;' `;;; ;;,,,,@oo@a`@
Grauw@0
   427
       `;;;;;;;; ;;;,,,;;;;;:';;;;;;;;`;;;;;,,,;;; ;;;;;;@@oo@@a
Grauw@0
   428
        `;;;;;;;;,`;;;;;;;:,;;;;;;;;;;;;,;;;;;;;',;;;;;;;@@oooo@@a
Grauw@0
   429
         `;;;;;;'%%% .:::;;;;' ;;;;;' ;;;;:::, %%%`;;;;;'@@@ooooo@@a
Grauw@0
   430
           ;;'%%%%%%.::;;;;;a@@@. .@@@a;;;;;::.%%%%%%`;  `@@@oooooo@@a
Grauw@0
   431
          ,%%%%%%%%%.::;;;;@@@@@@;@@@@@@;;;;::.%%%%%%%%%, @@@oooooooo@@a
Grauw@0
   432
          `%%%%%%%%%%.::;;;@@@'@@;@@`@@@;;;::.%%%%%%%%%%' `@@ooooooooo@@a.
Grauw@0
   433
             `%%%%%%%%%`::;;@@@aaaaa@@@;;::'%%%%%%%%%'     @@oooooooooo@@@a
Grauw@0
   434
            .%%%%%%%%%%;!!,,,,,,,,,,,,,,,!!;%%%%%%%%%%%,  .@@@ooooooooo@@@@
Grauw@0
   435
           %%%%%%%%%%%;!!!!!!!!!!!!!!!!!!!!!;%%%%%%%%%%%  @;@@@oooooooo@@@'
Grauw@0
   436
           %%%%%%%%%%%;!!!!!!!!  "  !!!!!!!!;%%%%%%%%%%%  @a;@@@ooooo@@@@'
Grauw@0
   437
           `%%%%%%%%%;!!!!!!!!!!, .!!!!!!!!!!;%%%%%%%%%'  @@@a;@@@@@@@@'
Grauw@0
   438
              `%%%%%;!!;!!;!!;!!;!!;!!;!!;!!;!;%%%%%'     `@@@@aaaaaa'
Grauw@0
   439
                  .!!!!!!!!!!!!!!!!!!!!!!!!!!!!!.           `@@@@@@'
Grauw@0
   440
                 .!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!.
Grauw@0
   441
                !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Grauw@0
   442
               ,!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!,
Grauw@0
   443
              ! !!! !!! !!! !!! !!! !!! !!! !!! !!! !
Grauw@0
   444
             .!!! !!! !!! !!! !!! !!! !!! !!! !!! !!!.
Grauw@0
   445
             !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Grauw@0
   446
            !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!
Grauw@0
   447
            !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!',;'!!!!!   ';,
Grauw@0
   448
            `!!`!!`!!`!!`!!`!!`!!`!!`!!`!!`!!',;; !'!!'    ;;,
Grauw@0
   449
                      ;;;;;;;;;;;^;;;;;;.,,,,.;;;a@@@@@@@@a;;;  .,,.      ,
Grauw@0
   450
                      ;;;;;;;;;;' `;;',a@@a%%%%%%%%%@@@@@%%%%,@@@@@@@@%%;'
Grauw@0
   451
       _             .::;;;;;;,'   ; a@@@@@%%%%%%%''%@@%%``%%%%@@@@@%%;;'
Grauw@0
   452
     ('v')    ;    ,@a,`;;;,aa@,  , a@@@%%%^%%%%%,%%%%%%%%%,%%%%%%%;;;'
Grauw@0
   453
     (,_,)   ;;; ,' `@@ @@@@@@';  ; @@@%%'  %%%%%%% `%%% `%%%%%%%;;'
Grauw@0
   454
    .,;;;;.  `;' :.           ,'  `,`@'  ..,;%%a@@@@@@@@@@@@@a%%'
Grauw@0
   455
  .;;'|/ `;;;;'.aaaaaaaaaaaaaa%%%%%%%%%%%%%%%a@@@@@@@@@@@@@@@@@a
Grauw@0
   456
  ;;.      .a@@@@@@@@@@%%%%%%%%%%%%%%%%%%%%%%@@@@(`@@@@@@@')@@@@
Grauw@0
   457
  `;;.   ,a@@@@@@@@@@@@@a%%%%%%%%%%%%%%%%%%%::@@@@a@@@@@@@a@@@@:.
Grauw@0
   458
    `;;.a@@@@@@@@@@@@@@%%%%%%%%%%%%%%a@@@%%::%%`@@@@@@@@@@@@@'%%::  ,'',
Grauw@0
   459
      `@@@@@@@@@@@@@@@%%%%%%%@@a%a@@@@@@@%::%%%%%%%%%%%%%%%%%%%%%::'   ;
Grauw@0
   460
      @@@@@@@@@@@@@@@@@a%%%%@@@@@@@@@@@@@%;;|;,;|;,;|;,;|;.;|;,;|;;   / \
Grauw@0
   461
      @@@@@@@@@@@@@@@@%%%%%%%@@@@@@@@@@@@%`;;,|;,;|;,;|;,;|;,;|;,;'  | A |
Grauw@0
   462
      %%%%%%@@@@@%%%;%%%%%%@@@@@@@@@@@@@@@%`|;,;|;,;|;,;|;,;|;,;|'   | P |
Grauw@0
   463
      `@@%%%%%%%%;'%%%%%%%%%%@@@@%%@@%%%%%%%,`|;,;|;,;|;,;|;,;|'     | P |
Grauw@0
   464
       `@@a%%%%%%.%%% '''%%%%%%%%%%%%%%%'''''' %%%@@@%%.%%%%'        | L |
Grauw@0
   465
        @@@@%%%%.%%%'                          %%%@@@@.%%%a@         | E |
Grauw@0
   466
        @@@%%%%.@a%%                           %%%@@%%.%%@@@         | S |
Grauw@0
   467
 ~~~~~~ @%%%%%%.@@%% ~~   ~~~~~~~~~    ~~~~~~~ %%%%@@@.%%%@@ ~~~~    `~~~'
Grauw@0
   468
        `:::::'`:::'                           `:::::'`::::' Susie Oviatt
Grauw@0
   469
</pre>
Grauw@0
   470
Grauw@0
   471
Grauw@0
   472
Grauw@0
   473
Grauw@0
   474
<?php addFooter(); ?>
Grauw@0
   475
</body>
Grauw@0
   476
</html>