Wikicode 101

From Caligo Mundi
Jump to: navigation, search
Logo pic.jpg

You don't need to know html in order to create Wiki pages, and Wikia's visual editor helps to make things SUPER easy.


I learned how to code Wikis using Wikimedia's markup code by looking at the code of other pages that had cool things that I liked the look of, and then I copied the code and modified it until I was able to understand how it works. It sounds a lot harder than it is. I've created this page as tutorial for people to learn the basics that will hopefully make contributing to this Wiki a little bit easier for you.



User Page

Before you can do anything, you should set up your own User Page so that people know who you are. Your username will be displayed at the top of this site (scroll all the way to the top of the page to see it). Click on that link and then click on the link for "create". You can then make this page however you want. Add graphics, change font, list what your characters are, it's up to you what you want to put on this page.

Please be mindful of your own (and other member's) online security.

  • Do not list your last name
  • Do not list any phone numbers
  • If you choose to list your email address, remember that it can be viewed by anyone, not just club members




Links

To link to another page, simply put the title of the page in two square brackets ( [[ and ]] ) on either side. You can use spaces so there's no need to use underscores ( _ ).

For example, to list to the The Crane Clan page, simply put two open square brackets ( [[ ) at the start and two closed square brackets ( ]] ) at the end.

eg. [[The Crane Clan]]




Links with different names

Sometimes you may want to link to a page with different text than the name of the page. For example, you might want to list a link for Crane to go The Crane Clan page. To do this, simply add the name of the link and then use a vertical line ( | ) after the name of the page, and then type what you want the link to say.

eg. [[:Category:Crane Characters (The Obsidian Council)|All the Pretty Crane]] will make a link like this: All the Pretty Crane


Note the colon (:) prior to the word "Category". This allows you to link to a Category page without adding the page you're editing to list of pages tagged to that Category. Without the colon, the Wiki will think that you wish to tag your page to that category.



Links to Sub-Headings

Sometimes you may want to link to a heading within a page, which you can do by putting a hash mark (#) followed by the name of the heading.

eg. [[L5R:_Mechanics#Duelling|Duelling]] will make a link like this: Duelling


You will probably want to change the text displayed in the link as in the example above.



Broken Links

If the page that the link points to is empty, it will come up in red to alert you to the fact that the link won't work. Either you got the page name wrong, or the page is empty/hasn't been created yet.

Try to avoid making broken links.

If the link comes up in dark blue, the link will work.




Creating a New Page

There are two ways to create a new page. All will work exactly the same way, and which way you choose to use is completely up to personal choice.

Option 1: Create a Dead Link

If you are coding a page and you need to create another page that is related to the page you're on, just create a link with the [[Name of Your New Page]]. Watch that case that you use when you do this, as the case you use will be the case of the page, and thus the case of the Title at the top of the page. Once you save the changes to your comment or page, the link will come up in Red to indicate that it's a broken link. Click on the link and you will be taken to the new page with the name you've specified and then all you need to do is to hit the link that says, "Create" and to add your content.


Option 2: Hard Code the URL

Another option is to just type into the URL the name of the new page I want to create. Every page in this wiki will have the preface - http://www.caligomundi.net/index.php?title=_____ - so all you need to do is to delete the name of the page you're on and to Type in the "Name of the Page" you wish to create after the equals sign, remembering to be mindful of which Case you use, and change any spaces you want to use into underscores (one of these: _ ). Once you hit "Enter", you will be taken to the new page and then all you need to do is to hit the link that says, "Create".




Formatting Font

Wiki uses different code to normal html. For the most part, formatting font in Wikia Wikis is as easy as clicking on the icons as you would using Word™ (or similar). However, sometimes the visual editor doesn't quite do what you want it to do and you'll need to look at the Source tab to look at the code.

Wiki code uses its own formatting language using sing quote marks ( ' ).


Italics

To make font in italics, put two single quote marks ( ' ) at the start and end of the text you want in italics.

eg. This is an example of making a single word in ''italics'' instead of normal text.




Bold

To make font in bold, put three single quote marks ( ' ) at the start and end of the text you want in bold.

eg. This is an example of making a single word in '''bold''' instead of normal text.




'Bold Italics'

To make font in bold, put four quote marks ( ' ) at the start and end of the text you want in bold italics.

''''Bold Italics''''




  • Bullet Points

Put a space and then an asterisks ( * ) at the start of the sentence.

* Bullet Points



'Indented

Put a colon ( : ) at the start of each sentence you want indented.


: Indented text



Indented and isolated
Put a space at the start of the sentence to have your text indented and boxed in a dotted line.



<font=green>Coloured Text</font>
Coloured text needs a little html to work. Very simply, use triangular brackets ( < and > ) when creating this code. The easiest way to explain this one is to show you so that you can see where to put them.

eg. This is a sentence that wants a <font color=green>green</font> coloured word in it.

If you want to be really specific as to which colour you want to use, you can define the colour by its html name, which you can find by using this html Colour Chart.






Headings and Subheadings

There are four basic forms of headings in Wikis. Each of them use an equal sign ( = ) at the start and end of each heading:



eg...


==This would make a level two heading==


====This would make a level four heading====




This is what the first four levels of headings look like:


=Level One Heading=
It has one equal sign at the start and end. This text was put on the line underneath


Level Two Heading

This is a Level Two Heading and has two equal signs at the start and end of the heading.



Level Three Heading

This is a Level Three Heading. Note that this level of heading doesn't have the line to divide it across the page.



Level Four Heading

Just as with level three, level four headings becomes text that is slightly larger.



Just with regular text, you can use Code inside Headings to make them link to pages, or to have the text in Italics or in Bold. Personally, I like my headings to all be in bold. For me, headings that aren't in Bold don't stand out enough, which is what a heading is supposed to do. When the headings above are put in bold they look like this:




=Level One Headings=
It has one equal sign at the start and end, but with three single quote marks on either side of the text. Again, this text was put on the line underneath.

Level Two Heading

This is a Level Two Heading and has two equal signs at the start and end of the heading, but with three single quote marks on either side of the text.



Level Three Heading

This is a Level Three Heading with bold text. Again, note that this level of heading doesn't have the line to divide it across the page.



Level Four Heading

Just as with level three, level four headings becomes text that is slightly larger.... And this is what it looks like when you make it in bold as well.


Images

There are two ways to put an image into a Wiki. One is to just slot it in as a large graphic, the other is to add it as a thumbnail.

Large Graphics

To add an image, simply use the following code:

  • [[File:L5R Coloured Rings.png|200px|right|Play in Caligo's [[Legend_of_the_Five_Rings:_The_Obsidian_Council|Legend of the Five Rings]] freeform!]] The "right" (or you could put "center" or "left") must be in lower case.


Play in Caligo's Legend of the Five Rings freeform!

The code above results in the image to the left, with a set size of 200 pixels wide, and a link to the Page for the current L5R game. You must have the name of the graphic exact. The name is case sensitive and must have the correct file type/extension.

As noted above, you can change the alignment from left to right or have it align to the center.

In-Text Graphics

It may be that you wish to put in a graphic into a line of text. For example, you may have a symbol like this L5R Coloured Rings.png that you wish to use mid-sentence.

To add an image within a line of text, simply specify the size (usually no more than 30px) and remove any code that would specify formatting (right, left, centre, thumbnail, frame, etc). Eg.

  • This will add [[File:L5R Coloured Rings.png|20px]] within the line of text. Resulting in...


An L5R symbol L5R Coloured Rings.png within the line of text.



Thumb Nails

Another way to ad an image to a Wiki page is to put it in as a thumbnail. Browsers can still see the graphic at full size by clicking on it, but it now gives you a boarder around the image and the option to add a caption underneath.

Play in Caligo's Game of Thrones freeform!


  • [[File:Growing Strong.png|300px|thumbnail|right|Play in Caligo's [[Game of Thrones]] freeform!]]



The text above will give you a graphic like the one to the right. Note the extra square brackets within the caption that creates a link - but be careful to put a second lot of double square brackets to close off the code for the Image.

Again, you must have the exact name of the graphic (remembering that it is case sensitive) and must have the correct file type/extension.

It doesn't matter what order you put the code for alignment, image size, link or caption; the Wiki will work it out.





Learning New Tricks

Using Wiki code gets easier with practice. If you see an effect on a page that you'd like to use on one of your own, go to the source tab to see how it was done. This is the easiest way to teach yourself new tricks to use in Wikis.


For more details, see:









That's all for now. I may do another one of these with some instructions on other things like polls, tables, and maybe one on templates.


Happy coding!


Razorgirl : )