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.
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.
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.
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>
ok I have a question coz its driving me crazy right now
im trying to make a center alined tittle
and overtime i use H1 it won't center aline it with the center alined code.... how can i get it to work together...
Headers with h1, h2, etc. don't play nicely with any kind of styling. Try this instead (you may have to tweak the font size slightly, and of course remove the asterisks).
Okay this might sound dumb but I have no Idea where i put in the codes?!? Also everytime I try to make a clickable link or special text it wont work. Any Ideas?
Holly, remember to remove the *s from the code! Also, you can put these in a forum or on your den. If you want them in your den, scroll down pasts your lion/esses and dynasty. You'll see a area where you can edit your information :)
Okay one more dumb question but how do you move a side floating box a little more towards the center because currrently it's in a far corner and hard ish to read
31 players like this post! Like? 
Report
