html tag

HTML TAGS

BYNIRMAL FELIX.K

INTRODUCTION:

Basic HTML Tags The most important tags in HTML are tags that define headings, •paragraphs, body and line breaks. •The basic HTML Tags are described here in the form of table •so that you can remind them easily.

Basic HTML Tag

Tag Description

<html> Defines an HTML document

<head> Defines information about the document

<title> Defines the document title

<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

<html>tag

This element tells a browser that this is an HTML document. This tag is defined at the top of the HTML file and at the end of file.

Format:

<html> <body>..............body of HTML.............</body></html>

Example:

<html> <body> this is my first page </body></html>

<head> tag

The head tag defines information about the document. The browser does not display the "head information" to the user. The following tags can be in the head section: <base>, <link>, <meta>, <script>, <style>, and <title>. The head tag is used between <html> and <body> tags.

Format:

<html> <head>.....head sections....</head><body>......body of HTML........</body></html>

Example:

<html> <head><title>Basic tag</title></head>>body> this is my first page </body></html>

<title> tag

Title tag defines the title of the document which appears in the Title bar of the explorer window. Title tag is used in between <head> and </head> tag because it is title tag is section of <head> tag.

Format:

<html> <head><title>Title of the Page</title></head><body>.....body of HTML......</body></html>

Example:

<html> <head><title>Basic tag</title></head><body> this is my first page </body></html>

<body> tag

The body element defines the document's body. It contains all the contents of the document (like text, images, colors, graphics etc).

Format:

<body bgcolor ="color_name" background="file_name" links="color_name" text="color_name">

Example:

<body bgcolor ="red" background="c:\img\sky.jpg" links="blue" text="black">

<hn>...</hn> Heading Tags

These tags are used to display headings in an HTML document. through these tags you can increase the size of the text. In these tags <h1> tag defines the largest header & <h6> defines smallest.

These tags are <h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5>

Format:

<hn>.............. text..............</hn>

Example:

<h1> this is my first page </h1> or <h1 align="right">text</h1> Attribute of the <hn> Tag.

<p>.....</p> Paragraph Tag

This tag is used for creating the paragraph in the web page. It is used inside the body of file.

Format:

<p>......longtext..........</p>

Example:

<p> This is the test of paragraph tag........</p>

In this tag align attribute can be used.

<br> tag

The <br> tag inserts a single line break. Use the <br> tag to enter blank lines, not to separate paragraphs. This tag has no end tag.

Format

text........<br> .....text

Example:

This is a break <br> in the line.

<hr> tag

The <hr> tag inserts a horizontal rule. The <hr> tag has no end tag.

Format:

text......<hr> ......text or text......<hr align=" " size=" " width=" ">.... text

Example:

This is the test of the tag <hr>

Comment Tag

The comment tag is used to insert a comment in the 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.

You can also store program-specific information inside comments. In this case they will not be visible for the user, but they are still available to the program. A good practice is to comment the text inside the script and style elements to prevent older browsers, that do not support scripting or styles, from showing it as plain text.

Format:



Example:

Example for basic command:

<html>

<head>

<title>In body tag</title>

</head>

<body bgcolor="lightyellow" text="red">

In body tag, background color is defined as black and textcolor is defined as the white.

<hr>

<h1> this is the h1 header </h1>

<h2> this is the h2header </h2>




<hr>This is the use of "Break" tag<br> and you will see use of more tags<br>

<hr> look at the use of comment tag it is good

<hr><p> This is the use of paragraph tag and you will see use of more tags </p>

The effect of "hr" tag <br> <hr>

</body>

</html>

<hr>This is the use of "Break" tag<br> and you will see use of more tags<br>

<hr> look at the use of comment tag it is good

<hr><p> This is the use of paragraph tag and you will see use of more tags </p>

The effect of "hr" tag <br> <hr>

</body>

</html>

Character Format Tags

These tags are used for the formatting of the text such as underline, bold, italic, font, size, color of the text. All these character formatting Tags are defined in the table shown below:

• Char Format Tag Description

• <b> Displays bold text

• <i> Displays italic text

• <tt> Renders as teletype or mono spaced text

• <u> Displays underlined text

• <em> Displays emphasized text

• <big> Displays big text

•

<small> Displays small text

<strong> Displays strong text

<sub> Displays subscripted text

<sup> Displays superscripted text

<bdo> Defines the direction of text display

<font> Defines the font face, size, and color of text

<b> Tag

The <b> tag is used to make the text bold.

Format:

<b> ................text.........</b>

<i> Tag

The <i> tag displays the italic text.

Format:

<i> ................text.........</i>;

<tt> Tag

The <tt> tag displays the typewriter text.

Format:

<tt> ................text.........</tt>

<u> Tag

The <u> tag displays the underlined text.

Format:

<u> ................text.........</u>

<em> Tag

The <em> tag displays the emphasized text.

Format:

<em> ................text.........</em>

<big> Tag

The <big> tag displays the big text.

Format:

<big> ................text.........</big>

<small> Tag

The <small> tag displays the small text.

Format:

<small> ................text.........</small>

<strong> Tag

The <strong> tag displays strong text.

Format:

<strong> ................text.........</strong>

<sub> Tag

The <sub> tag displays text in subscripted format.

Format:

<sub> ................text.........</sub>

<sup> Tag

The <sup> tag displays superscripted text.

Format:

<sup> ................text.........</sup>

<bdo> Tag

The <bdo> tag defines the direction of the text.

Format:

<bdo> ................text.........</bdo>

<font> Tag

The <font> tag defines the font, color, size of the text.

Format:

<font face="font_name" color="color_name" size="number">........text.........</font>

Example: for character tag:

<html>< body>

<b>This text is bold</b> <br>

<strong> This text is strong </strong> <br>

<big> This text is big </big> <br>

<em> This text is emphasized </em> <br>

<i> This text is italic </i> <br>

<small> This text is small </small> <br>

<u> this is underlined text </u> <br>

This text contains

<sub> subscript </sub>

<br>

This text contains

<sup> superscript </sup>

<br> The use of font tag

<font face="arial" size="3" color="green">

this is use of font tag</font> </body> html>

Output Tags

These tags are often used to display computer/programming code. You might be surprised for "how to display the text containing the spaces, line breaks, programming codes, sample text, define variable". Do not worry, because in this chapter we are going to show you how easily you can do easily.

So lets start with these tags:

Tag Description

<pre> Defines preformatted text

<code> Defines computer code text

<tt> Defines teletype text

<kbd> Defines keyboard text

<var> Defines a variable

<dfn> Defines a definition term

<bdo> Defines the direction of text display

<samp> Defines sample computer code

<pre>.........</pre>Tag

This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code.

Format:

<pre> .....text.....</pre>

Example:

<pre> for i = 1 to 10

print i

next i

</pre>

Output:

for i = 1 to 10

print i

next i

<code> .....text ......</code> Tag

This tag is also used to display the computer code. But better you use <pre> tag.

Format:

<code> .....text.....</code>

<kbd>.....Keyboard Input......</kbd> Tag

This tag displays the Keyboard Input.

Format:

<kbd> ........ Keyboard Input......</kbd>

<tt>......text....</tt> Tag

This tag displays the typewriter text.

Format:

<tt> .....text.....</tt>

<samp>....sample text...</samp> Tag

This tag displays the sample text.

Format:

<samp> .....sample text.....</samp>

<var> computer variable </var>

This tag defines the computer variable.

Format:

<var> computer variable </var>

<dfn> definition term </dfn>

this tag is used for definition term.

EXAMPLE

<html>

<body> <code>Computer code</code>

<br>

<kbd>Keyboard input</kbd>

<br>

<tt>Teletype text</tt>

<br>

<samp>Sample text</samp>

<br>

<var>Computer variable</var>

<br>

<p>

<b>Note:</b>

These tags are often used to display computer/programming code.

</p>

</body>

</html>

THANK YOU

html tag

Technology

head tag

head information

html file

html document

body of html

head section

end of file

documents body