Forgot your password?
typodupeerror
Book Reviews Books Media

Head First HTML with CSS & XHTML 197

Posted by samzenpus
from the jump-in dept.
Graeme Williams writes "In the past, I've written the sort of poorly-structured non-compliant web pages that can only be produced by a combination of laziness and confusion, so I'm an ideal test subject for Head First HTML with CSS & XHTML, an introduction to building web pages which focuses on compliance with the most recent HTML 4.01 standard and XHTML 1.0 standard. The book starts with the simplest of web pages, and builds from there to a solid foundation for writing simple well-structured web sites. It's clear and thorough, and will be effective both for the complete beginner and in bringing stale skills up to date." Read on for the rest of Graeme's review.
Head First HTML with CSS & XHTML
author Elisabeth Freeman & Eric Freeman
pages xxxv + 658
publisher O'Reilly Media
rating 10
reviewer Graeme Williams
ISBN 0-596-10197-X
summary A clear, effective and readable explanation of standards-compliant HTML, XHTML and CSS


This is one of those cases where you can judge a book by its cover. In addition to the title and author, the cover of Head First HTML with CSS & HTML has seven tag lines, four photos and two drawings. One of the nuggets is, "A learner's guide to creating standards-based Web pages", which is a pretty good summary of the book and its intended audience.

Head First HTML is full of the sort of distractions that would normally make my skin crawl: people talking at me from the margins, mock conversations between inanimate objects (or in this case HTML tags), crosswords, quizzes and enough cute graphics to supply the kindergartens of a fair-sized city. It's clear that the authors realize that there might be some resistance to this style because they devote five pages of the introduction to explaining why they wrote the book this way – the summary of the summary is that novelty helps your brain learn. The example chapter you can download from the web site for the book is more than 50 pages, which might be enough for you to make up your own mind whether this works for you. My experience was that the method is so effective and the material so clearly presented that the issue disappeared for me after a chapter or two.

In the introduction, the authors also mention another goal: "a clean separation between the structure of your pages and the presentation of your pages". HTML or XHTML is used to provide the structure and content of a web page, and CSS (Cascading Style Sheets) are used to provide the style and layout. This means that the book doesn't include many HTML elements which are now discouraged or "deprecated", such as <B> for bold, <CENTER> for centered text, or <FONT> for specifying fonts within the web page. I guess the choice between frames and CSS might be classified as a religious one. In any case, this book is about CSS and doesn't mention frames except to note their omission in the appendix.

Most of the examples are based on a fictional coffee company called Starbuzz, and their trendy competitor, the Head First Lounge. It's a great framework for building up a web site from a few linked pages to a complete CSS layout. If you've never written a web page before, the book starts at the beginning, with the simplest web page followed by links from one page to another. If, like me, you've written a handful of web pages, reviewing the material will help focus on the essentials for a clean, compliant web page. All of the example HTML, CSS and accompanying images can be downloaded from the web site for the book, which also has the completed examples online, so you can quickly review them in your browser. If you're considering buying Head First HTML, the online examples are also a great way to see the scope of the book, from the simplest example to the most sophisticated.

There are a few prerequisites for getting the most out of Head First HTML. Adobe Photoshop Elements is used to show you how to prepare images for the web. As the book says, if you don't have it, you can download a free trial from Adobe, with the small quibble that this won't work if you've already run through your free trial before starting the book.

Understandably, Head First HTML doesn't tell you everything you might ever need to know about CSS. On the other hand, you learn a whole lot about using CSS both for appearance (such as colors and borders) and layout (positioning different parts of the page such as headers and sidebars). The book is particularly good at explaining at least some of the limitations of CSS, such as the different compromises of liquid, jello and frozen layouts. It's easily enough for you to be able to continue learning or experimentation on your own. With forgivable cuteness, the book also frequently mentions the availability of other O'Reilly publications with more information, such as HTML Pocket Reference and CSS Pocket Reference.

Similarly, the book gives a clear presentation of the different ways of setting text size, but doesn't provide the last word. If you're looking for Javascript to automatically size text based on screen resolution and browser width, you'll have to look elsewhere. In fact, Javascript is one of the ten things mentioned in the appendix, "The Top Ten Topics We Didn't Cover", leaving room for Head First Javascript to be published in 2006.

The last chapter provides a brief introduction to forms, including example designs both with and without tables. The goal of the chapter is to show you how to use CSS to style and layout forms, but you can't try out a form without something on a web server to process it, so the book's web site includes a simple-back end which will "process" (really just echo) the forms which are submitted to it.

Head First HTML deserves its score of 10, but that doesn't mean every word is perfect. I wasn't comfortable with the description of CSS borders, margin and padding until I'd gone back and re-read it. And it wasn't obvious to me that the background of a margin (such as a dashed margin) is the same as that of the content area it surrounds until I'd worked through some examples on my own. But that just underlines the fact that the book is so readable that I could tell when my understanding was slipping.

While Head First HTML never claims to be a reference, information is presented very clearly. If you forget the differences between HTML and XHTML, the book's excellent summary is easy to find, and includes a discussion of the W3C HTML and XHTML validator. That said, the index is short and idiosyncratic: there is a list of page references for the Q&A sections (under T for "There are no dumb questions") but transitional HTML is indexed only under "HTML, transitional&quot, and jello, the layout, is found under "Design" but not "J" or "Layout".

I've said that I was initially very skeptical about the graphics-heavy Head First Labs house style. I'm pretty sure I've been thinking in prose all my life, but apparently verbal and graphical perception can be safely intermingled. I can't explain why, but this garden salad of words, pictures and diagrams of all kinds provides a easy-to-read and very effective introduction to a large amount of material."


You can purchase Head First HTML with CSS & XHTML from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.
This discussion has been archived. No new comments can be posted.

Head First HTML with CSS & XHTML

Comments Filter:
  • by VGPowerlord (621254) on Friday February 03, 2006 @03:30PM (#14636944)
    I really hate it when I see an HTML book that teaches things that have been deprecated in modern HTML.

    I'm actually being forced to take a class in introductory web design. The books for this class are fairly new, yes seem to be stuck in the HTML 3.x days, with font tags, bgcolor properties, and a particular emphasis on the 216 (215?) web-safe colors.

    I wish books like this one were used instead. Teaching the right way the first time is so much easier than having to tell someone that everything they learned was wrong.

    • by MikeFM (12491) on Friday February 03, 2006 @04:02PM (#14637212) Homepage Journal
      I agree. I work quite a bit with students who've just been taught HTML by their schools and they really are taught nothing about CSS. These are comp sci and graphic arts students for which web developing is a major job skill and they know next to nothing about CSS. They certainly aren't being taught to do anything advanced and most still use out-dated HTML when CSS would work better. A lot of things I do all the time they simply think you can't do. Pretty limiting.
    • Like any profession, it's easy to start out doing something the easy way because you don't know any better. Unfortunately, we can trace a lot of the reason that people don't do it the right way to their formal education. Like you said, pretty much everything the newbies are learning is old hat or deprecated.

      My alma mater teaches how to "write HTML" using Dreamweaver, along with the concepts of "styles", which is really the lame .style1, .style2 font effect crap that DW pulls. Basically, nobody comes out of

    • I really hate it when I see an HTML book that teaches things that have been deprecated in modern HTML.


      Deprecated HTML elements (and browser sniffing) will be around for as long as Microsoft refuses to fix MSIE. This includes MSIE 7.0.
    • seem to be stuck in the HTML 3.x days

      Since I teach a course that includes XHTML and CSS, publishers often send me every web-related book they can think of, in the hopes I will adopt one as a text. Most are horrible. The number of vaidation errors in example code is astounding. I had always assumed that those who wrote books took some time to actually learn the material first. Apparently not.

      The Head First book is the first one I have ever seen that treats the whole subject the "right" way, rather

  • Uh-oh! (Score:4, Interesting)

    by Billosaur (927319) * <wgrother@NosPAm.optonline.net> on Friday February 03, 2006 @03:37PM (#14636999) Journal
    Most of the examples are based on a fictional coffee company called Starbuzz

    Can somebody say lawsuit?

    As to the book itself, I looked at the sample chapter and it's in the random, jumpy style that marks the modern MTV generation. It has some appeal, but I think trying to get through a whole book laid out like that is going to cause headaches. Still, I plan to buy it, just to see if I can learn anything new.

    • Re:Uh-oh! (Score:5, Insightful)

      by kelzer (83087) on Friday February 03, 2006 @03:47PM (#14637078) Homepage

      As to the book itself, I looked at the sample chapter and it's in the random, jumpy style that marks the modern MTV generation.

      That's what I thought, too, until I read the preface to Head First Design Patterns. Turns out that the pictures, humor, etc., have actually been proven to improve learning and retention.

      • Re:Uh-oh! (Score:5, Interesting)

        by Excelsior (164338) on Friday February 03, 2006 @06:05PM (#14638111)
        Turns out that the pictures, humor, etc., have actually been proven to improve learning and retention.

        As someone who has read several in the "Head First" series, this is definitely true in my experience. Most books are designed to cover a subject with little emphasis on teaching it. Head First books are designed specifically to teach you, and they go to great effort to do so. Think about it: do you retain more per hour spent watching the History Channel, or reading a dry all-text history text-book? Remember, the book can take dozens of hours to read. The text-book may provide more complete content, but that doesn't matter much if you've forgotten much of it within a few months.

        You will remember what a Head First book teaches you, and you won't need the book as a reference like most text-books.

        If the grandparent wants to stick to all-text, old-world books, he can go right ahead. But he should try a "Head First" book before he criticizes it.

        As for his reference to the MTV generation, that is simply misplaced. Children and young adults have despised reading boring text books since the invention of the alphabet. Don't let nostalgia The difference is that today they cannot live a high quality life without knowledge. I, for one, commend innovators like Bert Bates and Kathy Sierra for making sure that there are better options for learning that is rewarding for people of nearly all ages.
    • No way. I own both Head First Java and Head First Design Patterns, and I can tell you that the format rocks. It keeps you interested with pictures, funny examples and an edgy writing style. I enjoy reading technical books in general (sad I know), but I still prefer the HF approach to even a well written traditional style book.
    • I would disagree. I personally can't stand the "random, jumpy" style used by MTV in any form either. But I don't think this book is guilty of that.
      They use a flashy style to draw attention to particular concepts. It is used to FOCUS.

      That is very different from what I consider MTV-editing, which is used to abstract, or pile a bunch of images/concepts into a single "idea", or feeling. There is no focus.
      • by jc42 (318812)
        What I wanna see is the CSS that creates the "handwritten" notes with arrows pointing into the code.

        (I'd be really impressed if they actually did that via CSS. But I'm prepared to be disappointed.)
    • I got the Head First Java book, which was written in a similar, mind-numbing manner. It really isn't helpful, but its good for a laugh. Amazon tends to rate these books very highly, but I'd reccomend one that takes a more seriuos look; you dont need a book full of dumb analogies to understand html/css.
  • by Anonymous Coward on Friday February 03, 2006 @03:37PM (#14637005)
    This book can never be any good! Everyone knows <html> comes before <head>!
  • Head First! (Score:5, Insightful)

    by CanadianBoy (868003) on Friday February 03, 2006 @03:38PM (#14637008)

    While I haven't read this particular Head First book, I have nothing but praise for the rest of the series.

    The 'Learner's Guide' is exactly right; they explain everything they do clearly, they make the examples and exercises fun and easy to understand, not only on what to do, but why to do it. The books are graphically appealing and funny (and it's not just nerd humor), which makes them easy to read, but at the same time they don't sacrifice information, or simplify it beyond understanding.

    Sight unseen, I would recommend this book, the same way I do their other ones.

  • I guess the choice between frames and CSS might be classified as a religious one.
    eh? It's perfectly possible to use both. They don't exclude each other.
    • I guess the choice between frames and CSS might be classified as a religious one.

      eh? It's perfectly possible to use both. They don't exclude each other.

      When most people compare frames and CSS, they are talking about layout -- specifically, using frames to position data as opposed to CSS absolute positioning. More often, people compare CSS to table-based layout, though.

  • by heffel (83440) <dheffelfinger&ensode,net> on Friday February 03, 2006 @03:43PM (#14637055) Homepage Journal
    Amazon [amazon.com] has it cheaper than BN. ($23.07 vs $27.96)
  • by ZX-3 (745525) on Friday February 03, 2006 @03:47PM (#14637075)
    non-compliant web pages that can only be produced by a combination of laziness and confusion
    ...here at my job it's mostly a combination of laziness and ColdFusion.
  • by Ranger (1783) on Friday February 03, 2006 @03:51PM (#14637103) Homepage
    Skip the review. Read Zeldman's awesome Designing With Web Standards. [zeldman.com] It will change your life. At least until you read the next life changing book.

    Zeldman is also teaming up with Eric Meyers, the CSS God for An Event Apart. [aneventapart.com]
    • by pileated (53605) on Friday February 03, 2006 @06:17PM (#14638228)
      These are both very good books but they address two different audiences. Zeldman's book, which I've just finished reading for second time, is for more advanced html authors/designers. It addresses people who have been through the trials of browser incompatibilities and are looking for something better. As I said I think it's excellent. And his alistapart site shows just what great web design can be done using web standards.

      But this book is for beginners. I just finished reading it. I didn't learn a whole lot but I did pick up a few things I had either never known or forgotten about. I may give this book to my wife who'd like to write some pages for herself. She's a complete neophyte. But I think this book is really geared to people like her. I believe one of the blurbs on the book talks about how refreshing it is to see a book that will start off new html/css authors with a foundation in standards. That I think is the real appeal of the book. It shows beginning authors how to use html/css using standards. And it does it in an entertaining and instructive way.

      I wasn't particularly fond of Head First Java but I love Head First Servlets and JSP. The humor in this is quite a bit tamer but it's still a very good book for someone either just beginning html/css or looking for a basic review.

  • by digitaldc (879047) * on Friday February 03, 2006 @03:55PM (#14637136)
    In the past, I've written the sort of poorly-structured non-compliant web pages that can only be produced by a combination of laziness and confusion

    Wait a minute, were you copying my style!?! [gmu.edu]
  • by goldspider (445116) <{ardrake79} {at} {gmail.com}> on Friday February 03, 2006 @03:59PM (#14637183) Homepage
    Designing With Web Standards [zeldman.com] by Jeffrey Zeldman [zeldman.com].

    And it's cheaper [amazon.com] .
  • Other markups (Score:3, Insightful)

    by MrNaz (730548) on Friday February 03, 2006 @04:00PM (#14637192) Homepage

    Given that the market at the moment is trying to squeeze as much functionality out of existing technologies and the increasing use of new markup languages such as SVG and MathML, I would have thought that more and more books would start teaching XHTML/CSS.

    XHTML will allow far better flexibility when adding in new functionality provided by new markup languages as well as better machine readability for the purposes of migrating pages at a later date. Tools to assist in developing syntactically valid XHTML pages are easily available and easy to use (such as Firefox's Validator tool as well as the old trusty http://validator.w3.org/ [w3.org]), so the argument that novices may break XHTML pages by not writing valid code is not as potent as it once was.

    The challenge now lies in teaching students to write semantically correct markup. This cannot be checked by a validator or any other machine tool, as semantically incorrect markup may still follow the rules of syntax. However, it can break a braille browser or a mobile device that degrades pages' layout for the purposes of displaying it on a small screen, rendering the information inaccessible to users of these devices.

    XHTML's stricter syntax far more strongly encourages users to think in terms of content/presentation rather than just writing a blob of HTML to show a nicely formatted essay/blog/gallery. The more information is both syntactically and semantically correct, the more the web will be a friendly place for users of devices other than PCs, or users who are accessing the web from a device designed to aid a disability.

    It is for these reasons, forward compatibility and accessibility, that I think that XHTML should start being taught. I always hear it argued, when I recommend XHTML to a would-be developer, that "XHTML is not understood" and "it breaks pages if used incorrectly". Well, help users to understand, and teach them to use it correctly.

    • Well, help users to understand, and teach them to use it correctly.

      "Correctly" in this case meaning on private intranets and specifically not on the public World Wide Web, as all publicly available versions of the web browser with 85 percent market share do not read XHTML anywhere close to correctly. Microsoft Internet Explorer 6 doesn't display pages sent as application/xhtml+xml at all, and sending XML as text/html is considered harmful [hixie.ch].

      • "Correctly" in this case meaning on private intranets and specifically not on the public World Wide Web, as all publicly available versions of the web browser with 85 percent market share do not read XHTML anywhere close to correctly. Microsoft Internet Explorer 6 doesn't display pages sent as application/xhtml+xml at all, and sending XML as text/html is considered harmful.

        This FUD gets dragged up everytime there is a story on web standards. Look at the spec for XHTML 1.0 Strict. It specifically allows te

  • by newdamage (753043) on Friday February 03, 2006 @04:07PM (#14637249) Homepage Journal
    I bought this book with the intention of reteaching myself the "right way" to do web design. I've used CSS for a few years now, but I've never gone the full 9 yards and completely separated all my markup from all my presentation. I always had the occasional deprecated HTML tag in there because it was what I was used to.

    After seeing the impressive amount of control you get from moving away from tables and tags to nothing but XHTML and CSS I was ready to make the jump.

    The first half of this book won't be anything new to most people, but in the 2nd half of the book I've never seen the box model, div layout, and css explained so clearly. It's made adjusting my web design skills much much easier.

    Highly recommended.
  • Reviewerwho? (Score:3, Interesting)

    by DysenteryInTheRanks (902824) on Friday February 03, 2006 @04:14PM (#14637307) Homepage
    I guess the choice between frames and CSS might be classified as a religious one.

    Choice between WHAT? I think you mean between CSS and tables. Or CSS+XHTML vs. Whatever HTML-like Syntax Works.

    But really, there is no need to choose. I use the deprecated b tag all the time, because it is SIMPLE, love to use tables, because they WORK for displaying on various screen sizes, plus (gasp) deploy the font tag from time to time for quick prototypes. And, guess what? I also use CSS. Fact is, Firefox and IE support CSS alongside HTML elements. And so the standards.

    I could care less about what is "deprecated" by W3C, as though they are going to come over and scold me, and as though I would care.

    • Yup. (Score:3, Insightful)

      by ScentCone (795499)
      But really, there is no need to choose. I use the deprecated b tag all the time, because it is SIMPLE, love to use tables, because they WORK for displaying on various screen sizes, plus (gasp) deploy the font tag from time to time for quick prototypes

      I agree. They can take my <B> tag when they pry it from my cold, dead text editor.

      Really... a few nested tables work just FINE. And, if you happen to build e-commerce sites catering to a large cross-section of humanity, you'll find yourself serving
      • Really... a few nested tables work just FINE.

        No. They don't. For you all who don't understand the point of standards and tableless design, let me break it down:

        The whole point of design that involves compliant markup and avoids the use of tables is this: it is 100% portable to any device, and to any user. Your PDA or mobile phone (as well as your blind friend's screen reader and your deaf-blind-friend's braille display) need to receive document structure and text only. Then they can present as best fits

    • I could care less about what is "deprecated" by W3C, as though they are going to come over and scold me, and as though I would care.

      I can understand where you are coming from on these types of issues and you can do whatever you want with your own sites, but it would be foolish not to see the other side of that coin as well. The web was built upon standards and would not be nearly as large, widespread, or useful as it is today without these types of agreements. If the web were instead released with propr
    • I use the deprecated b tag all the time

      The <b> element type is not deprecated.

      • I seem to remember xhtml strict compliance checkers bitching when I've accidentally used bold and italic tags in the past (old habits die hard).

        This page [webpageworkshop.co.uk] says that bold and italic are merely discouraged, but that the underline tag is no longer allowed.
    • Re:Reviewerwho? (Score:3, Informative)

      by Phroggy (441) *
      If you write valid HTML 4.01 Transitional, you can keep most of your old familiar tags, keep your nested tables, use CSS when you want, AND get all the advantages of writing valid code: it works more consistently across browsers, and HTML validation tools (including http://validator.w3.org/ [w3.org]) can save you hours of time tracking down weird rendering bugs caused by stupid typos.

      The basic hoops you have to jump through:
      1. Add a DOCTYPE declaration at the top
      2. Specify the character set with the Content-type header (
  • XHTML and CSS simply aren't very good for entering manually; only total gearheads would think that XHTML is an improvement over HTML (it's an improvement only in that it is better defined).

    So, just use one of the many tools like Textile, or use a WYSIWYG editor.
    • If you think CSS is more typing than plain HTML formatting and attributes, you obviously havent done much CSS. It can save you tons of repetive code by allowing you to define classes and formatting globally for whole groups of elements in your pages. XHTML doesnt add much code and allows you much more functionality such as searching your tags and translating pages from your site into other formats using XLST or some other transform (i.e. deliver your web pages in PDF format on the fly). Also, you would have
  • by bw-sf (937673) on Friday February 03, 2006 @05:56PM (#14638046)
    <b> is not deprecated. Everyone thinks it is for some reason.
    http://www.w3.org/TR/xhtml-modularization/abstract _modules.html#s_presentationmodule [w3.org]
  • XHTML and CSS are the way to go, but CSS definitely has to improve. Designing a liquid two-column with header and footer layout using CSS is a nightmare, especially if you have to support several browsers. Doing the same thing with a simple table is much more simple.
    Just having the footer at the bottom of the page, and not just behind the body is (AFAIK) impossible with CSS.
    The easiest solution is often to go with fixed size and absolutely positioned divs, but then you reduce the accessibility of the page (
    • Designing a liquid two-column with header and footer layout using CSS is a nightmare

      Actually, it's really simple. But Internet Explorer doesn't support that bit of CSS. So really, it's Internet Explorer that has to improve, not CSS.

      Just having the footer at the bottom of the page, and not just behind the body is (AFAIK) impossible with CSS.

      Not true. Here's one technique [themaninblue.com].

      • Actually, it's really simple. But Internet Explorer doesn't support that bit of CSS. So really, it's Internet Explorer that has to improve, not CSS.

        It's simple... until you have to make it look good. Add a border between the left bar and the body that goes down to the footer, and it becomes trickier. Then add to the mix that you don't want the body to fall below the left bar when it becomes larger than expected (big images or large tables), and it's even harder. Not to mention the problems when you star

  • Hate to rain on the parade here, but I have both Head First Java (EXCELLENT) and Head First Design Patterns (also EXCELLENT) and this book.

    IMO, this book is not even close to the other two. The other two have a nice flow, while this book feels jumpy and cobled together. It's like the other with the fun sidebars and graphics, but just not as well done. I'd like to offer some specifics but the book is on the shelf in my office and I'm home - I just know I wasn't impressed with it like the other two. I literal

Things equal to nothing else are equal to each other.

Working...