Tired of reading HTML books that only make sense after you're an expert? Then it's about time you picked up Head First HTML with CSS & XHTML and really learned HTML. You want to learn HTML so you can finally create those web pages you've always wanted, so you can communicate more effectively with friends, family, fans, and fanatic customers. You also want to do it right so you can actually maintain and expand your Web pages over time, and so your web pages work in all the browsers and mobile devices out there. Oh, and if you've never heard of CSS, that's okay - we won't tell anyone you're still partying like it's 1999 - but if you're going to create Web pages in the 21st century then you'll want to know and understand CSS.
Learn the real secrets of creating Web pages, and why everything your boss told you about HTML tables is probably wrong (and what to do instead). Most importantly, hold your own with your co-worker (and impress cocktail party guests) when he casually mentions how his HTML is now strict, and his CSS is in an external style sheet.
With Head First HTML with CSS & XHTML, you'll avoid the embarrassment of thinking web-safe colors still matter, and the foolishness of slipping a font tag into your pages. Best of all, you'll learn HTML and CSS in a way that won't put you to sleep. If you've read a Head First book, you know what to expect: a visually-rich format designed for the way your brain works. Using the latest research in neurobiology, cognitive science, and learning theory, this book will load HTML, CSS, and XHTML into your brain in a way that sticks.
So what are you waiting for? Leave those other dusty books behind and come join us in Webville. Your tour is about to begin.
"Elegant design is at the core of every chapter here, each concept conveyed with equal doses of pragmatism and wit." --Ken Goldstein, Executive Vice President, Disney Online
"This book is a thoroughly modern introduction to forward-looking practices in web page markup and presentation." --Danny Goodman, author of Dynamic HTML: The Definitive Guide
"What used to be a long trial and error learning process has now been reduced neatly into an engaging paperback." --Mike Davidson, CEO, Newsvine, Inc.
"I love Head First HTML with CSS & XHTML--it teaches you everything you need to learn in a 'fun coated' format!" --Sally Applin, UI Designer and Artist
"I haven't had as much fun reading a book (other than Harry Potter) in years. And your book finally helped me break out of my hapless so-last-century way of creating web pages." --Professor David M. Arnow, Department of Computer and Information Science, Brooklyn College
"If you've ever had a family member who wanted you to design a website for them, buy them Head First HTML with CSS and XHTML. If you've ever asked a family member to design you a web site, buy this book. If you've ever bought an HTML book and ended up using it to level your desk, or for kindling on a cold winter day, buy this book. This is the book you've been waiting for. This is the learning system you've been waiting for." --Warren Kelly, Blogcritics.org
Table of Contents
- Head First HTML with CSS & XHTML
- A Note Regarding Supplemental Files
- Praise for Head First HTML with CSS & XHTML
- More Praise for Head First HTML with CSS & XHTML
- Previous Praise for books by the authors
- Authors of Head First HTML with CSS & XHTML
- How to use This Book: Intro
1. Getting to Know HTML: The Language of the Web
- The Web Video killed the radio star
- What does the Web server do?
- What does the Web browser do?
- What you write (the HTML)...
- What the browser creates...
- Your big break at Starbuzz Coffee
- Creating the Starbuzz Web page
- Creating an HTML file (Mac)
- Creating an HTML file (Windows)
- Meanwhile, back at Starbuzz Coffee...
- Saving your work...
- Opening your Web page in a browser
- Taking your page for a test drive...
- Are we there yet?
- Another test drive...
- Tags dissected...
- Meet the style element
- Giving Starbuzz some style...
- Cruisin’ with style...
2. Going Further, with Hypertext: Meeting the ‘HT’ in HTML
- Head First Lounge, New and Improved
- Creating the new lounge
- What did we do?
- What does the browser do?
- Understanding attributes
- Getting organized
- Organizing the lounge...
- Technical difficulties
- Planning your paths...
- Fixing those broken images...
3. Building Blocks: Web Page Construction
- From Journal to Web site, at 12mph
- The rough design sketch
- From a sketch to an outline
- From the outline to a Web page
- Test driving Tony’s Web page
- Adding some new elements
- Meet the <q> element
- ...and check out the test drive...
- Looooong Quotes
- Adding a <blockquote>
- The real truth behind the <q> and <blockquote> mystery
- Meanwhile, back at Tony’s site...
- Of course, you could use the <p> element to make a list...
- Constructing HTML lists in two easy steps
- Taking a test drive through the cities
- Putting one element inside another is called “nesting”
- To understand the nesting relationships, draw a picture
- Using nesting to make sure your tags match
4. Getting Connected: A Trip to Webville
- Getting Starbuzz (or yourself) onto the Web
- Finding a hosting company
- HELLO, my domain name is...
- How can you get a domain name?
- Moving in
- Getting your files to the root folder
- As much FTP as you can possibly fit in two pages
- Back to business...
- Mainstreet, URL
- What is the HTTP Protocol?
- What’s an Absolute Path?
- How default pages work
- How do we link to other Web sites?
- Linking to Caffeine Buzz
- And now for the test drive...
- Web page fit and finish
- The title test drive...
- Linking into a page
- Using the <a> element to create a destination
- How to link to destination anchors
- Linking to a new window
- Opening a new window using target
5. Adding Images to Your Pages: Meeting the Media
- How the browser works with images
- How images work
- <img>: it’s not just relative links anymore
- Always provide an alternative
- Sizing up your images
- Creating the ultimate fan site: myPod
- Check out myPod’s “index.html” file
- Whoa! The image is way too large
- Resize the image to fit in the browser
- Open the image
- Resizing the image
- Resizing the image, continued...
- You’ve resized - now save
- Save the image
- Fixing up the myPod HTML
- And now for the test drive...
- More photos for myPod
- Taking myPod for another test drive
- Reworking the site to use thumbnails
- Create the thumbnails
- Rework the HTML to use the thumbnails
- Take myPod for another test drive
- Turning the thumbnails into links
- Create individual pages for the photos
- So, how do I make links out of images?
- Add the image links to “index.html”
- Open the myPod logo
- What format should we use?
- To be transparent, or not to be transparent? That is the question...
- Save the transparent GIF
- Wait, what is the color of the Web page background?
- Set the matte color
- Set the matte color, continued
- Check out the logo with a matte
- Save the logo
- Add the logo to the myPod Web page
- And now for the final test drive
6. Standards, Compliance, and all that Jazz: Serious HTML
- A Brief History of HTML
- We can’t have your pages putting the browser into Quirks Mode!
- Adding the document type definition
- The DOCTYPE test drive
- Meet the W3C validator
- Validating the Head First Lounge
- Houston, we have a problem...
- Fixing that error
- We’re not there yet...
- Adding a <meta> tag to specify the content type
- Making the validator (and more than a few browsers) happy with a <meta> content tag...
- Third time’s the charm?
- Changing the DOCTYPE to strict
- Do we have validation?
- Fixing the nesting problem
- One more chance to be strict...
- Strict HTML 4.01, grab the handbook
- 7. Moving to XHTML: Putting an ‘X’ into HTML
8. Getting Started with CSS: Adding a Little Style
- You’re not in Kansas anymore
- Overheard on Webville’s “Trading Spaces”
- Using CSS with XHTML
- Wanna add more style?
- Getting CSS into your XHTML
- Adding style to the lounge
- Cruising with style: the test drive
- Style the heading
- Let’s put a line under the welcome message too
- We have the technology: specifying a second rule, just for the <h1>
- So, how do selections really work?
- Seeing selectors visually
- Getting the Lounge style into the elixirs and directions pages
- Creating the “lounge.css” file
- Linking from “lounge.html” to the external style sheet
- Linking from “elixir.html” and “directions.html” to the external style sheet
- Test driving the entire lounge...
- It’s time to talk about your inheritance...
- What if we move the font up the family tree?
- Test drive your new CSS
- Overriding inheritance
- Test drive
- Adding a class to “elixir.html”
- Creating a selector for the class
- A greentea test drive
- Taking classes further...
- The world’s smallest & fastest guide to how styles are applied
- Making sure the Lounge CSS validates
9. Styling with Fonts and Colors: Expanding your Vocabulary
- Text and fonts from 30,000 feet
- What is a font family anyway?
- Specifying font families using CSS
- How font-family specifications work
- Dusting off Tony’s Journal
- Getting Tony a new font-family
- Test driving Tony’s new fonts
- How do I deal with everyone having different fonts?
- Adjusting font sizes
- So, how should I specify my font sizes?
- Let’s make these changes to the font sizes in Tony’s Web page
- Test driving the font sizes
- Changing a font’s weight
- Test drive the normal weight headings
- Adding style to your fonts
- Styling Tony’s quotes with a little italic
- How do Web colors work?
- How do I specify Web colors? Let me count the ways...
- The two minute guide to hex codes
- How to find Web colors
- Back to Tony’s page... We’re going to make the headings orange, and add an underline too
- Test drive Tony’s orange headings
- Everything you ever wanted to know about text-decorations in less than one page
- Removing the underline...
10. The Box Model: Getting Intimate with Elements
- The lounge gets an upgrade
- The new and improved, ultra-stylish lounge
- Setting up the new lounge
- Starting with a few simple upgrades
- A very quick test drive
- One more adjustment
- Checking out the new line height
- Getting ready for some major renovations
- A closer look at the box model
- What you can do to boxes
- Meanwhile back at the lounge...
- Creating the guarantee style
- A test drive of the paragraph border
- Padding, border, and margins for the guarantee
- Adding some padding
- A test drive with some padding
- Now let’s add some margin
- A test drive with the margin
- Adding a background image
- Test driving the background image
- Fixing the background image
- Another test drive of the background image
- How do you add padding only on the left?
- Are we there yet?
- How do you increase the margin just on the right?
- A two-minute guide to borders
- Border fit and finish
- The id attribute
- But how do I use id in CSS?
- Using an id in the lounge
- Remixing style sheets
- Using multiple style sheets
- Style sheets - they’re not just for desktop browsers anymore...
11. Divs and Spans: Advanced Web Construction
- A close look at the elixirs XHTML
- Let’s explore how we can divide a page into logical sections
- Meanwhile, back at the lounge...
- Taking the <div> for a test drive
- Adding a border
- An over-the-border test drive
- Adding some real style to the elixirs section
- The game plan
- Working on the elixir width
- Test driving the width
- Adding the basic styles to the elixirs
- Test driving the new styles
- We’re almost there...
- What are we trying to do?
- What we need is a way to select descendants
- Changing the color of the elixir headings
- A quick test drive...
- Fixing the line height
- Look what you’ve accomplished...
- It’s time to take a little shortcut
- But there’s more...
- And even more shorthands
- Adding <span>s in three easy steps
- Steps one and two: adding the <span>s
- Step three: styling the <span>s
- Test driving the spans
- The <a> element and its multiple personalities
- How can you style elements based on their state?
- Putting those pseudo-classes to work
- Test drive the links
- Isn’t it about time we talk about the “cascade”?
- The cascade
- Welcome to the “What’s my specificity game”
- Putting it all together
12. Layout and Positioning: Arranging Elements
- Did you do the Super Brain Power?
- Use the flow, Luke
- What about inline elements?
- How it all works together
- One more thing you should know about flow and boxes
- How to float an element
- Behind the scenes at the lounge
- The new Starbuzz
- A look at the markup
- And a look at the style
- Let’s take Starbuzz to the next level
- Move the sidebar just below the header
- Set the width of the sidebar and float it
- Test driving Starbuzz
- Fixing the two-column problem
- Setting the margin on the main section
- Test drive
- Uh oh, we have another problem
- Back to clearing up the overlap problem
- Test drive
- Righty tighty, lefty loosey
- A quick test drive
- Liquid and Frozen Designs
- A frozen test drive
- What’s the state between liquid and frozen? Jello, of course!
- Test driving with a tank of jello
- How absolute positioning works
- Another example of absolute positioning
- Using absolute positioning
- Changing the Starbuzz CSS
- Now we just need to rework the main <div>
- Time for the absolute test drive
- What can we do? Or, can’t you just tell me how to do a two-column layout that doesn’t break?
- One tradeoff you can make to fix the footer
- Positioning the award
- A small glitch
- One more thing you should know about absolute positioning
- How does fixed positioning work?
- Putting the coupon on the page
- Putting the coupon on the page
- Using a negative left property value
- A rather positive, negative test drive
- Getting relative
- The test drive
- To three-columns and beyond...
13. Tables and More Lists: Getting Tabular
- How do you make tables with XHTML?
- How to create a table using XHTML
- What the browser creates
- Tables dissected
- Adding a caption and a summary
- Test drive... and start thinking about style
- Before we start styling, let’s get the table into Tony’s page
- Now let’s style the table
- Taking the styled tables for a test drive
- Getting those borders to collaspe
- How about some color?
- How about some color in the table rows?
- Did we mention that Tony made an interesting discovery in Truth or Consequences, New Mexico?
- Another look at Tony’s table
- How to tell cells to span more than one row
- The new and improved table
- Trouble in paradise?
- Test driving the nested table
- Overriding the CSS for the nested table headings
- Giving Tony’s site the final polish
- Giving the list some style
- What if you want a custom marker?
14. XHTML Forms: Getting Interactive
- How forms work
- How forms work in the browser
- What you write in XHTML
- What the browser creates
- How the form element works
- What can go in a form?
- What can go in a form? (Part II)
- Getting ready to build the Bean Machine form
- Figuring out what goes in the form element
- Adding the form element
- How form element names work
- Back to getting those <input> elements into your XHTML
- A form-al test drive
- Adding some more input elements to your form
- Adding the <select> element
- Test driving the <select> element
- Give the customer a choice of whole or ground beans
- Punching the radio buttons
- Completing the form
- Adding the checkboxes and text area
- The final test drive
- Watching GET in action
- To Table or Not to Table? That’s the question...
- Getting the form elements into a table
- Test driving a very tabular form
- Styling the form and the table with CSS
- The final test drive
- What more could possibly go into a form?
- Congratulations! You made it to the end
A. Leftovers: The Top Ten Topics (we didn’t cover)
- #1 More Selectors
- #2 Frames
- #3 Multimedia & Flash
- #4 Tools for Creating Web Pages
- #5 Client-side Scripting
- #6 Server-side Scripting
- #7 Tuning for Search Engines
- #8 More about Style Sheets for Printing
- #9 Pages for Mobile Devices
- #10 Blogs
- About the Authors
|j / →||Next chapter|
|k / ←||Previous chapter|
|f||Increase font size|
|g||Decrease font size|
|t||Toggle the table of contents|
Site wide shortcuts
|h||Go to the homepage|
|r||Go to recommended page or get a new recommendation|
|u||Scroll up to top of page|
|esc||Close modal windows|
|?||Toggle this panel|
|/||Focus search (where present)|
|j / →||Select next card|
|k / ←||Select previous card|
|↑||Select card above it|
|↓||Select card below it|
|tab||Focus next element inside card|
|esc||Remove selection from card|
|m||Show more cards (if more button present)|
Focused Cards (?)
|d||Remove recommended card|
|Shift enter||Go to chapter|
Shortcuts may be disabled from the settings page.