Head First HTML with CSS

More documents

Recommendations

Info

4 getting connected A Trip to Webville Web pages are a dish best served on the Internet. So far you’ve only created <strong>HTML</strong> pages that live on your own computer. You’ve also only linked to pages that are on your own computer. We’re about to change all that. In this chapter we’ll encourage you to get those Web pages on the Internet where all your friends, fans, and customers can actually see them. We’ll also reveal the mysteries of linking to other pages by cracking the code of the h, t, t, p, :, /, /, w, w, w. So, gather your belongings; our next stop is Webville. WARNING: once you get to Webville, you may never come back. Send us a postcard. We’re going to Webville! We’re leaving our dusty ol’ local file system behind for good. this is a new chapter 125
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 165 and 166: Finding a hosting company To get yo
Page 167 and 168: Q: Why is it called a “domain nam
Page 169 and 170: Q: Wait a sec, what’s the “root
Page 171 and 172: 4 You can also make a new directory
Page 173 and 174: DO try this at home Back to busines
Page 175 and 176: What is the HTTP Protocol? HTTP is
Page 177 and 178: Q: What is important about the abso
Page 179 and 180: How default pages work 5 HTTP respo
Page 181 and 182: A B C D E Write the URL here. getti
Page 183 and 184: Linking to Caffeine Buzz Open your
Page 185 and 186: At Caffeine Buzz we use relative li
Page 187 and 188: Web page fit and finish Can you say
Page 189 and 190: Exercise Linking into a page Open y
Page 191 and 192: How to link to destination anchors
Page 193 and 194: Q: When I have two attributes in an
Page 195 and 196: Here’s the main Starbuzz Coffee p
Page 197 and 198: Head First: Hello target, we’re s
Page 199 and 200: BULLET POINTS n n n Typically the b
Page 201 and 202: Earl needs a little help with his U
Page 203 and 204: 5 adding images to your pages Meeti
Page 205 and 206: Now let’s take a look behind the
Page 207 and 208: How images work Images are just ima
Page 209 and 210: JPEG GIF Yeah, sure, GIF works grea
Page 211 and 212: And now for the formal introduction
Page 213 and 214:
Q: So the element is quite simple
Page 215 and 216:
Sizing up your images There’s one
Page 217 and 218:
Check out myPod’s “index.html
Page 219 and 220:
Whoa! The image is way too large We
Page 221 and 222:
Resize the image to fit in the brow
Page 223 and 224:
Open the image First, start your ph
Page 225 and 226:
Resizing the image, continued... Af
Page 227 and 228:
You’ve resized - now save Now you
Page 229 and 230:
Fixing up the myPod HTML Once you
Page 231 and 232:
More photos for myPod A new batch o
Page 233 and 234:
Reworking the site to use thumbnail
Page 235 and 236:
Rework the HTML to use the thumbnai
Page 237 and 238:
Turning the thumbnails into links Y
Page 239 and 240:
Exercise adding images to your web
Page 241 and 242:
adding images to your web pages pas
Page 243 and 244:
Open the myPod logo Let’s check o
Page 245 and 246:
To be transparent, or not to be tra
Page 247 and 248:
Wait, what is the color of the Web
Page 249 and 250:
Save the logo Okay you’ve made al
Page 251 and 252:
Q: Do I really need to know all thi
Page 253 and 254:
HTMLcross It’s time to give your
Page 255 and 256:
Sharpen your pencil Solution Here
Page 257 and 258:
Exercise Solutions Did you notice h
Page 259:
Exercise Solutions Sharpen your pen
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:
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:
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:
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
show all

Head First HTML with CSS

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?