Wiki Formatting Tutorial

This is a brief explanation of the fundamentals of wiki page editing, to help you build a basic wiki page.

Wiki is actually Markup lanbguage like HTML and CSS, many tags are embedded and interpreted automatically while editing in wiki and some need to be added for formatting/design improvements.

To start editing a page click the Edit link in the top right corner of every page.

There are two ways to monitor changes before published to a page:

  1. while editing, click the “Show Preview” in the bottom of the edit page, this will preview the new version of the page without publishing
  2. To make changes and review with others before publishing, choose the Discussionof a page.

Basic Formatting

DescriptionWhen You TypeThe Result
Simple Textwriting a simple line of text will result the same way it was written and fit inside the size of the page/column/cellwriting a simple line of text will result the same way it was written and fit inside the size of the page/column/cell
A line feed (new line)A break Tag<br>In the Middle of<br>the text will make a new lineA break Tag 
In the Middle of
the text will make a new line
Bold / Italic Textsurround the text with apostrophes (‘):
3 ‘ to make it ”’bold”’
2 ‘ to make it ”italic”
5 ‘ to make it ””’bold & Italic””’
3 (‘) signs to make it bold
2 (‘) to makes it italic
5 (‘) to make it bold & Italic
Underlined Textplace <u>before the text and </u> after to make it underlinedplace before the text and after to make it underlined
Horizontal Separatorwrite a new line with
—-
between two lines of text
write a new line withbetween two lines of text
Text(Font) SizeIn every container or tag,
add style=font-size:**%
for the size of text<span style=”font-size:50%”> will write small text </span> 
<span style=”font-size:100%”> will write normal text </span> 
<span style=”font-size:200%”> will write big text </span> 
will write small text 
will write normal text 
will write big text 

Bullets Numbering and Indentation

DescriptionWhen You TypeThe Result
Content & Headers=Create Header= 
Data of the Header
==Create Chapter== 
Data of the Chapter
===Create Paragraph=== 
Data of the paragraph

Adding ‘__TOC__’ will create

Bulletsuse * , **, *** etc for levels of bullets
* first level
** second level
*** third level
First LevelSecond LevelFirst LevelSecond LevelThird Level
Numberinguse # , ##, ### etc for levels of Numbering
# first level
## second level
### third level
First LevelSecond LevelFirst LevelSecond LevelThird Level
Indentationuse :, ::,::: etc for levels of indentation
: first level
:: second level
::: third level
First LevelSecond LevelFirst LevelSecond LevelThird Level

Links

DescriptionWhen You TypeThe Result
Click an existing link
in red
[[Link to new page]]A new page is open for creation
Add a link to a new page[[NameOfNewPage|Page Name]] 
The 1st is the name of the page 
The | sign is the divider
The 2nd part is the displayed name
After saving you will have 
Page Name
a new link to a new page
Create an External Link[https://www.abc.com/page.html Link Desc] 
The 1st part is the URL
The 1st space is the divider
The 2nd part is the displayed name
Link Desc
The web-page will open
in a new tab

Colors

DescriptionWhen You TypeThe Result
Text ColorPlace <span style=”color:#FF0000″> before the text and </span> After.#FF0000 results RED 
#00FF00 results GREEN 
#0000FF results BLUE
check RGB tables 
for more information
Text Background ColorPlace <span style=”background-color:#FF000″> before the text and </span> After.#FF0000 results RED 
#00FF00 results GREEN 
#0000FF results BLUE
check RGB tables 
for more information 
some of the examples here are combinations of color and background-color

Tables

Every table starts with{| 
Column Separator with
Row Separator is|-
Every Header Cell starts with!
Every Table ends with|}
DescriptionWhen You TypeThe Result
Basic Structure 
{|
! Header 1
! Header 2
! Header3
|- New row
| column 1
| column 2
| column 3
|}
Header 1Header 2Header 3column 1column 2column 3
Classic Table Structure – Vertical layout 
{| class=”wikitable”
! Header 1
! Header 2
! Header 3
|- New row
| column 1
| column 2
| column 3
|}
Header 1Header 2Header3column 1column 2column 3
Classic Table Structure – Horizontal layout 
{| class=”wikitable”
! Header 1
| Column 1
| Column 2
|- New row
! Header 2
| Column 1
| Column 2
|}
Header 1Column 1Column 2Header 2Column 1Column 2
Classic Table Structure – Combined layout 
{| class=”wikitable”
|-

! Column 1
! Column 2
|-
! Row 1
| cell
| cell 
|- New row
! Row 2
| cell
| cell 
|}
Column 1Column 2Row 1cellcellRow 2cellcell

Images

To add an image to a page, first upload it to the server by pressing the Upload File link in the left side of the web page

Before saving and closing the image page, copy to clipboard the name of the file.Add Image to a page[[File:BlankImage.png|right|200px|caption]]

The 1st part is the File tag and the file name
The 2nd part is the options area
The 3rd part is the width of the image
The 4th part is the layout

caption

Change image in the page

After uploading an image to the server, locate the File Tag in the page and change the name of the image.Image Options

Among many options, you can add Horizontal alignment: left/center/right Vertical alignment: baseline/sub/super/top/text-top/middle/bottom/text-bottom Link to internal page: link=Main Page Link to external page: link=https://www.google.com Frame: border/framethumb/frameless

Remarks And Scripts

DescriptionWhen You TypeThe Result
Add Wiki Script that will not be interpreted<nowiki>”’not bold here”'</nowiki>”’not bold here”’
Predefined box<pre>Inside a script box</pre>Inside a script box
Languages
Scripts
<syntaxhighlight lang=”javascript”> document.getElementById(“myH”).innerHTML = “Hi”; </syntaxhighlight> document.getElementById(“myH”).innerHTML = “Hi”;

All of the above are just the basics, you can find many more in the other tutorials offered in the Getting Started page.
But my best suggestion for you friends is to simply look at other pages, you will find much more and undertand how easy and fun it is.
Good luck contributing!
Guy

Leave a Comment