Very Basic Coding

The basics of the basics

...Like so basic we aren't even covering font colors yo

Here is a break down tutorial and list of basic codes for authors to spice things up a tiny bit on their writing!

This is mostly for authors like me whose laptop died on them and all you have your phone and the mobile app to format your stories... *sniffles*

...I swear I'm not salty Q×Q

MOVING ON xD

Feel free to copy and paste any of the codes below!

First and foremost, to even begin coding, if you're using the default AFF Text Editor, CKEditor 4.6.2 (found below your Save Changes button), simply click at the top left corner with the little picture that's a paper and the <> signs and says Source. You can find this to the left of the clipboard paste button.

If you haven't written anything for your story, it should be completely blank. For the purpose of this tutorial, switch back to the regular side that you're used to seeing when you type out stories. You can do this by clicking Source again. Type out a single word or sentence, then click Source. You should see things that might confuse you if you've never coded in your entire life lol

If you have written stuff for your story, there's probably letters and signs before and after your text that you stare at like wtf is going on.

No worries. Either way, I got you. Don't panic and please proceed to our first lesson section lol

IMPORTANT NOTE: Ignore the spaces at the p's I'm putting. The code disappears when typed out on the regular typing space, the one not on Source. For you to see the code, I have to add a space. When using the codes if you're copy and pasting, do not forget to remove the spaces or it won't work!

Understanding What The Hell You're Looking At

An example of what you might be staring at when you open Source (remember, without the spaces at the p's!):

< p>EXO is life. I like potatoes.< /p>

The sentence, word, or paragraph you typed out is between these random p's and signs.

These p's are for your paragraphs!

Notice how the ending has a forward slash

This is very important once you code for real like for hours on end making a layout or whatnot. It can screw you over sometimes. Other times your is saved because the codes will close paragraphs for you - but don't be lazy and try to rely on this just in case!

So! This forward slash tells your code that you're done with this paragraph.

Remember, you finish what you start. Always!

So, the starting of your paragraph coding will always look like this:

< p>

Ending of your paragraph coding always looks like this:

< /p>

You feeling better?

Good ♡

When you start coding like we will do soon, you're going to see more codes that will overwhelm you at first.

Here's the break down that's all you need to know without questioning what code means what lol It will make more sense once we begin, but I wanted you to be familiar seeing it already.

To start out coding your paragraph, you need to add a couple of things!

Beginning your code, you will type out what's below without the space:

< p style="

Now if you're curious, think of this beginning code like an open parentheses. Following this "open parentheses" will be your codes. I'll show you later how to close the bracket when we delve deeper.

And for your brain's sake of connecting pieces together to remember things, p is for paragraph, right? So, p style means coding to style your paragraph lol It seems duh for now, but we'll get into it more later.

Now, let's begin to get into the actual coding now that that's out of the way!

Changing Fonts

Font Size

Using my stupid example sentence again, we will be changing its font size. For this example of changing font sizes, we will change the sentence to size 16 font so we can clearly see the magic happen.

Our original text without font size:

< p>EXO is life. I like potatoes.< /p>

Adding in the font size (remember that open bracket we talked about!):

< p style="font-size:16px;">EXO is life. I like potatoes.< /p>

Again. Don't panic. It's a lot to take in lol

px stands for Pixels. It's a measurement. (i.e 5 grams, 10 fluid ounces, 2 meters, etc.)

Why the dash? Why can't we put a space between font size? Because, young coding grasshopper, we have to connect codes so it doesn't get confused with spaces. Spaces in codes is like a division leading into your next code to input. You'll see an example later. Promise.

See after our font size? We put ;">

; Will be like your comma so you can list out your codes. You can place another code after the semi-colon as many codes as you want. Just don't forget to add the semi-colon and a space after each code!

"> Is your closing of the code. It means you're done with your list of codes and you have nothing more to add. This is your code's "closing parentheses."

< /p> Now means you're just done with this paragraph entirely.

It's like math when you had something like [100(1+1)]. "> is like the closing parentheses while < /p> is that closing bracket to end the equation.

Your text when you switch back out of Source, should look like this!

EXO is life. I like potatoes.

Big difference right? Ha. So punny.

When changing font sizes, simply change the number. The rest of the code stays the same. That's all there is to it!

Note:

With this method, there's technically nothing stopping it. Meaning, if you leave your first sentence this way then hit the Enter key to start a new sentence or paragraph, this code carries to the next paragraph and so forth. This is a good thing so you don't have to input the code every single time you start a new line or paragraph.

I'll teach you much later in the next chapter probably how to stop it, so it stays with that one sentence/word/paragraph! It's has a bit more to it than this.

Onto the next mini section!

Changing Fonts

Font Family

Using the same code pattern, we can also change the font itself to another!

Default font appearance:

EXO is life. I like potatoes.

Adding a font family to your code:

< p style="font-family:Palatino;">EXO is life. I like potatoes.< /p>

Magic!:

EXO is life. I like potatoes.

Changing Fonts

Lessons put together!

As said, let's take Lesson 1 & 2 and put the codes together.

Using the semi-colon as a comma, the codes in combination would be typed out as:

< p style="font-size:16px; font-family:Palatino;">EXO is life. I like potatoes.< /p>

Again. Remember to delete the spaces only at before the p in < p style=" then delete the space before the forward slash in < /p>.

Tip: Do not delete the space after your semi-colon between font size and font family. It gets really confusing and hard to find codes you need to edit when you go back to them once you got a lot going on. However, the code still works if you remove the space. It's a matter of preference...and saving your eyes from straining lol

Now, the sentence looks like this:

EXO is life. I like potatoes.

Just like before, you can swap out the font for something else (i.e Calibri, Arial, Comic Sans, etc) and you can change the number of your font size to any number.

Extra Codes

If you're stuck formatting your story on your phone like I am, you'll probably need the codes below since the mobile app doesn't have all the nifty convenient buttons like it does for desktop.

I will show an example of before and after of everything together at the end of this tutorial and code list.

These codes are stand alone. Meaning, they don't need any of the starting codes inside of their <> when using then.

Horizontal Line / Line Break

< hr />

Remove the space before h

Single Enter Space...thing. Yeah.

On the mobile app, using the editor, the Enter key on your phone makes a double space enter for a new paragraph. If you would like a single space, the code is:

< br />

Remove space before b

Double Space Example:

EXO is life.

I like potatoes.

Single Space Example using code:

EXO is life.
I like potatoes.

The Single Space Enter code must be inside your paragraph. (Sorry for the different sentence. Got tired of potatoes xD)

Example:

< p>"NCT Dream The Love" said Haechan sunshine.< br />

"NCT Dream IS love" corrected MarkuMarku.< /p>

Appearance:

"NCT Dream The Love" said Haechan sunshine
"NCT Dream IS love" corrected MarkuMarku

Tip: You can use as many < br /> as you want. Typing them twice, one after the other, < br />< br /> makes two single space lines, etc.

Let's slap everything altogether now!

Coding Paragraphs:

< p style="font-size:18px; font-family:Palatino;">Real Fun Fact!< /p>

< hr />

< p style="font-size:15px; font-family:Palatino;">< br />

I was editing my story Be Mine while doing this, and I literally typed out during a scene that Chanyeol's black hair was like 100% cacao dark chocolate.< br />

< br />

I have no regrets. I'm not looking back lmao I snorted and I think it ruined the scene because I can't take it seriously. I'm leaving it tho idc xD< /p>

< hr />

< p style="font-family:Calibri; font-size:12px; More random sentences for examples! Excluding potatoes!< /p> 

< hr />

< p style="font-family:'Courier New';">Thus, Mark and Haechan agreed upon one idea as they smiled at one another. Smirk versus grin. They knew without exchanging words.< br /> 

NCT Dream will always be home to them. No matter what.< /p>

Paragraphs' Appearances:

Real Fun Fact!

I was editing my story Be Mine while doing this, and I literally typed out during a scene that Chanyeol's black hair was like 100% cacao dark chocolate.

I have no regrets. I'm not looking back lmao I snorted and I think it ruined the scene because I can't take it seriously. I'm leaving it tho idc xD

More random sentences for examples! Excluding potatoes!

Thus, Mark and Haechan agreed upon one idea as they smiled at one another. Smirk versus grin. They knew without exchanging words.
NCT Dream will always be home to them. No matter what.

Code List From This Chapter

All the codes used today are in a template form for your convenience. You may copy and paste them, then fill out the rest yourself ^^ Good luck ♡ Ask me anything if you have questions!

< p style="font-size:Enter#Herepx;">Enter text here< /p>

< p style="font-family:EnterFontHere;">Enter text here< /p>

< p style="font-family:'Enter Font Here';">Enter text here< /p>

< p style="font-size:Enter#Herepx; font-family:EnterFontHere;">Enter text here< /p>

< br />

< hr />