Which book should I get if I’m learning HTML?
Wow, I can’t believe it’s been since June 25 since I last posted. I guess that’s what happens when you’re in the thick of writing a book. The good news is the book is almost done! Unfortunately, it will be out about one month later than we hoped – October, instead of September – but sometimes it’s better to delay and get it right.
I received a question today from Eric, a prospective reader, about which book he should buy: Head First HTML with CSS & XHTML or Head First HTML5 Programming (now the official title of the book, by the way). In his case, the right book to start with is Head First HTML with CSS & XHTML because Eric wants to learn HTML and CSS.
Even though we published Head First HTML with CSS & XHTML back in 2005, over 90% of the book is still completely relevant. When we update this book, we’ll be adding a few new HTML elements, a few new CSS properties, and changing how we talk about the future of HTML (and how we talk about XHTML), but essentially, the basics are the same. Which is great news, because it means that if you already know HTML and CSS, it’s fairly easy to upgrade your pages to HTML5 and make use of new HTML5 elements and CSS properties.
Head First HTML5 Programming picks up where Head First HTML with CSS & XHTML leaves off: this book is all about how you program HTML with JavaScript. That includes basics, like how to update your page by adding content to it dynamically, as well as newer JavaScript APIs you can use to program new elements like <video> and <canvas>, and to use functionality like Geolocation, Web Storage, and Web Workers. If you don’t know JavaScript yet, we’ve got you covered; we take you on a whirlwind tour of JavaScript so you know what you need to know to use all the cool stuff in the rest of the book.
Hopefully that answers your questions about which book to buy. They are designed to go together, starting from the basics of HTML & CSS in the first book, through fairly hard core JavaScript programming by the time you get to the end of the second book.
More updates to come as we finish up the book; then I’ll have a lot more time to write blog posts.
Why isn’t my HTML / CSS working?
One of the most common questions I get asked related to beginning HTML and CSS is “Why isn’t this working?” Unfortunately, I can’t look at everyone’s individual project or I wouldn’t have time to do my own projects, but now and I then I do take a look if it looks like it will be something fast and one of the most common errors I see is special characters in the text. This often happens when you cut and paste from a program like Microsoft Word, which uses special characters for characters like quotes. In fact, that was exactly the case today, when I received a question from a reader who was stuck on the very first example from Head First HTML with CSS & XHTML; his CSS just wasn’t working and he was incredibly frustrated, understandably so! When I loaded his HTML file and took a look at the source using my browser, I noticed that his opening style tag had special characters around the type attribute:
This type of error is hard to catch, especially for beginners. In your editor, you’re seeing quotes, so you never know there’s a problem unless you “view source” using your browser and see the special characters in the source window (which displays plain text).
So, two tips:
- Make sure your editor is set to plain text so no special characters are inserted into your HTML and CSS
- If you’re having problems, look at the source using the “view source” menu (in Safari, View > Source). This will often uncover problems like special characters that you might not be seeing in your regular editor.
Keep sending your questions; I’ll try to answer them personally or on my blog!
Using CSS Media Queries to Style Your iPhone and iPad HTML
In my previous post, I showed how you can use JavaScript to detect orientation and style your iPhone and iPad pages.
You can also do this purely with CSS Media Queries!
Visit our CSS & HTML resource center for a full listing of new, events, and products.I’ve reworked the file I made for that example to use CSS Media Queries to do just that. I split the iPad style into two files: ipad-portrait.css, showing the upcoming and new content under the news content; and ipad-landscape.css, showing the upcoming and new content to the right of the news content. The behavior of the web page is the same in the previous example, but doesn’t require any JavaScript to make it all work. (Caveat: I was not able to get the iPhone simulator to respond to the orientation property in my CSS Media Queries; for this example, it didn’t matter, but keep that in mind if you want to load a different style on the iPhone on an orientation change).
Here are the new links, showing the updated CSS Media Queries:
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">
As you can see, I’ve got three CSS files; one for iPhone, two for iPad and I use the ipad-landscape.css file also for desktop machines with a minimum width of 1025px.
I’m attaching screenshots below showing the results in iPad portrait and landscape, and iPhone.
iPad in landscape orientation:
iPad in portrait orientation:
iPhone:
Head First HTML5 Programming
Head First HTML and CSS 
Head First Design Patterns
leave a comment