Head First HTML 2/e

From WikiContent

(Difference between revisions)
Jump to: navigation, search
(Chapter 6: Serious HTML)
(Chapter 5: Meeting the Media)
Line 100: Line 100:
=== Chapter 5: Meeting the Media ===
=== Chapter 5: Meeting the Media ===
* Use PNG as primary format along with JPG and GIF
* Use PNG as primary format along with JPG and GIF - DONE
* Update images of iPod
* Update images of iPod - DONE
* Make sure we refer to img as a "void" element, not "empty"
* Make sure we refer to img as a "void" element, not "empty" - CHECK
* Page 169-170, 175, 192, 205 - needs to include PNG
* Page 169-170, 175, 192, 205 - needs to include PNG - DONE
* Page 178 - may appear dated - use iPod Touch perhaps
* Page 178 - may appear dated - use iPod Touch perhaps - DONE
* Page 182 - check default size guidelines given - still valid?
* Page 182 - check default size guidelines given - still valid? - CHECK
* Page 185-190 - Use Online tool, not photoshop elements?
* Page 185-190 - Use Online tool, not photoshop elements? - NO, DONE with updated PE.
* Styles - DONE
* Styles - DONE
Line 112: Line 112:
* Code Quotes - DONE
* Code Quotes - DONE
* Element graphics - DONE
* Element graphics - DONE
* Screenshots - DONE
* Screenshots
* Updates above
* 1 IE screenshot (from Sarah)
* Review PNG intro, need one more page
* Review 3-say fireside chat
=== Chapter 6: Serious HTML ===
=== Chapter 6: Serious HTML ===

Revision as of 00:56, 4 February 2012


Plan for HF HTML 2ed

Update HF HTML to *be* HTML5:

  • Doctype updates
  • new structural elements from HTML5
  • new CSS selectors
  • a few CSS properties (e.g. box shadow, text shadow, rgba, text layout, etc.)
  • new CSS layout (table, flex)
  • possibly simple transforms
  • some of the Forms stuff
  • REMOVE: moving from transitional to strict
  • MOVE: XHTML chapters to end

Errata to fix

Confirmed Errata (not complete, still working on this list):

  • Page 19 - include info on how to find File > Open in IE (it can be hidden)
  • First example (page 30) - make sure it works in all browsers (including IE6)
  • Page 323 - lounge.html should be elixir.html

Chapter Updates and New Chapters

  • Across the board - we'll need some browser Watch It's for features not supported in certain browsers. I like doing the Watch It's for this because they are easy to take out later!

Chapter 1: The Language of the Web

  • Update instructions to create file and load into browser
    • Use Firefox or IE8
    • Update security issue for files/images (chapter 5 too)
  • Page 6 - need question about "I've heard about HTML5, what's the story" - DONE
  • Page 12 - Step 3: Update Keep in Dock - it's now in the Options> submenu (need new screenshot) - DONE
  • Page 13 - Step 5: Options still the same, but screenshots of preferences menus are different, need to update those
  • Pages 14, 15, 18, 19, 20 - Update screenshots of windows
  • Page 16 - Update apps - golive is dead, fp is dead - DONE
  • Page 16 - Add new browsers to list - chrome, etc - DONE
  • Page 29 - A little issue here, we use type="text/css", which needs to change. Further we use it to introduce the idea of an "attribute", I'd suggest a simple comment and go with it, and later we can explain ti can be relaxed. The NDQs below is probably the place to say it isn't necessary. - DONE
  • Page 36 - Just a note on attributes here - I think it is okay as is. - DONE
  • Errata - DONE
  • Styles - DONE
  • Bubbles - DONE
  • Windows Screenshots - DONE
  • Eric's pass - DONE
  • Beth's final pass -
  • QUOTES - ?

Chapter 2: Meeting the HT in HTML

  • Page 51 - style use here. - I think it's okay (Beth)
  • Page 51 - strictness language is too strong, needs to be backed down (minor issue) - I think it's okay (Beth)
  • Page 52 - update reference to definitive HTML source - left note, need to check OR catalog
  • Page 55 - Just a note to look a <a> usage in case it has any slight changes - updated NDQ to reflect new rules for <a>
  • Page 58 - updated screenshot to current version of Chrome
  • Page 65 - updated NDQ to reflect longer limit (variable) on URLs and no spec definition
  • Page 68 - updated screenshot in exercise to fix error in Directions page
  • Eric's pass - DONE
  • Beth's final pass -

Chapter 3: Web Page Construction

  • Page 77 - Reference to Toolman may be too dated
  • Throughout - do we need to change dates on Tony's journal to 2012?
  • Do we need to change inline/block discussion (context: HTML5 categories)
  • Remove a element from Who Am I exercise? or leave answer for inline or block ambiguous
  • Change "empty" to "void" for br, remove hr
  • Styles - DONE
  • Bubbles - DONE
  • Quotes - double check
  • Errata - DONE
  • Eric's pass - DONE
  • Beth's final pass -

Chapter 4: A Trip to Webville

  • Page 145 - style usage - seems okay, double check
  • Page 149 - Need santity check on title attribute in <a> - title is a global attribute in HTML5, which means you can use it on ANY element. But most frequently used in <a>. We're still using it correctly...
  • Page 157 - Making sure _top is still kosher - couldn't find this. We use _blank on page 158. Where is _top?
  • Styles - DONE
  • Bubbles - DONE
  • Errata - DONE
  • Quotes - DONE
  • Screenshots - DONE


  • <a> is no longer an "anchor"; it is now a hyperlink. (Impacts chapter throughout and NDQ on page 155) - DONE
  • Change 152 - 155 to use an id on the destination element instead of adding another <a> element - DONE
  • Change explanation of title on 149 - title is a global attribute, but can be used on a. Not a big change. - Decided not to do
  • Change URL from buzz.headfirstlabs.com to wickedlysmart.com/buzz If so, we need to update all screenshots of buzz page and some code. - DONE

Chapter 5: Meeting the Media

  • Use PNG as primary format along with JPG and GIF - DONE
  • Update images of iPod - DONE
  • Make sure we refer to img as a "void" element, not "empty" - CHECK
  • Page 169-170, 175, 192, 205 - needs to include PNG - DONE
  • Page 178 - may appear dated - use iPod Touch perhaps - DONE
  • Page 182 - check default size guidelines given - still valid? - CHECK
  • Page 185-190 - Use Online tool, not photoshop elements? - NO, DONE with updated PE.
  • Styles - DONE
  • Bubbles - DONE
  • Code Quotes - DONE
  • Element graphics - DONE
  • Screenshots - DONE


  • 1 IE screenshot (from Sarah)
  • Review PNG intro, need one more page
  • Review 3-say fireside chat

Chapter 6: Serious HTML

  • Bubbles - DONE
  • Styles - DONE
  • Errata - NOT DONE, there will be too many changes in the chapter to bother

This chapter has some real work in it

  • Page 225 - add Chrome to list
  • Page 226-227 - Write the history to kill XHTML and add HTML5
  • Page 228-233 - change HTML4.01 to HTML5, including text and doctypes. Fairly minor treatment.
  • Page 234-237 - look at validator, adopt for html5
  • Page 240 - shorten meta to html5 version, question 2 of the NDQ probably needs to go, we'll fill in another.
  • Page 241 - this may go away, probably not an issue with the html5 validator
  • Page 243-250, 256-258 - all get deleted
  • Page 251 - some of this may be worth saving, let's see how the validator path works out
  • 254 - check semantics against html5
  • 255 - need to consider impact on this chapter to these questions.
  • 260 rework in html5
  • 261 - clean this out, change forward reference

Chapter 7: Putting the X in XHTML

All pages are deleted, in their place a small memorial intermission page.

Update: wondering if we should keep the chapter, move it to the end and say for people who really want to do XHTML, XHTML1.1 is alive and well for documents.

Chapter 8: Adding a Little Style

  • Update all code to HTML5 (remove DOCTYPEs etc.) e.g. page 291
  • Change all references of XHTML to HTML
  • Update p305 for closeup
  • Update p324-325 to use HTML

Chapter 9: Fonts and Colors

  • Update all code to HTML5 (remove DOCTYPEs etc.) e.g. page 349
  • Change all references of XHTML to HTML
  • Page 351: forward ref to using font extensions?
  • Page 355: Update Watch It? - this would also affect NDQ on 358
  • Page 368: Update description of rgb colors to include rgba? (and use in example?)
  • Page 372: Change color chooser to be web-based? color picker is very similar to web based color pickers
  • Page 373: Update screen shot of wikipedia color chart?
  • ADD: @font-face; how to link to and use Google fonts
  • Do we want to add any other text decoration, like text-shadow?

Chapter 10: The Box Model

  • Change all references of XHTML to HTML
  • Update 2 minute guide to borders to include:
    • border-radius
    • possibly border-image
  • Add box-shadow in the Border fit and finish section?
  • Update p422 - expand to use CSS media queries instead of media attribute (http://www.alistapart.com/articles/responsive-web-design/)

Chapter 11: Advanced Web Construction

  • Currently focuses on divs and spans
  • Update all code to HTML5 (remove DOCTYPEs etc.)
  • Change all references of XHTML to HTML (and update style of tags, depending on what we do - XML style or regular style)
  • Modify example to include ::pseudo-element? We could use ::first-letter and style the first letter of a paragraph or something
  • Last page of this chapter is a cliff hanger for what will now be chapter 13 (was, chapter 12). I think this can still work, but we may need to revisit

Chapter 12 (NEW): Semantic Structure

  • Need a nice transition from Advanced Web Construction
  • Be right up front that everything we did in Chapter 11 is HTML4. Now, with HTML5 we have more elements for "construction"
  • I think we can use chapter 2 from HF HTML5 almost as is in this place with a good transition in place.
  • We'll probably want to use the lounge as an example (along with Bleeding Edge gadgets). Could add some exercises for the reader to update the lounge files
  • Multi-section headings (ie, use h1 then h1 for nested sections) - get around 6 levels limitation in HTML. Instead of numbers indicating level, now it's nesting. Make sure to use STYLE to control presentation not heading level number.
  • Elements to discuss
    • Header, footer
    • Nav
    • Section
    • figure?
  • CSS: do we cover "scoped" styles? (see page 48 of HTML5 for Web Designers)
  • Do we need to cover video? or just point to other book.

Chapter 12: Layout and Positioning

  • QUESTION: Should table layout replace float entirely? very possibly. But we still need to describe flow and so would need a whole different lead into flow. This would be a MAJOR change.
  • Do we talk about inline-block vs float?
  • Change all references of XHTML to HTML (and update style of tags, depending on what we do - XML style or regular style)
  • Ref to super brain power needs to change
  • p497: Flexible box layout (ie, can change the flow) - add section to describe flexible box layout here? Lounge isn't a great example to use it with (Starbuzz is better, but we may need to describe it here since it goes with the "flow" section).
  • p500: Markup for Starbuzz - use semantic structure for header, footer, sidebar
  • p503: Goal for Starbuzz - show *even* columns to motivate table or flex-box layout?
  • p507: Fixing the two-column problem - should lead into table and flex-box layout here... but I think the discussion on liquid vs. frozen is really good and important.
  • p519: This is probably where we want to go to the flex-box and table layout options.
  • If we do it on p519, then we'll need another example to demonstrate absolute positioning that we can use to lead into relative positioning
  • p530: We'll need to change the fireside chat. Can we have a four-way chat? that would probably be too confusing
  • Major Issue: Going to be a challenge to present all the layout options and keep clear when to use what and why
  • Three columns and beyond - update to use table/flex - can we make this an exercise? It's very easy to do with table or flex

Chapter 13: Tables and More Lists

  • Change all references of XHTML to HTML
  • p566: can we use nth child selectors to color alternating rows in the table? If not, we can use that on the list of items Tony is taking with him (p579)

Chapter 14: HTML Forms

Some of these can end up in the "What more could possibly go into a form" section?

  • New input element attributes:
    • autofocus
    • autocomplete
    • list (use with datalist element)
    • required
    • range - easier form of validation than regex
    • regex - difficult to explain because it would need regular expression discussion, but it's very powerful. Could put this into an NDQ and forward ref to appendix?
    • placeholder
  • New input types - updates pp598, 599
    • URL
    • Email
    • Telephone
    • Color

(Add Email and Telephone to Starbuzz example, p602 and beyond)

  • New form elements
    • datalist
    • progress
    • meter
    • Skip: keygen, output (although, output is very cool, could compute price and tax or something on Starbuzz with this)

QUESTION: Should we use a table for layout or use the table CSS layout instead? probably the latter! If so, then the section starting with the fireside chat on page 624 will change to use the table layout instead of html table.



  • #1 More selectors - expand?
  • #2 Frames - remove!
  • #3 Expand to include Video and Audio HTML
  • #4 Update for latest tools
  • #5 Update to include JS APIs for HTML5
  • #6 Bring up to date (probably want to replace Perl with Rails)
  • #7 Update with latest on SEO
  • #8 probably fine as is, except use media queries instead
  • #9 Update a lot! Mobile is huge now. Use media queries.
  • #10 Probably okay as is unless we want to expand to include Wordpress
  • #11 (Extra!!) What's in HTML5, with pointer to HF HTML5
  • Possible appendix: webkit CSS properties: transition, reflect, mask, etc.

HTML5 Tags

Sectioning Content

  • article: A composition that forms an independent part of a document, page, application, or site.
  • aside: Content that is tangentially related to the content around the aside element
  • nav: A section with navigation links.
  • section: A generic document or application section.

Heading groups

  • hgroup: Used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

Flow content

  • header: A group of introductory or navigational aids.
  • footer: A footer for its nearest ancestor sectioning content. No heading content descendants, no sectioning content descendants, and no header or footer element descendants allowed.
  • figure: Content, optionally with a legend, that is self-contained and is typically referenced as a single unit from the main flow of the document.

Phrasing content

  • mark: A run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
  • time: A time on a 24 hour clock, or a precise date in the Gregorian calendar.

Input types

New input types include: search, tel, email, url, datetime, datetime-local, date, month, week, time, number, range and color.

  • number: A text field or spinner control. <input type="number" min=0 max=10>
  • range: A slider control. <input type="range" min=0 max=100>
  • color: A colour well. <input type="color" value="#000000">

Updates to existing tags and topics


  • Update all screenshots and pages related to validation - w3c changed the validator since these pages were done

Metadata content

  • style: The optional scoped attribute indicates that the styles are intended just for the subtree rooted at the style element's parent element, as opposed to the whole document.
  • script
  • Character encoding: <meta charset="utf-8">


  • input element can now check input using attributes. min, max, url, email, date, and time. Also regular expressions, but probably won't go into depth in book on these

Definite Topics

  • How to use HTML 5 element names without messing up old browsers
  • Transitioning to HTML5 strict from HTML - is there a doctype for html5 strict? not sure that there is, but we still transition them the same way by writing "strict" code before going to XHTML5.
  • Transitioning to XHTML5 from HTML5. Update XHTML chapter to reflect XHTML5 - strict version of HTML5. Same issues with mime types and servers.


Which elements would you invite to a cocktail party? Which ones would you want to stay home?

HTML5 has new elements, updated elements, and obsolete elements

Content models - instead of just "inline" and "block" we now have more categories of content (see http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html#content-models). Could we do an updated tag soup that splits the elements into the groups just like they do in the spec?

  • Inline and Block? Need to figure out how this works now, and how it relates to inline, block in CSS
  • Probably will just do a regular tag soup on the most common elements and ignore the categories. They don't seem to be that important unless you want to understand HTML at a developer/implementor level.

Need to explain difference between "sectioning" content and "grouping" content - hard to understand (see http://www.brucelawson.co.uk/2010/html5-articles-and-sections-whats-the-difference/) - may be way to complex to get into.

New elements to talk about: section, header, footer, nav, aside (see http://html5doctor.com/understanding-aside/), article, time, abbr (ones to add to the tag soup, but probably not talk about much: hgroup, meter, progress, mark, ...)

Old elements that have semantic meaning: i, small,

Old elements that have had a serious update: a

Elements that are now obsolete: acronym, and all the old "presentational" elements we hope you weren't using anyway (like font, big, etc.)

Use semantic elements instead of div - adds meaning to your content, you'll need to style yourself. (how to handle different browsers styling default different? use css reset!)

Examples we could use:

  • Newspaper - I think a "Webville Times" example might encompass many of the ideas we want to talk about in this chapter. We can bring it back later if we want/need to (e.g. to show columns in CSS or offline storage)
    • basic page
    • create an outline; use hgroup to leave out the 'taglines'
    • add a table? or blockquote? to leave out of the outline?


Adding your own Style

- Meet CSS3, overview of CSS3

Rethink: - FOCUS on animations and transitions ("rich web apps" experience) - Leave the rest for a rewrite in HTML

Things to cover

  • Simple animations
  • Simple transitions

Example Ideas

  • Comic book; use arrows to slide new pages in and out; use hover to transform images on mouse over (e.g. mouse over "POW" and it gets a lot bigger)

Things for HF HTML rewrite

  • Browser-specific properties (and generics for later)
  • New selectors
    • Attribute selectors
    • Sibling selector
    • Pseudo-classes
    • Pseudo-elements
  • Media Queries
  • Opacity
  • Drop Shadow
  • Text Shadow
  • Gradients
  • Border radius / image

Maybe's... (probably leave out)

  • Box-model sizing
  • Multiple backgrounds


  • When I look up some of these CSS things, I see "modules". What's that all about?

Not that kind of Text'ing

- Overview of new font, multicolumn and text capabilities

Stuff we could cover

Example Ideas


  • Tony wants to add a "my story" to his website, and link to his blog from there. This page would have a design that requires:
    • Multi-column layout of text to excerpt the eBook he's writing about his travels
    • Pseudo-classes to make some of the text look "book like"
    • Media queries to have a mobile version as well as a web version
    • Drop shadow on a picture at the top


  • Starbuzz CEO comes and says, I've redone my site to include some of the semantic elements (show HTML). Now I need help with the CSS. Can you fix my columns for once and for all with CSS; can we use the multi-column text thing you just did for Tony?
  • Exercise: can you?
  • No, you can't. Introduce flexible box layout and table-cell layout to solve problem.
  • Other enhancements:
    • Text shadow on the headings
    • Border radius (and we can show border image too as a sidebar)
    • CSS Button with gradient, border radius (exercise), text-shadow (exercise), add shadow to button (exercise)

Font Resources

Custom Data Attributes, Data Sets

Cache Manifest

If you're running apache, you can try this on your own web server.

If you are running Apache2: First you'll need to add the text/cache-manifest mime type to your Apache mime.types file.

Locate this file in /etc/apache2. Edit this file - you'll need to use sudo or use a root account to do this. E.g. sudo vi mime.types Find the mime types starting with text and add the line

text/cache-manifest manifest 

to this file.

Save, and restart Apache. If you're on a Mac, the easiest way to do this is to go to System Preferences -> Sharing and turn web sharing off then back on.

Create your manifest file. This will include every file you want to cache from your web application. This would include html, css and javascript files, as well as images.

Then create your website and in the header of every .html file you'll need to include the manifest attribute on the html tag and link to your manifest file.


  • Show basic example of a small website that lists all files
  • Show "fallback" to remove the need to list all files
  • Show an example that shows progress of download to cache, completion and hot swap to newly cached version - illustrate by changing information on the web pages after it's already been cached once

Because most browsers are set up to cache static files for several hours, if you change your manifest file you may see it take effect in your browser (say, during testing), because the browser is not retrieving the new manifest file.

You can add a .htaccess that forces the server to expire the caching on the manifest file after every request.


Mobile web pages using HTML - make the appendix an entire chapter. This should probably be the last chapter as it touches on all the things we discuss in the book. Could potentially focus on the iPhone


  • Viewport
  • Size of web page
  • Conditional CSS and CSS Media Queries
  • Custom webkit extensions for iPhone
  • Creating a home screen icon
  • Video and Audio
  • Form design and style
  • etc.
  • Accessing the debug console (? more useful for javascript)
  • Best practices for Mobile Web pages

IE issues

how to make HTML5 work in IE8:

Use the javascript hack (see http://oli.jp/2009/html5-structure4/) or write HTML4.1 and use class names to simulate the new elements you want for an easier transition in the future. Address briefly in the book, but assume users are NOT using IE8 to test pages.


(This section needs redoing, moved all HTML5 JavaScript API stuff to http://commons.oreilly.com/wiki/index.php/HF_HTML_5)

Mobile Resources

HTML5 Resources

CSS Resources



Personal tools