| |
| |
| Intro | |
| |
| |
| Who is this book for? | |
| |
| |
| We know what your brain is thinking | |
| |
| |
| Metacognition | |
| |
| |
| Bend your brain into submission | |
| |
| |
| Technical reviewers | |
| |
| |
| Acknowledgments | |
| |
| |
| |
| The Language of the Web: getting to know HTML | |
| |
| |
| The Web killed the video star | |
| |
| |
| What does the Web server 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... | |
| |
| |
| Opening your Web page in a browser | |
| |
| |
| Taking your page for a test drive... | |
| |
| |
| Tags dissected... | |
| |
| |
| Meet the style element | |
| |
| |
| Giving Starbuzz some style... | |
| |
| |
| Who does what? | |
| |
| |
| Fireside Chat | |
| |
| |
| Bullet Points | |
| |
| |
| Exercise Solutions | |
| |
| |
| |
| Meeting the 'HT' in HTML: going further, with hypertext | |
| |
| |
| Head First Lounge, New and Improved | |
| |
| |
| Creating the new lounge | |
| |
| |
| What did we do? | |
| |
| |
| What does the browser do? | |
| |
| |
| Understanding attributes | |
| |
| |
| Technical difficulties | |
| |
| |
| Planning your paths... | |
| |
| |
| Fixing those broken images... | |
| |
| |
| Exercise Solutions | |
| |
| |
| |
| Web Page Construction: building blocks | |
| |
| |
| 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 | |
| |
| |
| Meet the [left angle bracket]q[right angle bracket] element | |
| |
| |
| Looooong Quotes | |
| |
| |
| Adding a [left angle bracket]blockquote[right angle bracket] | |
| |
| |
| The real truth behind the [left angle bracket]q[right angle bracket] and [left angle bracket]blockquote[right angle bracket] mystery | |
| |
| |
| Use the [left angle bracket]p[right angle bracket] element to make a list... | |
| |
| |
| Constructing HTML lists in two easy steps | |
| |
| |
| Putting one element inside another is called "nesting" | |
| |
| |
| To understand the nesting relationships, draw a picture | |
| |
| |
| Using nesting to make sure your tags match | |
| |
| |
| Inline or block? | |
| |
| |
| Exercise Solutions | |
| |
| |
| |
| A Trip to Webville: getting connected | |
| |
| |
| Getting Starbuzz (or yourself) onto the Web | |
| |
| |
| Finding a hosting company | |
| |
| |
| 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 | |
| |
| |
| Web page fit and finish | |
| |
| |
| Linking into a page | |
| |
| |
| Using the [left angle bracket]a[right angle bracket] element to create a destination | |
| |
| |
| How to link to destination anchors | |
| |
| |
| Linking to a new window | |
| |
| |
| Opening a new window using target | |
| |
| |
| Exercise Solutions | |
| |
| |
| |
| Meeting the Media: adding images to your pages | |
| |
| |
| How the browser works, with images | |
| |
| |
| How images work | |
| |
| |
| And now for the formal introduction: meet the [left angle bracket]img[right angle bracket] element | |
| |
| |
| Always provide an alternative | |
| |
| |
| Creating the ultimate fan site: myPod | |
| |
| |
| Whoa! The image is way too large | |
| |
| |
| Fixing up the myPod HTML | |
| |
| |
| Reworking the site to use thumbnails | |
| |
| |
| Turning the thumbnails into links | |
| |
| |
| So, how do I make links out of images? | |
| |
| |
| What format should we use? | |
| |
| |
| To be transparent, or not to be transparent? That is the question... | |
| |
| |
| Wait, what is the color of the Web page background? | |
| |
| |
| Check out the logo with a matte | |
| |
| |
| Add the logo to the myPod Web page | |
| |
| |
| Exercise Solutions | |
| |
| |
| |
| Serious HTML: standards, compliance, and all that jazz | |
| |
| |
| Cubicle Conversation | |
| |
| |
| A brief history of HTML | |
| |
| |
| We can't have your pages putting the browser into quirks mode | |
| |
| |
| Adding the document type definition | |
| |
| |
| Meet the W3C validator | |
| |
| |
| Validating the Head First Lounge | |
| |
| |
| Houston, we have a problem... | |
| |
| |
| Adding a [left angle bracket]meta[right angle bracket] tag to specify the content type | |
| |
| |
| Making the validator happy with a [left angle bracket]meta[right angle bracket] 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 | |
| |
| |
| Fireside Chat | |
| |
| |
| HTML Archeology | |
| |
| |
| Exercise Solutions | |
| |
| |
| |
| Putting the 'X' into HTML: moving to XHTML | |
| |
| |
| What is XML? | |
| |
| |
| What does this have to do with HTML? | |
| |
| |
| So why would you want to use XHTML? | |
| |
| |
| The XHTML 1.0 checklist | |
| |
| |
| Going from strict HTML to XHTML 1.0 | |
| |
| |
| Old school HTML 4.01 Strict | |
| |
| |
| New and improved XHTML 1.0 | |
| |
| |
| Validation: it's not just for HTML | |
| |
| |
| Fireside Chat | |
| |
| |
| HTML or XHTML? The choice is yours... | |
| |
| |
| Exercise Solutions | |
| |
| |
| |
| Adding a Little Style: getting started with CSS | |
| |
| |
| You're not in Kansas anymore... | |
| |
| |
| Overheard on Webville's "Trading Spaces" | |
| |
| |
| Using CSS with XHTML | |
| |
| |
| Let's put a line under the welcome message, too | |
| |
| |
| Specifying a second rule, just for the [left angle bracket]h1[right angle bracket] | |
| |
| |
| Getting the Lounge style into the elixirs and directions pages | |
| |
| |
| Linking to the external style sheet | |
| |
| |
| It's time to talk about your inheritance... | |
| |
| |
| What if we move the font up the family tree? | |
| |
| |
| Overriding inheritance | |
| |
| |
| Creating a selector for the class | |
| |
| |
| Taking classes further... | |
| |
| |
| The world's smallest and fastest guide to how styles are applied | |
| |
| |
| Who gets the inheritance? | |
| |
| |
| Making sure the Lounge CSS validates | |
| |
| |
| Exercise Solutions | |
| |
| |
| |
| Expanding your Vocabulary: styling with fonts and colors | |
| |
| |
| Text and fonts from 30,000 feet | |
| |
| |
| What is a font family anyway? | |
| |
| |
| Specifying font families using CSS | |
| |
| |
| Dusting off Tony's Journal | |
| |
| |
| How do I deal with everyone having different fonts? | |
| |
| |
| So, how should I specify my font sizes? | |
| |
| |
| Let's make these changes to the font sizes in Tony's Web page | |
| |
| |
| Changing a font's weight | |
| |
| |
| 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... | |
| |
| |
| Everything you ever wanted to know about text-decorations | |
| |
| |
| Removing the underline... | |
| |
| |
| Exercise Solutions | |
| |
| |
| |
| Getting Intimate with Elements: the box model | |
| |
| |
| The lounge gets an upgrade | |
| |
| |
| Starting with a few simple upgrades | |
| |
| |
| 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... | |
| |
| |
| Creating the guarantee style | |
| |
| |
| Padding, border, and margins for the guarantee | |
| |
| |
| Adding some padding | |
| |
| |
| Now let's add some margin | |
| |
| |
| Adding a background image | |
| |
| |
| Fixing the background image | |
| |
| |
| How do you add padding only on the left? | |
| |
| |
| How do you increase the margin just on the right? | |
| |
| |
| A two-minute guide to borders | |
| |
| |
| Border fit and finish | |
| |
| |
| Interview with an HTML class | |
| |
| |
| The id attribute | |
| |
| |
| Using an id in the lounge | |
| |
| |
| Remixing style sheets | |
| |
| |
| Using multiple style sheets | |
| |
| |
| Exercise Solutions | |
| |
| |
| |
| Advanced Web Construction: divs and spans | |
| |
| |
| A close look at the elixirs HTML | |
| |
| |
| Let's explore how we can divide a page into logical sections | |
| |
| |
| 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 | |
| |
| |
| Adding the basic styles to the elixirs | |
| |
| |
| What we need is a way to select descendants | |
| |
| |
| Changing the color of the elixir headings | |
| |
| |
| Fixing the line height | |
| |
| |
| It's time to take a little shortcut... | |
| |
| |
| Adding [left angle bracket]span[right angle bracket]s in three easy steps | |
| |
| |
| The [left angle bracket]a[right angle bracket] element and its multiple personalities | |
| |
| |
| How can you style elements based on their state? | |
| |
| |
| Putting those pseudo-classes to work | |
| |
| |
| Isn't it about time we talk about the "cascade"? | |
| |
| |
| The cascade | |
| |
| |
| Welcome to the "What's my specificity game" | |
| |
| |
| Putting it all together | |
| |
| |
| Exercise Solutions | |
| |
| |
| |
| Arranging Elements: layout and positioning | |
| |
| |
| Did you do the Super Brain Power? | |
| |
| |
| Use the flow, Luke | |
| |
| |
| What about inline elements? | |
| |
| |
| How it all works together | |
| |
| |
| How to float an element | |
| |
| |
| Behind the scenes at the lounge | |
| |
| |
| The new Starbuzz | |
| |
| |
| Move the sidebar just below the header | |
| |
| |
| Set the width of the sidebar and float it | |
| |
| |
| Fixing the two-column problem | |
| |
| |
| Setting the margin on the main section | |
| |
| |
| Back to clearing up the overlap problem | |
| |
| |
| Righty tighty, lefty loosey | |
| |
| |
| Liquid and frozen designs | |
| |
| |
| How absolute positioning works | |
| |
| |
| Changing the Starbuzz CSS | |
| |
| |
| One tradeoff you can make to fix the footer | |
| |
| |
| Positioning the award | |
| |
| |
| How does fixed positioning work? | |
| |
| |
| Using a negative left property value | |
| |
| |
| Getting relative | |
| |
| |
| To three-columns and beyond... | |
| |
| |
| Exercise Solutions | |
| |
| |
| |
| Getting Tabular: tables and lists | |
| |
| |
| How do we make tables with HTML? | |
| |
| |
| How to create a table using HTML | |
| |
| |
| What the browser creates | |
| |
| |
| Tables dissected... | |
| |
| |
| Adding a caption and a summary | |
| |
| |
| Before we start styling, let's get the table back into Tony's page... | |
| |
| |
| Getting those borders to collapse | |
| |
| |
| How about some color? | |
| |
| |
| Tony made an interesting discovery... | |
| |
| |
| Another look at Tony's table | |
| |
| |
| How to tell cells to span more than one row | |
| |
| |
| The new and improved table | |
| |
| |
| Trouble in paradise? | |
| |
| |
| Overriding the CSS for the nested table headings | |
| |
| |
| Giving Tony's site the final polish | |
| |
| |
| Exercise Solutions | |
| |
| |
| |
| Getting Interactive: XHTML forms | |
| |
| |
| How forms work | |
| |
| |
| How forms work in the browser | |
| |
| |
| What you write in XHTML | |
| |
| |
| What the browser creates | |
| |
| |
| How the [left angle bracket]form[right angle bracket] element works | |
| |
| |
| Getting ready to build the Bean Machine form | |
| |
| |
| Adding the [left angle bracket]form[right angle bracket] element | |
| |
| |
| How [left angle bracket]form[right angle bracket] element names work | |
| |
| |
| Back to getting those [left angle bracket]input[right angle bracket] elements in your XHTML... | |
| |
| |
| Adding some more input elements to your form | |
| |
| |
| Adding the [left angle bracket]select[right angle bracket] element | |
| |
| |
| Give the customer a choice of whole or ground beans | |
| |
| |
| Punching the radio buttons | |
| |
| |
| Completing the form | |
| |
| |
| Adding the checkboxes and textarea | |
| |
| |
| Watching GET in action | |
| |
| |
| To Table or Not to Table? That's the question... | |
| |
| |
| Getting the form elements into a table | |
| |
| |
| Styling the form and the table with CSS | |
| |
| |
| Exercise Solutions | |
| |
| |
| |
| The Top Ten Topics (we didn't cover): leftovers | |
| |
| |
| More Selectors | |
| |
| |
| Frames | |
| |
| |
| Multimedia & Flash | |
| |
| |
| Tools for Creating Web Pages | |
| |
| |
| Client-side Scripting | |
| |
| |
| Server-side Scripting | |
| |
| |
| Tuning for Search Engines | |
| |
| |
| More about Style Sheets for Printing | |
| |
| |
| Pages for Mobile Devices | |
| |
| |
| Blogs | |
| |
| |
| Index | |