Fiction Description Editing: HTML Guide

#1
EDIT: HTML is not supported in V2.5.

So I figured I should create a thread detailing the steps and important information about how to edit your fiction description (or blurb, you know, whatever.).


Now, I am in no shape or form a professional at coding. I only know basic stuff that allow me to create this guide. Anything further than this is beyond me. Anyway, only this much is sufficient for your fiction description.

Unfortunately, I ran into trouble with the [.code][./code] tags. I was unable to fix the problem so I will not be using them.

All of my HTML Code examples will be in bold within two horizontal rules.

These are the things that I will be answering:

  • What is fiction description editing and why should I use it?

  • What is HTML?


  • Basics for HTML Code (Basic Structure):


  1. Basic Starting and Ending Tags 

  2. Basic Body Tags

  3. Basic Text Tags

  4. Basic Text Editing Code

  5. Basic Link Code


  • HTML Code Format for Fiction Blurb

If you have any questions about these basic HTML codes, feel free to ask.



Fiction Description (Blurb) Editing
What and Why?


Everyone wants their synopsis to catch the eyes of any potential readers, right? I'm the same. However, one of the problems is making your synopsis, or just the fiction description in general, have the capability to stand out. Some people try to accomplish this by either making their fiction blurb either really long or short. They also use lines like: ---------- or ______________ to create author notes (like myself). Well, what if there was a way to go a step further?

Fiction blurb editing allows you, the author, to spice up your fiction description/synopsis but changing the font style, text size, and text color. Not only that but you can also add links into your fiction blurb to outside webpages. Authors do this if they have their own website for their fiction or to another web novel site, like topwebfiction. I believe this answers the what and why question of fiction editing. Now, what about the how?



What is HTML?

Yes, that is the question. What is HTML? Well, HTML stands for: Hypertext Markup Language. Basically, HTML is a programming language used with websites all over the internet. HTML is the only coding we will use for Fiction Blurb Editing so there's no need to worry about any other coding languages. We will also only be using the basics of the HTML language, as Fiction Blurb Editing only needs that much. Now, onward to the basics!



Basics for HTML Code



Basic Starting and Ending Tags

Now, Tags are just what these brackets <, > are called (from what I know.). They can also mean entire coding tags, for example, a <head> tag. Anyway, when I type Tag(s), I'm referring to a certain code. Now, let's being.

Every single HTML document (in this case, code structure...thing.) starts with the Starting tags:




<html>

</html>




These two tags tell the computer that you are typing HTML code. That's basically it. These two tags are required for creating HTML code, so don't forget it.

Here is some CRUCIAL information: There are always two tags. I will give the same example as before:




<html>  (This here is the starting tag. This tells the computer where the code begins.)

</html>  (This is the ending tag. ALL Ending tags start with "</", don't forget that. This tells the computer where the code ends.)




Now that you know the Starting and Ending tags, time to move on to the next step.



Basic Body Tag


The Body tag is where we begin with the top of the hamburger. Think of the body tag as the top bun and lower bun which keeps everything together. There are some tags that belong before the Body tag, however, those are not needed in Fiction Blurb Editing.

Now, before I show you the code, I will tell you something. I will add on each new code with the original example. So, now that I will show you new code, I will add it onto the previous example. I will show you what I mean right...now!:




<html>

       <body> (This is your starting Body Tag! Your top bun!)

       </body> (This is your ending Body Tag! Your bottom bun!)

</html>




See? Now, for those of you that haven't seen coding before, don't freak out! I hope you've noticed that I indented the two new Body tags. Programmers indent new lines of code so they are able to see what they're doing. It wouldn't be nice to have a gigantic blob of text while coding, right? Indenting helps programmers keep order in their coding programs. 

Just as an extra little thingy: There is another way to keep track of your code in HTML. That is called Comments. However, you don't need them here. Just an extra note :).

Anyway, everything onward will be inside the two Body (<body> </body>) Tags! To the next step!



Basic Text Tags


After the Body tags come the meat of the code. This is where you will put your text! Woohoo! I will show you what I mean in the next example.



<html>
       <body>

              <p>  (Your Text here!)  </p>      (<p> Is your starting tag while </p> is your ending tag!)

       </body>
</html>


You notice that new string of code I put in? Yup! Those two tags are called the Paragraph tags. Oh? What's that? You mean that tag <p> is for Paragraph? Well, if you thought that, you're correct (I hope)! It's really just that simple. You can add as many <p> </p> tags as you want! Now, remember, tags ALWAYS come in pairs! Starting and Ending tags! If your code doesn't work, go back and look through to see if you've missed something in your code. This happens more than you think. Onward!



Basic Text Editing Code


We're almost done! This is where it gets a bit tricky, so try to follow along the best you can. If you don't understand what I put, just read the explanation inside the code or read what I type afterward. Re-read them if you still can't figure out. If you STILL can't, then ask a question in the comments. Now, for the first example:

(One last thing before I go! [This is future me]. Color and Font-size will ALWAYS be inside quotation marks, like so: " ". Don't forget that!)

Color



<html>
      <body>
               <p style="color: red"> (Your text here!) </p> (The {style="color: red"} addition allows the programmer to edit the text color!)
       </body>
</html>



You see what I did? I added a {style="color: red"} string of code after the first <p tag. Now, customization code usually goes inside the Beginning Tag. This tells the computer to change whatever text is inside the Beginning and Ending tags to whatever YOU commanded it to. For this instance, I changed the text color of the (Your Text Here!) to red. Obviously it didn't change because it's inside [.code][./code] brackets, but if it in an actual webpage or whatever, the text color would be changed to red.

Now, there are HTML code for each color. For example, a type of gold color is: "ffff33". <--That is an HTML color code for a gold color. It's easier to use HTML color codes, so just look them up on Google. It's not that hard, there's a lot of different, incredibly simple programs right on the webpage that allows you to choose whatever color you want.

Now, for the second example. For the sake of the example, I will be removing the "color:" code.



Size




<html>
       <body>
              <p style="font-size: 15px"> (Your text here!) </p> (The "font-size: 15px" changes the size of the text to 15px. More info. later.)
        </body>
</html>



The "style" code stays there, by the way!  The "font-size:" code allows you to change the size of your desired text! Woopie! However, don't make it too small or too large! Unless you want to make a mess of things. Also, your code will always stay the same whatever you do. The result of your code is what changes. If that makes sense.

So, if you change the text to 20px, the product text will be changed to 20px. The actual code will not be changed. So, rest assured. You won't have letters flying everywhere.




Bold, Italicize, and Underline


This next example will show you what HTML code to use in order to bold, italicize, or underline your text. For the sake of the example, I will not include the code from the 2 previous examples:



<html>
      <body>
             <p> <strong> <em> <u> (Your text here!) </u></em></strong> </p>

                                           (The <strong></strong> tags are for BOLD. You put them INSIDE the <p></p> tags!)

                                           (The <em></em> tags are for ITALICIZE. You put them INSIDE the <p></p> tags!)

                                           (The <u></u> tags are for UNDERLINE. You put them INSIDE the <p></p> tags!)
        </body>
</html>



I believe my explanation inside the code is enough, however, let me explain once again. The <strong> tags are Bold, <em> tags are Italicize, and <u> tags are Underline. They ALWAYS go INSIDE the <p> </p> tags!



Everything Together!



Now that you know how to edit, let's put everything together! I will put all the examples into one set of code for you to look at. Here we go!



<html>
      <body>
             
               <p style="color: red; font-size: 15px"> <strong><em><u>(Your text here!)</u></em></strong> </p>

       </body>
</html>



Now, you're wondering what I did to add BOTH color and font-size, right? I'll tell you. All you have to do is add a semi-colon ( ; ) in-between color: (color) and font-size! Both the color and font-size coding will be inside the SAME set of quotation marks! Don't forget that crucial piece of information!

Basic Link Code



Now we're here at last, the final lesson. This is for those that want to put links into their fiction blurbs for whatever reason it may be. Now, before I start, I feel like I am obligated to state that I am not responsible for anyone that implements links which link to pornography or other inappropriate websites. This is purely for educational purposes.

Now that we have that out of the way, we can continue (I hope I did that right). Anyway, here is the example for links:




<html>
      <body>

             <a href="www.google.com"> (Text Title for the Link!) </a>

       </body>
</html>



Now, I know what you're thinking. What does <a href have to do with links? I have no idea. That's just the code used for links. The <a href=" "> </a> tags are used for links. The text (Text Title for the Link!) in-between the tags is used to create a title for the link. So, for example, the link is for Google.com. Well, I could make the Title for the link be: "This link goes to Google!". It's as easy as that!

HTML Code Format for Fiction Blurb



Congratulations! Now that we're finally finished, I will give you all a basic HTML Code Format for you to use. You can play with it as much as you like to suit your needs. Just take away the parenthesis () inside the code and input the correct code for your own desired look! Here it is: 



<html>
      <body>
               <p style="color: (color); font-size: (size)px"> (Your Text here!) </p>
               <p style="color: (color); font-size: (size)px"> (Your Text here!) </p>
               <p style="color: (color); font-size: (size)px"> (Your Text here!) </p>
        </body>
</html>





Recommendations:

Only use 14-21px for font-size. Fair warning for anything beyond that.

**I discovered (With credit to another user) that you actually do NOT need <html></html> or <body></body> tags for this to work.

!!!Warning!!!

For some reason, using HTML to edit your fiction blurb messes up your "My Fictions" webpage. Just reload it a few times to get back to the normal webpage. This is a bug so hopefully it gets fixed whenever it does.

RE: Fiction Description Editing: HTML Guide

#3
Please mind that currently, our HTML support is limited, and while we do sanitize HTML to avoid XSS attacks, this doesn't mean you can't break your own fiction page or UFCP, like in a recent case - a missing " can easily change how HTML is interpreted and break JavaScript that is crucial for the site.

After we're done with the fiction reader update, our next focus is a completely revamped fiction dashboard that improves the user experience, gives you a better place to manage and follow your own fiction and gives you more information while is also capable of housing the new features we plan to implement. These updates come with massively improved HTML support. We're not quite sure yet, but BBCode support will be slowly reduced in the future in favor of HTML and a WYSIWYG editor for better UX, but we're still working on which way to do it.

This won't happen from one moment to the next though - at some point, submitted BBCode will get posted as HTML and when you edit your post, they will appear as HTML. Probably. I'm not keen on maintaining legacy support indefinitely.

I've added the sanitizer to the UFCP too now - normally there is no need for this, as we don't quite care how you try to do XSS against your own account (it doesn't change a thing), but this should help to mitigate issues with unclosed or mismatched tags.

RE: Fiction Description Editing: HTML Guide

#4
Are you sure that it's a good idea to add a complete header? <HTML><BODY> should be defined once I think. It wrecks the Html validation. And it's dirty… Like you never should have two of these. Its just wrong. (Defined in the template itself)


https://c04.imgup.net/signature46d7.jpg


Roses are red, Lilies are blue... I cant write poems, read this kindly to.

Withered Roses, Dead Lilies, I still cant write poems, but I can do this. *smashes this in your face* ... I got to much time.