Design your webpage to put your web content on multiple pages. You can keep your content in the middle column, you can use left column to use menu, and right column can be used to put an advertisement or some other stuff.Example           Three Column HTML Layout                                                    Main Menu                HTML                PHP                PERL...                                        Technical and Managerial Tutorials                                        Right Menu                HTML                PHP                PERL...                                

Some characters are reserved in HTML and they have special meaning when used in HTML document. For example, you cannot use the greater than and less than signs or angle brackets within your HTML text because the browser will treat them differently and will try to draw a meaning related to HTML tag.HTML processors must support following five special characters listed in the table that follows.SymbolDescriptionEntity NameNumber Code "quotation mark""'apostrophe''&ersand&&greater-than>>

The following is the list of features that can be detected by Modernizr −FeatureCSS PropertyJavaScript Check@font-face.fontfaceModernizr.fontfaceCanvas.canvasModernizr.canvasCanvas Text.canvastextModernizr.canvastextHTML5 Audio.audioModernizr.audioHTML5 Audio formatsNAModernizr.audio[format]HTML5 Video.videoModernizr.videoHTML5 Video FormatsNAModernizr.video[format]rgba().rgbaModernizr.rgbahsla().hslaModernizr.hslaborder-image.borderimageModernizr.borderimageborder-radius.borderradiusModernizr.borderradiusbox-shadow.boxshadowModernizr.boxshadowMultiple backgrounds.multiplebgsModernizr.multiplebgsOpacity.opacityModernizr.opacityCSS Animations.cssanimationsModernizr.cssanimationsCSS Columns.csscolumnsModernizr.csscolumnsCSS Gradients.cssgradientsModernizr.cssgradientsCSS Reflections.cssreflectionsModernizr.cssreflectionsCSS 2D Transforms.csstransformsModernizr.csstransformsCSS 3D Transforms.csstransforms3dModernizr.csstransforms3dCSS Transitions.csstransitionsModernizr.csstransitionsGeolocation API.geolocationModernizr.geolocationInput TypesNAModernizr.inputtypes[type]Input AttributesNAModernizr.input[attribute]localStorage.localstorageModernizr.localstoragesessionStorage.sessionstorageModernizr.sessionstorageWeb Workers.webworkersModernizr.webworkersapplicationCache.applicationcacheModernizr.applicationcacheSVG.svgModernizr.svgSVG Clip Paths.svgclippathsModernizr.svgclippathsSMIL.smilModernizr.smilWeb SQL Database.websqldatabaseModernizr.websqldatabaseIndexedDB.indexeddbModernizr.indexeddbWeb Sockets.websocketsModernizr.websocketsHashchange Event.hashchangeModernizr.hashchangeHistory Management.historymanagementModernizr.historymanagementDrag and Drop.draganddropModernizr.draganddropCross-window Messaging.crosswindowmessagingModernizr.crosswindowmessagingaddTest() Plugin APINAModernizr.addTest(str, fn)Read More

Cross-origin resource sharing (CORS) is a mechanism to allows the restricted resources from another domain in a web browserFor suppose, if you click on HTML5- video player in html5 demo sections. It will ask camera permission. If the user allows the permission then only it will open the camera or else it doesn't open the camera for web applications.The following is an example of event handlers in CORS:xhr.onload = function() {    var responseText = xhr.responseText;    // process the response.    console.log(responseText); }; xhr.onerror = function() {    console.log('There was an error!'); };

Two-way communication between the browsing contexts is called channel messaging. It is useful for communication across multiple origins.While creating messageChannel, it internally creates two ports to send the data and forwarded to another browsing context.postMessage() − Post the message throw channelstart() − It sends the dataclose() − it close the portsIn this scenario, we are sending the data from one iframe to another iframe. Here we are invoking the data in function and passing the data to DOM.var loadHandler = function(){    var mc, portMessageHandler;    mc = new MessageChannel();    window.parent.postMessage('documentAHasLoaded', 'http://foo.example', [mc.port2]);    portMessageHandler = function(portMsgEvent){     ... Read More

Create a new web browsing context either by creating new iframe or new window. We can send the data using with postMessage() and it has two arguments. They are asmessage − The message to sendtargetOrigin − Origin nameLet us see an example to send a message from iframe to button:var iframe = document.querySelector('iframe'); var button = document.querySelector('button'); var clickHandler = function(){    iframe.contentWindow.postMessage('The message to send.','https://www.tutorialspoint.com); } button.addEventListener('click',clickHandler,false);

Microdata introduces five global attributes that would be available for any element to use and give context for machines about your data.AttributeDescriptionItemscopeThis is used to create an item. The itemscope attribute is a boolean attribute that tells that there is Microdata on this page, and this is where it starts.Itemtype This attribute is a valid URL which defines the item and provides the context for the properties.ItemidThis attribute is a global identifier for the item.ItempropThis attribute defines a property of the item.ItemrefThis attribute gives a list of additional elements to crawl to find the name-value pairs of the item.Read More

The HTML5 canvas element enables dynamic, scriptable display of bitmap images and 2D forms. A bitmap is updated using a low level procedural model. 2D game development is also aided by HTML5 Canvas. The HTML element is used to draw graphics on a web page. Let’s dive into the article for learning more about creating text using HTML5 canvas. Create text using HTML5 Canvas Use the fillText() or strokeText() methods, or a mix of the two, to add text on the HTML "canvas" element. You can provide a variety of text settings, including style, weight, size, and font, using ... Read More

HTML5 canvas provides capabilities to create nice shadows around the drawings. All drawing operations affected by the four global shadow attributes.     Sr.No.                                         Property and Description1shadowColor [ = value ]This property returns the current shadow color and can be set, to change the shadow color.2shadowOffsetX [ = value ]This property returns the current shadow offset X and can be set, to change the shadow offset X.3shadowOffsetY [ = value ]This property returns the current shadow offset Y and can be set, ... Read More

To handle Server-Sent Events in HTML5, you can try to run the following code:                    document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false);          function eventHandler(event)          {             // Alert time sent by the server             document.querySelector('#ticker').innerHTML = event.data;          }                                                    [TIME]