Seven years of sleeping - Catching up using Head First HTML with CSS & XHTML

by Heather Lang

Related link: http://www.gulshatfund.org.uk



The problem - you need to produce a website ... and fast



The goalposts haven't just moved - they've fallen in the deep end of the swimming pool!

When I last took the time to learn how to produce the best web page possible, I stood proud in the knowledge that I'd used tables rather than frames for layout. CSS1 was unsupported by the browsers most people were running, and implemented differently by the rest. CSS2 was merely a twinkle in W3C's eye.

So I had a lot of catching up to do when I was asked if I'd volunteer to produce a website by a friend who's the chief fund raiser for Lily. She's a little girl who's come over to the UK for an operation she can't have in her own country. And they had a TV appearance scheduled for later in the week when they wanted to give out the URL, so I had to produce something reasonably professional-looking ... and fast.

Enter "Head First HTML with CSS and XHTML!"



Coincidentally, "Head First HTML with CSS & XHTML" had just arrived on my desk and what better way to test its merits? It was a little odd at first, looking at it from the point of view of learning about its content rather than learning how to write a Head First book! I guess this is a field-test kind-of review, but only from the personal angle of what was useful to someone in my position (i.e. OK with hand-coded HTML, clueless about CSS, got to produce a good website in 24h).

Personal Comments about the book



I skipped the first few chapters, which cover thing like text editors, directory structure, images, basic markup, hosting, etc - basically everything a complete beginner would need to get started on producing something. I skipped the chapter on XHTML - I didn't require it (and neither does the rest of the book).

Once I got to the bit that was useful for me, I didn't read the chapters in order. It was a case of flicking backwards and forwards finding the bits I wanted. For a start, divs and spans - I'd heard of them but didn't know how to use them. The bit about the box model and the distinction between margin, padding etc was a good start and the chapter on using divs for layout was fantastic.

I flicked through the book until I found reasonable layouts then read around them to see how they were done. I typed in some of the code from the book then played about with it myself to see what would happen. Even if this hadn't been my natural inclination, I'd have been encouraged to do this anyway by the little 'Sharpen your pencil' and 'Brain power' exercises spread throughout the book. I skipped these and made up my own, so that I only played with code that looked like it might do what I wanted.

I just took what I needed. I don't know how to make stylesheets cascade, for example, but I'm confident that I know where to look should the need arise. It did break some bad habits - I'd never seen much of a difference between doing [br][br] and doing [p], and hadn't seen the point of the [/p] tag. And I'm never going to use stuff like [b] again!

General Comments about the book



Something very interesting is that we learn about using CSS for layout - and quite complicated layouts - before we even hear of a table. This is brilliant for the beginner, who would never even dream of using a table for layout by the time they get to the end of the book - they'd see it as being a data only thing (and now, so do I!). It is also typical of the style - you learn about things as you need them, rather being told about too much at once and getting confused.

There are also chapters and sections that are over and above what it says on the tin (American readers should do a search for Ronseal at this juncture). Not only do we learn about text editors and directory structures, but there is a whole chapter on styling with fonts and colours which will hopefully stop a rash of beautifully-coded-but-rubbish sites appearing in the wake of this book.

One section I wish had been in there (to help with the problems I came across when doing the Lily Gulshat page) is work-arounds for the fact that some popular browsers (not pointing the finger at IE in particular ...) don't get the cell padding attributes right. There's a list of the "top ten topics we didn't cover" at the end of the book which gives a brief overview and recommendations of books or websites. Perhaps this should have been number eleven. Yes, times change and people install new browsers but I can imagine many Windows users (or people running IE 5 on the Mac - hands up both of you) getting confused about why their layouts looked different from the ones in the book.

The other section would have been something pointing out that transparent PNGs don't render properly in the current versions of IE. I use Paintshop Pro for graphics, have IE on my PC and spent ages trying to work out what I was doing wrong when saving the image - only to switch back to the Mac and find the page as I'd imagined it. To be fair, a "No Dumb Questions" spot on page 175 mentions that PNGs aren't supported by all browsers - I'm probably asking for the moon on a stick here as I was going against the books advice by using them.

Conclusions



From a HF point of view, this is the best title I've seen yet. The colour helps enormously and the layout is like Head First Design Patterns but even better - and much less cluttered than HF Java. The graphic elements flow more rather than competing - I think this is a mark of the series maturing over time.

From a web authoring point of view, I'd like to wholeheartedly thank Eric and Beth for thinking up as many little things that might go wrong as possible (e.g. the problems with the footer on the Starbuzz Coffee website overlapping other divs), pointing them out and showing you how to fix them. Most textbooks only show you how to do things right, then you spend hours working out what went wrong. (Things always go wrong.) This and other HF books show you what wrong looks like as well, so you recognise it when you see it, and are better equipped to work it out for yourself after solving similar problems.

Would I, personally, have spent $34.95 USD on it? No - I already knew too much about the subject, just as I wouldn't buy a beginners' chess book unless I wanted it for good teaching examples. Would I tell an HTML novice to spend $34.95 on it? Unreservedly.

Yes, there are free guides on the web, but your time is important, right? You'll save so much time from the book pointing out common problems and giving you the tools you'll need to work things out for yourself when stuff goes wrong. I had to learn this the hard way when I picked up HTML and am enormously thankful that I didn't have to with CSS. It bought me enough time to get the site up and running before everyone appeared on the BBC's "South Today" and ITV's "Central News" programmes!