Wiki Editing Basics


Udacity encourages you to edit Wiki content (any page, even this one!), so feel free to contribute. Even simple things such as correcting a spelling mistake or adding a couple of screenshots from the lectures are very welcome contributions. You don't need to do any fancy editing. You may stick to the basics, content is what really matters.

Also, you don't need to do a large amount of work to make a difference. Remember Wikipedia's motto: Many Hands Make Light Work (MHMLW), i.e., Having many people work on a Web site means that each person does proportionately less work. The more people that can work on a page, the less each one has to do.

Adding links to other resources on the web (Khan Academy, Wikipedia, etc) is also encouraged.

Contents


Opening the Wiki Editor


On the top-right side of any Wiki page you will find three links:

  • View: Renders the last committed version of the Wiki page.
  • Edit: Opens the Wiki Editor.
  • History: Shows the history of changes, listing all revisions.
    You may revert to an older revision by clicking "(revert)" on the revision you want to revert to.

After you have made your changes, just click the button "Save Changes" at the bottom of the page. You may also put some description of your edit (e.g., "Added Screenshot for "Average Friends" lecture", or "Spelling Correction", etc) in the "Revision Comments" text box before saving.

Selection_010.png


You're also encouraged to create new Wiki content. If you click a link and get a message similar to the following:

Selection_014.png


Don't be shy. Just click "Create it" to create a new Wiki page and add whatever content you think fits.

In the next sections follow a few quick tips on editing.


Toolbar Functions


The toolbar may be used to format your text (making it bold, italic, etc). You will find the toolbar at the top of the Wiki Editor.


toolbar1.png

The general instructions to use them are:

  • Select the text you want to format.
  • Click the correspondent button to apply.

These are short descriptions for the buttons on the toolbar.

  1. Bold: Just select the text and click the button to show it in bold face
  2. Italic: Just select the text and click the button to show in italic
  3. Hyperlink: Just select the text, click the button and enter a URL (web address) to transform the text in a hyperlink (web-link)
  4. Blockquote: Transform the selected text to a block quote.
  5. Code Sample: Formats the text as source code (Good to format Python code or any other programming language).
  6. Image: Inserts an image.
  7. Numbered List: Formats a block of lines of text as a numbered list (you have to repeat for each line one by one)
  8. Bullet List: Formats a block of lines of text as a bullet list (you have to repeat for each line one by one)
  9. Heading: Formats the selected text as heading
  10. Horizontal Rule: Inserts a horizontal rule.
  11. Undo: Undo last operation performed using the toolbar.
  12. Redo: Redo last operation performed using the toolbar.


To add a link, just put the following code:

[my_link_name](my_link_web_address)

For example, for the following code:

[My Link to Wikipedia](http://www.wikipedia.org)

The result is going to be:

My Link to Wikipedia


Or use the Link Button from the tool bar (3rd button from the left. Hover the mouse pointer over the buttons to see a description). toolbar1.png


Just select the text you want to be the link ("My Link to Wikipedia"), click the button and enter the web address ("http://www.wikipedia.org").


Adding a Title


To add a title, just put equal signs under your title's text as follows:

That is My Wiki Title


=====================

The result is going to be:

Selection_006.png


Adding a Heading


To add a heading, just put minus signs under your heading's text as follows:

That is My Heading


------------------

The result is going to be:

Selection_007.png


Or use the Heading Button from the tool bar (9th button from the left. Hover the mouse pointer over the buttons to see a description). toolbar1.png


Just select the text you want to be the heading ("That is My Heading") and click the button.


Formatting Source Code


To format a text as source code, indent each line with four spaces (insert four spaces before each line of code):

Selection_008.png

The result is going to be:

def hello_world():
    print "Hello World!"

Or use the Code Sample Button from the tool bar (5th button from the left. Hover the mouse pointer over the buttons to see a description). toolbar1.png


Just select the text you want to be source code and click the button.


Adding a Horizontal Rule (Separator)


Just type at least 10 minus signs with no left spaces enclosed between empty lines:

----------

The result is going to be an horizontal line:


Or use the Horizontal Rule Sample from the tool bar (10th button from the left. Hover the mouse pointer over the buttons to see a description). toolbar1.png
Just click the button to insert a Horizontal rule.


Adding Images


Follow these instructions to upload images (screenshots from the lectures for instance) and add them to a Wiki page:


Open the Image Uploader:

Click the Link Below to open the image uploader:

You will also find the following text at the bottom of Wiki Editor's textbox:

"You can use Markdown for formatting, interwikis for linking.
You can upload images to embed them, or embed an existing one."

You can always click the link "upload images" to open the image uploader from whatever Wiki page you're editing.

screenshot1.png


Choose an Image:

Just browse for the image you want to upload from your computer's hard-drive.

Selection_007.png

Then click "Upload". The following screen should show after a couple of seconds:

Selection_008.png


Add the Image to the Wiki Page:

Just copy one of the Wiki Codes (there are three sizes available) and paste it into the position you want to insert the image.


Capturing Screenshots from the Lectures


To learn how to capture screenshots from the lectures and use them in your Wiki contributions, read these instructions:

These tools allow you to capture a selected area of the screen (the video for instance), this way you don't need to go through the hassle of editing the image to crop out what you don't need.


Advanced Options


For fancier options, consult the Markdown Syntax Guide. Some basic HTML is supported, tables for example:

<table border=1>
    <tr bgcolor=#FF0000>
        <td bgcolor=#0000FF>
                            <font color="#FFFFFF">Salutation</font>
        </td>
        <td bgcolor=#0000FF>
                            <font color="#FFFFFF">First Name</font>
        </td>
        <td bgcolor=#0000FF>
                            <font color="#FFFFFF">Last Name</font>
        </td>
        <td bgcolor=#0000FF>
                            <font color="#FFFFFF">Occupation</font>
        </td>
    </tr>
    <tr>
        <td>Dr.</td>
        <td>Froderick</td>
        <td>Fronkensteen</td>
        <td><strike>Mad Scientist</strike> Physician</td>
    </tr>
    <tr>
        <td>Mr.</td>
        <td>Abby</td>
        <td>Normal</td>
        <td>Brain in a Vat</td>
    </tr>
    <tr>
        <td>Mr.</td>
        <td>Eye-gore</td>
        <td>?</td>
        <td>Hunchback Servant</td>
    </tr>
    <tr>
        <td>Frau</td>
        <td>?</td>
        <td>Blücher</td>
        <td>Housekeeper and Horse Whisperer</td>
    </tr>
</table>
<font color="#FFFFFF">Salutation</font> <font color="#FFFFFF">First Name</font> <font color="#FFFFFF">Last Name</font> <font color="#FFFFFF">Occupation</font>
Dr. Froderick Fronkensteen <strike>Mad Scientist</strike> Physician
Mr. Abby Normal Brain in a Vat
Mr. Eye-gore ? Hunchback Servant
Frau ? Blücher Housekeeper and Horse Whisperer