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 PartnerBaabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd

Standard HTML Tag’s

[email protected]/ nithil padinare

peediyekaltwitter.com/usernamein.linkedin.com/in/nithil.pp9995223505

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:\img\sky.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><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></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 redExample:<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>

Thank you…

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

http://facebook.com/baabtra

http://facebook.com/baabtra

http://www.baabtra.com/

http://www.massbaab.com/

http://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 StandMukkam, Kozhikode,Kerala, India.Ph: + 91 – 495 40 25 550

Start up VillageEranakulam,Kerala, India.

Email: [email protected]

Education

Standard html tags