1 <?php include $_SERVER['DOCUMENT_ROOT'].'/scripts/functions.php'; addHTTPHeader(); ?>
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">
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" />
17 <h1>MSX Assembly Page article tutorial</h1>
19 <p>On this page I’ll try to explain the structure of a document. Check <a href="http://hg.grauw.nl/map/file/d0d63d87ed2b/main/tutorial.php">the source on Mercurial</a> to see how everything is done in this (and other) pages’ source code.</p>
21 <p>Let’s sum up some guidelines for working on the MAP. You can go ahead and get the source code from the <a href="http://hg.grauw.nl/map">MAP Mercurial repository</a>. From there, You can start a new article or add a new resource, or modify an existing one. But keep in mind the social aspect of editing documents, that every article is made and thus ‘owned’ by someone. So although corrections are fine, you probably shouldn’t push significant modifications onto the server without consulting with the author first. Also, if you want to make changes to the style sheet or site structure, drop me (Grauw) a line first :).</p>
23 <p>If you have push rights to the server, keep in mind that everything you push will be live immediately. Generally speaking, it’s also always useful if someone reviews your changes before they are pushed to the server. Of course, this review can also happen after things are pushed, but because we use Mercurial, if you are unsure about whether something is correct or using the right tags or correctly spelled or whatever, you can easily draft some changes and send them to someone else for review.</p>
25 <p>Once an article is more or less done, and fit for publishing, think of an appropriate section and category within the site structure, and if one 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 (the <i>index.php</i> file in each section directory). If you’ve written the article yourself, or put a large effort in it like translating or transscribing, don’t forget to put your name at the bottom and add a ‘MAP bullet’ by changing the <code><li></code> tag into <code><li class="map"></code>, so that people can see that it is authored by us and can exclusively be found on the MAP.</p>
27 <p>Furthermore, if you publish or update a text (unless it’s a really minor update), please add it to the Last Updates section in <i>main/index.php</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 move a couple of the oldest updates to <i>main/updates-old.php</i> to make it a little shorter. 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>
30 <h2>Document syntax and formatting</h2>
32 <p>Let’s get started with the layout tags you should use. Every page on this site is made from a combination of XHTML, CSS, 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/xhtml1/">XHTML documentation</a>, and the <a href="http://www.w3.org/TR/CSS21/">CSS 2.1 documentation</a>. The HTML and CSS docs are quite easy to use once you know how they’re structured.</p>
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), but then written in XML, so every tag has to have an end-tag. If you write a <code><li></code>, always close it with a <code></li></code>, and the same goes for <code><p></code>. Also, don’t write <code><img src="image.jpg"></code> and <code><br></code> but add a closing <code>/</code> at the end like so: <code><img src="image.jpg" /></code> and <code><br /></code>. The space before the / in singleton 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 <code>img</code> tags always need an <code>alt="description"</code> attribute. You can check the correctness of your text by running it through the <a href="http://validator.w3.org/">W3C MarkUp Validation Service</a>.</p>
36 <p>As for a good editor, my preference is <a href="http://www.flos-freeware.ch/notepad2.html">Notepad2</a>.</p>
38 <p>Well then, here goes the layout tags explanation:</p>
41 <h1><code><h1></code>Main topic<code></h1></code></h1>
44 <h1>Latest updates:</h1>
46 <p><em>1900-01-04</em><br />
47 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 year-month-day (ISO 8601 time notation).</p>
49 <p><em>1900-01-03</em><br />
50 Also, when you update an article and it is an update worthwhile of mentioning on the front page, place a notification in the <i>main/index.php</i> file, so that people who visit the page can see that it has been changed.</p>
52 <p><em>1900-01-02</em><br />
53 You can put outdated updates between <code><!-- comments --></code>, so that they can still be viewed in the code for reference. Updates usually become ‘outdated’ when the updates list is getting too long :). On the main page, outdated updates should be moved into the <i>main/updates-old.php</i> file.</p>
56 <p><em>1/1/1900</em><br />
61 <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 <h2><code><h2></code>Sub head<code></h2></code></h2>
65 <h3><code><h3></code>Sub sub head<code></h3></code></h3>
67 <p><code><p></code>Paragraph with something <code><em></code><em>that needs emphasis</em><code></em></code>, or even <code><strong></code><strong>strong emphasis</strong><code></strong></code>. Some abbreviation for <code><abbr title="Disk Operating System"></code><abbr title="Disk Operating System">DOS</abbr><code></abbr></code>, and <code><dfn></code><dfn>defenestrate</dfn><code></dfn></code> is a new term that needs to be defined. You can use <code><i></code><i>italics</i><code></i></code> to highlight e.g. file names. And finally <code><a href=""></code><a href="">a link</a><code></a></code> at the end of the paragraph.<code></p></code></p>
69 <h2>Some more tags (look at the code)</h2>
71 <p>Let’s display an unordered list of items now...</p>
78 <p>And an ordered list...</p>
85 <p>And a differently ordered list (use CSS!)...</p>
87 <ol style="list-style-type: upper-roman">
92 <p>Some preformatted text/tables/code:</p>
95 MSB 7 6 5 4 3 2 1 0 LSB
96 +---+---+---+---+---+---+---+---+
97 Port #1 |A7 |A6 |A5 |A4 |A3 |A2 |A1 |A0 | First byte
98 +---+---+---+---+---+---+---+---+
105 <p>Put inline code fragments between <code><code></code> and <code></code></code> tags.</p>
108 <p>And tables must only be used if you want to display a table...</p>
112 <th colspan="2">Name of table</th>
116 <td>Dude, what does my tattoo say</td>
120 <td>Sweet, what does my tattoo say</td>
125 <p>If you want to render a matrix-like table, add a class="matrix" to the table tag:</p>
127 <table class="matrix">
129 <th colspan="2">Name of table</th>
133 <td>Dude, what does my tattoo say</td>
137 <td>Sweet, what does my tattoo say</td>
142 <p>Also, a list of definitions (if you ever need it); Japanese lesson no. 1:</p>
144 <dt>Ittadakimasu</dt>
145 <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>
151 <h2>Use unicode!</h2>
153 <p>If you save your documents as Unicode (UTF-8), then you don’t need to use HTML character entity tags (those <code>&something;</code> tags, please don’t use them) 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, as long as you don’t use any special characters.</p>
155 <p>However you’ll still need to use <code>&amp;</code>, <code>&lt;</code> and <code>&gt;</code> for <code>&</code>, <code><</code> and <code>></code>, because in HTML they are escape characters. They also need to be used inside preformatted (<code><pre></code>) tags.</p>
158 <h2>Custom styles</h2>
160 <p>You can also add custom styles to them to either block-level tags like <code><div></code> and <code><p></code> (<code>p</code> adds an empty line while <code>div</code> does not), or inline tags like <code><span></code> and <code><i></code> (generally you’ll want to use the span tag). This can be done with a <code>class=""</code> or a <code>style=""</code> identifier. The former refers to predefined classes in the style sheet, while you can specify any CSS2 style in the latter.</p>
163 <li>Example 1: <code><span class="inv"></code><span class="inv">negative logic (invert)</span><code></span></code> is an overline usually used for indicating negative logic.</li>
164 <li>Example 2: <code><span style="color: rgb(255,0,0)"></code><span style="color: rgb(255,0,0)">red colour</span><code></span></code>, if you must… you really shouldn't do colors, actually :), it is just an example of how to do a custom style. You can also use named colours like <code>color: red</code>.</li>
167 <h3>XHTML Conformance</h3>
169 <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>
171 <p>Here are the main rules to produce XHTML compliant
172 documents that will work with Mozilla:</p>
175 <li><b>XHTML tags are all lowercase</b>
176 <table border="1" width="75%">
178 <td width="50%" align="center">
181 <td width="50%" align="center">
188 <p><b><code><H1 Align="CENTER">Cauchy<br />
189 Integral</H1></code></b></p>
192 <p><b><code><<font color="red">h1 a</font>lign="<font color="red">center</font>">Cauchy<br />
194 Integral</<font color="red">h1</font>></code></b></p>
200 <li><b>All non-empty elements must be terminated</b>
201 <table border="1" width="75%">
204 <td width="50%" align="center">
207 <td width="50%" align="center">
212 <td width="50%" valign="top"> <b>
216 <li>Presentation markup
217 <li>Content markup
221 <td width="50%" valign="top"> <b>
225 <li>Presentation markup<font color="red"></li></font>
226 <li>Content markup<font color="red"></li></font>
228 <font color="red"></p></font>
235 <li><b>Empty elements must include a trailing slash (/)</b>
236 <table border="1" width="75%">
238 <td width="50%" align="center">
241 <td width="50%" align="center">
247 <p><b><code><img src="myimage.gif"></code></b></p>
251 <p><b><code><img src="myimage.gif" <font color="red">/</font>></code></b></p>
256 <p><b><code><br></code></b></p>
259 <p><b><code><br <font color="red">/</font>></code></b></p>
264 <p><b><code><hr></code></b></p>
267 <p><b><code><hr <font color="red">/</font>></code></b></p>
273 <li><b>All attribute values must be quoted</b></li>
274 <table border="1" width="75%">
276 <td width="50%" align="center">
279 <td width="50%" align="center">
285 <p><b><code><table border=0></code></b></p>
288 <p><b><code><table border=<font color="red">"</font>0<font color="red">"</font>></code></b></p>
293 <li><b>Attribute-value pairs must be written in full</b></li>
294 <table border="1" width="75%">
296 <td width="50%" align="center">
299 <td width="50%" align="center">
305 <p><b><code><td nowrap></code></b></p>
308 <p><b><code><td nowrap<font color="red">="nowrap"</font>></code></b></p>
313 <li>The root element of the document must be <code><html></code> and must designate
314 the XHTML namespace<br />
315 <code><html xmlns="http://www.w3.org/1999/xhtml"></code><br />
320 <li>All documents must have a <code>DOCTYPE</code> declaration
323 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
324 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
327 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
328 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
331 PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
332 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
340 <p>Here is an example of a minimal XHTML document.</p>
343 <pre><font color="#500000"><b><?xml</b> <font color="#0000A0"><b>version="</b></font><font color="#000080">1.0</font><font color="#0000A0"><b>"</b></font><font color="#500000"></font><b>?></b></font>
344 <font color="#500000"><b><!DOCTYPE</b> <font color="#0000A0"><b>html PUBLIC</b></font><font color="#000080"> "-//W3C//DTD XHTML 1.0 Strict//EN</font><font color="#0000A0">" "DTD/xhtml1-strict.dtd"</font><b>></b></font> <font color="#500000"><b>
346 <html</b> <font color="#0000A0"><b>xmlns="</b></font><font color="#000080">http://www.w3.org/1999/xhtml</font><font color="#0000A0"><b>"</b></font><b>></b></font>
347 <font color="#500000"><b><head</b><b>></b></font>
348 <font color="#500000"><b><title</b><b>></b></font><font color="#005000">Minimum XHTML Document</font><font color="#500000"><b></title></b></font>
349 <font color="#500000"><b></head></b></font>
350 <font color="#500000"><b><body</b><b>></b></font>
351 <font color="#500000"><b><p</b><b>>
353 </b></font><font color="#005000">Accept all valid XHTML, including therefore</font>
354 <font color="#005000"> </font><font color="#500000"><b><a</b> <font color="#0000A0"><b>href="</b></font><font color="#000080">http://www.mozilla.org/</font><font color="#0000A0"><b>"</b></font><b>></b></font><font color="#005000">links</font><font color="#500000"><b></a></b></font>.<font color="#500000">
355 <b> </p></b></font>
356 <font color="#500000"><b></body></b></font>
358 <font color="#500000"><b></html></b></font>
363 <p class="signed">~Grauw</p>
373 ,@;;;;.,a ,@@a;a@@, ,@@@@@@,
374 @@`;;;;'@,@@@'@;@`@@@,@@@oooo@@
375 @@,Ssss';@@@@aaaaa@@@@;@@oooo@@
376 `SSSS;,@@@@@@@@@@@@@@@,@@@@@' ,;;,
377 .sSSSS;@@@@@@@@@@@@@@@@@ ;,;;;;
378 sSSSSS;`@@@@@@@@@@@@@@@' ;;;;'
379 SSSSSSSs;%%ssssssss%%,sSSs, .SsssS
380 SSSSSSSS;%%sSSSSSSSs%%;SSSSSSSSSS'
381 `SSSSSSS;%%sSSSSSSSSs%%;SSSSSSS'
382 `SSSS;%%%%%%%%%%%%%%%% """"" ..,,,,..
383 `SS;%%%%%%%%%%%%%%%%, .,;;;;;;'''''';;;;;;,
384 %%%%%%%%%%%%%%xx%%%.;;;;;;' `;;;.
385 %%%%%%%%%%%%%xx%%%%% `;;.
386 %%%%%%%xxx%^%%%%%%%%% `;;
387 %%%%%%%%%%' `%%%%%%%%., ;'
388 %%%%%%%%%' `%%%%';;;'oOOo ;'
389 %%%%%%%%% `%';;'oOOOOO '
395 ,'`;;;;;;;;;;;', .oOOoOOo.
396 ; ;;;;;;;;;;; ; OOOOOOOOO
397 ; .;;;;;;;;;;;, ;,;;;;;;;,. `OOOOOOO'
398 `;;;;;;;;;;;;;;' ;;;;;;;;;;`, ;`OOOOO',
399 .%%%%%%%%%%,' ,;;;;;;;;;; ; ;;,,,,,;'
400 .%%%%%%%%%%%%,%%%%%;;;;;;;, ; .;;;;;;;;' ;
401 ,%%%%%%%%%%%%%,%%%%%%;;;;;;;' .;;;;;;;;' ; .'
402 %%%%%%%%%%%%%%,%%%%%%% .;;;;;;;;;' ; .'
403 ,%%%%%%%%%%%%%'%%%%%%%;,. ;;;;;;;;;; .a@~~a, '
404 %%%%%%%%%%%%%'%%%%%%%,%%%%%%,,;;;;;;;;' .a@@@@a@@@@a.
405 ,%%%%%%%%%%%%'%%%%%%%,%%%%%%%%%,;;;;;;; .a@@oOOOo@@@@@@a.
406 %%%%%%%%%%%%'%%%%%%%%%,'''',%%%%%%%%,;.a@@OOOOOOOO@""@ @@a.
407 ,%%%%%%%%%%%'%%%%%%%,;;;,,,,,%%%%;;`%%.@@@OOOOOOOOO@@@a@@@@@.
408 %%%%%%%%%%%%%%%%%%,;;;;;;;;,%%%,;;;;;.@@@@@OOOOOOO@@@@@@@@@@@
409 ####%%%%%%%%%%%%%,;;;;;;;;,%%%%%%%%,;,@@@@@@@@@@@@@@@@@@@@@@@
410 ####%%%%%%%%%%%%%;;;;;;;;;;;;;;;;;;%%,@@@@@@@@@@@@`aa.@@@@@@@
411 `###%%%%%%%%%%%%%;;;;;;;;;;;;;;;;;;;;%%`@@@@@@@@@@`@@@.@@@@@'
412 `%%%%%%%%%%%%"""`;;;;;;;;;;;;;;;;;;;;;''`@@@@@@@@`@@@.@@'@
413 .;''''';. .;;;;;, ..,,,,,.. ,;;;;;. ,;'''@@@a @@
414 ;,,,,,,;; ;;;' `;;;,::;;;;;;;;;::,;;;' `;;; ;;,,,,@oo@a`@
415 `;;;;;;;; ;;;,,,;;;;;:';;;;;;;;`;;;;;,,,;;; ;;;;;;@@oo@@a
416 `;;;;;;;;,`;;;;;;;:,;;;;;;;;;;;;,;;;;;;;',;;;;;;;@@oooo@@a
417 `;;;;;;'%%% .:::;;;;' ;;;;;' ;;;;:::, %%%`;;;;;'@@@ooooo@@a
418 ;;'%%%%%%.::;;;;;a@@@. .@@@a;;;;;::.%%%%%%`; `@@@oooooo@@a
419 ,%%%%%%%%%.::;;;;@@@@@@;@@@@@@;;;;::.%%%%%%%%%, @@@oooooooo@@a
420 `%%%%%%%%%%.::;;;@@@'@@;@@`@@@;;;::.%%%%%%%%%%' `@@ooooooooo@@a.
421 `%%%%%%%%%`::;;@@@aaaaa@@@;;::'%%%%%%%%%' @@oooooooooo@@@a
422 .%%%%%%%%%%;!!,,,,,,,,,,,,,,,!!;%%%%%%%%%%%, .@@@ooooooooo@@@@
423 %%%%%%%%%%%;!!!!!!!!!!!!!!!!!!!!!;%%%%%%%%%%% @;@@@oooooooo@@@'
424 %%%%%%%%%%%;!!!!!!!! " !!!!!!!!;%%%%%%%%%%% @a;@@@ooooo@@@@'
425 `%%%%%%%%%;!!!!!!!!!!, .!!!!!!!!!!;%%%%%%%%%' @@@a;@@@@@@@@'
426 `%%%%%;!!;!!;!!;!!;!!;!!;!!;!!;!;%%%%%' `@@@@aaaaaa'
427 .!!!!!!!!!!!!!!!!!!!!!!!!!!!!!. `@@@@@@'
428 .!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!.
429 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
430 ,!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!,
431 ! !!! !!! !!! !!! !!! !!! !!! !!! !!! !
432 .!!! !!! !!! !!! !!! !!! !!! !!! !!! !!!.
433 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
434 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!
435 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!',;'!!!!! ';,
436 `!!`!!`!!`!!`!!`!!`!!`!!`!!`!!`!!',;; !'!!' ;;,
437 ;;;;;;;;;;;^;;;;;;.,,,,.;;;a@@@@@@@@a;;; .,,. ,
438 ;;;;;;;;;;' `;;',a@@a%%%%%%%%%@@@@@%%%%,@@@@@@@@%%;'
439 _ .::;;;;;;,' ; a@@@@@%%%%%%%''%@@%%``%%%%@@@@@%%;;'
440 ('v') ; ,@a,`;;;,aa@, , a@@@%%%^%%%%%,%%%%%%%%%,%%%%%%%;;;'
441 (,_,) ;;; ,' `@@ @@@@@@'; ; @@@%%' %%%%%%% `%%% `%%%%%%%;;'
442 .,;;;;. `;' :. ,' `,`@' ..,;%%a@@@@@@@@@@@@@a%%'
443 .;;'|/ `;;;;'.aaaaaaaaaaaaaa%%%%%%%%%%%%%%%a@@@@@@@@@@@@@@@@@a
444 ;;. .a@@@@@@@@@@%%%%%%%%%%%%%%%%%%%%%%@@@@(`@@@@@@@')@@@@
445 `;;. ,a@@@@@@@@@@@@@a%%%%%%%%%%%%%%%%%%%::@@@@a@@@@@@@a@@@@:.
446 `;;.a@@@@@@@@@@@@@@%%%%%%%%%%%%%%a@@@%%::%%`@@@@@@@@@@@@@'%%:: ,'',
447 `@@@@@@@@@@@@@@@%%%%%%%@@a%a@@@@@@@%::%%%%%%%%%%%%%%%%%%%%%::' ;
448 @@@@@@@@@@@@@@@@@a%%%%@@@@@@@@@@@@@%;;|;,;|;,;|;,;|;.;|;,;|;; / \
449 @@@@@@@@@@@@@@@@%%%%%%%@@@@@@@@@@@@%`;;,|;,;|;,;|;,;|;,;|;,;' | A |
450 %%%%%%@@@@@%%%;%%%%%%@@@@@@@@@@@@@@@%`|;,;|;,;|;,;|;,;|;,;|' | P |
451 `@@%%%%%%%%;'%%%%%%%%%%@@@@%%@@%%%%%%%,`|;,;|;,;|;,;|;,;|' | P |
452 `@@a%%%%%%.%%% '''%%%%%%%%%%%%%%%'''''' %%%@@@%%.%%%%' | L |
453 @@@@%%%%.%%%' %%%@@@@.%%%a@ | E |
454 @@@%%%%.@a%% %%%@@%%.%%@@@ | S |
455 ~~~~~~ @%%%%%%.@@%% ~~ ~~~~~~~~~ ~~~~~~~ %%%%@@@.%%%@@ ~~~~ `~~~'
456 `:::::'`:::' `:::::'`::::' Susie Oviatt
462 <?php addFooter(); ?>