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 Edit

Size Edit

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 Edit

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: [1]

Face Edit

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 Edit

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 Edit

Bold Edit

<b>Bold</b>

Bold

Italic Edit

<i>Italic</i> Italic

Underline Edit

<u>Underline</u>

Underline

Strikethrough Edit

<del>Strikethrough</del>

Strikethrough

Center Edit

<center>Center</center>

Center

Images Edit

Adding an Image Edit

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 Edit

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 Edit

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 Edit

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 Edit

To center an image, simply inclose the image tag in center tags:

<center><img src="http://stumbleupon.wikia.com/images/b/bc/Wiki.png" width=81></center>

will produce:

Links Edit

Adding a Link Edit

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 Edit

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"? Edit

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 Edit

Lists Edit

Bullet Points Edit

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:

<ul>
<li>A list item...
<li>A list item...
<li>A list item...
</ul>

• A list item...
• A list item...
• A list item...

Numbered Edit

The numbered list is exactly the same except it uses ol tags instead of ul tags.

<ol>
<li>A list item...
<li>A list item...
<li>A list item...
</ol>

1. A list item...
2. A list item...
3. A list item...

Multiple Spaces Edit

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!