[Head First Series 01] • Head First HTML and CSS by Robson, Elisabeth -- Read -- Imperial Library of Trantor

Index

Authors of Head First HTML and CSS Table of Contents Intro

Who is this book for? We know what you’re thinking. We think of a “Head First” reader as a learner. Metacognition: thinking about thinking Here’s what WE did: Here’s 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

The Web killed the radio star What does the web server 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…

Head First Lounge, new and improved Creating the new lounge What did we do? Understanding attributes Getting organized Organizing the lounge… Technical difficulties Planning your paths… Fixing those broken images…

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 Tony’s web page Adding some new elements Meet the <q> element Looooong quotes Adding a <blockquote> The real truth behind the <q> and <blockquote> mystery Meanwhile, back at Tony’s site… Of course, you could use the <p>element to make a list… 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

Getting Starbuzz (or yourself) onto the Web Finding a hosting company HELLO, my 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, USA What is HTTP? What’s an absolute path? How default pages work Earl needs a little help with his URLs How do we link to other websites? Linking to Caffeine Buzz And now for the test drive… Web page fit and finish 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 Linking to a new window Opening a new window using target

How the browser works with images How images work img: it’s not just relative links anymore Always provide an alternative Sizing up your images Creating the ultimate fan site: myPod Check out myPod’s “index.html” file Whoa! The image is way too large Resize the image to fit in the browser Open the image Resizing the image Resizing the image, continued… You’ve resized—now 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 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 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 Set the matte color, continued 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

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 We’re 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 time’s the charm? Calling all HTML professionals, grab the handbook…

You’re not in Kansas anymore Overheard on Webville’s “Trading Spaces” Using CSS with HTML Getting CSS into your HTML Adding style to the lounge Cruising with style: the test drive Style the heading Let’s put a line under the welcome message too We have the technology: specifying a second rule, just for the h1 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… It’s time to talk about your inheritance… What if we move the font up the family tree? 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 world’s smallest and fastest guide to how styles are applied Who gets the inheritance? Making sure the lounge CSS validates Who gets the inheritance?

Text and fonts from 30,000 feet What is a font family anyway? Specifying font families using CSS Dusting off Tony’s journal Getting Tony a new font-family Test driving Tony’s new fonts How do I deal with everyone having different fonts? How Web Fonts work How to add a Web Font to your page… Test drive the Web Font in Tony’s journal Adjusting font sizes So, how should I specify my font sizes? Let’s make these changes to the font sizes in Tony’s web page Test driving the font sizes Changing a font’s weight Test drive the normal-weight headings Adding style to your fonts Styling Tony’s quotes with a little italic How do web colors work? How do I specify web colors? Let me count the ways… The two-minute guide to hex codes Putting it all together How to find web colors Back to Tony’s page…we’re going to make the headings orange, and add an underline too Test drive Tony’s orange headings Everything you ever wanted to know about text decorations in less than one page Removing the underline…

The lounge gets an upgrade Setting up the new lounge Starting with a few simple upgrades 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 Now let’s add some margin Adding a background image Fixing the background image How do you add padding only on the left? How do you increase the margin just on the right? A two-minute guide to borders Border fit and finish Using an id in the lounge Using multiple stylesheets Stylesheets—they’re not just for desktop browsers anymore… Add media queries right into your CSS

A close look at the elixirs HTML Let’s explore how we can divide a page into logical sections Adding a border Adding some real style to the elixirs section The game plan Working on the elixir width Adding the basic styles to the elixirs What we need is a way to select descendants Changing the color of the elixir headings Fixing the line height It’s time to take a little shortcut Adding spans in three easy steps The a element and its multiple personalities How can you style elements based on their state? Putting those pseudo-classes to work Isn’t it about time we talk about the “cascade”? The cascade Welcome to the “What’s my specificity?” game Putting it all together

Did you do the Super Brain Power? Use the Flow, Luke What about inline elements? How it all works together How to float an element Behind the scenes at the lounge The new Starbuzz Move the sidebar just below the header Set the width of the sidebar and float it Fixing the two-column problem Setting the margin on the main section Uh oh, we have another problem Solving the overlap problem Righty tighty, lefty loosey Liquid and frozen designs How absolute positioning works Changing the Starbuzz CSS 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… What’s the problem with the spacing? Fix the spacing A final test drive of our table display Problems with the header Fixing the header images with float Test drive your float Adding the award Positioning the award How does fixed positioning work? Using a negative left property value

Rethinking HTML structure Modern Starbuzz Update your Starbuzz HTML How to update your CSS for the new elements 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 How to add more header elements So, what’s 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

How do you make tables with HTML? Creating a table with HTML What the browser creates Tables dissected Adding a caption Before we start styling, let’s get the table into Tony’s page Getting those borders to collapse How about some color? Tony made an interesting discovery Another look at Tony’s table How to tell cells to span more than one row Test drive the table Trouble in paradise? Overriding the CSS for the nested table headings Giving Tony’s site the final polish What if you want a custom marker?

How forms work How forms work in the browser What you write in HTML What the browser creates How the <form> element works Getting ready to build the Bean Machine form Adding the form element How form element names work Back to getting those input elements into your HTML 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 Watching GET in action Getting the form elements into HTML structure for table display layout Styling the form with CSS A word about accessibility What more could possibly go into a form? More things that can go in a form

#1 More CSS selectors #2 Vendor-specific CSS properties #3 CSS transforms and transitions #4 Interactivity #5 HTML5 APIs and web apps #6 More on Web Fonts #7 Tools for creating web pages #8 XHTML5 #9 Server-side scripting #10 Audio

← Prev
Back
Next →

← Prev
Back
Next →