README.html - Mend some HTML syntax issues

Wrap attributes in quotes, don't store lists within <p>...</p>, etc.
This commit is contained in:
Bill Kendrick 2020-07-27 22:33:38 -07:00
parent 513498ada7
commit 8a5bcb3fe5
2 changed files with 320 additions and 316 deletions

View file

@ -367,6 +367,7 @@ Available Tools
not include all characters for all languages,
so sometimes you'll need to change fonts to see
the characters you're trying to type.
* Japanese — Romanized Hiragana and
Romanized Katakana — right [Alt]
* Korean — Hangul 2-Bul — right [Alt] or
@ -842,6 +843,7 @@ Doing it Manually
Calculating the height of Tux Paint's canvas requires multiple
steps:
1. Take the height of the window (e.g, 480, 600 or 768 pixels) and
subtract 144
2. Take the result of Step 1 and divide it by 48
@ -851,6 +853,7 @@ Doing it Manually
5. Finally, take the result of Step 4 and add 40
Example: Tux Paint running at fullscreen on a 1440x900 display.
* The canvas width is simply 1440 - 192, or 1248.
* The canvas height is calculated as:
1. 900 - 144, or 756
@ -858,6 +861,7 @@ Doing it Manually
3. 15.75 rounded down, or 15
4. 15 * 48, or 720
5. 720 + 40, or 760
So the canvas within a 1440x900 Tux Paint window is 1248x760.
----------------------------------------------------------------------

View file

@ -7,7 +7,7 @@
alink="#FF00FF">
<center>
<h1><img src="../../html/images/tuxpaint-title.png" width=205 height=210
<h1><img src="../../html/images/tuxpaint-title.png" width="205" height="210"
alt="Tux&nbsp;Paint"><br>
version
@ -26,9 +26,9 @@ version
</center>
<hr size=2 noshade>
<hr size="2" noshade>
<table border=2 cellspacing=0 cellpadding=2>
<table border="2" cellspacing="0" cellpadding="2" summary="Table of Contents">
<tr><th>Table of Contents</th></tr>
<tr><td>
<ul>
@ -41,7 +41,7 @@ version
</td></tr>
</table>
<hr size=2 noshade>
<hr size="2" noshade>
<h1><a name="about">About</a></h1>
<blockquote>
@ -109,7 +109,7 @@ version
</blockquote>
</blockquote>
<hr size=2 noshade>
<hr size="2" noshade>
<h1><a name="using">Using Tux&nbsp;Paint</a></h1>
@ -133,14 +133,14 @@ version
(to "stderr").</p>
</blockquote>
<hr size=1 noshade>
<hr size="1" noshade>
<h3>Windows Users</h3>
<blockquote>
<table border=0 cellspacing=0 cellpadding=4 bgcolor="#AAAAFF"
align=right summary=""><tr><td align=center>
<img src="../../html/images/icon-win32.png" width=32 height=32 alt="[Icon]"><br>
<table border="0" cellspacing="0" cellpadding="4" bgcolor="#AAAAFF"
align="right" summary=""><tr><td align="center">
<img src="../../html/images/icon-win32.png" width="32" height="32" alt="[Icon]"><br>
Tux&nbsp;Paint
</td></tr></table>
@ -165,26 +165,26 @@ version
<p>If you used the 'ZIP-file' download, Tux&nbsp;Paint's folder will
be wherever you put it when you unzipped the ZIP file.</p>
<br clear=all>
<br clear="all">
</blockquote>
<hr size=1 noshade>
<hr size="1" noshade>
<h3>macOS Users</h3>
<blockquote>
Simply double-click the "Tux&nbsp;Paint" icon.<p>
<p>Simply double-click the "Tux&nbsp;Paint" icon.</p>
</blockquote>
</blockquote>
<hr size=1 noshade>
<hr size="1" noshade>
<h2>Title Screen</h2>
<blockquote>
<p>When Tux&nbsp;Paint first loads, a title/credits screen will appear.</p>
<p align=center><img src="../../html/images/tuxpaint-title.jpg" width=324 height=254
<p align="center"><img src="../../html/images/tuxpaint-title.jpg" width="324" height="254"
alt="[Title Screenshot]"></p>
<p>Once loading is complete, press a key or click on the mouse to continue.
@ -192,7 +192,7 @@ version
automatically.)</p>
</blockquote>
<hr size=1 noshade>
<hr size="1" noshade>
<h2>Main Screen</h2>
@ -205,7 +205,7 @@ version
<p>The toolbar contains the drawing and editing controls.</p>
<!-- FIXME: Updated screenshot -->
<p align=center><img src="../../html/images/tools.jpg" width=324 height=254
<p align="center"><img src="../../html/images/tools.jpg" width="324" height="254"
alt="[Tools: Paint, Stamp, Lines, Shapes, Text, Magic, Label, Undo, Redo,
Eraser, New, Open, Save, Print, Quit]"></p>
</dd>
@ -215,7 +215,7 @@ version
<p>The largest part of the screen, in the center, is the drawing
canvas. This is, obviously, where you draw!</p>
<p align=center><img src="../../html/images/canvas.jpg" width=324 height=254
<p align="center"><img src="../../html/images/canvas.jpg" width="324" height="254"
alt="[(Canvas)]"></p>
<p><b>Note:</b> The size of the drawing canvas depends on the size
@ -233,7 +233,7 @@ version
the various brushes available. When the Rubber&nbsp;Stamp tool
is selected, it shows the different shapes you can use.</p>
<p align=center><img src="../../html/images/selector.jpg" width=324 height=254
<p align="center"><img src="../../html/images/selector.jpg" width="324" height="254"
alt="[Selectors - Brushes, Letters, Shapes, Stamps]"></p>
</dd>
@ -243,7 +243,7 @@ version
<p>A palette of available colors are shown near the bottom of the
screen.</p>
<p align=center><img src="../../html/images/colors.jpg" width=324 height=254
<p align="center"><img src="../../html/images/colors.jpg" width="324" height="254"
alt="[Colors - Black, White, Red, Pink, Orange, Yellow, Green, Cyan,
Blue, Purple, Brown, Grey]"></p>
@ -264,7 +264,7 @@ version
<p>At the very bottom of the screen, Tux, the Linux Penguin,
provides tips and other information while you draw.</p>
<p align=center><img src="../../html/images/tips.jpg" width=324 height=254
<p align="center"><img src="../../html/images/tips.jpg" width="324" height="254"
alt="(For example: 'Pick a shape. Click to pick the center, drag, then
let go when it is the size you want. Move around to rotate it, and
click to draw it.)"></p>
@ -272,7 +272,7 @@ version
</dl>
</blockquote>
<hr size=1 noshade>
<hr size="1" noshade>
<h2>Available Tools</h2>
@ -282,7 +282,7 @@ version
<dl>
<dt><b>Paint (Brush)</b></dt>
<dd>
<img src="../../html/images/tool_paint.png" width=48 height=48 alt="" align=right>
<img src="../../html/images/tool_paint.png" width="48" height="48" alt="" align="right">
<p>The Paint&nbsp;Brush tool lets you draw freehand, using various
brushes (chosen in the Selector on the right) and colors
@ -294,18 +294,18 @@ version
<p>As you draw, a sound is played. The bigger the brush, the
lower the pitch.</p>
<br clear=all>
<br clear="all">
<p align=center><img src="../../html/images/ex_paint.png" width=120 height=95
<p align="center"><img src="../../html/images/ex_paint.png" width="120" height="95"
alt=""></p>
<hr size=1>
<hr size="1">
</dd>
<dt><b>Stamp (Rubber Stamp)</b></dt>
<dd>
<img src="../../html/images/tool_stamp.png" width=48 height=48 alt="" align=right>
<img src="../../html/images/tool_stamp.png" width="48" height="48" alt="" align="right">
<p>The Stamp tool is like a set of rubber stamps or stickers.
It lets you paste pre-drawn or photographic images (like a picture
@ -315,11 +315,11 @@ version
mouse, showing where the stamp will be placed, and how big it will
be.</p>
<p align=center><img src="../../html/images/ex_stamps.png" width=182 height=156
<p align="center"><img src="../../html/images/ex_stamps.png" width="182" height="156"
alt=""></p>
<img src="../../html/images/tool_stamp_categories.png" width=96 height=48 alt=""
align=right>
<img src="../../html/images/tool_stamp_categories.png" width="96" height="48" alt=""
align="right">
<p>There can be numerous categories of stamps (e.g., animals,
plants, outer space, vehicles, people, etc.). Use the
Left and Right arrows to cycle through the collections.</p>
@ -338,11 +338,11 @@ version
mirror-image, using the control buttons at the bottom right.</li>
</ul>
<p align=center>
<img src="../../html/images/tool_stamp_controls.png" width=96 height=96 alt="">
<p align="center">
<img src="../../html/images/tool_stamp_controls.png" width="96" height="96" alt="">
</p>
<img src="../../html/images/tool_sfx.png" width=48 height=24 alt="" align=right>
<img src="../../html/images/tool_sfx.png" width="48" height="24" alt="" align="right">
<p>Different stamps can have different sound effects and/or
descriptive (spoken) sounds. Buttons at the lower left
(near Tux, the Linux penguin) allow you to re-play the sound effects
@ -354,13 +354,13 @@ version
See the "<a href="OPTIONS.html"><i>Options</i></a>"
documentation.)</p>
<hr size=1>
<hr size="1">
</dd>
<dt><b>Lines</b></dt>
<dd>
<img src="../../html/images/tool_lines.png" width=48 height=48 alt="" align=right>
<img src="../../html/images/tool_lines.png" width="48" height="48" alt="" align="right">
<p>This tool lets you draw straight lines using the various
brushes and colors you normally use with the Paint Brush.</p>
@ -372,19 +372,19 @@ version
<p>Let go of the mouse to complete the line. A "sproing!" sound will
play.</p>
<br clear=all>
<br clear="all">
<p align=center><img src="../../html/images/ex_lines.png" width=76 height=103
<p align="center"><img src="../../html/images/ex_lines.png" width="76" height="103"
alt=""></p>
<hr size=1>
<hr size="1">
</dd>
<dt><b>Shapes</b></dt>
<dd>
<img src="../../html/images/tool_shapes.png" width=48 height=48 alt=""
align=right>
<img src="../../html/images/tool_shapes.png" width="48" height="48" alt=""
align="right">
<p>This tool lets you draw some simple filled, and un-filled shapes.</p>
@ -416,18 +416,18 @@ version
</dd>
</dl>
<br clear=all>
<br clear="all">
<p align=center><img src="../../html/images/ex_shapes.png" width=177 height=104
<p align="center"><img src="../../html/images/ex_shapes.png" width="177" height="104"
alt=""></p>
<hr size=1>
<hr size="1">
</dd>
<dt><b>Text</b> and <b>Label</b></dt>
<dd>
<img src="../../html/images/tool_text.png" width=48 height=48 alt="" align=right>
<img src="../../html/images/tool_text.png" width="48" height="48" alt="" align="right">
<p>Choose a font (from the 'Letters' available on the right) and a color
(from the color palette near the bottom). Click on the screen and a
@ -446,7 +446,7 @@ version
active causes the current line of text to move to that location
(where you can continue editing it).</p>
<p align=center><img src="../../html/images/ex_text.png" width=139 height=69
<p align="center"><img src="../../html/images/ex_text.png" width="139" height="69"
alt=""></p>
<dl>
@ -490,6 +490,7 @@ version
<b>Note:</b> Many fonts do not include all characters for
all languages, so sometimes you'll need to change fonts to see the
characters you're trying to type.
</p>
<ul>
<li>Japanese &mdash; Romanized Hiragana and Romanized Katakana
&mdash; <b>right&nbsp;[Alt]</b>
@ -504,28 +505,27 @@ version
&mdash; <b>right&nbsp;[Alt]</b>
</li>
</ul>
</p>
</dl>
</dd>
<hr size=1>
<hr size="1">
</dd>
<dt><b>Fill</b></dt>
<dd>
<img src="../../html/images/tool_fill.png" width=48 height=48 alt="" align=right>
<img src="../../html/images/tool_fill.png" width="48" height="48" alt="" align="right">
<p>The 'Fill' tool 'flood-fills' a contiguous area of your drawing
with a solid color of your choice.</p>
<p>Note: Prior to Tux&nbsp;Paint 0.9.24, this was a "Magic" tool (see below).</p>
<hr size=1>
<hr size="1">
</dd>
<dt><b>Magic (Special Effects)</b></dt>
<dd>
<img src="../../html/images/tool_magic.png" width=48 height=48 alt="" align=right>
<img src="../../html/images/tool_magic.png" width="48" height="48" alt="" align="right">
<p>The 'Magic' tool is actually a set of special tools. Select one of
the "magic" effects from the selector on the right. Then, depending
@ -538,18 +538,18 @@ version
picture at once, an 'entire&nbsp;picture' button will be available
on the right.</p>
<br clear=all>
<br clear="all">
<p>See the <a href="../magic-docs/html/index.html">instructions for each Magic tool</a> (in the 'magic-docs' folder).</p>
<hr size=1>
<hr size="1">
</dd>
<dt><b>Eraser</b></dt>
<dd>
<img src="../../html/images/tool_eraser.png" width=48 height=48 alt=""
align=right>
<img src="../../html/images/tool_eraser.png" width="48" height="48" alt=""
align="right">
<p>This tool is similar to the Paint Brush. Wherever you click
(or click and drag), the picture will be erased. (This may be
@ -564,12 +564,12 @@ version
<p>As you erase, a "squeaky clean" eraser/wiping sound is played.</p>
<br clear=all>
<br clear="all">
</dd>
</dl>
</blockquote>
<hr size=1 noshade>
<hr size="1" noshade>
<h3>Other Controls</h3>
@ -577,7 +577,7 @@ version
<dl>
<dt><b>Undo</b></dt>
<dd>
<img src="../../html/images/tool_undo.png" width=48 height=48 alt="" align=right>
<img src="../../html/images/tool_undo.png" width="48" height="48" alt="" align="right">
<p>Clicking this tool will undo the last drawing action. You can
even undo more than once!</p>
@ -585,15 +585,15 @@ version
<p>Note: You can also press <b>[Control]-[Z]</b> on the keyboard to
undo.</p>
<br clear=all>
<br clear="all">
<hr size=1>
<hr size="1">
</dd>
<dt><b>Redo</b></dt>
<dd>
<img src="../../html/images/tool_redo.png" width=48 height=48 alt="" align=right>
<img src="../../html/images/tool_redo.png" width="48" height="48" alt="" align="right">
<p>Clicking this tool will redo the drawing action you just "undid"
with the 'Undo' button.</p>
@ -604,15 +604,15 @@ version
<p>Note: You can also press <b>[Control]-[R]</b> on the keyboard to
redo.</p>
<br clear=all>
<br clear="all">
<hr size=1>
<hr size="1">
</dd>
<dt><b>New</b></dt>
<dd>
<img src="../../html/images/tool_new.png" width=48 height=48 alt="" align=right>
<img src="../../html/images/tool_new.png" width="48" height="48" alt="" align="right">
<p>Clicking the "New" button will start a new drawing.
A dialog will appear where you may choose to start a new picture
@ -635,24 +635,24 @@ version
'Starter,' so you can use it again later).</p>
</blockquote>
<br clear=all>
<br clear="all">
<hr size=1>
<hr size="1">
</dd>
<dt><b>Open</b></dt>
<dd>
<img src="../../html/images/tool_open.png" width=48 height=48 alt="" align=right>
<img src="../../html/images/tool_open.png" width="48" height="48" alt="" align="right">
<p>This shows you a list of all of the pictures you've saved.
If there are more than can fit on the screen, use the "Up"
and "Down" arrows at the top and bottom of the list to scroll
through the list of pictures.</p>
<br clear=all>
<br clear="all">
<p align=center><img src="../../html/images/open_dialog.jpg" width=194 height=152
<p align="center"><img src="../../html/images/open_dialog.jpg" width="194" height="152"
alt=""></p>
<p>Click a picture to select it, then...</p>
@ -660,8 +660,8 @@ version
<blockquote>
<ul>
<li>
<img src="../../html/images/open_open.png" width=48 height=48 alt=""
align=right>
<img src="../../html/images/open_open.png" width="48" height="48" alt=""
align="right">
<p>Click the green "Open" button at the lower left of the list to
load the selected picture.</p>
@ -669,12 +669,12 @@ version
<p>(Alternatively, you can double-click a picture's icon to load
it.)</p>
<br clear=all>
<br clear="all">
</li>
<li>
<img src="../../html/images/open_erase.png" width=48 height=48 alt=""
align=right>
<img src="../../html/images/open_erase.png" width="48" height="48" alt=""
align="right">
<p>Click the brown "Erase" (trash can) button at the lower right of
the list to erase the selected picture. (You will be asked to
@ -683,28 +683,28 @@ version
<p><b>Note:</b> As of version 0.9.22, the picture will be
placed in your desktop's trash can, on Linux only.</p>
<br clear=all>
<br clear="all">
</li>
<li>
<img src="../../html/images/open_slides.png" width=48 height=48 alt=""
align=right>
<img src="../../html/images/open_slides.png" width="48" height="48" alt=""
align="right">
<p>Click the blue "Slides" (slide projector) button at the lower
left to go to slideshow mode. See "<a href="#slides">Slides</a>",
below, for details.</p>
<br clear=all>
<br clear="all">
</li>
<li>
<img src="../../html/images/open_back.png" width=48 height=48 alt=""
align=right>
<img src="../../html/images/open_back.png" width="48" height="48" alt=""
align="right">
<p>Or click the red "Back" arrow button at the lower right of the
list to cancel and return to the picture you were drawing.</p>
<br clear=all>
<br clear="all">
</li>
</ul>
</blockquote>
@ -716,15 +716,15 @@ version
<p>Note: You can also press <b>[Control]-[O]</b> on the keyboard to get
the 'Open' dialog.</p>
<br clear=all>
<br clear="all">
<hr size=1>
<hr size="1">
</dd>
<dt><b><a name="save">Save</a></b></dt>
<dd>
<img src="../../html/images/tool_save.png" width=48 height=48 alt="" align=right>
<img src="../../html/images/tool_save.png" width="48" height="48" alt="" align="right">
<p>This saves your current picture.</p>
@ -740,7 +740,7 @@ version
whether you want to save over the old version, or create a new
entry (a new file).</p>
<p align=center><img src="../../html/images/saveover.png" width=177 height=110
<p align="center"><img src="../../html/images/saveover.png" width="177" height="110"
alt=""></p>
<p>(NOTE: If either the "<code>saveover</code>" or
@ -752,15 +752,15 @@ version
<p>Note: You can also press <b>[Control]-[S]</b> on the keyboard to
save.</p>
<br clear=all>
<br clear="all">
<hr size=1>
<hr size="1">
</dd>
<dt><b>Print</b></dt>
<dd>
<img src="../../html/images/tool_print.png" width=48 height=48 alt="" align=right>
<img src="../../html/images/tool_print.png" width="48" height="48" alt="" align="right">
<p>Click this button and your picture will be printed!</p>
@ -880,15 +880,15 @@ version
</dd>
</dl>
<br clear=all>
<br clear="all">
<hr size=1>
<hr size="1">
</dd>
<dt><a name="slides"><b>Slides</b> (under "Open")</a></dt>
<dd>
<img src="../../html/images/open_slides.png" width=48 height=48 alt=""
align=right>
<img src="../../html/images/open_slides.png" width="48" height="48" alt=""
align="right">
<p>The "Slides" button is available in the "Open" dialog.
It displays a list of your saved files, just like the "Open" dialog.</p>
@ -926,12 +926,12 @@ version
<p>Click "Back" in the slideshow image selection screen to return to
the "Open" dialog.</p>
<br clear=all>
<br clear="all">
</dd>
<dt><b>Quit</b></dt>
<dd>
<img src="../../html/images/tool_quit.png" width=48 height=48 alt="" align=right>
<img src="../../html/images/tool_quit.png" width="48" height="48" alt="" align="right">
<p>Clicking the "Quit" button, closing the Tux&nbsp;Paint window, or
pushing the <b>[Escape]</b> key will quit Tux&nbsp;Paint.</p>
@ -961,7 +961,7 @@ version
may be used to quit. (See the
"<a href="OPTIONS.html"><i>Options</i></a>" documentation.)</p>
<br clear=all>
<br clear="all">
</dd>
<dt><b>Sound Muting</b></dt>
@ -983,7 +983,7 @@ version
</blockquote>
</blockquote>
<hr size=2 noshade>
<hr size="2" noshade>
<h1><a name="loading_into">Loading Other Pictures into Tux&nbsp;Paint</a></h1>
@ -1110,7 +1110,7 @@ version
window (e.g., 640, 800 or 1024 pixels), minus 192.</p>
<p>Calculating the height of Tux&nbsp;Paint's canvas requires multiple
steps:
steps:</p>
<ol>
<li>Take the height of the window (e.g, 480, 600 or 768 pixels) and
subtract 144</li>
@ -1119,28 +1119,28 @@ version
simply 9)</li>
<li>Take the result of Step&nbsp;3 and multiply it by 48</li>
<li>Finally, take the result of Step&nbsp;4 and add 40</li>
</ol></p>
</ol>
<p><b>Example:</b> Tux&nbsp;Paint running at fullscreen on a 1440x900
display.
display.</p>
<ul>
<li>The canvas width is simply 1440&nbsp;-&nbsp;192, or 1248.</li>
<li>The canvas height is calculated as:
<ol>
<li>900&nbsp;-&nbsp;144, or 756
<li>756&nbsp;/&nbsp;48, or 15.75
<li>15.75 rounded down, or 15
<li>15&nbsp;*&nbsp;48, or 720
<li>720&nbsp;+&nbsp;40, or 760
<li>900&nbsp;-&nbsp;144, or 756</li>
<li>756&nbsp;/&nbsp;48, or 15.75</li>
<li>15.75 rounded down, or 15</li>
<li>15&nbsp;*&nbsp;48, or 720</li>
<li>720&nbsp;+&nbsp;40, or 760</li>
</ol>
</li>
</ul>
So the canvas within a 1440x900 Tux&nbsp;Paint window is 1248x760.</p>
<p>So the canvas within a 1440x900 Tux&nbsp;Paint window is 1248x760.</p>
</blockquote>
</blockquote>
</blockquote>
<hr size=2 noshade>
<hr size="2" noshade>
<h1><a name="further">Further Reading</a></h1>
@ -1195,7 +1195,7 @@ version
</ul>
</blockquote>
<hr size=2 noshade>
<hr size="2" noshade>
<h1><a name="help">How to Get Help</a></h1>