HTML5 - What is HTML5 & Brief Description

HTML5 is the newest version of HTML.
HTML5 is the co-operation between World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
HTML5 works are still in progress. Most Major browsers started supporting the new features of html5 to some extent, may not be all but they are adding support for more tags over time.

HTML5 New Features

1) New Elements
2) New Attributes
3) Video & Audio
4) 2D/3D Graphics
5) Local Storage
6) Local SQL Database
7) Web Applications

HTML5 Key Rules

1) New features should be based on html, css, dom and JavaScript
2) We should reduce the use of external plug-in (like flash etc.)
3) Better Error Handling
4) Extra markup to replace scripting
5) Development Process should be visible

HTML5 DOCTYPE Declaration



HTML5 Basic Page Structure



HTML5 Tutorial







Removed Elements in HTML5

Several elements in use with HTML4 has been removed in HTML5:











<br /> <frameset><br /> <frame><br /> <br /> <span style="font-family:arial"><span style="font-family:arial"><b><span style="font-size:28px">New Elements <span style="color:#808080">in HTML5<br /> </span></span></b></span><b><span style="font-size:20px"><br /> HTML5 New ‘Canvas’ Elements<br /> </span></b></span><b>Tag : </b><canvas><br /> <b>Description: </b> This tag is used to draw graphics on fly, via scripting language (for ex. JavaScript)<br /> <b>Ex:</b> <canvas id=”canvas_container” width="200" height="100" style="border:1px solid #c3c3c3;" > </canvas><br /> <span style="font-family:arial"><span style="font-size:20px"><b><br /> HTML5 New Media Elements</b></span> <br /> </span><b><br /> Audio Element:</b><br /> <b>Tag: </b><audio><br /> <b>Description:</b> This element is used to play an audio file<br /> <b><br /> Video Element:</b><br /> <b>Tag: </b><video><br /> <b>Description:</b> This element is used to play a video file<br /> <b><br /> Source Element:</b><br /> <b>Tag: </b><source><br /> <b>Description:</b> This element is used for multiple media resources (audio and video both)<br /> <b><br /> Embed Element:</b><br /> <b>Tag: </b><embed><br /> <b>Description:</b> It creates a container for an external application or interactive content (any plug-in) like flash animation.<br /> <b><br /> Track Element:</b><br /> <b>Tag: </b><track><br /> <b>Description:</b> Its display text tracks for video/audio file.<br /> <span style="font-family:arial"><span style="font-size:20px"><b><br /> HTML5 New Form Elements</b></span> <br /> </span><b><br /> DataList Element:</b><br /> <b>Tag: </b><datalist><br /> <b>Description: </b>This shows you a list of pre-defined options for input elements field<br /> <b><br /> Keygen Element:</b><br /> <b>Tag: </b><keygen><br /> <b>Description: </b>This defines a key-pair generator field for the form<br /> <b>Output Element:</b><br /> <b>Tag: </b><output><br /> <b>Description: </b>Defines the result of a calculation.<br /> <br /> <span style="font-family:arial"><span style="font-family:arial"><span style="font-size:20px"><b>HTML5 New Form Attributes</b></span></span></span><span style="font-family:arial"><b> <br /> <br /> autocomplete attribute<br /> </b>This automatically displays the list of the values, which were entered earlier and based on the user enters value on the text field.<b> <br /> <br /> novalidate attribute</b>This is a Boolean attribute when mentioned in tag, the form will be submitted without validating the form data.<br /> <br /> </span><span style="font-family:arial"><span style="font-size:20px"><b>HTML5 New Structural /Semantic Elements</b></span> <br /> <b><br /> Section Element:<br /> </b><b>Tag: </b>< section><br /> <b>Description: </b>Its defines a section in a document<br /> <b><br /> Article Element:<br /> </b><b>Tag: </b>< article><br /> <b>Description: </b>Its defines an article<br /> <b><br /> Nav Element:<br /> </b><b>Tag:</b> </span><nav><span style="font-family:arial"><b>Description: </b>Its defines a navigation links.<br /> <b><br /> Aside Element:<br /> </b><b>Tag: </b>< aside><br /> <b>Description: </b>Its defines content aside from page content<br /> <b><br /> Header Element:<br /> </b><b>Tag:</b> <header><br /> <b>Description: </b>Its defines a header for a document/section.<br /> <b><br /> Footer Element:<br /> </b><b>Tag: <footer><br /> </b><b>Description: </b>Its defines a footer for a document/section.<br /> <b><br /> Figure &amp; Figcaption Element:<br /> </b><b>Tag:</b> </span><figure>&amp;<figcaption <span style="font-family:arial"><br /> <b>Description: </b>The tag specifies self-contained content and its position is independent of the main flow. The tag defines a caption for a element. <br /> <b><br /> BDI Element:<br /> </b><b>Tag: </b><bdi><br /> <b>Description: </b>Its format a text in a different direction.<br /> <b><br /> Summary Element:<br /> </b><b>Tag: </b>< summary ><br /> <b>Description: </b>defines a visible heading for the element<br /> <b><br /> Details Element:<br /> </b><b>Tag: </b>< details ><br /> <b>Description: </b>defines additional details that the user can view/hide<br /> <b><br /> Progress Element:<br /> </b><b>Tag: </b>< progress ><br /> <b>Description: </b>shows the progress of a task.<br /> <b><br /> Dialog Element:<br /> </b><b>Tag: </b>< details ><br /> <b>Description: </b>defines a dialog box/window<br /> <b><br /> Time Element:<br /> </b><b>Tag: </b>< time ><br /> <b>Description: </b>defines time/date<br /> <b><br /> WBR Element:<br /> </b><b>Tag: </b>< wbr><br /> <b>Description: </b>defines a possible line-break<br /> <b><br /> Command Element:<br /> Tag:</b> < command><br /> <b>Description:</b> The tag specifies a command (a radiobutton, a checkbox, a command button) that the user can call.<br /> <b>Mark Element:<br /> Tag:</b> < mark><br /> <b>Description:</b> The tag defines marked text.<br /> <b><br /> Meter Element:<br /> Tag:</b> < meter><br /> <b>Description:</b> The tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.<br /> <b><br /> Ruby Element:<br /> Tag:</b> < ruby><br /> <b>Description: </b> The tag specifies a ruby annotation.Ruby annotation is used for East Asian typography, to show the pronunciation of East Asian characters<br /> <b><br /> RT Element:<br /> Tag:</b> < rt><br /> <b>Description: </b> The tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.<br /> <b><br /> RP Element:<br /> Tag:</b>< rp><br /> <b>Description:</b> The tag defines what to show if a browser does NOT support ruby annotations.<br /> <br /> </span><b><span style="font-size:28px">HTML5 Elements <span style="color:#808080">Details &amp; Uses<br /> </span></span></b><b><span style="font-size:20px"><br /> Canvas Element<br /> <br /> </span></b><b>Tag : </b><canvas> <br /> <b>What is canvas?<br /> </b>It’s a html element where graphics can drawn on the fly, using any scripting language ( generally we will use javascript). It’s a container for graphics where path, boxes, circles, characters, images are drawn using various methods.<br /> <b>Browser Support:<br /> <a id="attachment1038984" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038984&amp;d=1470917862" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038984&amp;d=1470917862" alt="Click image for larger version Name: IE-FF-OP-CH-SF.png Views: 1 Size: 4.9 KB ID: 1038984" style="float:CONFIG" data-attachmentid="1038984" class="bbcode-attachment thumbnail" /></a><br /> </b><span style="color:#ff0000">Note: IE Mp3(FF 21 in windows 7,8,vista), Wav, OggSafari => Mp3, WavOpera => Wav, Ogg</span><br /> Now Let’s start how we use a canvas element to create a graphic on it. There are 2 steps.<br /> <br /> 1)<b>Create a canvas element </b> 2) <b>Draw graphic on it.</b><br /> <br /> <b><u>Create a canvas element</u></b><br /> <br /> Just write the canvas element and assign an ‘id’ attribute on it like below.<br /> <br /> <canvas id=”canvas_container” width="200" height="100" style="border:1px solid #c3c3c3;" > </canvas><br /> <br /> <b><u>Draw graphic on it</u></b><br /> <br /> Here we will use different graphics implementation one by one with examples.<br /> <br /> <b>1) </b><b>Rectangular Implementation</b><br /> <br /> Ex1:<br /> <script type=”text/javascript”><br /> var c = document.getElementById(“canvas_container”); // here ‘canvas_container’ is the ‘id’ for <br /> //canvas element mentioned above.<br /> var ctx = c.getContext(‘2d’); // create 2d/3d graphic context<br /> ctx.fillStyle=”#d6d6d6”; // fill the graphic with any color<br /> ctx.fillRect(0,0,150,75); // draw the rectangular shape. fillRect( x1,y1, width,height)<br /> </script><br /> <br /> Output:<br /> <a id="attachment1038988" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038988&amp;d=1388337577" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038988&amp;d=1388337577" alt="Click image for larger version Name: canvas-rectangular-ex1.png Views: 1 Size: 4.9 KB ID: 1038988" style="float:CONFIG" data-attachmentid="1038988" class="bbcode-attachment thumbnail" /></a>Ex2:<br /> <script type=”text/javascript”><br /> <br /> var c = document.getElementById(“canvas_container”); // here ‘canvas_container’ is the ‘id’ for <br /> //canvas element mentioned above.<br /> var ctx = c.getContext(‘2d’); // create 2d/3d graphic context<br /> ctx.strokeStyle="blue"; // fill the graphic with any color<br /> ctx.strokeRect(10,10,150,75); // draw the rectangular shape. strokeRect( x1,y1, width,height)<br /> <br /> </script><br /> <br /> Output:<br /> <a id="attachment1038989" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038989&amp;d=1388338838" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038989&amp;d=1388338838" alt="Click image for larger version Name: canvas-rectangular-ex2.png Views: 1 Size: 1,012 Bytes ID: 1038989" style="float:CONFIG" data-attachmentid="1038989" class="bbcode-attachment thumbnail" /></a><br /> <br /> <b>2) </b><b>Path Implementation</b><br /> <br /> Ex1:<br /> <script type=”text/javascript”><br /> <br /> var c = document.getElementById(“canvas_container”); // here ‘canvas_container’ is the ‘id’ for <br /> //canvas element mentioned above.<br /> var ctx = c.getContext(‘2d’); // create 2d/3d graphic context<br /> ctx.moveTo(12,13); // starting point of the path<br /> ctx.lineTo(35,45); // ending point of the path<br /> ctx.strokeStyle=”#FF0000”; // adding color on the path<br /> ctx.stroke(); // this creates the path<br /> <br /> </script><br /> <br /> <a id="attachment1038986" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038986&amp;d=1388337576" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038986&amp;d=1388337576" alt="Click image for larger version Name: canvas-path-ex1.png Views: 1 Size: 1.3 KB ID: 1038986" style="float:CONFIG" data-attachmentid="1038986" class="bbcode-attachment thumbnail" /></a><br /> Ex2:<br /> <script type=”text/javascript”><br /> var c = document.getElementById(“canvas_container”); // here ‘canvas_container’ is the ‘id’ for <br /> //canvas element mentioned above.<br /> var ctx = c.getContext(‘2d’); // create 2d/3d graphic context<br /> ctx.moveTo(12,13); // starting point of the path<br /> ctx.lineTo(35,45); // ending point of the path<br /> ctx.lineTo(35,100); // another ending point of the path<br /> <br /> ctx.strokeStyle=”#FF0000”; // adding color on the path<br /> ctx.stroke(); // this creates the path<br /> </script><br /> <br /> Output:<br /> <a id="attachment1038987" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038987&amp;d=1388337577" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038987&amp;d=1388337577" alt="Click image for larger version Name: canvas-path-ex2.png Views: 1 Size: 1.3 KB ID: 1038987" style="float:CONFIG" data-attachmentid="1038987" class="bbcode-attachment thumbnail" /></a><br /> <br /> <b>3) </b><b>Circle Implementation using arc method</b><br /> <br /> Ex:<br /> <script type=”text/javascript”><br /> var c = document.getElementById(“canvas_container”); // here ‘canvas_container’ is the ‘id’ for <br /> //canvas element mentioned above.<br /> var ctx = c.getContext(‘2d’); // create 2d/3d graphic context<br /> <br /> ctx.arc(95,50,40,0,2*Math.PI); // create the circle. Format is arc(x,y,r,start,stop)<br /> // where (x,y), r are cirle center point and radius respectably<br /> // and start, stop are the angles to occupy <br /> ctx.strokeStyle=”blue”; // add color on circle <br /> ctx.stroke(); //finally created the circle<br /> </script><br /> <br /> Output:<br /> <a id="attachment1038985" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038985&amp;d=1388337576" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038985&amp;d=1388337576" alt="Click image for larger version Name: canvas-circular.png Views: 1 Size: 3.0 KB ID: 1038985" style="float:CONFIG" data-attachmentid="1038985" class="bbcode-attachment thumbnail" /></a><br /> 4)Text Implementation <br /> <br /> <script type=”text/javascript”><br /> var c = document.getElementById(“canvas_container”); // here ‘canvas_container’ is the ‘id’ for <br /> //canvas element mentioned above.<br /> var ctx = c.getContext(‘2d’); // create 2d/3d graphic context<br /> ctx.font="30px Arial"; // adding font style<br /> ctx.fillText("Hello World",10,50); // creating text using fill method <br /> ctx.strokeText("Hello World",11,80); // creating text using stroke method<br /> </script><br /> <br /> Output:<br /> <a id="attachment1038990" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038990&amp;d=1388339107" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038990&amp;d=1388339107" alt="Click image for larger version Name: canvas-text.png Views: 1 Size: 3.6 KB ID: 1038990" style="float:CONFIG" data-attachmentid="1038990" class="bbcode-attachment thumbnail" /></a><br /> <b>5)</b><b>Gradient Implementation</b><br /> <br /> Ex1:<br /> <script ><br /> var c=document.getElementById("canvas_container ");<br /> var ctx=c.getContext("2d");<br /> // Create Linear gradient<br /> var grd=ctx.createLinearGradient(0,0,200,0); <br /> // specifies the color stops, and its position along the gradient.<br /> grd.addColorStop(0,"blue"); <br /> grd.addColorStop(1,"white");<br /> // Fill with gradient<br /> ctx.fillStyle=grd; <br /> ctx.fillRect(10,10,150,80);<br /> </script><br /> <br /> Output:<br /> <a id="attachment1038991" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038991&amp;d=1388339224" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038991&amp;d=1388339224" alt="Click image for larger version Name: canvas-gradient-ex1.png Views: 1 Size: 1.5 KB ID: 1038991" style="float:CONFIG" data-attachmentid="1038991" class="bbcode-attachment thumbnail" /></a><br /> <br /> Ex2:<br /> <script ><br /> var c=document.getElementById("canvas_container ");<br /> var ctx=c.getContext("2d");<br /> // Create Linear gradient<br /> var grd=ctx.createRadialGradient(75,50,5,90,60,100);<br /> // specifies the color stops, and its position along the gradient.<br /> grd.addColorStop(0,"blue");<br /> grd.addColorStop(1,"white"); <br /> // Fill with gradient<br /> ctx.fillStyle=grd; <br /> ctx.fillRect(10,10,150,80);<br /> </script><br /> <br /> Output:<br /> <a id="attachment1038992" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038992&amp;d=1388339225" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038992&amp;d=1388339225" alt="Click image for larger version Name: canvas-gradient-ex2.png Views: 1 Size: 9.8 KB ID: 1038992" style="float:CONFIG" data-attachmentid="1038992" class="bbcode-attachment thumbnail" /></a><br /> <b>6)</b><b>Image Implementation</b><br /> <br /> Ex1:<br /> <canvas id="myCanvas" width="250" height="200" style="border:1px solid #d3d3d3;"></canvas><br /> <img src="http://www.tikona.in/templates/images/logo.gif" id="s" /><br /> <script><br /> var c=document.getElementById("myCanvas");<br /> var ctx=c.getContext("2d");<br /> img = document.getElementById('s');<br /> ctx.drawImage(img,50,60);<br /> </script><br /> <br /> Output:<br /> <a id="attachment1038993" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038993&amp;d=1388339374" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038993&amp;d=1388339374" alt="Click image for larger version Name: canvas-image-ex1.jpg Views: 1 Size: 12.8 KB ID: 1038993" style="float:CONFIG" data-attachmentid="1038993" class="bbcode-attachment thumbnail" /></a><br /> <br /> <b>What is SVG?</b><br /> <br /> SVG stands for Scalable Vector Graphics.<br /> SVG is a language for describing 2D graphics in xml.<br /> <br /> <b>Advantages:</b><br /> SVG images can be created/edited using any text editor.<br /> SVG images can be searched, indexed, scripted &amp; compressed.<br /> SVG images are scalable.<br /> SVG images can be printed with high quality with any resolution.<br /> SVG are zoomable.<br /> <br /> Browser Compatibility:<br /> <a id="attachment1038984" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038984&amp;d=1470917862" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038984&amp;d=1470917862" alt="Click image for larger version Name: IE-FF-OP-CH-SF.png Views: 1 Size: 4.9 KB ID: 1038984" style="float:CONFIG" data-attachmentid="1038984" class="bbcode-attachment thumbnail" /></a><br /> <span style="color:#FF0000"><span style="font-family:Verdana">Note: IE <=8 do not support this feature.<br /> </span></span><br /> <b>Embed SVG directly into html pages:</b><br /> <br /> <b>Ex1:</b><br /> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"><br /> <polygon<br /> points="100,10 40,180 190,60 10,60 160,180"<br /> style="fill:blue;<br /> stroke:red;<br /> stroke-width:5;<br /> fill-rule<img src="http://www.webcosmoforums.com/core/images/smilies/redface.png" border="0" alt="" title="Embarrassment" smilieid="2" class="inlineimg" />venodd;<br /> "><br /> </svg><br /> <br /> <b>Output:</b><br /> <a id="attachment1038994" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038994&amp;d=1388362286" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038994&amp;d=1388362286" alt="Click image for larger version Name: svg-ex1.png Views: 1 Size: 4.1 KB ID: 1038994" style="float:CONFIG" data-attachmentid="1038994" class="bbcode-attachment thumbnail" /></a><br /> <br /> <b>Ex2:</b><br /> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" ><br /> <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="blue" /><br /> </svg><br /> <br /> <b>Output:</b><br /> <a id="attachment1038995" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038995&amp;d=1388362286" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038995&amp;d=1388362286" alt="Click image for larger version Name: svg-ex2.png Views: 1 Size: 1.9 KB ID: 1038995" style="float:CONFIG" data-attachmentid="1038995" class="bbcode-attachment thumbnail" /></a><br /> <br /> <b>Main Difference between Canvas &amp; SVG:</b><br /> <br /> 1)Canvas is resolution dependent whereas SVG is resolution independent.<br /> 2)Canvas does not support event handlers whereas SVG support s event handlers.<br /> 3)Canvas can save an image as .png or .jpg.<br /> 4)Canvas is well suited for game application.<br /> <br /> <span style="font-size:20px"><span style="font-family:arial"><b>HTML5 Drag/Drop<br /> </b></span></span><span style="font-family:arial"><br /> </span>The Drag/Drop is a new feature in HTML5 and which works exactly like js/jquery Drag/Drop and we don’t need any external js file to make it work. You can drop any html element to anywhere inside the web page.<br /> <br /> Browser Compatibility:<br /> <a id="attachment1038984" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038984&amp;d=1470917862" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038984&amp;d=1470917862" alt="Click image for larger version Name: IE-FF-OP-CH-SF.png Views: 1 Size: 4.9 KB ID: 1038984" style="float:CONFIG" data-attachmentid="1038984" class="bbcode-attachment thumbnail" /></a><br /> <span style="color:#FF0000"><span style="font-family:Verdana">Note: IE <=8 do not support this feature.<br /> </span></span><br /> Let’s divide this things into few steps.<br /> <b>Step 1:</b> Make the element draggable and put ondragstart attributeon it , which you want to be draggable<br /> Ex: <img draggable="true" ondragstart=”drag(event)”/><br /> <b>Step 2:</b> What to Drag?– ondragstart() &amp; setData()<br /> We should take care of the drag(event) method while dragging starts, which will eventually set the data type and value of the draggable element.<br /> Ex: function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id);}<br /> <b>Step 3:</b> Where to drop? – ondragover<br /> During “ondragover” method , we need to stop default handling of the element, so that by default data/elements cannot be dropped in any other element. To prevent it, use event.preventDefault( );<br /> <b>Step 4:</b> Do the Drop – ondrop<br /> This function is triggered when the dragged element is dropped.<br /> Ex: <br /> function drop(ev){<br /> ev.preventDefault();<br /> var data=ev.dataTransfer.getData("Text");<br /> ev.target.appendChild(document.getElementById(data ));<br /> }<br /> <br /> Let’s take a complete example:<br /> <br /> <!DOCTYPE HTML><br /> <html><br /> <head><br /> <style>#drop_area{ width:350px;height:50px;padding:5px;border:1px solid #ff0000;}</style><br /> <script><br /> function allowDrop(ev) {<br /> ev.preventDefault();<br /> }<br /> function drag(ev) {<br /> ev.dataTransfer.setData("Text",ev.target.id);<br /> }<br /> function drop(ev){<br /> ev.preventDefault();<br /> var data=ev.dataTransfer.getData("Text");<br /> ev.target.appendChild(document.getElementById(data ));<br /> }<br /> </script><br /> </head><br /> <body><br /> <br /> <div id="drop_area" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br /> <img id="draggable_img" src="img.gif" draggable="true" ondragstart="drag(event)" width="50" height="50" /><br /> <br /> </body><br /> </html><br /> <br /> <b><span style="font-size:20px">HTML5 Geolocation</span><br /> <br /> </b><span style="font-family:arial"><span style="color:#000000">This html geolocation api is used to detect the geographical position of a user unless the user approves it. This is very useful for devices having GPS like iphone etc.</span><br /> </span><br /> Browser Compatibility:<br /> <a id="attachment1038984" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038984&amp;d=1470917862" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038984&amp;d=1470917862" alt="Click image for larger version Name: IE-FF-OP-CH-SF.png Views: 1 Size: 4.9 KB ID: 1038984" style="float:CONFIG" data-attachmentid="1038984" class="bbcode-attachment thumbnail" /></a><br /> <span style="color:#FF0000"><span style="font-family:Verdana">Note: IE <=8 do not support this feature.<br /> </span></span><br /> <b>Basic Steps need to be followed:</b><br /> <b>Step1:</b> check whether geolocation is supported by the browser.<br /> <b>Step2:</b> if yes, run getCurrentPosition() method, otherwise display an error message.<br /> <b>Step3:</b> if getCurrentPosition() is successful, it returns a coordinates objects to functioned mentioned in its parameter.In this case showPosition() method is passed as a parameter.<br /> <b>Step4:</b> The showPosition() method is used to displays the Latitude, Longitude &amp; map etc.<br /> <b>Let’s take a complete example:<br /> </b><br /> <!DOCTYPE html><br /> <html><br /> <body><br /> <p id="disp">Display Geographical Position Here:</p><br /> <input type="button" onclick="getLocation()" value="Run" /><br /> <div id="mapholder"></div><br /> <script><br /> var x=document.getElementById("disp");<br /> function getLocation()<br /> {<br /> if (navigator.geolocation)<br /> { navigator.geolocation.getCurrentPosition(showPosit ion,showError); }<br /> else<br /> {x.innerHTML="Geolocation is not supported by your browser.";}<br /> }<br /> function showPosition(position)<br /> {<br /> x.innerHTML="Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude;<br /> var latlon=position.coords.latitude+","+position.coords.longitude;<br /> var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&amp;zoom=14&amp;size=400x300&amp;sensor=false";<br /> document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; <br /> }<br /> function showError(error)<br /> {<br /> switch(error.code)<br /> {<br /> case error.PERMISSION_DENIED:<br /> x.innerHTML="User denied Geolocation Request."<br /> break;<br /> case error.POSITION_UNAVAILABLE:<br /> x.innerHTML="Location information is unavailable."<br /> break;<br /> case error.TIMEOUT:<br /> x.innerHTML="Timed out."<br /> break;<br /> case error.UNKNOWN_ERROR:<br /> x.innerHTML="An unknown error."<br /> break;<br /> } } <br /> </script><br /> </body><br /> </html><br /> <b>Output:</b><a id="attachment1038980" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038980&amp;d=1395182017" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038980&amp;d=1395182017" alt="Click image for larger version Name: image037.jpg Views: 1 Size: 23.6 KB ID: 1038980" style="float:CONFIG" data-attachmentid="1038980" class="bbcode-attachment thumbnail" /></a><br /> <br /> The getCurrentPosition () method returns an object with its value, if the method runs successfully. By default it always return latitude(in decimal), longitude(in decimal), accuracy.<br /> <br /> <b>Geolocation Other Interesting Methods:</b><br /> <br /> <b>Method 1 :</b> watchPosition() -> returns the current position of the user and continues to return updated position as the user moves on (like the GPS in a car)<br /> <b>Method 2 :</b> clearPosition() -> stops the watchPosition() method<br /> <br /> <b><b><span style="font-size:20px">Audio Element<br /> </span></b></b><span style="font-family:arial"><span style="color:#000000">The html audio element is used to play audio on the web page.</span></span><span style="font-size:10px"><br /> Audio element attributes: controls, auto play, muted, height, width etc.</span><br /> <b>Audio Tags: </b>audio, source<br /> <b><br /> Ex:<br /> </b><audio controls ><br /> <source src="horse2.mp3" type="audio/mpeg"><br /> <source src="horse1.ogg" type="audio/ogg"> <br /> Your browser does not support html5 audio element.<br /> </audio><br /> <br /> <b>Output:<br /> <a id="attachment1039000" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039000&amp;d=1390881041" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039000&amp;d=1390881041" alt="Click image for larger version Name: audio-element.png Views: 1 Size: 2.6 KB ID: 1039000" style="float:CONFIG" data-attachmentid="1039000" class="bbcode-attachment thumbnail" /></a><br /> <b><span style="font-size:20px"><br /> Video Element<br /> </span></b></b>The html video element is used to show video on the web page and it’s a good alternative of flash.<b><b><span style="font-size:20px"><br /> </span></b></b><b>Tag:</b><video><br /> <b>Video element attributes:</b> controls, auto play, muted, poster, loop, preload, src, height, width etc.<br /> <b>Video Tags: </b>video, source, track<br /> <b><br /> Ex: </b> <br /> <span style="font-family:arial"><span style="color:#000000"><video width="200" height="200" controls></span><br /> <span style="color:#000000"><source src="movie1.mp4" type="video/mp4"></span><br /> <span style="color:#000000"><source src="movie2.ogg" type="video/ogg"></span><br /> <span style="color:#000000">Your browser does not support html5 video tag.</span><span style="color:#000000"> <br /> <</span><span style="color:#000000">/video><br /> </span></span><br /> <b>Output:<br /> </b><a id="attachment1039001" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039001&amp;d=1390881417" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039001&amp;d=1390881417" alt="Click image for larger version Name: video-html5.jpg Views: 1 Size: 7.6 KB ID: 1039001" style="float:CONFIG" data-attachmentid="1039001" class="bbcode-attachment thumbnail" /></a><br /> <br /> <b>Browser Compatibility:<br /> </b><a id="attachment1038984" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038984&amp;d=1470917862" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038984&amp;d=1470917862" alt="Click image for larger version Name: IE-FF-OP-CH-SF.png Views: 1 Size: 4.9 KB ID: 1038984" style="float:CONFIG" data-attachmentid="1038984" class="bbcode-attachment thumbnail" /></a><br /> <span style="color:#FF0000">Note: IE MP4Chrome => MP4, WebM, OggFF => MP4(FF 21 in windows 7,8,vista), WebM, OggOpera => WebM, Ogg</span><br /> <b><b><span style="font-size:20px"><br /> <br /> Source Element<br /> </span></b></b>This element is used for multiple media resources (audio and video both)<br /> <b>Tag: </b><source><b><br /> Ex:</b><br /> <audio controls><br /> <source src="cat.ogg" type="audio/ogg"><br /> <source src="cat.mp3" type="audio/mpeg"><br /> Your browser does not support html5 audio element.<br /> </audio><br /> <b><br /> Screenshot:<br /> </b><a id="attachment1039000" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039000&amp;d=1390881041" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039000&amp;d=1390881041" alt="Click image for larger version Name: audio-element.png Views: 1 Size: 2.6 KB ID: 1039000" style="float:CONFIG" data-attachmentid="1039000" class="bbcode-attachment thumbnail" /></a><br /> <b><b><span style="font-size:20px"><br /> Embed Element<br /> </span></b></b>It creates a container for an external application or interactive content (any plug-in) like flash animation.<b><br /> Tag: </b><span style="color:#000000"><span style="font-family:Calibri"><span style="font-family:arial"><embed></span><br /> </span></span><b><br /> Ex:</b> <br /> <span style="color:#000000"><span style="font-family:Verdana"><embed src="welcome.swf"></span></span><br /> <b><br /> Screenshot:<br /> </b><a id="attachment1039002" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039002&amp;d=1390881694" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039002&amp;d=1390881694" alt="Click image for larger version Name: embed-html5.png Views: 1 Size: 1.9 KB ID: 1039002" style="float:CONFIG" data-attachmentid="1039002" class="bbcode-attachment thumbnail" /></a><br /> <b><b><span style="font-size:20px"><br /> Track Element<br /> </span></b></b>Its display text tracks for video/audio file.<br /> <b><br /> Tag: </b><track><b><br /> Ex:<br /> </b><video src="foo.ogv"><br /> <track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default></track><br /> <track kind="subtitles" label="Deutsche Untertitel" src="subtitles_de.vtt" srclang="de"></track><br /> </video><br /> <b><br /> Screenshot:<br /> </b><a id="attachment1039003" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039003&amp;d=1390881803" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039003&amp;d=1390881803" alt="Click image for larger version Name: track-html5.jpg Views: 1 Size: 12.1 KB ID: 1039003" style="float:CONFIG" data-attachmentid="1039003" class="bbcode-attachment thumbnail" /></a><br /> <b><b><span style="font-size:20px"><br /> Datalist Element<br /> </span></b></b><span style="font-family:arial"><b>Tag: </b></span><datalist>The datalist element specifies the list of pre-defined options for the input element.Its gives an auto complete feature with dropdown list while entering data inside the text field. <br /> <b><br /> Browser Compatibility:<br /> </b><a id="attachment1039004" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039004&amp;d=1390882181" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039004&amp;d=1390882181" alt="Click image for larger version Name: IE-FF-CH-SF.png Views: 1 Size: 3.1 KB ID: 1039004" style="float:CONFIG" data-attachmentid="1039004" class="bbcode-attachment thumbnail" /></a><br /> <b><br /> Ex:</b><br /> <input list="browsers_list" name="browser_list"><br /> <datalist id="browsers_list"><br /> <option value="Internet Explorer"><br /> <option value="Firefox"> Firefox </option><br /> <option value="Chrome"> Chrome </option><br /> <option value="Opera"> Opera </option><br /> <option value="Safari"> Safari </option><br /> </datalist><br /> <input type="submit" /><br /> <b><br /> Output</b>:<br /> <a id="attachment1039005" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039005&amp;d=1390882260" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039005&amp;d=1390882260" alt="Click image for larger version Name: datalist-output-html5.png Views: 1 Size: 9.9 KB ID: 1039005" style="float:CONFIG" data-attachmentid="1039005" class="bbcode-attachment thumbnail" /></a><br /> <b><b><span style="font-size:20px"><br /> Keygen Element<br /> </span></b></b><span style="font-family:arial"><b>Tag: <br /> </b>It gives a secure key to authenticate users. It creates a key pair generator field inside the form. When the form is submitted, then 2 keys are generated.<br /> 1) <b>public</b> key<br /> 2) <b>private</b> key <br /> The private key is stored locally. The public key is sent to the server, which is used to generate a client certificate to authenticate the user in future.<br /> </span><b><br /> Browser Compatibility:<br /> </b><span style="font-family:arial"><a id="attachment1038999" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038999&amp;d=1390882405" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038999&amp;d=1390882405" alt="Click image for larger version Name: FF-CH-SF-O.png Views: 1 Size: 3.3 KB ID: 1038999" style="float:CONFIG" data-attachmentid="1038999" class="bbcode-attachment thumbnail" /></a><br /> <b>Ex:<br /> </b></span><form action="demo_keygen.php" method="get"><br /> User: <input type="text" name="user_name" /><br /> Encryption: <keygen name="security" /><br /> <input type="submit" value=" User Keygen"/><br /> </form><span style="font-family:arial"><br /> </span><b><b><span style="font-size:20px"><br /> Output Element<br /> </span></b></b><span style="font-family:arial"><b>Tag: </b></span><output> <span style="font-family:arial">The element displays the result of a calculation. <br /> <b><br /> Browser Compatibility:<br /> </b><a id="attachment1038999" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038999&amp;d=1390882405" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038999&amp;d=1390882405" alt="Click image for larger version Name: FF-CH-SF-O.png Views: 1 Size: 3.3 KB ID: 1038999" style="float:CONFIG" data-attachmentid="1038999" class="bbcode-attachment thumbnail" /></a><br /> <b><br /> Ex: <br /> </b></span><form oninput="x.value=parseInt(a.value)+parseInt(b.value)">Num1<br /> <input type="range" id="a" value="50">Num2 <br /> <input type="number" id="b" value="50">=<br /> <output name="x" for="a b"></output><br /> </form><br /> <span style="font-family:arial"><b><br /> Output:<br /> </b><a id="attachment1039006" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039006&amp;d=1390882565" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039006&amp;d=1390882565" alt="Click image for larger version Name: output-html5.png Views: 1 Size: 2.0 KB ID: 1039006" style="float:CONFIG" data-attachmentid="1039006" class="bbcode-attachment thumbnail" /></a><br /> <b><span style="font-size:28px"><br /> HTML5 New Attributes <span style="color:#808080">Details &amp; Uses</span></span></b><b><b><span style="font-size:20px"> <br /> <br /> New Attributes<br /> </span></b></b></span>2 new attributes.<br /> <b><br /> 1) autocomplete attribute<br /> </b>This automatically displays the list of the values, which were entered earlier and based on the user enters value on the text field.This autocomplete can be used for elements and as well as for form input elements (types: text, search, url, tel, email, password, datepickers, range, and color) and vice-versa.<br /> <br /> Ex:<br /> <form action="submit.php" autocomplete="on" ><br /> First Name:<input type="text" name="fname" /><br /><br /> Last Name: <input type="text" name="lname" /><br /><br /> Email: <input type="email" name="email" autocomplete="off" ><br /><br /> <input type="submit" value="Submit" /><br /> </form><br /> <br /> <b><br /> 2) novalidate attribute<br /> </b>This is a Boolean attribute when mentioned in tag, the form will be submitted without validating the form data.<br /> <b><br /> Ex:</b><br /> Ex:<br /> <form action="submit.php" novalidate><br /> Email: <input type="email" name="user_email_id" /><br /> <input type="submit" value="submit" /><br /> </form><br /> <span style="font-family:arial"><b><b><span style="font-size:20px"> <br /> New Attributes<br /> </span></b></b></span>16 new attributes.<br /> <b><br /> 1) </b><b><input> </b><b>autofocus attribute<br /> </b><br /> This attribute makes the input element automatically get focused when the page loads<br /> <br /> Browser Compatibility:<br /> <a id="attachment1038984" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038984&amp;d=1470917862" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038984&amp;d=1470917862" alt="Click image for larger version Name: IE-FF-OP-CH-SF.png Views: 1 Size: 4.9 KB ID: 1038984" style="float:CONFIG" data-attachmentid="1038984" class="bbcode-attachment thumbnail" /></a><br /> <br /> <form action="submit.php"><br /> First Name:<input type="text" name="fname" autofocus /><br/><br /> Middle Name: <input type="text" name="mname"/><br/><br /> Last name: <input type="text" name="lname"/><br/><br /> <input type="submit" value="submit" /><br /> </form> <br /> <b><br /> 2) </b><b><input> </b><b>form attribute<br /> </b>The form attribute specifies one or more forms an element belongs to.Using this we can write an element outside a form and we can associate it to a form mentioning the form id in element.<br /> <br /> Browser Compatibility:<br /> <a id="attachment1038999" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038999&amp;d=1390882405" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038999&amp;d=1390882405" alt="Click image for larger version Name: FF-CH-SF-O.png Views: 1 Size: 3.3 KB ID: 1038999" style="float:CONFIG" data-attachmentid="1038999" class="bbcode-attachment thumbnail" /></a><br /> <br /> Ex:First Name: <br /> Last Name: <br /> <b><br /> 3) </b><b><input> </b><b>formaction</b> <b>attribute<br /> </b>The formaction attribute overrides the action attribute of element.It is used only with type submit or image.<br /> <br /> Browser Compatibility:<br /> <a id="attachment1038984" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038984&amp;d=1470917862" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038984&amp;d=1470917862" alt="Click image for larger version Name: IE-FF-OP-CH-SF.png Views: 1 Size: 4.9 KB ID: 1038984" style="float:CONFIG" data-attachmentid="1038984" class="bbcode-attachment thumbnail" /></a><br /> <br /> Ex:<br /> <form action="submit.php" id="form1" ><br /> First Name: <input type="text" name="fname" /><br/><br /> <input type="submit" value="Submit" /><br /> </form><br /> Last Name: <input type="text" name="lname" form="form1" /><br /> <br /> <b>4) </b><b><input> </b><b>formenctype attribute<br /> </b>The formenctype attribute overrides the enctype attribute of element.It is used only with type submit or image.<br /> <br /> Browser Compatibility:<br /> <a id="attachment1038984" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038984&amp;d=1470917862" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038984&amp;d=1470917862" alt="Click image for larger version Name: IE-FF-OP-CH-SF.png Views: 1 Size: 4.9 KB ID: 1038984" style="float:CONFIG" data-attachmentid="1038984" class="bbcode-attachment thumbnail" /></a><br /> <br /> Ex:<br /> <form action="enctype.asp" method="post"><br /> First name: <input type="text" name="fname" /><br /><br /> <input type="submit" value="Submit" /><br /> <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data" /><br /> </form><br /> <b><br /> 5) </b><b><input> </b><b>formmethod attribute<br /> </b>The formmethod attribute overrides the method attribute of element.It is used only with type submit or image.<br /> <br /> Browser Compatibility:<br /> <a id="attachment1038984" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038984&amp;d=1470917862" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038984&amp;d=1470917862" alt="Click image for larger version Name: IE-FF-OP-CH-SF.png Views: 1 Size: 4.9 KB ID: 1038984" style="float:CONFIG" data-attachmentid="1038984" class="bbcode-attachment thumbnail" /></a><br /> <br /> Ex:<br /> <form action="form.php" method="get"><br /> First Name: <input type="text" name="fname" /><br><br /> Last Name: <input type="text" name="lname" /><br><br /> <input type="submit" value="Submit" /><br /> <input type="submit" formmethod="post" formaction="post.php" value="Submit using POST"><br /> </form><br /> <br /> <b>6) </b><b><input> </b><b>formnovalidate attribute<br /> </b>The formnovalidate attribute overrides the novalidate attribute of the element.The formnovalidate attribute can be used with input type=submit only.<br /> <br /> Browser Compatibility:<br /> <a id="attachment1039004" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039004&amp;d=1390882181" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039004&amp;d=1390882181" alt="Click image for larger version Name: IE-FF-CH-SF.png Views: 1 Size: 3.1 KB ID: 1039004" style="float:CONFIG" data-attachmentid="1039004" class="bbcode-attachment thumbnail" /></a><br /> <br /> Ex:<br /> <form action="form.php"><br /> E-mail: <input type="email" name="userid" /><br /><br /> <input type="submit" value="Submit" /><br /><br /> <input type="submit" formnovalidate value="Submit without Validation" /><br /> </form><br /> <br /> <b>7) </b><b><input> </b><b>formtarget attribute <br /> </b>This overrides the target attribute of element and can be used with input type=”submit” and type=”image”.<br /> <br /> Browser Compatibility:<br /> <a id="attachment1038984" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038984&amp;d=1470917862" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038984&amp;d=1470917862" alt="Click image for larger version Name: IE-FF-OP-CH-SF.png Views: 1 Size: 4.9 KB ID: 1038984" style="float:CONFIG" data-attachmentid="1038984" class="bbcode-attachment thumbnail" /></a><br /> <br /> EX:<br /> <form action="form.php"><br /> First name: <input type="text" name="fname" /><br /><br /> Last name: <input type="text" name="lname" /><br /><br /> <input type="submit" value="Submit as Normal" /><br /> <input type="submit" formtarget="_blank" value="Submit in New Window"><br /> </form><br /> <b><br /> 8)</b><b><input> </b><b> height &amp; width attribute<br /> </b>This specifies the height and width of the input element type image.<br /> <br /> Browser Compatibility:<br /> <a id="attachment1038984" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038984&amp;d=1470917862" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038984&amp;d=1470917862" alt="Click image for larger version Name: IE-FF-OP-CH-SF.png Views: 1 Size: 4.9 KB ID: 1038984" style="float:CONFIG" data-attachmentid="1038984" class="bbcode-attachment thumbnail" /></a><br /> <br /> EX:<br /> <input type="image" src="logo.gif" alt="Submit" width="48" height="48"><br /> <b><br /> 9) </b><b><input> </b><b>list attribute <br /> </b>This list attribute displays the pre-defined options for an input element.<br /> <br /> Browser Compatibility:<br /> <a id="attachment1039004" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039004&amp;d=1390882181" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039004&amp;d=1390882181" alt="Click image for larger version Name: IE-FF-CH-SF.png Views: 1 Size: 3.1 KB ID: 1039004" style="float:CONFIG" data-attachmentid="1039004" class="bbcode-attachment thumbnail" /></a><br /> <br /> Ex:<br /> <input list="browsers_list" name="browsers" /><br /> <datalist id="browsers_list"><br /> <option value="Internet Explorer">Internet Explorer</option><br /> <option value="Firefox">Firefox</option><br /> <option value="Chrome">Chrome</option><br /> <option value="Opera">Opera</option><br /> <option value="Safari">Safari</option><br /> </datalist><br /> <input type="submit" value="submit" /><br /> <br /> <br /> <br /> Output:<br /> <a id="attachment1038998" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038998&amp;d=1390884535" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038998&amp;d=1390884535" alt="Click image for larger version Name: input-list-html5.png Views: 1 Size: 7.2 KB ID: 1038998" style="float:CONFIG" data-attachmentid="1038998" class="bbcode-attachment thumbnail" /></a><br /> <b><br /> 10) </b><b><input> </b><b>min and max attribute <br /> </b>This min and max attribute sets the minimum value and maximum value for the input elements having type = number, range, date, datetime, datetime-local, month, time and week.<br /> <br /> Browser Compatibility:<br /> <a id="attachment1038996" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038996&amp;d=1395163649" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038996&amp;d=1395163649" alt="Click image for larger version Name: image061.gif Views: 1 Size: 2.4 KB ID: 1038996" style="float:CONFIG" data-attachmentid="1038996" class="bbcode-attachment thumbnail" /></a><br /> <br /> Ex:<br /> Enter a date before 1980-01-01:<br /> <input type="date" name="bday" max="1979-12-31" /> <br/><br /> Enter a date after 2000-01-01:<br /> <input type="date" name="bday" min="2000-01-02" /><br/><br /> Quantity (1-5):<br /> <input type="number" name="quantity" min="1" max="5" /><br/><br /> <input type="submit" value="submit" /><br /> <br /> Output:<br /> <a id="attachment1038981" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038981&amp;d=1395163703" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038981&amp;d=1395163703" alt="Click image for larger version Name: image062.gif Views: 1 Size: 4.4 KB ID: 1038981" style="float:CONFIG" data-attachmentid="1038981" class="bbcode-attachment thumbnail" /></a><br /> <b><br /> 11) </b><b><input> </b><b>multiple attribute <br /> </b>The multiple attribute allows the users to enter multiple values for the input element type file and email . <br /> Browser Compatibility:<br /> <a id="attachment1038983" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038983&amp;d=1395164166" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038983&amp;d=1395164166" alt="Click image for larger version Name: image110.gif Views: 1 Size: 2.3 KB ID: 1038983" style="float:CONFIG" data-attachmentid="1038983" class="bbcode-attachment thumbnail" /></a> <br /> Ex:<br /> <input type="file" name="img" multiple /><br /> <b><br /> 12) </b><b><input> </b><b>pattern attribute</b> <br /> This pattern specifies a pattern for input type: text, search, url, tel, email and password, so that element’s value is checked against the mentioned pattern. <br /> <br /> Browser Compatibility:<br /> <a id="attachment1038997" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038997&amp;d=1395164230" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038997&amp;d=1395164230" alt="Click image for larger version Name: image120.gif Views: 1 Size: 2.4 KB ID: 1038997" style="float:CONFIG" data-attachmentid="1038997" class="bbcode-attachment thumbnail" /></a><br /> <br /> Ex: <br /> Telephone: <input type="text" name="country_code" pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}" title="{xxx-xxx-xxx} format" placeholder="xxx-xxx-xxx"/><br /> <input type="submit" value="submit" /><br /> <br /> <b>13) <input> placeholder attribute</b><br /> This placeholder attribute shows a hint/pattern of the input value. Once the users enter value on it, the placeholder goes away. Currently this placeholder is supported by only input types: text, search, url, tel, email, and password<br /> <br /> Browser Compatibility:<br /> <a id="attachment1038983" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038983&amp;d=1395164166" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038983&amp;d=1395164166" alt="Click image for larger version Name: image110.gif Views: 1 Size: 2.3 KB ID: 1038983" style="float:CONFIG" data-attachmentid="1038983" class="bbcode-attachment thumbnail" /></a><br /> <br /> Ex: <br /> <input type="text" name="fname" placeholder="First Name" /><br /> <br /> Output:<br /> <a id="attachment1038982" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038982&amp;d=1395182095" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038982&amp;d=1395182095" alt="Click image for larger version Name: image122.gif Views: 1 Size: 647 Bytes ID: 1038982" style="float:CONFIG" data-attachmentid="1038982" class="bbcode-attachment thumbnail" /></a><br /> <br /> <b>14) <input> required attribute</b><br /> This required attribute makes the input elements value to mandatory and until the user put some value on it, <form> cannot be submitted. Currently it supports input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.<br /> <br /> <b><b>Browser Compatibility:</b></b><br /> <a id="attachment1038997" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038997&amp;d=1395164230" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038997&amp;d=1395164230" alt="Click image for larger version Name: image120.gif Views: 1 Size: 2.4 KB ID: 1038997" style="float:CONFIG" data-attachmentid="1038997" class="bbcode-attachment thumbnail" /></a><br /> <br /> Ex:<br /> <input type="text" name="user_name" required /><br /> <br /> <b>15) <input> step attribute</b><br /> This step attribute specifies the legal number intervals for an <input> element. Currently it supports input types: number, range, date, datetime, datetime-local, month, time and week. For example, if step="2", legal numbers could be -2, 0, 2, 4, etc.<br /> <br /> Browser Compatibility:<br /> <a id="attachment1038996" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038996&amp;d=1395163649" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038996&amp;d=1395163649" alt="Click image for larger version Name: image061.gif Views: 1 Size: 2.4 KB ID: 1038996" style="float:CONFIG" data-attachmentid="1038996" class="bbcode-attachment thumbnail" /></a><br /> <br /> Ex:<br /> <input type="number" name="points" step="3" /><br /> <br /> <b>HTML5 <span style="color:#808080">Semantic Elements<br /> <br /> </span></b>Semantic is nothing but meaning. so semantic element means those element which clearly says the meaning of the content to the developer and the browser.<br /> <br /> Some non-semantic elements: div, span - tells nothing about its content.<br /> Some semantic elements: form, table, img etc. - clearly says about its content.<br /> <br /> Browser Compatibility:<br /> <a id="attachment1038984" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038984&amp;d=1470917862" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038984&amp;d=1470917862" alt="Click image for larger version Name: IE-FF-OP-CH-SF.png Views: 1 Size: 4.9 KB ID: 1038984" style="float:CONFIG" data-attachmentid="1038984" class="bbcode-attachment thumbnail" /></a><br /> <br /> <b>New HTML5 Semantic Elements:</b><br /> <br /> 1) Header<br /> 2) Nav<br /> 3) Section<br /> 4) Article<br /> 5) Aside<br /> 6) Figcaption<br /> 7) Figure<br /> 8) Footer<br /> <br /> <b>Basic semantic Page Structure:<br /> <br /> </b><a id="attachment1038979" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038979&amp;d=1395182373" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038979&amp;d=1395182373" alt="Click image for larger version Name: image130.jpg Views: 1 Size: 14.9 KB ID: 1038979" style="float:CONFIG" data-attachmentid="1038979" class="bbcode-attachment thumbnail" /></a><br /> <br /> Let’s discuss one by one html5 new semantic/structural elements.<br /> <br /> <span style="font-size:20px"><b>HTML5 <section> element</b></span><br /> <br /> It defines a section inside a document. It is generally some sort of content with headings.<br /> <br /> <b>Ex:</b><br /> <section><br /> <h1>YUI</h1><br /> <p>Yahoo User Interface (YUI) is …</p><br /> </section><br /> <br /> <b>Screenshot:<br /> <br /> </b><a id="attachment1038978" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038978&amp;d=1395182409" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038978&amp;d=1395182409" alt="Click image for larger version Name: image132.gif Views: 1 Size: 2.1 KB ID: 1038978" style="float:CONFIG" data-attachmentid="1038978" class="bbcode-attachment thumbnail" /></a><br /> <span style="font-size:20px"><b>HTML5 <article> element</b></span><br /> <br /> It specifies an independent content which is not related to the rest of the website. Its on its own. For example: article can be used for “forum post”, ”blog post”, “story”, “comments” etc.<br /> <br /> <b>Ex:</b><br /> <article><br /> <h1>Firefox</h1><br /> <p>Firefox browser is now booming across world…</p><br /> </article><br /> <br /> <b>Screenshot:</b><br /> <a id="attachment1039009" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039009&amp;d=1395182530" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039009&amp;d=1395182530" alt="Click image for larger version Name: image134.gif Views: 1 Size: 2.7 KB ID: 1039009" style="float:CONFIG" data-attachmentid="1039009" class="bbcode-attachment thumbnail" /></a><br /> <span style="font-size:20px"><b>HTML5 <nav> element</b></span><br /> <br /> It consists of several navigational links. Its specially used for large blocks of links. Its is not recommended to use nav element for all links.<br /> <br /> <b>Ex:</b><br /> <nav><br /> <a href="/home/">Home</a> |<br /> <a href="/video/">Video</a> |<br /> <a href="/audio/">Audio</a> |<br /> <a href="/products/">Products</a> |<br /> <a href="/about_us/">About Us</a><br /> </nav><br /> <br /> <b>Output:</b><br /> <a id="attachment1039008" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039008&amp;d=1395182553" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039008&amp;d=1395182553" alt="Click image for larger version Name: image136.gif Views: 1 Size: 1.3 KB ID: 1039008" style="float:CONFIG" data-attachmentid="1039008" class="bbcode-attachment thumbnail" /></a><br /> <br /> <span style="font-size:20px"><b>HTML5 <aside> element</b></span><br /> <br /> It specifies some content around the main content or surrounding content, so that viewer can understand this aside content is belongs to surrounding/main content depending on how it has been used.<br /> <br /> <b>Ex:</b><br /> <aside><br /> <h4>Nicco park</h4><br /> <p>The Nicco Park is an amusement park in kolkata.</p><br /> </aside><br /> <br /> <b>Output:<br /> </b><a id="attachment1039007" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039007&amp;d=1395182582" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039007&amp;d=1395182582" alt="Click image for larger version Name: image138.gif Views: 1 Size: 3.2 KB ID: 1039007" style="float:CONFIG" data-attachmentid="1039007" class="bbcode-attachment thumbnail" /></a><br /> <br /> <span style="font-size:20px"><b>HTML5 <header> element</b></span><br /> <br /> The header element specifies a header for a document/section. It is used as introductory content. We can have several headers in a document.<br /> <br /> <b>Ex:</b><br /> <article><br /> <header><br /> <h1>Cakephp 2.5</h1><br /> <p><time pubdate datetime="2012-03-15"></time></p><br /> </header><br /> <p>cakephp 2.5 came recently with great feature and solved most the major existing issues.. </p><br /> </article><br /> <br /> <b>Output:</b><br /> <br /> <br /> <a id="attachment1039010" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039010&amp;d=1395182618" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039010&amp;d=1395182618" alt="Click image for larger version Name: image140.jpg Views: 1 Size: 7.0 KB ID: 1039010" style="float:CONFIG" data-attachmentid="1039010" class="bbcode-attachment thumbnail" /></a><br /> <br /> <span style="font-size:20px"><b>HTML5 <footer> element</b></span><br /> <br /> The footer element specifies footer for a document/section. It should contain information about its containing element. We can have several footers in a document.<br /> <br /> <b>Ex:</b><br /> <footer><br /> <p>Posted by: Hege Refsnes</p><br /> <p><time pubdate datetime="2012-03-01"></time></p><br /> <p>Contact Number: +91 87563 73454</p><br /> </footer><br /> <br /> <b>Output:<br /> </b><a id="attachment1039011" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039011&amp;d=1395182656" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039011&amp;d=1395182656" alt="Click image for larger version Name: image142.gif Views: 1 Size: 1.8 KB ID: 1039011" style="float:CONFIG" data-attachmentid="1039011" class="bbcode-attachment thumbnail" /></a><br /> <span style="font-size:20px"><b>HTML5 <figure> &amp; <figcaption> element<br /> </b></span><br /> The <figure> tag specifies self-contained content, for example illustrations, diagrams, photos, code listings, etc. its position is independent of the main flow and if removed it should not affect the flow of the document. The <figcaption> tag defines a caption for a <figure> element.The <figcaption> element can be placed as the first or last child of the <figure> element.<br /> <br /> <b>Ex:</b><br /> <p> <b> have been working in DAS for 11 years now. I am married and dad of <br/><br /> a 6 year old daughter. My life is spilited into my family, career and passion <br/><br /> for cricket.</b></p><br /> <figure><br /> <img src="/upload/storyimage/big_1380049758.jpg" alt="Story Image" height="228"><br /> <figcaption><b> Golf Palace, Gurgaon. </b></figcaption><br /> </figure><br /> <br /> <b>Output:</b><br /> <a id="attachment1039012" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039012&amp;d=1395182690" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039012&amp;d=1395182690" alt="Click image for larger version Name: image144.jpg Views: 1 Size: 12.9 KB ID: 1039012" style="float:CONFIG" data-attachmentid="1039012" class="bbcode-attachment thumbnail" /></a><br /> <br /> <b>Tips:</b><br /> 1) To use these html5 element in all(old) major browsers, we need to mention “display:block” like mentioned below.<br /> header, section, footer, aside, nav, article, figure<br /> { <br /> display: block; <br /> }<br /> 2) IE 8 and earlier version does not recognize these html5 new element and hence they cannot use css on it. So we need to add html4shiv.js as fix like mentioned below.<br /> <br /> <!--[if lt IE 9]><br /> <script src="html5shiv.js"></script><br /> <![endif]--><br /> <br /> <span style="font-size:20px"><b>HTML5 <bdi> Element:</b></span><br /> bdi stands for Bi-directional Isolation.<br /> The <bdi> tag separates a part of text that might be formatted in a different direction from other text outside it.<br /> This element is useful when embedding user-generated content with an unknown directionality.<br /> <br /> <b>Ex:</b><br /> <p>usernames are shown along with the number of points in a contest.</p><br /> <ul><br /> <li>User1 <bdi>hrefs</bdi>: 20 points</li><br /> <li>User2 <bdi>jdoe</bdi>: 30 points</li><br /> <li>User3 <bdi>&#1573;&#1610;&#1575;&#1606;</bdi>: 40 points</li><br /> </ul><br /> <b>Browser Support:<br /> </b><a id="attachment1039013" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039013&amp;d=1395182840" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039013&amp;d=1395182840" alt="Click image for larger version Name: image146.gif Views: 1 Size: 2.1 KB ID: 1039013" style="float:CONFIG" data-attachmentid="1039013" class="bbcode-attachment thumbnail" /></a><br /> <b>Screenshot:<br /> </b><a id="attachment1039014" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039014&amp;d=1395182863" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039014&amp;d=1395182863" alt="Click image for larger version Name: image148.gif Views: 1 Size: 3.5 KB ID: 1039014" style="float:CONFIG" data-attachmentid="1039014" class="bbcode-attachment thumbnail" /></a><br /> <span style="font-size:20px"><b>HTML5 <progress> Element:</b></span><br /> The <progress> tag shows the progress of a task<br /> <b>Ex:</b><br /> Downloading 50%:<br /> <progress value="50" max="100"></progress><br /> <b>Browser Support:<br /> </b><a id="attachment1038984" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038984&amp;d=1470917862" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038984&amp;d=1470917862" alt="Click image for larger version Name: IE-FF-OP-CH-SF.png Views: 1 Size: 4.9 KB ID: 1038984" style="float:CONFIG" data-attachmentid="1038984" class="bbcode-attachment thumbnail" /></a><br /> <b>Screenshot:<br /> </b><a id="attachment1039015" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039015&amp;d=1395182950" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039015&amp;d=1395182950" alt="Click image for larger version Name: image152.gif Views: 1 Size: 2.7 KB ID: 1039015" style="float:CONFIG" data-attachmentid="1039015" class="bbcode-attachment thumbnail" /></a><br /> <span style="font-size:20px"><b>HTML5 <details> Element:</b></span><br /> The <details> tag specifies extra details that the user can view or hide.<br /> The <details> tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag.<br /> The content of a <details> element should not be visible unless the open attribute is set.<br /> <br /> <b>Ex:</b><br /> <details open><br /> <summary>Copyright 1945-2010.</summary><br /> <p> - by santanu. All Rights Reserved.</p><br /> <p>All content and graphics on this website are the property of the company Data.</p><br /> </details><br /> <b>Browser Support:</b><br /> <a id="attachment1039016" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039016&amp;d=1395182976" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039016&amp;d=1395182976" alt="Click image for larger version Name: image154.gif Views: 1 Size: 2.1 KB ID: 1039016" style="float:CONFIG" data-attachmentid="1039016" class="bbcode-attachment thumbnail" /></a><br /> <br /> <b>Screenshot:<br /> </b><a id="attachment1039017" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039017&amp;d=1395182998" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039017&amp;d=1395182998" alt="Click image for larger version Name: image156.gif Views: 1 Size: 3.7 KB ID: 1039017" style="float:CONFIG" data-attachmentid="1039017" class="bbcode-attachment thumbnail" /></a><br /> <br /> <span style="font-size:20px"><b>HTML5 <summary> Element:</b></span><br /> The <summary> tag specifies a visible heading for the <a href="http://w3schools.com/tags/tag_details.asp" target="_blank"><details></a> element. The heading can be clicked to view/hide the details.<br /> <b>Ex:</b><br /> <details><br /> <summary> Copyright 1990-2013. </summary><br /> <p> - by santanu . All Rights Reserved.</p><br /> <p>All content and graphics on this website are the private property of the company.</p><br /> </details><br /> <br /> <b>Browser Support:<br /> </b><a id="attachment1039016" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039016&amp;d=1395182976" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039016&amp;d=1395182976" alt="Click image for larger version Name: image154.gif Views: 1 Size: 2.1 KB ID: 1039016" style="float:CONFIG" data-attachmentid="1039016" class="bbcode-attachment thumbnail" /></a><br /> <b>Screenshot:<br /> </b><a id="attachment1039018" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039018&amp;d=1395183047" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039018&amp;d=1395183047" alt="Click image for larger version Name: image160.gif Views: 1 Size: 3.3 KB ID: 1039018" style="float:CONFIG" data-attachmentid="1039018" class="bbcode-attachment thumbnail" /></a><br /> <br /> <span style="font-size:20px"><b>HTML5 <dialog> Element:</b></span><br /> The <dialog> tag defines a a dialog box / window.<br /> <br /> <b>Ex:</b><br /> <table border="1"><br /> <tr><br /> <th>NOV<dialog open> ( This is dialog window )</dialog> </th><br /> <th>DEC</th><br /> <th>JAN</th><br /> </tr><br /> <tr><br /> <td>30</td><br /> <td>31</td><br /> <td>30</td><br /> </tr><br /> </table><br /> <br /> <b>Browser Support:</b><br /> <a id="attachment1039016" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039016&amp;d=1395182976" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039016&amp;d=1395182976" alt="Click image for larger version Name: image154.gif Views: 1 Size: 2.1 KB ID: 1039016" style="float:CONFIG" data-attachmentid="1039016" class="bbcode-attachment thumbnail" /></a><br /> <b>Screenshot:<br /> </b><a id="attachment1039019" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039019&amp;d=1395183118" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039019&amp;d=1395183118" alt="Click image for larger version Name: image162.gif Views: 1 Size: 2.1 KB ID: 1039019" style="float:CONFIG" data-attachmentid="1039019" class="bbcode-attachment thumbnail" /></a><br /> <span style="font-size:20px"><b><br /> HTML5 <time> Element:</b></span><br /> The <time> tag defines either a time (24 hour clock), or a date in the Gregorian calendar, optionally with a time and a time-zone offset. It does not render as anything special.<br /> This element can be used as a way to encode dates and times in a machine-readable way so that, for example, user agents can offer to add birthday reminders or scheduled events to the user's calendar, and search engines can produce smarter search results.<br /> <br /> <b>Ex:</b><br /> <p>The store is open at <time>10:00</time> every morning.</p><br /> <p>I have a meeting on <time datetime="2008-08-15">independence day</time>.</p><br /> <br /> <b>Browser Support:<br /> </b><a id="attachment1038984" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038984&amp;d=1470917862" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038984&amp;d=1470917862" alt="Click image for larger version Name: IE-FF-OP-CH-SF.png Views: 1 Size: 4.9 KB ID: 1038984" style="float:CONFIG" data-attachmentid="1038984" class="bbcode-attachment thumbnail" /></a><br /> <br /> <b>Screenshot:<br /> </b><a id="attachment1039020" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039020&amp;d=1395183184" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039020&amp;d=1395183184" alt="Click image for larger version Name: image164.gif Views: 1 Size: 2.2 KB ID: 1039020" style="float:CONFIG" data-attachmentid="1039020" class="bbcode-attachment thumbnail" /></a><br /> <br /> <span style="font-size:20px"><b>HTML5 <wbr> Element:</b></span><br /> The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break.<br /> <b>Note:</b> When a word is too long and the browser might break your lines at the wrong place, you can use the <wbr> element to add word break opportunities<br /> <br /> <b>Ex:</b><br /> <p>Shrink the browser window, to view how the word "XMLHttpRequestObject" in<br /> the paragraph below will break.</p><br /> <p>To learn AJAX, you must know the XML<wbr>Http<wbr>Request<wbr>Object.</p><br /> <br /> <b>Browser Support:<br /> </b><a id="attachment1038999" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038999&amp;d=1390882405" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038999&amp;d=1390882405" alt="Click image for larger version Name: FF-CH-SF-O.png Views: 1 Size: 3.3 KB ID: 1038999" style="float:CONFIG" data-attachmentid="1038999" class="bbcode-attachment thumbnail" /></a><br /> <b>Screenshot:<br /> </b><a id="attachment1039021" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039021&amp;d=1395183255" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039021&amp;d=1395183255" alt="Click image for larger version Name: image168.gif Views: 1 Size: 4.3 KB ID: 1039021" style="float:CONFIG" data-attachmentid="1039021" class="bbcode-attachment thumbnail" /></a><br /> <br /> <span style="font-size:20px"><b>HTML5 <command> Element:</b></span><br /> The <command> tag specifies a command (a radiobutton, a checkbox, a command button) that the user can call.<br /> A command can be part of a context menu or toolbar, using the <menu> element or can be put anywhere else in the page to define a keyboard shortcut.<br /> <b>Ex:</b><br /> <!DOCTYPE html><br /> <html><br /> <head><br /> <script><br /> function saveFunc() { alert("Hi");}<br /> </script><br /> </head><br /> <body><br /> <menu><br /> <command type="command" label="Save" onclick="saveFunc()">Save</command><br /> </menu><br /> </body><br /> </html><br /> <br /> <b>Browser Support:<br /> </b><a id="attachment1039022" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039022&amp;d=1395183296" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039022&amp;d=1395183296" alt="Click image for larger version Name: image170.gif Views: 1 Size: 2.0 KB ID: 1039022" style="float:CONFIG" data-attachmentid="1039022" class="bbcode-attachment thumbnail" /></a><br /> <span style="color:#ff0000">Note: Currently IE9 only supports it.<br /> </span><b>Screenshot:<br /> </b><a id="attachment1039023" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039023&amp;d=1395183342" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039023&amp;d=1395183342" alt="Click image for larger version Name: image172.gif Views: 1 Size: 9.4 KB ID: 1039023" style="float:CONFIG" data-attachmentid="1039023" class="bbcode-attachment thumbnail" /></a><br /> <span style="font-size:20px"><b>HTML5 <mark> Element:</b></span><br /> The <mark> tag defines marked text.<br /> Use the <mark> element if you want to highlight parts of any text.<br /> <br /> <b>Ex:</b><br /> <p>Please bring <mark>original</mark> copy today.</p><br /> <br /> <b>Browser Support:<br /> </b><a id="attachment1038984" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038984&amp;d=1470917862" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038984&amp;d=1470917862" alt="Click image for larger version Name: IE-FF-OP-CH-SF.png Views: 1 Size: 4.9 KB ID: 1038984" style="float:CONFIG" data-attachmentid="1038984" class="bbcode-attachment thumbnail" /></a><br /> <br /> <b>Screenshot:<br /> </b><a id="attachment1039024" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039024&amp;d=1395183407" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039024&amp;d=1395183407" alt="Click image for larger version Name: image175.gif Views: 1 Size: 1.2 KB ID: 1039024" style="float:CONFIG" data-attachmentid="1039024" class="bbcode-attachment thumbnail" /></a><br /> <br /> <span style="font-size:20px"><b>HTML5 <meter> Element:</b></span><br /> The <meter> tag defines a scalar measurement within a known range or a fractional value. This is also known as a gauge. Examples: Disk Usage, the relevance of a query result etc.<br /> <br /> <b>Browser Support:<br /> </b><a id="attachment1038999" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038999&amp;d=1390882405" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038999&amp;d=1390882405" alt="Click image for larger version Name: FF-CH-SF-O.png Views: 1 Size: 3.3 KB ID: 1038999" style="float:CONFIG" data-attachmentid="1038999" class="bbcode-attachment thumbnail" /></a><br /> <br /> <b>Ex:</b><br /> <p>Results:</p><br /> <meter value="3" min="0" max="5">3 out of 5</meter> <br /><br /> <meter value="0.5">50% </meter><br /> <br /> <b>Screenshot:</b><br /> <a id="attachment1039025" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039025&amp;d=1395183519" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039025&amp;d=1395183519" alt="Click image for larger version Name: image179.gif Views: 1 Size: 931 Bytes ID: 1039025" style="float:CONFIG" data-attachmentid="1039025" class="bbcode-attachment thumbnail" /></a><br /> <br /> <span style="font-size:20px"><b>HTML5 <ruby> Element:</b></span><br /> The <ruby> tag specifies a ruby annotation.<br /> Ruby annotation is used for East Asian typography, to show the pronunciation of East Asian characters.<br /> Use the <ruby> tag together with the <a href="http://w3schools.com/tags/tag_rt.asp" target="_blank"><rt></a> and/or the <a href="http://w3schools.com/tags/tag_rp.asp" target="_blank"><rp></a> tags: The <ruby> element consists of one or more characters that needs an explanation/pronunciation and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that not support ruby annotation.<br /> <br /> <b>Browser Support:<br /> </b><a id="attachment1038983" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038983&amp;d=1395164166" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038983&amp;d=1395164166" alt="Click image for larger version Name: image110.gif Views: 1 Size: 2.3 KB ID: 1038983" style="float:CONFIG" data-attachmentid="1038983" class="bbcode-attachment thumbnail" /></a><br /> <b>Ex:</b><br /> <ruby><br /> &#28450; <rt> &#12559;&#12578;&#715; </rt><br /> </ruby><br /> <br /> <b>Screenshot:<br /> </b><a id="attachment1039026" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039026&amp;d=1395183616" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039026&amp;d=1395183616" alt="Click image for larger version Name: image181.gif Views: 1 Size: 248 Bytes ID: 1039026" style="float:CONFIG" data-attachmentid="1039026" class="bbcode-attachment thumbnail" /></a><br /> <span style="font-size:20px"><b>HTML5 <rt> Element:</b></span><br /> The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.<br /> Use the <rt> tag together with the <a href="http://w3schools.com/tags/tag_ruby.asp" target="_blank"><ruby></a> and the <a href="http://w3schools.com/tags/tag_rp.asp" target="_blank"><rp></a> tags: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that not support ruby annotations.<br /> <br /> <b>Browser Support:<br /> </b><a id="attachment1038983" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038983&amp;d=1395164166" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038983&amp;d=1395164166" alt="Click image for larger version Name: image110.gif Views: 1 Size: 2.3 KB ID: 1038983" style="float:CONFIG" data-attachmentid="1038983" class="bbcode-attachment thumbnail" /></a><br /> <b>Ex:</b><br /> <ruby><br /> &#28450; <rt> &#12559;&#12578;&#715; </rt><br /> </ruby><br /> <br /> <b>Screenshot:<br /> </b><a id="attachment1039027" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039027&amp;d=1395183683" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039027&amp;d=1395183683" alt="Click image for larger version Name: image183.gif Views: 1 Size: 243 Bytes ID: 1039027" style="float:CONFIG" data-attachmentid="1039027" class="bbcode-attachment thumbnail" /></a><br /> <br /> <span style="font-size:20px"><b>HTML5 <rp> Element:</b></span><br /> he <rp> tag defines what to show if a browser does NOT support ruby annotations.<br /> Ruby annotations are used for East Asian typography, to show the pronunciation of East Asian characters.<br /> Use the <rp> tag together with the <a href="http://w3schools.com/tags/tag_ruby.asp" target="_blank"><ruby></a> and the <a href="http://w3schools.com/tags/tag_rt.asp" target="_blank"><rt></a> tags: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that not support ruby annotations.<br /> <br /> <b>Browser Support:<br /> </b><a id="attachment1038983" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038983&amp;d=1395164166" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038983&amp;d=1395164166" alt="Click image for larger version Name: image110.gif Views: 1 Size: 2.3 KB ID: 1038983" style="float:CONFIG" data-attachmentid="1038983" class="bbcode-attachment thumbnail" /></a><br /> <b>Ex:</b><br /> <ruby><br /> &#28450; <rt><br /> <rp>(</rp><br /> &#12559;&#12578;&#715;<br /> <rp>)</rp><br /> </rt><br /> </ruby><br /> <br /> <b>Screenshot:</b><br /> <a id="attachment1039028" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1039028&amp;d=1395183824" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1039028&amp;d=1395183824" alt="Click image for larger version Name: image185.gif Views: 1 Size: 387 Bytes ID: 1039028" style="float:CONFIG" data-attachmentid="1039028" class="bbcode-attachment thumbnail" /></a><br /> <br /> <b><span style="font-size:28px">HTML5 </span><span style="color:#808080"><span style="font-size:28px">Web Storage</span><br /> </span></b> <br /> Web Storage is better local storage than cookies because its secure and faster. Using these “web storage” web pages can store data locally within user’s browser.<br /> The data is not included with every server request, but used only when it asked for. A large amount of data can be stored without affecting the web page performance.<br /> The data is stored in key/value pairs, and a web page can only access data stored by itself.<br /> <br /> <b>Browser Support:<br /> </b><a id="attachment1038983" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038983&amp;d=1395164166" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038983&amp;d=1395164166" alt="Click image for larger version Name: image110.gif Views: 1 Size: 2.3 KB ID: 1038983" style="float:CONFIG" data-attachmentid="1038983" class="bbcode-attachment thumbnail" /></a><br /> <br /> There are 2 objects for storing data on the client.<br /> 1) <b>localStorage</b> – store the data with no expiration date.<br /> 2) <b>sessionStorage</b> – store the data for one session<br /> <br /> To use this, first we need to check the browser supportability. Let’s see how?<br /> <br /> if(typeof(Storage)!=="undefined")<br /> {<br /> // It supports localStorage and sessionStorage.<br /> }<br /> else<br /> {<br /> // Sorry! No Web Storage Support.<br /> }<br /> <br /> <span style="font-size:20px"><b>The localStorage Object:</b></span><br /> The localStorage object stores the data without any expiration date. The data will not be deleted when the browser is closed, and will be available for lifetime.<br /> <br /> <b>Ex:</b><br /> <div id="output"></div><br /> <script><br /> if(typeof(Storage)!=="undefined") {<br /> localStorage.lastname="maity";<br /> document.getElementById("output").innerHTML="Last name: " + localStorage.lastname;<br /> } <br /> else {<br /> document.getElementById("output").innerHTML="Sorry, your browser does not support html5 web storage";<br /> }<br /> </script><br /> <br /> <span style="font-size:20px"><b>The sessionStorage object:</b></span><br /> The sessionStorage object is equal to the localStorage object, <b>except</b> that it stores the data for only one session. The data is deleted when the user closes the browser window.<br /> <br /> <b>Ex:</b><br /> <div id="output"></div><br /> if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.cl ickcount)+1; }<br /> else { sessionStorage.clickcount=1; }<br /> document.getElementById("output").innerHTML="No. of Clicks on button: " + sessionStorage.clickcount + " time(s) in this session.";<br /> <br /> <b><span style="font-size:28px">HTML5 </span><span style="color:#808080"><span style="font-size:28px">Web Storage</span><br /> </span></b><br /> Using Application Cache, a web application is cached and accessible without an internet connection.<br /> It has 3 advantages.<br /> <br /> <br /> <ul><li><b>Offline Browsing</b> - users can use the application when they're offline.</li> <li><b>Speed</b> - Cached resources load faster.</li> <li><b>Reduced Server Load</b> - The browser will only download updated/changed resources from server. </li> </ul><br /> <br /> <b>Browser Support:<br /> </b><a id="attachment1038983" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038983&amp;d=1395164166" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038983&amp;d=1395164166" alt="Click image for larger version Name: image110.gif Views: 1 Size: 2.3 KB ID: 1038983" style="float:CONFIG" data-attachmentid="1038983" class="bbcode-attachment thumbnail" /></a><br /> <br /> <span style="font-size:28px"><b>HTML5 <span style="color:#808080">Cache Manifest</span></b></span><br /> <br /> Using cache manifest file, you can create a offline version of a web application.<br /> <br /> <b>Ex:</b><br /> <!DOCTYPE html><br /> <html manifest="html5.appcache" ><br /> <body><br /> <script src=" time.js"><br /> </script><br /> <p id="timePara"><br /> <input type="button" onclick="getDateTime()" value="Show Date &amp; Time" /></p><br /> <p><img src=" logo.gif" width="300" height="65" /><br /> </p><br /> <p>Open <a href="html5_manifest.htm" target="_blank">this page</a>, then go offline, and reload the page. The script and the image will still work without having internet connection.</p><br /> </body><br /> </html><br /> <br /> Let’s discuss in details.<br /> <br /> To enable application cache, include the manifest attribute inside the document’s <html>tag. Every page having manifest attribute inside <html> tag, will be cached when the user visits it. If the attribute is not present inside <html> tag, it won’t be cached (unless it is presented directly inside manifest file).<br /> <br /> The recommended file extension of manifest files is: "*.appcache".<br /> A manifest file must have <b>correct MIME-type</b>, which is "text/cache-manifest" and must be configured in the web server.<br /> <br /> <span style="font-size:12px"><b>The Manifest File:</b></span><br /> The manifest file is a simple text file, which tells the browser what to cache and what not to cache.<br /> <br /> It has 3 sections:<br /> <b><br /> 1)</b><b>CACHE MANIFEST - </b>Files listed here will be cached after they are downloaded for the first time.<br /> <br /> <b>Ex:</b><br /> CACHE MANIFEST<br /> /main_theme.css<br /> /main_logo.gif<br /> /main.js<br /> <br /> <b>2)</b><b>NETWORK - </b>Files listed here should never be cached and will not be available offline.<br /> <br /> <b>Ex1:</b><br /> NETWORK:<br /> Login.php<br /> <b>Ex2:</b><br /> NETWORK:<br /> *<br /> <br /> <b>3)</b><b>FALLBACK</b> - Files listed here specifies fallback pages if some pages are accessible<br /> <br /> <b>Ex: </b> <br /> FALLBACK:<br /> /html/ /offline.html<br /> <br /> <b>A Complete Cache Manifest File Example:</b><br /> <br /> CACHE MANIFEST<br /> /main_theme.css<br /> /main_logo.gif<br /> /main.js<br /> NETWORK:<br /> Login.php<br /> <br /> FALLBACK:<br /> /html/ /offline.html<br /> <br /> <b><span style="font-size:28px">HTML5 </span><span style="color:#808080"><span style="font-size:28px">Web Worker?</span><br /> </span></b><span style="color:#000000"><span style="font-family:Times New Roman"><br /> </span></span>WEB WORKER is JavaScript running in background without affecting the performance of the page.<span style="color:#000000"><span style="font-family:Calibri"><br /> <br /> </span></span><b>Browser Support:<br /> </b><a id="attachment1038983" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038983&amp;d=1395164166" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038983&amp;d=1395164166" alt="Click image for larger version Name: image110.gif Views: 1 Size: 2.3 KB ID: 1038983" style="float:CONFIG" data-attachmentid="1038983" class="bbcode-attachment thumbnail" /></a><br /> <span style="color:#000000"><span style="font-family:Calibri"><br /> </span></span><b>Check Web Worker Support:</b><br /> <br /> if(typeof(Worker)!=="undefined")<br /> {<br /> // Web worker support available.<br /> }<br /> else<br /> {<br /> // Sorry! No Web Worker support.<br /> }<br /> <br /> <b>Create a Web Worker File(worker.js):</b><br /> <br /> var i=0;<br /> function time_Count()<br /> {<br /> i=i+1;<br /> post_Message(i);<br /> setTimeout("time_Count()",500);<br /> }<br /> time_Count();<br /> <br /> <b>Create a Web Worker Object:</b><br /> <br /> if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); }<br /> w.onmessage=function(event) { document.getElementById("output").innerHTML=event.data; };<br /> <br /> <b>Terminate a Web Worker:</b><br /> <br /> w.terminate();<br /> <br /> <b>Full Web Worker Example code:<br /> </b><br /> <!DOCTYPE html><br /> <html><br /> <body><br /> <p>Count: <output id="output"></output></p><br /> <input type="button" onclick="startWorker()" value="Start Worker"/><br /> <input type="button" onclick="stopWorker()" value="Stop Worker" /><br /> <br /><br /><br /> <script><br /> var w;<br /> function startWorker()<br /> {<br /> if(typeof(Worker)!=="undefined")<br /> {<br /> if(typeof(w)=="undefined")<br /> {<br /> w=new Worker("workers.js");<br /> }<br /> w.onmessage = function (event) {<br /> document.getElementById("output").innerHTML=event.data;<br /> };<br /> }<br /> else<br /> {<br /> document.getElementById("output").innerHTML="Sorry, your browser does not support Web Workers...";<br /> }<br /> }<br /> <br /> function stopWorker()<br /> {<br /> w.terminate();<br /> }<br /> </script><br /> </body><br /> </html><br /> <span style="color:#000000"><span style="font-family:Calibri"><br /> </span></span><span style="font-size:20px"><b>Web Workers and the DOM:</b></span><br /> <br /> Since the web workers in external files, they do not have access to window/document/parent object.<br /> <br /> <b><span style="font-size:28px">HTML5 </span><span style="color:#808080"><span style="font-size:28px">Server Sent Event</span><br /> </span></b><br /> It allows a web page to get updates from server. This automatically gets updates.<br /> <br /> <b>Browser Support:<br /> </b><a id="attachment1038983" class="bbcode-attachment js-slideshow__gallery-node" href="filedata/fetch?id=1038983&amp;d=1395164166" rel="Lightbox_0" ><img border="0" src="filedata/fetch?id=1038983&amp;d=1395164166" alt="Click image for larger version Name: image110.gif Views: 1 Size: 2.3 KB ID: 1038983" style="float:CONFIG" data-attachmentid="1038983" class="bbcode-attachment thumbnail" /></a><br /> <br /> <b>Receive Server Sent Event Notifications:</b><br /> <br /> <div id="output"></div><br /> <script><br /> if(typeof(EventSource)!=="undefined")<br /> {<br /> var source=new EventSource("sse.php"); // Create a new EventSource object, and specify the URL<br /> <br /> source.onmessage=function(event) // Each time an update is received, the onmessage event occurs<br /> {<br /> document.getElementById("output").innerHTML+=event.data + "<br>"; // put the updates<br /> };<br /> }<br /> else<br /> {<br /> document.getElementById("output").innerHTML="Sorry, your browser does not support server-sent events...";<br /> }<br /> </script><br /> <br /> <b>Server Side Code Example:</b><br /> <br /> <?php<br /> header('Content-Type: text/event-stream'); // set the "Content-Type" header to "text/event-stream"<br /> header('Cache-Control: no-cache'); // Specify that the page should not cache<br /> <br /> $time = date('r');<br /> echo "data: The server time is: {$time}\n\n"; // Output the data to send (<b>Always</b> start with "data: ")<br /> flush(); // Flush the output data back to the web page<br /> ?><br /> <br /> <b>The Event Source Object:</b><br /> onopen - when a connection to the server is opened<br /> onmessage – when a message is received<br /> onerror – when an error occurs </div> </div> <div class="b-post__footer h-hide--on-preview h-clear h-padding-bottom-m h-margin-horiz-xl"> <div class="h-clearfix"> <div class="h-margin-bottom-xl h-margin-top-none h-text-size--11" id="content-tags-1038971"> <strong>Tags:</strong> <span>None</span> </div> <hr class="b-divider b-divider--post-controls" /> <ul class="h-left js-post-info"> </ul> <ul class="h-margin-top-s h-right js-post-controls b-comp-menu-horizontal js-comp-menu-horizontal js-comp-menu--dropdown-on-xsmall b-comp-menu-dropdown--inactive" data-node-id="1038971" data-dropdown-icon-classes="b-icon b-icon__ellipsis h-align-middle"> </ul> </div> </div> <div class="edit-conversation-container OLD__edit-conversation-container"></div> <div class="b-comments js-comments b-comments--article js-comments--article h-margin-bottom-xl h-clearfix h-hide"> <div class="b-comments__header js-comments__header OLD__top b-media h-padding-vert-m h-padding-horiz-l h-hide"> <div class="js-comments__total OLD__comment-total h-margin-left-l OLD__h-left b-media__body"> <span class="b-icon b-icon__speech-single h-margin-right-s"></span> <label class="js-comments__total-text h-align-top"></label> </div> <div class="b-media__img--rev js-comments__pagination h-hide"> <label></label> <span class="b-comments__pagination--up js-comments__page--prev h-margin-left-s OLD__icon" title="See previous comments"><span class="b-icon b-icon__arrow-up-m--default"></span></span> </div> </div> <ul class="b-comments__comments js-comments__comments h-left"></ul> <div class="b-comments__footer js-comments__footer b-media OLD__bottom h-padding-vert-m h-padding-horiz-l h-clear h-hide"> <div class="b-media__img--rev js-comments__pagination"> <label></label> <span class="b-comments__pagination--down js-comments__page--next h-margin-left-s OLD__icon" title="See next comments"><span class="b-icon b-icon__arrow-down-m--default"></span></span> </div> </div> </div> <div class="notice comment-disabled"> Posting comments is disabled. </div> </div> </div> </li> </ul> </div> </div> </div> </div> <script type="text/javascript"> (function(){ window.vBulletin = window.vBulletin || {}; vBulletin.widget = vBulletin.widget || {}; vBulletin.conversation = vBulletin.conversation || {}; vBulletin.conversation.COMMENTS_PER_PAGE = Number('25') || 25; vBulletin.conversation.POSTS_PER_PAGE = Number('') || 15; })(); </script> <!-- *** END WIDGET widgetid:59, widgetinstanceid:136, template:widget_articledisplay *** --> </div> </div> <div class="l-narrow-column canvas-widget-list section-1 js-sectiontype-secondary has-adjacent-left-col l-col__fixed-6 l-col__small--full"> <!-- *** START WIDGET widgetid:57, widgetinstanceid:137, template:widget_cmschannelnavigation *** --> <div class="b-module canvas-widget default-widget custom-html-widget" id="widget_137" data-widget-id="57" data-widget-instance-id="137"> <div class="widget-header h-clearfix"> <div class="module-title h-left"> <h1 class="main-title js-main-title hide-on-editmode">Categories</h1> </div> <div class="module-buttons"> <span class="toggle-button module-button-item collapse" title="Collapse" data-toggle-title="Expand"><span class="vb-icon vb-icon-toggle">Collapse</span></span> </div> </div> <hr class="widget-header-divider" /> <div class="widget-content"> <ul class="b-channel-nav"> <li class="b-channel-nav__item"> <a href="http://www.webcosmoforums.com/articles/tutorials">Tutorials</a> <ul class="b-channel-nav"> <li class="b-channel-nav__item b-channel-nav__item--selected"> <a href="http://www.webcosmoforums.com/articles/tutorials/html-tutorials">HTML Tutorials</a> </li> <li class="b-channel-nav__item"> <a href="http://www.webcosmoforums.com/articles/tutorials/css-tutorials">CSS Tutorials</a> </li> </ul> </li> </ul> </div> </div> <!-- *** END WIDGET widgetid:57, widgetinstanceid:137, template:widget_cmschannelnavigation *** --> <!-- *** START WIDGET widgetid:58, widgetinstanceid:138, template:widget_tagnavigation *** --> <div class="b-module canvas-widget default-widget custom-html-widget" id="widget_138" data-widget-id="58" data-widget-instance-id="138"> <div class="widget-header h-clearfix"> <div class="module-title h-left"> <h1 class="main-title js-main-title hide-on-editmode">Article Tags</h1> </div> <div class="module-buttons"> <span class="toggle-button module-button-item collapse" title="Collapse" data-toggle-title="Expand"><span class="vb-icon vb-icon-toggle">Collapse</span></span> </div> </div> <hr class="widget-header-divider" /> <div class="widget-content"> <p><em>There are no tags yet.</em></p> </div> </div> <!-- *** END WIDGET widgetid:58, widgetinstanceid:138, template:widget_tagnavigation *** --> <!-- *** START WIDGET widgetid:8, widgetinstanceid:139, template:widget_search *** --> <div class="b-module canvas-widget search-widget" id="widget_139" data-widget-id="8" data-widget-instance-id="139"> <div class="widget-header h-clearfix"> <div class="module-title h-left"> <h1 class="main-title js-main-title hide-on-editmode">Latest Articles</h1> </div> <div class="module-buttons"> <span class="toggle-button module-button-item collapse" title="Collapse" data-toggle-title="Expand"><span class="vb-icon vb-icon-toggle">Collapse</span></span> </div> </div> <hr class="widget-header-divider" /> <div class="widget-content"> <ul class="conversation-list list-container h-clearfix"> <li class="b-post-sm js-post-sm" data-nodeid="1038971"> <div class="b-post-sm__content"> <div class="b-post-sm__title ellipsis"> <a href="http://www.webcosmoforums.com/articles/tutorials/html-tutorials/1038971-html5-tags-and-tutorial">HTML5 Tags and Tutorial</a> </div> <div class="b-post-sm__author"> <a href="http://www.webcosmoforums.com/member/1-manik">manik</a> </div> <div class="b-post-sm__post-content post-content ellipsis restore"> <span style="font-family:arial"><b><span style="font-size:28px">HTML5 - <span style="color:#808080">What is HTML5 & Brief Description</span></span></b><br /> <br /> HTML5 is the newest version of HTML. <br /> <span style="font-family:arial">HTML5 is the co-operation between World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).<br /> </span>HTML5 works are still in progress. Most Major browsers started supporting the new features of html5 to some extent, may not be all but they are adding support for more tags over time. <br /> <br /> <span style="font-size:28px"><b>HTML5 <span style="color:#808080">New Features<br /> </span></b></span><br /> 1) New Elements<br /> 2) New Attributes<br /> 3) Video & Audio<br /> 4) 2D/3D Graphics<br /> 5) Local Storage<br /> 6) Local SQL Database<br /> 7) Web Applications<br /> <br /> <span style="font-size:28px"><b><span style="font-family:arial"><span style="font-size:28px"><b>HTML5 </b></span></span><span style="color:#808080">Key Rules<br /> </span></b></span><br /> 1) New features should be based on html, css, dom and JavaScript<br /> 2) We should reduce the use of external plug-in (like flash etc.)<br /> 3) Better Error Handling<br /> 4) Extra markup to replace scripting<br /> 5) Development Process should be visible<br /> <br /> <span style="font-size:28px"><b>HTML5 <span style="color:#808080">DOCTYPE Declaration<br /> </span></b></span></span><span style="color:#000000"><span style="font-family:Calibri"><br /> </span></span><! DOCTYPE html><br /> <span style="color:#000000"><span style="font-family:Calibri"><br /> </span></span><span style="font-family:arial"><span style="font-size:28px"><b>HTML5 <span style="color:#808080">Basic Page Structure</span></b></span> <br /> </span><br /> <!DOCTYPE html><br /> <head><br /> <title> HTML5 Tutorial </title><br /> <meta charset=”UTF-8” /><br /> </head><br /> <body><br /> <br /> </body><br /> </html><br /> <br /> <span style="font-family:arial"><b><span style="font-size:28px">Removed Elements <span style="color:#808080">in HTML5<br /> </span></span></b><br /> Several elements in use with HTML4 has been removed in HTML5:<br /> <br /> </span><acronym><br /> <applet><br /> <basefont><br /> <big><br /> <center><br /> <dir><br /> <frame><br /> <font><br /> <tt><br /> <strike><br /> <noframes><br /> <frameset><br /> <frame><br /> <br /> <span style="font-family:arial"><span style="font-family:arial"><b><span style="font-size:28px">New Elements <span style="color:#808080">in HTML5<br /> </span></span></b></span><b><span style="font-size:20px"><br /> HTML5 New ‘Canvas’ Elements<br /> </span></b></span><b>Tag : </b><canvas><br /> <b>Description: </b> This tag is used to draw graphics on fly, via scripting language (for ex. JavaScript)<br /> <b>Ex:</b> <canvas id=”canvas_container” width="200" height="100" style="border:1px solid #c3c3c3;" > </canvas><br /> <span style="font-family:arial"><span style="font-size:20px"><b><br /> HTML5 New Media Elements</b></span> <br /> </span><b><br /> Audio Element:</b><br /> <b>Tag: </b><audio><br /> <b>Description:</b> This element is used to play an audio file<br /> <b><br /> Video Element:</b><br /> <b>Tag: </b><video><br /> <b>Description:</b> This element is used to play a video file<br /> <b><br /> Source Element:</b><br /> <b>Tag: </b><source><br /> <b>Description:</b> This element is used for multiple media resources (audio and video both)<br /> <b><br /> Embed Element:</b><br /> <b>Tag: </b><embed><br /> <b>Description:</b> It creates a container for an external application or interactive content (any plug-in) like flash animation.<br /> <b><br /> Track Element:</b><br /> <b>Tag: </b><track><br /> <b>Description:</b> Its display text tracks for video/audio file.<br /> <span style="font-family:arial"><span style="font-size:20px"><b><br /> HTML5 New Form Elements</b></span> <br /> </span><b><br /> DataList Element:</b><br /> <b>Tag: </b><datalist><br /> <b>Description: </b>This shows you a list of pre-defined options for input elements field<br /> <b><br /> Keygen Element:</b><br /> <b>Tag: </b><keygen><br /> <b>Description: </b>This defines a key-pair generator field for the form<br /> <b>Output Element:</b><br /> <b>Tag: </b><output><br /> <b>Description: </b>Defines the result of a calculation.<br /> <br /> <span style="font-family:arial"><span style="font-family:arial"><span style="font-size:20px"><b>HTML5 New Form Attributes</b></span></span></span><span style="font-family:arial"><b> <br /> <br /> autocomplete attribute<br /> </b>This automatically displays the list of the values, which were entered earlier and based on the user enters value on the text field.<b> <br /> <br /> novalidate attribute</b>This is a Boolean attribute when mentioned in tag, the form will be submitted without validating the form data.<br /> <br /> </span><span style="font-family:arial"><span style="font-size:20px"><b>HTML5 New Structural /Semantic Elements</b></span> <br /> <b><br /> Section Element:<br /> </b><b>Tag: </b>< section><br /> <b>Description: </b>Its defines a section in a document<br /> <b><br /> Article Element:<br /> </b><b>Tag: </b>< article><br /> <b>Description: </b>Its defines an article<br /> <b><br /> Nav Element:<br /> </b><b>Tag:</b> </span><nav><span style="font-family:arial"><b>Description: </b>Its defines a navigation links.<br /> <b><br /> Aside Element:<br /> </b><b>Tag: </b>< aside><br /> <b>Description: </b>Its defines content aside from page content<br /> <b><br /> Header Element:<br /> </b><b>Tag:</b> <header><br /> <b>Description: </b>Its defines a header for a document/section.<br /> <b><br /> Footer Element:<br /> </b><b>Tag: <footer><br /> </b><b>Description: </b>Its defines a footer for a document/section.<br /> <b><br /> Figure & Figcaption Element:<br /> </b><b>Tag:</b> </span><figure>&<figcaption <span style="font-family:arial"><br /> <b>Description: </b>The tag specifies self-contained content and its position is independent of the main flow. The tag defines a caption for a element. <br /> <b><br /> BDI Element:<br /> </b><b>Tag: </b><bdi><br /> <b>Description: </b>Its format a text in a different direction.<br /> <b><br /> Summary Element:<br /> </b><b>Tag: </b>< summary ><br /> <b>Description: </b>defines a visible heading for the element<br /> <b><br /> Details Element:<br /> </b><b>Tag: </b>< details ><br /> <b>Description: </b>defines additional details that the user can view/hide<br /> <b><br /> Progress Element:<br /> </b><b>Tag: </b>< progress ><br /> <b>Description: </b>shows the progress of a task.<br /> <b><br /> Dialog Element:<br /> </b><b>Tag: </b>< details ><br /> <b>Description: </b>defines a dialog box/window<br /> <b><br /> Time Element:<br /> </b><b>Tag: </b>< time ><br /> <b>Description: </b>defines time/date<br /> <b><br /> WBR Element:<br /> </b><b>Tag: </b>< wbr><br /> <b>Description: </b>defines a possible line-break<br /> <b><br /> Command Element:<br /> Tag:</b> < command><br /> <b>Description:</b> The tag specifies a command (a radiobutton, a checkbox, a command button) that the user can call.<br /> <b>Mark Element:<br /> Tag:</b> < mark><br /> <b>Description:</b> The tag defines marked text.<br /> <b><br /> Meter Element:<br /> Tag:</b> < meter><br /> <b>Description:</b> The tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.<br /> <b><br /> Ruby Element:<br /> Tag:</b> < ruby><br /> <b>Description: </b> The tag specifies a ruby annotation.Ruby annotation is used for East Asian typography, to show the pronunciation of East Asian characters<br /> <b><br /> RT Element:<br /> Tag:</b> < rt><br /> <b>Description: </b> The tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.<br /> <b><br /> RP Element:<br /> Tag:</b>< rp><br /> <b>Description:</b> The tag defines what to show if a browser does NOT support ruby annotations.<br /> <br /> </span><b><span style="font-size:28px">HTML5 Elements <span style="color:#808080">Details & Uses<br /> </span></span></b><b><span style="font-size:20px"><br /> Canvas Element<br /> <br /> </span></b><b>Tag : </b><canvas> <br /> <b>What is canvas?<br /> </b>It’s a html element where graphics can drawn on the fly, using any scripting language ( generally we will use javascript). It’s a container for graphics where path, boxes, circles, characters, images are drawn using various methods.<br /> <b>Browser Support:<br /> <br /> </b><span style="color:#ff0000">Note: IE Mp3(FF 21 in windows 7,8,vista), Wav, OggSafari => Mp3, WavOpera => Wav, Ogg</span><br /> Now Let’s start how we use a canvas element to create a graphic on it. There are 2 steps.<br /> <br /> 1)<b>Create a canvas element </b> 2) <b>Draw graphic on it.</b><br /> <br /> <b><u>Create a canvas element</u></b><br /> <br /> Just write the canvas element and assign an ‘id’ attribute on it like below.<br /> <br /> <canvas id=”canvas_container” width="200" height="100" style="border:1px solid #c3c3c3;" > </canvas><br /> <br /> <b><u>Draw graphic on it</u></b><br /> <br /> Here we will use different graphics implementation one by one with examples.<br /> <br /> <b>1) </b><b>Rectangular Implementation</b><br /> <br /> Ex1:<br /> <script type=”text/javascript”><br /> var c = document.getElementById(“canvas_container”); // here ‘canvas_container’ is the ‘id’ for <br /> //canvas element mentioned above.<br /> var ctx = c.getContext(‘2d’); // create 2d/3d graphic context<br /> ctx.fillStyle=”#d6d6d6”; // fill the graphic with any color<br /> ctx.fillRect(0,0,150,75); // draw the rectangular shape. fillRect( x1,y1, width,height)<br /> </script><br /> <br /> Output:<br /> Ex2:<br /> <script type=”text/javascript”><br /> <br /> var c = document.getElementById(“canvas_container”); // here ‘canvas_container’ is the ‘id’ for <br /> //canvas element mentioned above.<br /> var ctx = c.getContext(‘2d’); // create 2d/3d graphic context<br /> ctx.strokeStyle="blue"; // fill the graphic with any color<br /> ctx.strokeRect(10,10,150,75); // draw the rectangular shape. strokeRect( x1,y1, width,height)<br /> <br /> </script><br /> <br /> Output:<br /> <br /> <br /> <b>2) </b><b>Path Implementation</b><br /> <br /> Ex1:<br /> <script type=”text/javascript”><br /> <br /> var c = document.getElementById(“canvas_container”); // here ‘canvas_container’ is the ‘id’ for <br /> //canvas element mentioned above.<br /> var ctx = c.getContext(‘2d’); // create 2d/3d graphic context<br /> ctx.moveTo(12,13); // starting point of the path<br /> ctx.lineTo(35,45); // ending point of the path<br /> ctx.strokeStyle=”#FF0000”; // adding color on the path<br /> ctx.stroke(); // this creates the path<br /> <br /> </script><br /> <br /> <br /> Ex2:<br /> <script type=”text/javascript”><br /> var c = document.getElementById(“canvas_container”); // here ‘canvas_container’ is the ‘id’ for <br /> //canvas element mentioned above.<br /> var ctx = c.getContext(‘2d’); // create 2d/3d graphic context<br /> ctx.moveTo(12,13); // starting point of the path<br /> ctx.lineTo(35,45); // ending point of the path<br /> ctx.lineTo(35,100); // another ending point of the path<br /> <br /> ctx.strokeStyle=”#FF0000”; // adding color on the path<br /> ctx.stroke(); // this creates the path<br /> </script><br /> <br /> Output:<br /> <br /> <br /> <b>3) </b><b>Circle Implementation using arc method</b><br /> <br /> Ex:<br /> <script type=”text/javascript”><br /> var c = document.getElementById(“canvas_container”); // here ‘canvas_container’ is the ‘id’ for <br /> //canvas element mentioned above.<br /> var ctx = c.getContext(‘2d’); // create 2d/3d graphic context<br /> <br /> ctx.arc(95,50,40,0,2*Math.PI); // create the circle. Format is arc(x,y,r,start,stop)<br /> // where (x,y), r are cirle center point and radius respectably<br /> // and start, stop are the angles to occupy <br /> ctx.strokeStyle=”blue”; // add color on circle <br /> ctx.stroke(); //finally created the circle<br /> </script><br /> <br /> Output:<br /> <br /> 4)Text Implementation <br /> <br /> <script type=”text/javascript”><br /> var c = document.getElementById(“canvas_container”); // here ‘canvas_container’ is the ‘id’ for <br /> //canvas element mentioned above.<br /> var ctx = c.getContext(‘2d’); // create 2d/3d graphic context<br /> ctx.font="30px Arial"; // adding font style<br /> ctx.fillText("Hello World",10,50); // creating text using fill method <br /> ctx.strokeText("Hello World",11,80); // creating text using stroke method<br /> </script><br /> <br /> Output:<br /> <br /> <b>5)</b><b>Gradient Implementation</b><br /> <br /> Ex1:<br /> <script ><br /> var c=document.getElementById("canvas_container ");<br /> var ctx=c.getContext("2d");<br /> // Create Linear gradient<br /> var grd=ctx.createLinearGradient(0,0,200,0); <br /> // specifies the color stops, and its position along the gradient.<br /> grd.addColorStop(0,"blue"); <br /> grd.addColorStop(1,"white");<br /> // Fill with gradient<br /> ctx.fillStyle=grd; <br /> ctx.fillRect(10,10,150,80);<br /> </script><br /> <br /> Output:<br /> <br /> <br /> Ex2:<br /> <script ><br /> var c=document.getElementById("canvas_container ");<br /> var ctx=c.getContext("2d");<br /> // Create Linear gradient<br /> var grd=ctx.createRadialGradient(75,50,5,90,60,100);<br /> // specifies the color stops, and its position along the gradient.<br /> grd.addColorStop(0,"blue");<br /> grd.addColorStop(1,"white"); <br /> // Fill with gradient<br /> ctx.fillStyle=grd; <br /> ctx.fillRect(10,10,150,80);<br /> </script><br /> <br /> Output:<br /> <br /> <b>6)</b><b>Image Implementation</b><br /> <br /> Ex1:<br /> <canvas id="myCanvas" width="250" height="200" style="border:1px solid #d3d3d3;"></canvas><br /> <img src="http://www.tikona.in/templates/images/logo.gif" id="s" /><br /> <script><br /> var c=document.getElementById("myCanvas");<br /> var ctx=c.getContext("2d");<br /> img = document.getElementById('s');<br /> ctx.drawImage(img,50,60);<br /> </script><br /> <br /> Output:<br /> <br /> <br /> <b>What is SVG?</b><br /> <br /> SVG stands for Scalable Vector Graphics.<br /> SVG is a language for describing 2D graphics in xml.<br /> <br /> <b>Advantages:</b><br /> SVG images can be created/edited using any text editor.<br /> SVG images can be searched, indexed, scripted & compressed.<br /> SVG images are scalable.<br /> SVG images can be printed with high quality with any resolution.<br /> SVG are zoomable.<br /> <br /> Browser Compatibility:<br /> <br /> <span style="color:#FF0000"><span style="font-family:Verdana">Note: IE <=8 do not support this feature.<br /> </span></span><br /> <b>Embed SVG directly into html pages:</b><br /> <br /> <b>Ex1:</b><br /> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"><br /> <polygon<br /> points="100,10 40,180 190,60 10,60 160,180"<br /> style="fill:blue;<br /> stroke:red;<br /> stroke-width:5;<br /> fill-rule<img src="http://www.webcosmoforums.com/core/images/smilies/redface.png" border="0" alt="" title="Embarrassment" smilieid="2" class="inlineimg" />venodd;<br /> "><br /> </svg><br /> <br /> <b>Output:</b><br /> <br /> <br /> <b>Ex2:</b><br /> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" ><br /> <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="blue" /><br /> </svg><br /> <br /> <b>Output:</b><br /> <br /> <br /> <b>Main Difference between Canvas & SVG:</b><br /> <br /> 1)Canvas is resolution dependent whereas SVG is resolution independent.<br /> 2)Canvas does not support event handlers whereas SVG support s event handlers.<br /> 3)Canvas can save an image as .png or .jpg.<br /> 4)Canvas is well suited for game application.<br /> <br /> <span style="font-size:20px"><span style="font-family:arial"><b>HTML5 Drag/Drop<br /> </b></span></span><span style="font-family:arial"><br /> </span>The Drag/Drop is a new feature in HTML5 and which works exactly like js/jquery Drag/Drop and we don’t need any external js file to make it work. You can drop any html element to anywhere inside the web page.<br /> <br /> Browser Compatibility:<br /> <br /> <span style="color:#FF0000"><span style="font-family:Verdana">Note: IE <=8 do not support this feature.<br /> </span></span><br /> Let’s divide this things into few steps.<br /> <b>Step 1:</b> Make the element draggable and put ondragstart attributeon it , which you want to be draggable<br /> Ex: <img draggable="true" ondragstart=”drag(event)”/><br /> <b>Step 2:</b> What to Drag?– ondragstart() & setData()<br /> We should take care of the drag(event) method while dragging starts, which will eventually set the data type and value of the draggable element.<br /> Ex: function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id);}<br /> <b>Step 3:</b> Where to drop? – ondragover<br /> During “ondragover” method , we need to stop default handling of the element, so that by default data/elements cannot be dropped in any other element. To prevent it, use event.preventDefault( );<br /> <b>Step 4:</b> Do the Drop – ondrop<br /> This function is triggered when the dragged element is dropped.<br /> Ex: <br /> function drop(ev){<br /> ev.preventDefault();<br /> var data=ev.dataTransfer.getData("Text");<br /> ev.target.appendChild(document.getElementById(data ));<br /> }<br /> <br /> Let’s take a complete example:<br /> <br /> <!DOCTYPE HTML><br /> <html><br /> <head><br /> <style>#drop_area{ width:350px;height:50px;padding:5px;border:1px solid #ff0000;}</style><br /> <script><br /> function allowDrop(ev) {<br /> ev.preventDefault();<br /> }<br /> function drag(ev) {<br /> ev.dataTransfer.setData("Text",ev.target.id);<br /> }<br /> function drop(ev){<br /> ev.preventDefault();<br /> var data=ev.dataTransfer.getData("Text");<br /> ev.target.appendChild(document.getElementById(data ));<br /> }<br /> </script><br /> </head><br /> <body><br /> <br /> <div id="drop_area" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br /> <img id="draggable_img" src="img.gif" draggable="true" ondragstart="drag(event)" width="50" height="50" /><br /> <br /> </body><br /> </html><br /> <br /> <b><span style="font-size:20px">HTML5 Geolocation</span><br /> <br /> </b><span style="font-family:arial"><span style="color:#000000">This html geolocation api is used to detect the geographical position of a user unless the user approves it. This is very useful for devices having GPS like iphone etc.</span><br /> </span><br /> Browser Compatibility:<br /> <br /> <span style="color:#FF0000"><span style="font-family:Verdana">Note: IE <=8 do not support this feature.<br /> </span></span><br /> <b>Basic Steps need to be followed:</b><br /> <b>Step1:</b> check whether geolocation is supported by the browser.<br /> <b>Step2:</b> if yes, run getCurrentPosition() method, otherwise display an error message.<br /> <b>Step3:</b> if getCurrentPosition() is successful, it returns a coordinates objects to functioned mentioned in its parameter.In this case showPosition() method is passed as a parameter.<br /> <b>Step4:</b> The showPosition() method is used to displays the Latitude, Longitude & map etc.<br /> <b>Let’s take a complete example:<br /> </b><br /> <!DOCTYPE html><br /> <html><br /> <body><br /> <p id="disp">Display Geographical Position Here:</p><br /> <input type="button" onclick="getLocation()" value="Run" /><br /> <div id="mapholder"></div><br /> <script><br /> var x=document.getElementById("disp");<br /> function getLocation()<br /> {<br /> if (navigator.geolocation)<br /> { navigator.geolocation.getCurrentPosition(showPosit ion,showError); }<br /> else<br /> {x.innerHTML="Geolocation is not supported by your browser.";}<br /> }<br /> function showPosition(position)<br /> {<br /> x.innerHTML="Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude;<br /> var latlon=position.coords.latitude+","+position.coords.longitude;<br /> var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";<br /> document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; <br /> }<br /> function showError(error)<br /> {<br /> switch(error.code)<br /> {<br /> case error.PERMISSION_DENIED:<br /> x.innerHTML="User denied Geolocation Request."<br /> break;<br /> case error.POSITION_UNAVAILABLE:<br /> x.innerHTML="Location information is unavailable."<br /> break;<br /> case error.TIMEOUT:<br /> x.innerHTML="Timed out."<br /> break;<br /> case error.UNKNOWN_ERROR:<br /> x.innerHTML="An unknown error."<br /> break;<br /> } } <br /> </script><br /> </body><br /> </html><br /> <b>Output:</b><br /> <br /> The getCurrentPosition () method returns an object with its value, if the method runs successfully. By default it always return latitude(in decimal), longitude(in decimal), accuracy.<br /> <br /> <b>Geolocation Other Interesting Methods:</b><br /> <br /> <b>Method 1 :</b> watchPosition() -> returns the current position of the user and continues to return updated position as the user moves on (like the GPS in a car)<br /> <b>Method 2 :</b> clearPosition() -> stops the watchPosition() method<br /> <br /> <b><b><span style="font-size:20px">Audio Element<br /> </span></b></b><span style="font-family:arial"><span style="color:#000000">The html audio element is used to play audio on the web page.</span></span><span style="font-size:10px"><br /> Audio element attributes: controls, auto play, muted, height, width etc.</span><br /> <b>Audio Tags: </b>audio, source<br /> <b><br /> Ex:<br /> </b><audio controls ><br /> <source src="horse2.mp3" type="audio/mpeg"><br /> <source src="horse1.ogg" type="audio/ogg"> <br /> Your browser does not support html5 audio element.<br /> </audio><br /> <br /> <b>Output:<br /> <br /> <b><span style="font-size:20px"><br /> Video Element<br /> </span></b></b>The html video element is used to show video on the web page and it’s a good alternative of flash.<b><b><span style="font-size:20px"><br /> </span></b></b><b>Tag:</b><video><br /> <b>Video element attributes:</b> controls, auto play, muted, poster, loop, preload, src, height, width etc.<br /> <b>Video Tags: </b>video, source, track<br /> <b><br /> Ex: </b> <br /> <span style="font-family:arial"><span style="color:#000000"><video width="200" height="200" controls></span><br /> <span style="color:#000000"><source src="movie1.mp4" type="video/mp4"></span><br /> <span style="color:#000000"><source src="movie2.ogg" type="video/ogg"></span><br /> <span style="color:#000000">Your browser does not support html5 video tag.</span><span style="color:#000000"> <br /> <</span><span style="color:#000000">/video><br /> </span></span><br /> <b>Output:<br /> </b><br /> <br /> <b>Browser Compatibility:<br /> </b><br /> <span style="color:#FF0000">Note: IE MP4Chrome => MP4, WebM, OggFF => MP4(FF 21 in windows 7,8,vista), WebM, OggOpera => WebM, Ogg</span><br /> <b><b><span style="font-size:20px"><br /> <br /> Source Element<br /> </span></b></b>This element is used for multiple media resources (audio and video both)<br /> <b>Tag: </b><source><b><br /> Ex:</b><br /> <audio controls><br /> <source src="cat.ogg" type="audio/ogg"><br /> <source src="cat.mp3" type="audio/mpeg"><br /> Your browser does not support html5 audio element.<br /> </audio><br /> <b><br /> Screenshot:<br /> </b><br /> <b><b><span style="font-size:20px"><br /> Embed Element<br /> </span></b></b>It creates a container for an external application or interactive content (any plug-in) like flash animation.<b><br /> Tag: </b><span style="color:#000000"><span style="font-family:Calibri"><span style="font-family:arial"><embed></span><br /> </span></span><b><br /> Ex:</b> <br /> <span style="color:#000000"><span style="font-family:Verdana"><embed src="welcome.swf"></span></span><br /> <b><br /> Screenshot:<br /> </b><br /> <b><b><span style="font-size:20px"><br /> Track Element<br /> </span></b></b>Its display text tracks for video/audio file.<br /> <b><br /> Tag: </b><track><b><br /> Ex:<br /> </b><video src="foo.ogv"><br /> <track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default></track><br /> <track kind="subtitles" label="Deutsche Untertitel" src="subtitles_de.vtt" srclang="de"></track><br /> </video><br /> <b> Screenshot: </b>... </div> <div class="b-post-sm__date">11-04-2013, 01:33 AM</div> </div> </li> <li class="b-post-sm js-post-sm" data-nodeid="1038967"> <div class="b-post-sm__content"> <div class="b-post-sm__title ellipsis"> <a href="http://www.webcosmoforums.com/articles/tutorials/html-tutorials/1038967-common-html-tags">Common HTML Tags</a> </div> <div class="b-post-sm__author"> <a href="http://www.webcosmoforums.com/member/1-manik">manik</a> </div> <div class="b-post-sm__post-content post-content ellipsis restore"> <b><span style="font-size:28px">Common <span style="color:dimgray">HTML Tags</span></span></b><span style="font-family:Arial"><span style="color:black"><br /> <br /> In this article we are going to learn some basic HTML tags. In the previous article we learned that html tags are keywords surrounded by angle brackets, and they come in pairs, the start tag <<i>tag</i>> and the end tag </<i>tag</i>>.</span></span><span style="font-family:Arial"><br /> <br /> </span> <span style="font-family:Arial"><span style="color:black">We already have our first Hello World webpage, so let`s continue from there, using some basic HTML tags. We have already learned about <HTML> and <BODY> tags. We will learn some more common HTML tags:</span></span><span style="font-family:Arial"><br /> <br /> </span> <div class="text_table_"><table class="text_table_grid"><tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><HEAD></span></b><br /> <b><span style="color:black"></HEAD></span></b></span></td> <td class="text_table_grid_td"> <span style="font-family:Arial"><span style="color:black">Between the head tags all the head elements are contained, such as <TITLE> , scripts, instructions for the browser to where to find stylesheets and more.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><TITLE></span></b><br /> <b><span style="color:black"></TITLE></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">The title tag defines the document title, visible in the browser toolbar and provides the title for the page in search-engine result.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><CENTER></span></b><br /> <b><span style="color:black"></CENTER></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><i><span style="color:black">(deprecated</span><span style="color:red">*</span><span style="color:black">)</span></i></span><span style="font-family:Arial"><span style="color:black">The center tag is used to center the elements of the page.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><DIV></span></b><br /> <b><span style="color:black"></DIV></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">The div tag defines a division or a section of a document, often grouping block-level elements to be formatted with styles.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><H1></H1></span></b><br /> <b><span style="color:black">.....</span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"><H6></H6></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">The <H> tags define HTML headings, commonly used for titles, in order, the <H1> tag being the most important heading and <H6> being the least important .</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><P></span></b><br /> <b><span style="color:black"></P></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">Paragraph.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><B ></span></b><br /> <b><span style="color:black"></B></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><i><span style="color:black">(deprecated</span><span style="color:red">*</span><span style="color:black">) </span></i></span><span style="font-family:Arial"><span style="color:black">Bold text.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><EM></span></b><br /> <b><span style="color:black"></EM></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">Emphasis – this tag usually produces italic text.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><U></span></b><br /> <b><span style="color:black"></U></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><i><span style="color:black">(deprecated</span><span style="color:red">*</span><span style="color:black">) </span></i></span><span style="font-family:Arial"><span style="color:black">Underline text.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><SPAN></span></b><br /> <b><span style="color:black"></SPAN></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">A span tag is used to group inline elements (text) and be styled with CSS.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"><span style="font-family:Arial"><b><span style="color:black"><BR></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">The br tag is used to force line break within a paragraph. It doesn`t have an end tag.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"><span style="font-family:Arial"><b><span style="color:black"><HR></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">HR tag is used to indicate break between sections , by creating a horizontal line.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><TABLE ></span></b><br /> <b><span style="color:black"></TABLE></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">A table is a useful method of formatting and grouping tabular data. It is divided into rows <TR> - Table Row and each row is divided into cells <TD> - Table Data. A cell can contain text, pictures, forms, other tables, etc.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><TD></span></b><br /> <b><span style="color:black"></TD></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">Table cell.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><TR></span></b><br /> <b><span style="color:black"></TR></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">Table row.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><UL></span></b><br /> <b><span style="color:black"></UL></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">This tag is used to specify an unordered list, bulleted. It contains <LI></LI> tags.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><LI></span></b><br /> <b><span style="color:black"></LI></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">Defines list items, included in <UL> or <OL> lists.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><OL ></span></b><br /> <b><span style="color:black"></OL></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">This tag is used to specify an ordered list, that will include <LI> elements numbered automatically numerical or alphabetical.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><FONT ></span></b><br /> <b><span style="color:black"></FONT></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><i><span style="color:black">(deprecated</span><span style="color:red">*</span><span style="color:black">) </span></i></span><span style="font-family:Arial"><span style="color:black">It defines font characteristics of the text between these tags, like font face, font size and color.</span></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><SUB></span></b><br /> <b><span style="color:black"></SUB></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">Defines subscript text, used usually in chemical formula, appearing half a character below the baseline. Eg.</span></span><span style="font-family:Arial">CO<b><sub><span style="color:red">2</span></sub></b></span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><SUP></span></b><br /> <b><span style="color:black"></SUP></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">Defines superscript text, used usually in math formulas, footnotes, appearing half a character above the baseline. Eg.</span></span><span style="font-family:Arial"> 2<sup> <b><span style="color:red">2</span></b></sup> = 4</span></td> </tr> <tr valign="top" class="text_table_grid_tr"><td class="text_table_grid_td"> <span style="font-family:Arial"><b><span style="color:black"><A></span></b><br /> <b><span style="color:black"></A></span></b></span></td> <td class="text_table_grid_td"><span style="font-family:Arial"><span style="color:black">Usually referred as a link or hyperlink, this tag defines an anchor, used to create a link to another document by using the<i> href </i>attribute, or by using the<i> name</i> attribute – to create a bookmark inside a document.</span></span></td> </tr> </table></div> <span style="font-family:Arial"><br /> </span> <span style="font-family:Arial"><span style="color:red">* </span></span><span style="font-family:Arial"><i>Deprecated tags are declared so in HTML4 because they have been superseded by more functional/flexible HTML or CSS atributes. They should be supported by modern browsers but eventually are likely to become obsolete.</i></span><span style="font-family:Arial"><br /> <br /> </span> <span style="font-family:Arial"><span style="color:black">Now we are going to use in our HTML document the knowledge we have so far. Don’t mind the styling attributes, we will learn about them later on.</span></span><span style="font-family:Arial"><br /> <br /> </span> <span style="font-family:Arial"><span style="color:black">The code:</span></span><span style="font-family:Arial"><br /> <br /> </span> <div class="text_table_"><table class="text_table_MsoTableGrid"><tr valign="top" class="text_table_MsoTableGrid_tr"><td width="638" class="text_table_MsoTableGrid_td"> <span style="font-family:Arial"><span style="color:black"><HTML></span></span><span style="font-family:Arial"><br /> <b><span style="color:black"> <HEAD></span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"> <TITLE></span></b></span> <span style="font-family:Arial"><span style="color:#00b0f0"> MY FIRST WEBPAGE</span></span><span style="font-family:Arial"><b><span style="color:black"> </TITLE</span></b><br /> <b><span style="color:black"> </HEAD></span></b></span> <span style="font-family:Arial"><br /> </span> <span style="font-family:Arial"><span style="color:black"> <BODY></span></span><span style="font-family:Arial"><br /> <b><span style="color:black"> <CENTER></span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"> <DIV </span></b></span> <span style="font-family:Arial"><span style="color:black">style="background:#</span></span><span style="font-family:Arial"><span style="color:black">95CBE9"<b>></b></span></span><span style="font-family:Arial"><br /> </span> <span style="font-family:Arial"><span style="color:black"> <H1></span></span><span style="font-family:Arial"><span style="color:#00b0f0">HELLO WORLD!</span></span><span style="font-family:Arial"><span style="color:black"></H1></span></span><span style="font-family:Arial"><br /> </span> <span style="font-family:Arial"><span style="color:black"> <b><P> </b></span></span><span style="font-family:Arial"><span style="color:#00b0f0">This is my first paragraph. </span></span><span style="font-family:Arial"><b><span style="color:black"><B ></span></b></span><span style="font-family:Arial"><span style="color:#00b0f0">This text is BOLD.</span></span><span style="font-family:Arial"><b><span style="color:black"></B ></span></b></span><span style="font-family:Arial"><span style="color:#00b0f0"> .</span></span><span style="font-family:Arial"><br /> <b><span style="color:black"><EM></span></b></span> <span style="font-family:Arial"><span style="color:#00b0f0">This is a sample of emphasized text.</span></span><span style="font-family:Arial"><b><span style="color:black"></EM></span></b><b><span style="color:black"><BR></span></b><br /> <b><span style="color:black"><SPAN </span></b></span> <span style="font-family:Arial"><span style="color:black">style="color:red"<b>></b></span></span><span style="font-family:Arial"><span style="color:#00b0f0">This is an example of using the &lt;span&gt; tag, along with </span></span><span style="font-family:Arial"><b><span style="color:black"><U></span></b></span><span style="font-family:Arial"><span style="color:#00b0f0">underlined text.</span></span><span style="font-family:Arial"><b><span style="color:black"></U></span></b><br /> <b><span style="color:black"> </SPAN></span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"> </P></span></b></span> <span style="font-family:Arial"><br /> </span> <span style="font-family:Arial"><span style="color:black"> <b></DIV></b></span></span><span style="font-family:Arial"><br /> <br /> <b><span style="color:black"> <HR></span></b></span> <span style="font-family:Arial"><br /> <br /> </span> <div class="text_table_"><table class="text_table_MsoTableGrid"><tr valign="top" class="text_table_MsoTableGrid_tr"><td width="623" class="text_table_MsoTableGrid_td"> <span style="font-family:Arial"><span style="color:black">Table example:</span></span><span style="font-family:Arial"><br /> <b><span style="color:black"><TABLE border="1" ></span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"> <TR></span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"> <TD></span></b></span> <span style="font-family:Arial"><br /> </span> <span style="font-family:Arial"><span style="color:black">This is an unordered list in </span></span><span style="font-family:Arial"><span style="color:#00b0f0">Col 1, Row 1</span></span><span style="font-family:Arial"><span style="color:black">:</span></span><span style="font-family:Arial"><br /> <b><span style="color:black"> <UL></span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"> <LI></span></b></span> <span style="font-family:Arial"><span style="color:#00b0f0">List element 1</span></span><span style="font-family:Arial"><span style="color:black"> <b></LI></b></span></span><span style="font-family:Arial"><br /> <b><span style="color:black"> <LI> </span></b></span> <span style="font-family:Arial"><span style="color:#00b0f0">List element 2 </span></span><span style="font-family:Arial"><b><span style="color:black"></LI></span></b><br /> <b><span style="color:black"> <LI> </span></b></span> <span style="font-family:Arial"><span style="color:#00b0f0">List element 3</span></span><span style="font-family:Arial"><span style="color:black"> <b></LI></b></span></span><span style="font-family:Arial"><br /> <b><span style="color:black"> </UL></span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"> </TD></span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"> <TD></span></b></span> <span style="font-family:Arial"><br /> </span> <span style="font-family:Arial"><span style="color:black">This is an ordered list in </span></span><span style="font-family:Arial"><span style="color:#00b0f0">Col 2, Row 1</span></span><span style="font-family:Arial"><span style="color:black">:</span></span><span style="font-family:Arial"><br /> <b><span style="color:black"> <OL></span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"> <LI></span></b></span> <span style="font-family:Arial"><span style="color:#00b0f0">List element 1</span></span><span style="font-family:Arial"><span style="color:black"> <b></LI></b></span></span><span style="font-family:Arial"><br /> <b><span style="color:black"> <LI> </span></b></span> <span style="font-family:Arial"><span style="color:#00b0f0">List element 2 </span></span><span style="font-family:Arial"><b><span style="color:black"></LI></span></b><br /> <b><span style="color:black"> <LI> </span></b></span> <span style="font-family:Arial"><span style="color:#00b0f0">List element 3</span></span><span style="font-family:Arial"><span style="color:black"> <b></LI></b></span></span><span style="font-family:Arial"><br /> <b><span style="color:black"> </OL></span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"> </TD></span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"> </TR></span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"> <TR></span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"> <TD></span></b></span> <span style="font-family:Arial"><br /> </span> <span style="font-family:Arial"><span style="color:black">Example of using superscript in </span></span><span style="font-family:Arial"><span style="color:#00b0f0">Col 1, Row 2</span></span><span style="font-family:Arial">: <BR><br /> <b><span style="color:#00b0f0"> CO </span></b></span> <span style="font-family:Arial"><b><span style="color:black"><SUB> </span></b><b><span style="color:#00b0f0">2</span></b><b><span style="color:black"> </SUB></span></b><br /> <b><span style="color:black"> </TD></span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"> <TD></span></b></span> <span style="font-family:Arial"><br /> </span> <span style="font-family:Arial"><span style="color:black">Example of using superscript in </span></span><span style="font-family:Arial"><span style="color:#00b0f0">Col 2, Row 2</span></span><span style="font-family:Arial">: <BR><br /> <b><span style="color:#00b0f0"> 2 </span></b></span> <span style="font-family:Arial"><b><span style="color:black"><SUP> </span></b><b><span style="color:#00b0f0">2</span></b><b><span style="color:black"> </SUP> </span></b><b><span style="color:#00b0f0">= 4</span></b><br /> <b><span style="color:black"> </TD></span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"> </TR></span></b></span> <span style="font-family:Arial"><br /> <b><span style="color:black"></TABLE></span></b></span> <span style="font-family:Arial"><br /> <br /> </span> <span style="font-family:Arial"><span style="color:black"><A href="http://www.google.com"></span></span><span style="font-family:Arial"><span style="color:#00b0f0">This is a hyperlink to GOOGLE.</span></span><span style="font-family:Arial"><span style="color:black"></A></span></span></td> </tr> </table></div> <span style="font-family:Arial"><br /> <b><span style="color:black"> </CENTER> </span></b></span> <span style="font-family:Arial"><br /> </span> <span style="font-family:Arial"><span style="color:black"></BODY></span></span><span style="font-family:Arial"><br /> </span> <span style="font-family:Arial"><span style="color:black"></HTML> </span></span></td> </tr> </table></div> <span style="font-family:Arial"><br /> </span> <span style="font-family:Arial"><span style="color:black">The result:<br /> </span></span><span style="font-family:Arial"><br /> <br /> <br /> Thats all on our Basic Html Tag tutorial.</span>... </div> <div class="b-post-sm__date">03-20-2011, 08:07 PM</div> </div> </li> <li class="b-post-sm js-post-sm" data-nodeid="1038965"> <div class="b-post-sm__content"> <div class="b-post-sm__title ellipsis"> <a href="http://www.webcosmoforums.com/articles/tutorials/html-tutorials/1038965-how-to-create-html-page">How to Create HTML Page</a> </div> <div class="b-post-sm__author"> <a href="http://www.webcosmoforums.com/member/1-manik">manik</a> </div> <div class="b-post-sm__post-content post-content ellipsis restore"> <b><span style="font-size:28px">My First page <span style="color:dimgray">– Hello World!</span> </span></b><br /> <br /> On this tutorial we are going to create our very first web-page: The Hello World! page. <br /> <br /> We will need a text editor, like NotePad and a browser (Internet Explorer, Mozilla Firefox). <br /> <br /> A HTML document is composed by HTML tags and plain text (and/or pictures/flash etc.). HTML tags usually come in pairs like <p> and </p>, the first tag in a pair being the <b>start tag</b> and the second the <b>end tag</b>. The browser does not display the tags, but rather interpret them and display the content of the page. Every HTML document has a few distinctive elements: These tags mark the beginning and the end of the HTML document. These tags mark the beginning and the end of the VISIBLE page content. Now let`s build o... </div> <div class="b-post-sm__date">03-09-2011, 08:00 PM</div> </div> </li> <li class="b-post-sm js-post-sm" data-nodeid="1038964"> <div class="b-post-sm__content"> <div class="b-post-sm__title ellipsis"> <a href="http://www.webcosmoforums.com/articles/tutorials/html-tutorials/1038964-html-%C2%96-what-is-it-why-learn-html">HTML – What is it? Why Learn HTML?</a> </div> <div class="b-post-sm__author"> <a href="http://www.webcosmoforums.com/member/1-manik">manik</a> </div> <div class="b-post-sm__post-content post-content ellipsis restore"> <span style="font-family:Arial"><b><span style="font-size:28px"><span style="color:black">HTML</span><span style="color:#666666"> <span style="color:dimgray">– what is it?</span></span></span></b></span><br /> <span style="font-family:Arial">HTML stands for Hyper Text Markup Language is the underlying code of web pages, it`s not a programming language, but a markup language, being the first step before learning a programming language.</span> <br /> <br /> HTML is the mother and father of every web page, as of now. Without HTML there cannot be any web page.<br /> <br /> <span style="font-family:Arial"><span style="font-size:28px"><b><span style="color:black">WHY </span></b></span></span><b><span style="color:#666666"><span style="font-family:&quot"><span style="font-family:Arial"><span style="font-size:28px"> <span style="color:dimgray">learn HTML ?</span></span></span><br /> </span></span></b><span style="color:black"><span style="font-family:&quot"><span style="font-family:Arial">The online presence nowadays is a must - either that you have a business or you just want to put your thoughts on the net by creating a website. The question is HOW to build it ? You can do it by either using a WYSIWYG (Wh</span></span></span>... </div> <div class="b-post-sm__date">03-08-2011, 10:28 PM</div> </div> </li> </ul> <div class="widget-footer h-align-left h-clear"> <a href="http://www.webcosmoforums.com/search?r=11748208" class="b-button">View All</a> </div> </div> </div> <!-- *** END WIDGET widgetid:8, widgetinstanceid:139, template:widget_search *** --> </div> </div> <!-- section 3 --> <div class="canvas-layout-row no-columns h-clearfix l-row"> <div class="canvas-widget-list section-3 js-sectiontype-extra h-clearfix l-col__large-12 l-col__small--full"> </div> </div> </div> </div> <div class="h-clear"></div> </div> <div id="footer"> <div id="footer-tabbar" class="h-clearfix"> <ul class="chooser-list h-left js-footer-chooser-list"> <li> <select class="stylechooser custom-dropdown"> <option value="41" selected="selected"> WebcosmoForums Style</option> <option value="8"> Default vB5 Style</option> </select> </li> </ul> <ul class="nav-list h-right js-footer-nav-list"> <li class=""> <a rel="nofollow" href="http://www.webcosmoforums.com/help">Help</a> </li> <li class=""> <a rel="nofollow" href="http://www.webcosmoforums.com/contact-us">Contact Us</a> </li> <li><a href="#" class="js-footer-go-to-top">Go to top</a></li> </ul> </div> <!-- BuySellAds Zone Code --> <center><div id="bsap_1243581" class="bsarocks bsap_8273dc310596d00296a7ae56d4a1c209"></div></center> <!-- End BuySellAds Zone Code --> </div> </div> <div id="footer-copyright"> <div id="footer-vb-copyright">Powered by <a href="https://www.vbulletin.com" id="vbulletinlink">vBulletin&reg;</a> Version 5.2.3 <br />Copyright &copy; 2017 vBulletin Solutions, Inc. All rights reserved. </div> <div id="footer-user-copyright"></div> <div id="footer-current-datetime">All times are GMT-5. This page was generated at 08:57 AM.</div> </div> </div> <div id="loading-indicator" class="js-loading-indicator b-ajax-loading-indicator h-hide"> <span>Working...</span> </div> <div id="confirm-dialog" class="sb-dialog"> <div class="dialog-content h-clearfix"> <div class="icon h-left"></div> <div class="message"></div> </div> <div class="b-button-group"> <button id="btnConfirmDialogYes" type="button" class="b-button b-button--primary js-button">Yes</button> <button id="btnConfirmDialogNo" type="button" class="b-button b-button--secondary js-button">No</button> </div> </div> <div id="alert-dialog" class="sb-dialog"> <div class="dialog-content h-clearfix"> <div class="icon h-left"></div> <div class="message"></div> </div> <div class="b-button-group"> <button id="btnAlertDialogOK" type="button" class="b-button b-button--primary js-button">OK</button> </div> </div> <div id="prompt-dialog" class="sb-dialog"> <div class="dialog-content table h-clearfix"> <div class="message td"></div> <div class="input-box-container td"> <input type="text" class="input-box textbox" /> <textarea class="input-box textbox h-hide" rows="3"></textarea> </div> </div> <div class="b-button-group"> <button id="btnPromptDialogOK" type="button" class="b-button b-button--primary js-button">OK</button> <button id="btnPromptDialogCancel" type="button" class="b-button b-button--secondary js-button">Cancel</button> </div> </div> <div id="slideshow-dialog" class="sb-dialog slideshow"> <div class="slideshow-wrapper"><div class="vb-icon vb-icon-x-square close-btn">X</div></div> <div class="caption"></div> <div class="thumbnails"></div> </div> <div class="unsubscribe-overlay-container"></div> <div id="fb-root" data-facebook-language="en_US"></div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="js/jquery/jquery-2.1.4.min.js"><\/script>');</script> <script type="text/javascript" src="js/footer-rollup-523.js"></script> <script type="text/javascript"> window.vBulletin = window.vBulletin || {}; vBulletin.version = '5.2.3'; </script> <!-- BuySellAds Ad Common Code --> <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script> <!-- End BuySellAds Ad Common Code --> <script type="text/javascript" src="js/conversation-rollup-523.js"></script> <script type="text/javascript" src="js/css_b_comp_menu_dropdown.js?v=523"></script> <script type="text/javascript" src="js/css_b_comp_menu_horizontal.js?v=523"></script> <script type="text/javascript" src="js/facebook.js?v=523"></script> </body> </html>