Free Download PDF Books, HTML5 Foundations – PDF Books

HTML5 Foundations – PDF Books

HTML HTML5 ReadOnline

Summary of Contents

  • Page 1

    actionURI(http://www.it-ebooks.info/):www.it-ebooks.infotreehouseHTML5FoundationsMatt Westnf1BO5

  • Page 2

    actionURI(http://www.it-ebooks.info/):www.it-ebooks.info

  • Page 3

    A John Wiley and Sons, Ltd, PublicationHTML5 FoundationsMatt WestactionURI(http://www.it-ebooks.info/):www.it-ebooks.info

  • Page 4

    This edition first published 2013© 2013 Matthew WestRegistered officeJohn Wiley & Sons Ltd, The Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, United Kingdom For details of our global editorial offices, for customer services and for information about how to apply for permission to...

  • Page 5

    About the AuthorMATT WEST is a developer and entrepreneur who has a keen fascination with exploring new ways that technology can be used to make our lives simpler. Currently residing just outside Northampton, England, Matt fell into web development after getting involved in a number of open-sourc...

  • Page 6

    Some of the people who helped bring this book to market include the following:Editorial and ProductionVP Consumer and Technology Publishing Director: Michelle LeeteAssociate Director–Book Content Management: Martin TribeAssociate Publisher: Chris WebbAssistant Editor: Ellie ScottDevelopment Edi...

  • Page 7

    For my father.actionURI(http://www.it-ebooks.info/):www.it-ebooks.info

  • Page 8

    AcknowledgmentsThere may be a single name on the cover of this book, but if the past six months has taught me anything, it is that writing a book is truly a team effort. I am forever grateful for the support and guidance given by so many throughout this process.To Sara Shlaer, for her solid feedb...

  • Page 9

    viiT ABLE OF CONTENTSContentsIntroduction  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  1p 23,art 1: Creating 23,Web Pages with HTML5 25,chapter one 25,Getting Started with HTML5 25,  . . . . . ...

  • Page 10

    HTML5 FO UND A TIONS viii 49,Adding a <div> Element 49,to Each Template 49, 49,................................ 49,31 51,Adding a <header> Element to Each Template 51, 51,............................. 51,33 53,Adding a <nav> Element 53,to Each Template 53, 53,...........

  • Page 11

    ix 91,chapter four 91,Creating the Web Pages 91,. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  91,73 91,Adding Content to the Home 91,Page 91, 91,............................................ 91,73 92,Completing the Main Feature wit...

  • Page 12

    HTML5 FO UND A TIONS x 133,Adding the Form Fields to 133,the Bookings Page with <input> 133,and <label> Elements 133, 133,...115 137,Input Attributes 137, 137,.........................................................119 137,Naming Inputs 137, 137,................................

  • Page 13

    xiT ABLE OF CONTENTS 164,URLs 164, 164,..................................................................146 165,Search 165, 165,.................................................................147 165,Ranges 165, 165,.................................................................147 166,...

  • Page 14

    190,Commonly Used Schemas 190, 190,...................................................172 190,LocalBusiness 190, 190,...........................................................172 193,Using Microdata in 193,Your Restaurant Website 193, 193,.............................175 198,Events 198, ...

  • Page 15

    xiiiT ABLE OF CONTENTS 232,JavaScript Basics 232, 232,...........................................................214 233,A Simple Program 233, 233,.......................................................215 234,Variables 234, 234,.................................................................

  • Page 16

    HTML5 FO UND A TIONSxiv 265,Creating Custom Controls Using 265,JavaScript 265, 265,...................................247 267,Creating the Play Button 267, 267,.................................................249 269,Creating the Pause Button 269, 269,.........................................

  • Page 17

    xvT ABLE OF CONTENTSp 301,art 4: Advanced HTML5 301,Technologies 303,chapter thirteen 303,Using Geolocation 303,  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  303,285 304,Getting the User’s Location 304, 304,...........

  • Page 18

    xviHTML5 FO UND A TIONS 357,appendix 357,b 357,HTML Elements Index 357,  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  357,339 373,appendix 373,c 373,Where to Go from Here 373,. . . . . . . . . . . . . . . . . . ....

  • Page 19

    IntroductionSOMETIMES IT’S DIFFICULT to remember a time before the World Wide Web. A time before we could find information about anything we desired by simply typing a few words into a search box on our computers, and these days even our mobile phones. The web has come a long way since its humb...

  • Page 20

    HTML5 FO UND A TIONS2If you already have some knowledge of web design, you will still find the content useful; after all, a lot has changed in HTML5. Some explanations in the early chapters may be a little more verbose than you require at times, so feel free to skip ahead if you find yourself rea...

  • Page 21

    INTR ODUCTION3That’s a lot of content for you to cover, and so throughout the book you will be applying all your newfound knowledge in creating a real-world website for a fast-food chain, “Joe’s Pizza Co.” The final product will be a fully functional HTML5 website complete with promotiona...

  • Page 22

    HTML5 FO UND A TIONS4Video icon in the margin and a link to the relevant video. Viewing all the videos and complet-ing badges is a good way of testing what you have learned in the book (and of showing off your new skills to others).If you ever get stuck on a concept in the book, Treehouse has a g...

  • Page 23

    part 1Creating Web Pages with HTML5chapter one Getting Started with HTML5 chapter two Structuring a Web Pagechapter three Creating the Page Templateschapter four Creating the Web PagesactionURI(http://www.it-ebooks.info/):www.it-ebooks.info

  • Page 24

    actionURI(http://www.it-ebooks.info/):www.it-ebooks.info

  • Page 25

    7SO YOU’RE EAGER to start building a website? By the end of this chapter, you will have done just that!You start by getting your computer primed for building websites. That means you’re going to install a text editor and a lot of web browsers. I take you on a brief tour through some of the mo...

  • Page 26

    HTML5 FO UND A TIONS8A web page is made up of lots of content—text, images, even videos. Each of these pieces of content is marked up using HTML syntax (a collection of words and symbols that can be understood by computer programs). HTML is also used to describe the structure of the page, defin...

  • Page 27

    CHAPTER ONE GE TTING S T AR TED WI TH H TML59Google ChromeGoogle’s web browser, Chrome, is known for being both fast and secure. It also boasts great sup-port for the latest HTML5 and CSS3 technologies. Chrome has some great developer tools that you will be using later in this book to interact ...

  • Page 28

    HTML5 FO UND A TIONS10Text EditorsYour text editor is your faithful sidekick. You will use it to write all your HTML, CSS, and JavaScript code. A good text editor can actually make you more productive and help you to quickly identify any errors that you may make while coding. In this section, I l...

  • Page 29

    CHAPTER ONE GE TTING S T AR TED WI TH H TML511• Notepad++ is a popular text editor for Windows developers, and the best bit is that it is completely free (as in beer). It supports many different programming languages, including the ones that you will be using in this book. Download Notepad++ at...

  • Page 30

    HTML5 FO UND A TIONS12Figure 1-2 Inspecting a web page using the Chrome developer tools. You can change the location of the Firebug tools panel by clicking the Firebug icon in the top-left corner and selecting an option from the Firebug UI Location menu.• Dragonfly for Opera—Opera’s Dragonf...

  • Page 31

    CHAPTER ONE GE TTING S T AR TED WI TH H TML513you use Safari on Windows, you may need to display the menu bar by clicking the cog in the top-right corner and selecting Show menu bar. You can access all of Safari’s developer tools, including Web Inspector, from the Developer drop-down menu. Safa...

  • Page 32

    HTML5 FO UND A TIONS14 2. Type the following code in your index.html file. (This code can also be downloaded from the book’s companion website.)<!DOCTYPE html><html><head> <title>My First Web Page</title></head><body> <p>Hello World</p><...

  • Page 33

    CHAPTER ONE GE TTING S T AR TED WI TH H TML515Those elements in turn contain some other elements, such as a <title> and a <p> (for paragraph) element. You learn more about each of those shortly. In most cases, an element is made up of two tags, a start tag and an end tag. You may plac...

  • Page 34

    HTML5 FO UND A TIONS16These lines indicate the start and end of the <html> element. The <html> element is the root of an HTML document. This means that it should contain all your HTML code. The only code that should not be placed within this element is the DOCTYPE declaration (see sid...

  • Page 35

    CHAPTER ONE GE TTING S T AR TED WI TH H TML517 1. Open your index.html file in your text editor. 2. Now add the lang attribute to the <html> start tag and set its value to en.<html lang=”en”> 3. Save the index.html file.You can find a full list of two-character language codes unde...

  • Page 36

    HTML5 FO UND A TIONS18Now if you open the index.html file in your web browser, you should see that the page title has changed. This is displayed either at the top of the browser or in the browser tab, depend-ing on which browser you are using.The <body> ElementAfter the <head> element...

  • Page 37

    CHAPTER ONE GE TTING S T AR TED WI TH H TML519Figure 1-4 Your web page with the new text you just added.In this section, you learned how to create the underlying structure of a web page; however, none of these elements really controls the physical layout of the page. In Chapter 2, you learn about...

  • Page 38

    HTML5 FO UND A TIONS20Validating Your Web PageValidating your web pages allows you to be sure that your code is standards-compliant. This means that the code that you write follows the best practices and guidelines outlined in the relevant web standards.Why Should You Validate?Although validation...

  • Page 39

    CHAPTER ONE GE TTING S T AR TED WI TH H TML521• Best practices—Valid code follows a set of best practices that have been designed by working groups, and so by learning to write valid code you are also learning the best practices for building web pages. This is especially important for people ...

  • Page 40

    HTML5 FO UND A TIONS22 3. Copy and paste your code into the text box. 4. Click Check.You should now see that your code passed validation as HTML5 (see Figure 1-5). Congratulations!Figure 1-5 Your web page passed validation as HTML5.Does Your Code Always Have to Validate?Validation is a great tool...

  • Page 41

    CHAPTER ONE GE TTING S T AR TED WI TH H TML523All Browsers Are Not Created EqualIn an ideal world, you would be able to code a website and have it behave the same in all web browsers. Sadly, this is not the case. Cross-browser compatibility is an issue that all web developers have to tackle regul...

  • Page 42

    HTML5 FO UND A TIONS24Even though some of your users may not be able to use the latest features of HTML5, you should not be scared of using those features in your websites. As long as the core functional-ity of your website will work in older browsers, you will be fine. As you progress through th...

  • Page 43

    25CHAPTER 1 EXPLAINED how to use elements and attributes to create a simple web page. As you progress through this chapter, you will learn about a number of ele-ments used to create web page layouts, including the <header>, <footer>, and <section> elements.You will also start wo...

  • Page 44

    HTML5 FO UND A TIONS26Now that you have learned how to add the page elements (<html>, <head>, and <body>) from Chapter 1, it’s time to consider the sections that will make up the visible layout of your pages. When you create page layouts, you need a logical structure similar t...

  • Page 45

    CHAPTER T W O S TR UCTURING A WEB P A GE27HTML5 includes a series of new elements that you can use to define each section. Some of these elements have semantic meaning, which can help to make your code easier to under-stand and help computer programs to identify the purpose of the content found w...

  • Page 46

    HTML5 FO UND A TIONS28key elements, such as the navigation, content, and logo. In this section, you create a few quick wireframes for the home and content page templates.All your web pages will have five common elements: a header, logo, navigation, main content area, and footer. You can use these...

  • Page 47

    CHAPTER T W O S TR UCTURING A WEB P A GE29Figure 2-3 Wireframe of the content page layout.Creating the Template FilesNow that you have a rough plan for how the page will look, it’s time to create the template files. Remember, you need two templates for your website: a home page template and a c...

  • Page 48

    HTML5 FO UND A TIONS30 3. Add the following code to this file. <!DOCTYPE html><html lang=”en”><head> <title>Joe’s Pizza Co. - New York’s Best Pizza</title></head><body></body></html> 4. Save the file.Creating the Content Page Template...

  • Page 49

    CHAPTER T W O S TR UCTURING A WEB P A GE31Adding a <div> Element to Each TemplateThe <div> element (short for document divisions) has historically been the most commonly used element for defining the sections of an HTML document, but with HTML5 it no longer plays such a big role. Best...

  • Page 50

    HTML5 FO UND A TIONS32To make sure that your new <div> element is, in fact, showing up correctly, you can use your browser’s developer tools. 1. Open the index.html file in the web browser that has the developer tools you like to use. (If you don’t have a favorite, I recommend Chrome.) ...

  • Page 51

    CHAPTER T W O S TR UCTURING A WEB P A GE33Adding a <header> Element to Each TemplateAlmost all web pages have a header section of some description. This section often contains information such as a company logo, slogan, and site navigation links. HTML5 introduces a new <header> elemen...

  • Page 52

    HTML5 FO UND A TIONS34Figure 2-5 Inspecting the <header> element with the Chrome developer tools.In your wireframes, your header contained two other elements: a logo and some navigation. You will look at adding the navigation in a moment, but first let’s focus on the logo. For the logo, y...

  • Page 53

    CHAPTER T W O S TR UCTURING A WEB P A GE35 </header></div> 3. Save the files.I have added some dummy text so that the element can be more easily identified when you view the templates in your browser. Figure 2-6 shows the rendered index.html file with the new logo <div>.Figure ...

  • Page 54

    HTML5 FO UND A TIONS36 1. Open the index.html and about.html files in your text editor. 2. Add a new <nav> element under the logo, as shown in the following code.<div id=”container”> <!-- Header --> <header> <!-- Logo --> <div id=”logo”>Logo<...

  • Page 55

    CHAPTER T W O S TR UCTURING A WEB P A GE37The code for this exercise can be found in folder 6. 1. Open the index.html and about.html files in your text editor. 2. Create a new <div> element below the <header> in your templates.<div id=”container”> <!-- Header --> &...

  • Page 56

    HTML5 FO UND A TIONS38The ellipsis within the <header> element is used to signify that there is content within the element. I want to keep these code extracts as concise as possible, so using this enables me to avoid repeating the entire code in each successive example.Up until this point, ...

  • Page 57

    CHAPTER T W O S TR UCTURING A WEB P A GE39Figure 2-9 The content page template with the new page text section.Adding <section> Elements to the Home Page TemplateThe home page layout is a little more complex because it has three separate content sections: one for a main feature banner, one f...

  • Page 58

    HTML5 FO UND A TIONS40 4. Finally, add a third <section> element with the ID of offers.<!-- Main Content --><div> <!-- Feature --> <section id=”feature”>...</section> <!-- Home Text --> <section id=”home-text”>...</section> <!-...

  • Page 59

    CHAPTER T W O S TR UCTURING A WEB P A GE41Here you have given each of these new elements an ID so that they can be easily selected for styling with CSS. Adding a <footer> Element to Each TemplateAnother new element in HTML5 is the <footer> element. This element typically contains cont...

  • Page 60

    HTML5 FO UND A TIONS42Figure 2-12 The content page template.The last element that you are going to look at is the <article> element. You will be using this in your website—but not just yet.Using the <article> ElementThe new <article> element is used to represent a self-contain...

  • Page 61

    CHAPTER T W O S TR UCTURING A WEB P A GE43An RSS feed is a standardized format used to distribute frequently updated content such as blog posts or news headlines. Computer programs such as Google Reader or the popular app Reeder can read these feeds, enabling users of these programs to be kept up...

  • Page 62

    HTML5 FO UND A TIONS44 1. Open the index.html file in your text editor. 2. Add the following <meta> elements to the <head>. They should be placed below the <title> element.<head> <title>...</title> <meta name=”description” content=”Joe’s Pi...

  • Page 63

    CHAPTER T W O S TR UCTURING A WEB P A GE45Notice how keywords are separated by commas but do not have spaces after the commas. Defining the Character EncodingA principal use of the <meta> element is to define the character encoding of the page. Like the DOCTYPE, this element has been grea...

  • Page 64

    HTML5 FO UND A TIONS46section { font-size: 14px; color: #CC0000;}This code is an example of a CSS style rule that sets the size of all text within <section> elements to 14 pixels and colors it red. The first part of a CSS rule selects the elements that the style should be applied to, an...

  • Page 65

    CHAPTER T W O S TR UCTURING A WEB P A GE47Once you have your CSS code in its own stylesheet file, you need to link it to your web page so that the browser knows how to find it. You do this using the <link> element.<link rel=”stylesheet” href=”style.css”>The link element uses t...

  • Page 66

    HTML5 FO UND A TIONS48Now open the page templates in your web browser; you should see that there has been quite a transformation. It’s just like magic!Figures 2-13 and 2-14 show how your page templates should look with the new CSS styling.Figure 2-13 The home page template, with CSS.Pizza image...

  • Page 67

    CHAPTER T W O S TR UCTURING A WEB P A GE49Figure 2-14 The content page template, with CSS.Figure 2-15 A sample directory structure.actionURI(http://www.it-ebooks.info/):www.it-ebooks.info

  • Page 68

    HTML5 FO UND A TIONS50Relative paths refer to the location of the desired file relative to the location of the current page. For example, if your stylesheet is contained within a folder named css that is in the same folder as the current HTML document, you could use the following path to link to ...

  • Page 69

    CHAPTER T W O S TR UCTURING A WEB P A GE51HTML documents include a lot of information that is not directly presented to the user. You learned how to use the <meta> element to embed information within your web pages that can be used by web browsers, search engines, and other computer program...

  • Page 70

    actionURI(http://www.it-ebooks.info/):www.it-ebooks.info

  • Page 71

    53IN THIS CHAPTER, you are going to continue to work on the page templates that you have been creating in Chapters 1 and 2. You will learn about several new HTML elements, such as heading elements, links, and lists. Once you are comfortable with these new elements, you will use them to complete y...

  • Page 72

    HTML5 FO UND A TIONS54<h1>Venture Deals</h1><h2>Be Smarter Than Your Lawyer and Venture Capitalist</h2>You use the <h1> element for the main title of the book and the <h2> element for the sub-title, signifying their respective importance.Headings also create im...

  • Page 73

    CHAPTER THREE CREA TING THE P A GE TEMPLA TES55Figure 3-1 Page hierarchy.Where is the code that tells the browser to use a larger font for the <h1> elements and a smaller font for the <h2> elements? It’s in the Cascading Style Sheet (CSS)! Web browsers include a default set of basic...

  • Page 74

    HTML5 FO UND A TIONS56 3. Replace the dummy text inside the <div> with a new <h1> heading element that contains the text Joe’s Pizza Co. (including the period). Your logo <div> should now look like the following: <div id=”logo”> <h1>Joe’s Pizza Co.<...

  • Page 75

    CHAPTER THREE CREA TING THE P A GE TEMPLA TES57Adding NavigationOkay great, so now you have the logo sorted. It’s time to create the navigation so that users can easily flow between the different pages in your website. Without good navigation, your users won’t make it past the home page.Befor...

  • Page 76

    HTML5 FO UND A TIONS58that you would like to link to and then place that same ID (prefixed with a # sign) in the href attribute of your link, as in the following example.<h1 id=”hello”>Hello World</h1><p> ...</p><h2>Goodbye World</h2><p> ...</p&g...

  • Page 77

    CHAPTER THREE CREA TING THE P A GE TEMPLA TES59The rel AttributeThe rel attribute is used for defining the relationship of the current page to the page that is being linked to. For example, rel=”author” indicates that the linked page includes infor-mation about the author of the current page....

  • Page 78

    HTML5 FO UND A TIONS60<a href=”http://google.com” ping=”http://example.com/click/google”> Google</a>The ping attribute is also a new addition in HTML5 and therefore browser support for this attribute is currently limited.Link TypesYou can use a number of different link types ...

  • Page 79

    CHAPTER THREE CREA TING THE P A GE TEMPLA TES61Hyperlinks can have multiple link types, separated by spaces.Here are a few examples of <a> elements that use some of these link types.<a href=”http://myblog.example.com” rel=”nofollow”>Ben’s Blog</a><a href=”help.htm...

  • Page 80

    HTML5 FO UND A TIONS62Figure 3-3 An unordered list.Ordered ListsUnlike unordered lists, ordered lists require that their list items be displayed in a certain order. Modifying the order could greatly change the meaning of the list. For example, the steps in a recipe should follow a certain order; ...

  • Page 81

    CHAPTER THREE CREA TING THE P A GE TEMPLA TES63 Flip the pancake over and cook the other side for about 10 seconds. </li> <li> Serve the pancake with sugar and lemon. </li></ol>This example shows the steps for making pancakes. As these steps need to be complete...

  • Page 82

    HTML5 FO UND A TIONS64 3. Within this <nav> element, create a new <ul> element:<nav> <ul> </ul></nav> 4. Next you need to add links to each page in your website. First create a new <li> ele-ment within the <ul> element for each of your pages, excl...

  • Page 83

    CHAPTER THREE CREA TING THE P A GE TEMPLA TES65 10. Save the index.html file. 11. Copy the navigation that you just created into your about.html. 12. Move the class attribute that will apply the active styling to the about link. 13. Save the about.html file.Here is how your navigation should look...

  • Page 84

    HTML5 FO UND A TIONS66Figure 3-5 shows how your new navigation should look in your browser, with the links at the top right of the page. Notice that the Home link is a different color from the others, as it has the active class applied to it.Figure 3-5 Navigation links.Pizza image reproduced by p...

  • Page 85

    CHAPTER THREE CREA TING THE P A GE TEMPLA TES67The <small> PrintThe purpose of the <small> element has changed in HTML5. Previously, the element was used for presentational purposes (it made text smaller); however, it is now used to define short side comments such as legal disclaimers...

  • Page 86

    HTML5 FO UND A TIONS68 7. Save the index.html. 8. Copy the contents of the <footer> element into the about.html file. 9. Save the about.html file.The following code shows how your <footer> element should now look.<footer> <small>&copy; 2012 Joe’s Pizza Co. All Right...

  • Page 87

    CHAPTER THREE CREA TING THE P A GE TEMPLA TES69Global AttributesIn addition to the specialized attributes that you have looked at so far, every HTML element has a set of attributes that can be applied to it. These are known as global attributes.In this section, you learn about the global attribut...

  • Page 88

    HTML5 FO UND A TIONS70<ol> <li>one</li> <li class=”even”>two</li> <li>three</li> <li class=”even”>four</li> <li>five</li></ol>In this example, you have added the class even to alternate list items. This means tha...

  • Page 89

    CHAPTER THREE CREA TING THE P A GE TEMPLA TES71Figure 3-7 A tooltip displaying the value of the title attribute.It may sound obvious, but remember that these tooltips will not work on mobile devices. The lang AttributeYou encountered the lang attribute in Chapter 1, where you used it on the <...

  • Page 90

    HTML5 FO UND A TIONS72Hyperlinks make up the backbone of the web. In this chapter, you learned how you can add links to your web pages that navigate to both external web pages and sections within the cur-rent web page.You have also been introduced to HTML lists and learned the difference between ...

  • Page 91

    73IN CHAPTER 3, you focused on finishing off the page templates. Now you are going to put these page templates to use to create each of the pages for your website.You are going to learn about several new HTML elements as you progress through this chapter. You will build on what you learned about ...

  • Page 92

    HTML5 FO UND A TIONS74Completing the Main Feature with Headings and <hgroup>The <hgroup> element is used in instances where you need to group multiple levels of head-ing elements. You could use the <hgroup> element to group together the main title and subtitle of a book.<hgr...

  • Page 93

    CHAPTER FOUR CREA TING THE WEB P A GES75The code for your main feature section should look like this:<!-- Feature --><section id=”feature”> <hgroup> <h1>New York’s Best Pizza</h1> <h2>joe’s pepperoni special</h2> </hgroup></sectio...

  • Page 94

    HTML5 FO UND A TIONS76ParagraphsYou got a brief introduction to the <p> element in Chapter 1. The paragraph element is used to group text in the same way that you would use paragraphs in normal writing. Most brows-ers will apply some default styling to <p> elements to add a margin abo...

  • Page 95

    CHAPTER FOUR CREA TING THE WEB P A GES77<p> Please take a look at the <a href=”locations.html”>Locations</a> page for more information about where you can find our fantastic restaurants.</p> 7. Save the index.html file.Your code for the home text section should now lo...

  • Page 96

    HTML5 FO UND A TIONS78Figure 4-2 The home page with the new text content.Pizza image reproduced by permission of William RogersAdding the Special OffersThe final section on the home page is the special offers. In this section, you are going to call on what you learned about HTML lists in Chapter ...

  • Page 97

    CHAPTER FOUR CREA TING THE WEB P A GES79 6. Create a <li> element for the second offer and add to it the offer text: 20% Off Joe’s Pepperoni Special with the promo code NYBESTPIZZA. 7. Save the index.html file.Your code should look like this:<!-- Special Offers --><section id=”...

  • Page 98

    HTML5 FO UND A TIONS80Adding Content to the About PageThe About page will contain mainly text content, but even text can be marked up using spe-cial HTML elements in order to provide greater semantic meaning to computer programs. In this section, you first learn how to mark up quotations and abbr...

  • Page 99

    CHAPTER FOUR CREA TING THE WEB P A GES81The <abbr> element can be used to identify abbreviations within your text content. You can also optionally use the title attribute to define the full text version of an abbreviation. Most browsers will display this full text version to a user if she h...

  • Page 100

    HTML5 FO UND A TIONS82Our founder Joe Balochio has always said <q>”A great pizza starts with selecting quality, fresh ingredients from local suppliers.”</q> This belief is embodied in the company and the pizzas that you will eat in our restaurants will never contain any poor quali...

  • Page 101

    CHAPTER FOUR CREA TING THE WEB P A GES83Figure 4-4 The About page.Creating the Locations PageJoe’s Pizza Co. has three restaurant locations throughout New York. The Locations page will include the address, phone number, opening hours, and a map for each restaurant. All this information will be ...

  • Page 102

    HTML5 FO UND A TIONS84Here we have defined an <img> element with a path to an image file and a text description of the image. Figure 4-5 shows how this image would be displayed in a web browser.Figure 4-5 A simple image displayed in Google Chrome.Pizza image reproduced by permission of iSto...

  • Page 103

    CHAPTER FOUR CREA TING THE WEB P A GES85The code for this exercise can be found in folder 5. Follow these instructions: 1. First, download the following map images that you will be using in this section: map1.png, map2.png, and map3.png. These can be found in the img folder in folder 5. Place th...

  • Page 104

    HTML5 FO UND A TIONS86 9. Underneath this, add the following code for restaurant location number 2.<section id=”location2”> <h1>2450 Broadway, NY</h1> <img src=”img/map2.png” alt=”Joe’s Pizza at 2450 Broadway, NY”> <p class=”location-phone”>...

  • Page 105

    CHAPTER FOUR CREA TING THE WEB P A GES87Figure 4-6 The Locations page.Map data 2012 © GoogleFollow these instructions to create the Sitemap page: 1. First, create a new sitemap.html file in your project folder. 2. Open the about.html file and copy its contents into your new sitemap.html file. 3....

  • Page 106

    HTML5 FO UND A TIONS88 11. Set the href attributes on these links to point to the relevant HTML file: index.html, about.html, news.html, menu.html, locations.html, and sitemap.html. 12. Set the title attribute on these links to contain a description of the page you are linking to. You can use the...

  • Page 107

    CHAPTER FOUR CREA TING THE WEB P A GES89 title=”Links to all the pages on this website “> Sitemap </a> </li> </ul></section>Figure 4-7 shows how the Sitemap page should look in your web browser.Figure 4-7 The Sitemap page.Creating the Menu Pa...

  • Page 108

    HTML5 FO UND A TIONS90Introducing TablesIf you have a lot of tabular data to present to your users, you can use the HTML <table> element. Table rows can be defined using the <tr> element and cells using the <td> ele-ment. Column headings are defined using the <th> element ...

  • Page 109

    CHAPTER FOUR CREA TING THE WEB P A GES91Table Cell AttributesBoth <td> and <th> elements have a number of attributes that can be used to help format them. One example is the colspan (column span) attribute. Use the colspan attribute in instances where you need a particular table cell ...

  • Page 110

    HTML5 FO UND A TIONS92Figure 4-9 A table with <th> elements that use the colspan attribute.As well as the colspan attribute, you can also specify a rowspan attribute. This effectively does the same thing as colspan but merges cells across rows instead of across columns.Table Header, Body, a...

  • Page 111

    CHAPTER FOUR CREA TING THE WEB P A GES93 <tfoot> <tr> <td>Average</td> <td>86</td> </tr> </tfoot> <tbody> <tr> <td>James</td> <td>85</td> </tr> <tr> <td>...

  • Page 112

    HTML5 FO UND A TIONS94Adding the Menu TablesEvery good restaurant website should contain a menu complete with prices. Joe’s menu is split into three main sections: pizzas, garlic breads, and sides. You will be using <section> elements to explicitly define each of these sections, and then ...

  • Page 113

    CHAPTER FOUR CREA TING THE WEB P A GES95 <td>Joe’s Pepperoni Special</td> <td> Select pepperoni with our signature spicy tomato sauce </td> <td>13.00</td> </tr> <tr> <td>Margherita</td> <td...

  • Page 114

    HTML5 FO UND A TIONS96 <td>Garlic Bread with Double Cheese</td> <td>4.50</td> </tr> <tr> <td>Garlic Bread with Sun-Ripened Tomato</td> <td>4.80</td> </tr> </tbody></table> 13. In the final ...

  • Page 115

    CHAPTER FOUR CREA TING THE WEB P A GES97Figure 4-11 The Menu page with the new table.Figures and CaptionsIn the world of print, most images, charts, and diagrams include a caption to explain what it is they represent. HTML5 introduces two new elements, <figure> and <figcaption>, that ...

  • Page 116

    HTML5 FO UND A TIONS98<figure> <img src=”pepperoni-pizza.jpeg” alt=”A pepperoni pizza presented on a wooden chopping board.”></figure>Most browsers will add a margin around your figure element; you can override this using CSS.The <figcaption> ElementOften wh...

  • Page 117

    CHAPTER FOUR CREA TING THE WEB P A GES99Adding Product ImagesTo make the Menu page look a bit more appetizing, you are now going to add three product images to the right side of the page. The CSS style sheet I provide will take care of positioning the images to the side.You will be using multiple...

  • Page 118

    HTML5 FO UND A TIONS100 <figcaption> Margherita - Mozzarella and Oregano </figcaption></figure> 7. Finally, add the last figure.<figure> <img src=”img/pollo-pizza.jpeg” alt=”A pollo pizza with roasted yellow peppers.” width=”240” height=”180...

  • Page 119

    CHAPTER FOUR CREA TING THE WEB P A GES101Figure 4-13 The updated Menu page with product images.Pizza images reproduced by permission of iStockphoto.com/Lauri PattersonDates and TimesIt can be notoriously hard for computer programs to find and make sense of dates in web pages. HTML5 aims to solve ...

  • Page 120

    HTML5 FO UND A TIONS102Machine-Readable Date FormatsTo help computer programs understand dates better, the HTML5 specification outlines a number of valid date and time formats that you should use. Dates and times are generally defined in the format YYYY-MM-DD HH:MM:SS.Table 4-1 shows the valid fo...

  • Page 121

    CHAPTER FOUR CREA TING THE WEB P A GES103 3. Update the <title> and <meta> elements within the <head> element to reflect the content of the News page. 4. Remove the class attribute from the About link in the navigation and place it on the News link. 5. Locate the <section>...

  • Page 122

    HTML5 FO UND A TIONS104Posted on <time datetime=”2013-11-01”>1st November 2013</time>. 12. Create a new <div> element underneath the <header> element to hold the main article content. 13. Add the following content to this <div>. Here you use <p> elements to...

  • Page 123

    CHAPTER FOUR CREA TING THE WEB P A GES105 <p> Posted on <time datetime=”2013-10-12”>12th October 2013</time>. </p> </header> <div> <p> On Saturday we geared up for our annual basketball game with local rivals, Antonio’s Pa...

  • Page 124

    HTML5 FO UND A TIONS106SummaryIn this chapter, you accomplished a lot. You put to use the templates that you created in the previous chapters in order to create all the pages for your website. You then added content to each page using your growing knowledge of HTML elements.As you progressed thro...

  • Page 125

    part 2Dealing with Datachapter five Working with Formschapter six Enhancing your Web Forms with HTML5chapter seven Validating Form Data Using HTML5chapter eight Using Microdata chapter nine Ensuring AccessibilityactionURI(http://www.it-ebooks.info/):www.it-ebooks.info

  • Page 126

    actionURI(http://www.it-ebooks.info/):www.it-ebooks.info

  • Page 127

    109THE WORLD WIDE WEB is the single greatest tool ever invented for collecting information. Web forms are responsible for this. We use them every day, whether we are purchasing something online, doing research using our favorite search engine, or logging into our e-mail. Web forms have become an ...

  • Page 128

    HTML5 FO UND A TIONS110Figure 5-1 The completed Bookings page, displayed in Opera.Setting Up the Bookings Page with the <form> ElementThroughout this chapter, you are going to work on building a bookings form for the Joe’s Pizza Co. website that will enable users to request reservations t...

  • Page 129

    CHAPTER FIVE W ORKING WI TH FORMS111 <input type=”submit” value=”Search”> </div></form>For now, this is all you need to know about the <form> element to begin building your book-ings form. You will be diving deeper into forms and inputs later in this chapter, b...

  • Page 130

    HTML5 FO UND A TIONS112Figure 5-2 The newly created Bookings page.The action AttributeThe action attribute is used to specify the location of the file that the form data should be sent to. This should be an absolute or relative path. The file referenced in the action attri-bute would then perform...

  • Page 131

    CHAPTER FIVE W ORKING WI TH FORMS113Don’t worry that you don’t actually have a bookings.php in your project folder. We are just going to pretend that it’s there and that it will create a new booking when the form is submitted.To be able to process the data, you would need to write a program...

  • Page 132

    HTML5 FO UND A TIONS114The URL ParametersThe final segment of our URL is the parameters. This is where the data from your form is transmitted.The browser will first add a question mark character (?) after the path to signify that every-thing after this point in the URL is data.http://www.html5fou...

  • Page 133

    CHAPTER FIVE W ORKING WI TH FORMS115The POST MethodThe POST method should be used when performing any action that will involve data being saved to a database. While it is also technically possible to save data using the GET method, it is considered a security best practice to use POST for these a...

  • Page 134

    HTML5 FO UND A TIONS116When you create an <input> element you should also create a <label> element and asso-ciate it with the input. To do this you need to give the <input> element an ID and then specify a for attribute on the <label> element with the value set to the ID o...

  • Page 135

    CHAPTER FIVE W ORKING WI TH FORMS117 5. Create a <label> element and assign it to this <input> element using the for attribute.<div class=”field”> <label for=”name”>Name:</label> <input type=”text” name=”name” id=”name”></div> 6. Be...

  • Page 136

    HTML5 FO UND A TIONS118 11. Create a final <div> element with an <input> element. This time set the type to checkbox and the name and ID to marketing. Set the value attribute to 1. Then create a label for this element with the text shown in the following code.<div class=”field”...

  • Page 137

    CHAPTER FIVE W ORKING WI TH FORMS119Figure 5-4 shows how the Bookings page should look with these new input fields.Figure 5-4 The updated Bookings page.In the following sections, you will learn about the different types of inputs that you can use as well as each of the different attributes that y...

  • Page 138

    HTML5 FO UND A TIONS120As I mention earlier in this chapter, the value of the name attribute will form the key that the input data will be associated with when it is sent to the server.Setting Default ValuesYou can set a default value for an input element using the value attribute. When the brows...

  • Page 139

    CHAPTER FIVE W ORKING WI TH FORMS121TextThe text input type has traditionally been the most commonly used type on <input> ele-ments. As the name suggests, the text input type is used for instances where you need to collect some text from the user. This is also the default type for the <i...

  • Page 140

    HTML5 FO UND A TIONS122A checkbox element is shown in Figure 5-6.Figure 5-6 A simple checkbox.Radio ButtonsThe radio type is used to display a radio button. This is useful if you have a number of dif-ferent options to present to users but only want them to choose one of these options.When using m...

  • Page 141

    CHAPTER FIVE W ORKING WI TH FORMS123Submit ButtonsThe submit type can be used to define a submit button for your form. The text for the but-ton should be set in the value attribute.Here is an example of a submit button.<input type=”submit” value=”Send”>You can also create Submit but...

  • Page 142

    HTML5 FO UND A TIONS124Here is an example of a <textarea> element that uses the cols and rows attributes to specify its size.<textarea name=”message” cols=”50” rows=”10”></textarea>Notice how the <textarea> element has an end tag. Unlike the <input> eleme...

  • Page 143

    CHAPTER FIVE W ORKING WI TH FORMS125Figure 5-8 The updated bookings form with the message box added.Adding a Submit Button to Your Bookings PageYour booking form is nearly complete, but it is missing one important component—a Submit button that users can click to send off their requests for a ...

  • Page 144

    HTML5 FO UND A TIONS126The code for this exercise can be found in folder 4. Follow these steps to add a Submit button to your form: 1. Open the bookings.html file. 2. Create a new <div> element just before the end tag of the <form> element and give it the class field. 3. Within this ...

  • Page 145

    CHAPTER FIVE W ORKING WI TH FORMS127to make these buttons “smart,” you need to use JavaScript to tell the browser to execute some JavaScript code when the button is pressed. This JavaScript code could then perform an action, such as starting or stopping the playback of a video. You will learn...

  • Page 146

    HTML5 FO UND A TIONS128The <select> and <option> ElementsTo create a drop-down menu, you use a <select> element. This element serves a similar purpose to the <input> element in that it is used to set the name of the form control as well as other attributes, such as its cla...

  • Page 147

    CHAPTER FIVE W ORKING WI TH FORMS129Adding the Restaurant Drop-Down Menu to Your PageThe restaurant field in your bookings form is used to tell the bookings coordinator at which restaurant the customer would like to make a reservation. Currently, this field just uses a normal text input; however...

  • Page 148

    HTML5 FO UND A TIONS130 7. Finally, create one more <option> element with the text 200 West 44th Street, NY.<option>200 West 44th Street, NY</option> 8. Save the bookings.html file.Your restaurant field should now look like the following.<div class=”field”> <label...

  • Page 149

    CHAPTER FIVE W ORKING WI TH FORMS131More about Using OptionsSo far in this section, you have learned how to create basic drop-down menus using the <select> and <option> elements. Now you are going to learn some slightly more advanced techniques that enable you to do things like settin...

  • Page 150

    HTML5 FO UND A TIONS132Grouping OptionsWhen you have a <select> element with several options, you may want to use the <opt group> element to make it easier for your users to find the one they want. The <optgroup> element should be placed inside the <select> element and sho...

  • Page 151

    CHAPTER FIVE W ORKING WI TH FORMS133The file Input TypeThe file input type displays a button that launches a file browser so that users can select a file from their hard drive to upload to your website. An example of a file input in its sim-plest form is shown in the following code example.<in...

  • Page 152

    HTML5 FO UND A TIONS134Specifying Accepted File TypesIf you are expecting a user to upload a picture of himself to use as an avatar on your social networking site, you want to be sure that he doesn’t try to upload a spreadsheet instead. The accept attribute enables you to specify what type of f...

  • Page 153

    CHAPTER FIVE W ORKING WI TH FORMS135You can also set the disabled attribute on a <fieldset> element. This will disable all the fields within the fieldset so that the user cannot edit them.Check out this Treehouse video where Nick Pettit covers fieldsets, legends, and labels: actionURI(http:...

  • Page 154

    HTML5 FO UND A TIONS136 <div class=”field”> <label for=”phone”>Phone:</label> <input type=”text” name=”phone” id=”phone”> </div> <div class=”field”> <label for=”email”>Email:</label> <input...

  • Page 155

    CHAPTER FIVE W ORKING WI TH FORMS137Most browsers will usually put a border around <fieldset> elements to make the groups of form controls more visible. Congratulations! You have now finished the bookings form (for now). Submitting this form won’t actually do anything because you do not h...

  • Page 156

    HTML5 FO UND A TIONS138Now that you have created your Bookings page, you need to update the site navigation and sitemap to include links to this new page. The code for this exercise can be found in folder 7. Follow these steps: 1. Open the sitemap.html file. 2. Locate the <nav> element in ...

  • Page 157

    CHAPTER FIVE W ORKING WI TH FORMS139Figure 5-15 The updated Sitemap page.SummaryIt’s been another long chapter and you’ve covered a lot of content, so let’s have a quick recap. The chapters get shorter from now on. Honest.In this chapter, you learned about the <form> element and the d...

  • Page 158

    actionURI(http://www.it-ebooks.info/):www.it-ebooks.info

  • Page 159

    141IN CHAPTER 5 you learned how to create web forms using elements such as <form>, <input>, <select>, and <option>. In this chapter you are going to learn how you can make your forms more delightful for users by taking advantage of the new range of input types and attribut...

  • Page 160

    HTML5 FO UND A TIONS142Adding HTML5 to Your Bookings FormLet’s dive straight in to using some HTML5 in your bookings form. You are going to use a number of input types and attributes that you have not encountered before. Don’t worry. I will explain each of these in detail later in this chapte...

  • Page 161

    CHAPTER SIX ENHANCING Y O UR WEB FORMS WI TH H TML5143 5. Change the type of the email <input> element to be email and add a placeholder element with the following value: e.g. joe@example.com.<input type=”email” name=”email” id=”email” placeholder=”e.g. joe@example.com”&g...

  • Page 162

    HTML5 FO UND A TIONS144Figure 6-1 The bookings form with HTML5 input types and attributes (shown in Opera).HTML5 Input TypesHTML4 included a number of input types for creating basic form controls. However, as the demands of the modern web user have increased, the need arose to extend these types ...

  • Page 163

    CHAPTER SIX ENHANCING Y O UR WEB FORMS WI TH H TML5145Figure 6-2 The iOS keyboard displayed for input elements with the type tel.The device shown in Figure 6-2 uses a UK keyboard layout and therefore displays a pound sign (£) instead of a dollar ($). You used the tel input type for the phone fie...

  • Page 164

    HTML5 FO UND A TIONS146You have already used the email type for the e-mail field in your bookings form.<input type=”email” name=”email” id=”email” placeholder=”e.g. joe@example.com”>NumbersIf you are collecting a numeric value, such as a quantity or age, you can use the numb...

  • Page 165

    CHAPTER SIX ENHANCING Y O UR WEB FORMS WI TH H TML5147Browsers that support form validation will also validate the contents of url inputs when the form is submitted. This is to check that the format of the URL supplied by the user is valid.Here is a short snippet that shows how to create an <i...

  • Page 166

    HTML5 FO UND A TIONS148The default range scale is between 0 and 100; however, you can change this using the max, min, and step attributes.Figure 6-7 shows the interactive slider displayed to users.Figure 6-7 An input element with the type range, as displayed in Google Chrome.Here is an example of...

  • Page 167

    CHAPTER SIX ENHANCING Y O UR WEB FORMS WI TH H TML5149Figure 6-8 An input element with the type color, as displayed in Google Chrome on Mac OS X.Date and TimeThe datetime type can be used to collect a date and time from a user. This date/time combo should be a valid Coordinated Universal Time (UT...

  • Page 168

    HTML5 FO UND A TIONS150Here is an example of an <input> element with the type datetime.<input type=”datetime” name=”eventStart” id=”eventStart”>DateThere will be times when you just want to collect a date from your users; for example, you might want to collect their date o...

  • Page 169

    CHAPTER SIX ENHANCING Y O UR WEB FORMS WI TH H TML5151Using the week type will prompt the browser to display a picker that will help the user select a week in the year. This value is then converted to a formatted string. For example: 2012-W29.The month type will also prompt the browser to display...

  • Page 170

    HTML5 FO UND A TIONS152Local Date and TimeThe datetime-local type is used to collect a date and time from users in a format that is consistent with their local time zone. It is usually best to collect date and time combinations from the users using this type; otherwise, the users would have to do...

  • Page 171

    CHAPTER SIX ENHANCING Y O UR WEB FORMS WI TH H TML5153You should apply the autofocus attribute only to one element on your page. If you apply it to more than one, the browser will autofocus the last element that has the attribute in your HTML.You used the autofocus attribute on the name input in ...

  • Page 172

    HTML5 FO UND A TIONS154DatalistsYou may have noticed that sometimes when you start typing into a form field, the browser will offer suggestions to help you complete your input quicker. Until recently, this function-ality was created using JavaScript and clever CSS positioning. However, HTML5 make...

  • Page 173

    CHAPTER SIX ENHANCING Y O UR WEB FORMS WI TH H TML5155SummaryHTML5 has introduced a lot of changes to how web forms can be created. In this chapter you learned how to use new input types such as number, search, and datetime-local to cre-ate form controls that make it even easier for users to fill...

  • Page 174

    actionURI(http://www.it-ebooks.info/):www.it-ebooks.info

  • Page 175

    157COLLECTING DATA FROM a user is one thing; making sure that data is what you wanted is another. If you’re asking for someone’s date of birth, you don’t want the name of his cat. This may sound silly, but you would be surprised what some people will decide to enter into your web forms.HTML...

  • Page 176

    HTML5 FO UND A TIONS158Before you start writing code, take a look at Table 7-1, which shows the validations that each of the fields will have. Planning out your validations in this way is useful to ensure that you don’t miss anything.Table 7-1 Input ValidationsInput FieldValidation RulesNameReq...

  • Page 177

    CHAPTER SEVEN V ALID A TING FORM D A T A USING H TML5159pattern=”[0-9]{3}[-][0-9]{3}[-][0-9]{4}” required title=”Please provide your phone number in the following format: 000-000-0000”> 4. Locate the email <input> element and add a required attribute. The browser will take care o...

  • Page 178

    HTML5 FO UND A TIONS160If you view the updated bookings form in your web browser, you should see that only the text labels and validation tip have changed, as shown in Figure 7-1.Figure 7-1 The bookings form with validations, shown in Opera.Requiring Data from the UserRequiring data from a user i...

  • Page 179

    CHAPTER SEVEN V ALID A TING FORM D A T A USING H TML5161Figure 7-2 The tip displayed in Google Chrome if the user fails to fill in a required form field.If you are going to require that users fill in certain fields in your form please, please, please let them know! There is nothing worse for them...

  • Page 180

    HTML5 FO UND A TIONS162Restricting LengthIt can sometimes be useful to restrict the length of the data provided by a user. For these occasions, you can use the maxlength attribute on an <input> or <textarea> element and pass in the maximum number of characters that the user can supply...

  • Page 181

    CHAPTER SEVEN V ALID A TING FORM D A T A USING H TML5163Matching PatternsHTML5 introduces another new attribute for <input> elements, the pattern attribute. This attribute can be used to check whether the data the user has input conforms to a certain format or pattern. The pattern attribute...

  • Page 182

    HTML5 FO UND A TIONS164Figure 7-3 The validation tip displayed in Google Chrome when the input does not match the validation pattern.Regular Expression BasicsRegular expressions can be a bit daunting at times; people have written whole books about them (they’re truly terrifying—the books, not...

  • Page 183

    CHAPTER SEVEN V ALID A TING FORM D A T A USING H TML5165This example accepts characters from 0 to 9 and A to Z, both upper and lowercase. Patterns are case sensitive so you need to include both the uppercase and lowercase characters in order to get things working correctly. The + sign here means ...

  • Page 184

    HTML5 FO UND A TIONS166SummaryData validation is important, but it is also one of the first things to get dropped when a dead-line is looming and the project is rapidly running out of time.Validation should not be an optional extra. It should be a requirement. Validation is as ben-eficial to your...

  • Page 185

    167THIS CHAPTER FOCUSES on how you can use advanced markup syntax to enable computer programs to understand the data presented in your web pages. The web is full of structured data—the details of a local business, the properties of an item for sale on an e-commerce website, or someone’s profi...

  • Page 186

    HTML5 FO UND A TIONS168Microdata is still in its infancy and therefore a lot of possible applications for this technology have not even been thought about yet. In this chapter you are going to learn how you can use microdata to mark up local businesses, events, people, and products to make them m...

  • Page 187

    CHAPTER EIGHT USING MICR OD A T A169The itemscope AttributeThe itemscope attribute is used to define the scope of an item. It tells the browser that all the properties defined within this element belong to a single item.<section id=”location1” itemscope> <h1>310 West 38th Street,...

  • Page 188

    HTML5 FO UND A TIONS170<section id=”location1” itemscope itemtype=”http://schema.org/LocalBusiness”> ... <img src=”img/map1.png” alt=”Joe’s Pizza at 310 West 38th Street, NY” itemprop=”image”> <p class=”location-phone” itemprop=”...

  • Page 189

    CHAPTER EIGHT USING MICR OD A T A171Notice how the openingHours property is used twice in this example.Ignore that this example is now using multiple <time> elements with datetime attributes for now. You will learn why this is the case later in this chapter. The itemid AttributeThe itemid a...

  • Page 190

    HTML5 FO UND A TIONS172<meta id=”company-name” itemprop=”name” content=”Joe’s Pizza Co.”><section id=”location1” itemscope itemtype=”http://schema.org/LocalBusiness” itemref=”company-name”>...</section><section id=”location2...

  • Page 191

    CHAPTER EIGHT USING MICR OD A T A173You can define a LocalBusiness item using a URL to the schema on schema.org.<div itemscope itemtype=”http://schema.org/LocalBusiness”></div>You have already taken a look at some of the properties that a LocalBusiness item can have; however, ther...

  • Page 192

    HTML5 FO UND A TIONS174 Here we have created a nested PostalAddress item that forms the address property for your master LocalBusiness item. Nesting microdata items within other items is perfectly fine.• map—The map property should contain a URL to a map of the location. This could be a link ...

  • Page 193

    CHAPTER EIGHT USING MICR OD A T A175Using Microdata in Your Restaurant WebsiteNow that you have an understanding of microdata and how it should be used, take another look at the website you are building for Joe’s Pizza. Your Locations page currently contains the information of all three restaur...

  • Page 194

    HTML5 FO UND A TIONS176earlier to each of these LocalBusiness items, therefore setting the company name with-out the need for three separate elements. Here’s the new code for location1: <section id=”location1” itemscope itemtype=”http://schema.org/LocalBusiness” ...

  • Page 195

    CHAPTER EIGHT USING MICR OD A T A177 17. Add an itemprop attribute to this <span> element and set its value to addressRe-gion.<h1 itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”> <span itemprop=”streetAddress”>310 West 38th Street</spa...

  • Page 196

    HTML5 FO UND A TIONS178 24. Your first item should now be complete. Repeat Steps 10 through 23 for each of the locations in your code. 25. Save the locations.html file.If all went well, you should not see any visual difference when viewing the Locations page in your browser, but a computer progra...

  • Page 197

    CHAPTER EIGHT USING MICR OD A T A179 <section id=”location1” itemscope itemtype=”http://schema.org/LocalBusiness” itemref=”company-name”> <h1 itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”> <span itemp...

  • Page 198

    HTML5 FO UND A TIONS180 itemtype=”http://schema.org/PostalAddress”> <span itemprop=”streetAddress”>200 West 44th Street</span>, <span itemprop=”addressRegion”>NY</span> </h1> <img src=”img/map3.png” alt=”Joe’...

  • Page 199

    CHAPTER EIGHT USING MICR OD A T A181• startDate—Your startDate should be supplied in a machine-readable format. It’s usually best to use a <time> element when specifying dates and times with microdata. Computer programs will use the contents of the datetime attribute. The Joe’s Pizz...

  • Page 200

    HTML5 FO UND A TIONS182 <li itemprop=”performer” itemscope itemtype=”http://schema.org/Person”> <span itemprop=”name”>Joe Balochio</span> </li></ul> Here, we have defined two performers for the Joe’s Pizza Co. event, using the per-former prop...

  • Page 201

    CHAPTER EIGHT USING MICR OD A T A183 Here, we have defined a subevent for the extreme pizza tossing demonstration.• superEvent—A super event is the opposite of a subevent (but you already figured that out). If we had a web page that was solely dedicated to the extreme pizza tossing demonstrat...

  • Page 202

    HTML5 FO UND A TIONS184 </div> <div itemprop=”subEvent” itemscope itemtype=”http://schema.org/Event”> <span itemprop=”name”>Extreme Pizza Tossing</span><br> Starts <time itemprop=”startDate” datetime=”2013-10-05T12:00”> 12 ...

  • Page 203

    CHAPTER EIGHT USING MICR OD A T A185• givenName—When defining a person’s name, you can use more specific properties than the general name property. The givenName (or first name) is one of these.<span itemprop=”givenName”>Joe</span>• additionalName—The additionalName prop...

  • Page 204

    HTML5 FO UND A TIONS186 <p> Telephone: <span itemprop=”telephone”>01234 123123</span><br> Fax Number: <span itemprop=”faxNumber”>01234 123124</span><br> Email: <a itemprop=”email” href=”mailto:joe@example.com”> joe@examp...

  • Page 205

    CHAPTER EIGHT USING MICR OD A T A187• brand—The brand property should contain an Organization item (http://schema.org/Organization).<div itemprop=”brand” itemscope itemtype=”http://schema.org/Organization”> <span itemprop=”name”>Joe’s Pizza Co.</span><...

  • Page 206

    HTML5 FO UND A TIONS188SummaryMicrodata promises to reduce the headache for developers who are trying to create programs that can mine data from web pages. Moving toward a more semantic web can only be a good thing, but using microdata does not really eradicate this headache: It merely redistribu...

  • Page 207

    189JOE WANTS TO make sure that all the visitors to his new website can check out the menu, find special offers, and place a booking online. Sometimes, it is easy to forget that not all users can enjoy the same rich experience as we do when browsing a website. For users with visual or motor impair...

  • Page 208

    HTML5 FO UND A TIONS190Reason #1: It’s the Right Thing to DoMaking your websites accessible is simply the right thing to do. As a web developer, you should carefully consider your entire audience, not only the typical user, but the entire spec-trum. What if your user is blind? How will she be a...

  • Page 209

    CHAPTER NINE ENSURING A CCESSIBILI TY191Screen ReadersBrowsing the web can be a challenging experience for users with visual impairments. Depending on the level of the impairment, these users may use a computer program called a screen reader to navigate between pages and consume content. Screen r...

  • Page 210

    HTML5 FO UND A TIONS192Figure 9-1 The VoiceOver screen reader in action.Screen readers can be tricky to use at first, and the keyboard shortcuts for using them vary depending on which screen reader you use. As you progress through this chapter, you need to use a screen reader to test out the acce...

  • Page 211

    CHAPTER NINE ENSURING A CCESSIBILI TY193Making Web Forms AccessibleWeb forms can pose a problem for users who rely on screen readers. If your forms are not accessible, it can be hard for users to navigate through your form fields or actually input data. This section shows you two ways to make you...

  • Page 212

    HTML5 FO UND A TIONS194Using labels offers two accessibility benefits. First, although users with visual impairments may not be able to read the screen, if you include a label, a screen reader can tell the user what to input into a form field by reading the label aloud. The other main benefit is ...

  • Page 213

    CHAPTER NINE ENSURING A CCESSIBILI TY195The order in which these form fields are focused is determined by the order of the HTML elements in the code. The default order is usually fine; but there may be times when you need to change this tab order without rearranging the elements in your code. You...

  • Page 214

    HTML5 FO UND A TIONS196 <input type=”email” name=”email” id=”email” placeholder=”e.g. joe@example.com” required tabindex=”3”> </div> </fieldset> <fieldset> <legend>Booking Information</legend> <di...

  • Page 215

    CHAPTER NINE ENSURING A CCESSIBILI TY197 3. Save the bookings.html file. 4. Open the bookings.html file in your web browser and use the Tab key to cycle through the form fields. You should encounter the following order: Name, Phone, Email, Message, Marketing, Guests, Booking Time, Restaurant, and...

  • Page 216

    HTML5 FO UND A TIONS198 3. Create a new <caption> element at the top of this table, as in the following code:<table id=”pizzas”> <caption> Our fantastic range of pizzas presented here has won us 6 awards over the past 2 years. </caption> ...</table> 4. ...

  • Page 217

    CHAPTER NINE ENSURING A CCESSIBILI TY199Figure 9-2 The menu tables with captions.Pizza images reproduced by permission of iStockphoto.com/Lauri PattersonScoped Table HeadersUsing table headers (<th> elements) makes it easier for screen readers to identify row and column headings, which is f...

  • Page 218

    HTML5 FO UND A TIONS200First, you need to add scopes to the column headers in each of your menu tables.The code for this exercise can be found in folder 3. Here are the steps: 1. Open the menu.html file in your text editor. 2. Find the <table> element with the ID pizzas. 3. Apply the scope...

  • Page 219

    CHAPTER NINE ENSURING A CCESSIBILI TY201 </thead> <tbody>...</tbody></table> 5. Save the menu.html file.If you view the menu.html file in your browser, you won’t see any visible difference, but screen readers can now get a better understanding of your tables.Try using ...

  • Page 220

    HTML5 FO UND A TIONS202The stylesheet I provide does not apply any additional styling to these <th> elements, so you should still see what is shown in Figure 9-2. However, your table rows are now a lot more accessible to screen readers.Throughout this section, you implemented a number of te...

  • Page 221

    CHAPTER NINE ENSURING A CCESSIBILI TY203Here is an example of how you can make your hyperlinks more accessible using these two methods:<a href=”about.html” title=”Discover more information about Joe’s Pizza Co.”> Find out more about Joe’s Pizza Co.</a>This example uses...

  • Page 222

    HTML5 FO UND A TIONS204The tool is similar to the W3C Validator in that it enables you to check your pages in three different ways. You can provide a URL to a live page, upload a file from your computer, or paste your HTML directly into a text area.Figure 9-3 shows an inaccessible web page that h...

  • Page 223

    CHAPTER NINE ENSURING A CCESSIBILI TY205Figure 9-4 The Google home page, converted to grayscale using Spur.2012 © GoogleSummaryCreating accessible websites is vital to ensuring that the web stays an open platform that everyone can comfortably use. In this chapter, you learned about a number of d...

  • Page 224

    actionURI(http://www.it-ebooks.info/):www.it-ebooks.info

  • Page 225

    part 3Enhancing Web Pages with HTML5 and JavaScriptchapter ten Introducing JavaScriptchapter eleven Adding Video and Audiochapter twelve Storing DataactionURI(http://www.it-ebooks.info/):www.it-ebooks.info

  • Page 226

    actionURI(http://www.it-ebooks.info/):www.it-ebooks.info

  • Page 227

    209UP TO THIS point in the book, you focused on how to create web pages using HTML. In the remaining chapters, you are going to be using JavaScript and HTML5 to create interactive features for your Joe’s Pizza Co. website. But first, you need to get up to speed about the JavaScript programming ...

  • Page 228

    HTML5 FO UND A TIONS210You’ll also look at the Document Object Model (DOM), what it is, how it is created, and why it is important. You will also learn about DOM nodes and the relationships between them.Finally, you will look at a JavaScript library called jQuery and how it can be used to make ...

  • Page 229

    CHAPTER TEN INTR ODUCING J A V A SCRIPT211• The Wilderness Downtown by Google—actionURI(http://www.thewildernessdowntown.com/):http://www.thewildernessdownactionURI(http://www.thewildernessdowntown.com/): actionURI(http://www.thewildernessdowntown.com/):town.com/• Water/Ocean by OutsideOfSo...

  • Page 230

    HTML5 FO UND A TIONS212Awesome, aren’t they! If you aren’t brimming with excitement at what is possible now, don’t worry. You soon will be.So by now you should have a general understanding of the purpose of JavaScript and its position within the web ecosystem. Now it’s time to start learn...

  • Page 231

    CHAPTER TEN INTR ODUCING J A V A SCRIPT213 <script> window.onload = function() { document.write(‘Hello World!’); }; </script> </body></html> 5. Save the file.Now view this file in your web browser. You should see that Hello World! is displayed on the pa...

  • Page 232

    HTML5 FO UND A TIONS214As with external stylesheets, you need to link JavaScript files to your HTML files. You do this using the <script> element.You can use the src attribute on the <script> element to specify an absolute or relative path to your JavaScript file, in the same way that...

  • Page 233

    CHAPTER TEN INTR ODUCING J A V A SCRIPT215JavaScript, but it will give you the skills you need to complete the rest of the exercises in this book and build small JavaScript programs of your own.A Simple ProgramYou’ve already encountered the standard Hello World! program, so let’s skip ahead t...

  • Page 234

    HTML5 FO UND A TIONS216VariablesVariables are used to store pieces of data so that you can play around with them in your pro-gram. Declaring a variable in JavaScript is easy; unlike some other programming languages, you do not need to specify what type of data the variable will hold (for example,...

  • Page 235

    CHAPTER TEN INTR ODUCING J A V A SCRIPT217Variables that are declared but not initialized are known as undefined. Because no value is asso-ciated with them, the browser cannot give them a type for you (for example, string or number).Variables can also be null. This is similar to being undefined, ...

  • Page 236

    HTML5 FO UND A TIONS218Because the foo variable was declared but not initialized, it never actually existed. Therefore, it is undefined. The bar variable, on the other hand, was initialized with the text Hello. However, when you set the bar variable to be empty using the null keyword, it lost its...

  • Page 237

    CHAPTER TEN INTR ODUCING J A V A SCRIPT219 1. Create a new file in your text editor called example10-5.js. 2. Copy the following code into this new file:window.onload = function() { sayHello(‘Joe’); sayHello(‘Beth’); sayHello(‘Steve’); sayHello(‘James’);};// Print out a hello ...

  • Page 238

    HTML5 FO UND A TIONS220Event ListenersYou have already encountered event listeners multiple times in this chapter. Event listeners are used to attach functions to a particular event, such as a page load, mouse click, or key press.There are two ways of creating event listeners. The first is to att...

  • Page 239

    CHAPTER TEN INTR ODUCING J A V A SCRIPT221 1. Create a new file in your text editor. 2. Save this file as example10-6.js. 3. Add the following JavaScript code to this file.window.onload = function() { var button = document.getElementById(“btn”); button.addEventListener(“click”, function...

  • Page 240

    HTML5 FO UND A TIONS222In this example, the condition would evaluate to true if the value of the a variable is smaller than the value of the b variable. This means that the code would execute and the text would be output to the screen.You can find a comprehensive list of JavaScript operators that...

  • Page 241

    CHAPTER TEN INTR ODUCING J A V A SCRIPT223The final parameter is the final-expression. This expression is executed after each iteration of the loop. This typically is used to increase the value of the counter variable by one.Let’s write a little program that uses a for loop: 1. Create a new fil...

  • Page 242

    HTML5 FO UND A TIONS224Notice that the output starts from 0. This is because you initialized the counter variable at 0. In programming, you almost always start counting from 0. This can sometimes lead to the infamous off-by-one bug, so be careful to check your numbers if your output is slightly o...

  • Page 243

    CHAPTER TEN INTR ODUCING J A V A SCRIPT225<body> <h1>The Guessing Game</h1> <p> Guess a number between 0 and 10. </p> <script src=”example10-8.js”></script></body></html> 6. Save the example10-8.html file.Open this example in your b...

  • Page 244

    HTML5 FO UND A TIONS226The condition of the while loop compares the guess variable to the randomNumber vari-able using the not-equal operator (!=). If the guess is correct, it will continue to execute the rest of the JavaScript. However, if it is incorrect, then you will prompt the user to make a...

  • Page 245

    CHAPTER TEN INTR ODUCING J A V A SCRIPT227This parent-child relationship is important to the way that the DOM tree works. Let’s look at an example.The following code example shows a <div> element that contains an unordered list, which in turn contains a number of list items.<div> ...

  • Page 246

    HTML5 FO UND A TIONS228As you can see in this diagram, there is more than one type of node. The main two types that you will need to worry about are element nodes and text nodes. As the names suggest, ele-ment nodes are created for HTML elements and text nodes are created for the text contained w...

  • Page 247

    CHAPTER TEN INTR ODUCING J A V A SCRIPT229 <p class=”paragraph”> This text is in the second p element. </p> </section> <section id=”form”> <h1>A Web Form</h1> <form id=”webForm” action=”#” method=”post”> <p&g...

  • Page 248

    HTML5 FO UND A TIONS230Figure 10-2 Selecting an element getElementById().Executing this function will return the target element and all its child elements.getElementsByClassName()The getElementsByClassName() function can be used to simultaneously select multiple elements based on a class that has...

  • Page 249

    CHAPTER TEN INTR ODUCING J A V A SCRIPT231getElementsByTagName()There may also be scenarios in which you would like to select a number of elements by their tag name. For such occasions, you can use the getElementsByTagName() function.Try selecting all the paragraph elements on the page:document.g...

  • Page 250

    HTML5 FO UND A TIONS232Interacting with Page ElementsNow that you understand how to select elements using JavaScript, let’s look at how you can manipulate their content and attributes.Manipulating Text ContentFirst try changing the text of the first <p> element. To do this, select the ele...

  • Page 251

    CHAPTER TEN INTR ODUCING J A V A SCRIPT233Throughout the remainder of this book, you will write a lot of JavaScript code that interacts with page elements, updating content and properties based on user input and events.JavaScript LibrariesJavaScript libraries are collections of code that you can ...

  • Page 252

    HTML5 FO UND A TIONS234 <header> <h1>This is a test page</h1> </header> <section id=”text”> <h1>A Text Section</h1> <p id=”firstParagraph” class=”paragraph”> This text is within the first paragraph element. </p>...

  • Page 253

    CHAPTER TEN INTR ODUCING J A V A SCRIPT235window.onload = function() { // Do something here.}jQuery provides an alternative way of doing this, as shown here:$(function() { // Do something here.});The dollar ($) symbol at the beginning of this code represents the jQuery object. This object p...

  • Page 254

    HTML5 FO UND A TIONS236jQuery has other nifty selectors that you can use, too. You can find a full list of these on the jQuery website: actionURI(http://api.jquery.com/category/selectors/):http://api.jquery.com/category/selectors/actionURI(http://api.jquery.com/category/selectors/):.Other Benefit...

  • Page 255

    237THE WEBSITE YOU have been building for Joe’s Pizza Co. looks pretty good so far, but it would look even better if it included a video. In this chapter, you update the About page, adding a short video with some custom playback controls that you build yourself. When the video is in place, you ...

  • Page 256

    HTML5 FO UND A TIONS238Converting Video and Audio FilesBefore you can start adding video and audio to your web pages, you first need to make sure browsers will be able to play your multimedia files. In this section, you learn about the vari-ous video and audio formats that are natively supported ...

  • Page 257

    CHAPTER ELEVEN ADDING VIDEO AND A UDIO239Audio File FormatsJust like with video formats, not a single accepted audio format is supported in all browsers. This means that, once again, you must convert your audio file into a number of different formats to ensure that everyone can enjoy it.Table 11-...

  • Page 258

    HTML5 FO UND A TIONS240 3. Place the mikethefrog.mp4 file in the videos folder that you created within your project directory. 4. The Firefogg converter requires that you are using Firefox. If you do not already have Firefox installed, you can download it actionURI(http://www.mozilla.org/en-US/fi...

  • Page 259

    CHAPTER ELEVEN ADDING VIDEO AND A UDIO241Also note that the <video> element has a complete set of start and end tags. You can place some content between these tags that should be displayed if the browser does not support HTML5 video (more on this in the “Ensuring Compatibility” section ...

  • Page 260

    HTML5 FO UND A TIONS242 6. Add an id attribute to the <video> element and set its value to myVideo.<video src=”videos/mikethefrog.webm” id=”myVideo” width=”400” height=”225”></video> 7. Now add a controls attribute to the <video> element. This prompt...

  • Page 261

    CHAPTER ELEVEN ADDING VIDEO AND A UDIO243Styling for the default browser controls has not been standardized, so these controls may look slightly different depending on which browser the video is being viewed in. Ensuring CompatibilityAs I mention earlier in this chapter, there is no single unive...

  • Page 262

    HTML5 FO UND A TIONS244Here are the steps for modifying your About page to add other video files: 1. Open the about.html file in your text editor. 2. Remove the src attribute from the <video> element. 3. Add a <source> element for the WebM file within the <video> element.<sou...

  • Page 263

    CHAPTER ELEVEN ADDING VIDEO AND A UDIO245Figure 11-2 How the About page appears if the user’s browser does not support HTML5 video.In this section, you add a poster image to the video on the About page.The code in this exercise can be found in folder 4. Follow these steps to add a poster imag...

  • Page 264

    HTML5 FO UND A TIONS246 4. IE9 contains a bug that prevents the browser from using the poster image. To work around this bug, you need to add a preload attribute to the <video> element and set its value to none.<video id=”myVideo” width=”400” height=”225” controls post...

  • Page 265

    CHAPTER ELEVEN ADDING VIDEO AND A UDIO247Other <video> AttributesIn addition to the poster attribute, you can use a few other attributes on the <video> ele-ment. You won’t be using the following attributes in the example website, but they are useful to know about.The autoplay attrib...

  • Page 266

    HTML5 FO UND A TIONS248Before you can start building your custom playback controls, you first need to add a JavaScript file to your project. This file contains all the JavaScript code that controls the video.The code for this exercise can be found in folder 5. Here are the steps for adding a Jav...

  • Page 267

    CHAPTER ELEVEN ADDING VIDEO AND A UDIO249Creating the Play ButtonTo start playing a video, you can call the play() method on the <video> element through JavaScript.The Play button uses a <button> element that hooks up to an event listener in your JavaScript code. When the button is cl...

  • Page 268

    HTML5 FO UND A TIONS250 3. Within this new <div> element, create a <button> element. Set the type to button and the ID to playBtn.<div id=”video-controls”> <button type=”button” id=”playBtn”>Play</button></div> 4. Save the about.html file.Next, you...

  • Page 269

    CHAPTER ELEVEN ADDING VIDEO AND A UDIO251Figure 11-4 The new Play button.If clicking the Play button doesn’t start your video, check your code against the files in folder 6 of the download code. There is probably a typo or a missing semi-colon somewhere. There is one problem: You don’t have a...

  • Page 270

    HTML5 FO UND A TIONS252Start by adding the new Pause button to your HTML code: 1. Open the about.html file in your text editor. 2. Create a new <button> element underneath the Play button. Set the type to button and the ID to pauseBtn.<div id=”video-controls”> <button type=”...

  • Page 271

    CHAPTER ELEVEN ADDING VIDEO AND A UDIO253Open the About page. You should see your new Pause button, as shown in Figure 11-5. Try playing the video and then using the Pause button to pause playback. If the Pause button doesn’t work, try using your browser’s developer tools to diagnose what is ...

  • Page 272

    HTML5 FO UND A TIONS254Let’s start by adding the range slider to your HTML: 1. Open the about.html file in your text editor. 2. Create a new <input> element below the Pause button. Set its type to range, its ID to seekBar, and its value to 0.<input type=”range” id=”seekBar” val...

  • Page 273

    CHAPTER ELEVEN ADDING VIDEO AND A UDIO255 5. Now that you have the time variable calculated, you need to update the video’s currentTime property.// Add an event listener for the seek bar.seekBar.addEventListener(“change”, function(e) { // Calculate the time in the video that playback //...

  • Page 274

    HTML5 FO UND A TIONS256 3. Update the slider value using the value variable you just created. This moves the slider handle along the slider.// Update the seek bar as the video plays.video.addEventListener(“timeupdate”, function(e) { // Calculate the slider value. var value = ( 100 / video.d...

  • Page 275

    CHAPTER ELEVEN ADDING VIDEO AND A UDIO257That’s it! You’re all done with the Seek bar.Open the About page and play around a bit with the Seek bar. You should see that the video pauses when you start to drag the slider handle and then starts playing again when you release it. The frame display...

  • Page 276

    HTML5 FO UND A TIONS258Here are the steps for creating a volume control: 1. Open the about.html file. 2. Add an <input> element and <label> below the Seek bar. Note the attributes on the <input> element.<label for=”volume”>Volume: </label><input type=”range...

  • Page 277

    CHAPTER ELEVEN ADDING VIDEO AND A UDIO259Figure 11-7 The new Volume control.Creating a Mute ButtonThe volume slider you just created works great, but sometimes it can be useful to have a Mute button, too. You can mute the audio for your video by setting the muted property to true.You should alway...

  • Page 278

    HTML5 FO UND A TIONS260 3. Save the about.html file. 4. Open the video.js file in your text editor. 5. Add a variable for the Mute button called muteBtn.window.onload = function() { ... var volumeControl = document.getElementById(“volume”); var muteBtn = document.getElementById(“muteBtn...

  • Page 279

    CHAPTER ELEVEN ADDING VIDEO AND A UDIO261Figure 11-8 The Mute button.You’ve now created all your custom video controls. The CSS stylesheet you added in Chapter 2 takes care of styling them appropriately. Next, you find out how to make your video more accessible by adding subtitles.Making Your ...

  • Page 280

    HTML5 FO UND A TIONS262The second method you can use to add subtitles to a video is out-of-band subtitles. These are not directly packaged within the media file; instead, they are provided as separate .VTT files. The new <track> element can be used to associate these files with a video.Late...

  • Page 281

    CHAPTER ELEVEN ADDING VIDEO AND A UDIO263 <track kind=”subtitles” label=”English subtitles” src=”videos/subtitles_en.vtt” srclang=”en” default> </track> <p> Your browser doesn’t support HTML5 video. <a href=”videos/mikethefrog.m...

  • Page 282

    HTML5 FO UND A TIONS264Browser support for the <track> element is still lacking a bit, so I recommend that you test your About page in Google Chrome. To enable support for the <track> element in Chrome, type chrome://flags into the address bar and press Enter; then enable the Enable &...

  • Page 283

    265ALMOST ALL APPLICATIONS involve storing data of some kind. This can be data about users, products, videos, or even page visits. Used correctly, this data can be a powerful tool in the decision-making process. That’s why companies like Google and Facebook try to collect as much data as they c...

  • Page 284

    HTML5 FO UND A TIONS266Why Use Client-Side Storage?There are many reasons why you might want to store data on the client. In this section, I explore some of the most important, such as the following:• Performance—With a traditional website, every time an application wants to fetch some data, ...

  • Page 285

    CHAPTER T WELVE S T ORING D A T A267The technical term for assigning datastores to specific domains is sandboxing. To start using LocalStorage, you first need to get familiar with the localStorage object and its associated functions. Fire up your developer tools console; you’re going to need i...

  • Page 286

    HTML5 FO UND A TIONS268Try retrieving the data you saved in the preceding example. Enter the following code into your console:localStorage.getItem(“name”);You should see that the data you stored is displayed in the console window, as shown in Figure 12-1.Figure 12-1 Retrieving data in localSt...

  • Page 287

    CHAPTER T WELVE S T ORING D A T A269key(index)The localStorage object also has a function you can use to retrieve the name of a key from the datastore. This function is called key(), and it takes an integer that represents the position of a key in the key index. The order in which keys are stored...

  • Page 288

    HTML5 FO UND A TIONS270Now try to retrieve some data. You should find that the getItem() function returns null, as shown in Figure 12-4.Figure 12-4 Using the clear() function to delete all the stored data.lengthYou can find out how many key/value pairs have been stored by accessing the length pro...

  • Page 289

    CHAPTER T WELVE S T ORING D A T A271Here are the steps for saving user data: 1. Open the bookings.html file in your text editor. 2. Load the storage.js file (you create this shortly) into the Bookings page by adding a new <script> element just above the closing tag of the <body> eleme...

  • Page 290

    HTML5 FO UND A TIONS272 9. Set up an event listener on the form that is executed when the form is submitted (or the submit event is fired).// Get the formvar form = document.getElementById(“bookingsForm”);// Event listener for when the bookings form is submitted.form.addEventListener(“submi...

  • Page 291

    CHAPTER T WELVE S T ORING D A T A273 var email = document.getElementById(“email”); // Store the values. localStorage.setItem(“name”, name.value); localStorage.setItem(“phone”, phone.value); localStorage.setItem(“email”, email.value);} 14. You have now added all the code neede...

  • Page 292

    HTML5 FO UND A TIONS274 // Fetch the input elements. var name = document.getElementById(“name”); var phone = document.getElementById(“phone”); var email = document.getElementById(“email”); // Retrieve the saved data and update the values of the // form fields. if (localStorage...

  • Page 293

    CHAPTER T WELVE S T ORING D A T A275Figure 12-5 The Name, Phone, and Email fields are populated from data stored in LocalStorage. Storing Objects and ArraysUntil now, you looked only at how to store text and numbers using LocalStorage. In this sec-tion, let’s look at how you can store more comp...

  • Page 294

    HTML5 FO UND A TIONS276You define a new object in JSON using curly braces {} and then use key/value pairs to define the object’s properties. A colon is used to separate a key from its value, and commas separate each of the properties in the object.JSON objects can easily be serialized and parse...

  • Page 295

    CHAPTER T WELVE S T ORING D A T A277Figure 12-6 Converting a JavaScript object to JSON.parse(json)Now that you know how to convert JavaScript objects to JSON, let’s look at how you can convert JSON back to JavaScript objects. This is done using the parse() function. Simply pass this function yo...

  • Page 296

    HTML5 FO UND A TIONS278Objects in LocalStorageMore complex types of data such as JavaScript objects cannot be stored in the same way as text and numbers. If you tried to store a normal JavaScript object, it would be converted to a string and saved. The problem is that you cannot easily get this d...

  • Page 297

    CHAPTER T WELVE S T ORING D A T A279Figure 12-8 Retrieving and parsing an object from LocalStorage.Arrays in LocalStorageArrays can be stored in the same way that objects are. First you must convert the array to JSON, and then you can store it as a string. To retrieve your array, you just need to...

  • Page 298

    HTML5 FO UND A TIONS280HTML5 does introduce a way of maintaining a client-side database through the IndexedDB API, which isn’t covered in this book. If you’re interested, I encourage you to look into it. You can find a great tutorial on how to use IndexedDB on HTML5Rocks at actionURI(http://w...

  • Page 299

    CHAPTER T WELVE S T ORING D A T A281Storage LimitsHow much data will your application require? With client-side storage, all that data will be taking up valuable space on the user’s hard drive, and you don’t want to allow websites to store gigabytes of data and fill up your user’s drive.To ...

  • Page 300

    HTML5 FO UND A TIONS282The job of securing data once it has been saved falls more in the realm of browser vendors because as a developer, you don’t really have much control over what’s “under the hood.” One of the best things that browser vendors can do, and in most cases are doing, is to...

  • Page 301

    part 4Advanced HTML5 Technologieschapter thirteen Using GeoLocationchapter fourteen Using Canvas to Create Online AdsactionURI(http://www.it-ebooks.info/):www.it-ebooks.info

  • Page 302

    actionURI(http://www.it-ebooks.info/):www.it-ebooks.info

  • Page 303

    285FOR MANY YEARS now, devices such as mobile phones have had built-in GPS locators that allow native applications to get the geographic location of the device at any given time. This functionality can now be accessed by your web applications too, using the new GeoLocation API. Although this API ...

  • Page 304

    HTML5 FO UND A TIONS286Figure 13-1 Using the GeoLocation API to highlight the nearest restaurant on the Locations page.Map data 2012 © GoogleGetting the User’s LocationThe GeoLocation API is remarkably simple to use. Browsers that support geolocation expose a geolocation interface that has a...

  • Page 305

    CHAPTER THIR TEEN USING GEOLOCA TION287The code for this exercise can be found in the download files for Chapter 13, folder 1. Here are the steps: 1. Download the geo.js file from the book’s website and place it in the js folder within your project directory. The geo.js file can be found in th...

  • Page 306

    HTML5 FO UND A TIONS288Once you have determined that the user’s browser supports geolocation, you can request his location using the getCurrentPosition() function.navigator.geolocation.getCurrentPosition(function(position) { // Do something with the location data});As you can see, getCurrentPo...

  • Page 307

    CHAPTER THIR TEEN USING GEOLOCA TION289 }} 4. Now call the getCurrentPosition() method on the geolocation object by add-ing an empty function block between the parameters of the method call. Note the presence of the position parameter in the function block below.if (navigator.geolocation) { nav...

  • Page 308

    HTML5 FO UND A TIONS290To test out GeoLocation, you will need to access the page from your local development environment (or a web server). Refer back to the section “Making Your Video Accessible” in Chapter 11 for more information on how to set up a local development environment. Now open th...

  • Page 309

    CHAPTER THIR TEEN USING GEOLOCA TION291Figure 13-3 An alert dialog showing my current position.Map data 2012 © GoogleCalculating the Distance Between Two Sets of GPS CoordinatesNow that you can successfully capture a user’s location data, it’s time to write code that will calculate the dista...

  • Page 310

    HTML5 FO UND A TIONS292The Haversine formula would usually return a distance in kilometers but for the purposes of this book I have altered it to return a distance in miles. This is all taken care of in the geo.js file.You will use this function to calculate the distance between the user and each...

  • Page 311

    CHAPTER THIR TEEN USING GEOLOCA TION293Calculating Distances for Each LocationIn this section, you are going to create a new function called findNearest that will take in the latitude and longitude coordinates of the user and calculate the distances for each of the restaurant locations. The funct...

  • Page 312

    HTML5 FO UND A TIONS294function findNearest(lat, lon) { // Calculate the distances. var d1 = haversine(lat, lon, 40.755018, -73.992556); // 310 West 38th Street var d2 = haversine(lat, lon, 40.791121, -73.973971); // 2450 Broadway var d3 = haversine(lat, lon, 40.757498, -73.986654); // 20...

  • Page 313

    CHAPTER THIR TEEN USING GEOLOCA TION295navigator.geolocation.getCurrentPosition(function(position) { // Pass the location data to the findNearest method. findNearest(position.coords.latitude, position.coords.longitude);}); 10. Save the geolocation.js file.Load the Locations page in your web b...

  • Page 314

    HTML5 FO UND A TIONS296The code for this exercise can be found in folder 5. Here are the steps: 1. Make sure that you have the geolocation.js file open in your text editor. 2. Create an if statement at the bottom of your findNearest() function and set the condition to: d1 <= d2 && d1 ...

  • Page 315

    CHAPTER THIR TEEN USING GEOLOCA TION297 }} 5. Add code to this new block that will add the nearest class to the <section> ele-ment with the ID location2.function findNearest(lat, lon) { ... // Find the smallest distance. if (d1 <= d2 && d1 <= d3) { // Location 1 docu...

  • Page 316

    HTML5 FO UND A TIONS298Figure 13-5 The finished Locations page with geolocation built in.Map data 2012 © GoogleSummaryThe new GeoLocation API is helping to bridge the gap between native applications and web applications. In this chapter, you learned how to take advantage of this new API in order...

  • Page 317

    299ONE OF THE most important new features of HTML5 is the new Canvas API (Application Programming Interface). The Canvas API allows you to programmatically draw graphics using JavaScript. You can use the Canvas API to do many tasks, includ-ing creating diagrams, charts, graphs, animations, advert...

  • Page 318

    HTML5 FO UND A TIONS300Setting Up Your CanvasTo create a canvas, you use the <canvas> element. The default size of a canvas is 300 pixels wide and 150 pixels high. You can, however, change these default dimensions by adding height and width attributes to the <canvas> element, like so:...

  • Page 319

    CHAPTER FOUR TEEN USING CANV A S T O CREA TE ONLINE ADS301 6. Attach an empty function to the window.onload event.window.onload = function() {} 7. Save the adscript.js file.Now that you have your file structure set up, it’s time to add the <canvas> element to your HTML.Canvas is not yet s...

  • Page 320

    HTML5 FO UND A TIONS302The code in this exercise can be found in folder 3. 1. Open the adscript.js file in your text editor. 2. Within the empty function block that you created earlier, create a new variable called adCanvas and initialize it by fetching the canvas from your HTML.window.onload =...

  • Page 321

    CHAPTER FOUR TEEN USING CANV A S T O CREA TE ONLINE ADS303Creating the BackgroundIn this section, you will add a rectangle to your canvas that will make up the advertisement’s background. However, before you get to that, you need to know a few things about how Canvas works.Think of a canvas as ...

  • Page 322

    HTML5 FO UND A TIONS304Now that you’ve covered some of the theory behind how the Canvas API works, you can start drawing on your canvas.The first object that you are going to draw is a rectangle. To do this, you use the fillRect() function:fillRect(x,y,width,height)The fillRect() function has f...

  • Page 323

    CHAPTER FOUR TEEN USING CANV A S T O CREA TE ONLINE ADS305 function drawAdvert() { }} 3. Call this drawAdvert() function after you initialize the ctx variable.if (adCanvas.getContext) { // Initialize a 2d drawing context. var ctx = adCanvas.getContext(“2d”); drawAdvert();} 4. Within the ...

  • Page 324

    HTML5 FO UND A TIONS306Adding TextThe next job to complete is to add the text to your canvas. In this section, you are going to focus on adding the “New York’s Best Pizza” and “Joe’s Pizza Co.” text, shown earlier in Figure 14-1.You draw text onto a canvas using the fillText() functio...

  • Page 325

    CHAPTER FOUR TEEN USING CANV A S T O CREA TE ONLINE ADS307Follow these steps to add the text: 1. Open the adscript.js in your text editor. 2. Set the font to Bold 32px Georgia.function drawAdvert() { ... // Add the text styling ctx.font = “Bold 32px Georgia”;} 3. Set the text alignment to ...

  • Page 326

    HTML5 FO UND A TIONS308 6. To calculate the y coordinate, divide the canvas height by 2. Create a variable called textY and initialize it with the result:function drawAdvert() { ... // Add the text styling ctx.font = “Bold 32px Georgia”; ctx.textAlign = “center”; ctx.fillStyle = “#...

  • Page 327

    CHAPTER FOUR TEEN USING CANV A S T O CREA TE ONLINE ADS309 var textY = (adCanvas.height / 2); // Add the “New York’s Best Pizza” text ctx.fillText(“New York’s Best Pizza”, textX, textY - 10); // Update the font and add the “Joe’s Pizza Co.” text ctx.font = “Italic 22px Ge...

  • Page 328

    HTML5 FO UND A TIONS310Drawing LinesThe next thing that you need to draw on your canvas is the separator line that goes between the two lines of text (refer to Figure 14-1).When using the Canvas API, you can draw lines by creating paths. To create a path, you start with the beginPath()function. A...

  • Page 329

    CHAPTER FOUR TEEN USING CANV A S T O CREA TE ONLINE ADS311Now that you understand how to create paths and draw lines, you can add the line to your canvas using the following steps.The code in this exercise can be found in folder 6. 1. Open the adscript.js file in your text editor. 2. First you ...

  • Page 330

    HTML5 FO UND A TIONS312 4. Now call the beginPath() function to create a new empty path.function drawAdvert() { ... // Add the separator line var lineLength = 360; var lineY = (adCanvas.height / 2) + 0.5; ctx.beginPath();} 5. Set the start point of your line using the moveTo() function. Th...

  • Page 331

    CHAPTER FOUR TEEN USING CANV A S T O CREA TE ONLINE ADS313 ctx.lineWidth = 1.0;} 8. Set the line color to rgba (255, 255, 255, 0.4), which is semitransparent white:function drawAdvert() { ... // Add the separator line var lineLength = 360; var lineY = (adCanvas.height / 2) + 0.5; ctx.begi...

  • Page 332

    HTML5 FO UND A TIONS314Drawing CirclesThe Canvas API only provides native functions for creating rectangular shapes. To create circles, you actually need to create a circular path that you can then stroke and/or fill, depend-ing on your requirements. To create a circular path, use the arc() funct...

  • Page 333

    CHAPTER FOUR TEEN USING CANV A S T O CREA TE ONLINE ADS315You can also draw a segment of a circle.ctx.beginPath();ctx.arc(50, 50, 50, 0, Math.PI*1.5, true);ctx.fill();Figure 14-7 shows the result of this code.Figure 14-7 Drawing a segment of a circle.Here the arc() function draws a curved path be...

  • Page 334

    HTML5 FO UND A TIONS316The code in this exercise can be found in folder 7. 1. Open the adscript.js file in your text editor. 2. Create a new path at the end of your drawAdvert() function using the begin-Path() function.function drawAdvert() { ... // Draw the offer circle ctx.beginPath();} 3....

  • Page 335

    CHAPTER FOUR TEEN USING CANV A S T O CREA TE ONLINE ADS317 ctx.fillStyle = “#009A00”; ctx.fill();} 6. Save the adscript.js file.You should now have a green circle displayed on the right side of your canvas, as shown in Figure 14-9. Notice how the edges of the circle go beyond the boundaries...

  • Page 336

    HTML5 FO UND A TIONS318var linGrad = ctx.createLinearGradient(0,0,0,160);linGrad.addColorStop(0, “#009A00”);linGrad.addColorStop(1, “#085A00”);ctx.rect(0,0,200, 160)ctx.fillStyle = linGrad;ctx.fill();This code would draw a rectangle on the canvas and fill it with the gradient shown in Fig...

  • Page 337

    CHAPTER FOUR TEEN USING CANV A S T O CREA TE ONLINE ADS319function drawAdvert() { ... // Create a Linear Gradient for the Circle var linGrad = ctx.createLinearGradient(0,0,0,160); // Draw the offer circle ...} 3. Add a color stop at position 0 that uses the color #009A00.function drawAdvert(...

  • Page 338

    HTML5 FO UND A TIONS320 // Draw the offer circle ctx.beginPath(); ctx.arc(525, 75, 80, 0, Math.PI*2, true); ctx.fillStyle = linGrad; ctx.fill();} 6. Save the adscript.js file.Now open the advert.html file in your web browser and admire your lovely new gradient. It should look like the one in...

  • Page 339

    CHAPTER FOUR TEEN USING CANV A S T O CREA TE ONLINE ADS321If you set this to 0 (the default) there will be no blur at all.Finally, the shadowColor property allows you to set the color of the shadow:ctx.shadowColor =”rgba(0,0,0,0.8)”;Here is an example of how you could create a shadow for a si...

  • Page 340

    HTML5 FO UND A TIONS322function drawAdvert() { ... // Set a shadow ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; // Draw the offer circle ...} 3. Set the shadowBlur property to 10.function drawAdvert() { ... // Set a shadow ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowBlur =...

  • Page 341

    CHAPTER FOUR TEEN USING CANV A S T O CREA TE ONLINE ADS323Figure 14-13 Adding a shadow to your canvas.Adding the Offer TextIf you look back at Figure 14-1, you will see three lines of text inside the circle. Unfortunately, there is no easy way to wrap text onto multiple lines using the Canvas API...

  • Page 342

    HTML5 FO UND A TIONS324 4. Set the font property to 24px Georgia.function drawAdvert() { ... // Add the Offer Text var offerTextX = (adCanvas.width - 75); ctx.fillStyle = “#FFFFFF”; ctx.font = “24px Georgia”;} 5. Draw the first line of text using the fillText() function. Use the offe...

  • Page 343

    CHAPTER FOUR TEEN USING CANV A S T O CREA TE ONLINE ADS325 ctx.fillText(“your first”, offerTextX, 84); ctx.fillText(“meal”, offerTextX, 113);} 8. Save the adscript.js file.Now if you open the advert.html file, you should see that the text appears within the cir-cle, as shown in Figure 1...

  • Page 344

    HTML5 FO UND A TIONS326ctx.fillStyle = “blue”;ctx.fillRect(60,0,50,50);ctx.restore();// Back to red again.ctx.fillRect(120,0,50,50);In this example, you set the fillStyle to red and draw the first square. You then call the save() function, which takes a snapshot of your current styles and sav...

  • Page 345

    CHAPTER FOUR TEEN USING CANV A S T O CREA TE ONLINE ADS327 // Set a shadow ...} 3. Now add a call to the restore() function before you draw the offer text.function drawAdvert() { ... // Restore the saved context ctx.restore(); // Add the Offer Text ...} 4. Save the adscript.js file.Problem...

  • Page 346

    HTML5 FO UND A TIONS328This function takes three parameters. The image parameter should be an Image object, not just a path to an image (more on this shortly), and the x and y parameters are used for posi-tioning the image on the canvas. Although it is possible to resize images on the canvas, by ...

  • Page 347

    CHAPTER FOUR TEEN USING CANV A S T O CREA TE ONLINE ADS329Add the background image to your canvas with the following steps:The code in this exercise can be found in folder 12. 1. Open the adscript.js file in your text editor. 2. Download the background.png file from the book’s website and pla...

  • Page 348

    HTML5 FO UND A TIONS330 6. Inside this function, write a call to the drawImage() function that will add your image to the canvas.if (adCanvas.getContext) { // Initialize a 2d drawing context. var ctx = adCanvas.getContext(“2d”); // Draw on the Canvas var img = new Image(); img.onload = f...

  • Page 349

    CHAPTER FOUR TEEN USING CANV A S T O CREA TE ONLINE ADS331Figure 14-17 The finished HTML5 Canvas advertisement.Pizza image reproduced by permission of iStockphoto.com/Lauri PattersonTo distribute the advertisement on partner websites, you need to send the JavaScript file (adscript.js) and the two...

  • Page 350

    HTML5 FO UND A TIONS332Every day, I wake up and feel privileged to work in an industry that is truly making the world a better place. The web industry is one of the most exciting places to work right now. So much is evolving that it is completely possible to be faced with a new challenge every si...

  • Page 351

    333THROUGHOUT THIS BOOK, you have learned about several HTML elements that can be used for layout and content markup. In this appendix, I cover some addi-tional HTML elements that can be used to mark up your text content.Indicating ImportanceThe <strong> element is used to signify that a pi...

  • Page 352

    HTML5 FO UND A TIONS334should be read with a different mood or voice. The following example conveys the tone that someone is very passionate about HTML5.<p>HTML5 <em>rocks</em>!</p>This would appear in most browsers as “HTML5 rocks!”Browsers will usually style text wit...

  • Page 353

    APPENDIX A ADDI TIONAL H TML MARKUP FOR TEXT335Figure A-2 The <ins> element, as displayed in Google Chrome.The <span> ElementThe <span> element has no meaning itself, but can be used to apply attributes such as class or id to a specific part of text. The element can then be used...

  • Page 354

    HTML5 FO UND A TIONS336You could also use the <dfn> and <abbr> elements together when defining an acronym:<p>The <dfn><abbr title=”World Wide Web Consortium”>W3C</abbr> </dfn> is the main standards body for the World Wide Web.</p>Most browsers w...

  • Page 355

    APPENDIX A ADDI TIONAL H TML MARKUP FOR TEXT337The low attribute is used to mark the upper boundary of the low section of the scale. If you were using a <meter> element to present the temperature in a room, this low attribute could be set to the lowest temperature that humans would be comfo...

  • Page 356

    HTML5 FO UND A TIONS338Progress BarsAlso new in HTML5, the <progress> element is similar to the <meter> element; however, this element should be used to represent a value that is changing instead of a value that has already been measured. This element is commonly used in applications ...

  • Page 357

    339THIS APPENDIX CONTAINS a list of the most commonly used HTML elements with definitions and examples for each of these elements. Note that I cover only the basic attributes for each of the elements here. For an exhaustive list of elements and their attributes check out the HTML5 specifications ...

  • Page 358

    HTML5 FO UND A TIONS340ElementDefinition<address>The <address> element should contain contact information for a section or page. <address> <a href=”mailto:matt.west@developercity.co.uk”> Email Matt </a> </address><article>The <article> elem...

  • Page 359

    APPENDIX B H TML ELEMENTS INDEX341ElementDefinition<blockquote>The <blockquote> element should contain content that is quoted from another source. <blockquote>To be or not to be.</blockquote><body>The <body> element should contain the main content of the docum...

  • Page 360

    HTML5 FO UND A TIONS342ElementDefinition<code>The <code> element is used to mark up a piece of computer code that is to be displayed in the page content. This could be a computer program or even a filename. <code> function boo() { alert(“Boo”); } </code><datali...

  • Page 361

    APPENDIX B H TML ELEMENTS INDEX343ElementDefinition<dl>The <dl> element is used to mark up a description list. <dl> <dt>Author</dt> <dd>Matt West</dd> <dt>Technical Editor</dt> <dd>Nick Elliot</dd> </dl><!DOCTYPE>T...

  • Page 362

    HTML5 FO UND A TIONS344ElementDefinition<figcaption>The <figcaption> element is used to add a caption to a <figure> element. <figure> <img src=”figure.jpg” alt=”My Figure”> <figcaption> This is my figure. </figcaption> </figure><fig...

  • Page 363

    APPENDIX B H TML ELEMENTS INDEX345ElementDefinition<h1> - <h6>The elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> are used to mark up headings in your page. The number in the element name represents the heading’s importance, with 1 being the most ...

  • Page 364

    HTML5 FO UND A TIONS346ElementDefinition<html>The <html> element represents the root of a HTML document. Everything except the DOCTYPE declaration should be enclosed within the <html> ele-ment. <!DOCTYPE html> <html> <head>...</head> <body>...</...

  • Page 365

    APPENDIX B H TML ELEMENTS INDEX347ElementDefinition<li>The <li> element is used to mark up a list item. <ul> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ul><link>The <link> element is used to link other reso...

  • Page 366

    HTML5 FO UND A TIONS348ElementDefinition<object>The <object> element represents an external resource that can be pro-cessed by a plug-in. Many developers use the <object> element in combina-tion with <embed> to embed a Flash application or video into a web page. <objec...

  • Page 367

    APPENDIX B H TML ELEMENTS INDEX349ElementDefinition<output>The <output> element is used to display the result of a calculation. <form> <label for=”speed”>Speed (MPH)</label> <input type=”range” name=”speed-mph” id=”speed” min=”0” max=”200...

  • Page 368

    HTML5 FO UND A TIONS350ElementDefinition<script>The <script> element is used to add JavaScript code to a web page. You can also use the optional src attribute to load JavaScript from an external file. <script src=”script.js”></script><section>The <section>...

  • Page 369

    APPENDIX B H TML ELEMENTS INDEX351ElementDefinition<span>The <span> element can be used to group a passage of text so that it can be targeted with CSS or JavaScript. The element itself has no semantic meaning. Mike The Frog is highly skilled in <span class=”nonsense”>HTMLJa...

  • Page 370

    HTML5 FO UND A TIONS352ElementDefinition<tbody>The <tbody> element should contain the rows that present the table data. <table> <thead> <tr> <th>Subject</th> <th>Result</th> </tr> </thead> <tbody> <tr> ...

  • Page 371

    APPENDIX B H TML ELEMENTS INDEX353ElementDefinition<tfoot>The <tfoot> element should contain a block of rows that consist of column summaries. You should place the <tfoot> element between the <thead> and <tbody> elements. <table> <thead> <tr> ...

  • Page 372

    HTML5 FO UND A TIONS354ElementDefinition<title>The <title> element is used to set the title of the web page. This will be displayed at the very top of your browser window and/or in the browser tab. <title>HTML5 Foundations</title><tr>The <tr> element is used t...

  • Page 373

    355NOW THAT YOU have finished this book, you are probably eager to go out and learn more about web development. In this appendix, I list some books and online resources that you might find useful for advancing your knowledge of web development.BooksHere are four books that I have personally found...

  • Page 374

    HTML5 FO UND A TIONS356HTML5, such as WebSockets, Drag & Drop, and Web Workers. The friendly writing style and occasional banter between Bruce and Remy make this book a really enjoyable read.• HTML and CSS: Design and Build Websites by Jon Duckett (John Wiley & Sons, Inc., 2011; ISBN: 9...

  • Page 375

    IndexSYMBOLS AND NUMERICS# (pound) sign, 58, 235$ (dollar) symbol, 235& (ampersand) character, 114( ) parentheses, 218* (asterisk) character, 161.. (double periods) symbol, 50. (period) symbol, 235.css file extension, 46.html file extension, 13.js file extension, 213.net website, 356: (colon)...

  • Page 376

    HTML5 FO UND A TIONS 358author link type, 60autocomplete attribute, 152autofocus attribute, 142, 152–153autoplay attribute, 247Bbackgrounds, 303–306, 328bar graphics, 337–338bar variable, 218Bare Bones Software TextWrangler, 10base URLs (uniform resource locators), 340<base> element,...

  • Page 377

    INDEX359coords property, 286, 288copyright symbol (©), 69copyright text, 67, 350createLinearGradient()function, 317–318cross-browser compatibility, 23–24cross-directory attacks, 282CSS (Cascading Style Sheets), 8, 45–50, 55CSS3 Foundations, 46, 356curly braces ({ }), 222, 276currentTime pr...

  • Page 378

    HTML5 FO UND A TIONS 360Event schema, 180–184events, 211Ffallback content, 243–244, 246, 301familyName property, 185faxNumber property, 174features sections, 39–40fields, 120, 123, 134–137<fieldset> element, 134–137, 343<figcaption> element, 97–100, 344<figure> elem...

  • Page 379

    INDEX361<option> elements, 348options, 132<span> element, 351<thead> element, 353guess variable, 225–226guessing game, 224–225H<h1> element, 53–55<h2> element, 53–55<h3> element, 53–54<h4> element, 53–54<h5> element, 53–54<h6> el...

  • Page 380

    HTML5 FO UND A TIONS 362itemid attribute, 171itemprop attribute, 169–171itemref attribute, 171–172itemscope attribute, 169itemtype attribute, 169JJavaScriptdecision making, 221–222DOM, 226–233event listeners, 220–221functions, 218–219general discussion, 210–212libraries, 233–236l...

  • Page 381

    INDEX363LocalStorage APIarrays in, 279–280clear() function, 269–270getItem() function, 267–268key() function, 269length property, 270objects in, 278–279overview, 266–267removeItem() function, 268saving user data from Bookings page, 270–275SessionStorage API versus, 280setItem() functi...

  • Page 382

    HTML5 FO UND A TIONS 364Microsoft IE (Internet Explorer) (continued)developer tools, 13general discussion, 9IE7 compatibility mode, 23video formats, 238Microsoft NVDA screen reader for Windows, 191–192MIME types, 134min attribute, 153, 157–159, 336model property, 186month input type, 150–1...

  • Page 383

    INDEX365Locations, 83–86Menu, figures and captions, 97–98Menu, overview, 89Menu, product images, 99–100Menu, tables, 90–97new, 13–14News, 100–105overview, 25, 73selecting elements, 228–233Sitemap, 86–89styling with CSS, 45–50text sections, 38–39validating, 20–22paragraphs, 7...

  • Page 384

    HTML5 FO UND A TIONS 366sandboxing, 267save() function, 325–327sayHello() function, 218–219schema.org, 168, 173–174schemasEvent, 180–184LocalBusiness, 172–180overview, 172Person, 184–186Product, 186–187scope attribute, 199–202screen readers, 191–193, 197–203<script> ele...

  • Page 385

    INDEX367tag link type, 60tag names, 231, 235tags, 15, 53–54target attribute, 59<tbody> element, 92–93, 352<td> element, 90–91, 352teamtreehouse.comCSS, 46HTML heading elements, 55input elements, 123instructions for, 3JavaScript Foundations course, 210, 236links, 61making web for...

  • Page 386

    HTML5 FO UND A TIONS 368Vvalidating code, 20–22validating dataBookings form, 157–160matching patterns, 163–164overview, 157regular expressions, 164–165requiring data from user, 160–161restricting, 162–163validator.w3.org, 21–22value attribute, 120–123, 131, 336–338value paramet...

Free HTML Books, HTML Book Pdf, HTML Pdf Books, HTML Pdf Books Download, HTML Pdf Books Free Download, Free HTML5 Books, HTML5 Book Pdf, HTML5 Pdf Books, HTML5 Pdf Books Download, HTML5 Pdf Books Free Download, Free ReadOnline Books, ReadOnline Book Pdf, ReadOnline Pdf Books, ReadOnline Pdf Books Download, ReadOnline Pdf Books Free Download,