This guide will help editors get started on learning the basics of HTML.
- 1 Text styles
- 2 DIV
- 3 Info/Navboxes
- 4 Miscellaneous HTML
There is a form of HTML used to stylize text. It is basic and spans the length of the text until it is closed. To use it, type <span style="style"></span>
Beginning note: Multiple style commands can be strung together by placing a semicolon (;) after one command ends. For example, one can use <span style="color:blue; border: 1px solid gray">This text is blue with a gray border</span> to knock out both styles in one.
Used to color text. Ex: <span style="color:green">This text is green.</span> will produce:
This text is green.
This will put a border around the text. There are two types of borders: solid and dashed lines. For example, <span style="border: 1px solid green>This text has a solid green border which is 1 pixel thick.</span> will produce:
This will add a colored background to the text. For example, <span style="background-color:green">This text has a green background</span> will produce:
This text has a green background.
This is used to give a rounded edge to borders for users viewing the wiki with Mozilla Firefox. It can't be seen with any other browser. It must be used with the "border" style. For example: <span style="border:1px solid green; -moz-border-radius:15px">This text has a rounded border for Firefox viewers and a square border for other viewers.</span> will produce:
Padding is used to tell the wiki how far the background should go out. To use it, type W<span style="padding: (number)em"></span>. Note that "em" should be included after the number, and it can be a decimal number. In addition, you can use "auto" for the padding. Do not place em after auto. Another note: This can only be used in conjunction with a background. It will not do anything otherwise. Ex: <nowiki><span style="background-color:green; padding: .8em">This text has a large background</span> will produce:
This text has a large background.
Float tells the wiki where the text should go. There are two commands: Left and right. It will throw the text over to wherever you tell it. This should be used sparingly for text, as it can easily complicate pages. Don't use it in articles. Ex: <span style="float:right">This text is to the right</span> will produce:
This text is to the right.
Margin is used to pad without having the background expand. It will also prevent the background from overshadowing other text. It uses the same commands as padding (Xem or auto). There can be two numbers used for the margin. The first one will be the horizontal margin between the text above and below the current text, and the second will be the vertical margin, or the distance from the edge of the page. Using only one number will designate that number for both margins. Ex: <span style="margin:2em">This text has a margin of 2em</span> will produce:
This text has a margin of 2em.
Text-decoration is used to apply various functions to the text. It is multi-faceted and can create some interesting results.
These are the commands which you can use for text decoration. Note that you can only use one at a time.
This will underline text. It is easier to use <u></u> for this, however. For example:<span style="text-decoration:underline;">This text is underlined.</span> will produce:
This text is underlined.
This will make the text blink on and off. Please refrain from using this in articles, as it is very unprofessional in appearance and it can distract from the rest of the text. For example, <span style="text-decoration:blink;">This text is blinking.</span> will produce:
This text is blinking.
Plainlinks is technically not a style command. It is a class command which is used to take the arrow out of off-wiki links. For example, a link to Nintendo.com normally appears like this: Nintendo.com. With <span class="plainlinks">[http://nintendo.com Nintendo.com]</span>, it will appear as such:
*Note that your default settings may format external links without arrows at all. In these cases, you will not see the arrow, but using this command will eliminate the extra space it leaves behind afterwards.
Div is used to denote blocks of text, such as message boxes. It uses the same commands as the span style (with the exception of plainlinks).
The class of a DIV denotes what type of text it is. This is used for the wiki to recognize what type of text you are creating so it can classify it appropriately.
These are different classes of DIVs. Note that these do not automatically style your DIV.
This is used to make the wiki treat the DIV as though it were a table of contents.
This is a box much like the ones used to navigate to similar pages.
This is a box like the one which notifies you of new messages.
The DIV style is used to give the text block the appearance you want. The class is only what it is called. All of the commands for span style work for DIV style, with several new ones, as well.
Commands which remain unchanged
This is used to specify the alignment of the text within the DIV. The commands are: Left, right, and center. Ex: <div class="Messagebox"><div style="background-color:green;margin:auto 5em;float:center;border:1px solid white;text-align:center;">This text is centered</div> will produce:
Height is used to make the background taller or shorter. It can use pixels or em for the commands. In addition, this does not move other text, so it's possible to eclipse other text if you're not careful. Make sure to set the vertical margin if you want to change the height! Note that this also only extends the background downwards. Ex: <div class="messagebox"><div style="background-color:green;border:1px dashed #00CC00;float:center;text-align:center;height:5em;">This text has a background which is 5em tall</div> will produce: