My Profile

Thursday, January 20, 2011

HTML Tags


  • HTML tags are used to mark-up HTML elements
  • HTML tags are surrounded by the two characters < and >
  • The surrounding characters are called angle brackets
  • 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
  • The text between the start and end tags is the element content
  • HTML tags are not case sensitive, <b> means the same as <B>


Basic HTML Tags


<HTML> ... </HTML>   Tag

This element identifies the document as containing HTML elements.

The HTML element is not visible upon HTML user agent rendering and can contain only the <HEAD> and <BODY> elements.

Example: -
<HTML>
Here is all the rest of the document, including any elements.
</HTML>

<HEAD> ... </HEAD>   Tag

The head of an HTML document is an unordered collection of information about the document.

The <HEAD> and </HEAD> elements do not directly affect the look of the document when rendered.

<TITLE> ... </TITLE>   Tag

<TITLE>- Specifies the title of the document.

Every HTML document must have a Title element.  The title should be some arbitrary string that identifies the contents of the document and may be used in history lists, or as a label for the windows displaying the document.

The Title element must occur within the head of the document and may not contain anchors, paragraph elements, or highlighting.  Only one title is allowed in a document.


<BODY> ... </BODY>   Tag

The body of a HTML document contains all the text and images that make up the page, together with all the HTML elements that provide the control/formatting of the page

Example :-

<html>
<head>
            <title> My First Web Page </title>
</head>
<body>
            Hello friends
            Welcome to HTML.
            This is my first html document.
</body>
</html>


Tag Attributes

Tags can have attributes. Attributes can provide additional information about the HTML elements on your page.

This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this:

<body bgcolor="red">.

Attributes always come in name/value pairs like this: name="value".

Attributes are always added to the start tag of an HTML element.

Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed.

In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes:

name='John "ShotGun" Nelson'



Attributes of <BODY>

BGCOLOR

The BGCOLOR attribute, allows setting of the background colour for the document.

Example :-
<BODY BGCOLOR="#rrggbb">
Document here
</BODY>

BACKGROUND

The BACKGROUND attribute can be used to point to an image file that will be tiled across the browser window, to provide a background for the document.  Specifying :

Example :-
<BODY BACKGROUND="URL or path/filename.gif">
Document here
</BODY>

 
TEXT

This attribute is used to control the colour of all the normal text in the document.

Example :-
<BODY TEXT="#rrggbb">
Document here
</BODY>


LINK, VLINK, and ALINK attributes

These attributes allow control over the link text colouring. VLINK stands for visited link, and ALINK stands for active link. The default colouring of these is: LINK=blue (#0000FF), VLINK=purple (#400040), and ALINK=red (#FF0000).

Example :-
<BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
Document here
</BODY>

 
Headings

HTML defines six levels of heading. A Heading element implies all the font changes, paragraph breaks before and after, and white space necessary to render the heading.

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

<h1>This is  heading1</h1>
<h2>This is  heading2</h2>
<h3>This is  heading3</h3>
<h4>This is  heading4</h4>
<h5>This is  heading5</h5>
<h6>This is  heading6</h6>

ALIGN attribute

The ALIGN = left | center | right attribute has been added to the <H1> through to <H6> elements. 

Example :-
<H1 ALIGN=center>Hello, this is a heading</H1>

HTML automatically adds an extra blank line before and after a heading.

 
Paragraphs

The Paragraph element indicates a paragraph. Typically, paragraphs are surrounded by a vertical space of one line or half a line.  With some browsers, the first line in a paragraph is indented.

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>
<p>This is another paragraph</p>

ALIGN attribute
Basically, ALIGN = left | center | right attributes have been added to the <P> element.

Example :-
<P ALIGN=LEFT> ... </P>
All text within the paragraph will be aligned to the left side of the page layout. This setting is equal to the default <P> element.
<P ALIGN=CENTER> ... </P>
All text within the paragraph will be aligned to the centre of the page.
<P ALIGN=RIGHT> ... </P>
All text within the paragraph will be aligned to the right side of the page.

HTML automatically adds an extra blank line before and after a paragraph.


Line Breaks

The Line Break element specifies that a new line must be started at the given point. A new line indents the same as that of line-wrapped text.

The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.

Example :-
<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.


Horizontal Rule

A Horizontal Rule element is a divider between sections of text such as a full width horizontal rule or equivalent graphic.

Horizontal Rule defined with the <hr> tag

SIZE attribute

The SIZE attributes lets the author give an indication of how thick they wish the horizontal rule to be.  A pixel value should be given.

<HR SIZE=number>

WIDTH attribute

With the WIDTH attribute, the author can specify an exact width in pixels, or a relative width measured in percent of document width.          

<HR WIDTH=number | percent>

ALIGN attribute

Now that horizontal rules do not have to be the width of the page it possible to specify the horizontal alignment of the rule.

<HR ALIGN=left | right | center>

COLOR attribute

Internet Explorer allows the specifying of the hard rule colour.  Accepted values are any of the Explorer supported colour names, or any acceptable rrggbb hex triplet.

<HR COLOR=name|#rrggbb>

NOSHADE attribute

For those times when a solid bar is required, the NOSHADE attribute specifies that the horizontal rule should not be shaded at all.

<HR NOSHADE>



Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.

Example :-
<!-- This is a comment -->



Points to remember


Tag
Description
<html>
Defines an HTML document
<head>
Defines the document's header
<title>
Specifies the title of the 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



----------------------------------------------------------

** If you like this post please like our page in facebook


0 comments:

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More