HTML1 PDF

Naresh i Technologies
By Mr. Ramesh
HyperText Markup Language (HTML) is the main markup language for creating web pages and other
information that can be displayed in a web browser like Internet Explorer. The purpose of a web browser is
to read HTML documents and compose them into visible or audible web pages. The browser does not
display the HTML tags, but uses the tags to interpret the content of the page. In the name HyperText
Markup Language, HyperText refers to the fact that HTML allows you to create links that allow visitors to
move from one page to another quickly and easily. A Markup Language allows you to annotate text and
these annotations provide additional meaning to the contents of a document.
HTML code is made up of characters that live inside angled brackets(< and >) and these are called HTML
elements. HTML elements are made up of two tags: an opening tag and a closing tag(The closing tag has an
extra forward slash in it). Each HTML element tells the browser something about the information that sits
between its opening and closing tags. HTML tags most commonly come in pairs like <h1> (opening tag) and
</h1> (closing tag) , although some tags, known as empty elements, are unpaired, for example <br/>.
Attributes provide additional information about the contents of an element. They appear on the opening
tag of the element and are made up of two parts: a name and a value separated by an equals sign.
Attribute name indicates what kind of extra information you are supplying about the elements content. It
should be written in lowercase. The value is the information or setting for the attribute. It should be placed
in double quotes. Different attributes can have different values.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded
and can be used to create interactive forms. It provides a means to create structured documents by
denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It
can embed scripts written in languages such as JavaScript which affect the behavior of HTML web pages.
Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text
and other material. The W3C, maintainer of both the HTML and the CSS standards, encourages the use of
CSS over explicit presentational HTML markup.
HTML 5
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group (WHATWG). WHATWG was working with web forms and
applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new
version of HTML.
Some rules for HTML5 were established:
New features should be based on HTML, CSS, DOM, and JavaScript

Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to the public
DocType declaration at the top of HTML document specifies the type of document and this document
type declaration is required in XML documents. But in HTML it is optional. It is not a HTML element. Syntax
for doctype declaration in HTML 5 is <!doctype html>
Naresh i Technologies, Opp. Satyam Theatre, Ameerpet, Hyderabad, Ph: 040-23746666, 9000994007 ::1::
By Mr. Ramesh
Basic Tags Of HTML

<html></html>
HTML documents must start with <html> tag and must end with </html> tag.
<head></head>
Used to provide a title for the document, define java script and CSS required for the
page and meta data of the page.
<title></title>
Used to Define a title for the page that will be displayed in titlebar of the browser
while accessing the page. It must be inside the <head> element.
<script></script> Used to define java script functions required for the page.
<noscript></noscript>
The <noscript> tag is used to provide an alternate content for users that have
disabled scripts in their browser or have a browser that doesnt support
client-side scripting. The <noscript> element can contain all the elements that
you can find inside the < body> element of a normal HTML page. The content
inside the <noscript> element will only be displayed if scripts are not
supported, or are disabled in the users browser.
<style></style>
Used to define CSS styles required for the page. It must be inside the <head>
element.
<link></link>
The <link> tag defines the relationship between a document and an external
resource. The <link> tag is most used to link to style sheets. The <link> element is an
empty element, it contains attributes only. This element goes only in the head
section, but it can appear any number of times.
<meta></meta>
Used to provide meta data information of the page like author name, description,
keywords and refresh the page at specified interval. It must be within the <head>
element and it has the following syntax.
The following statement provides author name of the page
<meta name=author content=Naresh/>
The following statement provides description of the page
<meta name=description content=This Is Naresh Technologies Home Page/>
The following statement provides keywords for the page that will be used by search
engines to find your page
<meta name=keywords content=Naresh , Technologies, .Net, Java, Oracle/>
The following statement makes the page refresh for every 30 seconds
<meta http-equiv=refresh content=30/>
<body></body>
Used to specify the actual content to display on the page
By Mr. Ramesh
Creating HTML Page

To create a HTML page you can use any text editor like notepad, wordpad and MS Word. After writing
required HTML code for your page in any text editor save it with extension .html or .htm. To browse your
page open a browser and request for your page by specifying the complete path of your HTML page.
Example : The following example creates a HTML page with basic HTML tags
<!doctype html>
<html>
<head>
<title> Naresh I Technologies </title>
</head>
<body>
This is body of the page that will be displayed within the main area of the browser
</body>
</html>
By Mr. Ramesh
Formatting Tags Of HTML

<p></p>
Used to create a paragraph
<b></b>
Used to make the text bold
<i></i>
Used to make the text italic
<u></u>
Used to make the text underlined (this element was phased
<center></center>
<sup></sup>
<sub></sub>
<br/>
<hr/>
<strong></strong>
<big></big>
<small></small>
<em></em>
<abbr></abbr>
<cite></cite>
<address></address>
<ins></ins>
<del></del>
<s></s>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<code></code>
<samp></samp>
<kbd></kbd>
<var></var>
<bdo></bdo>
out)
Used to make the text center aligned (Not Supported in HTML 5)
Used to make the text super script
Used to make the text sub script
Used to create a line break
Used to create a horizontal rule
Used to indicate the text has strong importance and browsers will show the
contents of <strong> element in bold.
Used to make the text larger (Not Supported in HTML 5)
Used to make the text smaller
Used to indicate emphasis that subtly changes the meaning of a sentence and
browsers will show the contents of <em> element in italic.
Used to provide an abbreviation or acronym. In HTML 4 a separate
<acronym> element is used for acronym. But HTML 5 uses <abbr> element
for both abbreviation and acronym. Both have title attribute to provide the
full term.
cite tags defines a citation and displaying in italics
Used to provide address of a person or office
Used to show the content that has been inserted into a document.
Used to show the text that has been deleted from the document.
Used to indicate something that is no longer accurate or relevant but that
should not be deleted. Content of <s> element will usually be displayed with
a line through the center.
Used create headings and <h1> element will provide the heading with large
font and <h6> element with very small font.
Used to specify the code of a program
Used to indicate sample output of a program
Used to indicate keyboard input for a program
Used to indicate variable in a program
Use to specify the text direction full form of bdo is Bi Directional Override
<bdo dir=rtl>This Text Will Be Displayed From Right To Left</bdo>
By Mr. Ramesh
Example : The following example demonstrates how to create paragraphs and use <hr/> element.
<!doctype html>
<html>
<body>
<p> This is First Paragraph </p>
<hr/>
<p> This is Second Paragraph </p>
</body>
</html>
Example : The following example demonstrates the <b>, <i>, <u>, <sup> and <sub> elements.
<!doctype html>
<html>
<body>
<b> This line is in bold </b> <br/><br/>
<i> This line is in italic </i> <br/><br/>
<u> This line is underlined </u> <br/><br/>
This word is in <sup> superscript </sup> <br/><br/>
This word is in <sub> subscript </sub>
</body>
</html>
Example : The following example demonstrates heading elements <h1> to <h6>

<!doctype html>
<html>
<body>
<h1> This is heading level 1 </h1>
</body>
</html>
Example : The following example demonstrates <ins>, <del> and <s> elements
<!doctype html>
<html>
<body>
This Book was <del> Bad </del> <ins> Good </ins>
<h2> Sony Laptop <h2>
Actual Price <s> 45000 </s> <br/>
But Now Only 40000
</body>
</html>
Example : The following example demonstrates <abbr> and <acronym> elements

<!doctype html>
By Mr. Ramesh
<html>
<body>
<abbr title=professor> prof </abbr> <br/><br/>
<acronym title=Common Language Runtime> CLR </acronym>
</body>
</html>
By Mr. Ramesh
Creating Lists In HTML

HTML supports 4 types of lists, Ordered Lists, Unordered Lists , Definition Lists and Directory lists
Ordered Lists
Ordered lists are the list of items with numbering. To create ordered lists use <ol></ol> element. This
element has the attribute type to specify the type of numbering and it has the possible values 1, A, a, I,
and i. it has another attribute start to specify where to start numbering. In HTML 5 this element has a new
attribute reversed and when it is set to reversed then numbering will be given in descending order.
Inside the <ol> element use <li> element to create list of items.
Example : The following example demonstrates how to create ordered lists

<!doctype html>
<html>
<body>
<ol>
<li> Item1 </li>
<li> Item2 </li>
<li> Item3 </li>
</ol>
</body>
</html>
Example : The following example demonstrates nesting ordered lists

<!doctype html>
<html>
<body>
<ol>
<li> Item1 </li>
<li> Item2 </li>
<ol type=I>
<li> subitem1 </li>
<li> subitem2 </li>
<li> subitem3 </li>
</ol>
<li> Item3 </li>
</ol>
</body>
</html>
UnOrdered Lists
UnOrdered lists are the list of items with bullets. To create unordered lists use <ul></ul> element. This
element has the attribute type to specify the type of bullet and it has the possible values Circle,Square and
disc. Inside the <ul> element use <li> element to create list of items.
By Mr. Ramesh
Example : The following example demonstrates how to create unordered lists

<!doctype html>
<html>
<body>
<ul>
<li> Item1 </li>
<li> Item2 </li>
<li> Item3 </li>
</ul>
</body>
</html>
Example : The following example demonstrates nesting Unordered lists

<!doctype html>
<html>
<body>
<ul>
<li> Item1 </li>
<li> Item2 </li>
<ul type=square>
<li> subitem1 </li>
<li> subitem2 </li>
<li> subitem3 </li>
</ul>
<li> Item3 </li>
</ul>
</body>
</html>
Example : The following example demonstrates nesting of ordered and Unordered lists
<!doctype html>
<html>
<body>
<ul>
<li> Item1 </li>
<li> Item2 </li>
<ol type=a>
<li> subitem1 </li>
<li> subitem2 </li>
<li> subitem3 </li>
</ol>
<li> Item3 </li>
</ul>
</body>
</html>
By Mr. Ramesh
Definition Lists
Definition list is used to provide a list of definitions and use <dl> element to create definition list. Within
the element <dl> use the element <dt> to specify the definition term and the element <dd> to provide
definition for the term.
Example :The following example demonstrates how to create definition list

<!doctype html>
<html>
<body>
<dl>
<dt> C#.Net </dt>
<dd> C#.Net is one of the languages provided by Microsoft in .Net </dd>
<dt> ASP.Net </dt>
<dd> ASP.Net is a technology in .Net for developing Web Applications </dd>
<dt> SQL Server </dt>
<dd> SQL Server is an RDBMS </dd>
</dl>
</body>
</html>
Directory Lists (Not supported in HTML 5)

Directory list is used to create a list of directories. To create a directory list, use <dir> element and within
this use <li> element to specify the list.
Example : The following example demonstrates how to create directory lists

<!doctype html>
<html>
<body>
<dir>
<li>First</li>
<li>Second</li>
<li>Third</li>
</dir>
</body>
</html>
By Mr. Ramesh
Creating Tables in HTML

To create a table in HTML use <table> element. It has the attribute border to specify width of border of
cells of the table. Within the table to create rows use <tr> element and within the row to create headings
use <th> element and to create data use <td> element. Both <th> and <td> elements support attributes
colspan and rowspan to merge the cells horizontal and vertical. To set a caption for the table use
<caption> element immediately next to <table> element.
Example : The following example demonstrates how to create a table

<!doctype html>
<html>
<body>
<table border=1>
<caption> Student Information </caption>
<tr>
<th> Student Id </th>
<th> Student Name </th>
<th> Course </th>
</tr>
<tr>
<td> 1001 </td>
<td> A </td>
<td> .NET </td>
</tr>
<tr>
<td> 1002 </td>
<td> B </td>
<td> JAVA </td>
</tr>
<tr>
<td> 1003 </td>
<td> C </td>
<td> PHP </td>
</tr>
</table>
</body>
</html>
Example : The following example demonstrates how to merge cells in the table horizontal using colspan
attribute.
<!doctype html>
<html>
<body>
<table border=1>
<tr>
<th></th>
<th>9AM</th>
<th>10AM</th>
<th>11AM</th>
By Mr. Ramesh
<th>12PM</th>
</tr>
<tr>
<th> Monday </th>
<td>.Net</td>
<td>Java</td>
<td>PHP</td>
<td>Oracle </td>
</tr>
<tr>
<th> Tuesday </th>
<td colspan=2>.Net</td>
<td>Java</td>
<td>PHP</td>
</tr>
<tr>
<th> Wednesday </th>
<td>.Net</td>
<td>CPP</td>
<td colspan=2>PHP</td>
</tr>
</table>
</body>
</html>
Example : The following example demonstrates how to merge cells in the table vertical using rowspan
attribute.
<!doctype html>
<html>
<body>
<table border=1>
<tr>
<th></th>
<th>TV9</th>
<th>BBC</th>
<th>CNN</th>
</tr>
<tr>
<th>6PM 7PM</th>
<th rowspan=2>Movie</th>
<th>Comedy Show</th>
<th>News</th>
</tr>
<tr>
<th>7PM 8PM</th>
<th>Sports</th>
<th>Current Affairs</th>
</tr>
</table>
</body>
</html>
By Mr. Ramesh
Creating Hyperlinks in HTML

Hyperlinks are used to create links that allow the users to navigate from one page to another. To create
hyperlinks use <a> element. This element has the attribute href to specify the url of the document to
display when user click on that hyperlink. It has the attribute target to specify where to display the linked
document of the hyperlink and it has the possible values _blank to display the linked document in new
window or tab, _top opens the linked document in complete body of the current window, _parent opens
the linked document in parent frame, _self opens the linked document in same frame or window and
specifying a framename opns the linked document in the specified frmae.
Example : The following example demonstrates how to create hyperlinks

<!doctype html>
<html>
<body>
<a href=first.html> First.html </a><br/><br/>
<a href=Heading.html> Heading.html </a><br/><br/>
<a href=Table.html> Table.html </a>
</body>
</html>
Named Anchors
Named anchors are the anchors that created by specifying a name to it and purpose of named anchors is to
allow the users to navigate to a particular location in a document. To create a named anchor use name
attribute of <a> element. To create a hyperlink to a named anchor for the href attribute you have to
specify the name of the anchor prefixed with # symbol.
Example :
The following example demonstrates how to use named anchors to allow the users to
navigate to a particular location in the document.
<!doctype html>
<html>
<body>
<a name=Top></a>
<a href=#C1> <h1>Chapter1</h1></a>
<a href=#C2> <h1>Chapter2</h1></a>
<a href=#C3> <h1>Chapter3</h1></a> <br/><br/>
<a name=C1></a>
<a href=#Top>Top</a> <br/><br/>
<h1>Chapter1</h1>
<p> Provide some content for chapter1 with 20 to 30 lines </p> <br/><br/>
<a name=C2></a>
<h1>Chapter2</h1>
<a name=C3></a>
<h1>Chapter3</h1>
</body>
By Mr. Ramesh
</html>
Example : The following example demonstrates how to create hyperlinks from one document to another
to a specific location in the other document.
<!doctype html>
<html>
<body>
<a href=NamedAnchors.html#C1> Chapter1 </a> <br/><br/>
</body>
</html>
By Mr. Ramesh
Displaying Images In HTML

To display images in HTML use <img> element. It has the attribute src to specify the source file from where
you want to display image , alt attribute to specify alternate text to display in the place of image when
browser is unable display image, title attribute to specify a title for the image that will be displayed when
mouse is placed over the image for few seconds. In HTML 5 related to image two new elements are
provided <figure> and <figcaption> where <figure> is used to contain an image and <figcaption> is used to
provide a caption for the image that will be displayed below the image. <fighcaption> must be inside the
<figure> element.
Example : The following example demonstrates how to display images

<!doctype html>
<html>
<body>
<figure>
<img src=e:\images\garden.jpg alt=This Is A Garden Image Title=This Is A Garden Image/>
<figcaption> Garden </figcaption>
</figure>
</body>
</html>
Html provides an element <base> to provide path of a folder from where to take all source set for images
or any other elements like anchor and a common target for all anchors on the page. It must be within the
<head> element.
Example : The following example demonstrates how to use <base> element

<!doctype html>
<html>
<head>
<base href=e:\images\ target=_blank/>
</head>
<body>
<figure>
<img src=garden.jpg alt=This Is A Garden Image Title=This Is A Garden Image/>
</figure> <br/> <br/>
<a href=d:\table.html> Table.Html </a>
</body>
</html>
Example : The following example demonstrates how to make an image as hyperlink

<!doctype html>
<html>
<body>
<a href=table.html><img src=e:\images\garden.jpg width=100 height=100/></a>
</body>
</html>
By Mr. Ramesh
Creating Maps In An Image

You can use <map> element of html to divide the image into different areas and create each area
as a separate hyperlink. Within the <map> element use <area> element to define areas. <img> element
has an attribute usemap to specify name of the map to use for that image.
Example : The following example demonstrates how to create map for an image.
Create a html file with the name Sun.html as follows
<!doctype html>
<html>
<body>
<img src="sun.gif" width="145" height="126" alt="sun"/>
</body>
</html>
Create a html file with the name Mercury.html as follows

<!doctype html>
<html>
<body>
<img src="mercury.gif" width="145" height="126" alt="mercury"/>
</body>
</html>
Create a html file with the name Venus.html as follows

<!doctype html>
<html>
<body>
<img src="venus.gif" width="145" height="126" alt="Venus"/>
</body>
</html>
Create a html file with the name planet.html as follows

<!doctype html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"/>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.html">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.html">
</map>
</body>
</html>
By Mr. Ramesh
Run the planet.html that displays the planets image that is divided into three different areas and clicking
on those areas will display the corresponding html page containing closer image of sun, mercury and
venus.
By Mr. Ramesh
Creating Frames In HTML (Not Supported in HTML 5)

HTML frames allow authors to present documents in multiple views, which may be independent windows
or sub windows. Multiple views offer designers a way to keep certain information visible, while other views
are scrolled or replaced. For example, within the same window, one frame might display a static banner, a
second a navigation menu, and a third the main document that can be scrolled through or replaced by
navigating in the second frame.
The <frameset> tag defines a frameset. The <frameset> element holds one or more <frame> elements.
Each < frame> element can hold a separate document. The <frameset> element specifies how many
columns or rows there will be in the frameset, and how much percentage/pixels of space will occupy each
of them. <frame> element has src element to specify the path of html document to display within that
frame.
Use <noframes> element to specify the alternate content to display in the browsers that doesnt support
frames.
Example : The following example demonstrates how to create frames. This example will divide the page
into 3 frames vertically and displays three different pages within them. To divide the page into 3 frames
horizontally use rows attribute instead of cols attribute.
<!doctype html>
<html>
<frameset cols="30%,*,25%">
<frame src="Headings.html">
<frame src="Table.Html">
<frame src="Image.html">
<noframes> Your Browser Doesnt Support Frames </noframes>
</frameset>
</html>
Example :
The following example divides the page into two frames horizontally and then the second
frame is again divided into two frames vertically.
<!doctype html>
<html>
<frameset rows="50%,50%">
<frame src="area.html">
<frameset cols="25%,75%">
<frame src="sun.html">
<frame src="venus.html">
</frameset>
</frameset>
</html>
Example : The following example creates two frames on the page vertically and within the first frame
displays a page containing hyperlinks and clicking on these hyperlinks will display the corresponding
document in the second frame.
By Mr. Ramesh
Create a html page with name links.html as follows

<!doctype html>
<html>
<body>
<a href="area.html" target="f1"> Area </a><br/><br/>
<a href="sun.html" target="f1"> sun </a><br/><br/>
<a href="venus.html" target="f1"> venus </a><br/><br/>
</body>
</html>
Create another html page with the name frames.html as follows

<!doctype html>
<html>
<frameset cols="25%,*">
<frame src="links.html">
<frame name="f1"/>
</frameset>
</html>
Run the page frames.html in browser and click on the links available in left hand side frame to display
the corresponding document in the right hand side frame.
<iframe>
This element is used to create an inline frame and it is used to display a web page within another web
page. It has width and height attributes to specify width and height of the iframe and src attribute to
specify the html document to display within it. Frameborder attribute is used to specify whether or not to
provide a border for the iframe and it takes two values 1 and 0.
Example : The following example demonstrates how to use iframe.

<!doctype html>
<html>
<body>
<p> This example demonstrates how to use iframe to display a webpage within another
webpage. </p>
<iframe width="200" height="200" src="area.html" frameborder="0"/>
</body>
</html>
By Mr. Ramesh
Playing Background Sound

To play a background sound when page is loaded into browser, use <bgsound> element. This
element has the attribute src to specify the audio file to play and loop to specify how many times the audio
has to be repeated.
Example : The following example demonstrates how to play a background sound

<!doctype html>
<html>
<head>
<bgsound src="Jingle Bells.wav" loop="3">
</head>
<body>
</body>
</html>
Making The Text Blink

To make the text blink continuously use the element <blink>. This is not supported in internet explorer and
chrome browsers.
Example : The following example demonstrates how to use the element <blink>
<!doctype html>
<html>
<body>
<h1><blink>Naresh Technologies</blink></h1>
</body>
<body>
</body>
</html>
Making The Text Scrolling

To make text scrolling , use the element <marquee>. This element has the following attributes.
direction
used to specify behavior of the marquee and it has the possible values slide, alternate,
right, up, down
Loop
used to specify how many times to repeat the marquee
ScrollDelay used to specify the delay of scrolling and small value for this will make scrolling fast
Scrollamount used to specify the amount to scroll at a time. Smaller value make the scrolling slow.
Example : The following demonstrates how to use <marquee> element

<!doctype html>
<html>
<body>
<marquee> <img src="stork.gif"/></marquee><br/><br/>
By Mr. Ramesh
<marquee direction="right"> <img src="dog.gif"/></marquee><br/><br/>

</body>
</html>
Embedding Audio And Video In HTML

To play audio or video in html, use the element <embed>. It has the attributes src to specify the
audio or video file to play, width and height to specify the width and height for the video or audio.
Example : The following example demonstrates how to play audio or video using the element <embed>
<!doctype html>
<html>
<body>
<embed src="wildlife.wmv" width="300" height="300"/>
</body>
</html>
By Mr. Ramesh
New Elements in HTML 5
HTML 5 introduces the following new elements
Element
<article>
<aside>
<audio>
Description
Defines an article in your document
Defines content aside from the page content
Used play an audio file. Currently, there are 3 supported file formats for the <audio>
element: MP3, Wav, and Ogg. Internet explorer 9 and higher versions support only
mp3 format, chrome 6 and higher versions support all three formats and firefox 3.6
and higher versions support Wav and ogg formats. It has the following attributes.
Attribute
Purpose
Src
Specifies the URL of the audio file
Autoplay
Specifies that the audio will start playing as soon as it is ready
Controls
Specifies that audio controls should be displayed (such as a play/
pause button etc).
Loop
Specifies that the audio will start over again, every time it is
Finished
Muted
Specifies that the audio output should be muted
Example :
<!doctype html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
<bdi>
<canvas>
<command>
Isolates a part of text that might be formatted in a different direction from other text
outside it. Full form of it is Bi Directional Isolation. This element is useful when
embedding user-generated content with an unknown directionality.
Used to draw graphics, on the fly, using scripting languages like JavaScript. The
<canvas> tag is only a container for graphics, you must use a script to actually draw the
graphics. Any text inside the <canvas> element will be displayed in browsers that does
not support <canvas>. It has height and width attributes to specify height and width.
Defines a command button that a user can invoke. Currently this is not supported in
any browser. It has the following important attributes
Attribute
Purpose
type
Specifies the type of command. It has three options checkbox,
command and radio
radiogroup
Specifies the name of the group of commands that will be toggled
when the command itself is toggled. It applies only for type
"radio"
label
Specifies the name of the command, as shown to the user and it is
By Mr. Ramesh
compulsory to specify
Specifies url of an image that represents the command
Specifies that the command should be disabled
Specifies that the command should be checked when the page
loads. It applies only for type "radio" and "checkbox"
Defines a dialog box or a window (supported only in chrome and safari 6)
icon
disabled
checked
<dialog>
Example :
<!doctype html>
<html>
<body>
<table border="1">
<tr>
<th>January <dialog open>This is an open dialog window</dialog></th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>31</td>
<td>28</td>
<td>31</td>
</tr>
</table>
</body>
</html>
<details>
The <details> tag can used to create an interactive widget that the user can open and
close. Any sort of content can be put inside the <details> tag. The <summary> tag is
used to specify a visible heading for the details. The heading can be clicked to
view/hide the details. Supported only in chrome and safari 6
Example :
<!doctype html>
<html>
<body>
<details>
<summary>Click Here To Open or Close</summary>
<p> This is a widget created with <details> element of html 5 and it works only
in chrome and safari 6</p>
</details>
</body>
</html>
<embed>
Defines a container for an external application like multimedia files. It has src attribute
to specify the url of the media file to play and the attributes width and height to
specify width and height of the media.
By Mr. Ramesh
Example :
<!doctype html>
<html>
<body>
<embed src="wildlife.wmv" width="300" height="300"/>
</body>
</html>
<object>
Defines a container for an external application like multimedia files. It can be used to
place adobe flash or Microsoft Silverlight or any plugin in an html page. It has data
attribute to specify the url of the media file to play and the attributes width and height
to specify width and height of the media. While placing any plugin like flash or
silverlihght, more attributes are available.
Example :
<!doctype html>
<html>
<body>
<object data="wildlife.wmv" width="300" height="300"/>
</body>
</html>
<figure>
<figcaption>
Specifies self-contained content

Defines a caption for a <figure> element
Example :
<!doctype html>
<html>
<head>
<base href=e:\images\ target=_blank/>
</head>
<body>
<figure>
<img src=garden.jpg alt=This Is A Garden Image Title=This Is A Garden Image/>
</figure> <br/> <br/>
<a href=d:\table.html> Table.Html </a>
</body>
</html>
<footer>
<header>
<hgroup>
<keygen>
Defines a footer for a document or section or article

Defines a header for a document or section or article
Groups heading (<h1> to <h6>) elements
Defines a key-pair generator field for forms. It has the following attributes. Not
supported in internet explorer
Attribute
Purpose
By Mr. Ramesh
Challenge
Specifies that the value of the <keygen> element should be

challenged when submitted
Disabled
Specifies that a <keygen> element should be disabled
Keytype
Specifies the security algorithm of the key. It has three possible
options rsa, dsa and ec
Defines marked/highlighted text.
<mark>
Example :
<!doctype html>
<html>
<body>
<p><mark>HTML 5</mark> provides several new features that makes web page
development more flexible</p>
</body>
</html>
<meter>
Defines a scalar measurement within a known range (a gauge). Not supported in

internet explorer
Example :
<!doctype html>
<html>
<body>
<meter value="4" min="0" max="10">4 out of 10</meter><br>
<meter value="0.7">70%</meter>
</body>
</html>
<nav>
Defines navigation links
Example :
<!doctype html>
<html>
<body>
<nav>
<a href="Area.html">Area</a> |
<a href="Sun.html">Sun</a> |
<a href="Mercury.html">Mercury</a> |
<a href="Venus.html">Venus</a>
</nav>
</body>
</html>
<output>
<progress>
Defines the result of a calculation. Not supported in internet explorer

Represents the progress of a task
By Mr. Ramesh
Example :
<!doctype html>
<html>
<body>
Download progress:
<progress value="40" max="100">
</progress>
</body>
</html>
<section>
<source>
<summary>
<time>
<track>
Defines a section in a document

Defines multiple media resources for media elements (<video> and <audio>)
Defines a visible heading for a <details> element. Supported only in chrome and safari
Defines a date/time. Doesnt render anything special in any browser
Defines text tracks for media elements (<video> and <audio>). Currently not supported
in any browser
<video>
Defines a video or movie
Example :
The following example demonstrates the use of <video>, <object> and

<embed> elements.
<!doctype html>
<html>
<body>
<video width="320" height="240" controls autoplay>
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed width="320" height="240" src="movie.swf">
</object>
</video>
</body>
</html>
By Mr. Ramesh
Creating Controls In HTML 5
Controls are used to accept input from user and provide output to the user. HTML provides
elements for creating controls in HTML pages and they are as follows.
<form> element
This element is used to create a form on html page , which is a logical grouping of controls available
on the page. It has the attribute name to provide a name to the form, action attribute to specify the page
to which the data of current page has to be submitted and method attribute to specify which method to
use for submitting this page to server.
<input> Element
This element is used to create textbox, password, checkbox, radio button, button, submit button,
reset button and file upload controls. It has an attribute type to specify the type of control you want to
create. It has the attribute name to provide a name to the control. Various values for the type attribute
and the controls created for that type are as follows.
Type
Text
Password
Button
Submit
Reset
Control
TextBox and it can be used to accept or display almost any type of data except
images and audio and video. It has value attribute to provide a default value for it.
TextBox that accepts password. The data in this control will not be displayed as it is and
displayed as either * or . It has value attribute to provide a default value for it.
Button and you have to write your own code for a button. It has value attribute to
provide a caption for it.
Submit button and it has automatic behavior to submit the current form to server
Reset button and it has automatic behavior of resetting all controls on the page to their
default values. It has value attribute to provide a caption for it.
Example :
The following example demonstrates how to create textbox, password,

submit and reset buttons
<!doctype html>
<html>
<body>
<form>
<table>
<tr>
<td> User Id </td>
<td> <input type="text" name="txtuid"/></td>
</tr>
<tr>
<td> Password </td>
<td> <input type="password" name="txtpwd"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="submit"/>
By Mr. Ramesh
<input type="reset" value="reset"/>

</td>
</tr>
</table>
</form>
</body>
</html>
Checkbox
Checkbox and it is used to accept either Boolean values or provide multiple options to the
user from which user can select one or more options. It has the attribute value to provide
a value for it.
Example :
<!doctype html>
<html>
<body>
<form>
<h2> Select The Topics You Learned </h2>
<input type="checkbox" value=".Net" name="C1"/>.Net<br/><br/>
<input type="checkbox" value="Java" name="C2"/>Java<br/><br/>
<input type="checkbox" value="PHP" name="C3"/>PHP<br/><br/>
<input type="checkbox" value="SQL Server" name="C4"/>SQL Server<br/><br/>
<input type="checkbox" value="Oracle" name="C5"/>Oracle<br/><br/>
</form>
</body>
</html>
Radio
Radio button and it is used to provide multiple options to the user from which user can
select only one option. It has the attribute value to provide a value for it.
Example :
<!doctype html>
<html>
<body>
<form>
<h2> Select Your Qualification </h2>
<input type="radio" value="SSC" name="R1"/>SSC<br/><br/>
<input type="radio" value="Intermediate" name="R1"/>Intermediate<br/><br/>
<input type="radio" value="Graduate" name="R1"/>Graduation<br/><br/>
<input type="radio" value="PG" name="R1"/>Post Graduation<br/><br/>
<input type="radio" value="Phd" name="R1"/>Phd<br/><br/>
</form>
</body>
</html>
File
Fileupload and it is used to allow the user to select a file that he wants to upload to the
server.
By Mr. Ramesh
Example :
<!doctype html>
<html>
<body>
<form>
<input type="file"/>
</form>
</body>
</html>
Hidden
Image
Defines a hidden input field

Creates an image as a submit button
Example :
<!doctype html>
<html>
<body>
<form>
First name: <input type="text><br>
Last name: <input type="text" ><br>
<input type="image" src="submit.png" alt="Submit" width="120" height="50">
</form>
</body>
</html>
New Types For <input> Element In HTML 5

Color
Defines a color picker
Example :
<!doctype html>
<html>
<body>
<form >
Select your favorite color: <input type="color"><br>
<input type="submit">
</form>
</body>
</html>
Date
DateTime
Datetime-local
Month
Define a date control (year, month and day (no time))

Defines a date and time control (year, month, day, hour, minute, second, and fraction of
a second, based on UTC time zone)
Defines a date and time control (year, month, day, hour, minute, second, and fraction of
a second (no time zone)
Define a month and year control (no time zone)
By Mr. Ramesh
Week
Time
Define a week and year control (no time zone)

Defines a control for entering a time (no time zone)
Example :
<!doctype html>
<html>
<body>
<form>
Birthday <input type="date"><br/><br/>
Birthday (date and time) <input type="datetime"><br/><br/>
Birthday (date and time) <input type="datetime-local"><br/><br/>
Birthday (month and year) <input type="month"><br/><br/>
Select a week <input type="week"><br/><br/>
Select a time <input type="time">
</form>
</body>
</html>
Email
Define a field for an e-mail address (will be automatically validated when submitted)
Example :
<!doctype html>
<html>
<body>
<form>
E-mail: <input type="email"><br>
</form>
</body>
</html>
Number
Define a field for entering a number (You can also set restrictions on what numbers are
accepted). Use the following attributes to specify restrictions
Attribute
max
min
step
value
Purpose
specifies the maximum value allowed
specifies the minimum value allowed
specifies the legal number intervals
Specifies the default value
Example :
<!doctype html>
<html>
<body>
<form>
By Mr. Ramesh
Quantity (between 10 and 50): <input type="number" min="10" max="50">

</form>
</body>
</html>
Range
Define a control for entering a number whose exact value is not important (like a slider
control). You can also set restrictions on what numbers are accepted
Example :
<!doctype html>
<html>
<body>
<form>
Select Rating In The Range Of 1 and 10 <input type="range" min="1" max="10">
</form>
</body>
</html>
Search
Tel
url
Defines a text field for entering a search string

Define a field for entering a telephone number
Define a field for entering a URL (will be automatically validated when submitted)
Example :
<!doctype html>
<html>
<body>
<form>
Specify Url <input type="url"><br>
</form>
</body>
</html>
New Form and Control Attributes In HTML 5

<Form> Attributes
AutoComplete
Novalidate
The autocomplete attribute specifies whether a form or input field should have
autocomplete on or off. When autocomplete is on, the browser automatically complete
values based on values that the user has entered before. It is possible to have
autocomplete "on" for the form, and "off" for specific input fields, or vice versa. The
autocomplete attribute works with <form> and the following <input> types: text, search,
url, tel, email, password, datepickers, range, and color.
The novalidate attribute is a boolean attribute. When present, it specifies that the formdata (input) should not be validated when submitted.
<input> Attributes
Autofocus
The autofocus attribute is a boolean attribute. When present, it specifies that an <input>
By Mr. Ramesh
element should automatically get focus when the page loads.

Form
The form attribute specifies one or more forms an <input> element belongs to. To refer
to more than one form, use a space-separated list of form ids.
Formaction
The formaction attribute specifies the URL of a file that will process the input control
when the form is submitted. The formaction attribute overrides the action attribute of
the <form> element. The formaction attribute is used with type "submit" and "image"
only.
Formmethod
The formmethod attribute defines the HTTP method for sending form-data to the action
URL. The formmethod attribute overrides the method attribute of the <form> element.
The formmethod attribute can be used with type "submit" and image" only.
Formnovalidate The novalidate attribute is a boolean attribute. When present, it specifies that the
<input> element should not be validated when submitted. The formnovalidate attribute
overrides the novalidate attribute of the <form> element. The formnovalidate attribute
can be used with type "submit" only.
Formtarget
The formtarget attribute specifies a name or a keyword that indicates where to display
the response that is received after submitting the form. The formtarget attribute
overrides the target attribute of the <form> element. The formtarget attribute can be
used with type "submit" and "image" only.
Width
and The height and width attributes specify the height and width of an <input> element. The
Height
height and width attributes are only used with <input type="image">. Always specify
both the height and width attributes for images. If height and width are set, the space
required for the image is reserved when the page is loaded. However, without these
attributes, the browser does not know the size of the image, and cannot reserve the
appropriate space to it. The effect will be that the page layout will change during
loading.
List
The list attribute refers to a <datalist> element that contains pre-defined options for an
<input> element.
Example :
<!doctype html>
<html>
<body>
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
</body>
Min and Max
Multiple
The min and max attributes specify the minimum and maximum value for an <input>
element. The min and max attributes works with the following input types: number,
range, date, datetime, datetime-local, month, time and week.
The multiple attribute is a boolean attribute. When present, it specifies that the user is
Placeholder
By Mr. Ramesh
allowed to enter more than one value in the <input> element. The multiple attribute
works with the following input types: email, and file. With email allows the user to enter
multiple emails separated with comma and with file allows the user to select multiple
files.
The placeholder attribute specifies a short hint that describes the expected value of an
input field (e.g. a sample value or a short description of the expected format). The hint is
displayed in the input field when it is empty, and disappears when the field gets focus.
The placeholder attribute works with the following input types: text, search, url, tel,
email, and password.
Example :
<!doctype html>
<html>
<body>
<form action="demo_form.asp">
<input type="text" placeholder="First name"><br>
<input type="text" placeholder="Last name"><br>
<input type="email" placeholder="Email as name@domain.com"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Required
The required attribute is a boolean attribute. When present, it specifies that an input
field must be filled out before submitting the form. The required attribute works with
the following input types: text, search, url, tel, email, password, date pickers, number,
checkbox, radio, and file.
The step attribute specifies the legal number intervals for an <input> element.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
The step attribute can be used together with the max and min attributes to create a
range of legal values. The step attribute works with the following input types: number,
range, date, datetime, datetime-local, month, time and week.
Step
<Select> Element
The <select> element is used to create a drop-down list or list box. The <option> elements inside the
<select> element define the available options in the list. For the <option> attribute set the attribute
selected to selected to make that option selected by default. <select> element supports the attribute size
to specify the number of visible options in the drop-down list and when this is set then it will create a list
box, multiple to specify whether or not user can select multiple options and same as <input> element it
also supports the attributes autofocus, required and form.
Example :
<!doctype html>
<html>
<body>
<form>
By Mr. Ramesh
<h1> Drop Down List </h1>

<select>
<option>Select Your Qualification</option>
<option value="SSC">SSC</option>
<option value="Intermediate">Intermediate</option>
<option value="Graduate" selected="selected">Graduation</option>
<option value="Post Graduate">Post Graduation </option>
<option value="Phd">Phd</option>
</select>
<h1> List Box </h1>
<select multiple="multiple">
<option>Select The Technologies You Learned</option>
<option value=".Net" selected="selected">.Net</option>
<option value="Java">Java</option>
<option value="PHP">PHP</option>
<option value="SQL Server">SQL Server</option>
<option value="Oracle">Oracle</option>
</select>
</form>
</body>
</html>
You can use <optgroup> to group related options in a drop-down list. If you have a long list of options,
groups of related options are easier to handle for a user. It has the attribute label to provide a caption for
the group.
Example :
<!doctype html>
<html>
<body>
<form>
<h1> Drop Down List </h1>
<select>
<option>Select An Item To Purchase</option>
<optgroup label="Input Devices">
<option value="keyboard">Keyboard</option>
<option value="Mouse">Mouse</option>
<option value="Scanner">Scanner</option>
</optgroup>
<optgroup label="Output Devices">
<option value="Printer">Printer</option>
<option value="Monitor">Monitor</option>
<option Value="fax">Fax</option>
</optgroup>
<optgroup label="Storage Devices">
<option value="Hard Disk"> Hard Disk</option>
<option value="Pen Drive"> Pen Drive </option>
</optgroup>
By Mr. Ramesh
</select>
<h1> List Box </h1>
<select multiple="multiple">
<option>Select An Item To Purchase</option>
<optgroup label="Input Devices">
<option value="keyboard">Keyboard</option>
<option value="Mouse">Mouse</option>
<option value="Scanner">Scanner</option>
</optgroup>
<optgroup label="Output Devices">
<option value="Printer">Printer</option>
<option value="Monitor">Monitor</option>
<option Value="fax">Fax</option>
</optgroup>
<optgroup label="Storage Devices">
<option value="Hard Disk"> Hard Disk</option>
<option value="Pen Drive"> Pen Drive </option>
</optgroup>
</select>
</form>
</body>
</html>
<TextArea> Element
The <textarea> element defines a multi-line text input control. A text area can hold an unlimited
number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area
can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.
Same as <input> element it supports the attributes autofocus, required, and placeholder and wrap
attribute is new in HTML 5 and has two possible values hard and soft, maxlength attribute that also new in
HTML 5 is used to specify the maximum number of characters allowed into textarea.
Example :
<!doctype html>
<html>
<body>
<textarea rows="4" cols="50">
Text area is used to provide a textbox that accepts multiple lines of text like address and any
comments from user
</textarea>
</body>
</html>
<fieldset> and <legend> Elements

<fieldset> element is used to create a logical grouping of controls in a form and this will create a
border around the controls within the <fieldset> element. <legend> element is used to provide a title for
the fieldset that will be displayed at the top right corner of the fieldset.
By Mr. Ramesh
Example :
<!doctype html>
<html>
<body>
<form>
<fieldset>
<legend> Login </legend>
<table>
<tr>
<td>User Id</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="login"/></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>

HTML1 PDF

Uploaded by

Copyright:

Available Formats

HTML1 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML1 PDF

Uploaded by

Copyright:

Available Formats

Naresh i Technologies

New features should be based on HTML, CSS, DOM, and JavaScript

Basic Tags Of HTML

Used to specify the actual content to display on the page

Creating HTML Page

Formatting Tags Of HTML

Example : The following example demonstrates heading elements <h1> to <h6>

Example : The following example demonstrates <abbr> and <acronym> elements

Creating Lists In HTML

Example : The following example demonstrates how to create ordered lists

Example : The following example demonstrates nesting ordered lists

Example : The following example demonstrates how to create unordered lists

Example : The following example demonstrates nesting Unordered lists

Example :The following example demonstrates how to create definition list

Directory Lists (Not supported in HTML 5)

Example : The following example demonstrates how to create directory lists

Creating Tables in HTML

Example : The following example demonstrates how to create a table

Creating Hyperlinks in HTML

Example : The following example demonstrates how to create hyperlinks

Displaying Images In HTML

Example : The following example demonstrates how to display images

Example : The following example demonstrates how to use <base> element

Example : The following example demonstrates how to make an image as hyperlink

Creating Maps In An Image

Create a html file with the name Mercury.html as follows

Create a html file with the name Venus.html as follows

Create a html file with the name planet.html as follows

Creating Frames In HTML (Not Supported in HTML 5)

Create a html page with name links.html as follows

Create another html page with the name frames.html as follows

Example : The following example demonstrates how to use iframe.

Playing Background Sound

Example : The following example demonstrates how to play a background sound

Making The Text Blink

Making The Text Scrolling

Example : The following demonstrates how to use <marquee> element

<marquee direction="right"> <img src="dog.gif"/></marquee><br/><br/>

Embedding Audio And Video In HTML

Specifies self-contained content

Defines a footer for a document or section or article

Specifies that the value of the <keygen> element should be

Defines a scalar measurement within a known range (a gauge). Not supported in

Defines navigation links

Defines the result of a calculation. Not supported in internet explorer

Defines a section in a document

Defines a video or movie

The following example demonstrates the use of <video>, <object> and

The following example demonstrates how to create textbox, password,

<input type="reset" value="reset"/>

Defines a hidden input field

New Types For <input> Element In HTML 5

Defines a color picker

Define a date control (year, month and day (no time))

Define a week and year control (no time zone)

Quantity (between 10 and 50): <input type="number" min="10" max="50">

Defines a text field for entering a search string

New Form and Control Attributes In HTML 5

element should automatically get focus when the page loads.