the unofficial HTML help thread

feel free to practice your HTML in the comments below!
updated: 1/19/2024

table of contents

➜ the basics
code opening + closing: bold, italic, underline, strike, blockquote, spoiler
➜ fonts + headers
changing the color, type, alignment and size of your font
➜ images
image hosting, posting, resizing, and more!
➜ links
making clickable words + images
➜ combining codes
using what you learned in the steps above.

the basics

notice: remove the asterics * from the codes before use.

➜ code opening and closing

before we begin, you need to understand the most basic rule of coding: each code, in order to work properly, must have an opening and a closing. The opener defines where your code begins, and the closer defines where you want your code to end. Forgetting one or the other can mess with the rest of your code: forgetting to close a link, for example, will turn the rest of your post into a link. Openers are typically defined with a <* > symbol, where closers are typically defined with a <*/> . There are some cases where you don't need to worry about closing your codes, but it is generally good practice to remember to close it.

➜ bold

This is a normal sentence. This is a normal sentence, but in BOLD.
code: <*b>your bold statement goes here.<*/b>

➜ italics

This is a normal sentence. This is a normal sentence, but ITALIC.
code: <*i>your italic statement goes here.<*/i>

➜ underline

This is a normal sentence. This is a normal sentence, but UNDERLINED.
code: <*u>your underlined statement goes here.<*/u>

➜ strike

This is a normal sentence. This is a normal sentence, but STRIKED OUT.
code: <*s>your striked out statement goes here.<*/s>

➜ blockquote

This is a normal sentence.

note: blockquotes will break in tables like the one its in. the only fix ive found is to create a new table inside of the blockquote. If you're not putting a spoiler into a box code, you do not have to worry about this.
code: <*blockquote>your quoted statement goes here.<*/blockquote>

➜ spoiler

This is a normal sentence.
note: spoilers will break in tables like the one its in. the only fix ive found is to create a new table inside of the spoiler, which will reveal a new box when clicked. If you're not putting a spoiler into a box code, you do not have to worry about this.

code: [*spoiler]your spoiled statement goes here.[*/spoiler]

Q: can I change what the spoiler button looks like?
A: not on forums :(

fonts + headers

notice: remove the asterics * from the codes before use.
- = - = -

➜ headers

about headers: there is nothing you can do to style headers in forum posts. I 1000% reccomend you play with font sizes instead if you want to get fancy. The only way to style headers (changing their color, font, size, etc.,) would be through css which is extremely limited in forum posts. Below are the example sizes and styles of each.
code(s): <*h1>header one<*/h1> , <*h2>header two<*/h2> , <*h3>header three<*/h3>

➜ font color
There are a few ways to change color! Below are two different codes you can use to change the color of your text. Please be aware of readability when choosing font color - I bet you had a pretty hard time reading all of the words in the first sentence of this section. Could you imagine trying to read the entire post like that?
code one: <*font color=red/orange/yellow/etc>Your sentence goes here.<*/font>
code two: <*font color=#HEXCODE>Your sentence goes here.<*/font>

➜ font size

Font size will differ from 1 to 7, with 1 being as small as can be, and 7 being larger than most headings.
1 2 3 4 5 6 7
code: <*font size=0>Change the 0 from any number between 1 to 7.<*/font>

➜ changing fonts

Changing your font can sometimes be its own monster, and requires a different sort of code, which I refer to as "p styles" for. obvious reasons. These style entire paragraphs, and can be edited in various ways which we will touch more upon beneath "combining codes".

Lets change your font.
code: <*p style="text-align:center;font-family:Constantia;">"Constantia" can be changed to a set of various different fonts to give it a unique style. Be warned, not all fonts will work here. However, fonts like Georgia, Times New Roman, and Comic Sans can all be used on Lioden.<*/p>

This is another option, and requires less work - although, only comes out looking like this. It's called Typewriter Text.

code: <*tt>Would you believe I've been here 10 years and had no idea this existed?<*/tt>

images

notice: remove the asterics * from the codes before use.
- = - = -

➜ hosting

In order to post images, they must be "hosted" somewhere - what this means, is that images saved to a device (like in your pc image folder) must be posted to a hosting site like imgur so you can access the Image URL. I'll be using Imgur in my examples of how to find your image url. The easiest way is to right-click on the hosted image, and scroll down to "copy image address". However, imgur will also give you the "direct link" without the necessity of right clicking if you don't have the capability for whatever reason. If that doesn't work, you can also drag the image into a new tab, and copy the link in the searchbar.



➜ posting

Once you have your Image URL/Image Address/Direct Link (all names for the same thing), you'll be able to post it using the code below. There are two different options because I've noticed some browsers really hate quotation marks. Replace "URL" with the url you got from the above step.

code: <*img src="URL"> / <*img src=URL>
another code: <*img src="URL"<*/img>

➜ resizing

You've got your image, but its too big/too small for your forum! What now? Don't worry about using a program to resize the image, the code above is more than capable of doing it for you. There are two different metrics you can use to change an image's size: pixels, and percentages. Pixels will resize an image for you down to the specific pixel, where percentages will resize an image for you based upon the container it fits within. I use "width" in the code, leaving height to automatically resize itself, but you can swap width out for height to get the same effect.

code (pixels): <*img src="URL" width=500px> / <*img src=URL width=500px>
code(percentages): <*img src="URL" width=85%> / <*img src=URL width=85%>

➜ Image Titles

You know how sometimes when you hover over an image and you get a little blurb explaining what it is? You can do that too :) Hover over the image below if you're unsure what I mean.



code: <*img src="URL" title="hello world!"> / <*img src=URL title="hello world!">

links + clickables

notice: remove the asterics * from the codes before use.
- = - = -
➜ Links

this is another one of those annoying ones that rely on what browser you have - some just hate quotation marks. You will have to see which, or if both, work for you. In order to get a clickable link, you must first have a destination. Once you have a destination, copy the address from the top of the page. This is called a page url, or page address.


example: What do you want your link to say?
code: <*a href="PAGEURL">What do you want your link to say?<*/a> / <*a href=PAGEURL>What do you want your link to say?<*/a>

➜ Clickable Images

Remember in the last step where we learned how to grab an image url and a page url? Time to put your knowledge to the test. You can also add titles and/or resize your images.



code: <*a href="PAGEURL"><*img src="IMAGEURL"><*/a> OR <*a href=PAGEURL><*img src=IMAGEURL><*/a>

combining codes

notice: remove the asterics * from the codes before use.
- = - = -
➜ the Basics

You can combine a lot of the above codes, so long as you remember the proper code openings and closings. There are a few limitations like changing the colors of links, headers, and buttons, but this thread will give you a good start into the html of Lioden.

➜ p style crash courses

Remember how I said back in fonts that p style codes were unique? Well, thats because they have the capability of changing multiple factors in one string of code. (The box that this tutorial is in is a mass connection of p style codes!) I'm not going to go too far into depth, but you can create a 'string' of code by combining a lot of the codes you learned above into one string to style an entire thread, paragraph, or section. The main difference is that instead of the codes being separate entities, they'll be in one line separated by ;s.

some things you can change in one p style code
font, font color, font size, font weight, alignment, background color, text transform, and more.



example code:
<*p style="text-align:center;font-family:comic sans MS;font-size:15px;color: purple;text-transform:uppercase;">I can change the alignment, size, color and font all in one line of code. Have fun, coders!<*/p>