Head First HTML with CSS and XHTML

by Freeman, Elisabeth

• ISBN13: 9780596101978
• ISBN10: 059610197X
• Format: Paperback
• Copyright: 2005-12-01
• Publisher: Oreilly & Associates Inc

Summary

With Head First HTML & CSS, you'll avoid the embarrassment of thinking Web-safe colours 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 and CSS 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.

Author Biography

1. Elisabeth Robson

   Elisabeth Robson (formerly Freeman) is coauthor of O'Reilly's Head First Design Patterns and Head First HTML with CSS & XHTML. She is currently Special Projects Director at O'Reilly where she is developing new brain-friendly learning ideas and products.

2. Eric T Freeman

   Eric Freeman is a computer scientist with a passion for media and software architectures and coauthor of Head First Design Patterns. He just wrapped up four years at a dream job-- directing internet broadband and wireless efforts at Disney--and is now back to writing, creating cool software, and hacking Java and Macs. Eric spent a lot of the '90s working on alternatives to the desktop metaphor with David Gelernter (and they're both still asking the question, "Why do I have to give a file a name?"). Based on this work, Eric landed a Ph.D. at Yale University in 1997. He also co-founded Mirror Worlds Technologies (now acquired) to create a commercial version of his thesis work, Lifestreams.
   
   In a previous life, Eric built software for networks and supercomputers. You might know him from such books as JavaSpaces Principles Patterns and Practice. Eric has fond memories of implementing tuple-space systems on Thinking Machine CM-5s and creating some of the first internet information systems for NASA in the late 1980s.
   
   When he's not writing text or code you'll find him spending more time tweaking than watching his home theater and trying to restore a circa 1980s Dragon's Lair video game. He also wouldn't mind moonlighting as an electronica DJ.
   
   Write to him at eric at wickedlysmart dot com or visit him at http://www.ericfreeman.com .

Table of Contents

Intro
Who is this book for?	xxvi
We know what your brain is thinking	xxvii
Metacognition	xxix
Bend your brain into submission	xxxi
Technical reviewers	xxxiv
Acknowledgments	xxxv
The Language of the Web
The Web killed the video star	2	(1)
What does the Web server do?	3	(1)
What you write (the HTML)...	4	(1)
What the browser creates...	5	(4)
Your big break at Starbuzz Coffee	9	(2)
Creating the Starbuzz Web page	11	(1)
Creating an HTML file (Mac)	12	(2)
Creating an HTML file (Windows)	14	(3)
Meanwhile, back at Starbuzz Coffee...	17	(2)
Opening your Web page in a browser	19	(1)
Taking your page for a test drive...	20	(5)
Tags dissected...	25	(4)
Meet the style element	29	(1)
Giving Starbuzz some style...	30	(2)
Who does what?	32	(2)
Fireside Chat	34	(2)
Bullet Points	36	(2)
Exercise Solutions	38	(6)
Meeting the 'HT' in HTML
Head First Lounge, New and Improved	44	(2)
Creating the new lounge	46	(2)
What did we do?	48	(1)
What does the browser do?	49	(2)
Understanding attributes	51	(7)
Technical difficulties	58	(2)
Planning your paths...	60	(6)
Fixing those broken images...	66	(7)
Exercise Solutions	73	(6)
Web Page Construction
From Journal to Web site, at 12mph	79	(1)
The rough design sketch	80	(1)
From a sketch to an outline	81	(1)
From the outline to a Web page	82	(2)
Test driving Tony's Web page	84	(2)
Meet the <q> element	86	(4)
Looooong Quotes	90	(1)
Adding a <blockquote>	91	(3)
The real truth behind the <q> and <blockquote> mystery	94	(9)
Use the <p> element to make a list...	103	(1)
Constructing HTML lists in two easy steps	104	(5)
Putting one element inside another is called ``nesting''	109	(1)
To understand the nesting relationships, draw a picture	110	(1)
Using nesting to make sure your tags match	111	(2)
Inline or block?	113	(6)
Exercise Solutions	119	(7)
A Trip to Webville
Getting Starbuzz (or yourself) onto the Web	126	(1)
Finding a hosting company	127	(1)
How can you get a domain name?	128	(2)
Moving in	130	(1)
Getting your files to the root folder	131	(1)
As much FTP as you can possibly fit in two pages	132	(3)
Back to business...	135	(1)
Mainstreet, URL	136	(1)
What is the HTTP Protocol?	137	(1)
What's an absolute path?	138	(3)
How default pages work	141	(3)
How do we link to other Web sites?	144	(1)
Linking to Caffeine Buzz	145	(4)
Web page fit and finish	149	(2)
Linking into a page	151	(1)
Using the <a> element to create a destination	152	(1)
How to link to destination anchors	153	(4)
Linking to a new window	157	(1)
Opening a new window using target	158	(4)
Exercise Solutions	162	(4)
Meeting the Media
How the browser works, with images	166	(3)
How images work	169	(4)
And now for the formal introduction: meet the <img> element	173	(3)
Always provide an alternative	176	(2)
Creating the ultimate fan site: myPod	178	(3)
Whoa! The image is way too large	181	(10)
Fixing up the myPod HTML	191	(4)
Reworking the site to use thumbnails	195	(4)
Turning the thumbnails into links	199	(2)
So, how do I make links out of images?	201	(5)
What format should we use?	206	(1)
To be transparent, or not to be transparent? That is the question...	207	(2)
Wait, what is the color of the Web page background?	209	(1)
Check out the logo with a matte	210	(1)
Add the logo to the myPod Web page	211	(5)
Exercise Solutions	216	(8)
Serious HTML
Cubicle Conversation	224	(2)
A brief history of HTML	226	(3)
We can't have your pages putting the browser into quirks mode	229	(2)
Adding the document type definition	231	(3)
Meet the W3C validator	234	(1)
Validating the Head First Lounge	235	(1)
Houston, we have a problem...	236	(4)
Adding a <meta> tag to specify the content type	240	(1)
Making the validator happy with a <meta> content tag...	241	(1)
Third time's the charm?	242	(4)
Changing the doctype to strict	246	(1)
Do we have validation?	247	(2)
Fixing the nesting problem	249	(1)
One more chance to be strict...	250	(2)
Strict HTML 4.01, grab the handbook	252	(4)
Fireside Chat	256	(3)
HTML Archeology	259	(4)
Exercise Solutions	263	(4)
Putting the 'X' into HTML
What is XML?	267	(1)
What does this have to do with HTML?	268	(2)
So why would you want to use XHTML?	270	(2)
The XHTML 1.0 checklist	272	(2)
Going from strict HTML to XHTML 1.0	274	(1)
Old school HTML 4.01 Strict	275	(1)
New and improved XHTML 1.0	275	(2)
Validation: it's not just for HTML	277	(3)
Fireside Chat	280	(2)
HTML or XHTML? The choice is yours...	282	(2)
Exercise Solutions	284	(2)
Adding a Little Style
You're not in Kansas anymore...	286	(2)
Overheard on Webville's ``Trading Spaces''	288	(1)
Using CSS with XHTML	289	(6)
Let's put a line under the welcome message, too	295	(1)
Specifying a second rule, just for the <h01>	296	(7)
Getting the Lounge style into the elixirs and directions pages	303	(2)
Linking to the external style sheet	305	(6)
It's time to talk about your inheritance...	311	(1)
What if we move the font up the family tree?	312	(2)
Overriding inheritance	314	(4)
Creating a selector for the class	318	(2)
Taking classes further...	320	(2)
The world's smallest and fastest guide to how styles are applied	322	(4)
Who gets the inheritance?	326	(3)
Making sure the Lounge CSS validates	329	(4)
Exercise Solutions	333	(9)
Expanding your Vocabulary
Text and fonts from 30,000 feet	342	(2)
What is a font family anyway?	344	(3)
Specifying font families using CSS	347	(1)
Dusting off Tony's Journal	348	(3)
How do I deal with everyone having different fonts?	351	(3)
So, how should I specify my font sizes?	354	(2)
Let's make these changes to the font sizes in Tony's Web page	356	(3)
Changing a font's weight	359	(2)
Adding style to your fonts	361	(1)
Styling Tony's quotes with a little italic	362	(2)
How do Web colors work?	364	(3)
How do I specify Web colors? Let me count the ways...	367	(3)
The two minute guide to hex codes	370	(2)
How to find Web colors	372	(3)
Back to Tony's page...	375	(2)
Everything you ever wanted to know about text-decorations	377	(1)
Removing the underline...	378	(3)
Exercise Solutions	381	(5)
Getting Intimate with Elements
The lounge gets an upgrade	386	(2)
Starting with a few simple upgrades	388	(2)
Checking out the new line height	390	(1)
Getting ready for some major renovations	391	(1)
A closer look at the box model...	392	(2)
What you can do to boxes...	394	(5)
Creating the guarantee style	399	(2)
Padding, border, and margins for the guarantee	401	(1)
Adding some padding	401	(1)
Now let's add some margin	402	(2)
Adding a background image	404	(3)
Fixing the background image	407	(1)
How do you add padding only on the left?	408	(1)
How do you increase the margin just on the right?	409	(1)
A two-minute guide to borders	410	(2)
Border fit and finish	412	(2)
Interview with an HTML class	414	(2)
The id attribute	416	(2)
Using an id in the lounge	418	(2)
Remixing style sheets	420	(1)
Using multiple style sheets	421	(5)
Exercise Solutions	426	(5)
Advanced Web Construction
A close look at the elixirs HTML	431	(2)
Let's explore how we can divide a page into logical sections	433	(7)
Adding a border	440	(1)
An over-the-border test drive	440	(1)
Adding some real style to the elixirs section	441	(1)
The game plan	442	(1)
Working on the elixir width	442	(5)
Adding the basic styles to the elixirs	447	(6)
What we need is a way to select descendants	453	(2)
Changing the color of the elixir headings	455	(1)
Fixing the line height	456	(2)
It's time to take a little shortcut...	458	(6)
Adding <span>s in three easy steps	464	(4)
The <a> element and its multiple personalities	468	(1)
How can you style elements based on their state?	469	(2)
Putting those pseudo-classes to work	471	(2)
Isn't it about time we talk about the ``cascade''?	473	(2)
The cascade	475	(1)
Welcome to the ``What's my specificity game''	476	(1)
Putting it all together	477	(6)
Exercise Solutions	483	(5)
Arranging Elements
Did you do the Super Brain Power?	488	(1)
Use the flow, Luke	489	(2)
What about inline elements?	491	(1)
How it all works together	492	(3)
How to float an element	495	(2)
Behind the scenes at the lounge	497	(2)
The new Starbuzz	499	(5)
Move the sidebar just below the header	504	(1)
Set the width of the sidebar and float it	504	(3)
Fixing the two-column problem	507	(1)
Setting the margin on the main section	508	(3)
Back to clearing up the overlap problem	511	(3)
Righty tighty, lefty loosey	514	(3)
Liquid and frozen designs	517	(3)
How absolute positioning works	520	(3)
Changing the Starbuzz CSS	523	(4)
One tradeoff you can make to fix the footer	527	(2)
Positioning the award	529	(6)
How does fixed positioning work?	535	(2)
Using a negative left property value	537	(2)
Getting relative	539	(2)
To three-columns and beyond...	541	(3)
Exercise Solutions	544	(7)
Getting Tabular
How do we make tables with HTML?	551	(1)
How to create a table using HTML	552	(1)
What the browser creates	553	(1)
Tables dissected...	554	(3)
Adding a caption and a summary	557	(2)
Before we start styling, let's get the table back into Tony's page...	559	(5)
Getting those borders to collapse	564	(2)
How about some color?	566	(1)
Tony made an interesting discovery...	567	(1)
Another look at Tony's table	568	(1)
How to tell cells to span more than one row	569	(2)
The new and improved table	571	(1)
Trouble in paradise?	572	(4)
Overriding the CSS for the nested table headings	576	(1)
Giving Tony's site the final polish	577	(11)
Exercise Solutions	588	(4)
Getting Interactive
How forms work	592	(1)
How forms work in the browser	593	(1)
What the write in XHTML	594	(1)
What the browser creates	595	(1)
How the <form> element works	596	(8)
Getting ready to build the Bean Machine form	604	(1)
Adding the <form> element	605	(1)
How <form> element names work	606	(2)
Back to getting those <input> elements in your XHTML...	608	(1)
Adding some more input elements to your form	609	(1)
Adding the <select> element	610	(2)
Give the customer a choice of whole or ground beans	612	(1)
Punching the radio buttons	613	(1)
Completing the form	614	(1)
Adding the checkboxes and textarea	615	(6)
Watching GET in action	621	(5)
To Table or Not to Table? That's the question...	626	(1)
Getting the form elements into a table	627	(3)
Styling the form and the table with CSS	630	(5)
Exercise Solutions	635	(5)
The Top Ten Topics (we didn't cover)
More Selectors	640	(2)
Frames	642	(1)
Multimedia & Flash	643	(1)
Tools for Creating Web Pages	644	(1)
Client-side Scripting	645	(1)
Server-side Scripting	646	(1)
Tuning for Search Engines	647	(1)
More about Style Sheets for Printing	648	(1)
Pages for Mobile Devices	649	(1)
Blogs	650	(1)
Index	651