1 / 61

HTML5

HTML5. Golsana Ghaemi 8811143. Introduction Page Structure Multimedia Forms Canvas Storage Drag & Drop. Outline. introduction. HTML5 is the next generation of HTML HTML5 is still a work in progress. However, most modern browsers have some HTML5 support

jaron
Download Presentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 GolsanaGhaemi 8811143

  2. Introduction • Page Structure • Multimedia • Forms • Canvas • Storage • Drag & Drop • Outline

  3. introduction • HTML5 is the next generation of HTML • HTML5 is still a work in progress. However, most modern browsers have some HTML5 support • HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG) • WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.

  4. HTML5 standard status • The first draft was made public in 2008, but not much happened until 2011 •  Today all major browsers (Chrome, Safari, Firefox, Opera, IE) offer HTML5 support • HTML5 works with CSS3 and is still in development. Since its release, HTML5 has been in continuous development, with the W3C adding more and more impressive features • HTML5 is the successor of HTML 4.01, released for the first time in 1999. The internet has changed significantly since 1999 and it seemed like the creation of HTML5 was necessary . The new markup language was developed based on pre-set standards.

  5. New features should be based on HTML, CSS, DOM, and JavaScript • Reduce the need for external plugins • like Flash, … • Better error handling • A consistent DOM for any bad markup • More markup to replace scripting • The development process should be visible to the public • Html5 Rules and goals

  6. HTML5 was created to make the coding process easier and more logical • Many of the features it comes with have been created with the consideration that users should be able to run heavy content on low-powered devices • Thecanvaselement for drawing • The video and audio elements for media playback • Better support for local & offline storage • New content specific elements • article, footer, header, nav, section • New form controls • date, time, email, url, … • Some new feature

  7. HTML5 is not based on XML or SGML • Browsers need to see <!DOCTYPE …> • To work in standard compliance mode • HTML5 Document type(in older versions of HTML were longer) <!DOCTYPE html> • Character encoding <meta charset="utf-8"> • Document type & encoding

  8. HTML5 syntax (not XHTML5) is very lax • Unlike Xhtml, HTML5 is coming with lots of flexibility and would support the followings: • Uppercase tag names. • Quotes are optional for attributes. • Attribute values are optional. • Closing empty elements are optional. • These are equivalent <meta CHARSET=utf-8 > <meta charset="utf-8" /> <META charset="utf-8" > • Following tags are not required • Document is successfully validated without them <html> <head> <body> • HTML5 syntax

  9. Some new global attributes

  10. Emphasize semantic web • HTML5 offers new semantic elements to clearly define different parts of a web page: • <header> • <nav> • <section> • <article> • <aside> • <figcaption> • <figure> • <footer> • Page structure

  11. HTML is not just presentation • Each page portion has its own meaning • In XHTML, page is organized by divs • Assign meaningful ID or Class for divs • header, navigation, footer, content, … • HTML5: new tags for the common divs • <header>, <nav>, <footer>, … • HTML5 recommends the usage of these tags • Page structure

  12. Xhtml based page design • A sample weblog • Assign id & class to divs • Use CSS to arrange divs

  13. html5 based page design • The weblog using HTML5 semantic tags • Use HTML5 new tags A semantic element clearly Describes its meaning to Both the browser and the developer

  14. Sample html5 page structure Header Figure Navigation Image, Video, Quote, Table, etc… Aside Article Section Section Section caption Footer Footer

  15. header • Represents a group of introductory or aids • section • Represents a generic document section • article • Represents an independent piece of content of a document, such as newspaper article • aside • Represents an independent piece of content of a document, such as a blog entry • Html5 page structure tags

  16. hgroup • Groups multiple headers, title and subtitle in the header • footer • Represents a footer for a section • nav • Represents a section intended for navigation • figure • Used to associate a caption together with some embedded content • <img>is used to insert (source) the image • <figcaption> The figcaption element represents a caption or legend for a figure. • Html5 page structure tags

  17. Until now, there hasn't been a standard multimedia on web • Multimedia on the web is sound, music, videos, and animations. • Most videos are shown through a plugin • A helper application is a small computer program that extends the standard functionality of the browser. Helper applications are also called plug-ins. • Html5 multimedia

  18. Plug-ins can be used for many purposes: to display maps, scan for viruses, verify your bank id, and much more. The restrictions are few. • However, not all browsers have the same plugins • HTML5 specifies a standard way to include multimedia contents (video or audio) on web • <video> element to insert video • <audio> element to play audio sound • <source>element to source the content • Html5 multimedia

  19. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg,Not all browsers support all formats <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support video tag.</video> • Problems: • You must convert your videos to many different formats • The <video> element does not work in older browsers • Try to play the .ogg audio file • If item 1 fails, try to play the .mp3 file • If item 2 fails, display the “browser does not support” message • Html5 video

  20. The control attribute adds video controls, like play, pause, and volume It is also a good idea to always include width and height attributes. If height and width are set, the space required for the video is reserved when the page is loaded • Insert text content between the <video>and</video>tags for browsers that do not support the<video> element • Html5 video(cont’d)

  21. The <video>element allows multiple <source> elements. <source> elements can link to different video files • The browser will use the first recognized format • Today • Firefox, Opera, and Chrome: Ogg • Internet Explorer, Chrome, and Safari: MPEG4 • To cover all the major browsers, use two <source> elements • an MPEG4 file, and an Ogg file • Html5 video(cont’d)

  22. Video attributes

  23. Three formats: Ogg, WAV, MP3 • Ogg: Firefox, Opera, Chrome • MP3: IE9, Chrome, Safari <audio controls="controls">  <source src="song.ogg" type="audio/ogg" />  <source src="song.mp3" type="audio/mpeg" />Your browser does not support audio element.</audio> • control, multiple source, and content text is similar to <video> element • Html5 audio

  24. Html5 audio(cont’d)

  25. Media events

  26. HTML5 threw a whole bunch of awesomeness at us. Tasks we accomplished with JavaScript and Flash, like basic form validation and audio/video, can now be completed using basic HTML. • Validation is required on the server, of course • But you have to duplicate it in the user’s browser with JavaScript • Given that almost every web page has some kind of form—search, comments, sign-up, and so on—it would be great if browsers had built-in validation for some of the most common data types that we collect • HTML5 defines new input elements • Forms current & future

  27. Built-in validationOne of the coolest features for developers—which will be transparent to bosses and consumers, but they’ll make our lives much easier— are new form input types which can give us special built-in error reporting. From now on you just need to specify a "type" inside your "input field" and the browser will validate automatically. For example "<input type=number>" will validate input field for numbers only • Forms current & future

  28. Not all major browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields • New input types

  29. Real example

  30. HTML5 has several new attributes for <form> and <input>. • New attributes for <form>: • autocomplete • novalidate • New attributes for <input>: • autocomplete • autofocus • form • formaction • formenctype • formmethod • New input type attributes

  31. formnovalidate • formtarget • height and width • list • min and max • multiple • pattern (regexp) • placeholder • required • step • New input type attributes

  32. autocomplete: on / off • The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color. • When autocomplete is on, the browser automatically complete values based on values that the user has entered before. • It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa. • New input type attributes

  33. autofocus: autofocus • field should automatically get focus when a page is loaded. • New input type attributes

  34. min, maxand step: a number • Used with number and range • Input data in number & range can be controlled • New input type attributes

  35. list: datalist • A list of options for an input field • For text, url, email, … • New input type attributes

  36. novalidate: novalidateis a boolean attribute. • form or input field should not be validated when submitted • pattern:specifies regular expression • The pattern that input should match with • Note: The pattern attribute works with the following input types: text, search, url, tel, email, and password. • Tip: Use the global title attribute to describe the pattern to help the user. • New input type attributes

  37. Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> sadafnaz • required: required • Input field must be filled out before submitting • New input type attributes

  38. Html5 forms association In HTML4, input elements must be inside a form to be associated with it In HTML5, input elements can be associated with forms using form attribute , An input field located outside the HTML form (but still a part of the form), <input form="form_id"> <form action="demo_form.asp" id="form1">First name: <input type="text" name="fname"><br><input type="submit" value="Submit"></form>Last name: <input type="text" name="lname" form="form1">

  39. canvas • The HTML5 <canvas> element is used to draw graphics, The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. • Canvas has several methods for drawing paths, boxes, circles, characters, and adding images. • A canvas is a rectangular area on an HTML page, • Note: By default, the <canvas> element has no border and no content. • Note: Always specify an id attribute(baraye element e canvas) (to be referred to in a script), and a width and height attribute to define the size of the canvas. • Tip: You can have multiple <canvas> elements on one HTML page. <canvas id="canvas_id" width="200" height="100"> Your browser does not support Canvas </canvas>

  40. Canvas (cont’d) • All drawing on the canvas must be done inside a JavaScript(from javascript function) • First, find the <canvas> element: • var c=document.getElementById("myCanvas") • Then, call its getContext() method (you must pass the string "2d" to the getContext() method): • varctx=c.getContext("2d"); • getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more.

  41. Canvas API • Whenever drawing shapes on an HTML5 canvas, there are two properties you need to set: • Stroke • Fill • The stroke and fill determines how the shape is drawn. • The stroke is the outline of a shape. • The fill is the contents inside the shape. • Fillstyle property: The fillStyle property sets or returns the color, gradient, or pattern used to fill the drawing. • Strokestyle property: The strokeStyle property sets or returns the color, gradient, or pattern used for strokes.

  42. Here is an example rectangle drawn with blue stroke, and green fill (actually it is two rectangles): // Obtain a reference to the canvas element. var canvas = document.getElementById("ex1"); // Obtain a 2D context from the canvas element. var context = canvas.getContext("2d"); // Draw grahpics. context.fillStyle = "#009900"; context.fillRect(10,10, 100,100); context.strokeStyle = "#0000ff"; context.lineWidth = 5; context.strokeRect(10,10, 100,100); • Canvas API

  43. Canvas API (cont’d) Rectangle 2D Context functions fillRect() and strokeRect() context.fillStyle= "#ff0000"; context.fillRect(10,10, 100,100); context.strokeStyle= "#0000ff"; context.strokeRect(30,20, 120,110); fillRect() The fillRect() function draws a filled rectangle, The 4 parameters (x, y, width, height) are passed to the fillRect()  strokeRect() The strokeRect() function draws the outline of a rectangle, without filling it

  44. Arc ctx.arc(X,Y,R,sAngle,eAngle,anticlock); • The arc() method creates an arc/curve (used to create circles, or parts of circles). • Tip: To create a circle with arc(): Set start angle to 0 and end angle to 2*Math.PI. • Tip: Use the stroke() or the fill() method to actually draw the arc on the canvas. Path and line: • A HTML5 Canvas path is a series of points with drawing instructions between those points. For instance, a series of points with lines between them, or with arcs between them • Paths are used to draw many types of shapes (lines, circles, polygons etc.) on an HTML5 canvas, so it is important to understand this central concept. • A path is started and ended using the 2D Context functions beginPath() andclosePath() • Canvas API (cont’d)

  45. Line: • The stroke() method actually draws the path you have defined with all those moveTo() and lineTo() methods. The default color is black. • To draw straight lines on a canvas, we will use the following two methods: moveTo(x,y) defines the starting point of the line lineTo(x,y) defines the ending point of the line var c=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.moveTo(0,0);ctx.lineTo(200,100);ctx.stroke(); ctx.moveTo(X, Y) ctx.lineTo(X, Y) • Canvas API (cont’d)

  46. Canvas API (cont’d) Complex shapes ctx.beginPath(); ctx.strokeStyle = "rgb(0, 0, 240)"; ctx.moveTo(100, 100); ctx.lineTo(200, 100); ctx.lineTo(200, 300); ctx.lineTo(150, 250); ctx.closePath(); ctx.stroke();

  47. Canvas API (cont’d) Gradients: patterns of color which changes gradiently from one color to another There are two types of gradients: • Linear: linear pattern • Radial:circular pattern

  48. Linear gradient: The createLinearGradient() function takes 4 parameters: x1, y1, x2, y2. These 4 parameters determine the direction and extension of the gradient pattern. The gradient extends from the first point x1, y1 to the second point x2, y2. horizontal gradient, vertical gradient, diagonal gradient TheaddColorStop() function takes 2 parameters. The first parameter is a number between 0 and 1, The second parameter is the color you can draw using the gradient as either fill or stroke color • Canvas API (cont’d)

  49. Radial Gradients: A radial gradient is defined by 2 circles. Each circle has a center point and a radius. Here is a code example: var x1 = 100; // x of 1. circle center point var y1 = 100; // y of 1. circle center point var r1 = 30; // radius of 1. circle varx2 = 100; // x of 2. circle center point var y2 = 100; // y of 2. circle center point var r2 = 100; // radius of 2. circle • Canvas API (cont’d)

  50. var radialGradient1 = context.createRadialGradient(x1, y1, r1, x2, y2, r2); radialGradient1.addColorStop(0, 'rgb(0, 0, 255)'); radialGradient1.addColorStop(1, 'rgb(0, 255, 0)'); context.fillStyle = radialGradient1; context.fillRect(10,10, 200, 200); • Canvas API (cont’d)

More Related