Wiki Formatting for Beginners

If you are new to Wiki markup but still want to contribute things can be a bit confusing at first but Wiki markup is one of the easiest languages out there. If you can code in HTML you can learn wiki mark up; in fact many HTML tags work with and are incorporated into wiki mark up. If you can write a coherent sentence you can learn wiki markup. This page is meant to provide a beginners guide to basics of Wiki formatting. Lets begin!

Text Formatting

A lot of text formatting for wiki is pretty similar to HTML with a few exceptions that actually makes things easier.

Bold

To make text bold put 3 apostrophes at the beginning of the section you want bolded and then another 3 when you want to end the bolded text. Your code should look like this: '''Bolded Text Here''' And your text will look like this: Bolded Text Here .

Italics

To italicizes text put 2 apostrophes at the beginning of the section you want italicizes and then another 2 when you want to end the italicizes text. Your Code should look like this: ''Italicizes Text Here'' . And text will look like this: Italicizes Text Here .

Bold Italic

Bold Italic text requires 5 apostrophes. Your code should look like this: '''''Bold Italic Text Here''''' . And text will look like this: Bold Italic Text Here .

Underline

Underlining uses traditional HTML formatting to start underlining type the tag <u>Underlined Text Here</u>. Your text will look like this: Underlined Text Here .

Spacing /Paragraphs

If you want something on a new line just press the “Enter” or “Return” button on your computer keyboard . The HTML tags <p> and <br> also work.

Indenting

To indent text place a colon (:) in front of the line you want indented. Here's an example of indenting:

Code:

This line isn't indented at all.
:This line is indented once.
::This line is indented twice.
This line isn't indented at all.

Example:

This line isn't indented at all.

This line is indented once.

This line is indented twice.

This line isn't indented at all.

Lists

Bullet lists

To make a list use an asterisk (*) at the begin of the line. Adding two asterisks (**) in front of a line in a list will indent that bullet.

Code:

* This is a normal bullet
* This is another normal bullet 
** This is an example 2 asterisks
*** This is an example of 3 asterisks
* This is just one asterisk
:* This is an asterisk with a : for an indent 

Example:

• This is a normal bullet
• This is another normal bullet
  • This is an example 2 asterisks
    • This is an example of 3 asterisks
• This is just one asterisk

• This is an asterisk with a : for an indent

Numbered Lists

Number lists work much the same way that bullet lists do only it utilizes an hash symbol (#) instead of an asterisk.

Code:

# This is normal 
# This is another one
## This is an example 2 hash symbols
## This is an example 2 hash symbols
## This is an example 2 hash symbols
### This is an example of 3 hash symbols
### This is an example of 3 hash symbols
# This is just one asterisk
:# This is an asterisk with a : for an indent 

Example:

1. This is normal
2. This is another one
   1. This is an example 2 hash symbols
   2. This is an example 2 hash symbols
   3. This is an example 2 hash symbols
      1. This is an example of 3 hash symbols
      2. This is an example of 3 hash symbols
3. This is just one asterisk

1. This is an asterisk with a : for an indent

Text Size and Color

There are several ways of increasing font size and color can easily be done with the <span> tag. Typing <span style="color:green">Green Text!</span> will get you Green Text!

The span tag can also be utilized for font size as well. By typing <span style="font-size:24pt">This is some big text.</span> you'll get This is some big text.

Traditional HTML <font> tags also work. So you can type <font size="5" color="green">This is some big Green text.</font> you'll get This is some big Green text.

Headings

Headings are useful for defining sections. If a page has more then 3 headings a table of contents will automatically appear at the top of a page with links to each heading. The equal symbol (=) defines headings here are some examples:

Code

=Heading One=
==Head Two==
===Heading Three===
====Heading Four====

Example

Links

Linking is pretty easy in wiki but is a bit different then what you might be used to.

If you want to link to a page that is on this wiki surround the title of the page with double brackets ( [[]] ) so for example if you wanted to like to the About page here on this wiki you would type [[About]] and you will get About.

Lets say you wanted to link to the About page but you didn't want the word About to appear. For example you wanted: For more information about this wiki click Here. You would type: For more information about this wiki click [[About|Here]]. and you would get: For more information about this wiki click Here.

If you want to link to a page not on this wiki you only need 1 [ instead of 2. For example [http://google.com] it will look like this: [1] .

Now if you want some text to accompany that link you add a space after the link and then add in the text. For example [http://google.com To Google!] it will look like this: To Google!

Image

On this wiki we do not condone direct linking to images. If you want to link to an image make sure you upload it on to this wiki first.

To display an image type [[File:image.fileextention]] to see it in action type [[File:Example.jpg]].

There are a number of different things you can do with images. If you want to change the image width. Type [[File:Example.jpg|50px]] As you can see text is not wrapping around this image. Lets see if we can't do something about that.

Wrap text around an image

If you want the text to wrap around your image, type [[File:<Filename.jpg>|<side>]] for e.g. if you want the image to be on the left side, type [[File:Example.jpg|left]]

As you can see the text is wrapping around the image. I'm just going to fill this space with some filler text so that you can see what I'm talking about.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est arcu, volutpat eget eleifend sit amet, dictum non est. Sed bibendum ultrices massa, quis ullamcorper orci aliquam vel. Cras erat dolor, vestibulum ac imperdiet et, hendrerit ac lacus. Cras nunc justo, dictum lacinia vulputate congue, hendrerit nec justo. Vestibulum dignissim feugiat est, nec posuere purus pretium at. Cras pretium vestibulum mi nec pharetra. Ut at egestas nulla. Mauris mattis, mi et bibendum mollis, ipsum metus pellentesque massa, sed iaculis nulla neque vitae nisl. Donec diam neque, eleifend sed placerat sed, gravida ac nisi. Proin auctor, metus in tincidunt adipiscing, metus sem porttitor metus, ac blandit lorem turpis sit amet mi.

You can combine image size and text wrapping type [[File:Example.jpg|left|50px]]. As you can see the image is smaller and text is wrapping around it. I'm adding in some filler text so you can see what I'm talking about.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est arcu, volutpat eget eleifend sit amet, dictum non est. Sed bibendum ultrices massa, quis ullamcorper orci aliquam vel. Cras erat dolor, vestibulum ac imperdiet et, hendrerit ac lacus. Cras nunc justo, dictum lacinia vulputate congue, hendrerit nec justo. Vestibulum dignissim feugiat est, nec posuere purus pretium at. Cras pretium vestibulum mi nec pharetra. Ut at egestas nulla. Mauris mattis, mi et bibendum mollis, ipsum metus pellentesque massa, sed iaculis nulla neque vitae nisl. Donec diam neque, eleifend sed placerat sed, gravida ac nisi. Proin auctor, metus in tincidunt adipiscing, metus sem porttitor metus, ac blandit lorem turpis sit amet mi.

Thumbnails

Hey look a caption

By typing [[File:Example.jpg|thumb]] you will automatically an image that is 180px wide, aligned to the right and with a box around it.

By typing [[File:Example.jpg|thumb|Hey look a caption]] You'll get a caption underneath it.

Much as like with the image section above you can add things to thumbnails to change the defaults. For example if you type [[File:Example.jpg|thumb|100px|this thumbnail is smaller]] You'll get a thumbnail with a width of 100px instead of the default 180px.

You can also change the what side the thumbnail aligns on by typeing [[File:Example.jpg|thumb|left|this thumbnail is on the left side]] You will get a thumbnail aligned on the left instead of the right.

So What's Next?

Well now you know the basics there is plenty you are capable of doing for this wiki, but if you want more in depth look at wiki markup Feel free to head on over to Wikia's help Center. Or feel free to leave a message on my Talk page if you need some help. Happy editing.