Help > Player Tutorials     

Uni's Handy Forum HTML Guide!

Player Avatar
uni
April 25th, 2013 11:54:03pm
1,338 Posts
Uni's Handy Forum HTML Guide!

This is just a quick guide for some basic HTML that will show you how to insert useful functions such as inserting pictures or links, or you can use it to jazz up your forum posts! If there's anything else not included in the guide that you would like me to add, feel free to message me or post in the comments below what it is you're looking for!
NOTE: To use any of these codes, just copy and paste them into your post, but remove the space at the beginning after the first < . It should work after that!
You can use these basic codes on your homepage as well!


Styling Your Text
You can change the size of your text.
This is font size 4.This is font size 1.
If you do not adjust the setting, it will go to default size 2, which looks like this! You can choose any number between 1 and 7. To change your font size, use the following code:
< font size=2>Insert your text here< /font>


You can also change the color of your text.
Here is one example!This example uses a hex code. HERE is a fairly extensive list of hex codes that you can use. If you have a photo editing program, you can choose any color you like from the color picker as well. If you use a hex code, make sure you include a # symbol before the code.
And here is another example!This example uses a word (blue) rather than a code. You can try any color name or any random word in there and see what it comes out as. For these, you do not need a # symbol.
To change your font color, use the following code:

< font color=#000000>Insert your text here< /font>


You can also change the weight of your font or add decoration to it.
This text is bold.
This text is italicized.
This text is underlined.
This text is strikethrough.

Use the following codes to change your text:
< b>This text will be bold< /b>
< i>This text will be italicized< /i>
< u>This text will be underlined< /u>
< s>This text will be strikethrough< /s>


Styling Your Paragraph
These codes will help organize your paragraphs, and make your post look more organized and easy to read, especially if it is quite long.

The first code is one that is used to start a new line of text or to start a new paragraph.
For example
Here is text
Starting on new lines>
Use the following code to insert line breaks:
< br>

To start a new line, insert the code once. To separate blocks of text into paragraphs, insert it twice. This will create a blank space in between.

The default alignment for text is left, as it is now. If you'd like it to be centered on the page, use the following code:
< center>Insert any text, images, etc. here< /center>


Other Useful Codes

One very useful code is the code to insert pictures. Example:



To insert a picture, use the following code:
< img src="paste url here">


Creating links can also come in handy. I will show you how to make links internally within HP, as well as links to external sites. But first, the basic structure of the link code:

< a href="insert url here">Link Text Here< /a>



Now, to make links within HP such as THIS ONE, for the URL, you just need to copy anything and everything that comes after horsephenomena.com (eg. /search.php , /talk.php?channel=2, etc.). This will avoid the problem that occurs when some people use www. at the beginning of the URL and others do not. You can link internally anywhere on HP with this setup. So, your link code should look something like this:


< a href="/search.php">Link Text Here< /a>



To link to sites outside of HP, you follow the same basic format, except you copy the URL exactly as it appears. Make sure your link URL contains http:// at the beginning, otherwise it will not work. For example (this just links to the google homepage): GOOGLE. Your code should look something like this:



< a href="https://www.google.ca/">GOOGLE< /a>



This is a very basic guide
As I said before, if there is anything else you'd like to see listed here, please either PM me or post here in the comments! Hopefully you found it helpful and it will come in handy! :D And if you have any questions, feel free to post them here and I will answer them as soon as I can!



Ps. If you want to make awesome rainbow font like the header of this post visit THIS GENERATOR. You can also do gradients between any two colors of your choice! Make sure you click the "HTML Output"!



 


View Comments 1


Player Avatar
whoah
April 26th, 2013 12:27:37am
39 Posts
That! is work of art - great guide, Uni!

You are excellent at explaining. Thank you so much for this and I will use these things....like now...lol

I think for color you can also say the name in the code, like: font color =blue - So when I post I will see if it did it...Anyway thank you for this!


Edit:OK the font color worked but I made the mistake of copy pasting from you and it put the code itself in my post at first. I see why you had to put a space after the < to show the example.


 

Player Avatar
uni
April 26th, 2013 3:21:09am
1,338 Posts
Yeah, there is a specific code that you can use to turn off the HTML so you can post the actual code (called xmp) but HP didn't recognize it unfortunately :( So I had to put that pesky space in the codes :PI'm glad you're finding it helpful! :D :D


 

Player Avatar
Lollygag
April 26th, 2013 6:08:41am
38 Posts
OMG, Uni. Thanks! I'm so glad you got that operation to make you a girl.


We are the Pardy Pardy We shake it boom boom We are the Pardy Pardy Pa-Pa-Pa-Pa-Pardy-Pardy We are the Pardy Pardy We shake it boom boom

 

Default Avatar
Absinthe .:.Pomeranians.:.
April 28th, 2013 7:03:19pm
318 Posts
Wow Lolly...not entirely sure what that comment is all about. Kind of rude if you ask me (and yeah I can read it even though you put it in white).And to Uni. Thank you for posting this. It's very informative :)


 

Player Avatar
Lollygag
April 29th, 2013 6:23:58am
38 Posts
It's okay because Uni is my girlfriend. No h8.


We are the Pardy Pardy We shake it boom boom We are the Pardy Pardy Pa-Pa-Pa-Pa-Pardy-Pardy We are the Pardy Pardy We shake it boom boom

 

Player Avatar
† M.arixel †
May 22nd, 2013 12:36:02am
440 Posts
*stalks*


 

View Comments 1