Understanding the Basic HTML Coding

HTML uses tags to communicate to the browser how to display text and images. Tags are contained in < > symbols. In most cases, you start with the beginning tag ( < ), put in the word or words that will be affected by this tag, and at the end of the string of word(s), you place a closing tag ( /> ). Below are tags you might want to use. The ... represents the word(s) that will be affected by the tag.

<b>...< /b> Boldfaces the enclosed text.

Print This Page

<i>...< /i> The enclosed text is italics.

<s>...</s>~~Displays text with a line through it. The ~~tag does exactly the same.~~~~

<u>...</u> The enclosed text in underlined. Try to avoid this since underlined text usually indicates a link.

This will apply a color to the text within the command.
A color chart showing all color codes can be found here at CDG.

<br> Inserts a line break.

<p> Inserts a paragraph break which is equal to 2 line breaks.

<div align="center"> ...</div> Centers the enclosed elements.
This tag will center everything including images, text, tables, forms, etc.

<div align="right"> ...</div> aligns the enclosed elements to the right.
This tag will align everything to the right including images, text, tables, forms, etc.

<div align="left"> ...</div> aligns the enclosed elements to the right.
Typically not used since the all elements default to the left.
This tag will align everything to the left including images, text, tables, forms, etc.

This is the HTML to add an image.
<img src="...the location of the image" width="...width of the image" height="...height of the image" alt="...description of the image">

<font="+1">...</font>This will increase the size of the font. You can apply this to one or more words in text. You can increase by +2, also. By the same token, font size can be reduced with the command <font="-1">...</font>

Headers

There are six levels of headers that can be used in your document, h1 through h6. Header 1 is the largest header and they get progressively smaller through header 6. Below are each of the six headers and how they usually appear in relation to one another.

<h1>This is a header 1 tag</h1>

This is a header 1 tag

<h2>This is a header 2 tag</h2>

This is a header 2 tag

<h3>This is a header 3 tag</h3>

This is a header 3 tag

<h4>This is a header 4 tag</h4>

This is a header 4 tag

<h5>This is a header 5 tag</h5>

This is a header 5 tag

<h6>This is a header 6 tag</h6>

This is a header 6 tag

Headers, as you notice, not only vary in size, they are also bold and have a blank line inserted before and after them. It's important to use headers only for headings, not just to make text bold.