Downloaded 52 times
![Custom data attributesAllows addition of custom attributes to anyelements using the data- pattern. [All browserssupport reading these via JavaScript’sgetAttribute() method.]<meter>Describes an amount within a range. [C5, F3.5, S4, O10]<progress>Control that shows real-time progress towardgoal. [Unsupported at publication time.]](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fhtml5-anintroductiontobeginners-140131024919-phpapp02%2f75%2fHTML5-introduction-for-beginners-19-2048.jpg&f=jpg&w=240)
![ NEW FORM ELEMENTS Email field [<input type="email">]Displays a form field for email addresses. URL field [<input type="url">]Displays a form field for URLs. Telephone field [<input type="tel">]Displays a form field for telephone numbers. Search field [<input type="search">]Displays a form field for search keywords. Slider (range) [<input type="range">]Displays a slider control.Number [<input type="number">]Displays a form field for numbers, often as aspinbox.](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fhtml5-anintroductiontobeginners-140131024919-phpapp02%2f75%2fHTML5-introduction-for-beginners-20-2048.jpg&f=jpg&w=240)
![ Date fields [<input type="date">]Displays a form field for dates. Supports date,month, or week. Dates with Times [<input type="datetime">]Displays a form field for dates with times.Supports datetime, datetime-local, or time. Color [<input type="color">]Displays a field for specifying colors. Autofocus support [<input type="text" autofocus>]Support for placing the focus on a specificform element. Placeholder support [<input type="email"placeholder="me@example.com">]Support for displaying placeholder text inside of a form field. In-place editing support [<p contenteditable></p>]Support for in-place editing of content via the browser.](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fhtml5-anintroductiontobeginners-140131024919-phpapp02%2f75%2fHTML5-introduction-for-beginners-21-2048.jpg&f=jpg&w=240)
![•Attribute Selector : Unlike CSS 2.1 where one has tomake match on a complete string of an attribute, CSSoffers the flexibility to make matches anywhere withinan attribute, be it beginning or end.Example:i.[attr^=val] –- matches a Document object model element (DOM) withthe attribute attr and a value starting with valii.[attr$=val] –- matches a DOM element with the attribute attrand a value ending with the suffix valiii.[attr*=val] –- matches a DOM element with the attribute attr anda value containing the substring val](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fhtml5-anintroductiontobeginners-140131024919-phpapp02%2f75%2fHTML5-introduction-for-beginners-35-2048.jpg&f=jpg&w=240)
Uploaded byVineeth N Krishnan
PPTX, PDF1,561 views
HTML5 introduction for beginners
HTML5 is the latest revision of the HTML standard, introducing new tags, improved error handling, backward compatibility, and multimedia capabilities without reliance on plugins. This document outlines the evolution from earlier HTML versions, the timeline of HTML5's development, its new structural elements, and integrated JavaScript APIs that enhance web applications. Additionally, it describes CSS3 features that expand design options, such as rounded corners, shadows, and improved layout control.
Recommended
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fcodedagentsdeck-251215155422-5497c599-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fvibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
HTML5 introduction for beginners
- 1.HTML5web development tothe next levelByVineeth N K
- 2.What is HTML5?HTML5 is a specification that describes some new tags and markup, as wellas some JavaScript APIs.HTML5 includes the fifth revision of the HTML markup language, CSS3, anda series of JavaScript APIs. Together, these technologies enable you to createcomplex applications that previously could be created only for desktopplatforms.HTML5 does not belong to a company or a specific browser. It has beenforged by a community of people interested in evolving the web and aconsortium of technological leaders that includes Google, Microsoft, Apple,Mozilla, Facebook, IBM, HP, Adobe, and many others.
- 3.What is HTML5?Evolution of HTML 4.0 and DOM level-2.Removal or redefinition of presentational markuplanguage.Formalized foundation-level APIsThe evolution of browser into a programming platform.
- 4.
- 5.TIMELINE HTML 2.01995Formalized the syntax and manyof the rules that were alreadyimplemented HTML 3.21997 Legally ignored by browserManufactures who began toimplement their own tags. Web Standard Project1998 Pushed for std. adoption addedweight to the W3Crecommendations & promotedstandard based browsers
- 6. HTML 4.01999Stabilized syntax and structureof HTML becomes the standard forweb authoring. Major milestone. XHTML 1.02000 Designed to move HTML towardsXML DTDs often caused it torender as HTML. More Structured XML basedapproach. Strict rules.
- 7.2000 The Growthof the Web High bandwidth connectionsincrease, as does the demand formultimedia & applications drivenby technologies such as Flash,AJAX... Work on XHTML 2.0 begins.20042004 Focusing on strictly structurallanguage. TheRise of HTML5
- 8.HTML5 TIMELINE 2004: The Rise of HTML5. 2004 : WHATWG (Web Hypertext ApplicationTechnology Working Group) begins whatwill become HTML5.2007 : W3C charters new working group adoptsWHATWG’s work, renamed HTML52009 : W3C does not renew the XHTML 2.0charter.2010 : Driven in large part by Apple, Google &public interest in HTML5grows.Microsoft,
- 9.WHY DO WENEED HTML5? Backward compatibility. Error Handling. New Structure And Syntax. Multimedia with less reliance on Plug-ins Integrated APIs Associated APIs
- 10.Backward Compatibility Anyuser agent that support HTML5 also supportdocuments written in previous versions of HTML. One of the best reasons for you to embraceHTML5 today is that it works in most existingbrowsers.
- 11.ERROR HANDLING Previousspecifications left error handling up to theuser agents. XHTML 2.0 featured draconian error handling. Pages would stop rendering if an error was found. HTML5 features detailed algorithms for parsing errors.
- 12.New Structure AndSyntax DOCTYPE has been simplified.PRIORDOCTYPESHTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 13.NEW DOCTYPEHTML 5<!DOCTYPEhtml > Deprecated TagsHTML5 has introduced a lot of new elements,but the specification also deprecates quite afew common elementsbasefontbigcenterfontsstrikettu
- 14. Aside fromthe presentational elements, supportfor frames has been removed. Despite the widespread use, frames caused somany usability and accessibility issuesframeframesetnoframes A few other elements are gone because there arebetter options are available. acronym gets replaced by abbr. applet gets replaced by object. dir gets replaced by ul.
- 15. In additionto deprecated elements, there are manyattributes that are no longer valid.alignlink, vlink, alink, and text attributes on the body tagbgcolorheight and widthscrolling on the iframe elementvalignhspace and vspacecellpadding, cellspacing, and border on table New Structural tags and attributes. developers to wrap elements with extra div tagswith IDs such as banner, sidebar, article, andfooter As nesting depth of the div tagincreases, more will be the confusion.
- 17. HTML5 specificationintroduces new tags specificallydesigned to divide a page into logical regions. <header>Defines a header region of a page or section. <footer>Defines a footer region of a page or section. <nav>Defines a navigation region of a page or section. <section>Defines a logical region of a page or a grouping ofcontent. <article>Defines an article or complete piece of content. <aside>Defines secondary or related content.
- 19.Custom data attributesAllowsaddition of custom attributes to anyelements using the data- pattern. [All browserssupport reading these via JavaScript’sgetAttribute() method.]<meter>Describes an amount within a range. [C5, F3.5, S4, O10]<progress>Control that shows real-time progress towardgoal. [Unsupported at publication time.]
- 20. NEW FORMELEMENTS Email field [<input type="email">]Displays a form field for email addresses. URL field [<input type="url">]Displays a form field for URLs. Telephone field [<input type="tel">]Displays a form field for telephone numbers. Search field [<input type="search">]Displays a form field for search keywords. Slider (range) [<input type="range">]Displays a slider control.Number [<input type="number">]Displays a form field for numbers, often as aspinbox.
- 21. Date fields[<input type="date">]Displays a form field for dates. Supports date,month, or week. Dates with Times [<input type="datetime">]Displays a form field for dates with times.Supports datetime, datetime-local, or time. Color [<input type="color">]Displays a field for specifying colors. Autofocus support [<input type="text" autofocus>]Support for placing the focus on a specificform element. Placeholder support [<input type="email"placeholder="me@example.com">]Support for displaying placeholder text inside of a form field. In-place editing support [<p contenteditable></p>]Support for in-place editing of content via the browser.
- 22.MULTIMEDIA You don’tneed Flash or Silverlight for video, audio,and vector graphics anymore. Embedding videos<video src=” controls>Your browser does not support the video element.</video> Multiple Files & Scripting<video controls><source src="foo.ogg" type="video/ogg"><source src="foo.mp4">Your browser does not support the video element.</video>
- 23. Embedding audio<audioid="drums" controls><source src="sounds/ogg/drums.ogg" type="audio/ogg"><source src="sounds/mp3/drums.mp3" type="audio/mpeg"><a href="sounds/mp3/drums.mp3">Download drums.mp3</a></audio> Scalable Vector Graphics<svg width="200" height="200"><rectx="0" y="0"width="100" height="100"fill="blue" stroke="red"stroke-width="5px"rx="8" ry="8"id="myRect" class="chart" /></svg>
- 24. The canvaselement lets us create vector imageswithin the HTML document using JavaScript.<canvas id="myCanvas" width="150" height="150"></canvas>var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');ctx.fillStyle = "rgb(200,0,0)";ctx.fillRect (10, 10, 55, 50);ctx.fillStyle = "rgba(0, 0, 200, 0.5)";ctx.fillRect (30, 30, 55, 50); Canvas can be used to create simple or complexshapes or even create graphs and charts withoutresorting to server-side libraries, Flash, or otherplugins.
- 25.INTEGRATED APIs Videoand audio APIThis provides multimedia plug-in within the browser. Inline editing APIEditing of contents in a web documents directly through theweb browser. Offline Application API• Allows Applications to run without internetconnection.• Content renewed when connection restored.• Can store 5MB of data.• Application cache stores the offline details.• Options in HTML5 to store data.i. Web SQL Database or IndexedDB.ii. Web storage (localStorage, sessionStorage)
- 26. History APIEnablesApplications to access to the browserhistory. Web Protocol APIAllows Applications to register themselves to the handlers of urlscheme.Eg: Mail Applications could register themselves to handle mailprotocols. File upload applications to FTP and so on. Drag & Drop APIAllows Application to enable, control andrespond to the dragging and dropping of pageelements.
- 27.ASSOSCIATED APIs GeolocationAPIGeolocation determines a person’s whereaboutsby looking at their computer’s IP address, MACaddress, Wi-Fi hotspot location, or even GPScoordinates if available.navigator.geolocation.getCurrentPosition(function(position) {var lat = position.coords.latitude;var lon = position.coords.longitude;showLocation(lat, lon);});
- 28. 2D CanvasDrawing API Local Storage API Web Workers APIAllows you to do things like fire up long-running scripts to handlecomputationally intensive tasks, but without blocking the UI or otherscripts to handle user interactions. Web Socket APICreates a stateful connection between a browser and a server. Messaging APISends messages between windows with content loaded ondifferent domains.
- 30.What is CSS3?Cascading Style Sheets (CSS) is a style sheetlanguage used to describe the presentation semantics(the look and formatting) of a document written inmarkup. Visual enhancement likerounded cornersgradientsshadows.••• Your design can be as simple as a text transformationto something as rich as full-blown animations with 3Dtransformations.
- 31.EXPLORING PRIOR VERSIONSCSS1•••CSS LEVEL 1.Published in December 1996.Support for,Font properties such as typeface and emphasisColor of text, backgrounds, and other elementsText attributes such as spacing between words, letters, andlines of textAlignment of text, images, tables and other elementsMargin, border, padding, and positioning for most elements
- 32. CSS2CSS level2 specification was developed by the W3Cand published as a Recommendation in May 1998.••••Absolute, relative, and fixed positioning ofelementsNew font properties such as shadows.The W3C no longer maintains the CSS2 recommendation. CSS2.1••••First Become a Candidate recommendation on 2004,Later reverted to Working draft on 2005Returned to Candidate recommendation in 2007 andupdated twice in 2009Fixes errors in CSS2, removes poorly-supported ornot fully interoperable features and adds alreadyimplemented browser extensions to the specification.finally published as a W3C Recommendation on 2011
- 34.CSS3 Features Selectors: For selecting specific elements fromdocuments for formating.•General Sibling Selector : This selector matchesand targets all the siblings of a given element. Itis not necessary however that the elements beadjacent siblings.Example:h1 ~ pre represents a pre element following an h1.Children Selector : This Selector shows the relationship between twoelements and targets those elements which are children of a particularelement.•Example:body > pThis selector represents a p element that is child of body:
- 35.•Attribute Selector :Unlike CSS 2.1 where one has tomake match on a complete string of an attribute, CSSoffers the flexibility to make matches anywhere withinan attribute, be it beginning or end.Example:i.[attr^=val] –- matches a Document object model element (DOM) withthe attribute attr and a value starting with valii.[attr$=val] –- matches a DOM element with the attribute attrand a value ending with the suffix valiii.[attr*=val] –- matches a DOM element with the attribute attr anda value containing the substring val
- 36. Border Radius:Used to create round corner forboxes without hard code.Example:#ex3 {border-top-left-radius: 1em;}#ex3 {border-top-right-radius: 1em;}#ex3 {border-bottom-right-radius: 1em;}#ex3 {border-bottom-left-radius: 1em;}
- 37. Border Image:It allows using an image as a borderfor an element. One can set values for Border Imageand border-corner-image.Example:.border-image-example {-webkit-border-image: url(border-image.jpg) 45 20 45 30repeat;-moz-border-image: url(border-image.jpg) 45 20 45 30repeat;border-image: url(border-image.jpg) 45 20 45 30 repeat;}.border-image-example {border-image: url(bg-border.jpg) 45 20 45 20 repeat;}.border-image-example {border-image: url(bg-border.jpg) 45 20 repeat;
- 38. Multiple Background:This has been made possible and one mayuse multiple background images for one element.Example:#banner{background: url(body-top.gif) top left no-repeat,url(banner_fresco.jpg) top 11px no-repeat,url(body-bottom.gif) bottom left no-repeat,url(body-middle.gif) left repeat-y;} Colors and Opacity:CSS 3 comes with an ability to addtransparency to an element and its color schemes have beenenhanced to add this factor as well.Example:This paragraph has opacity 1.0.background-color:#30f;color:#fff;width:100%;opacity:1.0;Opacity 0.8.
- 39. Multi Columnlayout:This property allows creating the desirednumber of columns by making the required specifications regardingcolumn width, separator, column gap width, etc.Example:Column width:-moz-column-width: 13em;-webkit-column-width: 13em;-moz-column-gap: 1em;-webkit-column-gap: 1em;Column count:-moz-column-count: 3;-moz-column-gap: 1em;-moz-column-rule: 1px solid black;-webkit-column-count: 3;-webkit-column-gap: 1em;-webkit-column-rule: 1px solid black;
- 40. BOX Shadow:Priorto CSS 3, JavaScript was used for creating shadow to animage but now with BOX Shadow feature, one can add shadowto any element on the website.•Example:#example1{box-shadow:10px 10px 5px #888;}However it is currently supported by Firefox 3.1+, Safari andChrome only.•