Downloaded 106 times
![mos.bayomi@gmail.com HTML [New] Tags JavaScript APIs HTML5](https://image.slidesharecdn.com/learnhtml5-130509122608-phpapp01/75/Learn-html5-3-2048.jpg)
![mos.bayomi@gmail.com <input type="text" pattern="[0-9]{16}">](https://image.slidesharecdn.com/learnhtml5-130509122608-phpapp01/75/Learn-html5-55-2048.jpg)
![mos.bayomi@gmail.com <head> <!--[if IE]> <script src="excanvas.js"></script> <![endif]--> </head>](https://image.slidesharecdn.com/learnhtml5-130509122608-phpapp01/75/Learn-html5-64-2048.jpg)
Uploaded byMostafa Bayomi
Learn html5
The document discusses HTML5 features including new HTML5 elements such as <header>, <footer>, <nav>, <article>, <section>, <aside>, and <figure>. It provides examples of how to properly use these new elements to structure web pages. It also covers new form input types like <input type="date">, Canvas, and JavaScript APIs for Canvas. The document is intended to educate developers on best practices for using HTML5 structural elements and features.
Learn html5
- 1. mos.bayomi@gmail.com HTML 5 The NewStandard For HTML
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11. mos.bayomi@gmail.com <article> <aside> <bdi><command> <details> <summary> <figure> <figcaption> <footer> <header> <hgroup> <mark> <meter> <nav> <progress> <ruby> <rt> <rp> <section> <time> <wbr> <audio> <video> <source> <embed> <track> <datalist> <keygen> <output>
- 12.
- 13.
- 14.
- 15. mos.bayomi@gmail.com <div id= "header"> <ulid="nav"> </ul> </div> <div id="content"> <div id="blogpost"> <h1>This is my Blogpost</h1> <p>This is my first paragraph.</p> </div> </div> <div id="sidebar" > <div id="blogroll"> <p>My blogroll Content.</p> </div> </div> <div id="footer"> <p>My Footer Content.</p> </div>
- 16. mos.bayomi@gmail.com <header> <nav></nav> </header> <div id="content"> <article id="blogpost"> <section> <h1>Thisis my Blogpost</h1> <p>This is my first paragraph.</p> </section> </article> </div> <div id="sidebar"> <aside id="blogroll"> <p>My blogroll Content.</p> </aside> </div> <footer> <p>My Footer Content.</p> </footer>
- 17.
- 18.
- 19.
- 20.
- 21. mos.bayomi@gmail.com Modernizr.video true false if (Modernizr.video){ // let's play some video! } else { // no native video support available :( }
- 22.
- 23. mos.bayomi@gmail.com HEADER: <header> <h1>Heading Text</h1> <p> Textor images can be included here</p> <p> Logos are frequently placed here too</p> </header> The <header> tag can also contain an <hgroup> tag, as shown. The <hgroup> tag groups headings together, using the <h1> to <h6> heading levels shown here with a main heading and a sub-heading. <header> <hgroup> <h1>Main Heading</h1> <h2>Sub-heading </h2> </hgroup> <p> Text or images can be included here</p> </header>
- 24. mos.bayomi@gmail.com FOOTER: The <footer> elementcontains information about a page, article, or section, such as the author or date of the article. As a page footer, it may contain copyright or other important legal information. <footer> <p>Copyright 2011 Acme United. All rights reserved.</p> </footer> The HTML5 specification says: ―A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.‖ ------------------------------------------------------------------------------------------------------------------ The Navigation area <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Our Products</a></li> <li><a href="#">Contact Us</a></li> </ul>
- 25.
- 26. mos.bayomi@gmail.com <menu> <button type="button" >Clio</button> <buttontype="button" >Thalia</button> <button type="button">Urania</button> <button type="button">Calliope</button> </menu> ------------------------------------------------------------------------------------------------------------------ <section> The <section> element is commonly misused. Most people would think of using the section tag as a container block level element to contain a portion of the site. This is incorrect. The true way to use the section element is to think of it in terms of grouping specific portions of content. Inside a section you may have multiple headings to further narrow the focus of the section and there may be multiple sections inside a particular piece of content.
- 27. mos.bayomi@gmail.com The <section> tag—andthe <article> tag, as well—can contain headers, footers, or any other components required to complete the section. The <section> tag is for grouping content. The content for both the <section> tag and the <article> tag usually starts with a <header> and ends with a <footer>, with the content for the tag in between. The <section> tag can also contain <article> tags, just as the <article> tag can contain the <section> tag ------------------------------------------------------------------------------------------------------------------ <article> <section> Content </section> <section> Content </section> </article> ------------------------------------------------------------------------------------------------------------------ <section> <article> Content </article> <article> Content </article> </section>
- 28. mos.bayomi@gmail.com <aside> <figure> <figure> <figcaption> <figure> <figure> <img src="koala.jpg"width="304" height="228"> <figcaption>Caption for the figure</figcaption> </figure>
- 29. mos.bayomi@gmail.com <aside> Think of thistag as holding supplementary content that is not part of the flow of the article it supplements. In magazines, asides are frequently used to highlight a point that was made in the article itself. The <aside> tag contains content that can be removed without affecting the information conveyed by the article, section, or page that contains it. <p>My family and I visited Euro Disney last year.</p> <aside> <h4>Disney in France</h4> <p>Besides Euro Disney, there is a Disneyland in California.</p> </aside>
- 30.
- 31.
- 32. mos.bayomi@gmail.com • Input type=datetime global date-and-time input control • input type = datetime-local local date-and-time input control • input type = date date input control • input type = month year-and-month input control • input type = time time input control • input type = week year-and-week input control • input type = number number input control • input type = range imprecise number-input control • input type = email e-mail address input control • input type = url URL input control • input type = search search field • input type = tel telephone-number-input field • input type = color color-well control •
- 33. mos.bayomi@gmail.com Dojo jQuery UIYUI. date, month, week, time, date + time, and date+time–timezone. • See Demos
- 34. mos.bayomi@gmail.com How to solvethe problem for browsers that doesn’t support new input types Ex <form> <input type="date" id="idate"> </form> ... <script> var idate = document.getElementById("idate"); if (idate.type != "date") { $("#idate").datepicker(); // using jQuery UI } </script>
- 35.
- 36. mos.bayomi@gmail.com <input type="number" min="0"max="10" step="2" value="6"/> type min max step value
- 37. mos.bayomi@gmail.com • Input.stepUp(n) • input.stepDown(n) •input.valueAsNumber input.value
- 38. mos.bayomi@gmail.com if (!Modernizr.inputtypes.number) { //no native support for type="number" fields // maybe try Dojo or some other JavaScript framework }
- 39. mos.bayomi@gmail.com <input type="range" min="0"max="10" step="2" value="6"/>
- 40. mos.bayomi@gmail.com The latest versionsof Safari, Chrome, and Opera all do this. (Sadly, the iPhone renders it as a simple text box. It doesn’t even optimize its onscreen keyboard for numeric input.) All other browsers simply treat the field as type="text"
- 41. mos.bayomi@gmail.com • <input type="email"> setCustomValidity(). •object.setCustomValidity("WRONG!!");
- 42. mos.bayomi@gmail.com The email INPUTtag gives you a way to request email addresses in your web form. In most web browsers, this won't look any different than a standard . Where this field becomes important is on mobile devices that change their interface for email address fields, such as the iPhone, iPad, and iPod. On those devices, email form fields are given a different keyboard with things like readily available @-key, period, and minimized spacebar.
- 43.
- 44. mos.bayomi@gmail.com • <input type="search"> •<input type="tel">
- 45.
- 46. mos.bayomi@gmail.com New form attributesand functions
- 47. mos.bayomi@gmail.com placeholder text, search, url, tel,email password <input placeholder="First and last name" required/>
- 48. mos.bayomi@gmail.com autocomplete <input type="text" name="creditcard"autocomplete="off">
- 49.
- 50.
- 51. mos.bayomi@gmail.com list datalist <datalist id="contactList"> <optionvalue="x@example.com" label="Racer X"> <option value="peter@example.com" label="Peter"> </datalist> <input type="email" list="contactList">
- 52. mos.bayomi@gmail.com To use thiscombination: 1. Create a datalistelement in your document with its id set to a unique value. The datalist can be located anywhere in the document. 2. Populate the datalist with as many option elements as needed to represent the full set of suggestions for values of a control. For example, a datalist representing e-mail contacts should contain all of the contact e-mail addresses as individual option children. <datalist id="contactList"> <option value="x@example.com" label="Racer X"> <option value="peter@example.com" label="Peter"> </datalist> 3. Link the input element to the datalistby setting the listattribute to a value which is the idof the associated datalist. <input type="email" id="contacts" list="contactList">
- 53.
- 54. mos.bayomi@gmail.com The valueMissing Constraint Purpose:Ensure that some value is set on this form control Usage: Set the requiredattribute on the form control to true Usage example: <input type="text" name="myText" required> Details: If the required attribute is set on a form control, the control will be in an invalid state unless the user or a programmatic call sets some value to the field. For example, a blank text field will fail a required check, but will pass as soon as any text is entered. When blank, the valueMissing will return true.
- 55.
- 56.
- 57.
- 58. mos.bayomi@gmail.commos.bayomi@gmail.com What Is aCanvas? When you use a canvas element in your web page, it creates a rectangular area on the page. By default, this rectangular area is 300 pixels wide and 150 pixels high, but you can specify the exact size and set other attributes for your canvas element.
- 59.
- 60. mos.bayomi@gmail.com <canvas id="myCanvas" width="200"height="100"></canvas>
- 61. mos.bayomi@gmail.com <canvas id="myCanvas" width="200"height="100"> Your Browser Doesn’t Support Canvas </canvas>
- 62. mos.bayomi@gmail.com <canvas id="myCanvas" width="200"height="100" style="border:1px solid #000000;"> </canvas>
- 63. mos.bayomi@gmail.com if (canvas.getContext) { ... } else{ //put code for browsers that don't support canvas here} OR if (Modernizr.canvas) {. . .} else{// put code for browsers that don't support canvas here}
- 64.
- 65. mos.bayomi@gmail.com • <script type="text/javascript"> varc=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
- 66. mos.bayomi@gmail.commos.bayomi@gmail.com To programmatically usea canvas, you have to first get its context. You can then perform actions on the context and finally apply those actions to the context. You can think of making canvas modifications as similar to database transactions: you start a transaction, perform certain actions, and then commit the transaction.
- 67.
- 68. mos.bayomi@gmail.com fillStyle fillRect(x,y,width,height) strokeStyle fillStyle — •strokeRect(x,y,width,height)
- 69. mos.bayomi@gmail.commos.bayomi@gmail.com EXAMPLE: <script type="text/javascript"> function drawSquare() { var canvas = document.getElementById('draw-square'); if (canvas.getContext) { var context = canvas.getContext('2d'); context.fillStyle = "rgb(150,29,28)"; context.fillRect (2,2,96,96); } else { // put code for browsers that don't support canvas here } } </script>
- 70. mos.bayomi@gmail.commos.bayomi@gmail.com The first thingthis script does is find the element with the id draw-square: var canvas = document.getElementById('draw-square'); Then it checks to see if the browser supports the context method on this element. This is an easy way to make sure that your canvas will only display on browsers that support the tag. if (canvas.getContext) { ... }
- 71. mos.bayomi@gmail.commos.bayomi@gmail.com The context isthe rendering context that is used to manipulate content that is displayed. You should use a 2-dimensional (2d) rendering context. But in the future, 3-dimensional context may be supported. Once I have the context, I need to build my square with the two lines: context.fillStyle = "rgb(150,29,28)"; context.fillRect (2,2,96,96); I created a square that is red (rgb(150,29,28)) and is positioned 2 pixels down and 2 pixels over and 96 pixels wide and high (fillRect (2,2,96,96)). Then, in the else section of my script, I can put any JavaScript I want to display if the canvas element isn’t supported.
- 72.
- 73.
- 74. mos.bayomi@gmail.commos.bayomi@gmail.com Like other 2dplatforms, it uses a flat Cartesian coordinate system with the origin (0, 0) at the top left. Moving to the right will increase the x value, and moving downwards will increase the y value. Understanding how the coordinate system works is integral if you want to have things draw in the right place. A single unit in the coordinate system is usually equivalent to 1 pixel on the screen, so the position (24, 30) would be 24 pixels right and 30 pixels down.
- 75. mos.bayomi@gmail.com • moveTo(x,y) • lineTo(x,y) stroke(). •closePath(): • lineWidth = 4: • context.lineJoin='round‘ :
- 76.
- 77.
- 78. mos.bayomi@gmail.com • drawImage(image, dx,dy) (dx, dy) (0,0) • drawImage(image, dx, dy, dw, dh) dw dh (dx, dy).
- 79. mos.bayomi@gmail.com • drawImage(image, sx,sy, sw, sh, dx, dy, dw, dh) (sx, sy, sw, sh), (dw, dh), (dx, dy). <img> Image
- 80.
- 81.
- 82.
- 83. mos.bayomi@gmail.com <canvas id="d" width="300"height="225"></canvas> <script> var d_canvas = document.getElementById("d"); var context = d_canvas.getContext("2d"); var my_gradient = context.createLinearGradient(0,0,300,0); my_gradient.addColorStop(0, "black"); my_gradient.addColorStop(1, "white"); context.fillStyle = my_gradient; context.fillRect(0, 0, 300, 225); </script>
- 84. mos.bayomi@gmail.com var bg= newImage(); bg= "gravel.jpg"; bg.onload = function (){ ..... context.strokeStyle=context.createPattern(bg,'repeat') ..... }
- 85. mos.bayomi@gmail.commos.bayomi@gmail.com As you cansee, we are still calling stroke() for our path. However, this time we have set a strokeStyle property on the context first, passing in the result of a call to context.createPattern. and once again the image needs to be previously loaded in order for the canvas to perform the operation. The second argument is a repetition pattern that can be one of the choices : repeat (Default) The image is repeated in both directions repeat-x The image is repeated only in the X dimension repeat-y The image is repeated only in the Y dimension no-repeat The image is displayed once and not repeated
- 86.
- 87.
- 88. mos.bayomi@gmail.com context.rotate(angle) context.save(); // rotation angleis specified in radians context.rotate(1.57); context.drawImage(myImage, 0, 0, 100, 100); context.restore();
- 89. mos.bayomi@gmail.com • fillText (text,x, y, maxwidth) • strokeText (text, x, y, maxwidth)
- 90. mos.bayomi@gmail.commos.bayomi@gmail.com Both functions takethe text as well as the location at which it should be drawn. Optionally, a maxwidth argument can be provided to constrain the size of the text by automatically shrinking the font to fit the given size.
- 91. mos.bayomi@gmail.com • font • textAlign text-align start,end, left, right, center. • textBaseline top, hanging, middle, alphabetic, ideographic, and bottom.
- 92.
- 93. mos.bayomi@gmail.commos.bayomi@gmail.com The top ofthe em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like ը are anchored, the middle is half-way between the top of the em square and the bottom of the em square, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic baseline is where glyphs like 私 and 達 are anchored and the bottom of the em square is roughly at the bottom of the glyphsin a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside the em square
- 94. mos.bayomi@gmail.com context • shadowColor • shadowOffsetX: •shadowOffsetY: • shadowBlur
- 95.
- 96. mos.bayomi@gmail.com window.requestAnimFrame = (function(callback){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); // call function after its declaration
- 97. mos.bayomi@gmail.com function animate() { //get canvas and its context ..... // clear canvas context context.clearRect(0, 0, canvas.width, canvas.height); // draw stuff ..... // request new frame requestAnimFrame(function() { animate(); }); }// end of animate function
- 98.
- 99.
- 100. mos.bayomi@gmail.com <svg viewBox="0 0320 240“ style=“border: 1px solid #999; width: 320px; height:240px;"> </svg>
- 101. mos.bayomi@gmail.com <svg id="mysvg" viewBox="00 320 240" style="border: 1px solid #999; width: 320px; height:240px;"> <rect x="50" y="50" width="100" height="100“ style="fill: rgb(255,0,0)"> </rect> <line x1="50" y1="50" x2="150" y2="150" style="stroke: rgb(0,127,127); stroke-width: 5;"> </line> <circle cx="165" cy="100" r="50" style="fill:rgb(0,255,0);"> </circle> </svg>
- 102. mos.bayomi@gmail.com <polygon points="265,50 315,150215,150" style="stroke: rgb(51,51,51); fill: rgb(204,204,204); stroke-width: 5;"> </polygon>
- 103.
- 104. mos.bayomi@gmail.com <rect x="50" y="50"width="100" height="100" fill="rgb(255,0,0)"></rect> <line x1="50" y1="50" x2="150" y2="150" stroke="rgb(0,127,127)" stroke-width="5"></line>
- 105. mos.bayomi@gmail.com rect { fill: rgb(255,0,0); } line{ stroke: rgb(0,127,127); stroke-width: 5; }
- 106. mos.bayomi@gmail.com <image x="10" y="10" width="236"height="260" xlink:href="example.png"> </image> xlink:href
- 107. mos.bayomi@gmail.com <text x="10" y="20"> Hieverybody , everything is OK! </text>
- 108.
- 109. mos.bayomi@gmail.com No Plugin?? --Yes -- no plugin
- 110. mos.bayomi@gmail.com <audio> – The <audio>tag identifies sound content, such as music or any other audio streams. – The <audio> tag has attributes that control what, when, and how audio will be played. The attributes are src, preload, controls, loop, and autoplay. <audio src="MyFirstMusic.ogg" controls autoplay loop> Your browser does not support the audio tag. </audio>
- 111. mos.bayomi@gmail.com <source> <source> – The <video>and <audio> tags can contain the <source> tag, which defines multimedia resources for <video> and <audio>tags. – With this element, you specify alternative video and audio files from which the browser can then choose based on its media type or codec support. <audio controls> <source src="MyFirstAudio.ogg" /> <source src=" MyFirstAudio.mp3" /> <p>Your browser does not support the audio tag</p> </audio>
- 112. mos.bayomi@gmail.com Browser MP3 WavOgg Internet Explorer 9 YES NO NO Firefox 4.0 NO YES YES Google Chrome 6 YES YES YES Apple Safari 5 YES YES NO Opera 10.6 NO YES YES <audio>
- 113.
- 114. mos.bayomi@gmail.com 1. load(): 2. play(): 3.pause(): 4. canPlayType(type):
- 115. mos.bayomi@gmail.com 1. Duration : 2.Paused: 3. ended 4. startTime 5. error 6. currentSrc :
- 116. mos.bayomi@gmail.com 1. autoplay : 2.loop 3. currentTime 4. controls 5. volume 6. muted
- 117.
- 118.
- 119. mos.bayomi@gmail.com <embed> <embed> <embed src="intro.swf" height="200"width="200"> • Problems:
- 120. mos.bayomi@gmail.com <object> <object> <object data="intro.swf" height="200"width="200"> • Problems:
- 121. mos.bayomi@gmail.com <video> <video> – allows youto broadcast video clips or streaming visual media. – It has all the attributes of the <audio> tag plus three more: poster, width, and height. – The poster attribute lets you identify an image to be used while the video is loading or in the case when the video won't load at all. <video src="MyFirstMovie.ogg" controls="controls"> Your browser does not support the video tag </video> • Problems: <video>
- 122. mos.bayomi@gmail.com <video> <video width="320" height="240"controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240"> </object> </video>
- 123. mos.bayomi@gmail.com 1. poster : 2.width, height 3. videoWidth, videoHeight
- 124. mos.bayomi@gmail.com You Are Here(And So Is Everybody Else)
- 125.
- 126.
- 127.
- 128.
- 129.
- 130. mos.bayomi@gmail.com function show_map(position) { varlatitude = position.coords.latitude; var longitude = position.coords.longitude; // let's show a map or do something interesting! } coords timestamp getCurrentPosition(callback function)
- 131. mos.bayomi@gmail.com (Since this isall happening asynchronously, you can’t really know when that will happen in advance. It might take some time for the user to read the info bar and agree to share her location, devices with dedicated GPS hardware may take some more time to connect to a GPS satellite, and so on.)
- 132. mos.bayomi@gmail.com position.coords position.coords Property Type Notes coords.latitudedouble Decimal degrees coords.longitude double Decimal degrees coords.altitude doubleor null Meters above the reference ellipsoid coords.accuracy double Meters coords.altitudeAccuracy doubleor null Meters coords.heading doubleor null Degrees clockwise from true north coords.speed doubleor null Meters/second
- 133. mos.bayomi@gmail.com Only three ofthe properties are guaranteed to be there (coords.latitude, coords.longitude, and coords.accuracy). The rest might come back as null, depending on the capabilities of your device and the backend positioning server with which it communicates. The headingand speedproperties are calculated based on the user’s previous position, if possible.
- 134.
- 135.
- 136. mos.bayomi@gmail.com function handle_error(err) { if(err.code== 1) { // user said no! } }
- 137.
- 138. mos.bayomi@gmail.com Ex: navigator.geolocation.getCurrentPosition( success_callback, error_callback, {maximumAge:75000}); What you’re saying is that you don’t necessarily need the user’s currentlocation. You would be satisfied with knowing where he was 75 seconds (75000 milliseconds) ago.
- 139.
- 140.
- 141. mos.bayomi@gmail.com geolocation <script src=" http://maps.google.com/maps/api/js?sensor=false"> </script> var map= new google.maps.Map(document.getElementById("map_div"), myOptions); //the div to display on , and options for map
- 142. mos.bayomi@gmail.com var myOptions ={ zoom: 8, //the zoom level 0 to 21 center: new google.maps.LatLng(latitude, longitude), //the center of map displayed mapTypeId: google.maps.MapTypeId.ROADMAP //Map Type }
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149. mos.bayomi@gmail.com sessionStorage localStorage Values persistonly as long as the window or tab in which they were stored Values persist beyond window and browser lifetimes. Values are only visible within the window or tab that created them. Values are shared across every window or tab running at the same origin.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155. mos.bayomi@gmail.com worker = newWorker("myWorker.js");
- 156.
- 157. mos.bayomi@gmail.com postMessage() onmessage event.data onmessage = functionmyFunction(event) { event.data; …… postMessage('a message to the parent page'); } myWorkers.js
- 158.
- 159.
- 160.
- 161.