# basic HTML

# How do I format a post?

You can format comments and posts on the {$domain} Marketplace using some simple HTML tags. Basic HTML is very easy to learn even if you don't know the first thing about programming or code. We only support a limited set of HTML tags, but they should be sufficient for most usage. You can see the full set, including examples below. You'll be a proficient HTML'er in no time at all!

## Emphasize Text

Wrap your text in either <strong> and </strong> or <em> and </em> to place emphasis. For example:

Bold Text <strong>Bold Text</strong>

Italicized Text <em>Italicized Text</em>

## Links

Linking is one of the most essential things you'll want to do. It's easy too! Just wrap up the text you want to link with <a href="URL"> and </a>. So for example if you want to link to the {$domain} Marketplace, you would write:

<a href="http://{$domain}/">Check out {$domain}</a>

Check out {$domain}

## Images

If you want to show an image you first need to have somewhere to store it. Happily there are a lot of places you can place images for free. Try these places:

- Flickr - Free Image Hosting from Yahoo!
- MediaFire - Free File Hosting
- PhotoBucket - Free Image and Video Hosting
- RapidShare - Free File Hosting for Pretty Much Anything

Once you have a URL for the image then you write <img src="URL">. For example there is an image of the Marketplace logos up at http://{$domain}/static/logo/logo-dark.png, so to show them just write:

<img src="http://{$domain}/static/logo/logo-dark.png">

## Quoting Someone

If you want to quote someone simply wrap the code in <blockquote> and </blockquote>. This is especially useful on the forums. If you click "Reply" it will automatically put these in for you.

## Making Lists

You can make two types of lists, either an unordered one (points) or an ordered one (numbered). Both types of lists begin and end with a list tag, either <ul> ... </ul> or <ol> ... </ol>. In between you wrap each item in the list with list item tags, like this <li> ...</li>. For example:

Unordered List <ul> <li>List Item</li> <li>List Item</li> </ul>

- List Item
- List Item

Ordered List <ol> <li>List Item</li> <li>List Item</li> </ol>

1. List Item
2. List Item

You can also put lists into lists, or change the type of list numbering or bullet types. Learn more about list options here.

## Headings

Sometimes you want to add a bit of structure to your text with some headings. We only support two types of headings - h3 and h4. The larger ones won't display because we save their use for the main site, Google doesn't like it if you have too many h1's and h2's, and we don't want to be penalized. But don't worry h3 and h4 look awesome! Here are some examples:

### Big Heading

<h3>Big Heading</h3>

#### Smaller Heading

<h4>Smaller Heading</h4>

## Code

You can display code in one of two ways. If you just have a few words of code then wrap the text in <code> and </code>. If you have a large block then you should put it on a new line and wrap it in <pre> and </pre> like this: `<code>Small Piece of Code</code>`

    <pre>
      blockquote
        border-left: 1px solid
        border-color= !div_border
        padding-left: 20px
        margin-bottom: 10px
        font-style: italic
        font-family: Arial, sans-serif
        color: #777777
      code, pre
        font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
        monospace
        color: #333333
    </pre>

## Line Breaks

You can add a line break with a very simple tag <br /> (which stands for Break!)

## More HTML and CSS

You can do a lot of cool stuff with HTML and CSS. Not everything is allowed on the marketplaces just because we don't want to break the main page layout, but it's still worth learning it all anyway!

W3Schools has lots of beginner tutorials on HTML and CSS.

## Emoticons and their Codes

The {$domain} Marketplace allow you to use emoticons (also known as smileys) in discussion areas around the sites. You can use the below emoticons on the Marketplace profiles or on item discussion pages by typing the code listed next to the emoticon into the text entry area, when you make the post the code will be replaced with the emoticon.

|  | :happy:
|  | :sad:
|  | :tongue:
|  | :wink:
|  | :angry:
|  | :expressionless:
|  | :laugh:
|  | :puzzled:
|  | :cool:
|  | :surprised:
|  | :asleep:
|  | :bashful:
|  | :bashfulcute:
|  | :bigevilgrin:
|  | :bigsmile:
|  | :bigwink:
|  | :chuckle:
|  | :crying:
|  | :confused:
|  | :confusedsad:
|  | :dead:
|  | :delicious:
|  | :depressed:
|  | :evil:
|  | :evilgrin:
|  | :grin:
|  | :impatient:
|  | :inlove:
|  | :kiss:
|  | :mad:
|  | :nerdy:
|  | :notfunny:
|  | :ohrly:
|  | :reallyevil:
|  | :sarcasm:
|  | :shocked:
|  | :sick:
|  | :silly:
|  | :sing:
|  | :smitten:
|  | :smug:
|  | :stress:
|  | :sunglasses:
|  | :sunglasses2:
|  | :superbashfulcute:
|  | :tired:
|  | :whistle:
|  | :winktongue:
|  | :yawn:
|  | :zipped: