Slashdot Mirror


Sams Teach Yourself HTML and CSS In 24 Hours

r3lody writes "Sams Teach Yourself HTML and CSS in 24 Hours 8th edition, by Julie C. Meloni and Michael Morrison, provides the beginning and intermediate web designer with the tools needed to create standards-based web sites. The major focus of the book is XHTML 1.1 and CSS 2, but HTML 5 and some XHTML 1.0 are discussed. Overall, the presentation and content are very good. One small minus was that the publisher's site did not include downloadable examples from the book. I also found no errata until the latter parts of the book. Published in December of 2009, the 8th edition provides reasonably current information." Read on for Ray's review. Sams Teach Yourself HTML and CSS in 24 Hours (8th edition) author Julie C. Meloni and Michael Morrison pages 456 publisher Sams rating 8/10 reviewer Ray Lodato ISBN 0672330970 summary A very useful text on web page coding using XHTML and CSS. Each "hour" of the book includes a "What You'll Learn in this Hour" section at the beginning, and Q&A, Quiz and Exercises sections at the end. Most chapters also include a "Try It Yourself" section, indicating what you should be accomplishing with your own web site. The examples have color coding for the various tags, comments, etc., and the book's examples work with a number of browsers. Specifically, Apple Safari, Google Chrome, Microsoft Internet Explorer, Mozilla Firefox, and Opera browsers were used to test the examples. If you use the coding standards espoused in the book, your web pages should appear properly formatted across most computers. Handheld browsers are only covered briefly, in the section discussing media-specific style sheets.

Overall, the book is divided into five parts: Getting Started on the Web, Building Blocks of Practical Web Design, Advanced Web Page Design with CSS, Advanced Web Site Functionality and Management, and Appendixes.

Part I: Getting Started on the Web provides the customary introductory material, suitable for beginning users. After describing the seemingly obligatory "history of the web", the first hour concludes with discussions of how to choose a web hosting provider – a topic rarely covered in the books I've read. The second hour teaches how to get web pages uploaded to a web server using FTP, and how to distribute content in a file-based structure without a server. The next two hours then cover the basics of XHTML 1.1 and CSS 2. For both XHTML and CSS, very clear instructions on how to validate your coding help insure that your pages follow the standards.

The next 9 chapters comprise Part II: (Building Blocks of Practical Web Design). This part goes into detail regarding web page coding. Starting with text alignment using paragraph tags and lists, the book has a good collection of text formatting tips using CSS as the preferred style methodology. Tables and links are covered in the next two chapters at a pretty standard level. I found the chapter on using color had a lot of good information, but I believe a beginning user would find it somewhat confusing – especially when hexadecimal notation is introduced.

The next three chapters of this part of the book cover images and multimedia. I liked the focus on getting the right sizing for photos and banners, and the tutorial on how to place the images on the web page (including wrapping text, image maps, and clickable images). I was disappointed in the limited coverage of tiling and GIF animation. The multimedia chapter was a pleasant addition – one I have rarely seen in web design texts. The discussion was tilted toward Microsoft technology, so my testing worked properly only under Internet Explorer at first, however I finally managed to get Firefox to deal with the embedded object. Some information was given for embedding YouTube links, also. I would have liked to have seen more information on the parameters for the WMP object coding. The last chapter in Part II covers frames – both framesets and iframes – with only basic information.

Advanced Web Page Design with CSS is the main topic of Part III. These six chapters dig into the important aspects of CSS alignment. One chapter focuses entirely on margins, padding, alignment and floating, and provides a nice introduction to the full discussion of the CSS box model in the next chapter. Reformatting lists was the principal target of the next chapter, leading to a discussion of navigation bars (horizontal and vertical) in the chapter after that. This is where I started picking up on some irregularities that escaped a review. For example, even though this was supposed to be standard XHTML, I noticed some list item ending tags missing from the examples. Granted, browsers still display the list properly, but this should have been caught before printing.

The last two chapters in this part cover modifying text display using mouse actions, and fixed versus liquid layouts. I liked the mouse techniques to modify a displayed image based on which thumbnail image the mouse is over. It's a simple little method that looks very nice on the page. The liquid layout chapter gave me some problems at first. My attempts didn't work the same under different browsers at first, but when I went back over them while writing the review, they worked just fine. I'm still at a loss to understand what was wrong, so I suspect those starting out may have a similar experience.

The final major part, Advanced Web Site Functionality and Management, wraps up some miscellaneous issues. First, they cover how to create a modified CSS profile to make the web page more print-friendly. The next chapter provides an introduction to JavaScript. Unfortunately, this is where I found some more non-standard XHTML code. Web-based forms are covered only at a high-level in hour 22. The authors do provide examples of each type of form field, with CSS code to neaten up the page, but it appears to be a very cursory handling of the topic.

The final two hours go over the basics of keeping your web site organized, and how to publicize the site on major search engines. The book wraps up with a final part for the two appendixes, containing useful links to further information and a general XHTML and CSS reference.

Teach Yourself HTML and CSS in 24 Hours appears to be a properly authoritative text that would help you create a standards-based web site. Like most texts of this type, it does not reference web design software such as DreamWeaver. Rather, it addresses understanding exactly what code standards-based browsers will handle, and how you can manipulate them to create exactly what you want. The two main disappointments with the book are the obvious errors in the later chapters, and the lack of downloadable examples from the publisher's web site. That said, the content is so worthwhile, I rated it an 8 out of 10.

You can purchase Sams Teach Yourself HTML and CSS in 24 Hours (8th edition) from amazon.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.

27 of 107 comments (clear)

  1. Only 24 hours? by XxtraLarGe · · Score: 4, Informative

    I haven't been able to pull an all-nighter since college (though I've come close playing Civ or Starcraft), but I'll give it a try!

    More likely, they mean "Teach yourself HTML/CSS in 24 1 hour lessons" or something like that. I found I was able to learn the basics of HTML & CSS in about an 8 hour day. The problem is the moving target HTML has become over the years, though even that is a minor adjustment. I think this type of books is probably o.k. for most people, but it would be better if they used a free resource like W3 School's free tutorials.

    --
    Taking guns away from the 99% gives the 1% 100% of the power.
    1. Re:Only 24 hours? by sakdoctor · · Score: 4, Informative

      The hard part of CSS was keeping track of, in exactly which manner, IE6 fucked it up.
      Now that the holy Google has given us all permission to drop IE6, into flaming animated .gif after-life for bad browsers, CSS just got a whole lot easier.

      http://www.quirksmode.org/css/contents.html

    2. Re:Only 24 hours? by Bluesman · · Score: 2

      So what IS the alternative to a relatively scaled HTML table in CSS that works across all browsers?

      As of a few years ago, I found none.

      --
      If moderation could change anything, it would be illegal.
    3. Re:Only 24 hours? by Shados · · Score: 4, Insightful

      IE6 was the worse, but pretty much all browsers screw(ed) up pretty badly at one point or another. And HTML/CSS leaves a lot of the default implementations to the browser developers, so while there are many "implicit" agreements between Firefox, Safari, and even IE, they're not part of the standards. So its still a moving target. I remember back in the days of Firefox 3.0 (which isn't long ago in human years, but feels like forever ago in Web years). I would systematically assume that Firefox was right, and IE was not.

      Until I hit display:inline-block, which at the time IE got right on SOME stuff, and firefox never got right at all. Took me a while to figure that one out :) (Its been fixed since then, but...)

    4. Re:Only 24 hours? by MisterZimbu · · Score: 2, Interesting

      I'm still a tables guy- to me, doing anything remotely complicated in CSS is completely unintuitive and backwards, and requires ridiculous hacks before you even get to IE (no vertical alignment? lack of proper columns?). The real problem with web layouts today is that neither HTML Tables nor CSS were designed with layout in mind, so everything requires far too much effort to set up properly. To me, I'd rather deal with the (much smaller) hassle of using tables for layout than deal with the significant hacks to get around the severe limitations of CSS.

      Hopefully when CSS3 gains some more widespread acceptance and some of the layout-oriented modules (the CSS3 table ascii-art module and/or the Flex Layout module) gain some traction, I'll be able to switch over.

    5. Re:Only 24 hours? by Blakey+Rat · · Score: 2, Interesting

      Ok, I consider myself a pretty sharp guy, and I've been working with the web for ages, but I still can't use CSS without running into major problems every single time. Some of them are design issues, some of them are just me not being able to wrap my head around it.

      For example, CSS doesn't have variables... so you can't say something like "headerColor = #5444BB" and just use that wherever you want the header color. What were they thinking!?

      CSS also can't do math, so a simple construct like "width = 10px + 5em" is impossible. (You can't do this without math because the number of pixels in an em can change based on browser/font settings.) What were they thinking!?

      The first thing I need in my CSS site is columns, you know, like newspapers had in the 17th century. What? You mean CSS has no support for columns until version 3, which is only now beginning to get any browser support at all? The only way to get columns is kludgy workarounds. What were they thinking!?

      Design issues aside, I usually end up with a page where there's a completely unexplainable pixel gap, or an element wrapping when it shouldn't, or some thing or another. Usually, the only way I can solve these problems amounts to, basically, guess and check... maybe I'm an idiot, but the way CSS does layouts just won't fit in my head at all.

      Obligatory link to "CSS is awesome" mug: http://www.zazzle.com/css_is_awesome_mug-168716435071981928

    6. Re:Only 24 hours? by djheru · · Score: 4, Insightful

      quote: For example, CSS doesn't have variables... so you can't say something like "headerColor = #5444BB" and just use that wherever you want the header color. What were they thinking!?

      That's what css classes are for:
      CSS - .blueHeader { color: #5444BB; } .redHeader { color: #BB4445; }

      HTML -
      I'm Blue
      I'm Red

    7. Re:Only 24 hours? by Bogtha · · Score: 3, Informative

      Until I hit display:inline-block, which at the time IE got right on SOME stuff, and firefox never got right at all. Took me a while to figure that one out :) (Its been fixed since then, but...)

      That's because inline-block was originally a proprietary Internet Explorer property. It was added to CSS 2.1 years later, at which point the other browsers implemented it.

      --
      Bogtha Bogtha Bogtha
    8. Re:Only 24 hours? by fm6 · · Score: 5, Informative

      You young folk don't know how good you've got it. I cut my teeth doing all-nighters at the campus computer center, that being the only way to get decent turnaround on the 360 mainframe. (Don't know what I'm talking about? Google "batch processing" and "IBM cards".) With that training, I was able to pull all-nighters well into my 40s. Though it wasn't nearly as much fun by then — everybody else was gone by 6, the wimps.

      The w3schools.com is very impressive. Not only do they provide a huge amount of well-written content, they have these cool web apps that let you fiddle with code and see the results immediately. I've never worked through any of their tutorials, but when I google for information on some HTML or CSS feature, I end up on w3schools.com about 75% of the time. That should tell you something.

      W3.org is also a valuable resource. They are, after all, the authoritative source for HTML, CSS, and lots of other web technologies. Two pitfalls: their target audience is implementers and standards wonks, not web developers; and you have to watch out for features that never got implemented.

      Despite these issues, it's really a good idea to write web code that targets the W3C specs rather than specific browsers. That way you'll have web pages that work on most browsers and don't break whenever somebody tinkers with Gecko or Trident.

    9. Re:Only 24 hours? by fm6 · · Score: 2, Insightful

      IE6 was the worse, but pretty much all browsers screw(ed) up pretty badly at one point or another.

      True. Back when Netscape still dominated the browser market, they took a lot of flack for their private extensions to HTML.

      And HTML/CSS leaves a lot of the default implementations to the browser developers, so while there are many "implicit" agreements between Firefox, Safari, and even IE, they're not part of the standards.

      The vagueness is by design. You can't specify exactly what a given element will do, because there are all kinds of factors you don't know anything about: resolution, display size, color depth, etc. Unfortunately, most web designers still don't get this. Instead of learning the official description of an object, they just look at the way it's rendered on their particular setup and say, "Oh, that's what it's supposed to do."

  2. Re:Why type? by Captain+Splendid · · Score: 3, Insightful

    Does anyone still type in HTML or CSS anymore? Don't you just bring up a WSYWIG designer and just publish your page?

    I mean, Please! This is the 21st century wtf are we still typing for christ-sakes?!


    This is why.

    --
    Linux, you magnificent bastard, I read the fucking manual!
  3. Misinfromation in 1st Chapter by acoustix · · Score: 4, Informative

    I found this while previewing the book on Amazon's website: "Suppose you want to do a Google search, so you dutifully type http://www.google.com in the address bar"..."Your web browser sends a request for the index.html file located at the http://www.google.com/ address"

    While it's not the end of the world, it certainly is an error that will misguide a beginner on how traffic is exchanged between a browsing client and the web server. The web browser does not assume index.html. That is the job of the web server to assign a default document whether its index.html, default.htm, index.php, or yourmama.html.

    --
    "A plan fiendishly clever in its intricacies"- Homer Simpson
    1. Re:Misinfromation in 1st Chapter by DavidD_CA · · Score: 5, Informative

      That is the job of the web server to assign a default document whether its index.html, default.htm, index.php, or yourmama.html

      I sent a request for yourmama.html last night, and it was 200 OK.

      --
      -David
    2. Re:Misinfromation in 1st Chapter by Anonymous Coward · · Score: 2, Insightful

      I would have gone with "402 Payment Required"

    3. Re:Misinfromation in 1st Chapter by andi75 · · Score: 5, Informative

      +1 funny mods don't give karma points to the author. To work around this, the moderators decide to

      - mod moderately funny jokes as funny
      - mod great jokes as informative or insightful

      The practice is widespread and metamods generally agree with it (I think, at least I still get mod points...).

    4. Re:Misinfromation in 1st Chapter by Bogtha · · Score: 5, Funny

      I can't reproduce that. I keep getting 413 Request Entity Too Large instead.

      --
      Bogtha Bogtha Bogtha
  4. Re:Why type? by Pojut · · Score: 2, Insightful

    I certainly don't do html hard coding anymore, but back in the day when I was in middle school ('95-'98) learning HTML from a couple of books, I did everything in notepad. There is no way I would hard-code an entire website nowadays, but I'm glad I started with the straight coding...it has made learning PHP MUCH easier.

  5. Re:I learned it ... by rgo · · Score: 4, Insightful

    Maybe in 2 hours you learned the very basics, like changing fonts and colors. Learning how to do complex layouts will take you a much longer time, due to broad scope of CSS (CSS 3 is massive) and because every browser implements CSS differently.

  6. Re:would be nice if .... by tthomas48 · · Score: 3, Interesting

    In defense of HTML and CSS, MySpace was not really what I'd imagine the web would look like. MySpace only lets you insert HTML and CSS via what is essentially an injection attack. Tumblr let's you rewrite the entire page and I see plenty of tumblr blogs that look just fine.

  7. X in 24 hours by QuoteMstr · · Score: 5, Informative

    Doesn't everyone know that X in 24 hours books neither teach you X, nor do it in 24 hours? They're super low-end guides generally that contain outdated information that could just as easily have been gleaned from tutorials. Meh.

    I can't believe Slashdot ran an ad^H^H^H^H review of this book.

    1. Re:X in 24 hours by west · · Score: 2, Insightful

      I hadn't realized that *literally* judging a book by its cover gets you moderated 'Informative'. It will be interesting to see how the parent rates versus postings that actually address the content of the book.

  8. Why XHTML? by Kozz · · Score: 2

    A case against XHTML

    Not only is it possibly harmful to send XHTML (xml) as text/html, all your style and script blocks need to be wrapped in all kinds of comment / (P)CDATA silliness to truly validate correctly, etc. Read the article and you may decide that HTML 4 (strict) is the way to go.

    On the other hand, if someone would like to refute the points in the link above, I'd welcome an alternate perspective.

    --
    I only post comments when someone on the internet is wrong.
    1. Re:Why XHTML? by Blakey+Rat · · Score: 2, Interesting

      The big problem with XHTML is that the W3C was wasting their time with this format that offers dubious benefit, made browsers more complicated, on the assumption that older versions of HTML would just... I dunno... magically go away. (At which point, browsers could be made simpler again.) Oh, and of course they didn't bother to figure out what actual websites on the actual Internet need, so it's incompatible with a ton of hugely popular tags. (For example, Atlas Universal Action Tags don't validate in XHTML Strict.)

      Oh boy. I can do a XLST transform on my homepage. That gets me... what exactly?

      Not that I'm really that opposed to XHTML, what pisses me off most is that they were working on this useless thing when they could have been actually working on HTML5 in the first place.

  9. "Sams" is All I Needed to Know by mikestew · · Score: 3, Interesting

    I think I've learned more from Sams books by fixing the numerous bugs in the sample code than reading the text.

  10. Re:Why type? by dubbreak · · Score: 2, Insightful

    Does anyone still type in HTML or CSS anymore? Don't you just bring up a WSYWIG designer and just publish your page? I mean, Please! This is the 21st century wtf are we still typing for christ-sakes?! This is why.

    Dreamweaver is more aptly called nightmare weaver. Quick and dirty one up static page? Sure use WYSIWYG. Editing something existing with well thought out hand written CSS? Forget it, you are just going to screw things up.

    Of course static hand created webpages in this day are the real WTF. For anything more complicated than a few pages it makes a lot more sense to run a CMS. Design the template once properly so it looks correct on the major browsers and let users change the content via the CMS. No luser should ever be FTPing anything to or from the site and the "web master" of past should not longer exist to shuffle changes on a website. It's not the 90's anymore. We have great (and free!) tools to manage creating, editing and publishing content on websites.

    --
    "If you are going through hell, keep going." - Winston Churchill
  11. Two minor corrections... by r3lody · · Score: 2, Informative

    Two minor corrections: (1) The downloadable content is available. The publisher's had a glitch on their web site that has since been corrected (but not until after I had finished the review - oh well!) If you go to http://www.informit.com/title/0672330970 and click the Download tab, you'll get it. (2) The link for purchasing goes to the 7th edition. This is the 8th edition, and the link to that book is http://www.amazon.com/Sams-Teach-Yourself-Hours-Coverage/dp/0672330970/ref=sr_1_1?ie=UTF8&qid=1265061056&sr=8-1.

  12. Re:I learned it ... by QRDeNameland · · Score: 4, Funny

    Ya, I saw the title and I thought "Really? That seems a bit long..."

    Well, we all know that /. is way too advanced of an audience for this book. Wait for the review of the upcoming SAMS title: "Teach Yourself Writing Self-Aware Device Drivers with Brainfuck in 17 Minutes".

    --
    Momentarily, the need for the construction of new light will no longer exist.