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
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 create text that looks something like this:

This text is blue with a gray border.

Note that only one  tag is used for ending the text.

pre { margin: 3px 0; white-space: pre-wrap; }

Padding
Padding is used to tell the wiki how far the background should go out. To use it, type . 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.

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.

You can also use margin-bottom, margin-top, margin-right, and margin-left to set each sides margin independently of each other. One way to center things is using the margins. Ex: This test is centered using auto for both margin-right and margin-left. will render like:

This text is centered using auto for both margin-right and margin-left.

Keep in mind this trick only works when centering objects horizontally and not vertically. When using this, a width must be specified (i.e. width:400px in the above code).

Text-Decoration
Text-decoration is used to apply various functions to the text. It is multi-faceted and can create some interesting results.

Decoration Commands
These are the commands which you can use for text decoration. Note that you can only use one at a time.

Underline
This will underline text. It is easier to use   for this, however. For example: This text is underlined. will produce:

This text is underlined.

Blink
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, This text is blinking. will produce:

This text is blinking.

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 Link's Hideaway normally appears like this: Link's Hideaway. With Link's Hideaway, it will appear as such:

Link's Hideaway

* 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
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. This is used for the wiki to recognize what type of text you are creating so it can classify it appropriately.

Class commands
These are different classes of DIVs. Note that these do not automatically style your DIV.

toccolours
This is used to make the wiki treat the DIV as though it were a table of contents.

navbox
This is a box much like the ones used to navigate to similar pages.

Messagebox
This is a box like the one which notifies you of new messages.

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 508 pixels would produce:

This text has a width of 40 em or 508 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.

There is one special command for these, however.

valign
valign will determine the placement of the text of one cell depending on the position of the text in the adjoining cell. The normal setting is "center." It is placed on the items which delineate new rows (the pipe dash |- )

For example, this:

Will produce this:

Hex Triplets
For specifying the colors to be displayed in a template or style command, we use what's called a hex triplet. Hex triplets are a six-digit, hexadecimal number used in various computing applications such as HTML, CSS and JS. The three bytes, or each pair of two digits in each hexadecimal code stand for the RGB (red, green and blue) components of every color. Each byte represents a number between 00 to FF in hexadecimal notation which represent the shade of each of the color components. A hex triplet is formed by adding together three bytes in hexadecimal notation, in the following order: Byte 1: red value Byte 2: green value Byte 3: blue value

For example, in the color where the values are decimal numbers, i.e. red=127, green=255, and blue=212. (The decimal numbers 127, 255 and 212 are the same as the hexadecimal numbers 7F, FF and D4) You create a hexadecimal triplet by adding together the 6 hexadecimal digits together. In this case, 2468A0. If any one of the three bytes has a value less than 10 in hex code or 16 in decimal code, a 0 must be added to the beginning of the byte so that the triplet always has exactly six digits. For example, the hex digits 06, 07, and 11 would form the hex triplet 060711, or this color.

Hexadecimal code like this can be used in any place when you are required to list a color, such as with the style "color" command. For example:


 * 1) FF0000 = Red


 * 1) 8A0808 = Dark Red


 * 1) FF0080 = Pink


 * 1) 4C0B5F = Violet


 * 1) 08088A = Dark Blue


 * 1) 58D3F7 = Light Blue


 * 1) 00FFBF = Teal


 * 1) 088A08 = Green


 * 1) 00FF00 = Light Green


 * 1) FFFF00 = Yellow


 * 1) FFBF00 = Mustard Yellow


 * 1) FF8000 = Orange

For an extensive article on hexadecimal code, click here.

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

Formatting Tags
 is used to italicize text,  is used to boldface text,  is used to underline text, and is used to make strikethrough text. You can also use to render text just like italicize or use to render text just like bold ; however, keep in mind that these two tags are for important text and could possibly render different in the future if browser creators deem necessary.

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 Zelda Wiki 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>

Note: The wiki software has an easier method for creating these lists. Instead of <DT>, place a colon at the beginning of the line, and instead of <DD> , place a semicolon at the beginning of the line.

Table
It is possible to make tables with HTML, too. The commands used are: (Used to end the table.)

When you put one together, it will look like this:

The and tags are used to randomly select one of several choices. To use it, type (first option)  (second option)  (third option)

You can use as many options as you like. Just don't forget to close each option tag and to put the tag at the end. Do not use this in articles, though, as this will randomly choose something each time the page is loaded. For example,

I have a dog. I have a cat. I have a dog and a cat. will produce one of the three options. To see it in action, look at the output below, then reload the page and check it again. It may change or stay the same.

I have a dog. I have a cat. I have a dog and a cat.