Layout, as defined by the Merriam Webster dictionary, is the design or arrangement of something: the way something is laid out. Layouts are also the outer appearance, design and placement of elements in web pages and graphical arts. Here in asianfanfics, layouts are understood as themes, templates formatted in an eye-cathing way and used for particular threads. Normally, it eases the navigation (though not all layouts possess that characteristic tbh sorrynotsorry even I make this mistake if I can refer to it as one) and gives a neater look on the threads. A layout in asianfanfics uses html and css for styling and positioning but layout designing is very distinct from coding because when you design, you let your imagination overcome you and you draw how you want it to look like on your mind whereas in coding, you let your logic and knowledge work and you encode codes that gives life to your design (in other words, make your imagination come true lol). There are actually tons of languages for websites that can be used and creates a more creative look on a page such as Java, JavaScript,  JQuery, MYSQL, PHP, ASP etc. But unfortunately, aff doesn't support those (even CSS3 isn't supported by the server which is so meh). Therefore, artistic talents are an advantage/elements for aff layouting. A coder, who has a graphical/multimedia talent, has an incentive than other coders who uses plain divs and the likes (but you can style divs like these and these). It is all about resourcefulness, strategic ideas as a substitute for things that can't be done in pure html and css. But for now, I'll be teaching you about tag/element/elements first.

Here is the structure of a table:

< table >
< tr >
< td >< / td >
< td >< / td >
< / tr >
< / table >

But in aff, there’s a button there where you can easily insert a table so you really don't need to code this manually.

< li > < / li > - Comes under the unordered list. Knowing these two (ul and li) essential helps when creating navigation bar for your website (but you also have to learn CSS).

< you >< / you > - You tag/element. This exists only in AFF. We can say it's a custom tag/element that works with the accompaniment of JavaScript. When you use this, whoever views that page will have his/her username written on that page, specifically on the space where you encoded the “you” tag/element.

Sample:

Hi! < you >< / you >

Output:

Hi!

< br / > - Break. Sometimes, to make everything better, you have to use the break.

O...kay what was that.

Anyways, this tag/element has the beginning and the end in it. You know what I mean? Yep it's a single tag/element that does not need anything between it. This tag/element separates your words into lines.

In the default editor, this can be achieved by using the shift+enter. No need to type it in the source.

< hr / > - Horizontal line. When I was a total beginner, I wondered how this works. Now, guess I could explain it already. This simply creates a horizontal line, as the name suggests. And that magical horizontal line let's your paragraphs or anything around it be separated (surely separation is a good thing sometimes) and lets you give different alignments to those paragraphs. Kinda cool no?

Sample:
 

Lorem...
< hr / >

Lorem...

Output:


Lorem...

Lorem...

See the magic?
 

< img / >- Image. This lets you put an image in your layout. Use the src="imglinkhere" attribute to add the image link, title="here" attribute to add a title that can be seen when you hover an image and also when preloading the image and the style="attributes here" to style the image. That title att. also works for a div or a text. Great huh?

Format:

< img src ="link.jpg" style="atthere" title="yo"  / >
title and style can be rumbled.

< iframe>< / iframe > - iFrame. A powerful tool that thank God works in AFF. This lets you embed music/playlist, YouTube videos and any other thing that AFF can support.

< span >< / span > - Span. Lets you format your text in a separate manner. For example, you wanna change the spacing of just a word, you should use this tag/element and place the breaking tag/element () on the end of that word and it'll be applied only to that word. But let's say you have a paragraph and you have used span for the whole text. That word will still adapt the attributes you've placed there as long as it's enclosed in the span tag/element. If not, that particular span style will only work on those inside it. Understood? A sample might help.

Sample:

< span style="text-transform:lowercase;" >HEY YO< span style="letter-spacing:-4px;" >Goooo< / span >< / span >

Output:

HEY YOGoooo
 

Don't freak out. I'll discuss what those stuffs are on the succeeding chapters.

< em >< / em> - Emphasize. It makes a letter, a word, a phrase, a paragraph, a number, or a set of numbers ITALICIZED.
 

< b >< / b > - Bold. Makes something bold. (I’m lazy to re-state what I have stated above orz).
 

< s >< / s > - Strikethrough. Draws horizontal line on a text.

(You really don’t have to manually encode these tags/elements though. I meant the em, b and s)

 

Did I forget to include something? Oh well but I also want to discuss that & nbsp; on your source code. That means non-breaking space and it lets you move one character to the right. And also some alt characters are transformed into actual characters. How do I say this. Hmmm... like those <> that becomes & lt; (less than) and & gt; (greater than) when you do something wrong eg. forgot to add one essential thing like "" or <> (it's annoying believe me. Everything becomes freaking words -_-).

And also, to give you more information, here is a list of deprecated HTML elements. But still, some of those are used here (AFF is completely old-fashioned in some sense haha).

Ahuuu so this is an introductory chapter. I have a lot to discuss and rant about on the next chapters!
 

I'll discuss attributes one by one. They're very essential for styling and formatting so stay tuned ♪

-RienRien, with love ♥