SAMS Teach Yourself HTML5 in 10 Minutes

This book gives you a guided tour of the new features of HTML.


Steven Holzner


241 Pages

28243 Reads

68 Downloads

English

PDF Format

3.00 MB

HTML Learning

Download PDF format


  • Steven Holzner   
  • 241 Pages   
  • 26 Feb 2015
  • Page - 1

    read more..

  • Page - 2

    read more..

  • Page - 3

    read more..

  • Page - 4

    read more..

  • Page - 5

    read more..

  • Page - 6

    read more..

  • Page - 7

    read more..

  • Page - 8

    read more..

  • Page - 9

    read more..

  • Page - 10

    We Want to Hear from You! As the reader of this book, you are our most important critic and com- mentator. We value your opinion and want to know what we’re doing right, what we could do better, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way. You can email or write me directly to let me know read more..

  • Page - 11

    This page intentionally left blank read more..

  • Page - 12

    Introduction Welcome to HTML5, the new edition of HTML. Many people are saying that it’s about time for HTML5—HTML 4.01 was completed in 1999. Others are saying that what HTML5 offers is just too good to pass up. We hope you’ll agree with both opinions. HTML5 goes beyond all previous versions of HTML in scope and power. In fact, its biggest additions are in the read more..

  • Page - 13

    2 Sams Teach Yourself HTML5 in 10 Minutes . Lesson 4, “Web Form Controls”—HTML5 includes ne w controls (controls are elements such as radio buttons or check boxes that the user interacts with), including new telephone and datetime controls. We’ll put them to work here. . Lesson 5, “Inline Editing”—With HTML5, you can edit the text contents of elements such as <div> or read more..

  • Page - 14

    3 Introduction What You Need HTML5 is still in its infancy, so it takes a little patience. In particular, browser support is still spotty, which means that not all features are sup- ported in all browsers. We’ll be working with five browsers in this book: Firefox, Chrome, Safari, Opera, and Internet Explorer. Each time we cover an HTML5 feature in this book, we list which read more..

  • Page - 15

    This page intentionally left blank read more..

  • Page - 16

    LESSON 1 Essential HTML5 Welcome to HTML5, the new exciting version of HTML5 that pushes the web-development envelope. Packed with features, HTML5 is winning legions of fans as it goes beyond what HTML has been traditionally able to do. In this lesson, we’ll get an overview of what HTML5 can do and start the process of creating HTML5 documents. Welcome to HTML5 HTML5 breaks read more..

  • Page - 17

    6 LESSON 1: Essential HTML5 Each W3C specification, called a recommendation (W3C is careful not to consider itself a standards-creating body, so they call their specifications recommendations), goes through several steps. First comes Note status, where some people at W3C start discussing some issue. Then a Working Draft of a specification is created, and the W3C invites comments. Next read more..

  • Page - 18

    7 Getting Data With the New Web Form Controls Dragging and Dropping Another eagerly anticipated feature in HTML5 is drag and drop. Formerly, dragging and dropping items in a web page relied on ad hoc JavaScript, which had to be written differently for every browser. Now dragging and dropping will be uniform across all browsers. If you’ve ever written drag and drop code in read more..

  • Page - 19

    8 LESSON 1: Essential HTML5 Edit Web Pages on the Fly Web pages become more interactive with HTML5, and that includes let- ting the user edit text in a web page. Remembering With Browser History HTML5 also allows you to get a handle on the browser’s history—that is, what pages it’s been to. In Lesson 6, we’re going to take a look at what browser history means in read more..

  • Page - 20

    9 Making Use of Web Storage Awesome Audio and Video A big part of HTML5 is the video and audio support. The new <video> element displays videos, and the <audio> element plays soundtracks—all without the use of browser plug-ins like those for Flash or QuickTime. These new elements are the subject of Lesson 8. In that lesson, we’ll see which browser supports what read more..

  • Page - 21

    10 LESSON 1: Essential HTML5 Using the New Elements What would a new version of HTML be without new HTML elements? Here are the HTML elements that are new in HTML5—and we’ll take a look at them in Lesson 10: . <article> . <aside> . <audio> . <canvas> . <command> . <datalist> . <details> . <embed> . <figcaption> . <figure> . read more..

  • Page - 22

    11 Using the New Elements . <ruby> . <section> . <source> . <summary> . <time> . <video> And these are elements that are dropped in HTML5: . <acronym> . <applet> . <basefont> . <big> . <center> . <dir> . <font> . <frame> . <frameset> . <isindex> . <noframes> . <s> . <strike> . <tt> . read more..

  • Page - 23

    This page intentionally left blank read more..

  • Page - 24

    LESSON 2 Drawing with the Canvas Element The HTML5 Canvas element is a popular one, used to display graphics. The element itself is created very simply in HTML5, like this: <canvas height-”yyy” width=xxx”> </canvas> That’s all you need to create a Canvas element. So how do you draw graph- ics in such an element? You use JavaScript, as we’ll see in this lesson. read more..

  • Page - 25

    14 LESSON 2: Drawing with the Canvas Element FIGURE 2.1 A Canvas example in Firefox. Because you use JavaScript to make this element work, we’ll look at an overview of what’s available first before getting into the details. Getting to Know the Canvas API The W3C has created an application programming interface (API) for the Canvas element, specifying the names of the built-in read more..

  • Page - 26

    15 Setting Line Styles the fillStyle attribute, and then draw a filled rectangle with the fillRect function: canvas1.fillStyle =xxxx canvas1.fillRect(xx, xx, xx, xx; Each item in the API is prefixed with its types, such as float for floating point number. Here are some representative types you’ll see in the W3C specifications: . any For attributes—This means that the attribute can read more..

  • Page - 27

    16 LESSON 2: Drawing with the Canvas Element Casting Shadows The Canvas element even lets you add shadows to your graphics with these attributes: . attribute float shadowBlur; // (default 0) . attribute DOMString shadowColor; // (default transparent black) . attribute float shadowOffsetX; // (default 0) . attribute float shadowOffsetY; // (default 0) Drawing Rectangles Here are the functions read more..

  • Page - 28

    17 Drawing Images . lineTo(float x, float y); . moveTo(float x, float y); . quadraticCurveTo(float cpx, float cpy, float x, float y); . rect(float x, float y, float w, float h); . stroke(); . boolean isPointInPath(float x, float y); Drawing Some Text You can also write text in a Canvas using these attributes and functions: . attribute DOMString font; // (default 10px sans-serif) . read more..

  • Page - 29

    18 LESSON 2: Drawing with the Canvas Element . drawImage(HTMLCanvasElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh); . drawImage(HTMLVideoElement image, float dx, float dy, optional float dw, float dh); . drawImage(HTMLVideoElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh); Using Transformations read more..

  • Page - 30

    19 Starting the Canvas Example <title> Canvas Example </title> <script type=”text/javascript”> function loader() { . . . </script> </head> <body onload=”loader()”> <h1>Canvas Example</h1> <canvas id=”canvas” width=”600” height=”500”> </canvas> </body> </html> 3. Add the JavaScript to create an object corresponding to the Canvas element as shown. read more..

  • Page - 31

    20 LESSON 2: Drawing with the Canvas Element <canvas id=”canvas” width=”600” height=”500”> </canvas> </body> </html> 4. Save canvas.html. Make sure you save this code in text format. The default format for WordPad, for example, is RTF, rich-text format, which won’t work with browsers. Now we’ve got our example started. The next thing we’ll do is draw read more..

  • Page - 32

    21 Drawing Line Art Here’s how to draw multiple rectangles in different colors: 1. Open canvas.html using a text editor such as Windows WordPad. 2. Add the following code to create three rectangles with different fill colors: <script type=”text/javascript”> function loader() { var canvas = document.getElementById (‘canvas’); var canvas1 = canvas.getContext(‘2d’); // Rectangles read more..

  • Page - 33

    22 LESSON 2: Drawing with the Canvas Element Drawing Line Art You can draw line art using a Canvas control. You start with the beginPath() function to let the Canvas know that you’re creating a figure, then use a combination of the moveTo() and lineTo() functions to posi- tion the drawing location and actually draw lines. When your figure is complete, you use the closePath() read more..

  • Page - 34

    23 Drawing Line Art canvas1.beginPath(); canvas1.moveTo(100, 205); canvas1.lineTo(100, 125); canvas1.lineTo(20, 205); canvas1.closePath(); canvas1.stroke(); canvas1.beginPath(); canvas1.moveTo(90, 205); canvas1.lineTo(90, 125); canvas1.lineTo(10, 205); canvas1.closePath(); canvas1.stroke(); 3. Save canvas.html. Make sure you save this code in text format. You can see the results in Figure 2.3, where all three read more..

  • Page - 35

    24 LESSON 2: Drawing with the Canvas Element Filling Line Art You can also fill in the figures you draw with color. For example, here we’ll see how to draw a solid green triangle. In this case, you draw the triangle much like you did in the previous task—using beginPath(), moveTo(), lineTo(), and closePath(). But when it’s time to draw the triangle, you use the fill() read more..

  • Page - 36

    25 Drawing with Bezier Curves Drawing with Bezier Curves You’re not limited to drawing lines using lineTo. You can also draw Bezier curves with the bezierCurveTo() function: . bezierCurveTo(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y); Here’s an example that draws a red heart using Bezier curves: 1. Open canvas.html using a text editor such as Windows WordPad. read more..

  • Page - 37

    26 LESSON 2: Drawing with the Canvas Element canvas1.moveTo(75, 250); canvas1.bezierCurveTo(75, 247, 70, 235, 50, 235); canvas1.bezierCurveTo(20, 235, 20, 272.5, 20, 272); canvas1.bezierCurveTo(20, 290, 40, 312, 75, 330); canvas1.bezierCurveTo(110, 312, 130, 290, 130, 272); canvas1.bezierCurveTo(130, 272.5, 130, 235, 100, 235); canvas1.bezierCurveTo(85, 235, 75, 247, 75, 250); canvas1.closePath(); canvas1.fill(); read more..

  • Page - 38

    27 Drawing with Quadratic Curves Drawing with Quadratic Curves Besides the Bezier curves you saw in the previous task, you can also draw with quadratic curves by using the quadraticCurveTo() function: . quadraticCurveTo(float cpx, float cpy, float x, float y); Here’s an example that draws a shape using quadratic curves: 1. Open canvas.html using a text editor such as Windows WordPad. read more..

  • Page - 39

    28 LESSON 2: Drawing with the Canvas Element Drawing Arcs The canvas control can also draw arcs with the arc function: . arc(float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise); Here’s an example that draws a shape using quadratic curves: 1. Open canvas.html using a text editor such as Windows WordPad. 2. Add the following code to create the read more..

  • Page - 40

    29 Drawing Arcs . . // Arcs canvas1.beginPath(); canvas1.arc(275, 275, 50, 0, Math.PI * 2, true); canvas1.moveTo(310, 275); canvas1.arc(275, 275, 35, 0, 0.75 * Math.PI, false); canvas1.moveTo(300, 255); canvas1.arc(265, 255, 35, 0, 0.5 * Math.PI, false); canvas1.moveTo(280, 255); canvas1.arc(245, 255, 35, 0, 0.2 * Math.PI, false); canvas1.closePath(); canvas1.stroke(); 3. Save canvas.html. Make sure you read more..

  • Page - 41

    30 LESSON 2: Drawing with the Canvas Element Drawing Text You can draw text as well in the Canvas control. To do that, start by select- ing a font to use by setting the Canvas control’s font attribute to a string that contains the specification for the font you select, like this: . canvas1.font = ‘italic 40px sans-serif’; This line of JavaScript installs the italic read more..

  • Page - 42

    31 The canvas.html Example Code The canvas.html Example Code Here’s the full code of the canvas.html example that we developed in this lesson for reference: <!DOCTYPE html> <html> <head> <title> Canvas Example </title> <script type=”text/javascript”> function loader() { var canvas = document.getElementById (‘canvas’); var canvas1 = canvas.getContext(‘2d’); // Rectangles read more..

  • Page - 43

    32 LESSON 2: Drawing with the Canvas Element canvas1.fillStyle = “rgba(200, 200, 0, 1)”; canvas1.fillRect(70, 50, 55, 70); canvas1.fillStyle = “rgba(200, 0, 0, 1)”; canvas1.fillRect(90, 50, 75, 50); //Filled triangle canvas1.fillStyle = “rgba(0, 200, 0, 0.5)”; canvas1.beginPath(); canvas1.moveTo(225, 25); canvas1.lineTo(305, 25); canvas1.lineTo(225, 105); canvas1.closePath(); canvas1.fill(); // Stroked read more..

  • Page - 44

    33 The canvas.html Example Code canvas1.bezierCurveTo(110, 312, 130, 290, 130, 272); canvas1.bezierCurveTo(130, 272.5, 130, 235, 100, 235); canvas1.bezierCurveTo(85, 235, 75, 247, 75, 250); canvas1.closePath(); canvas1.fill(); //Quadratic curves canvas1.strokeStyle = “rgba(0, 0, 0, 1)”; canvas1.beginPath(); canvas1.moveTo(275, 125); canvas1.quadraticCurveTo(225, 125, 225, 162); canvas1.quadraticCurveTo(260, 200, 265, read more..

  • Page - 45

    This page intentionally left blank read more..

  • Page - 46

    LESSON 3 Dragging and Dropping with HTML5 HTML5 supports drag-and-drop operations, where you can move elements and text around the browser window using a mouse or other pointing device. That’s useful for such operations as letting the user move items into a shopping cart, or letting them customize what elements appear in their home page, and it’s a very popular part of read more..

  • Page - 47

    36 LESSON 3: Dragging and Dropping with HTML5 FIGURE 3.1 Denying a drag-and-drop operation. TIP: Note that all the “on” attributes star t with “ondrag” with one exception—ondrop, which occurs when you drop a dragged item. It’s worth bearing in mind that this attribute is ondrop, not ondrag- drop, or you’re going to confuse some browsers, which will not run your code. In this read more..

  • Page - 48

    37 Getting to Know the Drag-and-Drop API FIGURE 3.2 Allowing a drag-and-drop operation. Now let’s take a look at the draggable attribute and the “on” attributes and how you use them to support drag and drop. Getting to Know the Drag-and- Drop API You can read all about the drag-and-drop specification according to the W3C at: http://dev.w3.org/html5/spec/dnd.html. From an HTML read more..

  • Page - 49

    38 LESSON 3: Dragging and Dropping with HTML5 . ondragstart . ondragend The draggable attribute of an element, as you might guess, is set to true if you want to allow that element to be dragged. The “on” attributes are used to connect JavaScript functions to various events. For example, you use ondragenter to call a JavaScript function when a draggable element is being read more..

  • Page - 50

    39 Getting to Know the Drag-and-Drop API The ondragover Attribute Dragover events occur in a drop target while users drag a draggable ele- ment over that target. You can connect this event to a JavaScript handler function like this: <div id=”target1” ondragenter=”return enter(event)” ondragover=”return over(event)” . . . This event occurs in drop targets. The ondrop Attribute Drop read more..

  • Page - 51

    40 LESSON 3: Dragging and Dropping with HTML5 The ondragend Attribute This event occurs in draggable elements when users stop dragging them. You can connect JavaScript function handlers to this event like this: <div id=”draggable1” draggable=”true” ondragstart=”return start(event)” ondragend=”return end(event)”>1 . . . This event occurs in draggable elements. The dataTransfer Object There read more..

  • Page - 52

    41 Starting the Drag-and-Drop Example Starting the Drag-and-Drop Example To show how to put drag and drop to work, we’re going to create an exam- ple named draganddrop.html, which you can see running in Figures 3.1 and 3.2, and whose code appears in its entirety at the end of this lesson. To get started with the draganddrop.html example, follow these steps: 1. Create read more..

  • Page - 53

    42 LESSON 3: Dragging and Dropping with HTML5 ondrop=”return drop(event)”> </div> </body> </html> 3. Add the following code to create the three draggable <div> ele- ments as children of the first target. Note that we set each drag- gable <div> element’s draggable attrib ute to true and also con- nect the events that draggables support to JavaScript functions, read more..

  • Page - 54

    43 Styling the Draggable and Target Elements <div id=”target3” ondragenter=”return enter(event)” ondragover=”return over(event)” ondrop=”return drop(event)”> </div> </body> </html> 4. Save draganddrop.html. Make sure you save this code in text for- mat (the default format for WordPad, for example, is RTF, rich- text format, which won’t work with browsers). Now we’ve read more..

  • Page - 55

    44 LESSON 3: Dragging and Dropping with HTML5 float:left; width:250px; height:250px; padding:10px; margin:10px; } #draggable1, #draggable2, #draggable3 { width:75px; height:70px; padding:5px; margin:5px; } #target1 {background-color: cyan;} #target2 {background-color: cyan;} #target3 {background-color: cyan;} #draggable1 {background-color: orange;} #draggable2 {background-color: orange;} #draggable3 {background-color: orange;} read more..

  • Page - 56

    45 Styling the Draggable and Target Elements FIGURE 3.3 The draggables and targets in draganddrop.html. ondragover=”return over(event)” ondrop=”return drop(event)”> </div> <div id=”target3” ondragenter=”return enter(event)” ondragover=”return over(event)” ondrop=”return drop(event)”> </div> </body> </html> 3. Save draganddrop.html. Make sure you save this code in text read more..

  • Page - 57

    46 LESSON 3: Dragging and Dropping with HTML5 Starting the Drag Operation When the user starts dragging a draggable <div> element in our example, that <div> element’s ondragstart event occurs, and we’ve tied that event to a JavaScript function named start(). In this task, we’ll write the start() function to get the dragging operation started. That involves three steps: setting read more..

  • Page - 58

    47 Allowing Dragged Objects to Enter the Targets 4. Add the following code to the start() function to store the ID of the <div> element being dragged so we can move it when it’s dropped: <script type=”text/javascript”> function start(e) { e.dataTransfer.effectAllowed=’move’; e.dataTransfer.setData(“Data”, e.target.getAttribute(‘id’)); . . . } 5. Add the following code to the read more..

  • Page - 59

    48 LESSON 3: Dragging and Dropping with HTML5 To do that, follow these steps: 1. Open draganddrop.html using a text editor such as Windows WordPad. 2. Add the following code to the <script> section of dragdrop.html, creating the enter() function and returning a value of true from it, indicating that draggable elements may enter a target: function enter(e) { return true; } 3. Save read more..

  • Page - 60

    49 Allowing Dragged Objects to Be Dropped on Certain Targets e.dataTransfer.getData(“Data”); var id = e.target.getAttribute(‘id’); . . . } 3. Add the following code to the over() function to indicate that any dragged item may be dropped on target 1, that draggable <div> element 3 may be dropped on target 2 only, and that draggable <div> elements 1 and 2 may be dropped read more..

  • Page - 61

    50 LESSON 3: Dragging and Dropping with HTML5 Handling Drop Events When the user drops a draggable <div> element on an allowed target <div> element, how do we move the draggable <div> to the target? That turns out to be simple—we’ll just use the built-in JavaScript function appendChild to append the draggable <div> element to the current target <div> element. When the read more..

  • Page - 62

    51 Ending Drop Operations 4. Save draganddrop.html. Make sure you save this code in text for- mat (the default format for WordPad, for example, is RTF, rich- text format, which won’t work with browsers). Now you’ve handled the drop operation. Ending Drop Operations When a draggable <div> element is dropped, its ondragEnd event occurs, and we’ve tied that event to the read more..

  • Page - 63

    52 LESSON 3: Dragging and Dropping with HTML5 The draganddrop.html Example Code Here’s the full code of the draganddrop.html example that we developed in this lesson for reference: <!DOCTYPE HTML> <html> <head> <title> Drag and Drop Example </title> <style type=”text/css”> #target1, #target2, #target3 { float:left; width:250px; height:250px; padding:10px; margin:10px; } FIGURE read more..

  • Page - 64

    53 The draganddrop.html Example Code #draggable1, #draggable2, #draggable3 { width:75px; height:70px; padding:5px; margin:5px; } #target1 {background-color: cyan;} #target2 {background-color: cyan;} #target3 {background-color: cyan;} #draggable1 {background-color: orange;} #draggable2 {background-color: orange;} #draggable3 {background-color: orange;} </style> <script type=”text/javascript”> function start(e) { read more..

  • Page - 65

    54 LESSON 3: Dragging and Dropping with HTML5 iddraggable ==’draggable2’)) return false; else return true; } function drop(e) { var iddraggable = e.dataTransfer.getData(“Data”); e.target.appendChild (document.getElementById(iddraggable)); e.stopPropagation(); return false; } function end(e) { e.dataTransfer.clearData(“Data”); return true } </script> </head> <body> <h1>Drag and Drop Example</h1> read more..

  • Page - 66

    55 The draganddrop.html Example Code </div> </div> <div id=”target2” ondragenter=”return enter(event)” ondragover=”return over(event)” ondrop=”return drop(event)”> </div> <div id=”target3” ondragenter=”return enter(event)” ondragover=”return over(event)” ondrop=”return drop(event)”> </div> </body> </html> read more..

  • Page - 67

    This page intentionally left blank read more..

  • Page - 68

    LESSON 4 Web Form Controls HTML has always supported form controls using the <input> element, such as text boxes: <input name=”text” type=”text”> or radio buttons: <input name=”radio” type=”radio”> You create such controls using the <input> element with the type attribute set to the type of control you want (check box, radio button, text field), and the name read more..

  • Page - 69

    58 LESSON 4: Web Form Controls TABLE 4.1 The Web Form Controls Type Control Type button A button checkbox A check box color A color well date A date control datetime A date and time control datetime-local A date and time control email A text field file A label and a button hidden n/a image Either a clickable image or a button month A month control number A text field or spinner read more..

  • Page - 70

    59 Welcome to Web Form Controls FIGURE 4.1 The webforms.html example. TABLE 4.1 The Web Form Controls Type Control Type time A time control url A text field week A week control In this lesson, we’re going to create an example named webforms.html that focuses on the new HTML5 controls, as shown in Figure 4.1, running in the Opera browser. As a demonstration, we’ll also write read more..

  • Page - 71

    60 LESSON 4: Web Form Controls FIGURE 4.2 Reading the value from a datetime control. Getting to Know the Web Form Controls API You know that you create web form controls with the <input> element, setting the type attribute as shown in Table 4.1. But what other attributes are available for each control? For example, when you use a range con- trol—which lets the user read more..

  • Page - 72

    61 Getting to Know the W eb F o rm Controls API TABLE 4.2 Allowed Control Attributes Hidden Text, Search, URL, Telephone E-mail Pass- word Date and Time, Date, Month, Week, Time Local Date and Time, Number Range Color Checkbox, Radio Button File Upload Submit Button Image Button Reset Button, Button accept · · · · · · · · · X · · · alt · · · · · · · · · · · X · autocomplete · read more..

  • Page - 73

    62 LESSON 4: W eb F o rm Controls TABLE 4.2 Allowed Control Attributes Hidden Text, Search, URL, Telephone E-mail Pass- word Date and Time, Date, Month, Week, Time Local Date and Time, Number Range Color Checkbox, Radio Button File Upload Submit Button Image Button Reset Button, Button list · X X · X X X X · · · · · max · · · · X X X · · · · · · maxlength · X X X · · · · · · read more..

  • Page - 74

    63 Getting to Know the W eb F o rm Controls API TABLE 4.3 Built-in Control Data Attributes and Functions Hidden Text, Search, URL, Telephone E-mail Password Date and Time, Date, Month, Week, Time Local Date and Time, Number Range Color Checkbox, Radio Button File Upload Submit Button Image Button Reset Button, Button checked · · · · · · · · X · · · · files · · · · · · · · · X read more..

  • Page - 75

    64 LESSON 4: W eb F o rm Controls TABLE 4.4 Control Events Hidden Text, Search, URL, Telephone E-mail Password Date and Time, Date, Month, Week, Time Local Date and Time, Number Range Color Checkbox, Radio Button File Upload Submit Button Image Button Reset Button, Button input · X X X X X X X · · · · · change · X X X X X X X X X · · · Whereas some controls return simple te xt strings, read more..

  • Page - 76

    65 Getting to Know the Web Form Controls API The browser will attempt to convert the data you’ve entered into a control into the format correct for the control. If your data can’t be converted when you click the Submit button, the browser is supposed to display an error message. The Opera browser makes the control flash red three times and pops up an error message read more..

  • Page - 77

    66 LESSON 4: Web Form Controls Starting the Web Forms Example In this lesson, we’re going to put the new HTML5 controls to work in an example, webforms.html, which you can see in Figure 4.1. To get started with the webforms.html example, follow these steps: 1. Create webforms.html using a text editor such as Windows WordPad. 2. Enter the following code to create the HTML read more..

  • Page - 78

    67 Creating a Default Control Creating a Default Control If you don’t specify the type of control you want to create, you’ll get a text field, as shown in this task. Follow these steps: 1. Open webforms.html using a text editor such as Windows WordPad. 2. Add the following code to create a default control, without speci- fying a type attribute. Note the autofocus attribute, read more..

  • Page - 79

    68 LESSON 4: Web Form Controls 3. Save webforms.html. Make sure you save this code in text format (the default format for WordPad, for example, is RTF, rich-text format, which won’t work with browsers). Now the default control appears as a text field, as you can see at the top of Figure 4.1. Creating a URL Control You can also create URL fields; just follow these read more..

  • Page - 80

    69 Creating an Email Control 3. Save webforms.html. Make sure you save this code in text format (the default format for WordPad, for example, is RTF, rich-text format, which won’t work with browsers). The browser will try to format the text you entered into this field as a proper URL, starting with http://. If it can’t do that, it will display an error. Creating an read more..

  • Page - 81

    70 LESSON 4: Web Form Controls 3. Save webforms.html. Make sure you save this code in text format (the default format for WordPad, for example, is RTF, rich-text format, which won’t work with browsers). The browser will try to format the text you entered into this field as an email address. If it can’t, it will display an error, as you see in Figure 4.3. FIGURE read more..

  • Page - 82

    71 Creating Range and Number Controls <head> <title> Web Form Example </title> </head> <body> <h1>Web Form Example</h1> <form method=”post” action=”webforms.php”> <table border=”1” cellpadding=”5”> . . . <tr> <td>Range</td><td><input name=”range” type=”range” min=”0” max=”100” step=”5” value=”40”></td> </tr> read more..

  • Page - 83

    72 LESSON 4: Web Form Controls Creating Date and Time Controls You can create date and time controls. In this task, we’ll create these controls: . Date . Time . Week . Month . Datetime . Local Datetime To create these controls, follow these steps: 1. Open webforms.html using a text editor such as Windows WordPad. 2. Add the following code. <!DOCTYPE html> <html> read more..

  • Page - 84

    73 Creating Date and Time Controls <td>Date</td><td><input name=”date” type=”date”></td> </tr> <tr> <td>Week</td><td><input name=”week” type=”week”></td> </tr> <tr> <td>Month</td><td><input name=”month” type=”month”></td> </tr> <tr> <td>Time</td><td><input name=”time” type=”time”></td> read more..

  • Page - 85

    74 LESSON 4: Web Form Controls Creating a Color Control You can let the user select colors with a color control. Follow these steps: 1. Open webforms.html using a text editor such as Windows WordPad. 2. Add the following code. <!DOCTYPE html> <html> <head> <title> Web Form Example </title> </head> <body> <h1>Web Form Example</h1> <form method=”post” read more..

  • Page - 86

    75 Creating a Search Control <tr> <td>Color</td><td><input name=”color” type=”color”></td> </tr> . . . <input type=”submit” value=”Submit”> </form> </body> </html> 3. Save webforms.html. Make sure you save this code in text format (the default format for WordPad, for example, is RTF, rich-text format, which won’t work with browsers). read more..

  • Page - 87

    76 LESSON 4: Web Form Controls . . <tr> <td>Search Query</td><td><input name=”query” type=”search”></td> </tr> . . . <input type=”submit” value=”Submit”> </form> </body> </html> 3. Save webforms.html. Make sure you save this code in text format (the default format for WordPad, for example, is RTF, rich-text format, which won’t work with read more..

  • Page - 88

    77 The webforms.html Example Code <td>Email</td><td><input name=”email” type=”email”></td> </tr> <tr> <tr> <td>Range</td><td><input name=”range” type=”range” min=”0” max=”100” step=”5” value=”40”></td> </tr> <td>Number</td><td><input name=”number” type=”number” min=”0” max=”100” step=”5” value=”40”></td> read more..

  • Page - 89

    78 LESSON 4: Web Form Controls type=”search”></td> </tr> </table> <br> <input type=”submit” value=”Submit”> </form> </body> </html> The webforms.php Example Code Here’s the full code of webforms.php that reads the datetime control and reports its value. If you want to use this code, you’ll have to place it on a server that runs PHP in read more..

  • Page - 90

    LESSON 5 Inline Editing HTML5 specifies that you can make elements editable—that is, let the user edit its content. In fact, you can make a whole document editable, which is what we’ll discuss in this lesson. That’s not to say that we’re talking about text fields either—when you make an element editable, you can include all kinds of elements, such as <div> elements. read more..

  • Page - 91

    80 LESSON 5: Inline Editing In HTML5, you can use the contenteditable attribute to make an element editable. This attribute takes three settings: . true—Makes the element content editable . false—Makes the element content not editable . inherit—Makes this attribute the same as the element’s parent element We’ll be setting contenteditable to true in our <div> element in our read more..

  • Page - 92

    81 Starting the editdiv.html Example FIGURE 5.1 The editdiv.html example. Let’s see all this at work in an example, starting by making a <div> ele- ment editable in the editdiv.html example. Starting the editdiv.html Example In this lesson, we’re going to put the new HTML5 contenteditable attribute to work with a <div> element, letting the user enter text as you can see read more..

  • Page - 93

    82 LESSON 5: Inline Editing 2. Enter the following code: <!DOCTYPE html> <html> <head> <title> Editable &lt;div&gt; Element </title> </head> <body> <h1>Editable &lt;div&gt; Element</h1> . . . </body> </html> 3. Enter the following code to create the <div> element, setting its contenteditable attribute to true. <!DOCTYPE html> <html> read more..

  • Page - 94

    83 Adding a Bold Button Adding a Bold Button You can let the user make text in the editable <div> element bold—and it’s easy. Users select the text they want bold with the mouse, and then click the Bold button. It’s up to you to then send the command “bold” to the document. To send the bold command to the document, you use the JavaScript execCommand() function, read more..

  • Page - 95

    84 LESSON 5: Inline Editing <head> <title> Editable &lt;div&gt; Element </title> </head> <body> <h1>Editable &lt;div&gt; Element</h1> <div> . . . </div> <br> <div id=”div” style=’border:solid black; height: 300px; width: 400px’ contenteditable=”true”> </div> </body> </html> 3. Add the following code to create the Bold button and read more..

  • Page - 96

    85 Adding an Italic Button </body> </html> 4. Save editdiv.html. Make sure you save this code in text format (the default format for WordPad, for example, is RTF, rich-text format, which won’t work with browsers). Now the user can select text and click the Bold button to make that text bold, as shown in Figure 5.2. Adding an Italic Button You can let the user read more..

  • Page - 97

    86 LESSON 5: Inline Editing Editable &lt;div&gt; Element </title> </head> <body> <h1>Editable &lt;div&gt; Element</h1> <div> <input type=”button” value=”Bold” onclick=”document.execCommand(‘bold’, false, null);”> <input type=”button” value=”Italic” onclick=”document.execCommand (‘italic’, false, null);”> </div> <br> <div id=”div” style=’border:solid black; read more..

  • Page - 98

    87 Adding an Underline Button Adding an Underline Button You can let the user underline text with the underline command and an Underline button. To add that button to the editdiv.html example, follow these steps: 1. Open editdiv.html using a text editor such as Windows WordPad. 2. Add the following code to create the Underline button and send the “underline” command when it read more..

  • Page - 99

    88 LESSON 5: Inline Editing Now the user can select text and click the Underline button to make that text underlined, as shown in Figure 5.4. Adding an Add Link Button You can also let the users add links to their text with the createlink com- mand and an Add Link button. When the user selects some text and clicks the Add Link button, we’ll pop a dialog box on read more..

  • Page - 100

    89 Adding an Add Link Button <h1>Editable &lt;div&gt; Element</h1> <div> <input type=”button” value=”Bold” onclick=”document.execCommand(‘bold’, false, null);”> <input type=”button” value=”Italic” onclick=”document.execCommand (‘italic’, false, null);”> <input type=”button” value=”Underline” onclick=”document.execCommand(‘underline’, false, null);”> <input type=”button” read more..

  • Page - 101

    90 LESSON 5: Inline Editing <h1>Editable &lt;div&gt; Element</h1> <div> <input type=”button” value=”Bold” onclick=”document.execCommand(‘bold’, false, null);”> <input type=”button” value=”Italic” onclick=”document.execCommand (‘italic’, false, null);”> <input type=”button” value=”Underline” onclick=”document.execCommand(‘underline’, false, null);”> <input type=”button” read more..

  • Page - 102

    91 Adding a Display Source Button Adding a Display Source Button When users are done formatting their text, you can let them display the HTML of that text when they click a Display Source button. For example, the HTML for the text shown in Figure 5.5 is Here is some <span style=”font-weight: bold;”>bold </span><span style=”font-style: italic;”>italic </span><span read more..

  • Page - 103

    92 LESSON 5: Inline Editing <br> <div id=”div” style=’border:solid black; height: 300px; width: 400px’ contenteditable=”true”> </div> </body> </html> 3. Add the following JavaScript code to read the HTML source from the innerHTML property of the <div> element and display that source in a dialog box: <!DOCTYPE html> <html> <head> <title> Editable read more..

  • Page - 104

    93 Spellchecking null);”> <input type=”button” value=”Italic” onclick=”document.execCommand (‘italic’, false, null);”> <input type=”button” value=”Underline” onclick=”document.execCommand(‘underline’, false, null);”> <input type=”button” value=”Add Link” onclick=”createLink();”> </div> <br> <div id=”div” style=’border:solid black; height: 300px; width: 400px’ read more..

  • Page - 105

    94 LESSON 5: Inline Editing TIP: To turn spellchecking off in Firefox, set the spellcheck attribute of the editable element or document to false. To spellcheck your text in Firefox, follow these steps: 1. Enter your text in an editable element or document. Firefox will underline words it considers misspelled with a wavy red under- line, as you see in Figure 5.7. 2. Right-click read more..

  • Page - 106

    95 The editdiv.html Example Code The editdiv.html Example Code Here is the whole editdiv.html example code: <!DOCTYPE html> <html> <head> <title> Editable &lt;div&gt; Element </title> <script type=”text/javascript”> function showSource() { var content = document.getElementById (“div”).innerHTML; content.replace(/</g,’&lt;’); content.replace(/>/g, ‘&gt;’); alert(content); read more..

  • Page - 107

    96 LESSON 5: Inline Editing <input type=”button” value=”Display Source” onclick=”showSource();”> </div> <br> <div id=”div” style=’border:solid black; height: 300px; width: 400px’ contenteditable=”true”> </div> </body> </html> Starting the editiframe.html Example Now we’re going to put the new HTML5 designmode attribute, which makes a whole document editable, to read more..

  • Page - 108

    97 Starting the editiframe.html Example To get started with the editiframe.html example, follow these steps: 1. Create editframe.html using a text editor such as Windows WordPad. 2. Enter the following code, creating this example and the <iframe>. <!DOCTYPE html> <html> <head> <title> Editable &lt;iframe&gt; </title> </head> <body onload=”loader()”> read more..

  • Page - 109

    98 LESSON 5: Inline Editing . window.addEventListener(“loader”, onload, false); </script> </head> <body onload=”loader()”> <h1>Editable &lt;iframe&gt;</h1> <iframe id=”content” style=’border:solid black; height: 300px; width: 400px’ src=”about:blank”> </iframe> </body> </html> 4. Save editiframe.html. Make sure you save this code in text for- mat (the read more..

  • Page - 110

    99 Adding the editiframe.html Buttons <script type=”text/javascript”> var iframe; function loader() { iframe = document.getElementById(“content”); iframe.contentDocument.designMode = “on”; } function showSource() { var content = iframe.contentDocument.body.innerHTML; content.replace(/</g, ‘&lt;’); content.replace(/>/g, ‘&gt;’); alert(content); } function createLink() { var url = prompt(“Enter URL:”, read more..

  • Page - 111

    100 LESSON 5: Inline Editing onclick=”createLink();”> <input type=”button” value=”Display Source” onclick=”showSource();”> </div> <br> <iframe id=”content” style=’border:solid black; height: 300px; width: 400px’ src=”about:blank”> </iframe> </body> </html> 3. Save editiframe.html. Make sure you save this code in text for- mat (the default format for WordPad, read more..

  • Page - 112

    101 The editiframe.html Example Code { var content = iframe.contentDocument.body.innerHTML; content.replace(/</g, ‘&lt;’); content.replace(/>/g, ‘&gt;’); alert(content); } function createLink() { var url = prompt(“Enter URL:”, “http://”); if (url) iframe.contentDocument.execCommand (“createlink”, false, url); } window.addEventListener(“loader”, onload, false); </script> </head> <body read more..

  • Page - 113

    This page intentionally left blank read more..

  • Page - 114

    LESSON 6 Working with Browser History HTML5 gives you control over the browser’s history—where it’s been and where it is now. The History object lets you move forward and backward, from page to page in the browser, which means you can use the history object, for example, to go back three pages. You can also store data in a browser’s history state object. That is, read more..

  • Page - 115

    104 LESSON 6: Working with Browser History FIGURE 6.1 The pophistory.html example. Finally, the example lets the user enter some text and push that text as data in the current history state, then go to another page and come back—and when the state object is popped, the text you entered is displayed. In this way, you can pass data from page to page. To make the pushing read more..

  • Page - 116

    105 Getting to Know the History API . window.history.pushState(); . window.history.replaceState(); . window.onpopstate We’ll take a closer look at them now. window.history.length The window.history.length attribute gives the number of entries in the browser session history. We’ll take a look at this attribute in the pophisto- ry.html example. window.history.back() This function goes back one step read more..

  • Page - 117

    106 LESSON 6: Working with Browser History window.history.pushState(data, title [, url ] ) This function lets you push data into the history. The data argument is an object that contains your data, title is the name with which you want to reference that data, and the url argument lets you associate the data with a particular page so it’ll be popped when that page is read more..

  • Page - 118

    107 Adding a Back Button . . . </body> </html> 3. Add the following code to create the <div> elements this e xam- ple uses to display results. <!DOCTYPE html> <html> <head> <title> Page to Page History </title> </head> <body onload=”loader()”> <h1>Page to Page History</h1> <br> <div id=”length”></div> <br> <div read more..

  • Page - 119

    108 LESSON 6: Working with Browser History <!DOCTYPE html> <html> <head> <title> Page to Page History </title> </head> <body onload=”loader()”> <h1>Page to Page History</h1> <input type=”button” value=”Back” onclick=”back();”> . . . <br> <div id=”length”></div> <br> <div id=”state”></div> <br> </body> </html> 3. Add read more..

  • Page - 120

    109 Adding a Forward Button <div id=”length”></div> <br> <div id=”state”></div> <br> </body> </html> 4. Save pophistory.html. Make sure you save this code in text for- mat (the default format for WordPad, for example, is RTF, rich- text format, which won’t work with browsers). Now the user can click the Back button, which appears in Figure read more..

  • Page - 121

    110 LESSON 6: Working with Browser History FIGURE 6.3 Navigating to the pophistory.html page. FIGURE 6.4 Back to USA Today. Adding a Forward Button You can also let the user navigate forward in the browser history with the window.history.forward() function. To add the Forward button to this example, follow these steps: 1. Open pophistory.html using a text editor such as Windows read more..

  • Page - 122

    111 Adding a Forward Button <!DOCTYPE html> <html> <head> <title> Page to Page History </title> </head> <body onload=”loader()”> <h1>Page to Page History</h1> <input type=”button” value=”Back” onclick=”back();”> <input type=”button” value=”Forward” onclick=”forward();”> <br> . . . <br> <div id=”length”></div> <br> <div read more..

  • Page - 123

    112 LESSON 6: Working with Browser History <body onload=”loader()”> <h1>Page to Page History</h1> <input type=”button” value=”Back” onclick=”back();”> <br> <input type=”button” value=”Forward” onclick=”forward();”> <br> <div id=”length”></div> <br> <div id=”state”></div> <br> </body> </html> 4. Save pophistory.html. Make sure you read more..

  • Page - 124

    113 Adding a Go Button <body onload=”loader()”> <h1>Page to Page History</h1> <input type=”button” value=”Back” onclick=”back();”> <input type=”button” value=”Forward” onclick=”forward();”> <br> Pages to move by: <input id=”amount” type=”text”> <input type=”button” value=”Go” onclick=”go();”> <br> . . . <br> <div id=”length”></div> read more..

  • Page - 125

    114 LESSON 6: Working with Browser History function go() { var amount = document.getElementById (“amount”).value; window.history.go(amount); } </script> </head> <body onload=”loader()”> <h1>Page to Page History</h1> <input type=”button” value=”Back” onclick=”back();”> <br> <input type=”button” value=”Forward” onclick=”forward();”> <br> <div id=”length”></div> read more..

  • Page - 126

    115 Getting History Length <!DOCTYPE html> <html> <head> <title> Page to Page History </title> <script type=”text/javascript”> function back() { window.history.back(); } function forward() { window.history.forward(); } function loader() { var length = window.history.length; document.getElementById (“length”).innerHTML = “<h1>” + ”History length: “ + length + ”</h1>”; } read more..

  • Page - 127

    116 LESSON 6: Working with Browser History 3. Save pophistory.html. Make sure you save this code in text for- mat (the default format for WordPad, for example, is RTF, rich- text format, which won’t work with browsers). Now when the page loads, it’ll display the number of entries in the win- dow history, as shown in Figure 6.5. Pushing Data into the History You can let read more..

  • Page - 128

    117 Pushing Data into the History <body onload=”loader()”> <h1>Page to Page History</h1> <input type=”button” value=”Back” onclick=”back();”> <br> <input type=”button” value=”Forward” onclick=”forward();”> <br> <br> <br> Text to push: <input id=”statedata” type=”text”> <input type=”button” value=”Push Data” onclick=”pushdata();”> <br> <div read more..

  • Page - 129

    118 LESSON 6: Working with Browser History function pushData() { var statedata = document.getElementById (“statedata”).value; var containerObject = {container: statedata}; history.pushState(containerObject, ”item”, “pophistory.html”); } </script> </head> <body onload=”loader()”> <h1>Page to Page History</h1> <input type=”button” value=”Back” onclick=”back();”> <br> <input read more..

  • Page - 130

    119 Popping Data from the History Now when the user enters data in the text field and clicks the Push Data button, that text will be pushed into the history of the current page. In the next task, we’ll see about recovering that pushed text. Popping Data from the History Because we’ve pushed data into the current page’s history state, it’ll be popped automatically read more..

  • Page - 131

    120 LESSON 6: Working with Browser History { var statedata = document.getElementById (“statedata”).value; var containerObject = {container: statedata}; history.pushState(containerObject, “item”, “pophistory.html”); } function popData(event) { var state = “Page: “ + document.location + “ Data: “ + event.state.container; document.getElementById (“state”).innerHTML = “<h1>” + state + read more..

  • Page - 132

    121 The pophistory.html Example Code <div id=”state”></div> <br> </body> </html> 3. Save pophistory.html. Make sure you save this code in text for- mat (the default format for WordPad, for example, is RTF, rich- text format, which won’t work with browsers). Now when the user enters text into the pophistory.html page, clicks the Push Data page, navigates to read more..

  • Page - 133

    122 LESSON 6: Working with Browser History { window.history.forward(); } function loader() { var length = window.history.length; document.getElementById (“length”).innerHTML = “<h1>” + “History length: “ + length + “</h1>”; } function pushData() { var statedata = document.getElementById (“statedata”).value; var containerObject = {container: statedata}; history.pushState(containerObject, “item”, read more..

  • Page - 134

    123 The pophistory.html Example Code <br> Pages to move by: <input id=”amount” type=”text”> <input type=”button” value=”Go” onclick=”go();”> <br> <br> <br> Text to push: <input id=”statedata” type=”text”> <input type=”button” value=”Push Data” onclick=”pushdata();”> <br> <div id=”length”></div> <br> <div id=”state”></div> read more..

  • Page - 135

    This page intentionally left blank read more..

  • Page - 136

    LESSON 7 Getting the Point Across with Messaging HTML5 lets you send messages in a cross-window or cross-domain way; we’ll see how that works in this lesson. Say, for example, that in page A, page B—which comes from the same directory on the server—appears in an <iframe> element. Now you can send text messages from page A to page B and make use of those mes- sages read more..

  • Page - 137

    126 LESSON 7: Getting the Point Across with Messaging FIGURE 7.2 Sending a cross-window message. FIGURE 7.1 The parent.html and child.html example. echoed by the second page in the <iframe>, as shown in Figure 7.2. This is a good example of cross-window messaging. The second example in this lesson will show how to use cross-domain messaging, where the windows are in different read more..

  • Page - 138

    127 Getting to Know the Messaging API FIGURE 7.4 Sending a cross-domain message. FIGURE 7.3 The domainparent.html and domainchild.html example. domainchild.html. The domainchild.html page echoes the message, as you can see in Figure 7.4. Let’s see some of the details behind this example now. Getting to Know the Messaging API You make messaging work behind the scenes with a scripting read more..

  • Page - 139

    128 LESSON 7: Getting the Point Across with Messaging Here are the scripting features you use with messaging: . postMessage() function . onMessage event . event.data attribute . event.origin attribute . event.source attribute We’ll take a closer look at these items now. postMessage() Supported browsers: Opera, Safari This function is the core of sending messages in HTML5, and you use it read more..

  • Page - 140

    129 Starting the parent.html Example The event object passed to the onMessage handler contains the informa- tion about the message you need—the data attribute contains the message’s text. event.origin Supported browsers: Opera, Safari The event.origin attribute contains the origin that the message was sent to. event.source Supported browsers: Opera, Safari The event.source attribute contains read more..

  • Page - 141

    130 LESSON 7: Getting the Point Across with Messaging accept the message to send, and a button connected to a function named send() to send the message. <!DOCTYPE html> <html> <head> <title> Cross-Window Messaging </title> </head> <body> <h1>Cross-Window Messaging</h1> <iframe id=”iframe” src=”child.html” height=”300” width=”600”> </iframe> <br> read more..

  • Page - 142

    131 Sending a Cross-Window Message <!DOCTYPE html> <html> <head> <title> Cross-Window Messaging </title> <script type=”text/javascript”> function send() { var message = document.getElementById(“message”).value; var location = window.location; var protocol = location.protocol; var host = location.host; . . . } </script> </head> <body> <h1>Cross-Window Messaging</h1> read more..

  • Page - 143

    132 LESSON 7: Getting the Point Across with Messaging function send() { var message = document.getElementById(“message”).value; var location = window.location; var protocol = location.protocol; var host = location.host; document.getElementById (“iframe”).contentWindow.postMessage (message, protocol + “//” + host); } </script> </head> <body> <h1>Cross-Window Messaging</h1> <iframe read more..

  • Page - 144

    133 Starting the child.html Example <!DOCTYPE html> <html> <head> <title> Child </title> </head> <body> </body> </html> 3. Add the following code to create a <div> element that we’ll use to display the text of the message we receive in child.html. <!DOCTYPE html> <html> <head> <title> Child </title> </head> <body> <div read more..

  • Page - 145

    134 LESSON 7: Getting the Point Across with Messaging Receiving a Cross-Window Message Now let’s enable child.html to receive and display the message sent to it by parent.html. To do that, follow these steps: 1. Open child.html using a text editor such as Windows WordPad. 2. Add the following code to connect the onMessage event to a function named loader(). <!DOCTYPE html> read more..

  • Page - 146

    135 The parent.html Example Code function loader(e) { document.getElementById (“messages”).innerHTML = e.data; } </script> </head> <body> <div id=”messages” style=”width:400px; height:250px”></div> </body> </html> 4. Save child.html. Make sure you save this code in text format (the default format for WordPad, for example, is RTF, rich-text for- mat, which won’t read more..

  • Page - 147

    136 LESSON 7: Getting the Point Across with Messaging document.getElementById (“iframe”).contentWindow.postMessage (message, protocol+”//”+host); } </script> </head> <body> <h1>Cross-Window Messaging</h1> <iframe id=”iframe” src=”child.html” height=”300” width=”600”> </iframe> <br> <br> Message to Send: <input id=”message” type=”text”> <input type=”button” read more..

  • Page - 148

    137 Starting the domainparent.html Example <body> <div id=”messages” style=”width:400px; height:250px”></div> </body> </html> Starting the domainparent.html Example Now we’ll see how cross-domain messaging works. To get started with the domainparent.html example, follow these steps: 1. Create domainparent.html using a text editor such as Windows WordPad. 2. Enter the read more..

  • Page - 149

    138 LESSON 7: Getting the Point Across with Messaging <!DOCTYPE html> <html> <head> <title> Cross-Domain Messaging </title> </head> <body> <h1>Cross-Domain Messaging</h1> <iframe id=”iframe” src=”http://www.domain.com/domainchild.html” height=”300” width=”600”> </iframe> <br> <br> Message to Send: <input id=”message” type=”text”> <input read more..

  • Page - 150

    139 Sending a Cross-Domain Message <title> Cross-Domain Messaging </title> <script type=”text/javascript”> function send() { . . . } </script> </head> <body> <h1>Cross-Domain Messaging</h1> <iframe id=”iframe” src=”http://www.domain.com/domainchild.html” height=”300” width=”600”> </iframe> <br> <br> Message to Send: <input id=”message” type=”text”> read more..

  • Page - 151

    140 LESSON 7: Getting the Point Across with Messaging document.getElementById(“message”).value; document.getElementById (“iframe”).contentWindow.postMessage (message, “*”); } </script> </head> <body> <h1>Cross-Domain Messaging</h1> <iframe id=”iframe” src=”http://www.domain.com/domainchild.html” height=”300” width=”600”> </iframe> <br> <br> Message to Send: <input read more..

  • Page - 152

    141 Starting the domainchild.html Example <!DOCTYPE html> <html> <head> <title> Child </title> </head> <body> . . . </body> </html> 3. Add the following code to create a <div> element that we’ll use to display the text of the message we receive in domainchild.html. <!DOCTYPE html> <html> <head> <title> Child </title> </head> read more..

  • Page - 153

    142 LESSON 7: Getting the Point Across with Messaging Receiving a Cross-Domain Message At this point, we’ll enable domainchild.html to receive the cross-domain message sent to it by domainparent.html. To do that, follow these steps: 1. Open domainchild.html using a text editor such as Windows WordPad. 2. Add the following code to connect the onMessage event to a function named read more..

  • Page - 154

    143 The domainparent.html Example Code <title> Child </title> <script type=”text/javascript”> window.addEventListener(“message”, loader, false); function loader(e) { document.getElementById (“messages”).innerHTML = e.data; } </script> </head> <body> <div id=”messages” style=”width:400px; height:250px”></div> </body> </html> 4. Save domainchild.html. Make sure you save read more..

  • Page - 155

    144 LESSON 7: Getting the Point Across with Messaging <head> <title> Cross-Domain Messaging </title> <script type=”text/javascript”> function send() { var message = document.getElementById(“message”).value; document.getElementById (“iframe”).contentWindow.postMessage (message, “*”); } </script> </head> <body> <h1>Cross-Domain Messaging</h1> <iframe id=”iframe” read more..

  • Page - 156

    145 The domainchild.html Example Code </title> <script type=”text/javascript”> window.addEventListener(“message”, loader, false); function loader(e) { document.getElementById (“messages”).innerHTML = e.data; } </script> </head> <body> <div id=”messages” style=”width:400px; height:250px”></div> </body> </html> read more..

  • Page - 157

    This page intentionally left blank read more..

  • Page - 158

    LESSON 8 Using Video and Audio HTML5 lets you play video with ease—just use the <video> element. Currently, however, most browsers that let you play video only play videos in .ogg format, a relatively obscure open-source format. Fortunately, you can convert videos from almost any format into .ogg format. In addition, some browsers enable you to use other video formats with read more..

  • Page - 159

    148 LESSON 8: Using Video and Audio FIGURE 8.1 The video.html example. Getting to Know the Video Element API The <video> element has a number of attributes; here are the details: Element: . <video> Attributes: . autoplay . controls . height . loop read more..

  • Page - 160

    149 Getting to Know the Video Element API . poster . preload . src . width . onerror Supported browsers: . Chrome, Opera, Firefox, Safari, Internet Explorer 9 You can read what the W3C has to say about the <video> element at www . w3.org/TR/html5/video.html. Let’s take a look at the attributes in overview next. The autoplay Attribute The autoplay attribute is a true/false read more..

  • Page - 161

    150 LESSON 8: Using Video and Audio The poster Attribute This attribute holds the URL of an image to display if no video is available. The preload Attribute The preload attribute controls whether the video is preloaded into the <video> element; it can take one of three values: . none—No preloading necessary. . metadata—Tells the browser that detecting metadata about the video read more..

  • Page - 162

    151 Converting to OGG Format FIGURE 8.2 The media-convert.com site. First, you might check if your browser supports your current format by specifying the URL of your video in the src attribute of a <video> ele- ment. As time goes on, more browsers will display more video formats. But if you find you have to stick with OGG format, it’s time to find a file convertor, read more..

  • Page - 163

    152 LESSON 8: Using Video and Audio 5. Select the format of your file in the Input Format box. There are many types to select from; for video formats, you can select and convert from these types: . 3GP/3G2 Video (.3g2,.3gp) . AMV Video Format (.amv) . Apple QuickTime (.mov) . ASF Video (.asf) . Audio Video Interleave (.avi) . Digital Video File (.dv) . DPG Video (.dpg) . read more..

  • Page - 164

    153 Starting the video.html Example Now that you have OGG files to work with, we can start on this lesson’s example, video.html. Starting the video.html Example To get started with the video.html example, follow these steps: 1. Create video.html using a text editor such as Windows WordPad. 2. Enter the following code: <!DOCTYPE html> <html> <head> <title> HTML 5 read more..

  • Page - 165

    154 LESSON 8: Using Video and Audio We’ve started video.html; now let’s make it do something. To add the <video> element to the video.html example, follow these steps: 1. Open video.html using a text editor such as Windows WordPad. 2. Enter the following code: <!DOCTYPE html> <html> <head> <title> HTML 5 Video </title> </head> <body> <h1>HTML 5 read more..

  • Page - 166

    155 Adding Controls to the video.html Example WordPad, for example, is RTF, rich-text format, which won’t work with browsers). That displays the video, but the only way to play it is to right-click it and select the Play item. In the next task, we’ll make it easier to play by dis- playing controls. Adding Controls to the video.html Example To add video controls to the read more..

  • Page - 167

    156 LESSON 8: Using Video and Audio Looping a Video You can make a video loop over and over; to do so follow these steps: 1. Open video.html using a text editor such as Windows WordPad. 2. Enter the following code: <!DOCTYPE html> <html> <head> <title> HTML 5 Video </title> </head> <body> <h1>HTML 5 Video</h1> <video controls height=”300” read more..

  • Page - 168

    157 Detecting When a Video Has Failed <head> <title> HTML 5 Video </title> </head> <body> <h1>HTML 5 Video</h1> <video controls height=”300” width=”400” autoplay src=”hawaii.ogg”> </video> </body> </html> 3. Save video.html. Make sure you save this code in text format (the default format for WordPad, for example, is RTF, rich-text for- mat, read more..

  • Page - 169

    158 LESSON 8: Using Video and Audio case e.target.error.MEDIA_ERR_ABORTED: alert(‘You aborted the playback.’); break; case e.target.error.MEDIA_ERR_NETWORK: alert(‘Network error.’); break; case e.target.error.MEDIA_ERR_DECODE: alert(‘Corruption problem.’); break; case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED: alert( ‘Format unsupported or file not found.’); break; default: alert(‘An unknown error occurred.’); read more..

  • Page - 170

    159 Detecting When a Video Has Failed case e.target.error.MEDIA_ERR_ABORTED: alert(‘You aborted the playback.’); break; case e.target.error.MEDIA_ERR_NETWORK: alert(‘Network error.’); break; case e.target.error.MEDIA_ERR_DECODE: alert(‘Corruption problem.’); break; case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED: alert( ‘Format unsupported or file not found.’); break; default: alert(‘An unknown error occurred.’); read more..

  • Page - 171

    160 LESSON 8: Using Video and Audio Welcome to the Audio Media Control Next, we’ll develop an example named audio.html, which you can see in Figure 8.4. If you want to play the audio, just click the Play button. As with the <video> element, most browsers let you play .ogg audio (other formats are coming). If you need to onvert to .ogg format, you can use read more..

  • Page - 172

    161 Getting to Know the Audio Element API . loop . preload . src . onerror Supported browsers: . Chrome. Opera, Safari, Firefox, Internet Explorer 9 You can read what the W3C has to say about the <audio> element at: http://www.w3.org/TR/html5/video.html#audio. We’ll take a look at the attributes in overview next. The autoplay Attribute As with the <video> element, the autoplay read more..

  • Page - 173

    162 LESSON 8: Using Video and Audio The src Attribute The src attribute holds the URL of the sound file you want to play. The onerror Attribute The <audio> element has an error event that occurs when there is a failure, as when the sound file is not found. Starting the audio.html Example To get started with the audio.html example, follow these steps: 1. Create audio.html read more..

  • Page - 174

    163 Starting the audio.html Example . . </body> </html> 4. Save audio.html. Make sure you save this code in text format (the default format for WordPad, for example, is RTF, rich-text for- mat, which won’t work with browsers). We’ve started audio.html. Now let’s make it do something. To add the <audio> element to the audio.html example, follow these steps: 1. Open read more..

  • Page - 175

    164 LESSON 8: Using Video and Audio <body> <h1>HTML 5 Audio</h1> <audio controls src=”hawaii.ogg”> </audio> </body> </html> 4. Save audio.html. Make sure you save this code in text format (the default format for WordPad, for example, is RTF, rich-text for- mat, which won’t work with browsers). There you have it—now the user can click the Play button read more..

  • Page - 176

    165 Detecting When an Audio Has Failed HTML 5 Audio </title> <script> function fail(e) { switch (e.target.error.code) { case e.target.error.MEDIA_ERR_ABORTED: alert(‘You aborted the playback.’); break; case e.target.error.MEDIA_ERR_NETWORK: alert(‘Network error.’); break; case e.target.error.MEDIA_ERR_DECODE: alert(‘Corruption problem.’); break; case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED: alert( ‘Format read more..

  • Page - 177

    166 LESSON 8: Using Video and Audio HTML 5 Audio </title> <script> function fail(e) { switch (e.target.error.code) { case e.target.error.MEDIA_ERR_ABORTED: alert(‘You aborted the playback.’); break; case e.target.error.MEDIA_ERR_NETWORK: alert(‘Network error.’); break; case e.target.error.MEDIA_ERR_DECODE: alert(‘Corruption problem.’); break; case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED: alert( ‘Format read more..

  • Page - 178

    LESSON 9 Web Storage One of the things that HTML authors have missed is some way of storing data between page accesses. When the page gets refreshed, all JavaScript variables get reset to their original values, for example. How can you store data that’s still there when the user comes back to your page? This is often why people start working with server-side code—to read more..

  • Page - 179

    168 LESSON 9: Web Storage FIGURE 9.2 Erasing data. FIGURE 9.1 The sessionstorage.html example. Then you can click the Get button to get the stored data from the session, as shown in Figure 9.3. In other words, the sessionstorage.html example shows you how to save and get data from the session, using only JavaScript. Note that to use this example, the browser must be talking to read more..

  • Page - 180

    169 Getting to Know the Session Storage API FIGURE 9.3 Getting data back again. Getting to Know the Session Storage API Session storage is based on the JavaScript object named sessionStorage, which comes built in to browsers that support this HTML5 feature. You can read about this object at: http://dev.w3.org/html5/webstorage/. Here are the details: Object: . sessionStorage Attributes: . read more..

  • Page - 181

    170 LESSON 9: Web Storage Supported browsers: . Firefox and Safari You store values in the sessionStorage object using key/value pairs—that is, when you store data, you specify both the data and the key (text like “data” or “phone”). When you read data back, you supply the key. Let’s take a look at the sessionStorage object’s attributes and functions now. The length read more..

  • Page - 182

    171 Starting the sessionstorage.html Example The removeItem() Function Here’s how you use this function: . removeItem(key) You use this function to remove items from the sessionStorage object. The clear() Function The clear() function clears all session data. Now let’s put all this to work in the sessionstorage.html example, where we store and then get data from the session. Starting read more..

  • Page - 183

    172 LESSON 9: Web Storage <!DOCTYPE html> <html> <head> <title> Web Storage </title> </head> <body> <h1>Session Storage</h1> Data <input id=”Data” type=”text”> <input type=”button” value=”Store”> <input type=”button” value=”Get”> <input type=”button” value=”Clear”> </body> </html> 4. Save sessionstorage.html. Make sure you save this read more..

  • Page - 184

    173 Storing Data in the Session Data <input id=”Data” type=”text”> <input type=”button” value=”Store” onclick=”sessionStore();”> <input type=”button” value=”Get”> <input type=”button” value=”Clear”> </body> </html> 3. Add the following code to read the text the user has entered and store it in the session. <!DOCTYPE html> <html> <head> <title> read more..

  • Page - 185

    174 LESSON 9: Web Storage Getting Data from the Session To get the stored data back from the session in the sessionstorage.html example, follow these steps: 1. Open sessionstorage.html using a text editor such as Windows WordPad. 2. Enter the following code to connect the Get button to JavaScript. <!DOCTYPE html> <html> <head> <title> Web Storage </title> <script read more..

  • Page - 186

    175 Clearing Session Data <script type=”text/javascript”> function sessionStore() { var text = document.getElementById (“Data”).value; sessionStorage.setItem(“Data”, text); } function sessionGet() { document.getElementById(“Data”).value = sessionStorage.getItem(“Data”); } </script> </head> <body> <h1>Session Storage</h1> Data <input id=”Data” type=”text”> <input type=”button” read more..

  • Page - 187

    176 LESSON 9: Web Storage <!DOCTYPE html> <html> <head> <title> Web Storage </title> <script type=”text/javascript”> function sessionStore() { var text = document.getElementById (“Data”).value; sessionStorage.setItem(“Data”, text); } function sessionGet() { document.getElementById(“Data”).value = sessionStorage.getItem(“Data”); } </script> </head> <body> <h1>Session read more..

  • Page - 188

    177 The sessionstorage.html Code document.getElementById (“Data”).value; sessionStorage.setItem(“Data”, text); } function sessionGet() { document.getElementById(“Data”).value = sessionStorage.getItem(“Data”); } function sessionClear() { sessionStorage.removeItem(“Data”); document.getElementById(“Data”).value = ””; } </script> </head> <body> <h1>Session Storage</h1> Data <input id=”Data” read more..

  • Page - 189

    178 LESSON 9: Web Storage <head> <title> Web Storage </title> <script type=”text/javascript”> function sessionStore() { var text = document.getElementById (“Data”).value; sessionStorage.setItem(“Data”, text); } function sessionGet() { document.getElementById(“Data”).value = sessionStorage.getItem(“Data”); } function sessionClear() { sessionStorage.removeItem(“Data”); document.getElementById(“Data”).value read more..

  • Page - 190

    179 Welcome to Local Storage As with the sessionstorage.html example, you can enter some text into the text field, as shown in Figure 9.4, and click the Store button to store that data in the browser. Then you can erase the data from the text field, as shown in Figure 9.5. Then you can click the Get button to get the stored data from the browser, as shown in Figure read more..

  • Page - 191

    180 LESSON 9: Web Storage FIGURE 9.6 Getting data back again. Getting to Know the Local Storage API You can also use local storage in the browser, which is good until the user closes the browser. That is, the user can come back to the same page over and over, and the data will still be available as long as the user hasn’t closed the browser. Local storage revolves read more..

  • Page - 192

    181 Starting the localstorage.html Example . removeItem() function . clear() function Supported Browsers: . Chrome, Firefox and Safari As with the sessionStorage object earlier in this lesson, you store values in the localStorage object using key/value pairs—that is, when you store data, you specify both the data and the key. When you read data back, you sup- ply the key. For the read more..

  • Page - 193

    182 LESSON 9: Web Storage 3. Add the following code to create the text field and the three buttons: <!DOCTYPE html> <html> <head> <title> Web Storage </title> </head> <body> <h1>Local Storage</h1> Data <input id=”Data” type=”text”> <input type=”button” value=”Store”> <input type=”button” value=”Get”> <input type=”button” value=”Clear”> read more..

  • Page - 194

    183 Storing Data in the Browser <body> <h1>Local Storage</h1> Data <input id=”Data” type=”text”> <input type=”button” value=”Store” onclick=”localStore();”> <input type=”button” value=”Get”> <input type=”button” value=”Clear”> </body> </html> 3. Add the following code to read the text the user has entered and store it in the browser. <!DOCTYPE read more..

  • Page - 195

    184 LESSON 9: Web Storage That stores the data the user has entered. Now how about getting it back from the browser? Getting Data from the Browser To get the stored data back from the browser in the localstorage.html example, follow these steps: 1. Open localstorage.html using a text editor such as Windows WordPad. 2. Enter the following code to connect the Get button to read more..

  • Page - 196

    185 Getting Data from the Browser <!DOCTYPE html> <html> <head> <title> Web Storage </title> <script type=”text/javascript”> function localStore() { var text = document.getElementById (“Data”).value; localStorage.setItem(“Data”, text); } function localGet() { document.getElementById(“Data”).value = localStorage.getItem(“Data”); } </script> </head> <body> <h1>Local read more..

  • Page - 197

    186 LESSON 9: Web Storage Clearing Local Data You can also clear the data in the browser by following these steps: 1. Open localstorage.html using a text editor such as Windows WordPad. 2. Enter the following code to connect the Clear button to JavaScript: <!DOCTYPE html> <html> <head> <title> Web Storage </title> <script type=”text/javascript”> function localStore() read more..

  • Page - 198

    187 Clearing Local Data 3. Add the following code to clear the local data: <!DOCTYPE html> <html> <head> <title> Web Storage </title> <script type=”text/javascript”> function localStore() { var text = document.getElementById (“Data”).value; localStorage.setItem(“Data”, text); } function localGet() { document.getElementById(“Data”).value = localStorage.getItem(“Data”); } function read more..

  • Page - 199

    188 LESSON 9: Web Storage 4. Save localstorage.html. Make sure you save this code in text for- mat (the default format for WordPad, for example, is RTF, rich- text format, which won’t work with browsers). That’s how to clear the data you’ve stored in the browser. The localstorage.html Code For reference, here is the full localstorage.html code: <!DOCTYPE html> <html> read more..

  • Page - 200

    189 The localstorage.html Code <input type=”button” value=”Store” onclick=”localStore();”> <input type=”button” value=”Get” onclick=”localGet();”> <input type=”button” value=”Clear” onclick=”localClear();”> </body> </html> read more..

  • Page - 201

    This page intentionally left blank read more..

  • Page - 202

    LESSON 10 The New HTML5 Elements HTML5 includes some new elements, and they’re the focus of this lesson. We’ve already covered some of these new elements in previous lessons, but there are many more, most having to do with document structure. Adding SVG and MathML Here’s something that might surprise you—HTML5 has taken two XML languages, SVG (Scalable Vector Graphics) and read more..

  • Page - 203

    192 LESSON 10: The New HTML5 Elements Only one browser supports MathML and HTML at this time—that’s the Amaya test browser from W3C, and you can get it at www.w3.org/ Amaya/. Welcome to the New Elements Here are the HTML elements that are new in HTML5: . <article> . <aside> . <audio> . <canvas> . <command> . <datalist> . <details> . <embed> read more..

  • Page - 204

    193 Welcome to the New Elements . <rt> . <ruby> . <section> . <source> . <summary> . <time> . <video> You can have a look at what W3C has to say about each of these elements at www.w3.org/TR/html5/spec.html#auto-toc-8. You should also take note that the following elements are dropped in HTML5: . <acronym> . <applet> . <basefont> . read more..

  • Page - 205

    194 LESSON 10: The New HTML5 Elements Let’s take a look at the new elements. The <article> Element The <article> element straddles an article, which is intended to be an inde- pendently distributable document, like an article in a magazine. Here are this element’s attributes: . accesskey . class . contenteditable . contextmenu . dir . draggable . hidden . id . lang . spellcheck read more..

  • Page - 206

    195 The <aside> Element <p> <time pubdate datetime=”2010-10-09T14:28-08:00”></time> </p> </header> <p>Current forecast is for bigtime rain.</p> <section> <h1>Comments</h1> <article> <footer> <p>Posted by: Sam Budd</p> <p><time pubdate datetime=”2010-10-10T19:10-08:00”> </time></p> </footer> <p>We need the rain.</p> read more..

  • Page - 207

    196 LESSON 10: The New HTML5 Elements . hidden . id . lang . spellcheck . style . tabindex . title The <audio> Element This element is covered in Lesson 8, “Using Video and Audio.” The <canvas> Element This element is covered in Lesson 2, “Drawing with the Canvas Element.” The <command> Element The <command> element can appear as a button, check box, or radio read more..

  • Page - 208

    197 The <command> Element . [hidden . [icon . [id . [label . [lang . radiogroup . spellcheck . style . tabindex . title . type The type attribute sets the type of control that will be displayed. When the type attribute is set to “command” keyword, the control displays a button; the check box keyword maps to the Checkbox state, and the radio keyword maps to the Radio read more..

  • Page - 209

    198 LESSON 10: The New HTML5 Elements The <datalist> Element The <datalist> element supplies <option> elements for other controls; you hook it up to <input> elements using the <input> elements’ list attribute. Here are the attributes of this element: . accesskey . class . contenteditable . contextmenu . dir . draggable . hidden . id . lang . spellcheck . style . tabindex . read more..

  • Page - 210

    199 The <embed> Element . draggable . hidden . id . lang . open . spellcheck . style . tabindex . title You store the actual details using <dt> (details title) and <dd> (details data elements). Here’s an example: <details> <summary>Ice Cream</summary> <dl> <dt>Flavor:</dt> <dd>Strawberry</dd> <dt>Name</dt> <dd>Big Red</dd> <dt>Contains read more..

  • Page - 211

    200 LESSON 10: The New HTML5 Elements . draggable . height . hidden . id . lang . spellcheck . src . style . tabindex . title . type . width The src attribute gives the URL of the resource you want to embed. The type attribute should be set to the MIME type of the resource. The <figcaption> Element The <figcaption> element contains a figure caption for a <figure> element; read more..

  • Page - 212

    201 The <figure> Element . id . lang . spellcheck . style . tabindex . title The <figure> Element The <figure> element lets you associate a figure caption with an image. Here are the attributes of this element: . accesskey . class . contenteditable . contextmenu . dir . draggable . hidden . id . lang . spellcheck . style . tabindex . title Here’s an example: <figure> read more..

  • Page - 213

    202 LESSON 10: The New HTML5 Elements <img src=”icecream.jpeg” alt=”Strawberry ice cream”> <figcaption>Strawberry ice cream</figcaption> </figure> The <footer> Element This element lets you display text in a footer for the most recent <section> element; here are the attributes of this element: . accesskey . class . contenteditable . contextmenu . dir . draggable . read more..

  • Page - 214

    203 The <header> Element . class . contenteditable . contextmenu . dir . draggable . hidden . id . lang . spellcheck . style . tabindex . title Here’s an example: <body> <header> <h1>Ice Cream</h1> <nav> <ul> <li><a href=”/strawberry”>Strawberry</a> <li><a href=”/chocolate”>Chocolate</a> <li><a href=”/vanilla”>Vanilla</a> </ul> read more..

  • Page - 215

    204 LESSON 10: The New HTML5 Elements The <hgroup> Element The <hgroup> element contains the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. Here are the attributes: . accesskey . class . contenteditable . contextmenu . dir . draggable . hidden . id . read more..

  • Page - 216

    205 The <mark> Element . challenge . class . contenteditable . contextmenu . dir . disabled . draggable . form . hidden . id . keytype . lang . name . spellcheck . style . tabindex . title The <mark> Element The <mark> element represents text in one document marked or highlight- ed for reference purposes because of its relevance in another context. Here are this element’s read more..

  • Page - 217

    206 LESSON 10: The New HTML5 Elements . dir . draggable . hidden . id . lang . spellcheck . style . tabindex . title Here’s an example: <p>The highlighted text below is the problem:</p> <pre><code> var x: Integer; begin x := <mark>’a’</mark>; end. </code></pre> The <meter> Element The <meter> element displays a gauge that indicates how complete a read more..

  • Page - 218

    207 The <nav> Element . hidden . high . id . lang . low . max . min . optimum . spellcheck . style . tabindex . title . value Here’s an example: <meter min=0 max=60 value=15 title=”Minutes”></meter> The <nav> Element The <nav> element contains navigation links; here are its attributes: . accesskey . class . contenteditable . contextmenu . dir . draggable . hidden read more..

  • Page - 219

    208 LESSON 10: The New HTML5 Elements . id . lang . spellcheck . style . tabindex . title And here’s an example: <body> <header> <nav> <h1>Ice Cream News</h1> <ul> <li><a href=”articles.html”>Index of all articles</a></li> <li><a href=”today.html”>Ice creeam issues today</a></li> <li><a href=”new.html”>New flavors</a></li> read more..

  • Page - 220

    209 The <progress> Element . for . form . hidden . id . lang . name . spellcheck . style . tabindex . title Here’s an example: <form onsubmit=”return false”> <input name=x type=number step=any> <br> + <br> <input name=y type=number step=any> <br> = <br> <output onforminput=”value = x.value + y.value”></output> </form> It’s not clear at this time how the read more..

  • Page - 221

    210 LESSON 10: The New HTML5 Elements . contenteditable . contextmenu . dir . draggable . form . hidden . id . lang . max . spellcheck . style . tabindex . title . value Here’s an example where you call a function named updateBar() to update the progress bar: <head> <title>The Progress Bar</title> <script> var bar = document.getElementById(‘pb’); function updateBar(new) { read more..

  • Page - 222

    211 The <rp> Element The <rp> Element The <rp> element is part of the <ruby> element, which displays annota- tions for text (for example, ruby text is sometimes used to display pronun- ciation aids). The <rp> element encloses its text in parentheses inside the ruby text. Here are the attributes of this element: . accesskey . class . contenteditable . contextmenu . dir . read more..

  • Page - 223

    212 LESSON 10: The New HTML5 Elements . contextmenu . dir . draggable . hidden . id . lang . spellcheck . style . tabindex . title The <ruby> Element Rubies display annotations, often pronunciation aids, next to the text they annotated. Here are the attributes of this element: . accesskey . class . contenteditable . contextmenu . dir . draggable . hidden . id . lang . spellcheck . read more..

  • Page - 224

    213 The <section> Element . tabindex . title The <section> Element The <section> element represents a section of a body of text—for exam- ple, it could represent a chapter in a longer document. The <section> ele- ment is typically used to break up the <article> element into smaller divi- sions. Here are this element’s attributes: . accesskey . class . contenteditable . contextmenu . read more..

  • Page - 225

    214 LESSON 10: The New HTML5 Elements The <source> Element The <source> element lets you specify multiple alternative media resources for media elements. In case one resource can’t be found, the next one can be searched for. Here are the attributes of this element: . accesskey . class . contenteditable . contextmenu . dir . draggable . hidden . id . lang . media . spellcheck read more..

  • Page - 226

    215 The <summary> Element The <summary> Element The <summary> element is a child element of the <details> element and provides a summary of the content of the <details> element. Here are the <summary> element’s attrib utes: . accesskey . class . contenteditable . contextmenu . dir . draggable . hidden . id . lang . spellcheck . style . tabindex . title The <time> Element read more..

  • Page - 227

    216 LESSON 10: The New HTML5 Elements . datetime . dir . draggable . hidden . id . lang . pubdate . spellcheck . style . tabindex . title And here is an example: <time datetime=”2010-10-09T14:28-08:00”></time> The <video> Element This element is covered in Lesson 8. read more..

  • Page - 228

    A accept attribute, 61 alt attribute, 61 Amaya test browser, 192 annotations (text) <rp> element, 211 <rt> element, 211-212 APIs (application programming interfaces), 14-15 <audio> element, 160-162 <canvas> element, 14-15 complex shapes, 16-17 images, 17-18 line styles, 15 rectangles, 16 shadows, 16 styling, 15 text, 17 transformations, 18 drag-and-drop, 37-40 form controls, 60-65 allowed read more..

  • Page - 229

    messaging data, 128-129 origin, 129 source, 129 <meter> element, 206-207 <nav> element, 207-208 <output> element, 208-209 <progress> element, 209-210 <rp> element, 211 <rt> element, 211-212 <ruby> element, 212-213 <section> element, 213 <source> element, 214 spellcheck, 80 <summary> element, 215 <time> element, 215-216 <video> element, 148-150 <audio> element API, read more..

  • Page - 230

    rectangles drawing, 20-21 functions, 16 specification, 13 text, 30-31 change events, 64 checkbox controls, 65 checked attribute, 61-63 child.html creating, 132-133 receiving messages, 134-135 clear() function, 171 clearRect() function, 16 clip() function, 16 closePath() function, 16, 22 color controls creating, 74-75 data types, 65 <command> element, 196-197 complex shapes, drawing, 16-17 contenteditable read more..

  • Page - 231

    creating, 72-73 data types, 65 dates, 65, 72-73 times, 65, 72-73 datetime control, 72-73 default controls, creating, 67-68 designmode attribute, 80 <details> element, 198-199 display sources, adding, 91-93 <div> elements drag and drop example, 36 inline editing example, 82 documents (editable) attributes, 79 contenteditable, 79-80 designmode, 80 spellcheck, 80 links, 88-90 making, 80 spell checking, read more..

  • Page - 232

    dropping elements allowing, 48-49 ending, 51 handling, 50 E editdiv.html example bolding, 83-85 code, 95-96 display sources, 91-93 <div> element, creating, 82 italicizing, 85-86 links, 88-90 underlining, 87-88 editiframe.html example buttons, adding, 98-100 code, 100-101 iframe, creating, 97-98 editing attributes, 79 contenteditable, 79-80 designmode, 80 spellcheck, 80 text, 8 bolding, 83-85 display sources, read more..

  • Page - 233

    <figure>, 201-202 <footer>, 202 <header>, 202-203 <hgroup>, 204 <keygen>, 204-205 listing of, 10-11, 192-193 <mark>, 205-206 <meter>, 206-207 <nav>, 207-208 <output>, 208-209 <progress>, 209-210 <rp>, 211 <rt>, 211-212 <ruby>, 212-213 <section>, 213 <source>, 214 <summary>, 215 <time>, 215-216 <video> API, 148-150 controls, read more..

  • Page - 234

    search, 75-76 text, 67-68 URL, 68-69 creating, 68-69 data types, 65 W3C specification, 57 webforms.html example code, 76-78 HTML table, creating, 66 webforms.php example, 78 formenctype attribute, 61 formmethod attribute, 61 formnovalidate attribute, 61 formtarget attribute, 61 Forward buttons, 110-112 forward() function, 105 functions <canvas> element complex shapes, 16-17 images, drawing, 17-18 rectangles, read more..

  • Page - 235

    popping data, 119-121 pushing data, 116-119 HTML5 new features audio/video support, 9 browser history, 8 Canvas, 6 dragging and dropping, 7 elements, 10-11 form controls, 7 interdocument messaging, 8 text editing, 8 web storage, 9 overview, 6 W3C specification, 6 HTML tables, creating, 66 I iframe, creating, 98-100 images controls, 65 drawing, 17-18 inline editing attributes, 79 contenteditable, 79-80 read more..

  • Page - 236

    loop attribute <audio> element, 161 <video> element, 149 looping video, 156 M <mark> element, 205-206 MathML, 192 max attribute, 62 maxlength attribute, 62 measureText() function, 17 messaging, 8 API, 127-129 data attribute, 128-129 onMessage() function, 128 origin attribute, 129 postMessage() function, 128 source attribute, 129 cross-domain, 126-127 domainchild.html, 140- 141, 144-145 read more..

  • Page - 237

    dragging and dropping, 7 elements, 10-11 interdocument messaging, 8 text editing, 8 web storage, 9 number controls creating, 70-71 data types, 65 O objects dataTransfer, 40 history API, 104-106 back buttons, 107-110 back() function, 105 data, pushing, 116-119 forward buttons, 110-112 forward() function, 105 go() function, 105, 112- 114 length, 114-116 length attribute, 105 onpopstate events, 106 overview, read more..

  • Page - 238

    recommendations (W3C), 6 rectangles, drawing examples, 20-21 functions, 16 rect() function, 17 removeItem() function, 171 replaceState() function, 106 required attribute, 62 reset controls, 65 rotate() function, 18 <rp> element, 211 <rt> element, 211-212 <ruby> element, 212-213 S Scalable Vector Graphics (SVG), 191 scale() function, 18 search controls creating, 75-76 data types, 65 <section> read more..

  • Page - 239

    data retrieval, 184-185 localstorage.html example, 181-182, 188-189 storing data, 182-183 W3C website, 180 session, 167-168 API, 169-188 browser support, 170 clearing data, 175-177 data retrieval, 174-175 erasing data, 167-168 restoring data, 168-169 storing data, 172-173 web, 9 stroke() function, 17 strokeRect() function, 16, 20 strokeStyle attribute, 15, 22 strokeText() function, 17, 30 styling read more..

  • Page - 240

    <video> element API, 148-150 browser support, 149 controls, adding, 155 error handling, 157-159 looping, 156 OGG conversions, 150-152 playing automatically, 156-157 support, 9 video.html example body, 153 <video> element, adding, 154-155 W3C website, 149 W-Z W3C (World Wide Web Consortium), 5 Amaya test browser, 192 <audio> element, 161 new elements, 193 recommendations, 6 specifications read more..

  • Page - 241

    Your purchase of Sams Teach Yourself HTML5 in 10 Minutes includes access to a free online edition for 45 days through the Safari Books Online subscription service. Nearly every Sams book is available online through Safari Books Online, along with more than 5,000 other technical books and videos from publishers such as Addison-Wesley read more..

Write Your Review