Standard html tags

Disclaimer: This presentation is prepared by trainees of
baabtra as a part of mentoring program. This is not official
document of baabtra –Mentoring Partner
Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt .
Ltd

Standard HTML Tag’s
Nithil.pp
nithilp@gmail.com
facebook.com/ nithil
padinare peediyekal
twitter.com/username
in.linkedin.com/in/nithil.pp
9995223505

HTML tag’s
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.
• The closing tag normally contains a "/" indicate the
termination of the action.
• HTML tags are not case-sensitive.

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
• tells browser that it is an HTML document.
• defined at the top and end of the HTML file.
Format:
<html> <body>.............body of
HTML.............</body></html>
Example:
<html> <body> this is my first page </body></html>

<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: <script>, <style>, and
<title> etc.
• 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
• 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>.
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
• defines the document's body.
• 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:imgsky.jpg"
links="blue" text="black">

<hn>...</hn> Heading Tags
• used to display headings in an HTML document.
• increase the size of the text.
• These tags are <h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5>
</h5>,<h6></h6>.
Format:
<hn>.............. text..............</hn>
Example:
<h1> this is my first page </h1>
<h1 align="right">text</h1>

<p>.....</p> Paragraph Tag
• 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>

<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
• used to insert a comment in the source code.
• will be ignored by the browser.
• Can be used to explain your code.
Format:

Example:

Strike-through Tag
• displays text with a strike.
Example:
<strike>This is struck through text</strike>
displays as
This is struck through text

Example for basic command
<html>
<head>
<title>In body tag</title>
</head>
<body bgcolor="black" text="red">
In body tag, background color is defined as black and textcolor is defined as red.
<hr>
<strike>This is struck through text</strike>
<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>

Character Format Tags
• used for the formatting of the text
i.e underline, bold, italic, font, size, color of the text.
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

Char Format Tag Description
<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.

<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’s
<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>
<tt>typewriter type</tt>
This paragraph will go left-to-right.<br>
<bdo dir="rtl">This paragraph will go right-to-left.</bdo>
<br> The use of font tag
<font face="arial" size="3" color="green">
this is use of font tag</font> </body> html>

Output Tags
• often used to display computer/programming code.
i.e how to display the text containing the spaces, line breaks, programming codes, sample text
etc.
Tag Description
<pre> Defines preformatted text
<code> Defines computer code 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.
• preserves both spaces and line breaks.
• 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.
Format:
<code> .....text.....</code>
<kbd>.....Keyboard Input......</kbd> Tag
This tag displays the Keyboard Input.
Format:
<kbd> ........ Keyboard Input......</kbd>

<samp>....sample text...</samp> Tag
This tag displays the sample text.
Format:
<samp> .....sample text.....</samp>
<var> computer variable </var> tag
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>

List tags
• Used to have numbered, unnumbered, and definition lists.
• can nest lists within lists.
Unnumbered lists
• starts with the <ul> tag,.
• followed by the actual list items, which are marked with the <li> tag.
• ends with the ending tag </ul>.
For example:
<ul>
<li> list item 1
<li> list item 2
<li> list item 3
</ul>
Here is how that list would display:
* list item 1
* list item 2
* list item 3

Numbered lists
same list using a numbered list format:
<ol>
<li> list item 1
<li> list item 2
<li> list item 3
</ol>
Here is how that list would display:
1. list item 1
2. list item 2
3. list item 3

Definition lists
Definition lists allow you to work without necessarily having to use bullets.
<dl>
<dt> This is a term
<dd> This is a definition
<dd> And yet another definition
<dt> Another term
<dd> Another definition
</dl>
Result:
This is a term
This is a definition.
And yet another definition.
Another term
Another definition

Nested lists
• list inside another list.
<ul>
<li> list item 1
<ul>
<li> nested item 1
<li> nested item 2
</ul>
<li> list item 2
<ul>
<li> nested item 1
<li> nested item 2
</ul>
<li> list item 3
<ul>
<li> nested item 1
<li> nested item 2
</ul>
</ul>

Result:
* list item 1
o nested item 1
o nested item 2
* list item 2
o nested item 1
o nested item 2
* list item 3
o nested item 1
o nested item 2

HTML Tables
• defined with the <table> tag.
• divided into rows with the <tr> tag.
• row is divided into data cells with the <td> tag.
• td stands for "table data"
• A <td> tag can contain text, links, images, lists, forms, other tables, etc.
• border attribute:-To display a table with borders
• <th> tag:-defines header information.
Example:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

<img> tag
• defines an image in an HTML page.
• has two required attributes: src and alt.
Example:
<img src="smiley.gif" alt="Smiley face"
height="42" width="42">

HTML <a> Tag
• defines a hyperlink.
• href attribute, indicates the link’s destination.
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
Example:
<a href="http://www.w3schools.com">Visit
W3Schools.com!</a>

Form tag
• used to pass data to a server
• contain input elements like text fields,
checkboxes, radio-buttons, submit buttons
etc.
• <form> tag is used to create an HTML form.
• <input> element is used to select user
information.

Example:
<form action="demo_form.asp" method="post/get">
<input type="text" name="email" size="40" maxlength="50"><br>
<input type="password"><br>
<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>
<br>
<textarea name="comment" rows="6" cols="20"></textarea><br>
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
</form>

If this presentation helped you, please visit our
page facebook.com/baabtra and like it.
Thanks in advance.
www.baabtra.com | www.massbaab.com |www.baabte.com

Contact Us
Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
NC Complex, Near Bus Stand
Mukkam, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
Start up Village
Eranakulam,
Kerala, India.
Email: info@baabtra.com

Standard html tags

More Related Content

What's hot

Viewers also liked

Similar to Standard html tags

More from baabtra.com - No. 1 supplier of quality freshers

Recently uploaded

Standard html tags