User blog:ValleyMaster/Beginner Source Editing Guide

Unlike the visual editor, the source editor is more advanced and has more potential. Though it looks complicated if you don't understand anything, it becomes manageable once you've understood the basics. In this source editing guide, you will learn exactly that. Please carefully read below.

The source language that all (most if not all) wikis use is called wikitext provided by MediaWiki. It is basically simplified HTML, meaning that HTML tags may still work.

Heading
Wrap text in equal symbols (one or two) to make it a heading. Three or more equal symbols is a subheading. The more symbols, the smaller the size.

Links
Internal Links: Wrap an article name in double square brackets to give it a link effect. To hide the page name under a text, put after the.

External Links: Wrap a URL in single square brackets to give it a link effect. To put a text, add a space and. If no text has been written, it will simply put a number.

Additional: Adding a hashtag then the name of a heading or sub-heading after the page name will direct the clicker to that heading/sub-heading. This is known as an anchor link.
 * Example: → Brawler, Survivor

Templates
Wrap a template name in double curly brackets to apply the template.
 * Most templates have parameters (areas you can edit). To edit these parameters, type where "" is the name of the parameter. To see a template's parameter, go to its template page and check the source code.
 * Parameters in the template's source are colored orange text wrapped in triple curly brackets:.
 * Some templates don't have names for their parameter, but instead they are numbers. These numbers can be edited chronologically, or just by writing the number itself like this:.
 * To elaborate, take a look at this:.
 * is in the area of (parameter 1),  is in the area of  (parameter 2), and so on. Notice how they're arranged in order from number one to three; think of each vertical bar as numbers with the first bar being #1.

Bold, Italic, Underline, Superscript, Subscript
Bold: Wrap text in triple single quotation marks.

Italic: Wrap text in double single quotation marks.

Underline: Wrap text in.

Superscript: Wrap text in.

Subscript: Wrap text in.

Images/Files
Resolution: By writing a vertical bar then the number of pixels (100px, 150x150px, etc) after the file type, you can change the file's resolution.

Alignment: You can change the file's alignment by writing a vertical bar after the file type then writing left, right, or center.

Link: To direct the clicker to a page when clicking an image, type after the file type.

Caption To add caption, write after the file type.

Tables


Example:

There are three table classes:. You write this in the beginning of the table {{Source| {| |magenta}}.
 * Each table class has their own design. Note that these designs are not like the other wikis, as they have been altered by this wiki's admins.

You can change the width of the table by writing or. You write this in the beginning of the table {{Source| {| |magenta}}.
 * Number % extends with your device's resolution, while Number px stays the same no matter the resolution.
 * Number % basically means the percentage of the whole page. For example, 100% will make the table's width be 100% of the whole page, and 50% will make it half the whole page.
 * Number px is the maximum length of the table and does not expand further.

You can change the alignment of the table by writing. You write this in the beginning of the table {{Source| {| |magenta}}.

You can design the table by writing. You write this in the beginning of the table {{Source| {| |magenta}}.
 * There are different kinds of styles, but here are some common ones:
 * changes the background color.
 * changes the text color.
 * changes the alignment of the text.
 * adds a border.
 * Can be separated into four sides:, , , and.
 * changes the radius of the border.
 * creates space around the element's content.
 * Can be separated into four sides:, , , and.
 * For each style that you write must be separated using a semicolon.
 * For example:.

You can edit each cell individually by writing them on the cell or  and in the table header  then adding an extra.
 * For example:

Galleries
A gallery is a list of images. To add a gallery, take a look at the source code above.

For more information about galleries, take a look at Help:Galleries.

Level 2: Intermediate
In this section, you will learn about styling and template creation. You will also be introduced to "magic words" that will help in template creation.

Styling
You've definitely seen and. These are called "tags" and can also be found in HTML. Both of these tags are used to design a page or template. In order to utilize these tags, you must fill in an attribute (or parameter). The commmonly used attributes are:
 * means "division" or "divisor". It is at 100% width at default.
 * is not an acronym. The width of it scales with the content.
 * Class is primarily used to give the content the contents of a CSS style sheet.
 * CSS style sheets are found in MediaWiki:Common.css. These are styles that in order to be able to be used is you must write the name of the class selector. Now you've probably heard of the acronym CSS just now so, what is CSS?.
 * Though it may be too much, learning CSS is necessary if you want to learn about styling. CSS and HTML are buddies, and wikitext is simplified HTML, which is why it's necessary!
 * For example, if a style sheet has the styling properties: with the class selector being "style1" then we write, it will automatically apply the styling properties (green color and white bg) without having to write any of those in the  attribute.
 * To put it all simply, is a template for a design. By just writing the name of the class, it will apply all the designs that class had.
 * which is for setting up anchor links.
 * For example, is the id. An anchor link with that id  will direct the clicker to where the id was written in.
 * Just like class, id can also have a pre-design. For example the id "example" has been modified:
 * Just like class, id can also have a pre-design. For example the id "example" has been modified:
 * We can see that it has lime bg and white text color. Then if we write example, the result would be example . Then if we write a link to this page with the anchor being #example, you will be brought to here! User_blog:ValleyMaster/Beginner_Source_Editing_Guide
 * which is for styling (you've learned it in in level 1).

WIP