Coding Guide for Dummies

## intro

I've met a lot of people on Fandom who want to learn how to code on different wikis, but most of them are not willing to dedicate a lot of time into it. So this page is for users who share the same thoughts as it will only take you 30 minutes - 1 hour to read and understand. If you think *that's* long, it took me 3 days to learn how to code.

This page goes into just enough detail for a beginner to understand, and has been polished to be as short as possible.

## Important Notices

* If you have any questions, message me on my Message Wall
* If you know someone who wants to learn how to code WikiText, you can send them the link to this page
* A large part of this post is explaning divs and spans. This is because both of these elements are commonly used, and it will make it easier for beginners if they learn about them early

## Know the Language

In coding, there are several coding "languages". Coding languages have different ways of running programs (codes) from one another. The main coding language that is used on Fandom is known as **WikiText,** also known as Wiki Markup or WikiCode.

## Getting Started: Entering Source Editor

Every coder has to learn how to at least enter source editor (now known as source editing). Without it, it would be impossible for you to even code. There are 2 ways to enter source editor:

1. You can click "EDIT" on a page and then select "source editing" at the top right corner of the page you are editing
2. You can hover your mouse / click on the three dots beside "EDIT" and select "edit source"

## Tags

"*A **tag** (also referred to as a **change tag** or **revision tag**) is an annotation associated with an edit or log entry. They are displayed in various locations when referring to revisions, such as in the page history, diffs, recent changes and other places.*" - MediaWiki

To put this into simpler terms, tags are coding annotations that are used depending on their specific functions. Each tag comes in pairs, <\_\_\_> and </\_\_\_>. The first part of the tag, <\_\_\_>, will always be applied before the start of the code, while the second part, </\_\_\_>, will always be applied to the end, after the code. The "\_\_\_" part would be the tag's name.

Not all tags carry the same formatting for their first parts though. Some tags have the "style" attribute. For example, divs and spans aren't <div> and </div>, or <span> and </span>. They come like this: <div style="(code);"> and </div>, <span style="(code);"> and </span>. The code included in the div and span will only be applied to the text in between it. A real example of code shown in a div and a span:

```
<div style="color:white;background:black;border:8px solid gray;">text</div>

```

```
<span style="font-family:pangolin;color:yellow;">text</span>

```

### EXAMPLES OF TAGS

```
<center> text </center>

```

* Makes all text in between the tag formatted to be in the center of the page.

```
<nowiki> text </nowiki>

```

* Cancels the functions of any coding in between the the tag, allowing it to appear on the page.

```
<div style="(code);"> text </div>

```

* One of the most commonly used tags
* Commonly used to customise text

## Formatting of Coding in "Style-Attributed" Tags

In reference to the first example used,

```
<div style="color:white;background:black;border:8px solid gray;">text</div>

```

you can spot some semicolons (;) within the code. Each part of the code will end off with a semicolon. You may also be confused as to why there are also colons (:) included in the code. This is because they are the variables that the coder want to edit. Only variables will end with colons, followed by their value that will end with a semicolon.

Here is a visual representation if you are still confused:

```
<div style="(variable):(value);">text</div>

```

There can also be multiple changed variables in a single tag.

In this case, the color, background, and border are the variables, with white, black, and "8px solid gray" as their values.

Another additional thing is that it does not matter what order you type the variables and values in, as long as each variable has their respective values following after them, and that they have the necessary parts needed to work, the end result will be a success. Did you know? Some variables need each other to work. E.g,

```
<div style="border:8px solid black;border-radius:20px;">text</div>

```

Without the "border" variable, the "border-radius" variable will not work. Even if the "border-radius" variable is typed before the "border" variable, the code will still work.

Also do take note that adding a spacing or not having a spacing in between the colon after the variable and the value will not affect the code.

## Connecting Divs and Spans -- How Do They Work in Multiple Quantities?

Did you know you can add tags inside of tags? Some may not work, but most will, depending on their function. You can add divs inside of divs, spans inside of spans, divs inside of spans, and so on. For one, I could add 2 divs inside a div. It'll look like this:

```
<div style="(code);"><div style="(code);"><div style="(code);"> text </div></div></div>

```

Now for a beginner this may seem overwhelming, to see so many tags with their parts all in one. How does one know which </div> connects to which <div style? Simple. The first </div> will apply to the last <div style. The second </div> will apply to the second </div style. The third </div> will apply to the first <div style.

If you're confused, to put it into simpler terms, it works from inside-out. This also applies to other tags.

## Divs and Spans -- The Difference?

If you've read everything and understood what has been typed so far, then you may wonder, *what is the difference between <div style=">\_\_\_"</div> and <span style=">\_\_\_"</span>?*

*"Span and div are both generic HTML elements that group together related parts of a web page. However, they serve different functions. **A div element is used for block-level organization and styling of page elements, whereas a span element is used for inline organization and styling**." - blog.hubspot.com*

To put this into simpler terms, divs are usually applied to change different sections / parts of pages, whereas spans are usually applied to modify text. If you want to learn more, divs are block-level elements, while spans are inline elements.

## Now, the fun part.

Now you've learnt certain tags, all you need to do is to dig into the good stuff -- the code. This may come across as boring to you, but I'll have you know that with WikiText coding, you can change things from fonts, to backgrounds of text, to backgrounds of even your profile, color of your text, and a lot more.

If you are looking to learn how to change some variables, you can read on more to find out. But first, here is one of my best recommendations to you.

### BEST RECOMMEND - CODING WIKIA

* The Coding Help Wikia -- a wiki that helps Fandom users, such as yourself, learn coding. This site has many useful codes that can be applied to your coding. Nothing difficult, and each code featured on their pages are explained in enough details for beginners to fully understand.

## Commonly Searched Variables

### CHANGING THE BACKGROUND

* To change the background of a paragraph of text
* https://coding-help.fandom.com/wiki/Backgrounds

### CHANGING TEXT COLOUR

* Changes the colour of text
* https://coding-help.fandom.com/wiki/Text\_Color?so=search

### ADDING TEXT SHADOW

* Adds shadow to text
* https://coding-help.fandom.com/wiki/Text\_Shadow?so=search

### TEXT SIZE

* Changes the size of text
* https://coding-help.fandom.com/wiki/Text\_Size?so=search

### BACKGROUND SIZE

* Learn to change the size of a background
* https://coding-help.fandom.com/wiki/Background\_Size?so=search

### ADDING BORDERS

* Add a border around your text or image
* Can be paired with backgrounds
* https://coding-help.fandom.com/wiki/Borders?so=search

### MODIFYING BORDER RADIUS

* Change the roundness of the corners of a border
* https://coding-help.fandom.com/wiki/Border\_Radius?so=search

### PADDING

* Adds space between your text and border
* Overall makes things look neater
* https://coding-help.fandom.com/wiki/Padding

There is a lot more that you can learn. These are just some of the common examples most would want to learn to easily format a page. More can be found by referring to the resources linked below.

## Resources Used to Make this Page

At some parts while I was typing this, it was hard for me to articulate my understandings into words, so I had to research what I already knew to overcome this problem.

Here are some of the resources I've referred to / included in this page:

* https://coding-help.fandom.com/wiki/Coding\_Help\_Wiki
* A wiki that helps with coding

* https://blog.hubspot.com/website/span-vs-div#:~:text=Span%20and%20div%20are%20both,for%20inline%20organization%20and%20styling.
* A site that includes different articles. You can find articles from lifestyle to marketing on this site, although does not focus on coding

* https://www.w3schools.com/
* A coding site that contains extremely useful information when it comes to coding. A lot of coders refer to this site as it has a wide variety of coding languages, and its lessons are accurate

* https://www.mediawiki.org/wiki/MediaWiki
* a documentation platform, basically mini Wikipedia