Coding Guide Neo/Basics

## Note on editing

As editors on FANDOM, we have access to three separate editing modes. The **VisualEditor** (Default for new accounts), the **Classic Rich-text Editor** (Default for old accounts), and the **Source Editor** (What most coders use).

When editing code be sure to use the Source Editor as your main editor as both the Visual Editor and the Classic Rich-text Editor can cause issues. This can be solved by wrapping your code in a `<noinclude>` tag. See section (3) for more information.

### Coding with the VisualEditor

This method is not recommended!

Use the Source Editor or the Classic Rich-text Editor if possible.

1. Click the the edit button in the upper right corner of a page.
2. Click the hamburger-menu dropdown to the left of the Save and Cancel buttons
3. Select "Source Editor" from the dropdown and start coding!

### Coding with the Classic Rich-text Editor

1. Mouse over the dropdown arrow to the right of the the edit button in the upper right corner of a page.
2. Click on "Source editor" in the menu that appears.
3. Select the "Source" tab at the top of the page and start coding!

Note: If there is already complex coding on your page, the Classic Rich-text Editor will auto switch to the Source Editor for you.

### Switching to the Source Editor

1. Mouse over your profile picture in the floating header.
2. Select "My Preferences" in the dropdown that shows up.
3. Click on the Editing tab and then select the Preferred Editor dropdown.
4. Select Source Editor and then scroll down to the bottom of the page and hit "save".

## Wikitext Overview

* What is Wikitext?
* Wikitext

Wikitext is a simple, easy to use markup language that gets translated to HTML after you publish the page. You can italicize, bold, make headings and links, and create bullet points, among other things. See Help:Wikitext for an in-depth look.

The next tab includes some basic ways you can style your text, create numbered lists, headings, and add images to your page.

Bold Text
HTML equivalent: <b>.

```
'''Bold Text'''

```

results in **Bold Text**

Italic Text
HTML equivalent: <i>.

```
''Italic Text''

```

results in *Italic Text*

Bold and Italic Text
HTML equivalent: <b> and <i>.

```
'''''Bold and Italic Text'''''

```

results in ***Bold and Italic Text***

Bulleted list
All bullet points created with Wikitext are square, though you can make circular bullet points using HTML.
HTML equivalent: A <li> for each bulleted point, wrapped inside a <ul>.

```
* Item 1
* Item 2
* Item 3

```

results in

* Item 1
* Item 2
* Item 3

Numbered list
HTML equivalent: A <li> for each numbered point, wrapped inside a <ol>.

```
# Item 3

```

results in

1. Item 1
2. Item 2
3. Item 3

Description Lists
Wikitext description lists are made with ";" and ":". These characters must be the first character on the line to function.
HTML equivalent: <dt> (;) and <dd> (:) wrapped inside a <dl>.

```
; Term
: Detail 1
: Detail 2
:: Nested Detail
; Another Term
; Yet another term
: Detail

```

results in

Term
Detail 1
Detail 2
Nested Detail
Another Term
Yet another term
Detail

Headings
Refrain from using a single "=" (Level 1 heading) as it is styled as the article title and should not be used within an article.
HTML equivalent: <h1>-<h6>.

```
= Level 1 =
== Level 2 ==
=== Level 3 ===
==== Level 4 ====
===== Level 5 =====
====== Level 6 ======

```

results in

# Level 1

## Level 2

### Level 3

#### Level 4

##### Level 5

###### Level 6

Horizontal Rule
HTML equivalent: <hr>. The <hr> tag does not need to be closed like a <div> tag.

## ```

```

results in

Images
`[[File:filename.extension|options|caption]]`
Options are seperated by pipes "|"
*Size*
`*{WIDTH}*px` - Defines the width of the image without restricting the height. The width:height ratio will be kept, so reducing the width will reduce height as well.
`x*{HEIGHT}*px` - Defines the height of the image without restricting the width. The width:height ratio will be kept, so reducing the height will reduce width as well.
`*{WIDTH}*x*{HEIGHT}*px` - Defines the width and the height of the image. Because ratio is kept, there is no real reason to use this over one of the above methods.
*Horizontal Alignment*
`*left*` - Aligns the image to the left side of the page
`*right*` - Aligns the image to the right side of the page
`*center*` - Aligns the image to the center of the page
*Links*
`link=*{PAGENAME}*` - Gives the image a link. Can either be an internal link (e.g. MudWings) or an external link (e.g. http://example.com). If left blank (just `link=`) the image will link to nowhere and the lightbox does not appear when the image is clicked.
*Thumb*
`thumb` - When the thumb option is added the image is shrunk and floats to the right side of the page. The caption appears as text beneath the image.
Caption:
A short blurb about the image. When `thumb` is set the caption appears as text underneath the image. If `thumb` is not set the caption appears when you mouse over the image. The caption does not appear when being moused over if the `link=` option is being used
Examples
`[[File:Vicccicicc.png]]`

`[[File:Vicccicicc.png|thumb|Image of Victor]]`
See right side of page →
`[[File:Vicccicicc.png|25px|Wiki mascot!]]`

## HTML Overview

* What is HTML?
* HTML
* Wikitext Tags

HTML (short for HyperText Markup Language) is the backbone of the web, providing structure and meaning to content. See Help:HTML for information on what HTML tags you are allowed to use.

Like the Wikitext overview above, the next tab includes how to bold and italicize your text, how to make bulleted and numbered lists, among several other things.

Bold Text

```
<b>Bold Text</b>

```

results in **Bold Text**

Italic Text

```
<i>Italic Text</i>

```

results in *Italic Text*

Bold and Italic Text

```
<b><i>Bold and Italic Text</i></b>

```

results in ***Bold and Italic Text***

Bulleted list
All bullet points created with Wikitext are square, though you can make circular bullet points using HTML.

```
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

```

results in

* Item 1
* Item 2
* Item 3

Numbered list

```
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

```

results in

1. Item 1
2. Item 2
3. Item 3

Description Lists
Wikitext description lists are made with ";" and ":". These characters must be the first character on the line to function.

```
<dl>
<dt>Term</dt>
<dd>Detail 1</dd>
<dd>Detail 2
<dl><dd>Nested Detail</dd></dl></dd>
<dt>Another Term</dt>
<dt>Yet another term</dt>
<dd>Detail</dd>
</dl>

```

results in

Term
Detail 1
Detail 2
Nested Detail
Another Term
Yet another term
Detail

Headings
Refrain from using <h1> tags as they are styled as the article title and should not be used within an article.

```
<h1>Level 1</h1>
<h2>Level 2</h2>
<h3>Level 3</h3>
<h4>Level 4</h4>
<h5>Level 5</h5>
<h6>Level 6</h6>

```

results in

# Level 1

## Level 2

### Level 3

#### Level 4

##### Level 5

###### Level 6

Horizontal Rule
This tag is self-closing so you do not need the closing `</hr>`. All you need is the `<hr>` tag.

```
<hr/>

```

results in

See Wikipedia's HTML Elements page for a more in-depth look at exactly which tags Wikia supports and what they do.

Note that Wikia uses a custom version of MediaWiki 1.19, so not all tags listed on that page work here. A brief list of tags that do work is at Help:HTML#Available HTML tags

Wikitext adds additional tags that can be used to make things easier.

References
You can make references by using the `<ref>` tag and the (self-closing) `<references>` tag.

```
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas.<ref>Lorem Ipsum generated by https://lipsum.com/.</ref>

<references/>

```

results in

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas.

1. ↑ Lorem Ipsum generated by https://lipsum.com/.

Noinclude
The noinclude tag prevents Wikia's Classic Rich-text Editor from messing with your code.

```
<noinclude>Though you can't see any difference here, try viewing the page with the Classic Rich-text Editor. It should either auto switch you to the source version or display everything inside the tag as a little note icon.</noinclude>

```

results in

Though you can't see any difference here, try viewing the page with the Classic Rich-text Editor. It should either auto switch you to the source version or display everything inside the tag as a little note icon.

Nowiki
The Nowiki tag makes everything treated inside as normal text, instead of code.

```
<nowiki>
<div style="background: blue; font-size: 19px">
Lorem Ipsum.
</div>
</nowiki>

```

results in

<div style="background: blue; font-size: 19px">
Lorem Ipsum.
</div>

### Obsolete Tags

* `**<big>**` ‐ A `<span>` tag that uses the `font-size` property should be used instead.
* `**<center>**`
	+ If used to center text, a `<p>` or a `<div>` tag that uses the `text-align: center;` property should be used.
	+ If used to center code, a `<div>` tag with the `margin: 0 auto` property should be used. You may have to specify a width as well, in which case you probably want to use `width: auto`.
* `**<font>**` ‐ A `<p>`, `<div>`, or `<span>` tag that uses the `font-family: {FONTNAME};` and `color: {COLORCODE};` properties should be used instead.
* `**<strike>**` ‐ The `
` tag should be used instead.

## Text

### Color

The `color` property changes the color of text inside the tag.

Color Codes
There are four common ways of showing color.
* HEXA Codes: `#ff0000ff`
	+ without alpha: `#ff0000`
	+ shorthand:
		- With alpha: `#f00f`
		- Without alpha: `#f00`
* RGBA Codes: `rgba(255, 0, 0, 1)`
	+ without alpha: `rgb(255,0,0)`
	+ shorthand:
		- (commas) `rgba(255,0,0,1)`
		- (no commas) `rgba(255 0 0 / 1)`
* HSLA Codes: `hsla(0, 100%, 50%, 1)`
	+ without alpha: `hsla(0,100%,50%)`
	+ shorthand:
		- (commas) `hsla(0,100%,50%,1)`
		- (no commas) `hsla(0 100% 50% / 1)`
* X11 Colors: `red`
	+ There is no shorthand or alpha with X11 colors.

Syntax

`color: {COLOR};` with `{COLOR}` being a hex code, rgb code, or an x11 color.
Examples:
`<span style="**color: #88d1f1;**">Lorem Ipsum</span>`: Lorem Ipsum
`<span style="**color: rgb(153,102,204);**">Lorem Ipsum</span>`: Lorem Ipsum
`<span style="**color: firebrick;**">Lorem Ipsum</span>`: Lorem Ipsum

## Divs

### The Box Model

Every element (tag) in HTML is made up of a block. Inline blocks like the <em> tag or the <span> do not make new lines, whereas block level elements do.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. *Sed ultricies* tempus auctor. Mauris bibendum volutpat tempus. Phasellus aliquet elit et risus faucibus venenatis. Proin finibus imperdiet justo eu vulputate.

The Box Model is essentially a set guidelines the browser follows that dictates how blocks of content

It is made up of four parts; Margin, Border, Padding, and Content.

Margin - Clears an area outside the border. The margin is transparent
Border - A border that goes around the padding and content
Padding - Clears an area around the content. Like the Margin, the padding is transparent
Content - The content of the box, where text and images appear

### Borders

The `border` property adds a border to the tag. (shorthand for `border-width`, `border-style`, and `border-color`.)

Syntax
`border: {WIDTH} {STYLE} {COLOR};`
`{WIDTH}` being a number value in pixels (px) or percentages (%).
`{STYLE}` being a border style. All styles are shown below.
`{COLOR}` being the color of the border. If `{COLOR}` is left blank, it inherits the text color.
`<div style="**border: 5px none #fa0**">Lorem Ipsum</div>` results in:

Lorem Ipsum
`<div style="**border: 5px hidden #fa0**">Lorem Ipsum</div>` results in:

Lorem Ipsum
`<div style="**border: 5px dotted #fa0**">Lorem Ipsum</div>` results in:

Lorem Ipsum
`<div style="**border: 5px dashed #fa0**">Lorem Ipsum</div>` results in:

Lorem Ipsum
`<div style="**border: 5px solid #fa0**">Lorem Ipsum</div>` results in:

Lorem Ipsum
`<div style="**border: 5px double #fa0**">Lorem Ipsum</div>` results in:

Lorem Ipsum
`<div style="**border: 5px groove #fa0**">Lorem Ipsum</div>` results in:

Lorem Ipsum
`<div style="**border: 5px ridge #fa0**">Lorem Ipsum</div>` results in:

Lorem Ipsum
`<div style="**border: 5px inset #fa0**">Lorem Ipsum</div>` results in:

Lorem Ipsum
`<div style="**border: 5px outset #fa0**">Lorem Ipsum</div>` results in:

Lorem Ipsum

### Width and Height

#### Width

The `width` property sets an elements width.

Syntax
`width: {WIDTH};` with `{WIDTH}` being a number value in pixels (px) or percentages (%).
The default width is `auto`, meaning that if you forget to set, or don't set `width` the div take up all available space.
Examples:
`<div style="**width: 300px;** background: #614051;">Lorem Ipsum</div>`: Lorem Ipsum
`<div style="**width: 70%;** background: #c19a6b;">Lorem Ipsum</div>`: Lorem Ipsum
`<div style="**width: auto;** background: #88d1f1;">Lorem Ipsum</div>`: Lorem Ipsum
In most cases the highest width you want to use is `704px` since FANDOM dynamically scales the width of the page to the size of your browser, the smallest size being `704px`.

#### Height

The `height` property sets an elements width.

Syntax
`height: {HEIGHT};` with `{HEIGHT}` being a number value in pixels (px) or percentages (%).
Examples:
`<div style="**height: 190px;** background: #614051;">Lorem Ipsum</div>`: Lorem Ipsum

Vic's Coding Tip

Using percentages as your height will have no effect unless it is contained inside another div with a height specified in px.

In this case, the container div's height is `100px`, so the colored section is 90% of that: 90px.

`<div style="**height: 90%;** background: #c19a6b;">Lorem Ipsum</div>`: Lorem Ipsum

### Margins and Padding

#### Margins

The `margin` property sets the amount of space *outside* the div before the border begins. (shorthand for `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`)

Syntax
`margin: {MARGIN};` with `{MARGIN}` being a number value in pixels (px) or percentages (%).
`margin: {MARGIN};` **one** value is specified, it applies the **same** margin to **all four sides**.
`margin: {MARGINVERTICAL} {MARGINHORIZONTAL};` **two** values are specified, the **first** margin applies to the **top** and **bottom**, the **second** to the **left** and **right**.
`margin: {MARGINTOP} {MARGINHORIZONTAL} {MARGINBOTTOM};` **three** values are specified, the **first** margin applies to the **top**, the **second** to the **left** and **right**, the **third** to the **bottom**.
`margin: {MARGINTOP} {MARGINRIGHT} {MARGINBOTTOM} {MARGINLEFT};` **four** values are specified, the margins apply to the **top**, **right**, **bottom**, and **left** in that order

Vic's Coding Tip

An easy way to remember this is that it makes a **clockwise** circle starting at the top, and moving to the right.

Examples:
`<div style="**margin: 50px;** height: 150px; background: #88d1f1;">Lorem Ipsum</div>`:

margin

Lorem Ipsum

`<div style="**margin: 50px; 0px** height: 150px; background: #88d1f1;">Lorem Ipsum</div>`:

margin
Lorem Ipsum

`<div style="**margin: 20px 50px 20px;** height: 150px; background: #88d1f1;">Lorem Ipsum</div>`:

margin

Lorem Ipsum

`<div style="**margin: 50px 0px 25px 25px;** height: 150px; background: #88d1f1;">Lorem Ipsum</div>`:

margin
Lorem Ipsum

#### Padding

The `padding` property sets amount of space inside a div before the content begins. (shorthand for `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`)

Syntax
`padding: {PADDING};` with `{PADDING}` being a number value in pixels (px) or percentages (%).
`padding: {PADDING};` **one** value is specified, it applies the **same** padding to **all four sides**.
`padding: {PADDINGVERTICAL} {PADDINGHORIZONTAL};` **two** values are specified, the **first** padding applies to the **top** and **bottom** and the **second** to the **left** and **right**.
`padding: {PADDINGTOP} {PADDINGHORIZONTAL} {PADDINGBOTTOM};` **three** values are specified, the **first** padding applies to the **top**, the **second** to the **left** and **right**, the **third** to the **bottom**.
`padding: {PADDINGTOP} {PADDINGRIGHT} {PADDINGBOTTOM} {PADDINGLEFT};` **four** values are specified, the padding applies to the **top**, **right**, **bottom**, and **left** in that order

Vic's Coding Tip

Padding *adds* to the width and height of your div. As you can see in the first example, the width and height are both 150px, but because the padding is 50px it adds 50px of space on all sides making the total width/height 250px.

Examples:
`<div style="**padding: 50px;** width: 150px; height: 150px; background: #88d1f1;">Lorem Ipsum</div>`:

Lorem Ipsum
padding

`<div style="**padding: 20px 50px 20px;** height: 150px; background: #88d1f1;">Lorem Ipsum</div>`:

Lorem Ipsum
padding

## Other Resources

Color Pickers

* DDG
* ColorHexa
* MDN

Guides
Beginning guides
* Interneting Is Hard
* HTML Dog

Intermediate guides
* MDN

References
HTML references
* HTML Dog's HTML references
* MDN's HTML references

CSS references
* HTML Dog's CSS references
* MDN's CSS references
* CSS-Tricks' CSS references