Basic HTML

by PerforatedPenguin

<< All Articles | Print

Note: if you're using the extension, you'll need to disable it to follow this.

2020, update version 20200005: The default editor was switched from RTE (rich text editor) to just basic plain text with HTML. This can be changed back in your profile if you like simply by clicking a box. If you haven't used the RTE before, it has selections for things such as Bold, Italics, strikethroughs, underlines., or all of them. There are also images and links.


Now you may be asking, if the RTE offers such a variety of different choices to play with your text, why did the default get set to Basic? Well, it turns out that RTE has an abundance of problems.


  • The time outs. If one leaves a page up in the RTE, after a set amount of time, the editor will refresh, and if the work wasn't saved yet, it could be lost forever.
  • The images. The RTE is the master at ruining images, stretching them out until they peek out of your forum post, eating the images entirely in storygames, etc.
  • If you have problems with the RTE and decide to turn it off in the middle of a game you're working on, it will make turn it into a nightmare. There are strings of special characters used in place of many punctuation marks, and the switching of fonts in particular will make your game a mess.
  • This is only applicable to some people, but RTE replaces plain text characters such as quotation marks with special characters to make them fancier, which can ruin scripting. Having things such as items and variables while using RTE is harder than the 12 labors of Hercules.
  • The lag. The RTE isn't technically a part of the site, it's just a plug-in that has to load from elsewhere. If you have a slow connection, any time you try to make a forum post there could be a delay in the message box loading.
  • The appearance is cluttered and some find it displeasing, especially those dealing with the bright white box while using dark mode from the extension.

That would be the major reasons why RTE was abandoned. If you are still unfazed by the list, go ahead and close out of this article and turn it on in your profile. It's actually fine for forum posts and simple games if you aren't using images. However, be aware that many of the more prominent members on the site use HTML, making it difficult to help you with your game which to them in the editor will look like the utter mess I mentioned before.


Assuming you want to learn some basic HTML, lets jump right in. Luckily it's easy.


Syntax

Might as well as get this out of the way, HTML has a specific syntax, called tags. These tags define what you want this text, image, or link to be like.

Most or all of HTML tags are as follows:

<Starting Tag>Text</Closing Tag> If you've used Rich Text or BBCode on other forums, basic formatting such as bold text should be even easier. [b]TEXT[/b] simply becomes <b>TEXT</b> And the same for the other most common tags you'll use. Again, all of the tags must be enclosed in these, called greater than/less than symbols in math: <example> And every tag followed by the affected text must be followed by the same tag with a backslash: </example> There are other attributes that only apply to certain tags such as images or links. You can even stack tags, like this: <b><u>text that is both bold and underlined</b></u>

<p> and <br>

This isn't needed in all cases, but if your spaces between paragraphs are disappearing and leaving you with an illegible text wall, there are tags to manually fix the formatting. The easiest way to write this is using the

<p> tag or the <br> tag. The <p></p> signifies the beginning and end of a paragraph, and the <br> tag signifies a line break. Note that <br> doesn't need a closing tag like the others. <br> can be used to add line breaks, like this:




That big space was <br> three times in a row Every one you add moves the following text another line down. Stack two of them for a space between a paragraph.

You could write text without any of these, but it would just be a text wall, and those are hard to read. In a storygame that would lead to low ratings.


Bold, Italics, Underlines, and Strikethroughs

Probably the most used style tags, here they are:

Bold: <b>Text</b>

This text is bolded!


Italics: <i>Text</i>

This text is Italicized!


Underlines: <u>Text</u>

This text is underlined!


Strikethroughs: <strike>Text</strike>

This text has been struck through!

(Note that this only works on older sites like CYS. Tragically, it is no longer supported on many others.)

Links

Links are a great convenience! Whether it is used to rickroll people, or to just make your post much better. To create a link, you use the a tag:

<a href="URLaddress.html">give it a title</a>

What the heck is href? It stands for Hypertext REFerence. This is just the web address of the place you want the link to lead to. The display text is what shows up. If you did not fall for my rickroll up there, good job. This is what I used to create that:

<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">links</a> If links seems complicated to remember, just save an example of the HTML somewhere convenient and when you need to post a link, copy it over and plug in the new URL that you want to use.

Images

The syntax for these is:

<img src="WEB ADDRESS.jpg">

Make sure to include the file extension, usually .jpg or .png. There are ways to add alt text that will appear for a blind person using a reader or when you hover your mouse over the image, and there are ways to set the width and height to something specific, or to set it to match the screen width of whatever device a person is using, but the basic posting of an image is simply the above.

This is just personal preference, but I find it more pleasing to the eye if the image is not crammed up against the preceding or following text. I suggest using

<br> a couple times before an after an image.

For Example:



That would be all, thank you for reading, good luck!