recursal/Fanatic-Fandom huggingface dataset:
Coding Help Wiki

## Wiki Introduction

Welcome to the Coding Help Wiki! We have 76 articles, 54,614 edits, and 41 active users. Our wiki is here to assist Fandom users in learning JavaScript, CSS, WikiText, and HTML. While the **Fandom Developers Wiki** offers advanced customization, we focus on simpler designs for common coders, like stylish profiles and coded OC designs for OC Wikis. We're a relatively new wiki, so we'd greatly appreciate your help in realizing its full potential. Happy coding!

## Featured Articles

Free Designs
Individuals seeking coding references or those unfamiliar with coding can discover valuable resources here. These codes have been created by our community members. Kindly remember to give them credit, as they have invested significant effort in their designs.

Badge Tutorial
Badges are coded items made of Wikitext that are commonly used in articles and on profiles. They tell readers that the user is friends with someone, a club they are in, or that the page contains spoilers from the latest book!

Backgrounds
Backgrounds are a HTML, CSS, and WikiText Attribute. This guide will teach you how to make a solid background.

Border Radius
This article is about changing the rounding or radius of borders.
Headers

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

## Introduction

**Headers** are a WikiText coded item that defines a section in the text. You can see them a LOT on wiki pages/articles--the 'Introduction' header that you see on this page is one! They're also closely related to tables of content, which we'll explore in this guide too!

## The Header Code

### WikiText Headers

WikiText headers are made with equal signs (=). The more equal signs (=) a word has surrounding it, the smaller the header is, or it is a sub-header. Below you can see the codes and the result:

Code
```
= Heading 1 =
== Heading 2 ==
=== Heading 3 ===
==== Heading 4 ====
===== Heading 5 =====
====== Heading 6 ======

```

Result:

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

As you can see, the more equal signs(=) surrounding the header words, the smaller it is. If you have a larger header (Like ==Heading 2==), and then a smaller heading (like ===Heading 3==), it would show up in the table of contents as heading 3 being a subcategory to heading two. **Please note that, when making wiki pages on this wiki, please do not use heading 1, as it is larger than necessary and can even cause issues.**

### HTML and Wikitext Headers

This way works both in Wikitext/Wikicode, AND in HTML. Below you can see the codes and the result:

Code

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

```

Result:

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

As you can see, the higher the number next to the 'h' in the tag, the smaller the heading! Avoid using <h1>, as it usually is bigger than necessary and clogs pages.

## Table of Contents

Tables of Content were touched on briefly in the Beginner's Guide page, but here I'd like to go farther into detail on them, as they are closely entwined with headings.

All headings will appear in a box at the top of the page unless otherwise specified. To change this, type in:

To make the table of contents appear somewhere else on the page and NOT on the top of the page, type in the following where you want the table of content:

```
__TOC__
```

To make the table of contents disappear entirely, type in:

```
__NOTOC__
```

To make the table of contents appear in **more than one place**, type in (wherever you want the Table of Contents):

```
__FORCETOC__
```

**Tables of Content can be customized by adding a div or span style tag (with Attributes) before the \_\_TOC\_\_ markup.**

When you type in one of the TOC markups, you will notice that the background of the words turns dark gray, and the words turn blue. This is a sure sign that you've typed it in right!

If you want to have a Table of Contents, but you don't want to have a certain header be displayed, you can create a 'fake' header by using a <big> tag before the header text, a </big> tag after it, and a horizontal line(<hr> tag or ---- ) below that.
Box Shadow

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Quick Code

Copy to clipboard <div style="box-shadow: 0 0 10px;">Text Goes Here</div>

## Introduction

The CSS, HTML, and WikiText **Box Shadow** property can be used to give block elements a 'drop' or inner shadow. It can be confused with text shadow, a similar attribute.

## Box Shadow Code

To get a box shadow, use the below code:

```
<div style="box-shadow: _px _px _px COLOR">
```

Replace the \_s with a number. The first two numbers are the x and y axis offset respectively. The last number is the blur-radius.

Then, replace COLOR with a hex code, RGB/RGBA, or common color name from our colors page.

### Examples

Below are three different examples of applying the box-shadow property on a div style tag.

```
<div style="border: 1px solid black; box-shadow: 0 0 10px black;">Text Go Here</div>
```

Result:

Text Go Here

### Offset drop shadow

```
<div style="border: 1px solid green; box-shadow: 5px 5px 10px green;">Text Go Here</div>
```

Result:

Text Go Here

### Inner Shadow

```
<div style="border: 1px solid blue; box-shadow: inset 0 0 10px blue;">Text Go Here</div>
```

Result:

Text Go Here

## Two Border Color

Adding two Borders with different Colors for the **Box Shadow**.

### Examples

```
<div style="border: 1px solid blue; box-shadow: 0 0 10px blue; padding:15px;"><div style="border: 1px solid blueviolet; box-shadow: 0 0 10px blueviolet; padding:15px;">Text Go Here</div></div>
```

Result:

Text Go Here

### Offset drop shadow

```
<div style="border: 1px solid hotpink; box-shadow: 5px 5px 10px hotpink; padding:15px;"><div style="border: 1px solid violet; box-shadow: 5px 5px 10px violet; padding:15px;">Text Go Here</div></div>
```

Result:

Text Go Here

### Inner Shadow

```
<div style="border: 1px solid red; box-shadow: inset 0 0 10px red; padding: 15px;"><div style="border: 1px solid deeppink; box-shadow: inset 0 0 10px deeppink; padding:15px;">Text Go Here</div></div>
```

Result:

Text Go Here

## Values

The box-shadow property has six possible values:

* Color
* Inset
* Horizontal offset
* Vertical offset
* Blur radius
* Spread distance

Only three property values are required--the horizontal offset, vertical offset, and the color.
Хоук Белоснежный

*Любимое выражение Хоук*

**Хоук Белоснежный** (англ. Hawk SnowWhite) — ученик Королевской Академии.

## ​Характер

Настоящий прекрасный принц, в которого влюблены многие ученицы Королевской Академии. Однако излишняя храбрость Хоука порой подвергает опасности всю команду.

Вы можете найти его на тренировке «Спасти принцесс».

## Магия

Магия снега. С помощью этой магии Хоук может замораживать ￼вещи и людей.
Margin

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Quick Code

Copy to clipboard <div style="margin-left:100px">TEXT</div>

## Introduction

**Margin** is a HTML, CSS, and WikiText element that is mainly used to indent text (which also can be done by putting a colon [:] in front of the text). Margin is similar to Padding, but you can also use it to indent on the right, top, or bottom! Indenting is how far away from the edge of the coded area the text or item has to be.

## Using Margin

Margin has four parts to it: top-margin, bottom-margin, left-margin, and right-margin. Let's take a look at top-margin first.

### Top Margin

Top margin is how far away from the top edge of the coded area the text or item is. You can use top margin by typing in the following code:

```
<div style="margin-top: __px;">TEXT</div>
```

Replace the blank with a number. When you're done, it should look like the following:

See how far this is from the line above it?
### Bottom Margin

Bottom margin is how far away from the bottom edge of the coded area the text or item is. You can use bottom margin by typing in the following code:

```
<div style="margin-bottom: __px;">TEXT</div>
```

Replace the underscore (\_\_) with a number. When you're done, it should look like the following:

This should like look normal text, but it really isn't.
### Left Margin

Left margin is how far away from the left edge of the coded area the text or item is. You can use left margin by typing in the following code:

```
<div style="margin-left: __px;">TEXT</div>
```

Replace the underscore (\_\_) with a number. When you're done, it should look like the following:

See how far this is from the left edge?
### Right Margin

Right margin is how far away from the right edge of the coded area the text or is. It can only really be seen when using right Text Align. You can use right margin by typing in the following code:

```
<div style="margin-right: __px;">TEXT</div>
```

Replace the underscore (\_\_) with a number. When you're done, it should look like the following:

See how far this is from the right edge?
### Combined Margin

You can get a combined margin by adding all or some of the different sub-attributes of margin together.

Example code:

```
<div style="margin-left: 20px; margin-top: 20px;">TEXT</div>
```

This code gives us

TEXT
### All Side Margin

You can also use a code that margins every side, in just a few letters!

Example code:

```
<div style="margin: 20px;">TEXT</div>
```

This code gives us:

See how this shows a visible change in the left and top margin in one code? It also affects the bottom and right, although that is less visible.
Free Designs

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Discover free coding resources curated by our editors! If you use their work, make sure to give them credit as they've invested a lot of effort. For editors, avoid using specific headings like "==Heading==" and steer clear of outdated tags listed here. Using these tags messes up the format for others and causes lag for users.

***Note:** If you have code you'd like to add but aren't sure how, contact this individual*.

**Please visit:**

* Free Designs/Page Five
* Free Designs/Page Four
* Free Designs/Page One
* Free Designs/Page Three
* Free Designs/Page Two

* OC Designs
HSV

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

## Introduction

**HSV**, (also known as **HSB** or **HSL**), is a way of specifying colors. It is similar to **RGB/RGBA**, but instead of stating how much red, green, and blue is in the color, it states the hue, saturation, and value (lightness or brightness) of the color, hence the name, HSV.

## Hue, Saturation, and Value

### Hue

Hue is the color or shade of the color--red, green, blue, yellow, etc.

It's expressed as degrees:

* Red falls between 0 and 60 degrees.
* Yellow falls between 61 and 120 degrees.
* Green falls between 121 and 180 degrees.
* Cyan falls between 181 and 240 degrees.
* Blue falls between 241 and 300 degrees.
* Magenta falls between 301 and 360 degrees.

### Saturation

Saturation is how much pigmentation is in the color. It can also be described as how pure the color is.

It's used as 0 to 100 percent. Reducing this component toward zero introduces more gray and produces a faded effect.

Sometimes, saturation appears as a range from 0 to 1, where 0 is gray, and 1 is a primary color.

### Value

Value, also known as brightness or lightness, is how dark a color is.

### Understanding:

Here's a color picker. Moving to the right, you get more saturation, or color. Moving to the left, you lose color and it goes to gray--which is desaturation. The value would be up and down, and the hue exists on the color bar to the right of the big box.

Recomended Color Picker (external)

## Further Reading

You can also use other color modes if HSV does not make sense for you. Check out Hex Codes, Named Colors and RGB/RGBA!!

## References

* Some info credit goes to What is HSV in design on lifewire.com (external).
* The HSV color model in graphic design on thetechedvocate.org (external).
Text Decoration

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Quick Code

Copy to clipboard <div style="text-decoration: underline overline">Your text Here</div>

## Introduction

**Text decoration** is similar to using a `<b>` tag to bold your text, or a <u> to underline it (you can find more like this at the Text Modification page). But the text-decoration attribute takes this farther, giving you wavy underlines, or colored strikethroughs. Text-decoration is a useful HTML, CSS, and Wikicode/Wikitext attribute that this guide will teach you how to use.

## The Code

### Basic Text Decoration

Let's start with a few examples:

Overlined text
The code for this:

```
<div style="text-decoration: overline">Overlined text</div>
```

Strikethrough text
The code for this:

```
<div style="text-decoration:line-through">Strikethrough text</div>
```

Underline-overline text
The code for this:

```
<div style="text-decoration: underline overline">Underline-overline text</div>
```

Common text decorations can be achieved through tags like <b> for bold and <i> for italic. But text-decoration takes this farther--you can create a combination like an overline, an underline, and italics! The format for this is: 'text-decoration: \*type\*'. The types of text decoration: overline, line-through, underline overline, bold, italic, underline. You can mix the types together by putting the names and a space between them.

### Colored/Styled Text Decoration

There are 2 other attributes *inside* of this that define even more things; the exact style of the decoration, and the color. First, let's look at the text-decoration-color attribute. The format of this is 'text-decoration-color:\*color\*'. Replace \*color\* with a color (HEX code, RGB, Common Color Name).

This is an example of red text-decoration
The code for this:

```
<div style="text-decoration: underline overline ; text-decoration-color: red">This is an example of red text-decoration</div>
```

The other attribute; text-decoration-style is like border type, but for text instead of the entire coded item. The format for it is 'text-decoration-style: \*type\*'. Type should be replaced with one of the following: solid, double, dotted, dashed, wavy. Below is an example of a wavy underline.

Wavy Underline
The code for this:

```
<div style="text-decoration: underline; text-decoration-style: wavy">Wavy Underline</div>
```

We can also combine all three attributes to get this:

Wavy Green Underline
The code for this:

```
<div style="text-decoration: underline; text-decoration-style: wavy; text-decoration-color: Green">Wavy Green Underline</div>
```
Вики Метёлка

*Любимое выражение Вики*
**Вики Метёлка** (англ. *Vicky Broomstick*) - ученица королевской академии.

## История

Хотя Вики умна и могущественна, почти каждый раз ее каверзам что-то мешает… даже Роуз удаётся нечаянно разрушить её планы. Поэтому Вики мечтает во что бы то ни стало выгнать Роуз из Академии…

## Характер

    Она так и норовит сделать какую-то пакость, но каждый раз, как бы тщательно она все не продумывала, ее планам всегда что-то мешает. Умная и очень злая. Хочет стать самым великим злодеем за всю историю сказки!

## Магия

Тёмная магия. Вики способна наложить несколько злых чар с помощью своего жезла.

## Цель

Стать самой страшной сказочной злодейкой в мире.
Emojis

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Warning: this page contains external links, please beware of where you click. We will NOT be responsible for your safety.
Additionally, we encourage you to exercise internet safety in all wikis.

## HTML Emoji Codes

HTML emoji codes are a method of encoding that allows you to represent emojis using a specific string of characters. Web editors recognize these unique character strings and automatically transform them into emoji symbols when displaying content to users.

The encoding process follows a distinct pattern. An HTML emoji code always begins with an ampersand (&), followed by a hash symbol (#), and concludes with a semicolon (;).

To decode and use these HTML emoji codes, most people rely on a reference table rather than memorizing the codes themselves. While there are patterns to recognize, they can be complex and varied, so having a reference is often more practical.

## Examples

Here are a couple of examples illustrating HTML emoji codes.

**Code:** &# x1f496 ;

**Result:** 💖

Omit any spaces within the HTML code when you go to paste this.

In this example, **x1f496** has been used for the code portion. That can be replaced with another code like **128128** to render the correct emoji. *No **x** is added for decimal codes (Dec)*.

You can find a comprehensive list of HTML emoji codes on this W3Schools page.

**\* NOTE: You can't convert emoji codes into plain text in Wikitext editors. No matter what tags you use (wikitext, code, pre), none of them work. If you wish to display emoji codes as plain text, you'll need to insert a space or another symbol to separate them. \***

## Copy-Paste

It's important to note that some emojis are not rendered using HTML codes. In such cases, you can simply copy and paste the emoji into your web editor.

## References

* https://en.wikipedia.org/wiki/List\_of\_XML\_and\_HTML\_character\_entity\_references
* https://en.wikipedia.org/wiki/Emoji#Unicode\_blocks
* https://www.w3schools.com/html/html\_emojis.asp
* https://www.w3schools.com/charsets/ref\_emoji.asp
Beginning Coding Games

Warning: this page contains external links, please beware of where you click. We will NOT be responsible for your safety.
Additionally, we encourage you to exercise internet safety in all wikis.

Here are some links to **Beginner Coding Games**:

* Code.org
* Scratch
* Turbowarp
* Phosphorus
* J2Code
* W3Schools
Overflow

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

## Introduction

**Overflow** is an Attribute that allows elements/boxes to have scrollbars, hide extra info, scroll through content/elements, and other things as well.

## Different Types of Overflow

### Overflow:visible

overflow:visible is the default overflow mode - if you do not specify what mode of overflow you want, it will automatically show as overflow:visible.

In this mode, any text or content that doesn't fit into the boundaries of the element will simply appear out of it, potentially overlapping with other elements.

Code:

```
<div style="overflow:visible; height:100px; width:100px; background:green;">
Some long text...
</div>

```

Result:

Some long text here, long enough to overflow out of the container. text text text text text text text.

### Overflow:auto

Overflow:auto is the type of overflow that allows you to have a scrollbar for the width and height of your choice.

Code:

```
<div style="height:100px;width:100px;overflow:auto;background:green">
text long enough for a scrollbar to appear...
</div>
```
Result:

fillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfiller

### Overflow:hidden

Overflow:hidden is the type of overflow that hides any extra overflow.

Code:

```
<div style="height:100px;width:100px;overflow:hidden;background:green">
filler...
</div>
```
Result:

fillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfiller

### Overflow:scroll

Overflow:scroll is an overflow that has a scrollbar, even when the text doesn't go out of the specified height/width(s).

```
<div style="height:100px;width:100px;overflow:scroll;background:green">
filler...
</div>
```

Result:

fillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfiller
Generators

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

## Introduction

WikiText **generators** are simple, cache-based generators that are relatively user-friendly to create, but not to use. First, let's take a look at what exactly a WikiText generator even *is.*

Below, you will get an option, one through ten, at random. Click the generate another option button to get a new one.

```
You got option six!
```

Generate Another Option
Coding can also be put inside of the results in WikiText generators, although the example does not show this. You'll learn how later in this page! You'll also learn how to make the generate another *option* button!

## Page Caches

Because WikiText Generators are page cache-based, meaning the page stores the data that you got a certain result, you won't get a new result from reloading the page. You **MUST** clear the page cache, which is where the data is stored. You can do this by clicking on the button in the example. We'll explore how to *create* a button to clear the page cache farther in this guide.

## The Code

### Generator Code

The code for a generator is quite simple. Type in the following:

```
<choose>
<option>OPTION</option>
<option>OPTION</option>
<option>OPTION</option>
</choose>
```

Replace the OPTION text with whatever you want *inside* the tags! You can have as many, or as few options as you like, but if you want a good and diverse generator, like a name generator, you'll definitely want a lot more than 3, 10, or even 20 options. To add another option, just put in an `<option>` tag, then your content, and then a `</option>` tag.

**If you want to have code in some of the results, code as you usually would, but INSIDE of the `<option>` tags.**

### Button Code

Now that you've created the actual generator, you need to make it so that people can actually generate '*more options*. To do this, type in:

```
<span class="plainlinks">[https://WIKI ADDRESS/PAGENAME?action=purge TEXT HERE]</span>
```

Replace 'WIKI ADDRESS' with the address of the Wiki, and PAGENAME with the name of the page (But leave the question mark!).

Replace the
'TEXT HERE' with a text of your choice. This will be what actually shows up.

**How it works:** Adding 'action=purge' takes the user to a page where they will clear the cache of the page and can generate another option! Be sure to tell them this in the link/button text or somewhere else, so they aren't confused!

### Putting it all together

Add the link/button code to the Generator code. Then, run the generator! Make sure to test it, and to make sure you have enough options for whatever purpose your generator is to be used for. The end code should look something like this:

```
<choose>
<option>OPTION</option>
<option>OPTION</option>
<option>OPTION</option>
</choose>
<span class="plainlinks">[https://WIKI ADDRESS/PAGENAME?action=purge TEXT HERE]</span>
```
Letter Spacing

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Quick Code

Copy to clipboard <div style="letter-spacing: 3px;">TEXT</div>

## What Is Letter Spacing?

**Letter spacing** is a HTML, CSS, and WikiText attribute that changes how far apart the letters are. Letter spacing is an excellent attribute for decorative text.

## How To Use Letter Spacing

To use letter-spacing, type in:

```
letter-spacing:__px;
```

Fill in the blank with a number. The higher the number, the farther apart the letters are. Letter-spacing can also be paired with Fonts, Text Color, and other Wikitext/Wikicode attributes.

## Examples

Purple Firefly text
The code for this:

```
<div style="color: purple; font-family: firefly; letter-spacing: 3px; font-size: 20px">Purple Firefly text</div>
```

Underlined text with letter-spacing.
The code for this:

```
<div style="letter-spacing: 3px"><u>Underlined text with letter-spacing.</u></div>
```
Terminology (original version)

คำศัพท์ต่างๆในจักรวาลของ *Checkmate (original version)*

* **ดัมมี่** (Dummy) คือปัญญาประดิษฐ์ (AI) หรือตัวละครที่ไม่มีผู้เล่นที่เป็นมนุษย์ควบคุมอยู่ ที่ถูกสร้างขึ้นมาภายในเกม มักใช้ในฐานะบททดสอบของนักเรียนที่ต้องการจะสอบเข้ามาในหลักสูตร Checkmate ของโรงเรียนต่างๆ
* **สมุดประจำตัวนักเรียน** (Student datapad) คืออุปกรณ์อิเล็กทรอนิกส์ที่มีลักษณะคล้ายเครื่องคอมพิวเตอร์ขนาดพกพา นอกจากจะทำหน้าที่เป็นบัตรประจำตัวนักเรียนแล้วยังมีฟังก์ชันต่างๆมากมาย โดยหลักๆแล้วมักจะถูกใช้ในลักษณะของสมุดจดเลคเชอร์ที่สามารถบันทึกข้อมูลได้มากกว่าพันล้านหน้า และใช้ในการเล่นอินเตอร์เน็ตทั่วๆไปเป็นส่วนใหญ่ นอกจากนี้ยังสามารถใช้เล่นเกม Checkmate นอกสถานที่ได้อีกด้วยเพียงแต่ไม่เป็นที่นิยมนัก เพราะจำเป็นต้องพกอุปกรณ์ VR ไปด้วย
* **อุปกรณ์ VR** (VR device) ในที่นี้จะหมายถึงอุปกรณ์ VR แบบพิเศษสำหรับเกม Checkmate โดยเฉพาะ ที่มีความสามารถในการจำลองการเล่นเกมได้อย่างสมจริงที่สุด สามารถถ่ายทอดประสาทสัมผัสทั้งห้าของผู้เล่นไปสู่เกมได้
* **ตัวหมากทรงอานุภาพ** (Mighty Pieces) คือชื่อเรียกของนักเรียนในหลักสูตร Checkmate ที่มีความสามารถอยู่ในห้าอันดับแรกของโรงเรียน ดูเพิ่มเติมได้ที่ Mighty Pieces
Miraikyō Academy (original version)

**โรงเรียนมิไรเคียว** (Miraikyō Academy,ญี่ปุ่น: 未来郷学園 *Miraikyō Gakuen*) คือชื่อของหนึ่งในโรงเรียนที่เปิดสอนหลักสูตร Checkmate แบบเฉพาะทางยุคบุกเบิกที่เปิดสอนมาอย่างยาวนานและมีชื่อเสียงมากที่สุดในญี่ปุ่น คำว่า *Miraikyō* มีความหมายว่า *ดินแดนแห่งอนาคต*

## Student council

### Member(s)

* Yoshida Yuki (President)
* Katayama Ayumi (Vice-president)
* Nanasaki Reimu (Secretary)
* Akiyama Kiyoshi (Treasurer)
* Utsunomiya Rie (Affairs manager)

### Occasional member(s)

* Kanzaki Asuna (Affairs manager assistant)
Countdowns

**Countdowns** are used to count down the days to a day or event of your choice.

They are an imported JavaScript feature. Here is the step-by-step tutorial on how to do this.

## Step One

Import JavaScript into your wiki (you have to be an admin, or ask an admin of that wiki to do this). Go to https://wiki-name.fandom.com/MediaWiki:ImportJS replacing **wiki-name** with the name of the sub-domain. Click on *edit* or *create source* then add the following code.

```
dev:Countdown/code.js
```

## Step Two

Then you can use it as follows in the source editor of an article.

{{{title}}}
{{{code}}}{{{title}}} Result
{{{result}}}
{{{title}}}
{{{code}}}{{{title}}} Result
{{{result}}}
You can see more info about it here.
CSS

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Warning: this page contains external links, please beware of where you click. We will NOT be responsible for your safety.
Additionally, we encourage you to exercise internet safety in all wikis.

## CSS3

CSS3 logo by World Wide Web Consortium (W3C)

### Wiki Support

Must be formatted as HTML or Wikitext style tags using inline CSS, or inserted into Common CSS (private or Wiki-Wide)

## Introduction

**Cascading Style Sheets** (commonly abbreviated as **CSS**) is a style sheet coding language used to predefine and modify a coded document written in a markup language like HTML. This article will focus on CSS3, the most recent and commonly used type of CSS.

## Development

CSS was first proposed in 1994, and again in 1995, when the World Wide Web Consortium (W3C) took an interest in CSS and began to adopt it. Later, a company called CERN updated and changed HTML and CSS so that CSS could be put into HTML documents.

Since then, CSS has become more and more common and has updated from CSS1 to CSS2, and so on until the latest version, CSS3.

## Usage

### How CSS Executes

Like HTML, CSS is a web-based coding language, meaning web browsers receive CSS documents from close servers and translate CSS into a display. If parts of the page are not specified, browser defaults will take over, such as how on FANDOM, we automatically have left align and black text. However, some attributes of CSS does not run on FANDOM unless in certain cases.

### Parts of CSS

CSS is made up mainly of attributes, however, CSS attributes aren't formatted the same as HTML attributes. Let's explore what attributes are and how they are formatted.

**Attributes** make up many visual codes and can re-define some visual aspect of a coded item.

In CSS, attributes are formatted as following:

```
item name {
 ATTRIBUTE: SPECIFICATION;
 ATTRIBUTE: SPECIFICATION;
 ATTRIBUTE: SPECIFICATION;
}

```
And so on, with semicolons (;) separating attributes and {}'s defining where the attribute specification starts. Below, we can see an example of this:

```
.test {
 color: orange;
 border: 2px dotted lime;
 background: green;
}

```

Now, if we want to, we can transfer this bit of CSS code into Wikitext code (this is also called **inline CSS**), these can be inserted directly onto wiki pages:

TEXT

The code for this looks as following:

```
<div style="color: orange; border: 2px dotted lime; background: green">TEXT</div>
```

See how it is almost the same as the CSS code, just without a name and compressed into one line? We can do this with most CSS code! If we just take away the indents and the **.test { }** part of it and replace that with **<span style="">** or **<div style="">**, we get Wikitext, or HTML!

## Recommended Sites

* W3 Schools
* Solo Learn
* Code Academy
* Pluralsight (subscription required)
* Code Pen (login required for saving capability)
* Replit (login required)

**See also:**

* CSS Gadgets
* CSS Animations
Backgrounds

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Quick Code

Copy to clipboard <div style="background:powderblue;">Text here</div>

## Introduction

**Backgrounds** are a HTML, CSS, and WikiText Attribute. This guide will teach you how to make a solid background (examples below).
If you want a Gradient, repeating (using Background Size), or Image background, go to the corresponding page.

## Background Code

Backgrounds are fairly easy, just add "background:\*color\*;" to your code.

Then, replace `*color*` with a Hex code, named color, or RGB/RGBA code

## Solid Color Backgrounds

The below examples show you how to make a solid-colored background with a div style tag. To use them, simply replace the color stated with a color of your choice! To make these into span style tags, simply replace all instances of "div" in the code with "span".

### Blue

Example:

Text here

Code:
```
<div style="background:blue;">Text here</div>
```

### Green

Example:

Text here

Code:
```
 <div style="background:green;">Text here</div>
```

### Hotpink:

Example:

Text here

Code:
```
 <div style="background:hotpink;">Text here</div>
```

### Cyan

Example:

Text here
Code:
```
<div style="background:cyan; color: #000000 ">Text here</div>
```

### Red

Example:

Text here

Code:
```
<div style="background:red; color: #ffffff ">Text here</div>
```

### Orange

Example:

Text here

Code:
```
<div style="background:orange; color: #ffffff ">Text here</div>
```

### Purple

Example:

Text here

Code:
```
<div style="background:purple; color: #ffffff ">Text here</div>
```

You can also add other attributes to your backgrounds.
Community

## LolManager Community

The League of Legends Manager community is a diverse community of all kinds of people situated around the world. Currently the community is growing larger as more people are attracted and shown the game. They discuss all sorts of topics in their only community forum and website based chat once signed up.

Community Forum
Text Align

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Quick Code

Copy to clipboard <div style="text-align: center">TEXT</div>

## Introduction

**Text align** is an HTML, CSS, and WikiText attribute used to change the alignment of text (and ONLY the text). It's commonly used for centering, but can also be used to right align or left align!

## How to use Text Align

To use Text Align, type in:

```
text-align:__
```

Fill in the blank with 'left', 'center', or 'right'!

You can also type in <center>, which centers the text too. Add </center> when you're done! Example:

Example!
The code for this:

```
<center>Example!</center>
```

## Examples

**Left-align text!**
The code for this:

```
<div style="text-align: left">'''Left-align text!'''</div>
```

**Centered text!**
The code for this:

```
<div style="text-align: center">'''Centered text!'''</div>
```

**Right-align text!**
The code for this:

```
<div style="text-align: right">'''Right-align text!'''</div>
```
Reference Tutorial

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Quick Code

Copy to clipboard YOUR TEXT<ref>Reference text</ref>

## Introduction

A **reference**, not to be confused with a Popup or Tooltips, is something that pops up when text is hovered on. They're mainly used to provide links to extra information, definitions, and notes, in articles. They look and work like the below text:

Click on the little number at the end of this text!

Depending on the wiki, longer references will not popup, you will simply be taken to the bottom of the page, where there is a list of all the references and the text that goes with them. Shorter references can also be found there. This tutorial will teach you how to make references!

## The Code

To make a reference, type in the following:

```
YOUR TEXT<ref>Reference text</ref>
```

The reference will show up as a number encased in []'s. The more references on the page, the higher the number of the shown reference.

## Using a Reference

References should be used sparingly, as they can make for a somewhat messy page! If you see a number encased in []'s, hover or click on it for more information.

## Reference Names

Using a reference name can group multiple references and putting them together on a reference list. Meaning that both texts would point to a single reference if you use the same name.

```
Text<ref name="a">Reference A</ref>
```

Would give you:

Text A

Text B

1. ↑ Example of a reference!
2. ↑ 2.0 2.1 Reference A
Custom Horizontal Line

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Warning: this page contains external links, please beware of where you click. We will NOT be responsible for your safety.
Additionally, we encourage you to exercise internet safety in all wikis.

Quick Code

Copy to clipboard <div style="display: flex; align-items: center;">
<div style="border-top: 2px solid color; flex: 1; max-height: 0;"></div>
<div style="color: hex code; font-size: 1.833rem;">˚ʚ ♡ ɞ˚</div>
<div style="border-top: 2px solid color; flex: 1; max-height: 0;"></div></div>

## Introduction

The <hr> tag in HTML stands for horizontal rule and is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. The <hr> tag is an empty tag, and it does not require an end tag.

There is two ways to do a **Custom Horizontal Line (external)** with any Cute Kaomoji (external), or any Emoji Symbol (external).

The custom line method used in this article utilizes a *border-top* to serve as a horizontal line, which makes it easier for users to customize the line.

This is what a basic Horizontal Line looks like:

Input

```
<hr>
```

Output

## Kaomoji Horizontal Line

You can copy and paste special symbols, such as Kaomoji from this external website.

### Heart Line

Input

```
<div style="display: flex; align-items: center;">
<div style="border-top: 2px solid #FF8300; flex: 1; max-height: 0;"></div>
<div style="color: #E30B5C; font-size: 1.833rem;">˚ʚ ♡ ɞ˚</div>
<div style="border-top: 2px solid #FF8300; flex: 1; max-height: 0;"></div></div>

```

Output

˚ʚ ♡ ɞ˚

### Star Line

Input

```
<div style="display: flex; align-items: center;">
<div style="border-top: 2px solid #FF8300; flex: 1; max-height: 0;"></div>
<div style="color: #E30B5C; font-size: 1.833rem;">꒰ა ☆ ໒꒱</div>
<div style="border-top: 2px solid #FF8300; flex: 1; max-height: 0;"></div></div>

```

Output

꒰ა ☆ ໒꒱

## Symbol Horizontal Line

You can also copy and paste certain emojis for decoration. If any emojis doesn't work through copy and paste, use HTML emoji codes.

### Emoji with Title Text

Input

```
<div style="display: flex; align-items: center;">
<div style="border-top: 2px solid #FF8300; flex: 1; max-height: 0;"></div>
<div style="color: #E30B5C; font-size: 1.416rem;">❤️️ Heart Line ❤️️</div>
<div style="border-top: 2px solid #FF8300; flex: 1; max-height: 0;"></div></div>

```

Output

❤️️ Heart Line ❤️️

Input

```
<div style="display: flex; align-items: center;">
<div style="border-top: 2px solid #FF8300; flex: 1; max-height: 0;"></div>
<div style="color: #E30B5C; font-size: 1.416rem;">⭐ Star Line ⭐</div>
<div style="border-top: 2px solid #FF8300; flex: 1; max-height: 0;"></div></div>

```

Output

⭐ Star Line ⭐
Text Modification

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

## **Bold Text**

The Bold text can be used in four different ways!

Here are the three different ways to use bold text:

* <strong>Insert bold text here</strong>, which gives you: **Insert bold text here**.

This method will only work with FANDOM coding.

* '''Insert bold text here''', which gives you **Insert bold text here**.

* <b>Insert bold text here</b>, which gives you: **Insert bold text here**.

* You can use 'font-weight: bold' in your <span style tag, which gives you:Insert bold text here.

## *Italics*

The Italic text can be used in four different ways!

Here are the three different ways to use italics text:

*1.* <em>insert italicized text here</em>, which gives you *insert italicized text here*.

*2.* This method only works with FANDOM coding.
''insert text here'', which results in *insert italicized text here*.

*3.* <i>insert italicized text here</i>, which gives you *insert italicized text here*.

*4.* You can use 'font-style: italic' in your <span style tag, which gives you insert italicized text here.

## Underlined Text

The Underlined text can be used in three different ways!
Underlined text in two different ways:

1. <u>insert text here</u>, which results in insert text here.

2.You can use 'text-decoration: underline' in your <span style tag, which results in insert text here.

## ~~Striked Text~~

The Striked text can be used in three different ways!

Striked text in three different ways:

~~1.~~
insert text here
, which results in ~~insert text here~~.

~~2.~~ <strike>insert text here</strike>, which results in Insert text here.

~~3.~~ You can use 'text-decoration: line-through' in your <span style tag, which results in Insert text here.

## Big Text

**How to:**<big>insert text here></big>, which results in insert text here.

## Small Text

**How to:**<small>insert text here</small>, which results in insert text here.

## Colored Text

The Colored text can be used in three different ways!

Three ways to do colored text (you can use HEX color codes, RGB/RGBA color codes, named colors, or HSV color codes for the color):

1. <font color="\*color here\*">insert text here</font>, which results in:

insert text here

2. <span style="color:\*color here\*">insert text here</span>, which results in:

insert text here

3. <div style="color\*color here\*">insert text here</div>, which results in:

insert text here
## Scripts

Subscripts and superscripts are used as exponents or side notes.

**Subscript:**<sub>insert text here</sub>, which results in insert text here.

**Superscript:**<sup>insert text here</sup>, which results in insert text here.

Something similar to subscripts or superscripts is a Reference!

## Code Format

This is used to reveal code tags (format code), which would otherwise be implemented as code.

Code:

`<pre> Code here </pre>`

Result:

```
Code here
```

## More Attributes

To see more ways to modify your text, look at attributes, or one of the below pages:

* Text Align
* Text Color
* Text Decoration
* Text Shadow
* Text Size
* Transform
Wiki Guidelines

## Basic Guidelines

* You can add any information you have about any topic you think it would fit the wiki.
* If you think some page is bad, don't remove it, or the content on it - improve it!
* Try to avoid marketing-mumbo-jumbo words when writing articles.
* Adding images to articles is always appreciated.
* Do not troll, spam or delete pages for fun.

That's it, welcome aboard. :)

## Editing help

* If the page appears short add {{stub}} tag to the top of the page, or search for more information on the topic from the internet.
* When adding information to the wiki, be sure to add references to the pages, images or videos you found the information on, so the facts can be checked by others easily.
* If you run into a problem with formatting or anything else, just ask. User:DjRapitops for example.

## Check also

* Image Guidelines
* Advanced Guidelines
Hex Codes

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

## Hex Codes

**Hex Codes** are a way to display a color. They also represent the RGB/RGBA colors, but they are displayed in hexadecimal (hex is short for hexadecimal, which is a number system just like decimal and binary).

Hex Codes are used in replacement of a color name, and can be customized. You can use a website to create a hex code, or figure it out yourself.

A hex code will look like this: #001122. It can have numbers and letters A-F. A represents 10, B represents 11, C is 12, D is 13, E is 14, and F is 15. The first two digits are the red value, the next two green, and the final two blue. #FF0000 would be plain red, because the red value is FF and the green and blue are 0.

Simple hex codes, like the #FF0000 can be displayed with only 3 numbers/letters, like so: #F00, as long as the ratio of the numbers and the letters stays the same--The two 'f's are represented by only one 'f', so the four '0's are represented with only two zeroes--so, the same ratio--the number of letters/numbers that each letter/number has stays the same.

If you are looking for a quick list of them, here's one:

You can also go to W3schools for a list of color names and their hex codes.

## Uses

Hex Codes are a widely used way of determining the color of your coding; add `color:[Hex Code];` to your string of coding and your aspiring masterpiece should be colored as well.

It can be used in determining the color of borders:

Code: <div style="border:3px #b3ff66 dotted;">Text Goes Here</div>

**Backgrounds:**

Code: <div style="background:#6699ff;">Text Goes Here</div>

**Text:**

Code: <span style="color:#008B8B;">Text Goes Here</span>

**Text Shadow:**

Code: <span style="text-shadow: 1px 2px 2px #008B8B">Text Goes Here</span>

<div style="box-shadow: 3px 3px #6699ff">Text Goes here</div>

**Linear gradient background:**

Code: <span style="background: linear-gradient(to right, #001f3f, #005E7D, #008B8B, #00A9A5, #00BCD4, #00CAFF)">Text Goes here</span>

**Radial gradient background:**

Code: <span style="background: radial-gradient(#001f3f, #005E7D, #008B8B, #00A9A5, #00BCD4, #00CAFF)">Text Goes here</span>

And more!

A full list of hex codes can be found Here.

## Supporting Links/Generators

* Random.org's Color Generator
* Google's Color Picker
* Color Codes
Floating Boxes

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

## Introduction

**Floating boxes** can be created by using the 'top', 'bottom', 'right', and 'left' attribute(s) for positioning the box. This is not to be confused with Float, which only deals with things INSIDE of a page, floating boxes can put things ANYWHERE on the entire wiki setup.
On pages, you can put boxes floating on the top of the screen like the one on the top right of your screen you see.

Hello! This is a floating box.
You can also add more coding for fonts, backgrounds, colors, etc!
**Code:**

```
<div style="position: fixed; top: 100px; right: 100px; padding: 3px; background:radial-gradient(blue, purple); border: 2px double white; width: 175px; color:white">Hello! This is a floating box.<br>Text Goes Here</div>
```

You can change the "right" to "left" to make it appear on the other side, and 'top' to 'bottom' to make it appear closer to the bottom of the page. The Color of the background can be changed or you could make it a Gradient (like it is right now). You can change the color of the font by doing the color code in the text because there is no spot for it in the code itself.

All the words beneath it will be put into the box until the coding is closed by an ending </div> tag.

This is a floating box with an image background!
Sometimes you can't include some attributes that you want in the code, or you've already coded something that you want to float. In that case, you can code something like a normal "box", and then make it float.

**Code:**

```
<div style="position: fixed; top: 100px; left: 100px;">Content</div>
```

**Example (With an image background):**

```
<div style="position: fixed; top: 100px; left: 100px;"><div style="border: solid 7px white; box-sizing: border-box; overflow: hidden; position: absolute; width: 100%; height:100px; max-width:250px">
<div style="margin:0px;">[[File:Night_sky_2.jpg|center|link=|250px]]</div></div>
<div style="padding: 20px; color: white;font-weight: bold; font-size: 15px; position: relative; max-width:250px">This is a floating box with an image background!</div></div>
```

Look at the top left of the page to see the box!

When using floating boxes in tabs, keep in mind that it will show up on *only* that tab. To make it always appear on the page, either place it outside of the tabs or place it separately on each tab (works in both tabview and tabber).
Swann triplets

The **Swann triplets** refer to **Isabel, Victoria and Justin Swann II**. They are the children of Justin and Margaret Swann and the nieces and nephew of Elizabeth, Jennifer and Alyson Swann. They are also eight years younger than their aunt, Alyson, being babies at the time they rescued Will Turner.

## Isabel Swann

### Biography

Isabel was born on the seven seas on the way to their new home Port Royal located n Jamaica. She was the first one born out of her other twins. At eight years old, Isabel's father moved into his own mansion he built and Isabel also is close with her aunt, Alyson because she is the only one who is considered a "child" there. Isabel was also present when Alyson got "kidnapped" by Jack Sparrow and Will Turner. Isabel also is orphaned when her mother passes away from an unknown illness and her father killed by pirates, which Isabel leaves to live with her mother's sister's family.

### Relationships

Isabel was close with both her mother Margaret O'Hara and aunt, Alyson Swann.

### Family

* Margaret (mother, deceased)
* Justin Swann (father, deceased)
* Victoria Swann (sister)
* Justin Swann II (brother)
* Unborn son (in the future)
* Weatherby Swann (paternal grandfather, deceased)
* Mrs. Swann (paternal grandmother)

## Justin Swann II

###