Live Traffic

Tuesday, May 10, 2011

Home » » Basic HTML Tags

Basic HTML Tags


The most important tags in HTML are tags define headings, paragraphs and line breaks.

Basic HTML Tags


Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment

Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6> defines the smallest.

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

<h4>This is a heading</h4>

<h5>This is a heading</h5>
<h6>This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading. A useful heading attribute is align.

<h5 align="left">I can align headings</h5>
                         <h5 align="center">This is a centered heading</h5>
                                          <h5 align="right">This is a heading aligned to the right</h5>

Paragraphs
Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text. You can use the align attribute with a paragraph tag as well.

<p align="left">This is a paragraph</p>
                              <p align="center">This is another paragraph</p>

Important : You must indicate paragraphs with <p> elements. A browser ignores amy indentations or blank lines in the source text. Without <p> elemnet, thhe document becomes one large paragraph. HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks
The <br> tag is used when you want to start a new line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it. It is simial to single spacing in a document.

This Code Would Display
<p>This<br>is a para<br>graph with line breaks</p> This
is a para
graph with line breaks

Notice you don't see the text between the tags <!-- and -->. If you look at the source code, you would see the comment. To view the source code for this page, in your browser window, select View and then select Source.

Note : You need an exclamation point after the opening bracket <!-- but not before the closing bracket -->.

HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading. If you want to insert blank lines into your document, use the <br> tag.

Try It Out!
Open your text editor and type the following text :

<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1 align="center">My First Webpage</h1>
<p>Welcome to my first web page. I am writing this page using a text editor and plain old html.</p>
<p>By learning html, I'll be able to create web pages like a pro....<br>
which I am of course.</p>
</body>
</html>

Save the page as mypage2.html. Open the file in your Internet browser. To view how the page should look, visit this web page: http://profdevtrain.austincc.edu/html/mypage2.html


Other HTML Tags
As mentioned before, there are logical styles that describe what the text should be and physical styles which actually provide physical formatting. It is recommended to use the logical tags and use style sheets to style the text in those tags.



Some Examples :
The following paragraph uses the <blockquote> tag. In the previous sentence, the blockquote tag is enclosed in the <samp> Sample tag.

We the people of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

Although most browsers render blockquoted text by indenting it, that's not specifically what it's designed to do. It's conceivable that some future browser may render blockquoted text in some other way. However, for the time being, it is perfectly safe to indent blocks of text with the <blockquote>.



When you hold your mouse pointer over the WWW, text in the title attrribute will appear in.

1 komentar:

Nice Post. I like your blog. Thanks for Sharing.
Full Stack Online Training

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More