Help:HTML

This guide will help you get started on learning the basics of HTML.

Text styles
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

Style commands
Beginning note: Multiple style commands can be strung together by placing a semicolon after one command ends. For example, one can use This text is blue with a gray border to knock out both styles in one.

Color
Used to color text. Ex: This text is green. will produce:

This text is green.

Border
This will put a border around the text. There are two types of borders: solid and dashed lines. For example, This text has a solid green border which is 1 pixel thick. will produce:

This text has a solid green border which is 1 pixel thick.

Background-color
This will add a colored background to the text. For example, This text has a black background will produce:

This text has a black background.

-moz-border-radius
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: This text has a rounded border for Firefox viewers and a square border for other viewers. will produce:

This text has a rounded border for Firefox viewers and a square border for other viewers.

Padding
Padding is used to tell the wiki how far the background should go out. To use it, type W . 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: This text has a large background will produce:

This text has a large background.

Float
Float tells the wiki where the text should go. There are three commands: Left, right, and center. 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: This text is centered will produce:

This text is centered.

Margin
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: This text has a margin of 2em will produce:

This text has a margin of 2em.

Plainlinks
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 zeldainformer normally appears like this: Zelda Informer. With Zelda Informer, it will appear as such:

Zelda Informer

DIV
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).

DIV Class
The class of a div denotes what type of text it is. For example, You have no new messages|last change. will produce: You have no new messages|last change.

DIV Style
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

 * Padding
 * Margin
 * Color
 * -moz-border-radius
 * Background-color
 * Border
 * Float

Text-Align
This is used to specify the alignment of the text within the DIV. The commands are: Left, right, and center. Ex: This text is centered will produce:

This text is centered.

Height
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: This text has a background which is 5em tall will produce:

This text has a background which is 5em tall.

Width
Width is used to change the width of the DIV. It uses the same pixel and em commands, as well as a % command which tells the wiki what percent of the normal width to make the DIV. Ex: This text has a width of 40em or 400 pixels would produce:

This text has a width of 40 em or 400 pixels.

Info/Navboxes
The infobox is a strange coding wonder. It works differently from everything else, but it allows for much better content and titled headings. All of the coding for DIVs will work for a navbox, but the box itself is coded in a strange way. An example of a navbox can be seen here. That is the most basic type, but there are other, more complicated ones such as the infoboxes, an example of which can be seen here.

Coding
To code one of these, you'll need to use the curly brackets { } and the pipes. (|) The coding works like this:

This will produce the following:

Navboxes
As seen above, navboxes usually have a heading with a separate box. You can make multiple boxes within one navbox, actually, as long as you add in the styling for that particular line. Note that the first styling you input will be the styling for the whole box. The styling for the title is the second style or subsequent styles which you input. Ex:

Infoboxes
Infoboxes are used to display key information about a person, place, enemy, item, etc. They're a bit different from navboxes because they use what is known as "cells," which are portions of the area. In addition, they use a special wiki code known which will only display a section if the user enters the specific text and then enters the details. This is only used for templates, though. This guide will detail how to use each one.

For starters, the coding works like a navbox (curly brackets), but it uses two special templates which are set specifically for this purpose. They are: | and |-. The | will become a pipe (|), while the |- will become a pipe followed by a dash (|-). However, do not attempt to use these in their raw format. If you do, the infobox will malfunction. Stick to the templates.

Let's get started. You've got some new codes to learn.

Okay, we're ready to begin.
 * For the class, you will be putting "toccolours".
 * A new term you need to learn is cellpadding. It determines the vertical padding of the cells, normally, since you will usually be setting a width for it to keep.
 * The second new term you need to learn is "border-collapse". This prevents the wiki from placing borders OUTSIDE of the infobox! The tag you need to throw on is "border-collapse:collapse"
 * Font-size is also useful, here. It's self explanatory, as it allows you to change the size of the font. For example, "font-size:90%" will make the text 10% smaller.
 * Colspan is the next term you need.

This one is the one as it appears in templates, so you will notice the command. This command is used to only display a line if the defined text is entered. For example, the character infobox will not display the gender field if you do not type |gender =

Remember, you have to use the format for navboxes, so it looks like this:

If we take out the "if" commands, we can see it like this:

Adding in some things to the fields, we can create this:

See? It's not as difficult as it seems.

Miscellaneous HTML
There are several other HTML terms which do not fall under any specific category.


 is used to italicize text,  is used to boldface text,  is used to underline text, and is used to make strikethrough text.

Definition List
The definition list is used to create a quick list. It is used like so:

(List title)

(Definition Term)

(Definition Description)



The list does not have to be titled. With it, you can type this:

 Wikis

<DT> Zelda Wiki

<DD> A private wiki on Zelda.

<DT> Wikipedia

<DD> The original Wiki.

</DL>

to make this: Wikis <DT>Zelda Wiki <DD>A private wiki on Zelda. <DT>Wikipedia <DD>The original Wiki. </DL>

Table
It is possible to make tables with HTML, too. To do so, you type

To create: