Here are a few simple HTML examples that show how to format the Planets.nu howtoplay pages. These pages should be simple, with the intention of making them easy to read & understand, and easy to edit.
HTML stands for HyperText Markup Language. This page describes some of the markup tags. For the most part, the markup described here is all that should be used.
HTML consists of tags, which define how the text following it is to be formatted. Most tags (i.e. <p> ) also have an end tag ( </p> for the previous example). When the end tag is encountered, the text formatting returns to what it was prior to the start tag.
The software automatically inserts an <h1> tag into the web page, using the provided page title. Other available header tags are <h2> through <h6> , but it probably isn't necessary to go past <h3> for these pages.
Paragraphs are the most common item that will be used. They are introduced by the use of the <p> tag.
NOTE : Use of a list (<ol></ol> or <ul></ul>) inside of a paragraph (<p></p>) will cause the HTML editor to display the close tag for the paragraph in red, indicating an error. This is a bug in the HTML editor. The list nested inside of a paragraph works properly, and delivers a more readable spacing.
It is also possible to use the <br> tag to insert a hard line break into a page. This tag has no end tag. This tag should be used with caution, as there is often a better choice. Multiple consecutive <br> tags should not be used.
It is sometimes necessary to place a visual boundary between two sections of text. This can be done with the <hr> tag. This tag has no end tag.
The <block quote> tag will indent the rendered HTML between the open and close tag. This is the easiest way to indent a block of text, a table, an image, or anything else that may need to be indented.
Sometimes it is desirable to have an indented section of text. This can be done with the style="margin:20px" option on an HTML tag (generates a 20 pixel indent). This is most often used with a <p> tag, but could also be used on almost any HTML tag. When used with a <p> tag, will look like <p style="margin:20px"> .
To isolate formatting tags from style tags, the <div> tag can be used.
Lists are one of several tools that are used to organize data. HTML supports three types of list. Planets.nu only supports only two of these types. The supported list types are <ol> (ordered list) and <ul> (unordered list). Individual items within the list are denoted by the use of the <li> (list element) tag. The value option can be used, but the supplied argument must be numeric.
Here are a few examples:
HTML Output HTML Output <ol>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ol>
- one
- two
- three
- four
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
- one
- two
- three
- four
<ol>
<li>one</li>
<li>two
<ol type="A">
<li>three</li>
<li>four</li>
</ol></li></ol>
- one
- two
- three
- four
<ul>
<li>one</li>
<li>two
<ul>
<li>three</li>
<li>four</li>
</ul></li></ul>
- one
- two
- three
- four
<ul>
<li>one</li>
<li>two
<ol>
<li>three</li>
<li value="6">four</li>
</ol></li></ul>
- one
- two
- three
- four
<ol>
<li>one</li>
<li>two
<ul>
<li>three</li>
<li>four</li>
</ul></li></ol>
- one
- two
- three
- four
Due to limitations imposed by the Planets.nu documentation, links are a bit different from normal HTML.
To link to another page within the documentation is done as normal. As an example, to link to the "intro" documentation page, the HTML would be <a href="intro">intro</a> .
To link to a web page outside of the Planets.nu documentation, it is necessary to use a non-standard construction. As an example, the link to Donovans would be <a external="https://www.donovansvgap.com/">Donovans</a> . When linking to pages external to Planets.nu, it is appropriate to indicate to the user that the destination is not on Planets.nu, and is not under their control. The external page will open in a new tab.
To create an anchor within a documentation page, use the id=" anchor name " attribute in a tag (e.g. <p id=" when-to-use "> ). Anchors must be unique within a document.
To link to an anchor within the same documentation page, use the tag <a onclick="document.getElementById(' anchor name ').scrollIntoView()">Link to anchor</a> . It is not possible to link to an anchor in another page of documentation.
To link back to the calling page, the tag <a onclick="history.go(-1)">Back</a> should be used. This should be enclosed in paragraph tags, and placed at the bottom of each page of documentation.
There are a few specific types of text formatting that may be appropriate for use in the Planets.nu documentation.
Historically, text has been able to be made bold by the use of the <b> tag. While this still works, the need to internationalize has caused the creation of the <strong> tag, which should be used on Planets.nu.
Historically, text has been able to be italicized by the use of the <i> tag. While this still works, the need to internationalize has caused the creation of the <em> tag, which should be used on Planets.nu.
There are times when a portion of text needs to be removed, but the user should still be able to see it. The <s> tag will cause the text between the opening and closing tags to be displayed with a line through it (a "Strikethrough").
It is sometimes necessary to put commands into the documentation. This can be done with the <samp> and <code> tags. These tags can also be used for small output strings. Large strings and multi-line output should use the quotation methods described below.
Short quotes of documents and people can use the <q> tag. Longer such quotes should use the <blockquote> tag.
To quote a long program output, the <blockquote> and <samp> tags should be combined, as follows:
<p>Information</p>
<blockquote><samp>
Long output<br>
from program
</samp></blockquote>
<p>More information</p>
The tag to insert images into a document is <img src=" image URL "> . This tag has no end tag.
The height="200px" attribute can be used to set the height of the image being displayed (200 pixels in this example). The actual image height will be shrunken or stretched, as needed, to achieve the requested height.
The width="200px" attribute can be used to set the width of the image being displayed (200 pixels in this example). The actual image width will be shrunken or stretched, as needed, to achieve the requested width.
It is sometimes useful to have text appear when the mouse hovers over an image. The alt="text" attribute can be used to set that text.
Tables are one of the most complex structures that will have to be dealt with in the Planets.nu documentation. The HTML editor breaks even simple tables into large numbers of lines.
There are a number of tags that are used in tables. These include the <table> , <tr> , <th> and <td> tags. While there are other table-related tags, they are not needed for the tables in the Planets.nu documentation, and will not be described here. In addition, there are several attributes that may find their place in the Planets.nu documentation.
Item Type Description table tag Introduces a table border attribute Width of row/column separator cellspacing attribute specifies space between cells - should be set to "0" cellpadding attribute Specifies the amout of space around each cell tr tag Table Row th tag Table Header element td tag Table Data element colspan attribute Used when a value spans multiple columns in the table rowspan attribute Used when a value spans multiple rows in the table align="center" attribute Uses center horizontal alignment for the field align="left" attribute Uses left horizontal alignment for the field align="right" attribute Uses right horizontal alignment for the field valign="top" attribute Uses top vertical alignment for the field valign="center" attribute Uses center vertical alignment for the field
That's a lot of information, so here is an example to help make sense out of it.
HTML Output <table border="1"><tr>
<th colspan="2">one</th>
<th rowspan="2">two</th>
</tr><tr>
<th>three</th>
<th>four</th>
</tr><tr>
<td align="left">five</td>
<td>six</td>
<td>seven</td>
</tr></table>
one two three four five six seven
The <div> and <span> tags apply specific formatting to the portion of the document between the open and close of the tag. These are rather complex, and could be difficult for some people to understand when editing. These tags should be used with caution, as there's usually another way to achieve the desired results that's easier for other editors to understand.
There are a number of special characters that cause problems, as the browsers use them to do special actions, or as they're not 7-bit ASCII characters. To display those characters, it is best to use the entity. The special characters that are currently, or likely to be, used are listed below. As new special characters are needed, they should be added to this list, so that other editors will understand the entity.
Description Entity Special Character Quotation mark " " Ampersand & & Less-than sign < < Greater-than sign > > Normal dash (length of character "n") – – Long dash (length of character "m") — — Non-breaking space space Dagger † † Double dagger ‡ ‡ Degree symbol ° °
Many other characters can be found at the following external sites:
Comments are frequently used in the Planets.nu documentation. While the user/player will never see them (unless they choose to view the source), they help the editors work together. These comments are used to pass along status information and ideas. Historical comments should not be persistent, but they may be used to comment out a section of text while editing, to see what works.
A comment is opened with the string <!–– , and closed with the string ––> . Comments may not be nested.
It is not possible to have a script within a documentation page. The documentation editor strips out the script tag. Simple tasks, similar to those described in the Links section may be performed, but please test it out on an unlinked page before putting it into a production page.
For additional information, the HTML5 reference at the Mozilla Developer Network is probably the best technical source, but a bit light on examples.
For more examples, but possible technical errors, you might want to have a look at the HTML5 reference at W3 Schools.