Pages Navigation Menu

Software Mastery, the Fun Way

Head First HTML5 Programming

Posted by on Apr 15, 2011 in Books | 39 comments

Published in October, 2011, Head First HTML5 Programming is the highly anticipated follow on to Head First HTML with CSS & XHTML (2005).

What can HTML5 do for you? If you’re a web developer looking to use this new version of HTML, you might be wondering how much has really changed. Head First HTML5 Programming introduces the key features — including local storage, audio and video tags, geolocation, and the canvas drawing surface — and uses concrete examples and exercises to apply and reinforce these concepts. You’ll learn how to use HTML5, Javascript, and CSS3 to create fast, interactive sites with no plugins.

  • Get the low-down on changes to basic HTML
  • Understand JavaScript’s relationship to HTML5
  • Bring out your inner artist with Canvas
  • Use the technology to add audio and video
  • Take advantage of local storage
  • Put your browser to work with Web workers
  • Learn how HTML5 deals with geolocation, and more

We think your time is too valuable to waste struggling with new concepts. Using the latest research in cognitive science and learning theory to craft a multi-sensory learning experience, Head First HTML5 Programming uses a visually rich format designed for the way your brain works. Best of all, you’ll learn HTML5 in a way that won’t put you to sleep.

If you want to get your own web site up and running online to show off your new HTML5 skills to the world, here is a list of hosting providers we recommend.

  • Saven Roybal

    Uhm, it’s a little ironic that this page is written in xhtml 1, and that it doen’t load well in Chrome. Just saying…

    • Anonymous

      Yeah… it’s the wordpress theme we’re using!

    • http://www.facebook.com/erictfree Eric Freeman

      Ironic indeed!

  • Anonymous

    Up until page 48 and ‘ for and while loops ‘, your tutorial and implementation is lucid and clear to a javascript novice. Slow going but reasonably clear and clearer with practice. And then you throw in the inevitable “oh they know what we mean”. Snippet 1) The ubiquitous ‘ i ‘. Seen everywhere in javascript without explanation. The ‘ ++ ‘, again without explanation in Snippet 1 again….”oh they know what we mean”….The ‘ – - ‘ yet again. The trap of code writers losing the object of the objective, Making presumptions. Not good and a cause for code novices hatred of code writers. Not really hatred, you do a great job but Javascript is NOT easy. I repeat,, NOT f*****g easy. Now I have to reference another book to see what you mean. Maybe that’s what you want. But that’s not what I want.
    That said, we plod on, less sure of your clarity.

    • Anonymous

      Thanks for your comment, we do rush through the JavaScript a bit. We were really torn about whether to assume programming experience for this book, and decided to try to teach a little JavaScript before getting to the HTML5 stuff, but obviously didn’t have room to do an expansive job.

      We’re hoping to start a series of JavaScript tutorials on this blog. In the meantime, check out my post on “incrementing variables” which might help a bit.

  • http://www.facebook.com/bszolosi Babi Szolosi

    Hi,
    I enjoy this book very much and you make things look so easy. Having a C background the for loop jafdpmoran is worried about seems even easier.
    BUT, displaying the sales.json data in the mightygumball.html in Chapter 6 is really a puzzle. I’ve tried many things and nothing seems to work.
    The json file displays in the browser when I view it locally (but not through localhost or on the remote server). The html file displays both through localhost and the remote server, but without the data.
    I added an alert after the request.status check, it shows “0″. Then I added an alert(request.responseText); after the if statement and it returned th contents of the sales.json file.
    What am I doing wrong? Any help will be highly appreciated.

    • Anonymous

      Hi Babi,
      The JSON file should display if you load it from localhost; if it doesn’t then something’s wrong with your localhost or the URL and will cause the XMLHttpRequest to fail. Which page are you specifically having problems with? You must have the JSON file in the same domain as you are using to serve your web pages. Check the URL again…

  • Raghavendra bsrg

    You guys Totally Rock!!! Guys a million Thanks to your hardwork for your Awesome Head first html5 book, I have Studied it, and tried to do my best in my holidays and have created this out of the box simple, OPENSOURCE Desktop based webapp!! Do check it out!

    http://siriusdwaraka.co.nr

    Ofcourse, It may not be totally filled with high level stuff, but i’ve done my best in 20 days of my holidays.. :)

    Do tell me how it is.. raghavendrabsrg@gmail.com

    Once Again.. Madam Elisabeth and Sir Eric freeman, I totaly Love you guys! <3

    • Anonymous

      Thanks Raghavendra! Your app is pretty cool.

  • Anonymous

    Thanks! Fixed…

  • Anonymous

    I like the JSONP approach in “Talking to the web” chapter. It is a bit of a mystery as to how the server side has been implemented. Is the code available with an explanation?

  • Anonymous

    I like the JSONP approach to “talking to the web” in Chapter 6 of the HTML5 Programming book. It is a bit of a mystery to me how the server side is implemented. I know the JSON string is sent when a GET is requested but I would be interested in the details. Is this code available for inspection with some explanation?

    • Anonymous

      Hi, the server side is implemented using node.js, which is a server side JavaScript. It simply generates the JSON code and outputs the JSON as a response to an http request. I’ll see what I can do about putting the script in the github for the book.

      Thanks for your comment!

  • http://lanti.myopenid.com/ Ingo Lantschner

    Hi, this would be a great book, if printed in color. I absolutely do not understand, how someone can put so much effort into a colorful layout and than publish it in black-and-white. It looks like a cheap pirated copy!

    • Anonymous

      We agree! We pushed the publisher to try to get color, but no go. The PDF eBook is in color though…

      • Katya Kean

        I LOVE the PDF versions. I tried reading another Head First book in other formats, but I think PDF is the best, all-around. It looks great on my tablet in Adobe Acrobat, and I can write in answers to all the exercises.

  • Robert Hollinger

    maybe i’m the only one that actually follows directions and does the exercises but your first mission browser reconnaissance references a page on your site that doesn’t exist….well actually it does exist but it’s case sensitive…book explicitly says CAPS in the URL (page 17) and you have to use lower…

    • elisabethrobson

      Hi Robert, yeah I just noticed that recently! Sorry about that. We’ll get it fixed in a future printing. Thanks for pointing it out.

      • Robert Hollinger

        might be simpler/cheaper to change the web site to allow for either…

  • http://www.facebook.com/adoniscanlobo Adonis Canlobo

    when i`m done with my html & css book, next, i`ll be digging through this book.. excited.

  • CD

    Hi, I’m from Germany and I read this book in german. On Page 129, the code from “Kopfnuss” doesn’t work, please can someone try to explain, why I see this error in all browsers: Uncaught TypeError: Cannot set property ‘onclick’ of null ?

    here is the code:

    var element = document.getElementById(“button”);

    element.onclick = function() {
    alert(“Klick”);
    }

    thank you

    CD

    • http://wickedlysmart.com/ Elisabeth Robson

      Hi, This error means one of two things: either you don’t have an element in your page with the id “button”, so check to make sure you really do. OR, it means you are trying to execute this JavaScript too early, before the page has loaded completely. In this case, make sure the code is either inside a window.onload function, or move the script to the bottom of the page (right before the closing body tag). Hope this helps!!

      • CD

        Hi Elisabeth,

        Thank you very much for this really fast answer!!

        Now it works with the “window.onload” function!

        Greetings from Germany
        CD

  • Jason

    Hello, I wrote a review two days ago. But it didn’t show up…

    I have a question about chapter 6. In this chapter, we used JSONP to retrieve data from gumball.wickedlysmart.com every 3 secs, and set the lastReportTime to handle the duplicate data.

    But I don’t know how we decide the time between retrieving data. If I set the interval to 10 secs, will I lose some data? I’ve compared the 3 sec version and 10 sec version and found they got the same data. The 10 sec version got all the data between its last retrieving.

    Is this the server side’s work? The server know the last time we retrieving and what data we’ve got and send us all those we haven’t got yet? So we just consider how often we want to update and retrieve the data and not need to worry about losing data?

    I’m from Taiwan. Sorry for my poor English.

    • http://wickedlysmart.com/ Elisabeth Robson

      Hi Jason, great question! It is handled on the server side. We are creating a new response every few seconds, and you can retrieve up to a certain maximum number of gumball responses with one request. So if you make the time between requests too long, yes you’ll miss data. We note the time of your new request so we can provide all data that was generated after that request.

      • Jason

        “You note the time of my request” means the server will save the last time report variable of each request for “each browser window”? When we send a new request, it knows who I am and compares the present time and the last time report variable it saved, so we never get duplicate data?

      • http://wickedlysmart.com/ Elisabeth Robson

        No, you’re sending the time of the last requested item when you make a new request (we can’t distinguish your request from anyone else’s)! So we look at that last request and make sure the new ones you get have a time stamp later than that.

      • Jason

        Oh, I got it. Thanks for your reply :)

  • Jason

    Hello. I have a question about the video files used in chapter 8.

    We set the dimension of “preroll.mp4″ to 480*360 in our web page. But when I see the file in Finder, I found the dimension was 320*240. I played the video in QuickTime Player, and the information in inspector showed the format was 320*240, and current size was 480*360, and I can’t set it to “Actual Size” or “Decrease Size”. (But when I played it in iTunes, it seemed was played at 320*240.)

    Just want to check we do resize and “scale” the size of the “preroll.mp4″ video? Or can you tell me the wired thing about the QuickTime Player dimension?

    • beth

      The file is actually 320 x 240 (not sure why Quicktime is reporting it wrong). We do scale up the video by setting the width and height to 480 x 360 in the web page (I think we did this to make it look bigger). We were not able to get a larger version of the video. Ideally the video size in your web page would match the actual video size (so the browser doesn’t have to scale it).

  • Jason

    The video effect program running on safari was so laggy, and not very smooth on google chrome and firefox. I took the code download from this site and got the same result. Did I make fault somewhere?

  • CD

    Hi,

    the code in chapter 7 doesn’t work. It seems, that twitter has changed something, so that I cannot receive the tweets for the “Tweetshirt”-App. Please can you tell me, what I have to do? I tried new code from twitter but it doesn’t work too. I work at a mac.

    Sorry about my poor english.

    Thanks for an answer, so that I will see the tweets. (The code in your examples (online) doesn’t work too)

    Greetings from Germany

    CD

  • http://wickedlysmart.com/ Elisabeth Robson

    Yes, unfortunately Twitter has changed their API and now require authentication for every request, even the public timeline. I posted about this here, with a workaround for the book example: http://wickedlysmart.com/twitternews/

    • CD

      Thanks a lot!

  • http://www.facebook.com/ChrisSlone1980 Chris Slone

    Hi again Elisabeth,

    I know I just message you about my problem on page 234 but I was able to get the code to not throw that access error. Now instead in shows this error ”

    Entering… websiteLogonOTP.js:11
    websiteLogonOTP.processOTPPagewebsiteLogonOTP.js:11
    websiteLogon.receiveBGwebsiteLogon.js:333
    (anonymous function)websiteLogon.js:271
    chrome.Event.dispatchToListenerevent_bindings:387
    chrome.Event.dispatch_event_bindings:373
    chrome.Event.dispatchevent_bindings:393
    chromeHidden.Port.dispatchOnMessagemiscellaneous_bindings:254
    tab URL: http://localhost/gumball/MightyGumball.html, document URL:http://localhost/gumball/MightyGumball.html websiteLogonOTP.js:12
    websiteLogonOTP.processOTPPagewebsiteLogonOTP.js:12
    websiteLogon.receiveBGwebsiteLogon.js:333
    (anonymous function)websiteLogon.js:271
    chrome.Event.dispatchToListenerevent_bindings:387
    chrome.Event.dispatch_event_bindings:373
    chrome.Event.dispatchevent_bindings:393
    chromeHidden.Port.dispatchOnMessage” Again any help to figure this out appreciated.

  • http://www.facebook.com/ChrisSlone1980 Chris Slone

    Elisabeth

    I apologize yet again for being a spam messenger but I realized that the only reason I was able to get past my original issue of XMLHttpRequest cannot load http://localhost/gumball/sales.json. Origin http://mercury.gtc.edu is not allowed by Access-Control-Allow-Origin. Was I was running my browser with security disabled for testing but when browser security is back on it wont work.

    • http://wickedlysmart.com/ Elisabeth Robson

      That’s right. You cannot access a web service from a different machine unless you have security disabled. This is the cross-domain security issue described in the book.

  • Chris Fuselier

    In Chapter 6, was unable to use JSON even on a local server in both Chrome and IE10. Looks as if the MIME is not supported in IE10 and I couldn’t resolve using ISS even after adding the .json MIME.
    Also need to update book Chapter 7 to accommodate changes in JSONP in Twitter API 1.1. Still have not figured out how to get tweets (even my own) since you now need an authorization code.