HTML 101

A Basic Course in HTML Coding
for your Posts and Sidebars

Tip: You may want to bookmark this page for future reference.

Text Styles
Text Size
Text Color
Text Alignment
Text Format Combination

Images - The Basics
Image Borders
Image Size

The following is a crash course in HTML that will enable you to style your posts and sidebars like a professional. If you have a basic HTML question in regards to posts and sidebars that you should be included in this guide, or you've created some amazing styling using my guide, please include it in a comment!


The Basics:

What is HTML?

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!

Text Styles

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

Text Size:

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

Text Color:

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

Text Alignment:

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

Getting Fancy:

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:

The Basics:

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://i851.photobucket.com/albums/ab75/ablogtobragabout/IMAGE.png">
Preview:

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

<img style="border:1px solid black;" src="http://i851.photobucket.com/albums/ab75/ablogtobragabout/IMAGE.png">

Preview:


<img style="border:5px double blue;" src="http://i851.photobucket.com/albums/ab75/ablogtobragabout/IMAGE.png">

Preview:


<img style="border:3px dotted hotpink;" src="http://i851.photobucket.com/albums/ab75/ablogtobragabout/IMAGE.png">

Preview:



<img style="border:2px dashed green;" src="http://i851.photobucket.com/albums/ab75/ablogtobragabout/IMAGE.png">

Preview:

Image Size:

<img src="http://i851.photobucket.com/albums/ab75/ablogtobragabout/IMAGE.png" width=70px; height=70px;>
Preview:


<img src="http://i851.photobucket.com/albums/ab75/ablogtobragabout/IMAGE.png" width=40px; height=40px;>
Preview:




Thanks for Reading!

Equipped with your new knowledge, you can create great looking posts, emphasizing and styling where you want to. Thanks for reviewing the information and please leave a comment if you found it helpful!

ZFECRRYBYWC8