Most modern Blog Platforms come very well fitted out with formatting tools to help you to make your posts look and feel just the way you want them to. But still having a knowledge of the basic HTML tags is not going to hurt and still more ! it can even help you to have the extra edge in formatting your blog .. HTML, which stands for HyperText Markup Language, is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages

HTML documents are composed entirely of HTML elements that, in their most general form have three components: a pair of tags, a "start tag" and "end tag"; some attributes within the start tag; and finally, any textual and graphical content between the start and end tags, perhaps including other nested elements. The HTML element is everything between and including the start and end tags. Each tag is enclosed in angle brackets.

HTML Tags

HTML markup tags are usually called HTML tags

HTML tags are keywords surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
Start and end tags are also called opening tags and closing tags

Basic Formatting Tags

- <b>bold</b>
- <strong>strong</strong> (usually bold)
- <u>underlined</ul>
- <i>italics</i>
- <em>emphasis</em> (usually italics)
- <strike>~~strike through~~</strike>
- <center>This centers text on the page</center>
- <tt>teletype text</tt> (typewriter text)
- <blockquotes>blockquotes</blockquotes> (how this looks will depend on your CSS template but it usually indents your paragraph)

HTML Images

In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
Syntax for defining an image:

The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

HTML Tables

Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

For eg : <table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Edit Styles

CSS isn’t technically HTMl code, it’s a different syntax and it serves a different purpose. However, a lot of the functions that, ten years ago, would be done (awkwardly) in HTML are now done in CSS. CSS can determine everything from the size of your text to the gap around your images to the layout of your site.

All of this is controlled within either one or a handful of stylesheets. Editing these stylesheets can have a drastic impact on your site, your posts and that is a double-edged sword. For one, they are simple way to fix problems that you have with your site or improve your look. On the other hand, they are a wonderful way to mess up your whole blog.

Quick Roll up :

HTML Basic Document

<html>
<head>
<title>Title of document goes here</title>
</head>

<body>
Visible text goes here...
</body>

</html>

Heading Elements

<h1>Largest Heading</h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Links

Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>

A named anchor:
<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>

Unordered list

Ordered list

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

Definition list

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border="1">
<tr>
    <th>Tableheader</th>
    <th>Tableheader</th>
</tr>
<tr>
    <td>sometext</td>
    <td>sometext</td>
</tr>
</table>

Frames

Forms

<input type="text" name="email" size="40" maxlength="50" />
<input type="password" />
<input type="checkbox" checked="checked" />
<input type="radio" checked="checked" />
<input type="submit" value="Send" />
<input type="reset" />
<input type="hidden" />

<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>

</form>

Entities

Other Elements

<blockquote>
Text quoted from a source.
</blockquote>
<address>
Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>
Source : http://www.w3schools.com/html/html_quick.asp

Posted in:

BLOGOBUZ

Basic HTML every Blogger should know