Đang tải... (xem toàn văn)
element to make a list Section 3.17 Constructing HTML lists in two easy steps Section 3.18 Taking a test drive through the cities Section 3.19 Putting one element inside another is called "nesting " Section 3.20 To understand the nesting relationships, draw a picture Section 3.21 Using nesting to make sure your tags match Section 3.22 So what? Section 3.23 BE the Browser Section 3.24 Who am I? Section 3.25 Element Soup Section 3.26 HTMLcross Section 3.27 BE the Browser Solution Section 3.28 Exercise Solutions: Who am I? Chapter 4 A Trip to Webville Section 4.1 Getting Starbuzz (or yourself) onto the Web Section 4.2 Finding a hosting company Section 4.3 HELLO, my domain name is Section 4.4 How can you get a domain name? Section 4.5 Moving in Section 4.6 Getting your files to the root folder Section 4.7 As much FTP as you can possibly fit in two pages Section 4.8 Back to business Section 4.9 Mainstreet, URL Section 4.10 What is the HTTP Protocol? Section 4.11 What's an Absolute Path? Section 4.12 Behind the Scenes: How default pages work Section 4.13 How do we link to other Web sites? Section 4.14 Linking to Caffeine Buzz Section 4.15 And now for the test drive Section 4.16 Five-Minute Mystery Section 4.17 Web page fit and finish Section 4.18 The title test drive Section 4.19 Linking into a page Section 4.20 Using the element to create a destination Section 4.21 How to link to destination anchors Section 4.22 Now that you've got your hands on their HTML Section 4.23 Reworking the link in "index.html" Section 4.24 Five-Minute Mystery Solved Section 4.25 Linking to a new window Section 4.26 Opening a new window using target Section 4.27 The Target Attribute Exposed Section 4.28 HTMLcross Chapter 5 Meeting the Media Section 5.1 How the browser works with images Section 5.2 How images work Section 5.3 : it's not just relative links anymore Section 5.4 Always provide an alternative Section 5.5 Sizing up your images Section 5.6 there are no Dumb Questions Section 5.7 Creating the ultimate fan site: myPod Section 5.8 Check out myPod's "index.html" file Section 5.9 Whoa! The image is way too large Section 5.10 Resize the image to fit in the browser Section 5.11 Open the image Section 5.12 Resizing the image Section 5.13 Resizing the image, continued Section 5.14 You've resized now save Section 5.15 Save the image Section 5.16 Fixing up the myPod HTML Section 5.17 And now for the test drive Section 5.18 More photos for myPod Section 5.19 Taking myPod for another test drive Section 5.20 Reworking the site to use thumbnails Section 5.21 Create the thumbnails Section 5.22 Rework the HTML to use the thumbnails Section 5.23 Take myPod for another test drive Section 5.24 Turning the thumbnails into links Section 5.25 Create individual pages for the photos Section 5.26 So, how do I make links out of images? Section 5.27 Add the image links to "index.html" Section 5.28 Open the myPod logo Section 5.29 What format should we use? Section 5.30 To be transparent, or not to be transparent? That is the question Section 5.31 Save the transparent GIF Section 5.32 Wait, what is the color of the Web page background? Section 5.33 Set the matte color Section 5.34 Set the matte color, continued Section 5.35 Check out the logo with a matte Section 5.36 Save the logo Section 5.37 Add the logo to the myPod Web page Section 5.38 And now for the final test drive Section 5.39 HTMLcross Chapter 6 Serious HTML Section 6.1 A Brief History of HTML Section 6.2 We can't have your pages putting the browser into Quirks Mode! Section 6.3 Adding the document type definition Section 6.4 The DOCTYPE test drive Section 6.5 Meet the W3C validator Section 6.6 Validating the Head First Lounge Section 6.7 Houston, we have a problem Section 6.8 Fixing that error Section 6.9 We're not there yet Section 6.10 Adding a tag to specify the content type Section 6.11 Making the validator (and more than a few browsers) happy with a content tag Section 6.12 Third time's the charm? Section 6.13 Changing the DOCTYPE to strict Section 6.14 Do we have validation ? Section 6.15 Fixing the nesting problem Section 6.16 One more chance to be strict Section 6.17 Strict HTML 4.01, grab the handbook Section 6.18 HTMLcross Section 6.19 Solution Chapter 7 Putting an 'X' into HTML Section 7.1 What is XML ? Section 7.2 What does this have to do with HTML? Section 7.3 So why would you want to use XHTML? Section 7.4 You're much closer to using XHTML than you might think Section 7.5 Going from strict HTML to XHTML 1.0 in three steps Section 7.6 there are no Dumb Questions Section 7.7 Validation: it's not just for HTML Section 7.8 Congratulations, you've just written your first XHTML! Section 7.9 Fireside Chats Section 7.10 HTML or XHTML? The choice is yours Section 7.11 Micro XHTMLcross Section 7.12 Micro XHTMLcross Solution Chapter 8 Adding a Little Style Section 8.1 You're not in Kansas anymore Section 8.2 Overheard on Webville's "Trading Spaces" Section 8.3 Using CSS with XHTML Section 8.4 Getting CSS into your XHTML Section 8.5 Adding style to the lounge Section 8.6 Cruising with style: the test drive Section 8.7 Style the heading Section 8.8 Let's put a line under the welcome message too Section 8.9 We have the technology: specifying a second rule , just for the Section 8.10 So, how do selections really work? Section 8.11 Seeing selectors visually Section 8.12 Getting the Lounge style into the elixirs and directions pages Section 8.13 Creating the "lounge.css" file Section 8.14 Linking from "lounge.html" to the external style Section 8.15 Linking from "elixir.html" and "directions.html" to the external style sheet Section 8.16 Test driving the entire lounge Section 8.17 It's time to talk about your inheritance Section 8.18 What if we move the font up the family tree? Section 8.19 Test drive your new CSS Section 8.20 Overriding inheritance Section 8.21 Test drive Section 8.22 Adding a class to "elixir.html" Section 8.23 Creating a selector for the class Section 8.24 A greentea test drive Section 8.25 Taking classes further Section 8.26 The world's smallest & fastest guide to how styles are applied Section 8.27 Who gets the inheritance? Section 8.28 Making sure the Lounge CSS validates Chapter 9 Expanding your Vocabulary Section 9.1 Text and fonts from 30,000 feet Section 9.2 What is a font family anyway? Section 9.3 Specifying font families using CSS Section 9.4 How font-family specifications work Section 9.5 Dusting off Tony's Journal Section 9.6 Getting Tony a new font-family Section 9.7 Test driving Tony's new fonts Section 9.8 there are no Dumb Questions Section 9.9 How do I deal with everyone having different fonts? Section 9.10 Adjusting font sizes Section 9.11 So, how should I specify my font sizes? Section 9.12 Let's make these changes to the font sizes in Tony's Web page Section 9.13 Test driving the font sizes Section 9.14 there are no Dumb Questions Section 9.15 Changing a font's weight Section 9.16 Sharpen your pencil Section 9.17 Test drive the normal weight headings Section 9.18 Adding style to your fonts Section 9.19 Styling Tony's quotes with a little italic Section 9.20 How do Web colors work? Section 9.21 How do I specify Web colors? Let me count the ways Section 9.22 The two minute guide to hex codes Section 9.23 How to find Web colors Section 9.24 Using an online color chart Section 9.25 there are no Dumb Questions Section 9.26 Back to Tony's page We're going to make the headings orange, and add an underline too Section 9.27 Test drive Tony's orange headings Section 9.28 Everything you ever wanted to know about text-decorations in less than one page Section 9.29 there are no Dumb Questions Section 9.30 Removing the underline Section 9.31 XHTMLcross Section 9.32 Markup Magnets Solutions Chapter 10 Getting Intimate with Elements Section 10.1 Getting Intimate with Elements Section 10.2 The lounge gets an upgrade Section 10.3 The new and improved, ultra-stylish lounge Section 10.4 Setting up the new lounge Section 10.5 Starting with a few simple upgrades Section 10.6 A very quick test drive Section 10.7 One more adjustment Section 10.8 Checking out the new line height Section 10.9 Getting ready for some major renovations Section 10.10 A closer look at the box model Section 10.11 What you can do to boxes Section 10.12 Meanwhile back at the lounge Section 10.13 Creating the guarantee style Section 10.14 A test drive of the paragraph border Section 10.15 Padding, border, and margins for the guarantee Section 10.16 Adding some padding Section 10.17 A test drive with some padding Section 10.18 Now let's add some margin Section 10.19 A test drive with the margin Section 10.20 Adding a background image Section 10.21 Test driving the background image Section 10.22 Fixing the background image Section 10.23 Another test drive of the background image Section 10.24 How do you add padding only on the left? Section 10.25 Are we there yet? Section 10.26 How do you increase the margin just on the right? Section 10.27 A two-minute guide to borders Section 10.28 Border fit and finish Section 10.29 Congratulations! Section 10.30 The Class Exposed Section 10.31 The id attribute Section 10.32 But how do I use id in CSS? Section 10.33 Using an id in the lounge Section 10.34 Remixing style sheets Section 10.35 Using multiple style sheets Section 10.36 Style sheets-they're not just for desktop browsers anymore Section 10.37 there are no Dumb Questions Section 10.38 XHTML cross Section 10.39 XHTML cross Solution Chapter 11 Advanced Web Construction Section 11.1 A close look at the elixirs XHTML Section 11.2 Let's explore how we can divide a page into logical sections Section 11.3 There are no Dumb Questions Section 11.4 Meanwhile, back at the lounge Section 11.5 Taking the for a test drive Section 11.6 Adding a border Section 11.7 An over-the-border test drive Section 11.8 Adding some real style to the elixirs section Section 11.9 The game plan Section 11.10 Working on the elixir width Section 11.11 Test driving the width Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Z] Macintosh creating text files dock TextEdit Markup Magnets 2nd 3rd 4th matching tags 2nd 3rd matte setting the color multimedia myPod Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Z] nested lists nesting Notepad Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Z] opening pages browser opening tag Opera Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Z] page ranking parent 2nd Perl PHP 2nd pixels plain text PNG port positioning absolute 2nd versus float fixed relative z-index POST properties background-color 2nd 3rd background-image 2nd border 2nd 3rd border-bottom 2nd bottom clear color 2nd float 2nd font family font-family font-size keywords pixels font-style 2nd styles font-weight 2nd 3rd left 2nd letter-spacing line-height 2nd list-style margin 2nd padding position right shorthand text-align and images text-decoration 2nd 3rd top 2nd 3rd property protocol file pseudo-classes 2nd Python Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Z] Quicktime quirks mode Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Z] relative path relative paths root folder rowspan Ruby Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Z] Safari sans-serif scripting search engines Segway selectors 2nd 3rd 4th 5th 6th 7th serif server-side scripting Sharpen your pencil 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th span specificity Starbuzz Coffee 2nd 3rd 4th 5th structure 2nd Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Z] tables See also elements, table for presentation 2nd Tags meta target TextEdit Preferences The Internet There are no Dumb Questions 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th 25th 26th 27th 28th 29th 30th 31st 32nd 33rd three-column layout thumbnails Tony's journal 2nd transparency Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Z] Uniform Resource Locator absolute path default pages port protocols Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Z] validation 2nd 3rd Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Z] W3C 2nd Watch it! Web browser Web page Web server Weblogs Webville Guide to Strict HTML, 4.01 Who Does What? 2nd Windows creating text files file extensions Notepad Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Z] XHTML 2nd checklist uses versus HTML XML Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Z] z-index 2nd ... Head First HTML with CSS and XHTML Dedication Praise for Head First HTML with CSS & XHTML Authors of Head First HTML with CSS & XHTML Intro Chapter 1 The Language of the Web... Browser wars? You''ll find out in Chapter 6 And for making HTML, CSS, and XHTML complex enough that people need a book to learn it Praise for Head First HTML with CSS & XHTML "Head First HTML with CSS & XHTML is a thoroughly... More Praise for Head First HTML with CSS & XHTML "I *heart* Head First HTML with CSS & XHTML it teaches you everything you need to learn in a ''fun coated'' format!" Sally Applin, UI Designer and Fine Artist,