Some additions to scrolling article.
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="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>
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>
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 <em><em>emphasis</em></em> 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>
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 <li> tag into <li class="map">, 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), 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>
30 <h2>Let's get started...</h2>
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>
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 <li>, always close it with a </li>, and the same goes for <p>. Also, don't write <img src="image.jpg"> and <br> but <img src="image.jpg" /> and <br />. 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>
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
39 <p>Well then, here goes the layout tags explanation:</p>
42 <h1><h1>Main topic</h1></h1>
45 <h1>Latest updates:</h1>
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>
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>
53 <p><em>2/1/1900</em><br />
54 You should outdated updates between <!-- comments -->, 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>
57 <p><em>1/1/1900</em><br />
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>
64 <h2><h2>Sub head</h2></h2>
66 <h3><h3>Sub sub head ;p</h3></h3>
68 <p><p><b><b>Paragraph</b></b> blablablablabla blabla blablabla blablablablablablabla bla bla blabla. The word <i><i>italics</i></i> is rather difficult, and <em><em>emphasis</em></em> might need some er, emphasis :). blablablabla bla blabla blablablablablablablablablablabla blablablabla bla blablablabla <a href=""><a href="">link</a></a> end of paragraph.</p></p>
70 <h2>Some more tags (look at the code)</h2>
72 <p>Let's display an unordered list of items now...</p>
79 <p>And an ordered list...</p>
86 <p>And a differently ordered list (use CSS!)...</p>
88 <ol style="list-style-type: upper-roman">
93 <p>Some preformatted text/tables/code:</p>
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 +---+---+---+---+---+---+---+---+
107 <p>And tables must only be used if you want to display a table...</p>
111 <th colspan="2">Name of table</th>
115 <td>Dude, what does my tattoo say</td>
119 <td>Sweet, what does my tattoo say</td>
124 <p>If you want to render a matrix-like table, add a class="matrix" to the table tag:</p>
126 <table class="matrix">
128 <th colspan="2">Name of table</th>
132 <td>Dude, what does my tattoo say</td>
136 <td>Sweet, what does my tattoo say</td>
141 <p>Also, a list of definitions (if you ever need it); Japanese lesson no. 1:</p>
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>
148 <h2>Use unicode!</h2>
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 & 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>
152 <p>However you'll still need to use &amp;, &lt; and &gt; for &, < and >, because in HTML they are escape characters. They also need to be used inside preformatted (<pre>) tags.</p>
155 <h2>Custom styles</h2>
157 <p>You can also add custom styles to them to either block-level tags like <div> and <p> (p adds an empty line while div does not), or inline tags like <span> and <i> (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>
160 <li>Example 1: <span class="inv"><span class="inv">negative logic (invert)</span></span> is an overline usually used for indicating negative logic.</li>
161 <li>Example 2: <span style="color: rgb(255,0,0)"><span style="color: rgb(255,0,0)">red color</span></span>, 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>
164 <p>Some more examples (note how they are not separated by an empty line because I use <div> instead of <p>) (although you'll generally want to use <br /> for common line breaks):</p>
166 <div style="text-align: right"><div style="text-align: right">right-aligned</div></div>
167 <div style="text-align: center"><div style="text-align: center">centered</div></div>
169 <h3 style="clear:none">XHTML Conformance</h3>
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>
173 <p>Here are the main rules to produce XHTML compliant
174 documents that will work with Mozilla:</p>
177 <li><b>XHTML tags are all lowercase</b>
178 <table border="1" width="75%">
180 <td width="50%" align="center">
183 <td width="50%" align="center">
190 <p><b><code><H1 Align="CENTER">Cauchy<br />
191 Integral</H1></code></b></p>
194 <p><b><code><<font color="red">h1 a</font>lign="<font color="red">center</font>">Cauchy<br />
196 Integral</<font color="red">h1</font>></code></b></p>
202 <li><b>All non-empty elements must be terminated</b>
203 <table border="1" width="75%">
206 <td width="50%" align="center">
209 <td width="50%" align="center">
214 <td width="50%" valign="top"> <b>
219 <li>Presentation markup
220 <li>Content markup
224 <td width="50%" valign="top"> <b>
229 <li>Presentation markup<font color="red"></li></font>
230 <li>Content markup<font color="red"></li></font>
233 <font color="red"></p></font>
240 <li><b>Empty elements must include a trailing slash (/)</b>
241 <table border="1" width="75%">
244 <td width="50%" align="center">
247 <td width="50%" align="center">
253 <p><b><code><img src="myimage.gif"></code></b></p>
257 <p><b><code><img src="myimage.gif" <font color="red">/</font>></code></b></p>
262 <p><b><code><br></code></b></p>
265 <p><b><code><br <font color="red">/</font>></code></b></p>
271 <p><b><code><hr></code></b></p>
274 <p><b><code><hr <font color="red">/</font>></code></b></p>
281 <li><b>All attribute values must be quoted</b></li>
282 <table border="1" width="75%">
284 <td width="50%" align="center">
287 <td width="50%" align="center">
294 <p><b><code><table border=0></code></b></p>
297 <p><b><code><table border=<font color="red">"</font>0<font color="red">"</font>></code></b></p>
303 <li><b>Attribute-value pairs must be written in full</b></li>
304 <table border="1" width="75%">
306 <td width="50%" align="center">
309 <td width="50%" align="center">
316 <p><b><code><td nowrap></code></b></p>
319 <p><b><code><td nowrap<font color="red">="nowrap"</font>></code></b></p>
325 <li>The root element of the document must be <code><html></code> and must designate
326 the XHTML namespace<br />
327 <code><html xmlns="http://www.w3.org/1999/xhtml"></code><br />
332 <li>All documents must have a <code>DOCTYPE</code> declaration
335 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
336 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
339 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
340 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
343 PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
344 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
352 <p>Here is an example of a minimal XHTML document.</p>
355 <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>
356 <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>
358 <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>
359 <font color="#500000"><b><head</b><b>></b></font>
360 <font color="#500000"><b><title</b><b>></b></font><font color="#005000">Minimum XHTML Document</font><font color="#500000"><b></title></b></font>
361 <font color="#500000"><b></head></b></font>
362 <font color="#500000"><b><body</b><b>></b></font>
363 <font color="#500000"><b><p</b><b>>
365 </b></font><font color="#005000">Accept all valid XHTML, including therefore</font>
366 <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">
367 <b> </p></b></font>
368 <font color="#500000"><b></body></b></font>
370 <font color="#500000"><b></html></b></font>
375 <p class="signed">~Grauw</p>
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 '
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
474 <?php addFooter(); ?>