Html

June 21, 2017 www.snipe.co.in 1
Prepared :snipe team

HYPER TEXT MARK UP
LANGUAGE

Agenda
• HTML Preface
• History of HTML
• HTML Applications
• HTML Design
• HTML Limitations
• HTML Overview
• HTML Essential Online Resources

Contents
• Getting Started..
• About HTML
• HTML Advantages and Disadvantages
• How to create and View an HTML document?
• Basic HTML Document Format
• The HTML Basic tags
• The Structure of HTML
• Examples on the same

About HTML
• Hyper Text Markup Language is used to design web pages.
• Telling the browser what to do, and what props to use.
• Hypertext means that some text in the HTML document carries a link
to a different location.
• Markup means that specific portions of a document are marked up to
indicate how they should be displayed in the browser.
• HTML carries information about the web page though, the display of
the document is solely dependent on the browser you should test
HTML code in the two most used browsers, Internet Explorer and
Netscape Communicator. With HTML we can embed various
objects such as images, video, sound in your pages.
• A series of tags that are integrated into a text document.

Advantages
• Loose syntax (although, being too flexible will not comply with
standards)
• Easy to use.
• Supported on almost every browser, if not all browsers.
• Widely used; established on almost every website, if not all websites.
• HTNL is increasingly used for data storage.
• Free - You need not buy any software.
• Easy to learn & code even for novice programmers.

Disadvantages
• It cannot produce dynamic output alone, since it is a static language.
• Sometimes, the structuring of HTML documents is hard to grasp.
• You have to keep up with deprecated tags, and make sure not to use
them.
• Deprecated tags appear because another language that works with
HTML has replaced the original work of the tag; thus the other language
needs to be learned (most of the time, it is CSS)
• Security features offered by HTML are limited.

What is HTMLBasic Needs
• A text editor.
• A browser.
• Note pad or word pad (A storing device and storing media)
• To open note pad click start, programs,
accessories/office then note pad or word pad like this:
• A DOCTYPE is required to validate the document

Basic HTML Document Format
<html>
<head><title>SNIPE</title></head>
<body>
<h1>SNIPE IT SOLUTIONS</h>
<p>www.snipe.co.in</p>
</body>
</html>
Result will look like this:

The Origins of the WWW
• WWW was invented by Tim Bemers-Lee at CERN(1989-1990).
• Hypertext across the internet.
• Three constituents: HTML+URL+HTTP.
• HTML is an SGML language for hypertext.
• URL is an notation for locating files on servers.
• HTTP is a high level protocol for the transfers.
The Design of HTML:
• Simple and pure design principles.
• HTML describes the logical structure of a documents.
• HTML is the lightweight file format.
• Size of the file containing is just 28 bytes.

The History of HTML
• 1992: HTML 1.0, Tim Bemers-Lee Original proposal.
• 1993: HTML 1.0. Some Physical Layout.
• 1994: THML 2.0, Standard with best features.
• 1995: Non-standard Netscape features.
• 1996: Competing Netscape and Explorer features.
• 1996: HTML 3.2. The browser wars end.
• 1997: HTML 4.0. Style-sheets are introduced.
• 1999: HTML 4.01.Winner version.
• 2000: XHTML 1.0. An XML version of HTML 4.01.
• 2001: XHTML 1.1, Modularization.
• 2002: XHTML 2.0, Simplified and generalized.

HTML Tags
• The script begins with a <HTML> and ends with </HTML>.
• These are the starting and the ending tags of the HTML document.
• Each HTML file has <HTML> as the first tag and </HTML> as the
last.
• The HTML file has a HEAD and a BODY section. The <HEAD> and
</HEAD> tags encompass the head part while the <BODY> and
</BODY> surround the BODY.
• The <TITLE> and </TITLE> inside the HEAD section, with “…"
between them. Thus, any text between the <TITLE> tags will be
displayed here.

HTML Tags
• Each document consists of a HEAD section surrounded by <HEAD>
and </HEAD> tags and a BODY section with <BODY> and </BODY>.
HTML tags come in pairs (usually) with the ending tag containing an
additional "/".
• Some Tags can surround other tags. This is called Nesting. In our
case, the <TITLE> tags are nested in the <HEAD>-</HEAD>tags.
Text inside <TITLE> tags is displayed on the browser Title Bar.
The text between the <BODY> tags is displayed inside the browser
window.

What is HTML(Contd..)
Tags are:
• Surrounded with angle brackets like this : <b> or <i>.
• Most tags come in pairs: <p>,<br>,<li><ol> tags…
• The first tag turns the action on, and the second turns it off.
• The second tag (off switch) starts with a forward slash. <b>SNIPE</B>
• Can embedded, for instance, to do this:
<head><title>Snipe</head></title> Wrong Syntax.
<head><title>Snipe</title></head> Write Syntax.
• Not case sensitivity.
• Many tags have attributes.<p align=“center”> Centers the paragraph.
• Some browsers don’t support the some tag and some attributes.

(Contd..)
Structure Tags:
<html>…</html> opens and closes all HTML documents.
<head>…</head> Encloses document headers.
<title>…</title> Contains documents title.
<body>…</body> Body of the HTML documents.
Character Formatting:
<b>…</b> Bold Text.
<i>…</i> Italic Text.
<u>…</u> Underlined Text.
<center>…</center> Center Text.
<p>…</P> Page even line break.
<font>…</font> Font Text Size 1- 7.
<ol>…</ol> Ordered List Text.
<ul>…</ul> Unordered list.

(Contd..)
Self-closing Tags:
Tags that, by definition, contain nothing between the opening and
closing tags must self-close with a space and forward slash:
Images <img src="something.jpg" />
Carriage Return <br />
Horizontal Breaking Line <hr />
More Tags:
<br/> A line break.
<li>…</li> A list items.

(Contd..)
• Clear =“…” Causes a text to stop flowing around images-possible
values are Left, Right and All.
<nobr>…</nobr> Prevents text from wrapping at the end of the line.
<blockquote>…</blockquote> Used for long quotes or citations.
<center>…</center> Center all between the tags.
<font>…</font> Font Text Size 1- 7.
• Size=“…” Specifies the font size of the text (Attributes).
• Color=“…” Specifies the color of text.
• / Means closing tag.

Lists of tags

Attributes
• TEXT=“…” Sets Text Color.
• BGCOLOR=“…” Sets Background Color.
• VLINK=“…” Sets Color of visited links.
• LINK=“…” Sets Color of unvisited links.
Headings:
<h1>…</h1> to <h6>…</h6> Used to set size of the heading.
Value with 1 is largest and 6 is smallest.
Paragraphs:
<p>…</p> Used to denote plain paragraph.

Links
• Use <a href=“filename/url”></a> tags.
• <a>…</a> Creates a link to another document or anchor.
• Hreff=“..” The URL of the document which a given document is
linked.
• Name=“…” Denotes an Anchor name.

(Contd..)
Attribute for <A ...> NAME = "text string“.
• NAME gives the anchor a name. Other links target the anchor using
that name. This allows you to link to specific places within the page.
• For example, suppose you have a long page with a section about
purchasing. You could create a named anchors in the sub-header for
that section like this:
<H2><A NAME="purchasing">Purchasing</A></H2>
• <A HREF="anameexample.html#purchasing">Purchasing</A>
• The named anchor itself doesn't have a hash mark.
<A NAME="purchasing">
• A link to the named anchor always has a hash mark.
<A HREF="#purchasing">

(Contd..)
Lists:
<ol>…</ol> Ordered list or Numbered list.
<ul>…</ul> Unordered list or Unnumbered list.
<li>…</li> List items.
Comments:
<!...> Comment which is not displayed in browser.
It is found in <body>tag.
<hr>…</hr> Horizontal Rule.
Size=“…” To show thickness of the line in pixels.
• Width=“…” The width of the rule or percent.
• Align=“…” Directs the values Left, Right and Center.
• Noshade=“…” Causes the rule to be drawn as a solid black line.

Images
<img> Used to place an image into a document. (Attributes)
• src=“…” Information on location of the image.
• alt=“…” Alternate text will be displayed should an image be missing.
• align=“…” Determines horizontal image alignment either left or right.
• valign=“…” Determines vertical image alignment either top, down or
middle.
• width=“…” The width of the pixels of an image.
• height=“…” The height of the pixels of an image.
• border=“…” Creates a border around a linked image.
• bordercolor=“....” For border color specification.

• Tables are more properly treated as a method for expressing structural
relations.
• Tables can be used to indicate the relationships between input fields
and their explanations within a Form.
• <table>…</table> Creates a tables.
Attributes:
• Border=“..” - Specify table should have border also indicating width.
• Use ROWSPAN & CELLSPAN to join cells.
• BGCOLOR to give background color to tables, rows.
• Cell spacing=“…” - Specifies amount of space between the cells in table.
• width’=“…” - Specifies the width of the table either in pixels or in percent.
• <tr>…</tr> - Shows the table rows.
• <th>…</th> - To use table heads.
• <td>…</td> - Shows the table data cell.
Tables

Frames
• This display more than one HTML document in the same browser
window.
• Each HTML document is called a frame, and each frame is
independent of the others.
• <frameset>…</frameset> The main container for a frame document.
• cols=‘..” - Specifies a frames columns size either in pixels/percent.
• rows=“…” - Specifies a frames row size either in pixels/percent.
<frame> Contains information about single frame. (Attributes)
• src=“…” - The URL of a document to be displayed in the frame.
• scrolling=“…” - Indicates whether a frame has scroll bars.
• marginheight=“…” - Specifies the frame margin’s height in pixels.
• marginwidth=“…” - Specifies the frame margin’s width in pixels.
<noframe>…</noframe> Used to display the text when viewed with non-frames
capable browser.

Colors
• Colors can be produced for a number of page elements using the color
names or RGB hexadecimal codes indicated in each of the samples.
• The use of HTML elements and attributes for specifying color is
deprecated.
Color names:
<font color = “blue”>
Changing the Background color:
<body bgcolor=#19378a>
Changing Text color:
<body bgcolor= # 19378a text = # fffff link = fffff66 vlink= # 66ffff>

HTML Events
HTML added the ability to let events trigger actions in a browser, like
starting a JavaScript when a user clicks on an element.
<body> and <frameset> Events:
Attribute Value Description
onload script The onload event occurs when the user agent finishes
loading a window or all frames within a frameset.
onunload script The onunload event occurs when the user agent removes a
document from a window or frame.

Form Events:
The onchange event occurs when a control loses the input
focus and its value has been modified since gaining focus.
scriptonchange
The onblur event is triggered when an element loses focus
either by the pointing device or by tabbing navigation.
scriptonblur
DescriptionValueAttribute
The onselect event is triggered when a user selects some text in
a text field.
scriptonselect
The onreset event occurs when a form is reset.scriptonreset
The onfocus event occurs when an element receives focus
either by the pointing device or by tabbing navigation.
scriptonfocus
The onsubmit event is triggered when a form is submitted.scriptonsubmit
(Contd..)

Image Events:
Attribut
e
Value Description
onabort script Occurs if loading of picture is aborted. This event occurs only
in <img> tag.
Keyboard Events:
The onkeypress event occurs when a key is pressed and
released over an element.
scriptonkeypress
The onkeydown event is triggered when a key is pressed
down over the element.
scriptonkeydow
n
DescriptionValueAttribute
The onkeyup event occurs when a key is released over an
element.
scriptonkeyup
(Contd..)

Mouse Events:
Attribute Value Description
onclick script The onclick event is triggered when the mouse button is
clicked over the element.
ondblclick script The ondblclick event occurs when the pointing device
button is double clicked over an element.
onmousedown script The onmousedown event is triggered when the mouse
button is pressed over the element.
onmousemove script The onmousemove event occurs when the pointing
device is moved while it is over an element.
onmouseout script The onmouseout event is triggered when the mouse is
moved away from the element.
onmouseover script The onmouseover event is triggered when the mouse is
moved onto the element.
onmouseup script The onmouseup event occurs when the pointing device
button is released over an element.
(Contd..)

Example for headings and paragraphs
<html>
<head>
<title>Overall Structure of HTML</title>
</head>
<body bgcolor=“lime”>
<h1>2010</h1>
<p>UPA</p>
</body>
</html>
Result:

Example for DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
Result:

Examples for links and images
<html>
<a href=“http://kpsc.kar.nic.in”> Please visit this link for more </a>
<p>
An image of State Governments Head Office:
<img src=“http://kpsc.kar.nic.in/build1a.jpg” width=“100” Height =“50” />
</p>
<p>
VIDANA SOUDA:
<img src=“http://kpsc.kar.nic.in/build1a.jpg” width=“100” Height =“ 75” />
</p>
</body>
</html>

Result:
(Contd..)

Example for Text Formatting
<html>
<body>
<p><b>Govt pushes China model for 'Eastern Green Revolution'</b></p>
<p><strong>Satyam's Rajus siphoned off Rs 2,743 cr: CBI</strong></p>
<p><big>Govt slashes UIDAI budget by over 50 per cent</big></p>
<p><em>Afghanistan sees Pakistan border trade deal in weeks</em></p>
<p><i>Google's Schmidt undaunted by Apple or Facebook</i></p>
<p><small>AIADA seeks 2,923 acres for expansion at three places</small></p>
<p><sub>Rel Life Insurance targets 10% market share in 3 yrs</sub> and
<sup>Auto sector profit growth on track</sup></p>
</body>
</html>

(Contd..)
Result:

Example for Line breaks and pre formats
<html>
<body>
<pre>
Germans want 'Paul' to be killed, Spain is ready to adopt him, and now PETA is
demanding the release of the psychic octopus.
</pre>
<P>Germany clinch third in stunning playoff<br/>in 2010 FIFA</P>
<p>Display computer code:</p>
<pre>
H<sub>2</sub>O
E = mc<sup>2</sup>
<SPAN lang="fr">M<sup>lle</sup> Dupont</SPAN>
</pre>
</body>
</html>

(Contd..)
Result:

Example for all Text Formatting
<html>
<body>
<p>The <abbr title="Kannada Sahitya Parishattu">KASAPA</abbr>
was founded in <del>1914</del> <ins>1915</ins>!
</p>
<p>May I Know this <acronym title="Kuppalli Venkatappa Puttappa">
KUVEMPU</acronym>?
</p>
<bdo dir="rtl">Kannada Sahitya Sammelana</bdo>
<blockquote>Kannada sahitya Parishattu.</blockquote>
<p><b>Note:</b>73th Kannada Sahithya Sammelana-Shimoga.</p>
A short quotation:<q>Prof. Nissar Ahmed</q>

(Contd..)
Result:
<address>
Recomended by kasapa.org<br/>
<a href="mailto:parishattu@gmail.com">Contact us</a><br/>
Address: Pampamahakavi road,<br/> Chamrajpet, Bangaluru-
560018,
<br/Phone:080-26612991,266628584,<br/>Fax:080-26523867
</address>
</body>
</html>

Example for all styles
<html>
<body style="background-color:skyblue">
<h1 style="background-color:yellow">
INDIAN SPACE RESEARCH ORGANIZATION </h1>
<p style="text-align:center;font-family:verdana;color:lime">
Dr Vikram Sarabhai considered as the father of Indian Space Programme.</p>
<p style="font-family:times;color:green">
Space science missions for better understanding of solar system and universe</p>
<p style="font-size:30px">
The GSLV-III or Geosynchronous Satellite Launch Vehicle Mark III </p>
</body>
</html>

(Contd..)
Result:

Example for all links and images
<html>
<body>
<p>
<a href="mailto:director@desidoc.drdo.in?Subject=New%20Tender">Send Mail</a>
</p>
<p><a href="http://www.drdo.gov.in/">DRDO</a>
<img src="http://t1.gstatic.com/images?q=tbn:9oTly8jwLrH0DM:
http://atlasaerospace.net/img/mig31-7.jpg" width=150 height=75
style="float:center;margin:10px 10px 0;border:1px solid"
alt="See full size image">
</p>
<a href="http://drdo.res.in:8080/alpha/">NEW DRDO SITE</a>
<p>This is another mailto link:
<a href="mailto:director@desidoc.drdo.in?cc=director@desidoc.drdo.in/
&bcc=anddirector@desidoc.drdo.in/&subject=walk-in%20interview&
body=ON%2022-07-2010%20AT%20DMRL!">Send mail!</a>
</p>

(Contd..)
<p>No border around the image, but still a link:
<a href="default.asp">
<img border="0" src="<img src="images/logo1.jpg" alt="DRDO Logo"
width="50" height="34" /></a>
</p>
<p>Locked in a frame?</p>
<a href="http://drdo.res.in:8080/alpha/English/index.jsp?pg=homebody.jsp"
target="_top">Click here!</a><br/>
<a href="http://www.drdo.gov.in" target="_blank">Visit drdo.gov.in !</a>
<p><a href="#A-3">See also Agni-3</a></p>
<h2>Agni-1</h2>
<p>Initial Ballistic Missile</p>
<h2>Agni-3</h2>
<p>This advanced Ballistic Missile</p>
</body>
</html>

Result:
(Contd..)

Example for all links and images
<html>
<body>
<p>An image:</p>
<img style="float: left; padding: 0px 10px 10px 0px;"
src="http://l.yimg.com/t/i/in/news/news15/images/astrology/Taurus.jpg"
width="50" height="50" border="0" alt="">
<p><p>An image from another folder:</p>
<p><img src="http:// www.search-this.com/ wp-content/ themes/big
blue/images/3logo.gif" align="bottom: alt="company logo" width="175"
height="100" /></p>
<p>An image from another folder:</p>
<p><img src="http://www.search-this.com/wp-content/themes/big-
blue/images/3logo.gif" align="top"
alt="company logo" width="175" height="100" /></p>
<p>An image:</p>
<img src="http://www.search-this.com/wp-content/themes/big-
blue/images/abc.gif"
title="abc" alt="abc" width="106" height="106" />
</body>
</html>

June 21, 2017 www.snipe.co.in 47www.snipe.co.in 47
Result:
(Contd..)

Example for Tables
www.snipe.co.in 48
<html>
<body>
<h4>Example for One column:</h4>
<table border="1"><tr><td>A</td></tr>
</table>
<h4>EX: For One row and three columns:</h4>
<table border="1"><tr><td>A</td><td>B</td><td>C</td></tr>
</table>
<h4>EX: For Two rows and three columns:</h4>
<table border="1">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
</table>
<h4>EX: For Normal border:</h4>
<table border="1">
<tr><td>B</td><td>Row</td></tr>
</table>

<h4>EX: For a thick border:</h4>
<table border="8">
<tr><td>T</td><td>Row</td></tr>
<tr><td>S</td><td>Row</td></tr>
</table>
<h4>EX: For very thick border:</h4>
<table border="15">
<tr><td>M</td><td>Row</td></tr>
<tr><td>N</td><td>Row</td></tr>
</table>
<h4>EX: For no borders:</h4>
<table><tr><td>G</td><td>H</td><td>I</td></tr>
<tr><td>J</td><td>K</td><td>L</td></tr>
</table>
</body>
</html>
(Contd..)

(Contd..)
www.snipe.co.in 50
Result:

Example for more Tables
www.snipe.co.in 51
<html>
<body>
<h4>Ex for Table headers:</h4>
<table border="1">
<tr><th>Name</th><th>Age</th><th>Sex</th></tr>
<tr><td>Laxmi Mittal</td><td>50</td><td>Male</td></tr>
</table>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr><th>Name</th><th colspan="2">FORBS Richest men's List</th></tr>
<tr><td>Mukesh Ambani</td><td>No:2(2009)</td><td>No:1(2010)</td></tr>
</table>
<h4>Ex: For Vertical headers:</h4>
<table border="1"><tr><th>Name:</th><td>Serena Williams</td></tr>
<tr><th>Age:</th><td>28</td></tr><tr><th>Region:</th><td>USA</td></tr>
<tr><th>Fame</th><td>No:1 Tennis Player</td></tr>
</table>

<h4>Cell that spans two rows:</h4>
<table border="1"><tr><th>Name:</th><td>Bill Gates</td></tr>
<tr><th rowspan="2">Rankings:</th><td>(2009)No:1</td></tr>
<tr><td>(2010)No:2</td></tr>
</table>
<h4>Tags in side the table:</h4>
<table border="1"><tr><td>WELCOME TO SNIPE IT SOLUTIONS</td>
<td>Cell contains another
table:<tableborder="1"><tr><td>3.14</td><td>48.10</td></tr>
<tr><td>7.90</td><td>9.0</td></tr>
</table>
<tr><td>Cell contains a list<ol><li>SPAIN</li>
<li>NETHERLAND</li><li>GERMANY</li><li>URUGUAE</li></ol></td>
<td><p>FIFA World Cup 2010 - SPAIN crowned world champions</p>
<p>Brazil to Host 2014 FIFA Soccer World Cup</p>
</td></tr>
</body>
</html>
(Contd..)

(Contd..)
www.snipe.co.in 53
Result:

Example for more Tables
<html>
<body>
<h3>Without cellpadding:</h3>
<tableborder="1"><tr><td>OLYMPIC</td><td>GAME</td></tr>
<tr><td>COMMNWEALTH</td><td>GAME</td></tr>
</table>
<h3>With cellpadding:</h3>
<table border="1" cellpadding="10">
<tr><td>CRICKET</td><td>GAME</td></tr>
<tr><td>TENNIS</td><td>GAME</td></tr>
</table>
<h4>Without cellspacing:</h4>
<table border="1">
<tr><td>First</td><td>Row</td></tr>
<tr><td>Second</td><td>Row</td></tr></table>
<h4>With cellspacing:</h4><table border="1" cellspacing="10">
<tr><td>GOLF</td><td>CLUB</td></tr>
<tr><td>HOCKY</td><td>CLUB</td></tr>
</table>

June 21, 2017 www.snipe.co.in 55June 21, 2017 www.snipe.co.in 55
<h4>With frame="border":</h4>
<tableframe="border"><tr><td>KABBADI</td>
<td>CLUB</td></tr>
<tr><td>BILLIARDS</td><td>CLUB</td></tr></table>
<h4>With frame="box":</h4><table frame="box">
<tr><td>SWIMMING</td><td>CLUB</td></tr>
<tr><td>TRUCKING</td><td>CLUB</td></tr>
</table>
<h4>With frame="void":</h4>
<table frame="void">
<tr><td>SOCOR</td><td>CLUB</td></tr>
<tr><td>FENCING</td><td>CLUB</td></tr></table>
<h4>With frame="above":</h4><table frame="above">
<tr><td>CHESS</td><td>CLUB</td></tr>
<tr><td>BASEBALL</td><td>CLUB</td></tr>
</table>
<h4>With frame="below":</h4>
<table frame="below">
<tr><td>CARROM</td><td>CLUB</td></tr>
<tr><td>FORMULAONE</td><td>CUB</td></tr></table>
(Contd..)

<h4>With frame="hsides":</h4>
<table frame="hsides">
<tr><td>INDORE</td><td>CLUB</td></tr><tr>
<td>PING-PONG</td>
<td>CLUB</td></tr>
</table>
<h4>With frame="vsides":</h4>
<table frame="vsides"><tr><td>KUNG-FU</td><td>CLUB</td></tr>
<tr><td>FOOTBALL</td><td>CLUB</td></tr>
</table>
<h4>With frame="lhs":</h4>
<table frame="lhs">
<tr><td>BOXING</td><td>CLUB</td></tr>
<tr><td>ARCHERY</td><td>CLUB</td></tr></table>
<h4>With frame="rhs":</h4><table frame="rhs">
<tr><td>MARATHON</td><td>CLUB</td></tr><tr>
<td>RACE</td><td>CLUB</td></tr>
</table>
</body>
</html>
(Contd..)

(Contd..)
Result:

Example for more Lists
<html>
<body>
<h4>Example for an Unordered List:</h4>
<ul><li>C</li><li>C++</li><li>JAVA</li></ul>
<h4>Example for an ordered List:</h4>
<ol><li>C</li><li>C++</li><li>JAVA</li></ol>
<h4>Numbered list:</h4>
<ol><li>Alpa</li><li>Beta</li><li>Gama</li><li>Theta</li></ol>
<h4>Letters list:</h4>
<ol type="A"><li>Bird Flue</li><li>Antrax</li> <li>Dengue</li><li>H1N1</li></ol>
<h4>Lowercase letters list:</h4><ol type="a"><li>Shark</li><li>Elephant</li>
<li>Bull</li><li>Cow</li></ol>
<h4>Roman numbers list:</h4>
<ol type="I"><li>Itai-Itai</li><li>Goiter</li><li>Influenza</li><li>Rabies</li></ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">

<li>Endoscopy</li><li>Laparoscopy</li><li>Radiotherapy</li><li>Mammography
</li></ol>
<h4>Ex: for Different bullets list:</h4><ul
type="disc"><li>ART</li><li>H1N1</li></ul>
<ul type="circle"><li>Bacteria</li><li>Virus</li></ul>
<ul type="square"><li>Diabetic</li><li>Asthma</li></ul>
<h4>Ex: for nested List:</h4><ul><li>China</li><li>India<ul><li>South India</li>
<ul><li>Karnataka</li><li>Andra Pradesh</li>
<li>Tamil Nadu</li><li>Kerala</li></ul>
<li>North India</li></ul></li><li>Africa</li></ul>
<h4>Ex: for a Definition List:</h4>
<dl><dt>Cricket</dt><dd>Outdoor Game</dd><dt>Chess</dt><dd>Indoor
Game</dd></dl>
</body>
</html>
(Contd..)

(Contd..)
Result:

Example for more Lists
<html>
<body>
<h3>Example for Text fields:</h3>
<form action="">
First name: <input type="text" name="firstname" /><br />
Pet name: <input type="text" name="Petname" /></form>
<h4>Ex: for checkbox:</h4><form action="">
<input type="checkbox" name="Land" value="land" /> I have a Land<br />
<input type="checkbox" name="Complex" value="Complex" /> I have a Complex
</form>
<h4>Ex for Radio buttons:</h4>
<form action="">
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female</form>
<h4>Ex: for Dropdown list:</h4>
<form action=""><select name="cars">

<option value="Mr.Raghu">Mr.Raghu</option>
<option value="Mr.Mallikarjun">Mr.Mallikarjun</option>
<option value="Mr.Halesh">Mr.Halesh</option></select></form>
<h4>Ex: for Text area:<h4>
<textarea rows="10" cols="30"> The Bangalore Metro Rail finally tookshape with
the Karnataka Government clearing the project in March, 2005 and the Union
Government giving its approval in April, 2006.</textarea>
<h4>Ex: for Text Button<h4>
<form action="">
<input type="button" value="SNIPE!"></form>
<form action=""><fieldset><legend>
Personal data:</legend>
Name: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" /></fieldset>
</form>
</body>
</html>
(Contd..)

(Contd..)
Result:

<html>
<body>
<h4>Ex: for Text button and submit button
<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="First Name" value="Vijay" /><br />
Last name: <input type="text" name="Last Name" value="Malya" /><br />
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female<br />
<input type="checkbox" name="Son" value="Son" /> I have a Son</br />
<input type="checkbox" name="Daughter" value="Daughter" /> I have a daughter
<input type="submit" value="Submit" />
</form>
Examples for Forms and Inputs

<h3>Ex: for Sending e-mail:</h3>
<form action="MAILTO:kingfisher@malya.com" method="post“
enctype="text/plain">
Name:<br />
<input type="text" name="name" value="your name" /><br />
E-mail:<br />
<input type="text" name="mail" value="your email" /><br />
Comment:<br />
<input type="text" name="comment" value="your comment" size="50" />
<br /><br /><input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
(Contd..)

Result:
(Contd..)

Example of different framesets
top
bottom
<frameset rows="16%,84%">
<frame src="top.htm" name="top">
<frame src="bottom.htm" name="bottom">
</frameset>

(Contd..)
tl tr
bottom
<frameset cols="50%,50%">
<frame src="tl.htm" name="tl">
<frame src="tr.htm" name="tr">
</frameset>
<frame src="bottom.htm" name="bottom">
</frameset>

(Contd..)
top
left right
<frame src="top.htm" name="top">
<frame src="left.htm" name="left">
<frame src="right.htm" name="right">
</frameset>
</frameset>

(Contd..)
topleft topright
botleft botright
<frameset rows="50%,50%" cols="50%,50%">
<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frame src="botright.htm" name="botright">
</frameset>

topleft topright
botleft
brtl brtr
botrbot
(Contd..)
<frame src="brtl.htm" name="brtl">
<frame src="brtr.htm" name="brtr">
</frameset>
<frame src="botrbot.htm" name="botrbot">
</frameset>
</frameset>

(Contd..)
<frameset rows="240,240" cols="320,320">
</frameset>
<frameset rows="50%,*" cols="320,*">
<frame src="topleft.htm"
name="topleft">
<frame src="topright.htm"
name="topright">
<frame src="botleft.htm"
name="botleft">
<frame src="botright.htm"
name="botright">
</frameset>
topleft topright
botleft botright

(Contd..)
topleft topright
botleft botright
</frameset>

(Contd..)
topleft topright
botleft botright
<frameset rows="50%,*" cols="320,*">
</frameset>

(Contd..)
<html>
<head>
<style type="text/css">
h1 { color:red; }
h2 { color:blue; }
p { color:green; }
</style>
</head>
<body>
<h1>'Infosys suffers fall in profits'</h1>
<h2>'Low vitamin D 'Parkinson's link'</h2>
<p>EU agrees fusion shortfall funds</p>
<a href="http://www.incredibleindia.com" style="text-decoration:none">Visit
incredibleindia.com!</a>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body><h1>China web filter hit by problems</h1></body>
</body>
</html>

(Contd..)

Examples for Meta tags
<html>
<head>
<meta name="author" content="Karvalo" />
<meta name="revised" content="2010/06/20" /></head>
<meta name="description" content="Free Web tutorials on HTML, CSS, XML">
<meta name="keywords" content="HTML, CSS, XML"></head><body>
<p>The meta elements on this page identifis the author and the revise date.</p>
<meta http-equiv="Refresh" content="5;url=http://www.kasapa.org" />
</head>
<body>
<h1>Have a look!</h1><h2>The new URL is: <a
href="http://www.kasapa.org">http://www.kasapa.org</a></h2>
<p>You will be redirected to the new address in five seconds.</p>
</body>
</html>

(Contd..)

Examples for HTML ID
<html>
<head>
<script type="text/javascript">
function change_header() {
document.getElementById ("myHeader").innerHTML="Have a
Nice day!";
}
</script>
</head>
<body>
<h1 id="myHeader">Welcome to Snipe!</h1>
<button onclick="change_header()">Change text</button>
</body>
</html>

Example for Meta tags

References
• http://www.w3.org/TR/html14/
• http://www.w3.org/address/
• http://www.w3.org/style/css/
• http://validator3.org/
• http://www.w3.org/

Thank You

Html

More Related Content

What's hot

Similar to Html

More from Mallikarjuna G D

Recently uploaded

Html