naresh i technologies by mr. ramesh...naresh i technologies by mr. ramesh naresh i ::technologies,...

Naresh i Technologies By Mr. Ramesh

Naresh i Technologies, Opp. Satyam Theatre, Ameerpet, Hyderabad, Ph: 040-23746666, 9000994007

::1::

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 element’s 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>



::2::

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 doesn’t 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 user’s 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



::3::

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>



::4::

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

out)

<center></center> Used to make the text center aligned (Not Supported in HTML 5)

<sup></sup> Used to make the text super script

<sub></sub> Used to make the text sub script

<br/> Used to create a line break

<hr/> Used to create a horizontal rule

<strong></strong> Used to indicate the text has strong importance and browsers will show the

contents of <strong> element in bold.

<big></big> Used to make the text larger (Not Supported in HTML 5)

<small></small> Used to make the text smaller

<em></em> Used to indicate emphasis that subtly changes the meaning of a sentence and

browsers will show the contents of <em> element in italic.

<abbr></abbr> 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></cite> cite tags defines a citation and displaying in italics

<address></address> Used to provide address of a person or office

<ins></ins> Used to show the content that has been inserted into a document.

<del></del> Used to show the text that has been deleted from the document.

<s></s> 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.

<h1></h1>

<h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> Used create headings and <h1> element will provide the heading with large

font and <h6> element with very small font.

<code></code> Used to specify the code of a program

<samp></samp> Used to indicate sample output of a program

<kbd></kbd> Used to indicate keyboard input for a program

<var></var> Used to indicate variable in a program

<bdo></bdo> 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>



::5::

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> <h2> This is heading level 2 </h2> <h3> This is heading level 3 </h3> <h4> This is heading level 4 </h4> <h5> This is heading level 5 </h5> <h6> This is heading level 6 </h6> </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>



::6::

<html> <body> <abbr title=”professor”> prof </abbr> <br/><br/> <acronym title=”Common Language Runtime”> CLR </acronym> </body> </html>



::7::

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.



::8::

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>



::9::

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>



::10::

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>



::11::

<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>



::12::

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> <a href=”#Top”>Top</a> <br/><br/> <h1>Chapter2</h1> <p> Provide some content for chapter2 with 20 to 30 lines </p> <br/><br/> <a name=”C3”></a> <a href=”#Top”>Top</a> <br/><br/> <h1>Chapter3</h1> <p> Provide some content for chapter3 with 20 to 30 lines </p> <br/><br/> </body>



::13::

</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/> <a href=”NamedAnchors.html#C2”> Chapter2 </a> <br/><br/> <a href=”NamedAnchors.html#C3”> Chapter3 </a> <br/><br/> </body> </html>



::14::

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”/> <figcaption> Garden </figcaption> </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>



::15::

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>



::16::

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.



::17::

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 doesn’t 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 Doesn’t 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> <noframes> Your Browser Doesn’t Support Frames </noframes> </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.

http://www.w3schools.com/tags/tag_frame.asp



::18::

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"/> <noframes> Your Browser Doesn’t Support Frames </noframes> </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>



::19::

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/>



::20::

<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>



::21::

New Elements in HTML 5 HTML 5 introduces the following new elements

Element Description <article> Defines an article in your document

<aside> Defines content aside from the page content

<audio> 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> 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.

<canvas> 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.

<command> 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



::22::

compulsory to specify icon Specifies url of an image that represents the command disabled Specifies that the command should be disabled checked Specifies that the command should be checked when the page loads. It applies only for type "radio" and "checkbox"

<dialog> Defines a dialog box or a window (supported only in chrome and safari 6)

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.



::23::

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> Specifies self-contained content

<figcaption> 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”/> <figcaption> Garden </figcaption> </figure> <br/> <br/> <a href=”d:\table.html”> Table.Html </a> </body> </html>

<footer> Defines a footer for a document or section or article

<header> Defines a header for a document or section or article

<hgroup> Groups heading (<h1> to <h6>) elements

<keygen> Defines a key-pair generator field for forms. It has the following attributes. Not supported in internet explorer Attribute Purpose



::24::

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

<mark> Defines marked/highlighted text.

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> Defines the result of a calculation. Not supported in internet explorer

<progress> Represents the progress of a task



::25::

Example : <!doctype html> <html> <body> Download progress: <progress value="40" max="100"> </progress> </body> </html>

<section> Defines a section in a document

<source> Defines multiple media resources for media elements (<video> and <audio>)

<summary> Defines a visible heading for a <details> element. Supported only in chrome and safari

<time> Defines a date/time. Doesn’t render anything special in any browser

<track> 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>



::26::

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 Control Text 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.

Password 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 Button and you have to write your own code for a button. It has value attribute to provide a caption for it.

Submit Submit button and it has automatic behavior to submit the current form to server

Reset 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"/>



::27::

<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.



::28::

Example : <!doctype html> <html> <body> <form> <input type="file"/> </form> </body> </html>

Hidden Defines a hidden input field

Image 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 Define a date control (year, month and day (no time))

DateTime Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second, based on UTC time zone)

Datetime-local Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone)

Month Define a month and year control (no time zone)



::29::

Week Define a week and year control (no time zone)

Time 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"> <input type="submit"> </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> <input type="submit"> </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 Purpose max specifies the maximum value allowed min specifies the minimum value allowed step specifies the legal number intervals value Specifies the default value

Example : <!doctype html> <html> <body> <form>

http://www.w3schools.com/tags/att_input_max.asp

http://www.w3schools.com/tags/att_input_min.asp

http://www.w3schools.com/tags/att_input_step.asp

http://www.w3schools.com/tags/att_input_value.asp



::30::

Quantity (between 10 and 50): <input type="number" min="10" max="50"> <input type="submit"> </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"> <input type="submit"> </form> </body> </html>

Search Defines a text field for entering a search string

Tel Define a field for entering a telephone number

url 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> <input type="submit"> </form> </body> </html>

New Form and Control Attributes In HTML 5 <Form> Attributes

AutoComplete 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.

Novalidate The novalidate attribute is a boolean attribute. When present, it specifies that the form-data (input) should not be validated when submitted.

<input> Attributes Autofocus The autofocus attribute is a boolean attribute. When present, it specifies that an <input>



::31::

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 Height

The height and width attributes specify the height and width of an <input> element. The 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> <input type="submit"> </form> </body>

Min and Max 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.

Multiple The multiple attribute is a boolean attribute. When present, it specifies that the user is



::32::

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.

Placeholder 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 [email protected]"><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.

Step 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.

<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>

http://www.w3schools.com/tags/tag_option.asp



::33::

<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>



::34::

</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.



::35::

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>

naresh i technologies by mr. ramesh...naresh i technologies by mr. ramesh naresh i ::technologies,...

Documents