- Page 1:
Upload by mohaa99 (show some respe
- Page 4 and 5:
More Praise for Head First HTML wit
- Page 6 and 7:
Other related books from O’Reilly
- Page 8 and 9:
Head First HTML with CSS and XHTML
- Page 10 and 11:
the authors Authors of Head First H
- Page 12 and 13:
table of contents x 1 The No pressu
- Page 14 and 15:
table of contents xii h2 img h2 h2
- Page 16 and 17:
table of contents xiv Here’s a lo
- Page 18 and 19:
table of contents xvi 7 Putting I l
- Page 20 and 21:
table of contents 1 0 3 2 xviii 4 5
- Page 22 and 23:
table of contents xx Weekly Elixir
- Page 24 and 25:
table of contents xxii 13 tables an
- Page 26 and 27:
table of contents xxiv 15 The i Ind
- Page 28 and 29:
how to use this book Who is this bo
- Page 30 and 31:
how to use this book xxviii intro W
- Page 32 and 33:
how to use this book Here’s what
- Page 34 and 35:
how to use this book Read Me This i
- Page 36 and 37:
the review team Tech Reviewers Lous
- Page 39 and 40:
1 getting to know HTML The Language
- Page 41 and 42:
What does the Web server do? Web se
- Page 43 and 44:
What the browser creates... When th
- Page 45 and 46:
Sharpen your pencil You’re closer
- Page 47 and 48:
Your big break at Starbuzz Coffee S
- Page 49 and 50:
Creating the Starbuzz Web page Of c
- Page 51 and 52:
Step four: Change your TextEdit Pre
- Page 53 and 54:
Step two: Open Notepad Once you’v
- Page 55 and 56:
Meanwhile, back at Starbuzz Coffee.
- Page 57 and 58:
Opening your Web page in a browser
- Page 59 and 60:
Starbuzz Coffee Beverages House
- Page 61 and 62:
Are we there yet? You have an HTML
- Page 63 and 64:
Tags dissected... Okay, you’ve se
- Page 65 and 66:
Exercise Starbuzz Coffee’s Missio
- Page 67 and 68:
Meet the style element To add style
- Page 69 and 70:
Cruisin’ with style... It’s tim
- Page 71 and 72:
Exercise Now that you’ve put a li
- Page 73 and 74:
HTML CSS Right. In fact we’re tot
- Page 75 and 76:
6 6 15 6 6 15 14 Across HTMLcross I
- Page 77 and 78:
Starbuzz Coffee Beverage
- Page 79 and 80:
Exercise Solutions Starbuzz Coffe
- Page 81 and 82:
2 going further, with hypertext Mee
- Page 83 and 84:
elixir.html A page listing some ref
- Page 85 and 86:
2 3 Edit lounge.html Open “lounge
- Page 87 and 88:
What does the browser do? 1 First,
- Page 89 and 90:
Understanding attributes Attributes
- Page 91 and 92:
Attributes Exposed This week’s in
- Page 93 and 94:
Label Destination What you write in
- Page 95 and 96:
Organizing the lounge... Let’s gi
- Page 97 and 98:
I think the problem is that the bro
- Page 99 and 100:
3 4 Trace a path from the source to
- Page 101 and 102:
Going the other way; linking up int
- Page 103 and 104:
Q: What’s a parent folder? If I h
- Page 105 and 106:
Finding the path from “elixir.htm
- Page 107 and 108:
BULLET POINTS When you want to lin
- Page 109 and 110:
It’s time for the competition to
- Page 111 and 112:
Exercise Solutions Head First Lou
- Page 113 and 114:
Sharpen your pencil Solution “abo
- Page 115 and 116:
3 building blocks We better find so
- Page 117 and 118:
From Journal to Web site, at 12mph
- Page 119 and 120:
From a sketch to an outline Now tha
- Page 121 and 122:
Don’t forget, you always need the
- Page 123 and 124:
Adding some new elements You have t
- Page 125 and 126:
Wait a sec... you removed the doubl
- Page 127 and 128:
Five-Minute Mystery The Case of the
- Page 129 and 130:
Adding a Let’s get a into Tony
- Page 131 and 132:
Solved: The Case of the Elements Se
- Page 133 and 134:
there are no Dumb Questions Q: I th
- Page 135 and 136:
Inline Block Well, a lot of people
- Page 137 and 138:
Exercise Here’s what the changes
- Page 139 and 140:
Q: So, the only purpose of is to i
- Page 141 and 142:
Remember, it’s important to use t
- Page 143 and 144:
Step Two: Enclose your list items w
- Page 145 and 146:
Exercise Here’s another list from
- Page 147 and 148:
Putting one element inside anoth
- Page 149 and 150:
Using nesting to make sure your tag
- Page 151 and 152:
A bunch of HTML elements, in full c
- Page 153 and 154:
Q: Wow, I never knew the browser co
- Page 155 and 156:
BULLET POINTS n n n Rockin’ page.
- Page 157 and 158:
Exercise Solutions Here’s the rew
- Page 159 and 160:
Top 100 Top 100 Dark Side of the
- Page 161:
Exercise Solutions 9 L 7 B Across 4
- Page 164 and 165:
getting on the web Getting Starbuzz
- Page 166 and 167:
what’s the goal A Web Detour HELL
- Page 168 and 169:
what’s the goal A Web Detour Movi
- Page 170 and 171:
what’s the goal A Web Detour As m
- Page 172 and 173:
A Web Detour Q: My hosting company
- Page 174 and 175:
uniform resource locators Mainstree
- Page 176 and 177:
absolute paths to your files What
- Page 178 and 179:
easier urls 140 Chapter 4 I’d lik
- Page 180 and 181:
142 Chapter 4 Earl needs a little h
- Page 182 and 183:
linking to other web pages How do w
- Page 184 and 185:
testing those links And now for the
- Page 186 and 187:
time for a little mystery Five-Minu
- Page 188 and 189:
est practices for your links The ti
- Page 190 and 191:
creating destinations Using the el
- Page 192 and 193:
linking to a destination anchor Now
- Page 194 and 195:
case solved, its all about relative
- Page 196 and 197:
targeting windows Opening a new win
- Page 198 and 199:
a little brain crossover 160 Chapte
- Page 200 and 201:
exercise solutions Sharpen your pen
- Page 202 and 203:
exercise solutions Exercise Solutio
- Page 204 and 205:
images in your html How the browser
- Page 206 and 207:
how browsers load images 3 4 Having
- Page 208 and 209:
differences between gif and jpeg He
- Page 210 and 211: when to use gif or jpeg 172 Chapter
- Page 212 and 213: using urls with images : it’s not
- Page 214 and 215: use the alt attribute for accessibi
- Page 216 and 217: a fan site for ipods Creating the u
- Page 218 and 219: inserting an image Sharpen your pen
- Page 220 and 221: all about image sizes Q: What’s w
- Page 222 and 223: choosing a photo editor 184 Chapter
- Page 224 and 225: esizing an image Resizing the image
- Page 226 and 227: using save for web As you can see,
- Page 228 and 229: image saving and quality Save the i
- Page 230 and 231: comparing image settings d 192 Chap
- Page 232 and 233: viewing mypod with resized images T
- Page 234 and 235: using thumbnail images Create the t
- Page 236 and 237: images and layout Take myPod for an
- Page 238 and 239: adding individual image pages Creat
- Page 240 and 241: adding links to images Add the imag
- Page 242 and 243: adding a logo 204 Chapter 5 The myP
- Page 244 and 245: choosing between gif and jpeg What
- Page 246 and 247: creating a transparent gif Save the
- Page 248 and 249: setting a matte color Set the matte
- Page 250 and 251: testing the transparent gif And now
- Page 252 and 253: eview using images with html 214 Ch
- Page 254 and 255: exercise solutions 216 Chapter 5 Ex
- Page 256 and 257: exercise solutions Exercise Solutio
- Page 258 and 259: exercise solutions Exercise Solutio
- Page 262 and 263: writing standard html 224 Chapter 6
- Page 264 and 265: html timeline A Brief History of HT
- Page 266 and 267: owsers and quirks mode Head First:
- Page 268 and 269: html, standards, and document types
- Page 270 and 271: testing with a document type The DO
- Page 272 and 273: validating your html Meet the W3C v
- Page 274 and 275: the alt attribute is required Houst
- Page 276 and 277: tentatively valid html We’re not
- Page 278 and 279: using to specify a content type Ad
- Page 280 and 281: testing the meta tag Third time’s
- Page 282 and 283: questions about strictness 244 Chap
- Page 284 and 285: making your html strict Changing th
- Page 286 and 287: diagnosing why the html isn’t str
- Page 288 and 289: a successful strict test One more c
- Page 290 and 291: understanding how to be strict Stri
- Page 292 and 293: strict html fine points 254 Chapter
- Page 294 and 295: pondering strict versus transitiona
- Page 296 and 297: html and deprecated markup 258 Chap
- Page 298 and 299: test your knowledge of strict 260 C
- Page 300 and 301: are you awake? 262 Chapter 6 HTMLcr
- Page 302 and 303: exercise solutions 264 Chapter 6 So
- Page 304 and 305: xml and html, and xhtml Frank 266 C
- Page 306 and 307: how html relates to xhtml What does
- Page 308 and 309: easons to consider xhtml So why wou
- Page 310 and 311:
a checklist for xhtml strict You’
- Page 312 and 313:
going from html to xhtml Going from
- Page 314 and 315:
oot elements and namespaces Exercis
- Page 316 and 317:
validating xhtml Exercise 278 Chapt
- Page 318 and 319:
html versus xhtml 280 Chapter 7 Ton
- Page 320 and 321:
making a decision between html and
- Page 322 and 323:
exercise solutions 284 Chapter 7 Ac
- Page 324 and 325:
You’re not in Kansas anymore You
- Page 326 and 327:
the css language Overheard on Webvi
- Page 328 and 329:
more about css and xhtml there are
- Page 330 and 331:
adding a style to the lounge Adding
- Page 332 and 333:
styling headings Style the heading
- Page 334 and 335:
getting more sophisticated with sel
- Page 336 and 337:
drawing the lounge’s structure 29
- Page 338 and 339:
visual selectors Seeing selectors v
- Page 340 and 341:
winning with css Five-Minute Myster
- Page 342 and 343:
creating a css file Creating the
- Page 344 and 345:
creating an external link Linking f
- Page 346 and 347:
use css for flexibility 308 Chapter
- Page 348 and 349:
understanding inheritance Sharpen y
- Page 350 and 351:
moving rules to the body element Wh
- Page 352 and 353:
when you don’t want to inherit Ov
- Page 354 and 355:
styling individual paragraphs 316 C
- Page 356 and 357:
class selectors Creating a selector
- Page 358 and 359:
dealing with class selectors Taking
- Page 360 and 361:
intro to applying styles The world
- Page 362 and 363:
language comparison: css and xhtml
- Page 364 and 365:
testing your inheritance skills 326
- Page 366 and 367:
validating css 328 Chapter 8 The ex
- Page 368 and 369:
getting a feel for some other prope
- Page 370 and 371:
time for some mental pushups 332 Ch
- Page 372 and 373:
exercise solutions Sharpen your pen
- Page 374 and 375:
exercise solutions Sharpen your pen
- Page 376 and 377:
exercise solutions Exercise solutio
- Page 379 and 380:
9 styling with fonts and colors Exp
- Page 381 and 382:
Add color to your text with the col
- Page 383 and 384:
Monospace Family Courier Courier Ne
- Page 385 and 386:
Specifying font families using CSS
- Page 387 and 388:
Getting Tony a new font-family Let
- Page 389 and 390:
How do I deal with everyone having
- Page 391 and 392:
em body { font-size: 14px; } h1 { f
- Page 393 and 394:
Let’s look at how this all works.
- Page 395 and 396:
Test driving the font sizes Here’
- Page 397 and 398:
Changing a font’s weight The font
- Page 399 and 400:
Adding style to your fonts You’re
- Page 401 and 402:
Cool. Love the new look. Hey, how a
- Page 403 and 404:
Or, say you mix together 80% red an
- Page 405 and 406:
How do I specify Web colors? Let me
- Page 407 and 408:
Specify color using hex codes Now l
- Page 409 and 410:
Step two: Convert each hex number i
- Page 411 and 412:
Using an online color chart You’l
- Page 413 and 414:
Back to Tony’s page... We’re go
- Page 415 and 416:
Everything you ever wanted to know
- Page 417 and 418:
BULLET POINTS CSS gives you lots o
- Page 419 and 420:
Markup Magnets Solutions styling wi
- Page 421:
Sharpen your pencil Solution What d
- Page 424 and 425:
what we’re going to do with the l
- Page 426 and 427:
starting with simple styles Setting
- Page 428 and 429:
learning about line height Checking
- Page 430 and 431:
the box model A closer look at the
- Page 432 and 433:
how boxes can be configured What yo
- Page 434 and 435:
some details about boxes Q: It seem
- Page 436 and 437:
working through padding, borders, a
- Page 438 and 439:
a first cut on paragraph styling A
- Page 440 and 441:
testing the padding A test drive wi
- Page 442 and 443:
ackground images Adding a backgroun
- Page 444 and 445:
more about the background-image pro
- Page 446 and 447:
getting more sophisticated with pad
- Page 448 and 449:
overview of borders A two-minute gu
- Page 450 and 451:
getting fancy with borders Border f
- Page 452 and 453:
when to use classes Welcome back, a
- Page 454 and 455:
identifying elements The id attribu
- Page 456 and 457:
using and selecting an id Using an
- Page 458 and 459:
using more than one style sheet Rem
- Page 460 and 461:
targeting media types Style sheets
- Page 462 and 463:
eview of boxes, backgrounds, classe
- Page 464 and 465:
exercise solutions 426 Chapter 10 X
- Page 466 and 467:
exercise solutions Exercise Solutio
- Page 468 and 469:
a new lounge assignment 430 Chapter
- Page 470 and 471:
a new element called div Jim 432 Ch
- Page 472 and 473:
how to mark logical sections with d
- Page 474 and 475:
nesting divs Exposing even more str
- Page 476 and 477:
adding divs to the lounge Meanwhile
- Page 478 and 479:
adding style to a div Adding a bord
- Page 480 and 481:
plan of attack 442 Chapter 11 The g
- Page 482 and 483:
more about box widths 444 Chapter 1
- Page 484 and 485:
ox width and height fine points Q:
- Page 486 and 487:
how text-align works Test driving t
- Page 488 and 489:
calculating box widths Sharpen your
- Page 490 and 491:
selecting only certain headings Wha
- Page 492 and 493:
more on selecting children Sharpen
- Page 494 and 495:
another way to specify line height
- Page 496 and 497:
specifying properties with shorthan
- Page 498 and 499:
shortcuts for fonts And even more s
- Page 500 and 501:
another lounge assignment The loung
- Page 502 and 503:
how to use spans Adding s in three
- Page 504 and 505:
more on span Sharpen your pencil Q:
- Page 506 and 507:
how to style links The element and
- Page 508 and 509:
more on pseudo-classes 470 Chapter
- Page 510 and 511:
using pseudo-classes for links Test
- Page 512 and 513:
what the cascade does 474 Chapter 1
- Page 514 and 515:
calculating specificity Welcome to
- Page 516 and 517:
using the cascade Step two: Find al
- Page 518 and 519:
when the cascade doesn’t provide
- Page 520 and 521:
eview of divs, spans, and pseudo-cl
- Page 522 and 523:
exercise solutions Exercise Solutio
- Page 524 and 525:
exercise solutions Sharpen your pen
- Page 526 and 527:
examining a two column page Did you
- Page 528 and 529:
playing with flow Here’s your pag
- Page 530 and 531:
how flow works How it all works tog
- Page 532 and 533:
questioning margins Q: So if I have
- Page 534 and 535:
how float works Now float it Now le
- Page 536 and 537:
a new assignment: starbuzz Exercise
- Page 538 and 539:
looking over the markup A look at t
- Page 540 and 541:
eginning starbuzz style And a look
- Page 542 and 543:
moving the sidebar Move the sidebar
- Page 544 and 545:
testing the float Test driving Star
- Page 546 and 547:
using margins for two columns Sharp
- Page 548 and 549:
a margin alternative 510 Chapter 12
- Page 550 and 551:
more about columns and floats Test
- Page 552 and 553:
the no css test Exercise 514 Chapte
- Page 554 and 555:
contemplating a better solution A q
- Page 556 and 557:
frozen layouts A frozen test drive
- Page 558 and 559:
using absolute positioning How abso
- Page 560 and 561:
more about the position property Q:
- Page 562 and 563:
using margins with positioning Now
- Page 564 and 565:
overview of two column techiques Wh
- Page 566 and 567:
more absolute positioning 528 Chapt
- Page 568 and 569:
discussing float and absolute posit
- Page 570 and 571:
an absolute gotcha One more thing y
- Page 572 and 573:
we need fixed positioning 534 Chapt
- Page 574 and 575:
adding a new div Putting the coupon
- Page 576 and 577:
test drive and comparison A rather
- Page 578 and 579:
playing with relative positioning T
- Page 580 and 581:
eview of float and positioning BULL
- Page 582 and 583:
exercise solutions p h1 p p p p p h
- Page 584 and 585:
exercise solutions Sharpen your pen
- Page 587 and 588:
13 tables and more lists Getting Ta
- Page 589 and 590:
How do you make tables with XHTML?
- Page 591 and 592:
What the browser creates Let’s ta
- Page 593 and 594:
there are no Dumb Questions Q: Why
- Page 595 and 596:
Adding a caption and a summary Ther
- Page 597 and 598:
Before we start styling, let’s ge
- Page 599 and 600:
Taking the styled tables for a test
- Page 601 and 602:
Sharpen your pencil Q: So border sp
- Page 603 and 604:
Sharpen your pencil tables and more
- Page 605 and 606:
Exercise Your turn. Add the class
- Page 607 and 608:
How to tell cells to span more than
- Page 609 and 610:
The new and improved table Make the
- Page 611 and 612:
Truth or Consequences, NM August 9t
- Page 613 and 614:
Determine the selector to select on
- Page 615 and 616:
Giving Tony’s site the final poli
- Page 617 and 618:
What if you want a custom marker? D
- Page 619 and 620:
BULLET POINTS n XHTML tables are us
- Page 621 and 622:
Exercise Solutions First type in th
- Page 623 and 624:
Artist Album Enigma Le Roi Est M
- Page 625 and 626:
Sharpen your pencil Solution .cente
- Page 627 and 628:
We can use a descendant selector to
- Page 629 and 630:
14 xhtml forms Getting Interactive
- Page 631 and 632:
How forms work in the browser To a
- Page 633 and 634:
What the browser creates Big surpri
- Page 635 and 636:
Okay, so I have an XHTML form - tha
- Page 637 and 638:
Same here, we’re still using the
- Page 639 and 640:
select The element creates a menu
- Page 641 and 642:
... ... ... ... ... ...
- Page 643 and 644:
Adding the form element Once you kn
- Page 645 and 646:
Q: What’s the difference between
- Page 647 and 648:
A form-al test drive Reload the pag
- Page 649 and 650:
Test driving the element Let’s g
- Page 651 and 652:
Punching the radio buttons Take the
- Page 653 and 654:
Adding the checkboxes and text area
- Page 655 and 656:
Stop right there. Do you think I di
- Page 657 and 658:
Extra credit... name = “Buckaroo
- Page 659 and 660:
Watching GET in action There’s no
- Page 661 and 662:
I’ve been meaning to say, great j
- Page 663 and 664:
Table CSS I guess. But when it come
- Page 665 and 666:
Getting the form elements into a ta
- Page 667 and 668:
Test driving a very tabular form Op
- Page 669 and 670:
The final test drive You’re going
- Page 671 and 672:
Passwords The password element wor
- Page 673 and 674:
We didn’t need these. ... ... ...
- Page 675 and 676:
Exercise Solutions Choose your be
- Page 677 and 678:
Appendix: leftovers The Top Ten Top
- Page 679 and 680:
Selecting by Siblings You can also
- Page 681 and 682:
#3 Multimedia & Flash Browsers can
- Page 683 and 684:
#5 Client-side Scripting HTML pages
- Page 685 and 686:
#7 Tuning for Search Engines Many u
- Page 687 and 688:
#9 Pages for Mobile Devices Do you
- Page 689 and 690:
Symbols !important 477 #d2b48c (col
- Page 691 and 692:
C hex codes 379 HTML 4.01 261 elem
- Page 693 and 694:
F Fantasy font family 345 Fetch 134
- Page 695 and 696:
providers 127 renaming root folder
- Page 697 and 698:
destination anchors 151-155 from ht
- Page 699 and 700:
JPEG quality setting 190 launching
- Page 701 and 702:
shorthand 458-461 background 459 bo
- Page 703 and 704:
mobile devices 422-423 multiple 421
- Page 705:
positioning 532 fixed 535 element