Advertisement

Choose Your Background

  • Noah Bradley: A place to call Home

  • Noah Bradley: Their Mournful Tones



Comprehensive Coding Guide for the Updated Website (HTML)

#1
Author Note: This guide is almost finished. Visual Table Editor (100% complete), General Coding (90% complete), Table Coding (100% complete).

This guide will be updated and maintained as I, or others, discover new information.

Important! This does not currently work inside the forums. The forums still use the old BBcode and have not been updated to match any of the fiction-related HTML. I repeat, do not use this guide inside the forums.
****
Hey everyone! I finally got around to messing with the new HTML coding, and I realised that there wasn't any real tutorial on the changes in the new update. In this guide, I'm going to explain what changes have happened and how to use the new changes.

If you want to test out your coding, as an author you can start a draft chapter (located on the author dashboard) and test your code out there. Select 'preview' to see how your coding looks when it is published. You can keep the draft you've made to use for any coding in the future by selecting 'save draft', or simply close down the page and start up a new one in the future.

For non-authors who want to test out their code, feel free to piggy-back on my Author Information chapter. Just make a single post in there and use the edit function to try different kinds of code. Do not make more than one post, otherwise you will clog up space for others. Extra posts will be deleted.

Feel free to ask questions in the comments section. I'll answer them when I can. If you have a better coding solution for anything in here, let me know.

All the code in this guide has been verified. If something goes wrong it's possible I've made a mistake, but more then likely it is a problem on your end. Either way, feel free to post your problem in the comments section and I'll take a look at it.

So for starters, let's give you an overview of the changes:

1. HTML is now the standardised coding form. BBcode is still supported, but the support will be removed at a later date. You'll have to use HTML sooner or later, so it's better to tackle this problem now.

2. You can no longer directly code within the editing section. That functionality has been removed, and any code will only be considered text. Instead, you now have access to a visual table editor inside the editing section itself. This can be accessed in the 'Table' part of the tools section. More information is provided further down.

3. To code directly, you have to access the source code. The source code can be accessed on the far right of the tools provided in the editor, or in the 'Tools' part of the tools section. When the code you have made is placed inside the source code, it will act just the same as if you had created it using the visual table editor. More information will be provided further down.

4. This guide is separated into three major sections. Visual Table Editor, General Coding and Table Coding. Read the section(s) suited to your needs.

[Image: ab747f54ba.jpg]
[Image: 9e1fcb9de9.jpg]
[Image: eeca37f90f.jpg]
Reply
#2
I should put the coolspan or strong first?
Reply
#3
(05-04-17, 10:06 PM)Drovak Wrote: I should put the coolspan or strong first?

coslpan and strong have two different intentions. But to put it simply, colspan is always first. However, that would also be an incorrect statement. Let me explain them individually.

<strong> covers a block of text in order to bold it. So you would do <strong>whatever text you wanted</strong> in order to bold the specified text in your chapter. Example: <table><tbody><tr><td><strong>Hello!</strong></td></tr></tbody</table>

colspan, on the other hand, is used to determine how many columns a single cell has. It isn't related to the text, but the table itself. colspan always goes inside the <td> tag in order to tell the <td> tag how many columns it has (unless your <td> has only one column, which is the default option). For example: <table><tbody><tr><td colspan ="4">Hello!</td></tr></tbody</table>

So because the <strong> tag is related to text, and text is inside the <td> tag, technically colspan comes before <strong>. Like so: <table><tbody><tr><td colspan ="4"><strong>Hello!</strong></td></tr></tbody</table>

However if, for any reason, text was placed outside of the <td> tag, then the <strong> tag would come before the colspan. Colspan and <strong> have different intentions. Colspan is related to the table itself, specifically the <td> cell size. <strong> is related to the text in the finished property, bolding any text that is encased within the tags.
Reply
#4
Very niece. Probably really useful for authors. But I think you got a few things mixed up.

First P isn't used to create a new line but to mark a paragraph. True, it will give you a new line at the end of an paragraph, but in most cases it's overkill. Plus it can look weird if the css makes the margin/padding between paragraphs to big.
I think you might have gotten it mixed up with the tag <br>, or the xhtml version <br />. Br is what you really want to use every time you need a new line. P is used to group the text into rough parts.

You should also mention the b (bold) and i (italic) tags. They look the same as strong and em but are usually used in slightly different cases. Strong and em usually are used for structure while b and i for design. The line is a bit blurry but for us end-users it would be great if we could use the shorter ones. Would be great if a Dev could tell us which one exactly we should use and how their conversion tool on the server side treats them.

From a technical point of view another noteworthy tag would be div. Don't think that many authors will use it but you could do some pretty sweet things with it and some css. (Some sort of UI maybe?)

Oh, and what about the style tag? It would allow authors to choose their own fonts and colors for their chapters. Again, I don't have access to a PC right now, but could someone else's maybe test it?

At least that's what I would say from my own experience as a WebDev. RR might be blocking/replacing some of these tags and I didn't have time to test if they all work. Would be great if someone could test them.
Reply
#5
Hello... my source code is not working. Please help!
Reply
#6
(19-08-17, 08:46 PM)Sushi Killer Wrote: Hello... my source code is not working. Please help!

Hey! Can you elaborate? What isn't working with the source code? Also post the source code so I can have a look through it.
Reply
#7
Is there a quick way to get a section to be single spaced? I've tried evey Unicode character I can think of for new line/break/carriage return/etc, and when they are pasted into RRL they are all interpreted as <p>/paragraphs. This of course means I can't have single spacing without returning to convert every <p></p> pair manually into breaks.

Is there anyway around doing this? Can you set the paragraph spacing anywhere besides CSS?
Reply
#8
(17-11-17, 04:15 AM)Volos Wrote: Is there a quick way to get a section to be single spaced? I've tried evey Unicode character I can think of for new line/break/carriage return/etc, and when they are pasted into RRL they are all interpreted as <p>/paragraphs. This of course means I can't have single spacing without returning to convert every <p></p> pair manually into breaks.  

Is there anyway around doing this? Can you set the paragraph spacing anywhere besides CSS?

<br /> at the end of a line will act as a 'break' moving the next statement onto a new line.

so two <br /> at the end of every paragraph will add a single line of blank space before starting the next line of text. That is how I do spacing, it's the quickest way I've found (you're just copying and pasting the same code at the end of every paragraph).

Does this help? Or is your problem something else?

Edit: I think I'm misunderstanding your question. If that didn't help, can you link me your code. it'd be easier to have a reference.
Reply





Users browsing this thread: Nimodoc, 1 Guest(s)