GA/Wiki Tutorials

BASIC WIKI TUTORIAL

Introduction
Do not try to read this tutorial all the way through, or learn it all at once - unless you have nothing better to do. The best approach is to read the sections relevent to your current needs. Come back and read the other sections as necessary.

Logging In
When you are making changes on PERC's Wiki you should be logged in. The "Log in" (or "Log out") option is located in the top right hand of every PERC Wiki page.

If you are new to the PERC Wiki you will need to create a new account. To do this you must fill in all the fields on the log in screen, i.e 'username', 'password', and 'retype password'.

At PERC we ask you to create a username that is your first name plus last initial of your last name. For example bobn (for Bob Nun), helgas (for Helga Soiut), or linh (for Lin Han).

Your e-mail address is necessary if you forget your password. Lastly, click the "Create new account" button and you're set to go.

When you come back to work on the Wiki, click the "Log in" option in the top right on the top right of the screen.

If someone is already logged in this option will read "Log out". Go ahead and log them out. The log in option will then appear and you can follow it to the log in screen.

Now logging in is an easy matter of typing in your username and password, then clicking the grey "Log in" button to the right of these fields. You don't need to fill in the 'retype password' field or the 'e-mail' field to log in.

Editing
When you look at the top of a PERC Wiki page you will see a number of options. One of them is "Edit this page". By selecting this option you will open a new screen.

This new screen will feature an edit box. The edit box will contain the contents and coding that make up the page you have selected to edit. A cursor will be flashing in the top left hand corner of the edit box. There is also a toolbar above the top left hand corner of the box - but more on that later.

The mouse pointer will change to an "I" bar when it hovers over the edit box.

You can use the arrow keys or the mouse (with a simple left click) to relocate the cursor.

Once the cursor has been located to suit your needs you can begin to modify the text or code.

The edit box works much like a word processor. You type in what you want and can correct it with the delete or backspace button. The contents of the edit box can be copied, cut or pasted.

Some functions of a word processor are available through the toolbar or by using code. The most common of these are discussed later in this tutorial.

When changes have been made there are three options. First, they can be saved by clicking the "Save page" tab below the edit box. This option will exit the edit box and display the changed page.

Second, the "Show preview" tab, to the right of the "Save page" tab, can be used to display the changed page with the edit box still open. This is useful when working with code and formatting. A preview will show you what has changed (or not) and modifcations can be easily made.

Finally, you have the option to cancel. This is located to the right of "Show Preview" tab. This will return you to the original page with nothing changed.

If you are logged in and are on a page with sections you will notice a small "edit" option on the top right hand corner of the section. This option will open the edit box for the selected section only. It is useful if you wish to edit the section without having to open the entire page's edit box.

The Tool Bar
When editing a page from the edit box you've probably noticed a row of colorful buttons at the top of the edit screen. This is the tool bar. Holding the mouse pointer over any one of these buttons will reveal its purpose. Some functions are more straight forward than others. The most useful are discussed below.

The functions of the tool bar are used by blocking the area you wish to affect and then clicking the appropriate button. These actions will insert the proper code around the selected area and apply the desired effect when the page is saved.

Bold
The "B" button on the far left of the tool bar will bold text.

Block the text you want bolded and click the "B" button. In the edit box the following code will appear:

This is the code for bold text as it will appear in the edit box

And this is how it will appear on the saved page

Italics
The slanted "I" button on the tool bar, just right of the "B" button, will change blocked text into italics.

This is how the code for italics will look in the edit box

And these are italics on a saved page

Note that italics and bold can be combined

Internal Links and New Pages
Internal links connect one PERC Wiki page to another

The third button from the left on the tool bar, an underlined Ab, will create an internal link around blocked text. The text must be set up specifically however and may need more typed in code. This is how a link to my page looks in code:

Internal link To MikeH's Page

And on a saved page:

Internal link To MikeH's Page

The "GenAdmin", before the forward slash (/) defines the section of PERC's Wiki where the page is located. This must be typed in.

Most pages reside in a section. At the top of each Wiki page there is the page's section name and name seperated by a forward slash. On top of my page, in big letters, you'll see this:

GenAdmin/MikeHsPage

"GenAdmin" is the section. "MikeHsPage" is the page's name. The code to my page would look like this.

GenAdmin/MikeHsPage

And saved, it would look like this:

GenAdmin/MikeHsPage

That's a bit crude however. We can type a label to the link. Look at the example again:

Internal link To MikeH's Page

Notice the typed in "|" and the text after it. This generates the label "Internal link to MikeH's Page", while hiding the section and page name.

These are the steps to creating internal links. Once you know a page's section name and page name you can create a link to it.

Note that if you type in a new page name you will create a new page. We'll use a simple example. Here is the code for a new unlinked page:

New Page

Notice there is no section name and no page label - just the page name. Here is the saved link:

New Page

The link should be a bold red. If you follow this link you'll open a page with an empty edit box. The top of the page will read " Editing New Page". Please don't alter this page. Just look around then hit the back button on the browser to return here.

Now you know how to create an internal link and create a new page. If you are still confused study some of the links and their code around PERC's Wiki. You can view the code by using the "Edit this page" function to access the edit box. Don't change any one's code though!

Headlines and Tables of Contents
Just past the small globe button for external links on the tool bar is a big "A" button. Block some text, hit this button and the following code will appear in the edit box:

== Example ==

The double equal signs will make the "Example" text larger and thicker. This is a Level 2 headline. On this page the title "Introduction" is a Level 2 headline.

The smaller titles, like "Headlines and Tables of Contents" are level 3 headlines. The code for level 3 headlines must be typed in on the edit page:

=== Example ===

The reason these examples are being described and not shown here is simple. If more than three headlines are used on one page they create a Table of Contents. As you can see, this tutorial uses more than three headlines and PERC Wiki has automatically generated a Table of Contents.

In a Table of Contents Level 3 headlines create subsections under Level 2 headlines. You can see this in the Table of Contents for this page. If you are going to use headlines then keep this in mind.

Ignore Wiki Formating
In an example or tutorial you may wish to show the code you have used to create something. Block the coded example and click the crossed out "W" button on the tool bar. This is what you will get in edit box:

Your words

This is what you'll see on the saved page

Horizontal line
Horizontal lines are dramatic. I can't think of why I'd use one. The official Wiki style book suggests that horizontal lines should be used only occassionally. Hit the "-" button on the far right of the tool bar. This is the code you'll get in the edit box:

this is what you'll get on the saved page:

Exciting, eh?

Line Breaks and White Space
A line break, or white space, occurs between headings and paragraphs. There are two ways a line break can be created. The first is by hitting the "enter" key twice where you want white space to occur. This method is not precise and results can vary. The second way is to use code tags. The tag  is used at the start of the heading or paragraph, and the tag   is used at the end.

Example: These are the code tags for a line break. This second set of tags will create a space between these two lines. These tags are not working now because they are disabled - but more about that later...

While using tags, each heading and paragraph that needs white space must be put between tags. It's tedious but it works.

So, use which ever method works for you. You will find, however, that in heavily coded environments, such as tables, the   tags give more control over where and how much white space appears.

Unfortunately, this is just something you'll have to experiment with. There are no hard and fast rules to line breaks - except what has been explained above. But don't be shy. Work with both methods until you get the desired results.

Centering
In a word processor you can center text and tables relatively easily. In PERC's Wiki you need to type in code tags.

The tags needed are and. And yes, you'll actually have to type the tags around what you wish centered. The tag goes at the front. The tag goes at the end. Note the / in front of the word "center" in the end tag.

This is the code for centered text

And this is centered text

Tables
Tables need precise coding. However, if you are patient and persistent, PERC's Wiki will allow you to create good tables. You can put code inside tables too, so feel creative as we start getting familiar with tables.

This is the first line of code needed to create a new table:

Your code will now look something like this:

Put it all together and you get this on the saved page:

Now we can add more rows and columns. Let's add a column by inserting the new fourth line of code below:

It will look like this on the saved page. Notice how the boxes automatically stretch to fit the text:

We'll add another row and two more columns. Study the code carefully:

And our final saved product looks like this:

Tables can have any number of rows and columns. Further code, like bolding, can be added to any table. It must be done on a cell by cell basis however and can be tedious. But it's well worth the effort in the end.

User Guide Index

Sandbox