html 5 ppt
TRANSCRIPT
Introduction of
Group Members:- Meeru Gupta Gurpreet Kaur Jyoti Batra Jaskiran Kaur
ContentsO What is HTML?O What is HTML5?O How did HTML5 get started?O History of HTML5O What’s new in HTML5?O Advantages of HTML5 O Difference of HTML5 with HTML4 O Web sites that using HTML5O Browser SupportO HTML5 TagsO References
What is HTML?O A Web Page is created using a
languag+e called, Hypertext Markup Language, better known as HTML Code.
O HTML is used to define the structure and layout of a Web page.
O HTML is not a programming language, it is a markup language
O File Extension :- .html or .htm
What is
O HTML 5 is the next version of Hyper Text Markup Language(HTML4)
O It is developing by World Wide Web consortium W3C and WHATWG.
O HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.
O The previous version of HTML came in 1999. The web has changed a lot since then.
HTML5 Logo
How Did HTML5 Get Started?
O HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
O WHATWG was working with web forms and applications, and
O W3C was working with XHTML 2.0.
O In 2006, they decided to cooperate and create a new version of HTML.
History of
O 1992 HTML is first defined O 1993 HTML+ (some physical layout, fill-out forms, tables, math) O 1994 HTML2.0 and HTML 3.0 O 1996 HTML 3.2O 1997 HTML 4.0 (separates structure and presentation with
stylesheets) O 1999 HTML 4.01 (slight modifications only) O 2000 XHTML 1.0 (XML version of HTML 4.01) O 2001 XHTML 1.1O 2002 XHTML 2.0 O 2003 HTML 5 (to extend HTML 4's forms to provide many of
the features the XForms 1.0 introduced)
What’s New in
O New Doctype and CharsetO New StructureO New Inline ElementsO New Dynamic Pages SupportO New Form TypesO New ElementsO Removes Some Elements
New Doctype and Charset
O You can use the HTML 5 doctype, which is very simple and streamlined:
<!doctype html>
O The character set for HTML 5 is streamlined as well. It uses UTF-8 and you define it with just one meta tag:
<meta charset="UTF-8">
New Structure
In general, Web pages have navigation, body content, and sidebar content plus headers, footers, and other features. The tags for this are:-
O<section> O<header> O<footer> O<nav> O<article> O<aside>O<figure>
New Inline elements and Dynamic support
New Inline ElementsO<mark>O<time> O<meter> O<progress>
New Dynamic Pages SupportOContext menus Oasync attribute O<details> O<datagrid> O<menu> O<command>
New Form types and Other elements
New Form Types New Elements
O HTML 5 supports all the standard form input types, but it adds a few more:
O datetime O datetime-local O date O month O week O time O number O range O email O url
O <canvas> - an element to give you a drawing space in JavaScript on your Web pages.
O <video> - add video
O <audio> - add sound to your Web pages
Removes Some Elements
There are also some elements in HTML 4 that will no longer be supported by HTML 5.Oacronym Oapplet Obasefont Obig Ocenter Odir Ofont
O frame O frameset O isindex O noframes O noscript O s O strike O tt O u
To Quote or not to Quote
O HTML5 is not XHTML. You don’t have to wrap your attributes in quotation marks if you don’t want to you.
<img src = “DSC00624.jpg” alt = “About image” />
OR
<img src = DSC00624.jpg alt = About image />
O Make up your own mind on this one. If you prefer a more structured document, by all means, stick with the quotes.
Make your Content Editable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head>
<body> <h2> To-Do List </h2> <ul contenteditable="true">
<li> Gurpreet Kaur(155) </li> <li> Meeru Gupta <li> Jyoti Batra </li> <li> Jaskiran Kaur </li> </ul> </body> </html>
Email Inputs <!DOCTYPE html> <html lang="en"> <body> <form action="" method="get"> <labelfor="email">Email:</label> <input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button> </form> </body> </html>
Video Format HTML tags input
<!DOCTYPE HTML><html><body><video src="movie.ogg" width="320" height="240" controls="controls">Your browser does not support the video tag.</video> </body> </html>
Audio tag- input
<!DOCTYPE HTML><html><body>
<audio src="song.ogg" controls="controls">Your browser does not support the audio element.</audio>
</body></html>
New Tags in HTML5Tag Description<article>New Defines an article
<aside>New Defines content aside from the page content
<audio>New Defines sound content
<canvas>New Defines graphics
<command>New Defines command button
<datalist>New Defines a dropdown list
<details>New Defines details of an element
<dialog>New Defines a dialog (conversation)
<embed>New Defines external interactive content or plugin
<figure>New Defines a group of media content, and their caption
<footer>New Defines a footer for a section or page
<header>New Defines a header for a section or page
<hgroup>New Defines information about a section in a document
<keygen>New Defines a generated key in a form<mark>New Defines marked text
<meter>New Defines measurement within a predefined range
<nav>New Defines navigation links
<output>New Defines some types of output
<progress>New Defines progress of a task of any kind
<rp>New Used in ruby annotations to define what to show browsers that to not support the ruby element.
<rt>New Defines explanation to ruby annotations.<ruby>New Defines ruby annotations.
<section>New Defines a section
<source>New Defines media resources
<time>New Defines a date/time
<video>New Defines a video
O MutualityO Cleaner markup / Improved CodeO Improved SemanticsO Elegant formsO ConsistencyO Improved AccessibilityO Fulfill the need of Web applicationO Offline Application cacheO Client-side databaseO Geolocation support
Difference between HTML4 and HTML5
HTML4 HTML5Elements like nav, header were not present.
It brought new element for web structure like nav, header etc
Lack of rules of parsing, so it is difficult to handle error.
Strictly parsing rules introduced in html5 to handle the error.
No multimedia supported without third party
Inbuilt multimedia element in html5 like Audio,video,convas
It was not available It contains attributes like control menu, spell check etc.
Web sites that using HTML5
O YouTube uses HTML5
O Google wave, a collaboration tool from Google uses several html5 tags.
O Only some of the browser only supports HTML5 features currently.
Browser SupportO HTML5 is not yet an official standard, and no browsers have full HTML5
support.
O But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.
O Currently only Apples Safari is fully HTML 5 ready.
O Mozilla Firefox 3.5 “supports” the new coding but is not 100% compatible
References
O http://en.wikipedia.org/wiki/HTMLO http://www.w3.orgO http://www.whatwg.orgO http://www.w3schools.com
