HTML 5.

Slides:



Advertisements
Similar presentations
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?
Advertisements

 Fundamentals of Web Design.  Describe the history and theory of XHTML  Understand the rules for creating valid XHTML documents  Apply a DTD to an.
More CSS - Page layout + HTML5 new features Boriana Koleva Room: C54
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
History Leading to XHTML
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,
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 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,
CS 415 N-Tier Application Development By Umair Ashraf July 16,2013 National University of Computer and Emerging Sciences Lecture # 12 HTML/ XHTML/ HTML5.
Chapter 10 Form Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
HTML 5 Tutorial Chapter 9 Form Attributes. New Form Attributes HTML5 has several new elements and attributes for forms. New form attributes : autocomplete.
Mark Branom, Continuing Studies.  HTML5 overview – what’s new?  New HTML5 elements  New HTML5 features  Guided Demonstrations  Forms  Video  Geolocation.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
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.
Chapter 1 XHTML: Part I The Web Warrior Guide to Web Design Technologies.
HTML Advanced: HTML 5. Introduction to HTML 5 These slides are based on source material found at the w3schools.com website.
XP Tutorial 9 1 Working with XHTML. XP SGML 2 Standard Generalized Markup Language (SGML) A standard for specifying markup languages. Large, complex standard.
Introduction to HTML. What is HTML?  Hyper Text Markup Language  Not a programming language but a markup language  Used for presentation and layout.
HTML Forms.
Week 9 - Form Basics Key Concepts 1. 1.Describe common uses of forms on web pages 2.Create forms on web pages using the form, input, textarea, and select.
COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2.
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 HTML5: TEXT BOX Accepts text information in address format Common Attributes: ◦ type=“ ” ◦ name ◦ id ◦
COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2.
Web Technologies Lecture 3 Web forms. HTML5 forms A component of a webpage that has form controls – Text fields – Buttons – Checkboxes – Range controls.
XP Review 1 New Perspectives on JavaScript, Comprehensive1 Introducing HTML and XHTML Creating Web Pages with HTML.
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.
XHTML. What Is XHTML? XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to HTML XHTML is stricter than HTML XHTML is HTML.
HTML Structure & syntax
HTML Structure & syntax
Chapter 9 HTML 5 Video and Audio
HTML Advanced: HTML 5 With Adaptations by Dilvan Moreira.
Advanced HTML Tags:.
HTML CS 4640 Programming Languages for Web Applications
>> Introduction to HTML: Forms
CIS 228 The Internet 9/20/11 XHTML 1.0.
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
Introduction to HTML5.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
HTML Advanced: HTML 5.
PPT By:Gaurav Jaiswal Singsys Pte. Ltd.
XHTML Basics.
HTML 5 Tutorial Chapter 1 Introduction.
Web Development & Design Foundations with HTML5 8th Edition
Chapter 3 Introduction to HTML5: Part 2
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Introduction to HTML5.
XHTML Basics.
XHTML Basics.
New Form Input Types.
HTML Forms Internet Technology.
HTML Forms Internet Technology.
HTML 5 Training HTML 5 SYMANTICS [Notes to trainer:
Ground to Roof HTML/HTML5
XHTML Basics.
Introduction to HTML5.
CIS 133 mashup Javascript, jQuery and XML
XHTML Basics.
Creating a Basic Web Page using HTML
HTML5 - 2 Forms, Frames, Graphics.
HTML Structure & syntax
Introduction to HTML5.
Web Client Side Technologies Raneem Qaddoura
HTML CS 4640 Programming Languages for Web Applications
Presentation transcript:

HTML 5

HTML5 is a newest version of HTML (Hypertext Markup Language). It is an ongoing process that took place by combined efforts of World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). The initial phase for the development of HTML5 started in 2004 by WHATWG that has been developed by edited by David Hyatt of Apple and Ian Hickson of Google, Inc.

Time line of Web Technologies

What is new?

Old version It requires plug-ins like Flash to operate various music and video files. It has been considered an interactive form that allows images and objects to be embedded. HTML is a W3C recommendation that stands for World Wide Web Consortium. It lacks canvas feature for drawing. In HTML, cookies are used for storing login and web browsing history. For large amount of data storage cookies has not been considered suitable option.

HTML5 It can play audio-video files and supports various formats. HTML5 includes interactive documents that functions for embedding graphics. HTML 5 is not a W3C recommendation yet It has initiated Canvas feature that uses JavaScript to draw graphics on a web page and is useful to control pixels. Two new storage methods have also been introduced in HTML5 that include local storage and session storage. The data is not passed on by every server request, but used only when asked for. So, this makes it possible to store large amounts of data without affecting the website's performance.

HTML5 has a new DOCTYPE which signals to the browsers that this is an HTML5 document. The new HTML5 DOCTYPE declaration looks like this: <!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

You should specify the character encoding used by your HTML5 page You should specify the character encoding used by your HTML5 page. The character encoding should be in the first 512 bytes of your document. Here is an example: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head>   </html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Minimum HTML 5 Document <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document...... </body> </html>

HTML5 - New Features Some of the most interesting new features in HTML5: The <canvas> element for 2D drawing The <video> and <audio> elements for media playback Support for local storage New content-specific elements, like <article>, <footer>, <header>, <nav>, <section> New form controls, like calendar, date, time, email, url, search

HTML5 Form Fields Email Field The email input field can take text input and validate that the input is a valid email address. You specify that an input field is an email field using the type="email" attribute, like this: <input type="email" name="emailField"/>

URL Field The URL field can take text input and validate that the input is a valid URL. You specify that an input field is a URL field using the type="url" attribute, like this:   <input type="url" name="urlField"/>

Number Field The number field can take text input and validate that the input is a valid number. <input type="number" name="numberField"/>   Number Field Attributes <input type="number" name="numberField" min="10" max="20" step="2" />

Date Field The date field can take text input and validate that the input is a valid date. <input type="date" name="dateField"/>

Time Field The time field can take text input and validate that the input is a valid time. Time fields allow input hours between 0 and 23, and minutes between 0 and 59. <input type="time" name="timeField"/>

Datetime Field The datetime field can take text input and validate that the input is a valid date and time. <input type="datetime“ name="datetimeField"/>

Month Field The month field can take text input and validate that the input is a valid month. Months can be be between 1 and 12. <input type="month" name="monthField"/>

Combo Box Fields The combo box field is really just a text field where you can associate a list of options to. <input type="text" name="comboBoxField" ist="comboBoxList">  <datalist id="comboBoxList"> <option label="Anna"> <option label="John"> <option label="Xavier"> </datalist>

Attributes autofocus The autofocus attribute enables you to specify which field should be given focus automatically when the page is loaded. You should have only one such field on any given page. The autofocus attribute can be used with any type of form field. <input type="text" name="comboBoxField" autofocus>

placeholder The placeholder attribute provides a way to specify a value to show in a form field before the user types anything into the field. Once the user starts typing, the place holder value disappears. The placeholder attribute can be used with any form field that takes text input. Here is an example: <input type="text" name="textField" placeholder="Type in here">

required The required attribute specifies that a given attribute is required. The means, that the form cannot be submitted until a value has been entered into the given field. Here is an example: <input type="text" name="textField" required>

multiple The multiple attribute signals that multiple values are allowed in this field. For instance, an email field could then contain multiple email addresses, separated by commas. The multiple attribute also works with file upload fields (type="file"), allowing the user to upload multiple files.

Range Fields The range fields are used like number fields, but instead of having an arrow up and down to select the value, you have a slider. You specify that an input field is a range field using the type="range" attribute, like this: <input type="range" name="rangeField"/> Here is a live example. Try moving the slider, and click the button to see the value of the range field. As you can see, the value of the range field spans from 0 to 100.   Range Field Attributes Range fields have three attributes extra they can use which affect what numbers that can be chosen by the slider. These attributes are: min max step The min attribute sets the minimum number you can select. The max similarly sets the maximum number of the range. The step attribute sets the increment of the value in the range field when the slider is moved. Here is a code example: <input type="range" name="rangeField" min="100" max="200" step="2"/> Here is a live example. Try moving the slider, and click the button to see the value of the range field. As you can see, the values of the range field now vary between 100 and 200, in increments of 2.

Removed Elements The following HTML 4.01 elements are removed from HTML5: <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt>