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 & 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="post-links"> <a href="#" class="see-link more" data-toggle-text="See less">See more</a> <span>|</span> <a href="http://www.webcosmoforums.com/articles/tutorials/html-tutorials/1038971-html5-tags-and-tutorial" class="goto-post"> Go to post </a> </div> </div> <div class="edit-conversation-container OLD__edit-conversation-container"></div> </div> </div> </li> <li data-node-id="1038967" data-node-publishdate="1300633620" class="b-post js-post js-comment-entry__parent list-item list-item-text h-left h-clear" itemscope itemtype="http://schema.org/Article"> <meta itemprop="name" content="Common HTML Tags" /> <meta itemprop="url" content="http://www.webcosmoforums.com/articles/tutorials/html-tutorials/1038967-common-html-tags" /> <a id="post1038967" class="anchor"></a> <div class="b-post__hide-when-deleted"> <hr class="b-divider--section OLD__section-divider"> <div class="list-item-header h-left"> <div class="post-header h-left table center-vertical"> <div class="post-action-wrapper ellipsis multiline td"> <h2> <a href="http://www.webcosmoforums.com/articles/tutorials/html-tutorials/1038967-common-html-tags" class="b-post__title js-post-title starter">Common HTML Tags</a> </h2> <ul class="b-post__article-meta h-margin-top-xs h-margin-bottom-l"> <li class="b-post__article-meta-item b-post__article-meta-item--inline"> Published: 03-20-2011, 12:07 PM </li> <li class="b-post__article-meta-item b-post__article-meta-item--inline"> 111742 views </li> <li class="b-post__article-meta-item b-post__article-meta-item--inline"> 0 comments </li> </ul> </div> </div> </div> <!-- end list item header --> <div class="js-post__content-wrapper list-item-body-wrapper h-clear" data-node-type="starter"> <div class="js-post__content list-item-body conversation-body"> <h2 class="b-post__stream-post-title js-post-title h-hide">Common HTML Tags</h2> <div class="post-content restore js-post__content-text h-wordwrap" itemprop="text"> <img src="filedata/fetch?id=1038975&amp;type=thumb" class="h-left h-margin-right-l h-margin-bottom-m h-padding-xs b-post__preview-image" /> <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="post-links"> <a href="#" class="see-link more" data-toggle-text="See less">See more</a> <span>|</span> <a href="http://www.webcosmoforums.com/articles/tutorials/html-tutorials/1038967-common-html-tags" class="goto-post"> Go to post </a> </div> </div> <div class="edit-conversation-container OLD__edit-conversation-container"></div> </div> </div> </li> <li data-node-id="1038965" data-node-publishdate="1299679200" class="b-post js-post js-comment-entry__parent list-item list-item-text h-left h-clear" itemscope itemtype="http://schema.org/Article"> <meta itemprop="name" content="How to Create HTML Page" /> <meta itemprop="url" content="http://www.webcosmoforums.com/articles/tutorials/html-tutorials/1038965-how-to-create-html-page" /> <a id="post1038965" class="anchor"></a> <div class="b-post__hide-when-deleted"> <hr class="b-divider--section OLD__section-divider"> <div class="list-item-header h-left"> <div class="post-header h-left table center-vertical"> <div class="post-action-wrapper ellipsis multiline td"> <h2> <a href="http://www.webcosmoforums.com/articles/tutorials/html-tutorials/1038965-how-to-create-html-page" class="b-post__title js-post-title starter">How to Create HTML Page</a> </h2> <ul class="b-post__article-meta h-margin-top-xs h-margin-bottom-l"> <li class="b-post__article-meta-item b-post__article-meta-item--inline"> Published: 03-09-2011, 10:00 AM </li> <li class="b-post__article-meta-item b-post__article-meta-item--inline"> 4004 views </li> <li class="b-post__article-meta-item b-post__article-meta-item--inline"> 0 comments </li> </ul> </div> </div> </div> <!-- end list item header --> <div class="js-post__content-wrapper list-item-body-wrapper h-clear" data-node-type="starter"> <div class="js-post__content list-item-body conversation-body"> <h2 class="b-post__stream-post-title js-post-title h-hide">How to Create HTML Page</h2> <div class="post-content restore js-post__content-text h-wordwrap" itemprop="text"> <img src="filedata/fetch?id=1038973&amp;type=thumb" class="h-left h-margin-right-l h-margin-bottom-m h-padding-xs b-post__preview-image" /> <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="post-links"> <a href="#" class="see-link more" data-toggle-text="See less">See more</a> <span>|</span> <a href="http://www.webcosmoforums.com/articles/tutorials/html-tutorials/1038965-how-to-create-html-page" class="goto-post"> Go to post </a> </div> </div> <div class="edit-conversation-container OLD__edit-conversation-container"></div> </div> </div> </li> <li data-node-id="1038964" data-node-publishdate="1299606540" class="b-post js-post js-comment-entry__parent list-item list-item-text h-left h-clear" itemscope itemtype="http://schema.org/Article"> <meta itemprop="name" content="HTML – What is it? Why Learn HTML?" /> <meta itemprop="url" content="http://www.webcosmoforums.com/articles/tutorials/html-tutorials/1038964-html-%C2%96-what-is-it-why-learn-html" /> <a id="post1038964" class="anchor"></a> <div class="b-post__hide-when-deleted"> <hr class="b-divider--section OLD__section-divider"> <div class="list-item-header h-left"> <div class="post-header h-left table center-vertical"> <div class="post-action-wrapper ellipsis multiline td"> <h2> <a href="http://www.webcosmoforums.com/articles/tutorials/html-tutorials/1038964-html-%C2%96-what-is-it-why-learn-html" class="b-post__title js-post-title starter">HTML – What is it? Why Learn HTML?</a> </h2> <ul class="b-post__article-meta h-margin-top-xs h-margin-bottom-l"> <li class="b-post__article-meta-item b-post__article-meta-item--inline"> Published: 03-08-2011, 01:49 PM </li> <li class="b-post__article-meta-item b-post__article-meta-item--inline"> 6049 views </li> <li class="b-post__article-meta-item b-post__article-meta-item--inline"> 0 comments </li> </ul> </div> </div> </div> <!-- end list item header --> <div class="js-post__content-wrapper list-item-body-wrapper h-clear" data-node-type="starter"> <div class="js-post__content list-item-body conversation-body"> <h2 class="b-post__stream-post-title js-post-title h-hide">HTML – What is it? Why Learn HTML?</h2> <div class="post-content restore js-post__content-text h-wordwrap" itemprop="text"> <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="post-links"> <a href="#" class="see-link more" data-toggle-text="See less">See more</a> <span>|</span> <a href="http://www.webcosmoforums.com/articles/tutorials/html-tutorials/1038964-html-%C2%96-what-is-it-why-learn-html" class="goto-post"> Go to post </a> </div> </div> <div class="edit-conversation-container OLD__edit-conversation-container"></div> </div> </div> </li> </ul> <div class="pagenav-container h-clearfix noselect h-hide"> <div class="js-pagenav pagenav h-right"> <a class="js-pagenav-button js-pagenav-prev-button b-button b-button--secondary h-hide-imp" data-page="0" tabindex="0">Previous</a> <a class="js-pagenav-button js-pagenav-next-button b-button b-button--secondary h-hide-imp" data-page="0" tabindex="0">Next</a> </div> </div> <div class="conversation-empty h-hide">There are no articles in this category.</div> <div class="list-footer"> <a href="#" class="js-markread" data-action="markRead">Mark This Channel Read</a> </div> </div> <div id="subscribed-tab" class="h-hide"> <div class="conversation-toolbar-wrapper top h-clear hide-on-editmode scrolltofixed-floating scrolltofixed-top " data-allow-history="1"> <div class="conversation-toolbar"> <ul class="toolset-right"> <li class="toolbar-filter toolbar-filter-top"> <div class="filter-wrapper h-clearfix"> <div class="label h-left">Filter</div> <div class="arrow vb-icon-wrapper h-left"><span class="vb-icon vb-icon-triangle-down-wide"></span></div> </div> </li> </ul> </div> <form action="profile/ApplyFollowingFilter" method="post" class="toolbar-filter-overlay h-clearfix"> <input type="hidden" name="nodeid" value="1038962" /> <input type="hidden" name="view" value="subscribed" /> <input type="hidden" name="per-page" value="10" /> <input type="hidden" name="pagenum" value="1" /> <input type="hidden" name="maxpages" value="20" /> <input type="hidden" name="userid" value="0" /> <input type="hidden" name="showChannelInfo" value="0" /> <ul class="filter-options-list"> <li> <div class="filter-header">Time</div> <div class="filter-options"> <label><input type="radio" name="filter_time" value="time_all" /><span>All Time</span></label> <label><input type="radio" name="filter_time" value="time_today" /><span>Today</span></label> <label><input type="radio" name="filter_time" value="time_lastweek" /><span>Last Week</span></label> <label><input type="radio" name="filter_time" value="time_lastmonth" checked="checked" class="js-default-checked" /><span>Last Month</span></label> </div> </li> <li> <div class="filter-header">Show</div> <div class="filter-options"> <label><input type="radio" name="filter_show" value="show_all" checked="checked" class="js-default-checked" /><span>All</span></label> <label><input type="radio" name="filter_show" value="vBForum_Text" /><span>Discussions only</span></label> <label><input type="radio" name="filter_show" value="vBForum_Gallery" /><span>Photos only</span></label> <label><input type="radio" name="filter_show" value="vBForum_Video" /><span>Videos only</span></label> <label><input type="radio" name="filter_show" value="vBForum_Link" /><span>Links only</span></label> <label><input type="radio" name="filter_show" value="vBForum_Poll" /><span>Polls only</span></label> </div> </li> <!-- end if prefixsets --> </ul> </form> <div class="filtered-by h-clearfix h-hide"> <label>Filtered by:</label> <div class="filter-text-wrapper h-left"> </div> <a href="#" class="clear-all h-hide">Clear All</a> </div> <div class="new-conversations-strip"><span></span> new posts</div> </div> <div class="conversation-empty">Please log in to your account to view your subscribed posts.</div> </div> <!-- END SUBSCRIBED TAB --> </div><!-- END TAB PANELS --> </div><!-- END TABS WRAPPER --> </div><!-- END WIDGET CONTENT --> </div> <!-- *** END WIDGET widgetid:56, widgetinstanceid:130, template:widget_cmschanneldisplay *** --> </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:131, template:widget_cmschannelnavigation *** --> <div class="b-module canvas-widget default-widget custom-html-widget" id="widget_131" data-widget-id="57" data-widget-instance-id="131"> <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:131, template:widget_cmschannelnavigation *** --> <!-- *** START WIDGET widgetid:58, widgetinstanceid:132, template:widget_tagnavigation *** --> <div class="b-module canvas-widget default-widget custom-html-widget" id="widget_132" data-widget-id="58" data-widget-instance-id="132"> <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:132, template:widget_tagnavigation *** --> <!-- *** START WIDGET widgetid:8, widgetinstanceid:133, template:widget_search *** --> <div class="b-module canvas-widget search-widget" id="widget_133" data-widget-id="8" data-widget-instance-id="133"> <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=12838257" class="b-button">View All</a> </div> </div> </div> <!-- *** END WIDGET widgetid:8, widgetinstanceid:133, 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 07:47 PM.</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/inlinemod.js?v=523"></script> <script type="text/javascript" src="js/channel-rollup-523.js"></script> <script type="text/javascript" src="js/facebook.js?v=523"></script> </body> </html>