Use this crash course in HTML to style your posts and sidebars like a pro!

Quick Reference Guide:

The Basics:

HTML stands for “Hypertext Markup Language.” It is the hidden “instructions” that tell your web browser (such as Internet Explorer and Firefox) what to display on a page. HTML is made up of a series of commands. Each command is known as a “tag,” which start and end with an angle bracket. a tag can also end your command, using a slash. The command from beginning to end would look something like this:

<command>element here</command>

Now that you have learned about tags, the basic building block of HTML, all that is left to learn are the different types of commands and how you can apply them to elements on your page.

Text Formatting:

You no longer have to be limited to plain, boring text in your posts! In this section, I will show you how to change the size and color of your text, and much more. Just keep in mind, a little goes a long way!

Below are different text style tags and a preview of what they do:

Bold Text: <strong>text here</strong> – text here

Italic Text: <i>text here</i> – text here

Underline Text: <u>text here</u> – text here

Strikethrough Text: <del>text here</del> – text here

Small: <font size="1">text here</font> – text here

Medium: <font size="2">text here</font> – text here

Large: <font size="3">text here</font> – text here

X-Large: <font size="4">text here</font> – text here

Red: <font color="red">text here</font> – text here

Blue: <font color="blue">text here</font> – text here

Hot Pink: <font color="hotpink">text here</font> – text here

Green: <font color="green">text here</font> – text here

Left: <p align="left">text here</p>

text here

Center: <center>text here</center>

text here

Right: <p align="right">text here</p>

text here

Now let’s try combining some of those text formatting tags:

<strong><center><font size="4"; color="hotpink">text here</font></center></strong>


Preview:
text here

Image Formatting:

Below you can find the HTML tag for placing an image. Note that it is one of the few HTML commands that do not require a closing tag.

<img src=”Your Image URL here”>

For example, the code with my image URL inserted is:

<img src="http://thepixelista.com/square-button.png">

Preview:
Image Borders:
*Play with the values in red to achieve your desired look*

<img style="border:1px solid black;" src="http://thepixelista.com/square-button.png">

Preview:

<img style="border:5px double blue;"src="http://thepixelista.com/square-button.png">

Preview:

<img style="border:3px dotted hotpink;" src="http://thepixelista.com/square-button.png">

Preview:

<img style="border:2px dashed green;" src="http://thepixelista.com/square-button.png">

Preview:

<img src="http://thepixelista.com/square-button.png" width=70px; height=70px;>

Preview:

<img src="http://thepixelista.com/square-button.png" width=40px; height=40px;>

Preview: