HTML 5 - First Look A Part of eTeam Knowledge Base By: Shehzad Ali 22-Sep-11.

Slides:



Advertisements
Similar presentations
Introduction to HTML5. History of HTML HTML first published HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 XHTML 2.0 HTML
Advertisements

What is HTML5…?. ”…removes the need for plugins” ”…can handle multimedia directly” ”…enables rich, interactive clients” ”…enables advanced visual designs”
Hypermedia systems Jakub Husár & Tomáš Jurík. Content XHTML 2.0 Definition Short history Differences between 1.0 and 2.0 Usage suitability Improvements.
HTML5, OVERVIEW AND NEW FEATURES PowerPoint by Mason O’Mara.
 Fundamentals of Web Design.  Describe the history and theory of XHTML  Understand the rules for creating valid XHTML documents  Apply a DTD to an.
 A markup language  Structures content on the internet  Commonly used by web browsers.
HTML 5. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in The web has changed.
Tim Berners-Lee authors HTML in 1991, assisted by his colleagues at CERN,
Basics of HTML What is HTML?  HTML or Hyper Text Markup Language is the standard markup language used to create Web pages.  HTML is.
HTML 5 Tutorial Chapter 1 Introduction. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML.
HTML 5 The next generation of web programming. WHERE IT ALL BEGAN.
HTML Advanced: HTML 5. Welcome This slideshow presentation is designed to introduce you to HTML 5. It is the third of three HTML workshops available at.
Bartosz Kowalski Software Developer CERN. Presentation outline -HTML : introduction and history -HTML5 : -History and philosophy -New features -Structure.
Lecture 18. HTML5 and JavaScript Instructor: Jie Yang Department of Computer Science University of Massachusetts Lowell Exploring the Internet,
4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.
Chapter 14 Introduction to HTML
CS 415 N-Tier Application Development By Umair Ashraf July 16,2013 National University of Computer and Emerging Sciences Lecture # 12 HTML/ XHTML/ HTML5.
CNIT 133 Interactive Web Pags – JavaScript and AJAX Review HTML5.
HTML5 Rob Larsen htmlcssjavascript.com htmlcssjavascript.com /downloads/html5.ppt.
Mark Branom, Continuing Studies.  HTML5 overview – what’s new?  New HTML5 elements  New HTML5 features  Guided Demonstrations  Forms  Video  Geolocation.
Referent · von xx Seiten HTML5. Overview 1.HTML & HTML5 Basics Facts 2.Flash vs. HTML5 3.HTML5 - the new features Sebastian Viereck·
HTML5. What is HTML5? HTML5 will be the new standard for HTML. HTML5 is the next generation of HTML. HTML5 is still a work in progress. However, the major.
Week 09, Session 01 Other HTML Tags & HTML5 IF Website Development Presented by: RDT.
CPSC 594B: Software Engineering Project Lecture 1: Introduction to HTML5 Lecturer: Ayman Issa Office: ICT 555.
Creating Web Pages with HTML
HTML 5 New Standardization of HTML. I NTRODUCTION HTML5 is The New HTML Standard, New Elements New Attributes Full CSS3 Support Video and Audio 2D/3D.
Principles of Web Design 6 th Edition Chapter 1 – HTML5.
1 Networks and the Internet A network is a structure linking computers together for the purpose of sharing resources such as printers and files Users typically.
PRO HTML5 PROGRAMMING POWERFUL APIS FOR RICHER INTERNET APPLICATION DEVELOPMENT.
HTML 5.0 By: Grant Henke Nov To Be Covered What is HTML? A Brief History of HTML HTML 5.0 – Page Structure – Other New Elements – Changed Elements.
Lesson 4: Using HTML5 Markup.  The distinguishing characteristics of HTML5 syntax  The new HTML5 sectioning elements  Adding support for HTML5 elements.
2440: 211 Interactive Web Programming Introduction to the Internet & the World Wide Web.
CS117 Introduction to Computer Science II Lecture 1 Introduction to WWW and HTML Instructor: Li Ma Office: NBC 126 Phone: (713)
Introduction to HTML5. History of HTML HTML first published – Tim Berners-Lee HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 XHTML 2.0.
CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7.
HTML Advanced: HTML 5. Introduction to HTML 5 These slides are based on source material found at the w3schools.com website.
HTML, XHTML, and CSS Sixth Edition Chapter 1 Introduction to HTML, XHTML, and CSS.
Presented By: Mahmoud Ghoz Internet Explorer 9 and HTML5 for Developers.
XP Tutorial 9 1 Working with XHTML. XP SGML 2 Standard Generalized Markup Language (SGML) A standard for specifying markup languages. Large, complex standard.
HTML | DOM. Objectives  HTML – Hypertext Markup Language  Sematic markup  Common tags/elements  Document Object Model (DOM)  Work on page | HTML.
Session: 1. © Aptech Ltd. 2Introduction to the Web / Session 1  Explain the evolution of HTML  Explain the page structure used by HTML  List the drawbacks.
UPLOAD / DOWNLOAD april  HTML5 is just the next iteration of HTML  Previous version was technically HTML 4.01, which incorporated XHTML 1.0.
Web Technologies Lecture 2 HTML and CSS. HTML Hyper Text Markup Language – Describes web documents – Made up of nested HTML markup tags – Tags are the.
4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.
HTML 5 The Future of Web Development. What is HTML5? “HTML5 is a specification of how the web’s core language, HTML, should be formatted and utilized.
Chapter 1 Introduction to HTML, XHTML, and CSS HTML5 & CSS 7 th Edition.
Let’s look what flash can do: OK, that wasn’t flash! That was HTML5.
Web Design Principles 5 th Edition Chapter 3 Writing HTML for the Modern Web.
HTML 5 (Part 1) – Start from SCRATCH. HTML 5 – Start from SCRATCH.
Agenda * What is HTML5 -- Its history and motivation * HTML/XHTML as Human / Machine Readable Format * HTML and its related technologies * Brief summary.
The HTML5 logo was introduced by W3C in 2010
HTML CS 4640 Programming Languages for Web Applications
HTML 5.
Gaurav Jaiswal Singsys Pte. Ltd.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
HTML5 – The Saga Continues
Introduction to HTML5.
PPT By:Gaurav Jaiswal Singsys Pte. Ltd.
HTML 5 Tutorial Chapter 1 Introduction.
Introduction to XHTML.
전산정보학부 권춘우 HTML 기원과 변천.
Introduction to HTML5.
HTML 5 Training HTML 5 SYMANTICS [Notes to trainer:
Ground to Roof HTML/HTML5
Introduction to HTML5.
CIS 133 mashup Javascript, jQuery and XML
Creating a Basic Web Page using HTML
Introduction to HTML5.
HTML CS 4640 Programming Languages for Web Applications
Presentation transcript:

HTML 5 - First Look A Part of eTeam Knowledge Base By: Shehzad Ali 22-Sep-11

Markup Language a modern system for annotating a text in a way that is syntactically distinguishable from that text terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors omitted from the version of the text which is displayed for end-user Presentational Markup (HTML) Procedural Markup (Processing) Descriptive Markup (meta tags, xml)

Markup Language a modern system for annotating a text in a way that is syntactically distinguishable from that text terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors omitted from the version of the text which is displayed for end-user Presentational Markup (HTML) Procedural Markup (Processing) Descriptive Markup (meta tags, xml)

Markup Language a modern system for annotating a text in a way that is syntactically distinguishable from that text terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors omitted from the version of the text which is displayed for end-user Presentational Markup (HTML) Procedural Markup (Processing) Descriptive Markup (meta tags, xml)

Markup Language a modern system for annotating a text in a way that is syntactically distinguishable from that text terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors omitted from the version of the text which is displayed for end-user Presentational Markup (HTML) Procedural Markup (Processing) Descriptive Markup (meta tags, xml)

Markup Language a modern system for annotating a text in a way that is syntactically distinguishable from that text terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors omitted from the version of the text which is displayed for end-user Presentational Markup (HTML) Procedural Markup (Processing) Descriptive Markup (meta tags, xml)

Markup Language a modern system for annotating a text in a way that is syntactically distinguishable from that text terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors omitted from the version of the text which is displayed for end-user Presentational Markup (HTML) Procedural Markup (Processing) Descriptive Markup (meta tags, xml)

Markup Language a modern system for annotating a text in a way that is syntactically distinguishable from that text terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors omitted from the version of the text which is displayed for end-user Presentational Markup (HTML) Procedural Markup (Processing) Descriptive Markup (meta tags, xml)

SGML SGML is a language which defines Markup languages, its a very flexible markup language framework SGML was developed by Goldfarb in 1974 Goldfarb hit upon the basic idea while working on a primitive document management system intended for law firms in 1969 HTML is an application of SGML

HTML - Timeline 1991, Sir Tim Berners-Lee, used SGML syntax to create HTML First specification defined 20 elements 1995, IETF (Internet Engineering Task Force) completed "HTML 2.0", the first HTML specification intended to be treated as a standard against which future implementations should be based Since 1996, the HTML specifications have been maintained, with input from commercial software vendors, by the World Wide Web Consortium (W3C). January 1997, HTML 3.2 was published as a W3C Recommendation. It was the first version developed and standardized exclusively by the W3C, as the IETF had closed its HTML Working Group in September 1996 The last HTML specification published by the W3C is the HTML 4.01 Recommendation, published in late 1999

XHTML Belongs to XML family, extends versions of HTML 2000, After HTML4 W3C started to develop XHTML as a standard for future development XHTML is an application of XML,a more restrictive subset of SGML (end tag, case, quoted attributes) therefore, XHTML documents need to be well- formed,

WHATWG – A New Player Web Hypertext Application Technology Working Group is a community of people interested in evolving HTML and related technologies The WHATWG was founded by individuals from Apple, the Mozilla Foundation and Opera Software in 2004 under the name web applications 1.0 WHATWG was formed in response to the slow development of web standards monitored by the World Wide Web Consortium (W3C), and its decision to abandon HTML in favor of XML-based technologies Web Hypertext Application Technology Working Group (WHATWG) began work on the new standard in 2004, when the World Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0, and HTML 4.01 had not been updated since 2000 New developments of WHATWG termed as HTML5 (next version of HTML4) among developers community The HTML5 specification was adopted as the starting point of the work of the new HTML working group of the World Wide Web Consortium (W3C) in 2007, and issued its first public draft in , the W3C allowed the XHTML 2.0 Working Group's charter to expire, and decided not to renew it W3C and WHATWG are currently working together on the development of HTML5

General Rules for New Development New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to the public

HTML 5 Ian Hickson of Google is the editor of HTML5 Even though HTML5 has been well known among web developers for years, it became the topic of mainstream media in April 2010 after Apple Inc's then-CEO Steve Jobs issued a public letter titled "Thoughts on Flash“ It was estimated that HTML5 would reach W3C Recommendation by late 2010, but as of September 2011 is still under development Ian Hickson, editor of the HTML5 specification, expects the specification to reach the Candidate Recommendation stage during 2012 W3C is developing a comprehensive test suite to achieve broad interoperability for the full specification by 2014, which is now the target date for Recommendation The criterion for the specification becoming a W3C Recommendation is fully complete and fully interoperable implementations HTML5 is still a draft

HTML 5 Ian Hickson of Google is the editor of HTML5 Even though HTML5 has been well known among web developers for years, it became the topic of mainstream media in April 2010 after Apple Inc's then-CEO Steve Jobs issued a public letter titled "Thoughts on Flash“ it was estimated that HTML5 would reach W3C Recommendation by late 2010, but as of September 2011 is still under development Ian Hickson, editor of the HTML5 specification, expects the specification to reach the Candidate Recommendation stage during 2012 W3C is developing a comprehensive test suite to achieve broad interoperability for the full specification by 2014, which is now the target date for Recommendation The criterion for the specification becoming a W3C Recommendation is fully complete and fully interoperable implementations HTML5 is a draft still

HTML5 = Markup + CSS + JavaScript API

How it looks like HTML 4 HTML Hello World HTML 5 HTML Hello World

New Tags article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr

Removed Tags acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt

What else is new… There is also a renewed emphasis on the importance of DOM scripting (e.g., JavaScript) in Web behavior – DOM scripting refers to programmatically accessing the Document Object Model (DOM) – DOM is the way of representing and interacting objects in HTML, ie Elements(tags) A common misconception is that HTML5 can provide animation within web pages, which is untrue. Either JavaScript or CSS3 is necessary for animating HTML elements. Animation is also possible using JavaScript and HTML 4 On 18 January 2011, the W3C introduced a logo to represent the use of or interest in HTML5,, it does not imply validity or conformance to a certain standard There are some related technologies, which are not part of either the W3C HTML5 or the WHATWG HTML specification. The W3C publishes specifications for these separately. Few examples of such technologies are: Geolocation, Web SQL Database, Indexed Database API, Web Storage, File API, Directories and System, File Writer

Let’s have a look at Video Audio Canvas Local Storage Session Storage Field URL Field Place Holder Attribute Pattern Attribute Required Attribute Number Field Range Field Date Field DateTime Field Search Field

….Let’s have a look at Color Field Data List Field Keygen ( When the form is submitted, the private key is stored locally, and the public key is sent to the server ) Pattern Attribute Output Field Drag Drop (Firefox) Geolocation (location, google-map) Editable Contents File Reader Draw on Canvas

Microdata -Microdata vocabularies provide the semantics, or meaning of an Item -Microdata helps technologies such as search engines and web crawlers better understand what information is contained in a web page, providing better search results -Web developers can design a custom vocabulary or use vocabularies available on the web

…Microdata (without microdata) Hello, my name is John Doe, I am a graduate research assistant at the University of Dreams. My friends call me Johnny. You can visit my homepage at I live at 1234 Peach Drive Warner Robins, Georgia.

…Microdata Hello, my name is John Doe, I am a graduate research assistant at the University of Dreams. My friends call me Johnny. You can visit my homepage at I live at 1234 Peach Drive Warner Robins Georgia. Item Type: name = John Doe title = graduate research assistant affiliation = University of Dreams nickname = Johnny url = address = Item(1) Item 1 Type: street-address = 1234 Peach Drive locality = Warner Robins region = Georgia

New Layout Elements NowNext

Current Problems Heavy processor and memory utilization Standardization

Our Preparation Team Discussion

Next Topics CSS 3 New Java Script API New Offline Databases in HTML 5

References Wikipedia W3Schools w3.org Google Html5test.com