Wki 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:
- while editing, click the "Show Preview" in the bottom of the edit page, this will preview the new version of the page without publishing
- To make changes and review with others before publishing, choose the Discussionof a page.
Basic Formatting
| Description | When You Type | The Result |
|---|
| Simple Text | writing a simple line of text will result the same way it was written and fit inside the size of the page/column/cell | writing 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 line | A break Tag In the Middle of the text will make a new line |
| Bold / Italic Text | surround 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 Text | place <u>before the text and </u> after to make it underlined | place before the text and after to make it underlined |
| Horizontal Separator | write a new line with ---- between two lines of text |
write a new line withbetween two lines of text |
| Text(Font) Size | In 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
| Description | When You Type | The 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 |
| Bullets | use * , **, *** etc for levels of bullets * first level ** second level *** third level |
First LevelSecond LevelFirst LevelSecond LevelThird Level |
| Numbering | use # , ##, ### etc for levels of Numbering # first level ## second level ### third level |
First LevelSecond LevelFirst LevelSecond LevelThird Level |
| Indentation | use :, ::,::: etc for levels of indentation : first level :: second level ::: third level |
First LevelSecond LevelFirst LevelSecond LevelThird Level |
Links
| Description | When You Type | The 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
| Description | When You Type | The Result |
|---|
| Text Color | Place <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 Color | Place <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 | |} |
| Description | When You Type | The 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
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
| Description | When You Type | The 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