Tired of reading HTML books that only make sense after you're an expert? Then it's about time you picked up Head First HTML and really learned HTML. You want to learn HTML so you can finally create those web pages you've always wanted, so you can communicate more effectively with friends, family, fans, and fanatic customers. You also want to do it right so you can actually maintain and expand your web pages over time so they work in all browsers and mobile devices. Oh, and if you've never heard of CSS, that's okay--we won't tell anyone you're still partying like it's 1999--but if you're going to create web pages in the 21st century then you'll want to know and understand CSS.

Learn the real secrets of creating web pages, and why everything your boss told you about HTML tables is probably wrong (and what to do instead). Most importantly, hold your own with your co-worker (and impress cocktail party guests) when he casually mentions how his HTML is now strict, and his CSS is in an external style sheet.

With Head First HTML, you'll avoid the embarrassment of thinking web-safe colors still matter, and the foolishness of slipping a font tag into your pages. Best of all, you'll learn HTML and CSS in a way that won't put you to sleep. If you've read a Head First book, you know what to expect: a visually-rich format designed for the way your brain works. Using the latest research in neurobiology, cognitive science, and learning theory, this book will load HTML and CSS into your brain in a way that sticks.

So what are you waiting for? Leave those other dusty books behind and come join us in Webville. Your tour is about to begin.

Osoby które kupowały "Head First HTML and CSS. A Learner's Guide to Creating Standards-Based Web Pages. 2nd Edition", wybierały także:

• AMP: Building Accelerated Mobile Pages 135,91 zÅ‚, (29,90 zÅ‚ -78%)
• The HTML and CSS Workshop 106,79 zÅ‚, (29,90 zÅ‚ -72%)
• LESS. Kurs video. Poziom pierwszy. Jak usprawnić pracÄ™ z CSS 89,00 zÅ‚, (35,60 zÅ‚ -60%)
• JavaScript Masterclass 88,41 zÅ‚, (38,90 zÅ‚ -56%)
• Building Dynamic Web Experiences with PHP 88,41 zÅ‚, (38,90 zÅ‚ -56%)

Spis treści

Head First HTML and CSS. A Learner's Guide to Creating Standards-Based Web Pages. 2nd Edition eBook -- spis treści

• Head First HTML and CSS
• Dedication
• Praise for Head First HTML and CSS
• More Praise for Head First HTML and CSS
• Praise for other books by Eric Freeman and Elisabeth Robson
• Authors of Head First HTML and CSS
• How to Use This Book: Intro
  • Who is this book for?
    • Who should probably back away from this book?
  • We know what youre thinking
    • And we know what your brain is thinking
  • Metacognition: thinking about thinking
  • Heres what WE did
  • Heres what YOU can do to bend your brain into submission
  • Read me
  • Tech reviewers (first edition)
  • Acknowledgments (first edition)
  • Tech reviewers (second edition)
  • Acknowledgments (second edition)
  • Safari Books Online
• 1. Getting to Know HTML: The Language of the Web
  • The Web Video killed the radio star
  • What does the web server do?
  • What does the web browser do?
  • What you write (the HTML)
  • What the browser creates
  • Your big break at Starbuzz Coffee
  • Creating the Starbuzz web page
  • Creating an HTML file (Mac)
  • Creating an HTML file (Windows)
  • Meanwhile, back at Starbuzz Coffee...
  • Saving your work
  • Opening your web page in a browser
  • Take your page for a test drive
  • Are we there yet?
  • Another test drive
  • Tags dissected
  • Meet the style element
  • Giving Starbuzz some style...
  • Cruisin with style...
• 2. Going Further with Hypertext: Meeting the HT in HTML
  • Head First Lounge, new and improved
  • Creating the new lounge
  • What did we do?
    • What does the browser do?
  • Understanding attributes
  • Getting organized
  • Organizing the lounge...
  • Technical difficulties
  • Planning your paths...
  • Fixing those broken images...
    • Finding the path from lounge.html to drinks.gif
    • Finding the path from elixir.html to red.jpg
• 3. Building Blocks: Web Page Construction
  • From journal to website, at 12 mph
  • The rough design sketch
  • From a sketch to an outline
  • From the outline to a web page
  • Test driving Tonys web page
  • Adding some new elements
  • Meet the <q> element
    • And test drive
  • Looooong quotes
  • Adding a <blockquote>
  • The real truth behind the <q> and <blockquote> mystery
  • Meanwhile, back at Tonys site...
  • Of course, you could use the <p> element to make a list...
    • But there are lots of reasons not to
  • Constructing HTML lists in two easy steps
  • Taking a test drive through the cities
  • Putting one element inside another is called nesting
  • To understand the nesting relationships, draw a picture
  • Using nesting to make sure your tags match
    • So what?
• 4. Getting Connected: A Trip to Webville
  • Getting Starbuzz (or yourself) onto the Web
  • Finding a hosting company
  • HELLO, my domain name is...
  • How can you get a domain name?
  • Moving in
  • Getting your files to the root folder
  • As much FTP as you can possibly fit in two pages
  • Back to business...
  • Mainstreet, URL
  • What is HTTP?
  • Whats an absolute path?
  • How default pages work
  • How do we link to other websites?
  • Linking to Caffeine Buzz
  • And now for the test drive...
  • Web page fit and finish
    • Improving accessibility by adding a title to your links
  • The title test drive...
  • Linking into a page
  • Using the id attribute to create a destination for <a>
  • How to link to elements with ids
    • Finding the destination heading
    • Now that youve got your hands on their HTML...
    • Reworking the link in index.html
  • Linking to a new window
  • Opening a new window using target
• 5. Adding Images to your Pages: Meeting the Media
  • How the browser works with images
  • How images work
    • So, what are the differences among JPEG, PNG, and GIF?
  • <img>: its not just relative links anymore
  • Always provide an alternative
  • Sizing up your images
  • Creating the ultimate fan site: myPod
  • Check out myPods index.html file
  • Whoa! The image is way too large
  • Resize the image to fit in the browser
    • Heres what youre going to do:
  • Open the image
  • Resizing the image
  • Youve resizednow save
  • Save the image
  • Fixing up the myPod HTML
  • And now for the test drive...
  • More photos for myPod
  • Taking myPod for another test drive
  • Reworking the site to use thumbnails
    • Create a new directory for thumbnails
  • Create the thumbnails
  • Rework the HTML to use the thumbnails
  • Take myPod for another test drive
  • Turning the thumbnails into links
  • Create individual pages for the photos
  • So, how do I make links out of images?
  • Add the image links to index.html
  • Open the myPod logo
    • A closer look...
  • What format should we use?
  • To be transparent, or not to be transparent? That is the question...
  • Save the transparent PNG
  • Wait, what is the color of the web page background?
  • Set the matte color
  • Check out the logo with a matte
  • Save the logo
  • Add the logo to the myPod web page
  • And now for the final test drive
• 6. Standards and All that Jazz: Getting Serious with HTML
  • A Brief History of HTML
  • The new, and improved, HTML5 doctype
  • HTML, the new living standard
  • Adding the document type definition
  • The doctype test drive
  • Meet the W3C validator
  • Validating the Head First Lounge
  • Houston, we have a problem...
  • Fixing that error
  • Were almost there...
  • Adding a meta tag to specify the character encoding
  • Making the validator (and more than a few browsers) happy with a <meta> tag...
  • Third times the charm?
  • Calling all HTML professionals, grab the handbook...
• 7. Getting Started with CSS: Adding a Little Style
  • Youre not in Kansas anymore
  • Overheard on Webvilles Trading Spaces
  • Using CSS with HTML
  • Wanna add more style?
  • Getting CSS into your HTML
  • Adding style to the lounge
  • Cruising with style: the test drive
  • Style the heading
    • Test drive...
  • Lets put a line under the welcome message too
  • We have the technology: specifying a second rule, just for the h1
    • Another test drive...
  • So, how do selectors really work?
  • Seeing selectors visually
  • Getting the lounge style into the elixirs and directions pages
  • Creating the lounge.css file
  • Linking from lounge.html to the external stylesheet
  • Linking from elixir.html and directions.html to the external stylesheet
  • Test driving the entire lounge...
  • Its time to talk about your inheritance...
    • The elements inside the <p> element inherit the font-family style from <p>
  • What if we move the font up the family tree?
    • What are you waiting for...give it a try
  • Test drive your new CSS
  • Overriding inheritance
  • Test drive
  • Adding an element to the greentea class
  • Creating a class selector
  • A greentea test drive
  • Taking classes further...
  • The worlds smallest and fastest guide to how styles are applied
    • First, do any selectors select your element?
    • What about inheritance?
    • Struck out again? Then use the default
    • What if multiple selectors select an element?
    • And if we still dont have a clear winner?
  • Making sure the lounge CSS validates
• 8. Styling with Fonts and Colors: Expanding Your Vocabulary
  • Text and fonts from 30,000 feet
  • What is a font family anyway?
  • Specifying font families using CSS
  • How font-family specifications work
  • Dusting off Tonys journal
  • Getting Tony a new font-family
  • Test driving Tonys new fonts
  • How do I deal with everyone having different fonts?
  • How Web Fonts work
  • How to add a Web Font to your page...
    • Step one: Find a font
    • Step two: Make sure you have all the formats of the font you need
    • Step three: Place your font files on the Web
    • Step 4: Add the @font-face property to your CSS
    • Step five: Use the font-family name in your CSS
    • Step six: Load the page!
  • Test drive the Web Font in Tonys journal
  • Adjusting font sizes
  • So, how should I specify my font sizes?
  • Lets make these changes to the font sizes in Tonys web page
  • Test driving the font sizes
  • Changing a fonts weight
  • Test drive the normal-weight headings
  • Adding style to your fonts
  • Styling Tonys quotes with a little italic
  • How do web colors work?
  • How do I specify web colors? Let me count the ways...
    • Specify color by name
    • Specify color in red, green, and blue values
    • Specify color using hex codes
  • The two-minute guide to hex codes
  • How to find web colors
    • Using an online color chart
  • Back to Tonys page...were going to make the headings orange, and add an underline too
  • Test drive Tonys orange headings
  • Everything you ever wanted to know about text decorations in less than one page
  • Removing the underline...
• 9. The Box Model: Getting Intimate with Elements
  • The lounge gets an upgrade
  • The new and improved, ultra-stylish lounge
  • Setting up the new lounge
  • Starting with a few simple upgrades
  • A very quick test drive
  • One more adjustment
  • Checking out the new line height
  • Getting ready for some major renovations
  • A closer look at the box model
  • What you can do to boxes
  • Meanwhile, back at the lounge...
  • Creating the guarantee style
  • A test drive of the paragraph border
  • Padding, border, and margins for the guarantee
  • Adding some padding
  • A test drive with some padding
  • Now lets add some margin
  • A test drive with the margin
  • Adding a background image
  • Test driving the background image
  • Fixing the background image
  • Another test drive of the background image
  • How do you add padding only on the left?
  • Are we there yet?
  • How do you increase the margin just on the right?
  • A two-minute guide to borders
  • Border fit and finish
  • Congratulations!
    • Welcome back, and good timing. Were just about to listen in on an interview with a class...
  • The id attribute
  • But how do I use id in CSS?
  • Using an id in the lounge
    • Step one: Change the class attribute to an id in your lounge.html file
    • Step two: Change the .guarantee class selector in lounge.css to an id selector
    • Step three: Save your changes and reload the page
  • Remixing stylesheets
  • Using multiple stylesheets
  • Stylesheetstheyre not just for desktop browsers anymore...
  • Add media queries right into your CSS
• 10. Divs and Spans: Advanced Web Construction
  • A close look at the elixirs HTML
  • Lets explore how we can divide a page into logical sections
    • Identifying your logical sections
    • Using <div>s to mark sections
    • Labeling the <div>s
    • Adding some style
    • Exposing even more structure
    • Adding structure on structure
  • Meanwhile, back at the lounge...
  • Taking the <div> for a test drive
  • Adding a border
  • An over-the-border test drive
  • Adding some real style to the elixirs section
  • The game plan
  • Working on the elixir width
  • Test driving the width
  • Adding the basic styles to the elixirs
  • Test driving the new styles
  • Were almost there...
  • What are we trying to do?
    • What we have now
    • What we want
  • What we need is a way to select descendants
  • Changing the color of the elixir headings
  • A quick test drive...
  • Fixing the line height
  • Look what youve accomplished...
  • Its time to take a little shortcut
  • But theres more...
    • ...and dont forget the shorthand for backgrounds
  • And even more shorthands
  • Adding <span>s in three easy steps
  • Steps one and two: Adding the <span>s
  • Step three: Styling the <span>s
  • Test driving the spans
  • The <a> element and its multiple personalities
  • How can you style elements based on their state?
  • Putting those pseudo-classes to work
  • Test drive the links
  • Isnt it about time we talk about the cascade?
  • The cascade
  • Welcome to the Whats my specificity? game
  • Putting it all together
• 11. Layout and Positioning: Arranging Elements
  • Did you do the Super Brain Power?
  • Use the Flow, Luke
  • What about inline elements?
  • How it all works together
  • One more thing you should know about flow and boxes
    • When the browser is placing two inline elements next to each other...
    • When the browser is placing two block elements on top of each other...
  • How to float an element
    • First, give it an identity
    • Now give it a width
    • Now float it
  • Behind the scenes at the lounge
  • The new Starbuzz
  • A look at the markup
  • And a look at the style
  • Lets take Starbuzz to the next level
  • Move the sidebar just below the header
  • Set the width of the sidebar and float it
  • Test driving Starbuzz
  • Fixing the two-column problem
  • Setting the margin on the main section
  • Test drive
  • Uh oh, we have another problem
  • Solving the overlap problem
  • Test drive
  • Righty tighty, lefty loosey
    • Step one: Start with the sidebar
    • Step two: Take care of the main content
    • Step three: Take care of the footer
  • A quick test drive
  • Liquid and frozen designs
    • HTML changes
    • CSS changes
  • A frozen test drive
  • Whats the state between liquid and frozen? Jello, of course!
  • Test driving with a tank of jello
  • How absolute positioning works
    • What the CSS does
  • Another example of absolute positioning
    • Whos on top?
  • Using absolute positioning
  • Changing the Starbuzz CSS
  • Now we just need to rework the main <div>
  • Time for the absolute test drive
  • How CSS table display works
  • How to create the CSS and HTML for a table display
  • Adding HTML structure for the table display
  • How to use CSS to create table displays
  • Meanwhile, back at Starbuzz...
  • A quick test drive...
  • Whats the problem with the spacing?
  • Fix the spacing
  • A final test drive of our table display
  • Strategies for your CSS layout toolbox
    • The Floating Layout
    • The Jello Layout
    • The Absolute Layout
    • The Table Display Layout
  • Problems with the header
  • Fixing the header images with float
  • Test drive your float
    • How float works in the header
  • Adding the award
  • Positioning the award
  • How does fixed positioning work?
  • Putting the coupon on the page
  • Putting the coupon on the page
  • Using a negative left property value
  • A rather positive, negative test drive
• 12. HTML5 Markup: Modern HTML
  • Rethinking HTML structure
  • Modern Starbuzz
  • Update your Starbuzz HTML
  • Test driving the new ride
  • Before you continue...
  • How to update your CSS for the new elements
  • Test drive #2
  • Building the Starbuzz blog page
  • Setting up the CSS for the blog page
  • Test drive the blog page
  • We still need to add a date to the blog...
  • Adding the <time> element to your blog
    • Test drive the blog
  • How to add more <header> elements
  • Testing the header
  • So, whats wrong with the header anyway?
  • A final test drive for the headers
  • Completing the navigation
  • Adding the navigation CSS
  • Who needs GPS? Giving the navigation a test drive
  • Adding a <nav> element...
  • Making our CSS more specific...
  • Ta-da! Look at that navigation!
  • Creating the new blog entry
  • And now, introducing the <video> element
  • Lights, camera, action...
  • How does the <video> element work?
  • Closely inspecting the video attributes...
  • What you need to know about video formats
  • The video format contenders
  • How to juggle all those formats...
  • Take 2: lights, camera, action...
  • How to be even more specific with your video formats
  • Update and test drive
• 13. Tables and More Lists: Getting Tabular
  • How do you make tables with HTML?
  • Creating a table with HTML
  • What the browser creates
  • Tables dissected
  • Adding a caption
  • Test drive...and start thinking about style
  • Before we start styling, lets get the table into Tonys page
  • Now lets style the table
  • Taking the styled tables for a test drive
  • Getting those borders to collapse
  • How about some color?
  • How about some color in the table rows?
  • Did we mention that Tony made an interesting discovery in Truth or Consequences, New Mexico?
  • Another look at Tonys table
  • How to tell cells to span more than one row
  • Test drive the table
  • Trouble in paradise?
  • Test driving the nested table
  • Overriding the CSS for the nested table headings
  • Giving Tonys site the final polish
  • Giving the list some style
  • What if you want a custom marker?
    • And, the final test drive...
• 14. HTML Forms: Getting Interactive
  • How forms work
  • How forms work in the browser
  • What you write in HTML
  • What the browser creates
  • How the <form> element works
  • What can go in a form?
  • What can go in a form? (part 2)
  • Oh, even more can go in a form!
  • Getting ready to build the Bean Machine form
  • Figuring out what goes in the form element
  • Adding the <form> element
  • How form element names work
  • Back to getting those input elements into your HTML
  • A form-al test drive
  • Adding some more input elements to your form
  • Adding the select element
  • Test driving the <select> element
  • Give the customer a choice of whole or ground beans
  • Punching the radio buttons
  • Using more input types
  • Adding the number and date input types
  • Test driving the number and date input elements
  • Completing the form
  • Adding the checkboxes and text area
  • The final form test drive
  • Watching GET in action
  • Getting the form elements into HTML structure for table display layout
  • Styling the form with CSS
  • Test drive the styled form
  • A word about accessibility
  • What more could possibly go into a form?
  • More things that can go in a form
  • Congratulations! You made it to the end
• A. Leftovers: The Top Ten Topics (We Didnt Cover)
  • #1 More CSS selectors
    • Pseudo-elements
    • Attribute selectors
    • Selecting by siblings
    • Combining selectors
  • #2 Vendor-specific CSS properties
  • #3 CSS transforms and transitions
  • #4 Interactivity
    • What else can scripting do?
  • #5 HTML5 APIs and web apps
  • #6 More on Web Fonts
  • #7 Tools for creating web pages
    • Some tools to consider
  • #8 XHTML5
  • #9 Server-side scripting
  • #10 Audio
• B. This isnt goodbye
• Index
• About the Authors
• Colophon
• Copyright