- 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 261 and 262:
6 standards, compliance, and all th
- Page 263 and 264:
standards, compliance, and all that
- Page 265 and 266:
HTML 4.01 Ah, the good life. HTML 4
- Page 267 and 268:
We can’t have your pages putting
- Page 269 and 270:
Okay, I think we’ve got it now. L
- Page 271 and 272:
See, piece of cake. The DOCTYPE is
- Page 273 and 274:
Validating the Head First Lounge We
- Page 275 and 276:
Fixing that error Okay, this looks
- Page 277 and 278:
See, we’re getting this error mes
- Page 279 and 280:
Making the validator (and more than
- Page 281 and 282:
Okay, it’s been more than a “fe
- Page 283 and 284:
I think we’ve been pretty darn st
- Page 285 and 286:
Do we have validation? standards, c
- Page 287 and 288:
Fixing the nesting problem So it lo
- Page 289 and 290:
Q: Okay, I think I get all this, an
- Page 291 and 292:
Webville Guide to Strict HTML 4.01
- Page 293 and 294:
there are no Dumb Questions Q: That
- Page 295 and 296:
Transitional Strict So, you’re ju
- Page 297 and 298:
Webville Forecast standards, com
- Page 299 and 300:
BULLET POINTS n HTML 4.01 is the HT
- Page 301 and 302:
Exercise Solutions standards, co
- Page 303 and 304:
7 moving to XHTML Putting an ‘X
- Page 305 and 306:
What is XML? Okay, we’re going to
- Page 307 and 308:
I don’t get it. We changed the DO
- Page 309 and 310:
XHTML is becoming the language of c
- Page 311 and 312:
If my HTML is transitional 4.01, an
- Page 313 and 314:
3 All empty tags should end in “
- Page 315 and 316:
Validation: it’s not just for HTM
- Page 317 and 318:
XHTML sounds like a good thing. Is
- Page 319 and 320:
HTML XHTML You’re forgetting a fe
- Page 321 and 322:
Across Micro XHTMLcross It’s been
- Page 323 and 324:
8 getting started with CSS Don’t
- Page 325 and 326:
getting started with css you are he
- Page 327 and 328:
Using CSS with XHTML We’re sure C
- Page 329 and 330:
Getting CSS into your XHTML Okay, y
- Page 331 and 332:
Cruising with style: the test drive
- Page 333 and 334:
Let’s put a line under the welcom
- Page 335 and 336:
Q: So how does that work when you h
- Page 337 and 338:
getting started with css Head F
- Page 339 and 340:
Sharpen your pencil Color in the el
- Page 341 and 342:
Getting the Lounge style into the e
- Page 343 and 344:
Linking from “lounge.html” to t
- Page 345 and 346:
Test driving the entire lounge... S
- Page 347 and 348:
Sharpen your pencil Now that you’
- Page 349 and 350:
It’s time to talk about your inhe
- Page 351 and 352:
Test drive your new CSS As usual, g
- Page 353 and 354:
Test drive Add a rule for the elem
- Page 355 and 356:
Adding a class to “elixir.html”
- Page 357 and 358:
A greentea test drive Save, and the
- Page 359 and 360:
Cool! Yes, that works. One more que
- Page 361 and 362:
And if we still don’t have a clea
- Page 363 and 364:
CSS XHTML You have to admit XHTML i
- Page 365 and 366:
If you have errors in your CSS, usu
- Page 367 and 368:
Making sure the Lounge CSS validate
- Page 369 and 370:
BULLET POINTS n n n CSS contains si
- Page 371 and 372: Markup Magnets Solution Remember dr
- Page 373 and 374: ody { } font-family: sans-serif; h1
- Page 375 and 376: Who gets the inheritance? h1 and h2
- Page 377: Exercise Solutions 2 S 11 L E R 3 1
- Page 380 and 381: common text properties Text and fon
- Page 382 and 383: overview of font families What is a
- Page 384 and 385: develop your sense of fonts Bainbri
- Page 386 and 387: improving tony’s journal Dusting
- Page 388 and 389: some fonts questions Test driving T
- Page 390 and 391: how to specify font sizes Adjusting
- Page 392 and 393: using keywords for size 354 Chapter
- Page 394 and 395: setting up tony’s font sizes Let
- Page 396 and 397: some more questions on font size Q:
- Page 398 and 399: using normal weight Test drive the
- Page 400 and 401: using a font style Styling Tony’s
- Page 402 and 403: overview of web colors How do Web c
- Page 404 and 405: the color names 366 Chapter 9 Why d
- Page 406 and 407: using rgb values Specify color in r
- Page 408 and 409: understanding hex codes The two min
- Page 410 and 411: using a photo editor for web colors
- Page 412 and 413: put your hex skills to the test 374
- Page 414 and 415: testing and more hex colors Test dr
- Page 416 and 417: using a border instead of an underl
- Page 418 and 419: a crossword on color 380 Chapter 9
- Page 420 and 421: exercise solutions 382 Chapter 9 Cr
- 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