Download presentation
Presentation is loading. Please wait.
1
HTML 5
2
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.
3
Time line of Web Technologies
5
What is new?
6
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.
7
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.
8
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" "
9
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">
10
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>
11
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, , url, search
12
HTML5 Form Fields Email Field
The input field can take text input and validate that the input is a valid address. You specify that an input field is an field using the type=" " attribute, like this: <input type=" " name=" Field"/>
13
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"/>
14
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" />
15
Date Field The date field can take text input and validate that the input is a valid date. <input type="date" name="dateField"/>
16
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"/>
17
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"/>
18
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"/>
19
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>
20
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>
21
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">
22
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>
23
multiple The multiple attribute signals that multiple values are allowed in this field. For instance, an field could then contain multiple addresses, separated by commas. The multiple attribute also works with file upload fields (type="file"), allowing the user to upload multiple files.
24
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.
25
Removed Elements The following HTML 4.01 elements are removed from HTML5: <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt>
Similar presentations
