Let's start by changing the colour of text. This tutorial can already be found on the Beginner Coding page, so this will only be a brisk refresher. The standard structure for colouring is this:
<font color="[insert colour]">
Where [insert colour] appears is where you should type the colour you want, which you can do by simply typing the name of the colour, e.g. "red", or typing "#" followed by the hexadecimal code for that colour, e.g. "6F92AE". Obviously just typing names is easier, but using hexadecimal codes allows you to use custom colours rather than just the predefined colours.
So for example, the code <font color="green"> Pineapple </font> turns "Pineapple" into:
If you're really good, you can even make a rainbow.
You probably know about links already, but another way to link to pages is to create. To create a button, you type this:
<span class="button">[text on button]</span>
Replace the [text on button] with the text you want to appear. For example, if you want the button to say "Hello world!" you type this:
<span class="button">Hello world!</span>
And it will turn into this:
That button is pretty much useless. You can actually make the button link somewhere by typing a link, like this:
<span class="button">[[Beginner Coding]]</span>
And that will turn into this:
As always, you can do ANYTHING you want inside the link, like renaming it.
Font Styles Edit
There are four different font styles here on Wikia: bold, italic, underline, and
strikethrough. Wikia has a built-in function for the first two, plus you're more likely to use these two, so we'll go through those first.
Bold & Italic Edit
To make a string of text bold, all you have to do is type three separate apostrophes (' ' ') on each side of the text. Simple. If we take the string "banana phone" and type ' ' 'banana phone' ' ' , the string becomes:
In HTML, the same effect can be achieved using the <strong> tag,
Italicising a string of text is very much similar, but instead of typing three apostrophes (' ' '), we type two (' '). These are not to be confused with speech marks (") - they are two separate apostrophes. If we take the string "banana phone" again and type ' 'banana phone' ' , it becomes:
The tag for doing this in HTML is <em>.
If you want to use combined bold and italic text, just do the obvious math: 2 + 3 = 5! With a full five apostrophes, taking the string "banana phone" once more, we can type ' ' ' ' 'banana phone' ' ' ' ' and it'll become:
IMPORTANT NOTE: The apostrophes in the examples are spaced out for easier reading. Don't put spaces between the apostrophes when actually doing this.
Underline & Strikethrough Edit
Underlining takes a little bit of code to perform, since Wikia doesn't have a native function for it. Instead, we use a HTML function, like we did with <font>. This time, however, it's a lot easier. The code is going to look something like this:
To underline, we just use the above code as it is, obviously replacing "Sample Text". To strikethrough, we replace <u> and </u> with <s> and </s>.
Let's take the string "Clown Party" as our example. If we want to underline it so that it looks like:
we should type:
Likewise, if we want to strike through it so it looks like:
we should type:
The two can also be combined like this:
which gives you this:
If you do use both, it's important to make sure that whichever way around you place the tags at the start, you place them in reverse order at the end. Using <u><s>Clown Party</u></s> will not work.
Font families/faces Edit
Normally us humans call changing the style of text "changing font" (e.g. Comic Sans, Times New Roman etc.), but that can be pretty awkward when we're coding because the whole tag is called "font". Fortunately, Wikia uses the more technically accurate name for a font, the typeface (or just the face), so confusion is avoided. To change the typeface of text, we use:
<font face="[insert face]">Sample Text</font>.
Simple, really. As with earlier examples, simply replace [insert face] with whatever typeface you choose. For example, if I wanted to change the face of the text "this text looks fancy" to Fantasy, I'd type this:
<font face="comic sans ms">this text looks fancy</font>
which would look like this:
this text looks fancy
Below is a table of faces that Wikia supports (or at least I think it does).
NOTE: If some of the face examples just look the same as the others, that's because either whatever browser or device you're using simply doesn't know what that face is, or I'm just stupid and Wikia doesn't actually support it. If the same face doesn't show up properly on a desktop, laptop or notebook, it probably needs removing, so let me know ASAP. (You can click my name at the bottom of this article, in my signature.) If it doesn't show up properly on a tablet or somesuch, it's less urgent, but still useful, so let me know anyway.
|Family||Example (browser dependent)|
|serif||The quick brown fox jumps over the lazy dog.|
|cursive||The quick brown fox jumps over the lazy dog.|
|fantasy||The quick brown fox jumps over the lazy dog.|
|monospace||The quick brown fox jumps over the lazy dog.|
|Palatino||The quick brown fox jumps over the lazy dog.|
|Impact||The quick brown fox jumps over the lazy dog.|
|Comic Sans MS||The quick brown fox jumps over the lazy dog.|
|Courier||The quick brown fox jumps over the lazy dog.|
|Verdana||The quick brown fox jumps over the lazy dog.|
|Georgia||The quick brown fox jumps over the lazy dog.|
|Pusab||The quick brown fox jumps over the lazy dog.|
(P.S. Wikia's standard typeface is Helvetica. It's not included in the table, for obvious reasons. If you don't get the reason, it's because this font is the default font.)
Multiple <font> attributes can be defined in one tag to avoid clutter. Doing this is relatively simple:
<font [attribute1]="[value]" [attribute2]="[value]">
That's it - you literally just put them next to each other in the tag, with a space between. As an example, let's say I wanted to take the phrase "Hats are awesome.", make the typeface Fantasy and turn the text dark red. I'd type this:
<font face="fantasy" color="DarkRed">Hats are awesome.</font>
The above code creates this:
Hats are awesome.
Don't forget bolding, italicising, underlining and
strike-throughs can be wrapped around anything without disturbing the code.
Hats are awesome.
I did the above by typing this:
<u><font face="fantasy" color="DarkRed">'''''Hats are awesome.'''''</font></u>
Don't worry about it. Just keep looking through until you get it, and if that doesn't work, just ask AXBOIvsWIKIA (who wrote this article) or anyone else on this site, who will all be happy to help you. If I've missed something major out, just tell me and I'll fix it. Practice makes perfect! There are two sandboxes dedicated to practicing.