HTML Help

HTML in posts (either on a blog or in forum) lets you liven things up by allowing you to add images, change the font size, colour and face etc. easily.
 Note: This is for use on StumbleUpon.com, if you want HTML help for full websites 
 there are many tutorials on the web
= Fonts =
== Size ==
To change the size of the font just insert: <font size=5>Hi</font>. This example would produce:
Hi
The values range from 1-7, default being 2.
== Colour ==
To change the colour of the font just insert: <font color="red">Hi</font>. This example would produce:
Hi
You can either use hexadecimal values (e.g. #FF0000 = red) or colour names, a list can be found here: 
== Face ==
To change the face of the font just insert: <font face="Imapct">Hi</font>. This example would produce:
Hi
 Note: If you've downloaded a font that you'd like to use; other people won't be able 
 to see it unless they have also have it, otherwise they will see the default font.
Common fonts:
*Arial
*Arial Black
*Arial Narrow
*Comic Sans MS
*Courier
*Courier New
*Georgia
*Impact
*Times New Roman
*Verdana
== Combining Properties ==
You can easily combine the above tags so that you can have a size 5, colour red font. You do this in one font tag: <font size=5 color="red">Hi</font>
Hi
= Formatting =
== Bold ==
<b>Bold</b>
Bold
== Italic ==
<i>Italic</i>
Italic
== Underline ==
<u>Underline</u>
Underline
== Strikethrough ==
<del>Strikethrough</del>
Strikethrough
== Center ==
<center>Center</center>
Center</Center>
= Images =
== Adding an Image ==
The simplest method of adding an image to your blog is Photoblogging, however this method is severly limited (e.g. can only blog one image at a time). Instead one can use the HTML tag img to add and manipulate images. For example:
<img src="http://stumbleupon.wikia.com/images/b/bc/Wiki.png">
will produce:
== Resizing ==
To resize an image just specify the height and width. For example:
<img src="http://stumbleupon.wikia.com/images/b/bc/Wiki.png" width=81 height=93>
will produce:
 Note: If you only include either the height or the width, the image will be
 automatically scaled. For example, if you change the width of an 100px * 200px image
 to 50px, the height will be automatically changed to 100px.
== Borders ==
To add a border to an image, simply add border=x (where x is the width) like this:
<img src="IMG_LOCATION" border=3>
 Note: To specify the style and colour of borders, use css. A tutorial can be found 
 on this Wiki here: CSS Guide
== Text Alignment Relative to Image ==
To align the picture to the left or right allowing text to go next to it, add align=left/right. For example
<img src="http://stumbleupon.wikia.com/images/b/bc/Wiki.png" align=left width=100> Some text goes here... Some text goes here... Some text goes here... Some text goes here... Some text goes here... Some text goes here... Some text goes here... Some text goes here... 
will produce:
 Some text goes here... Some text goes here... Some text goes here... Some text goes here... Some text goes here... Some text goes here... Some text goes here... Some text goes here...
.
== Center Image ==
To center an image, simply inclose the image tag in center tags:
<img src="http://stumbleupon.wikia.com/images/b/bc/Wiki.png" width=81>
will produce:
= Links =
== Adding a Link ==
To add a link simply use the a tag. Change the href to the page location to which you are linking to, and wrap it around a piece of text/image:
<a href="http://www.stumbleupon.com">Stumbleupon</a>
will produce:
Stumbleupon
== Adding a Link to an Image ==
To link an image, simply enclose the img tag within the a tag. This example would produce an image which would link to stumbleupon.com:
<a href="http://www.stumbleupon.com/"><img src="IMG_LOCATION" border=0></a>
 Note: The reason why I added border=0, is simply to stop some browser from
 automatically adding a border. Such borders are in the colour of the link.
== What is rel="nofollow"? ==
rel="nofollow" is often added to links automatically by StumbleUpon. It is nothing dangerous, and doesn't change anything. It is simply there to communicate with search engine bots.
= Miscellaneous =
== Lists ==
=== Bullet Points ===
This type of list is the most common. Start of with a ul tag, and add li tags within. You can have an unlimited amount of bullets, just add and delete li tags:
''
A list item...
A list item...
A list item...
''
*A list item...
*A list item...
*A list item...
=== Numbered ===
The numbered list is exactly the same except it uses ol tags instead of ul tags.
''
A list item...
A list item...
A list item...
''
#A list item...
#A list item...
#A list item...
== Multiple Spaces ==
A very intresting thing about HTML is that it ignores multiple spaces one after each other. This is hardly ever a problem, but if it does bother you there is a simple way of adding spaces; use the following character code instead of one space: &nbsp; To use it, just type it in and it will automatically be converted to a space. 
 Tip: Finding it difficult to remember? NBSP simply stands for Non Breaking Space!
category:Help