Head First HTML with CSS

More documents

Recommendations

Info

1 getting to know HTML The Language of the Web Not so fast... to get to know me you’ve got to speak the universal language. You know, HTML and CSS. The only thing that is standing between you and getting yourself on the Web is learning to speak the lingo: HyperText Markup Language, or HTML for short. So, get ready for some language lessons. After this chapter, not only are you going to understand some basic elements of HTML, but you’ll also be able to speak HTML with a little style. Heck, by the end of this book you’ll be talking HTML like you grew up in Webville. this is a new chapter 1
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 40 and 41: html powers the web The Web Video k
Page 42 and 43: writing some html What you write (t
Page 44 and 45: more about markup and tags Q: So HT
Page 46 and 47: what the markup does Sharpen your p
Page 48 and 49: what goes on the starbuzz page Shar
Page 50 and 51: writing html on a macintosh Creatin
Page 52 and 53: writing html on windows Creating an
Page 54 and 55: editors and html 16 Chapter 1 there
Page 56 and 57: saving your html Saving your work..
Page 58 and 59: testing your html Taking your page
Page 60 and 61: your first html markup Starbuzz Cof
Page 62 and 63: another test with some markup Anoth
Page 64 and 65: elements and matching tags Q: So ma
Page 66 and 67: using css for style 28 Chapter 1 Ok
Page 68 and 69: adding a style element Giving Starb
Page 70 and 71: looking more closely at css 32 Chap
Page 72 and 73: content and style HTML CSS Greeting
Page 74 and 75: eview of basic html and css 36 Chap
Page 76 and 77: exercise solutions Sharpen your pen
Page 78 and 79: exercise solutions Exercise Solutio
Page 80 and 81: exercise solutions Exercise Solutio
Page 82 and 83: improving the head first lounge Hea
Page 84 and 85: looking at the source files Creatin
Page 86 and 87: how to create links What did we do?
Page 88 and 89:
how links work 2 Next, when a user
Page 90 and 91:
attributes and elements The “href
Page 92 and 93:
linking back to the main page Exerc
Page 94 and 95:
organizing your site with folders G
Page 96 and 97:
eorganizing and broken links Exerci
Page 98 and 99:
working with paths Planning your pa
Page 100 and 101:
a little practice with paths Sharpe
Page 102 and 103:
uilding the href 4 Create an href t
Page 104 and 105:
elative paths and images Fixing tho
Page 106 and 107:
fixing images with relative links E
Page 108 and 109:
70 Chapter 2 The Relativity Grand C
Page 110 and 111:
some fun for your left brain 72 Cha
Page 112 and 113:
exercise solutions 74 Chapter 2 Exe
Page 114 and 115:
exercise solutions 76 Chapter 2 The
Page 116 and 117:
meet tony and his segway Tony’s S
Page 118 and 119:
making a rough sketch The rough des
Page 120 and 121:
turning the outline into a web page
Page 122 and 123:
test driving tony’s page Test dri
Page 124 and 125:
quotes in your html Meet the eleme
Page 126 and 127:
adding a quote Exercise 88 Chapter
Page 128 and 129:
creating longer quotes Looooong Quo
Page 130 and 131:
all about quotes and blockquotes Q:
Page 132 and 133:
lock and inline elements The real t
Page 134 and 135:
inline versus block Hey there, Bloc
Page 136 and 137:
carriage returns and the br element
Page 138 and 139:
empty elements have no closing tag
Page 140 and 141:
we need a list for tony’s site Me
Page 142 and 143:
constructing a list Constructing HT
Page 144 and 145:
testing out the list 106 Chapter 3
Page 146 and 147:
more about lists Q: Do I always hav
Page 148 and 149:
understanding nesting by drawing To
Page 150 and 151:
catching mismatched tags 112 Chapte
Page 152 and 153:
character entities are for special
Page 154 and 155:
tasting a few elements Element Soup
Page 156 and 157:
left brain resting station 9 118 Ch
Page 158 and 159:
exercise solutions Exercise Solutio
Page 160 and 161:
Page 163 and 164:
4 getting connected A Trip to Webvi
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:
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:
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?