HTML5 Technology Research created by Katrina Washington on May 23,2010.

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
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.
Using Multimedia on the Web Enhancing a Web Site with Sound, Video, and Applets.
Neal Stublen Content Models  Metadata content Data not necessarily presented on the page ○ title, link, meta, style  Flow content.
HTML: HyperText Markup Language Hello World Welcome to the world!
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Chapter 8 Creating Style Sheets.
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.
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.
Web Development Using ASP.NET CA – 240 Kashif Jalal Welcome to week – 3-1 of…
Tutorial 1 Developing a Basic Web Page
Lecture 18. HTML5 and JavaScript Instructor: Jie Yang Department of Computer Science University of Massachusetts Lowell Exploring the Internet,
Developing a Basic Web Page with HTML
4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.
Chapter 14 Introduction to HTML
CNIT 133 Interactive Web Pags – JavaScript and AJAX Review HTML5.
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.
CPSC 594B: Software Engineering Project Lecture 1: Introduction to HTML5 Lecturer: Ayman Issa Office: ICT 555.
Creating a Simple Page: HTML Overview
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.
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.
Building the User Interface by Using HTML5: Organization, Input, and Validation Lesson 3.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
Online Chapter 1 4 th Edition.  Review elements  Whitespace handling  Rule structure  Linking to an external style sheet  Alternate Style Sheets.
Lesson 4: Using HTML5 Markup.  The distinguishing characteristics of HTML5 syntax  The new HTML5 sectioning elements  Adding support for HTML5 elements.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
XHTML1 Building Document Structure Chapter 2. XHTML2 Objectives In this chapter, you will: Learn how to create Extensible Hypertext Markup Language (XHTML)
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
The New Elements © Main Menu Structure Media Canvas Form Click on one of the categories below to view information about the new HTML5 elements in.
HTML | DOM. Objectives  HTML – Hypertext Markup Language  Sematic markup  Common tags/elements  Document Object Model (DOM)  Work on page | HTML.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Introduction to HTML Tutorial 1 eXtensible Markup Language (XML)
HTML | DOM. Objectives  HTML – Hypertext Markup Language  Sematic markup  Common tags/elements  Document Object Model (DOM)  Work on page | HTML.
Copyright 2007, Information Builders. Slide 1 Understanding Basic HTML Amanda Regan Technical Director June, 2008.
>> HTML: Structure Elements. Elements in HTML are either Inline or Block. Block-level Elements – Begins on a new line – Occupy the whole width – Stacks.
Introduction HTML (Hypertext Markup Language) is used to create document on the World Wide Web. HTML is not a programming language, it is a markup language.
audio video object Options: controls autoplay Need to define height and width Options: controls autoplay.
UPLOAD / DOWNLOAD april  HTML5 is just the next iteration of HTML  Previous version was technically HTML 4.01, which incorporated XHTML 1.0.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Semantics vs. Style Importance of Standards Why we follow the rules.
4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.
Objective: To describe the evolution of the Internet and the Web. Explain the need for web standards. Describe universal design. Identify benefits of accessible.
XP Review 1 New Perspectives on JavaScript, Comprehensive1 Introducing HTML and XHTML Creating Web Pages with HTML.
CHAPTER TWO HTML TAGS. 1.Basic HTML Tags 1.1 HTML: Hypertext Markup Language  HTML stands for Hypertext Markup Language.  It is the markup language.
HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags –Headings –Paragraphs –Links –Tables –Forms –Images.
Session: 8. © Aptech Ltd. 2Creating Navigational Aids and Division-Based Layout / Session 8  Explain HTML5 semantic tags  Explain HTML5 semantic tag.
HTML5 SEMANTICS TO OR NOT TO THAT IS THE QUESTION BY WILLIAM MURRAY.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
2.4. Choose and configure HTML5 tags to organize content and forms Choose and configure HTML5 tags for input and validation. Building the User Interface.
Introduction of Presented by Neetu sharma MCA (8 th trim)
Web Design Principles 5 th Edition Chapter 3 Writing HTML for the Modern Web.
Agenda * What is HTML5 -- Its history and motivation * HTML/XHTML as Human / Machine Readable Format * HTML and its related technologies * Brief summary.
Chapter 17 The Need for HTML 5.
HTML CS 4640 Programming Languages for Web Applications
HTML 5.
Module: Software Engineering of Web Applications
HTML 5 Tutorial Chapter 1 Introduction.
Web Development & Design Foundations with HTML5 8th Edition
Web Development & Design Foundations with H T M L 5
HTML 5 Training HTML 5 SYMANTICS [Notes to trainer:
Web Development Using ASP .NET
HTML 5 SEMANTIC ELEMENTS.
Creating a Basic Web Page using HTML
Web Client Side Technologies Raneem Qaddoura
HTML5 Tags By Dr Derek Peacock
HTML CS 4640 Programming Languages for Web Applications
Presentation transcript:

HTML5 Technology Research created by Katrina Washington on May 23,2010

 In a joint effort between the W3C HTML WG and the WHATWG ( The Web Hypertext Application Technology Working Group) work on HTML5 commenced in WHATWG is a community of people interested in evolving HTML and was founded by individuals from Apple, the Mozilla Foundation and Opera Software.  HTML5 introduces and enhances a wide range of features including form controls, multimedia, API’s, structure and semantics to give authors more flexibility and interoperability. This will enable more interactive websites and applications. Technology Research created by Katrina Washington on May 23,2010

 This new version of HTML often called HTML5 or Web Applications 1.0 closely resembles the current version. There are no namespaces, elements don’t have to be closed, browsers are forgiving of errors, a table is still a table and a p is still a p.  HTML5 has been explicitly designed to degrade gracefully in browsers that don’t support it due to the wide variety of browsers and versions being used today. It offers real benefits to page authors while promising even more to page readers as browsers are slowly upgraded. Technology Research created by Katrina Washington on May 23,2010

Structure HTML5 adds new elements to specifically identify each of the common constructs:  Section - anything that has its own heading such as a part or chapter in a book or a section in a chapter.  Header - not the same as the “ head ” element but the page header shown on the page  Footer - the page footer where the fine print goes; ( the signature in a message)  Nav - a collection of links to other pages  Article - an independent entry in a blog, magazine, compendium, and so forth Divs are no longer needed. The meaning of different sections can be inferred from standard names. This is especially important for audio, cell phone, and other non-standard browsers. Technology Research created by Katrina Washington on May 23,2010

Block Semantic Elements Along with the structural elements HTML5 adds some purely semantic block-level elements.  Aside - represents a note, tip, sidebar, pullquote, a parenthetical remark or something that is just outside the main flow of the narrative.  Figure - represents a block-level image, along with a caption, but is not limited to pictures. The figure element may be used to caption audio, video, iframe, object, and “embed” elements.  Dialog - represents a conversation between several people Technology Research created by Katrina Washington on May 23,2010

 Inline Semantic Elements HTML4 currently has five different inline elements to represent subtle different variations of code: var, code, kbd, tt and samp. However, it doesn’t have any way to indicate such basic qualities as time or numbers. HTML5 aims to rectify this with several new inline elements.  Mark or m element- represents text that is “marked” somehow but not necessarily emphasized. An example would be highlighted text in a book.  Time - represents a specific moment in history. The time element helps browsers and others recognize times in HTML pages.  Meter - represents a numeric value in a specified range. Each meter element can have up to six attributes offering information about the amount in a more machine-recognizable form:  Value  Min  Low  High  Max  Optimum Each should contain a decimal indicating the relevant range. Technology Research created by Katrina Washington on May 23,2010

 Progress- represents the state of an ongoing process. Ex.(this progress control says that a download is 33% complete) Downloaded: 33%  Value- represents the current state of the operation  Max- represents the total amount toward which the progress is moving In the example above the element indicates that 1,534,602 bytes out of a total 4,603,807 bytes have been downloaded. You can display indefinite progress bars by omitting the “max” attribute. Technology Research created by Katrina Washington on May 23,2010

Embedded media Video on the web is booming, but it’s almost all proprietary. Markup that works for embedding video content in one browser doesn’t work in the next browser. A new “ video” element has been proposed which allows the embedding of arbitrary video formats. A complementary “ audio ” element is also proposed. <audio src=“spacemusic.mp3” Autoplay=“autoplay” loop=“20000” />  Ex. (you might attach background music to a web page like this) The “ autoplay ” attribute tells the browser to begin playing as soon as the page is loaded without waiting for an explicit user request. It will loop 20,000 times before shutting off. (Or until the user either goes to another page or closes the window.) These elements aren’t supported by legacy browsers and can be inaccessible to blind and deaf users. The audio and video elements may contain additional markup describing the content of the audio and video. Technology Research created by Katrina Washington on May 23,2010

Interactivity HTML5 introduces several new elements focused on more interactive experiences for web pages.  Details - represents further information that may not be shown by default. “ Details ” element can have an “ open ” attribute. When this occurs the details will be initially shown to the reader.  Datagrid - serves the role of a grid control. It is intended for use with trees, lists, and tables that can be updated by both users and scripts. A datagrid gets its initial data from its contents: a table, select, or other group of HTML elements.  Menu and command - the menu element has actually been present since version 2. It was deprecated in HTML4 but is being brought back in HTML5. A “menu” containing “command” elements, each of which causes an immediate action. Commands can be turned in to check boxes with a checked=”checked ” attribute. You can also turn checkboxes into radiobuttons using the “ radiogroup ” attribute.  Label - gives a title for the menu Technology Research created by Katrina Washington on May 23,2010

HTML 5 is part of the future of the web. HTML 5 will improve interoperability and reduce development costs by making precise rules on how to handle HTML elements. The web is constantly evolving with new and innovative websites being created every day. The boundaries of HTML are being pushed in every direction. HTML5 is still in development which will likely continue for several years, but it’s great to know what’s on the horizon. Technology Research created by Katrina Washington on May 23,2010

Sources Wikipedia- New Elements in HTML Alist Apart: Articles: A Preview of HTML5- html5 html5 Resources Wikipedia- WHATWG (The Web Hypertext Application Technology Working Group) - W3C- W3schools.com- Technology Research created by Katrina Washington on May 23,2010