|
|
|
|
|
|
|
|
|
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 with CSS & XHTML 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, and so your Web pages work in all the browsers and mobile devices out there. 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 with CSS & XHTML, 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, CSS, and XHTML 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. "Elegant design is at the core of every chapter here, each concept conveyed with equal doses of pragmatism and wit." --Ken Goldstein, Executive Vice President, Disney Online "This book is a thoroughly modern introduction to forward-looking practices in web page markup and presentation." --Danny Goodman, author of Dynamic HTML: The Definitive Guide "What used to be a long trial and error learning process has now been reduced neatly into an engaging paperback." --Mike Davidson, CEO, Newsvine, Inc. "I love Head First HTML with CSS & XHTML--it teaches you everything you need to learn in a 'fun coated' format!" --Sally Applin, UI Designer and Artist "I haven't had as much fun reading a book (other than Harry Potter) in years. And your book finally helped me break out of my hapless so-last-century way of creating web pages." --Professor David M. Arnow, Department of Computer and Information Science, Brooklyn College "If you've ever had a family member who wanted you to design a website for them, buy them Head First HTML with CSS and XHTML. If you've ever asked a family member to design you a web site, buy this book. If you've ever bought an HTML book and ended up using it to level your desk, or for kindling on a cold winter day, buy this book. This is the book you've been waiting for. This is the learning system you've been waiting for." --Warren Kelly, Blogcritics.org |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Head First HTML with CSS and XHTML by Elisabeth Freeman and Eric Freeman Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Printed in the United States of America. Published by O'Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O'Reilly Media books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (safari.oreilly.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or corporate@oreilly.com.
Nutshell Handbook, the Nutshell Handbook logo, and the O'Reilly logo are registered trademarks of O'Reilly Media, Inc. The Head First series designations, Head First HTML with CSS and XHTML, and related trade dress are trademarks of O'Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O'Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and the authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. In other words, if you use anything in Head First HTML with CSS & XHTML to, say, run a nuclear power plant, you're on your own. We do, however, encourage you to visit the Head First Lounge. No elements or properties were harmed in the making of this book. Thanks to Clemens Orth for the use of his photo, "applestore.jpg", which appears in Chapter 5.
[C] |
|
|
|
|
|
|
Dedication To the W3C, for saving us from the browser wars and for their brilliance in separating structure (HTML) from presentation (CSS)... 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 modern introduction to forward-looking practices in Web page markup and presentation. It correctly anticipates readers' puzzlements and handles them just in time. The highly graphic and incremental approach precisely mimics the best way to learn this stuff: make a small change and see it in the browser to understand what each new item means." Danny Goodman "Eric and Elisabeth Freeman clearly know their stuff. As the Internet becomes more complex, inspired construction of web pages becomes increasingly critical. Elegant design is at the core of every chapter here, each concept conveyed with equal doses of pragmatism and wit." Ken Goldstein, Executive Vice President & Managing Director, Disney Online "The Web would be a much better place if every HTML author started off by reading this book." L. David Baron, Technical Lead, Layout & CSS, Mozilla Corporation http://dbaron.org/ "I've been writing HTML and CSS for ten years now, and what used to be a long trial and error learning process has now been reduced neatly into an engaging paperback. HTML used to be something you could just hack away at until things looked okay on screen, but with the advent of web standards and the movement towards accessibility, sloppy coding practice is not acceptable anymore... from a business standpoint or a social responsibility standpoint. Head First HTML with CSS & XHTML teaches you how to do things right from the beginning without making the whole process seem overwhelming. HTML, when properly explained, is no more complicated than plain English, and the Freemans do an excellent job of keeping every concept at eye-level." Mike Davidson, President & CEO, Newsvine, Inc. "The information covered in this book is the same material the pros know, but taught in an educational and humorous manner that doesn't ever make you think the material is impossible to learn or you are out of your element." Christopher Schmitt, Author of The CSS Cookbook and Professional CSS, schmitt@christopher.org Oh, great. You made an XHTML book simple enough a CEO can understand it. What will you do next? Accounting simple enough my developer can understand it? Next thing you know we'll be collaborating as a team or something. Janice Fraser, CEO, Adaptive Path 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, http://sally.com. "This book has humor, and charm, but most importantly, it has heart. I know that sounds ridiculous to say about a technical book, but I really sense that at its core, this book (or at least its authors) really care that the reader learn the material. This comes across in the style, the language, and the techniques. Learning real understanding and comprehension on the part of the reader is clearly top most in the minds of the Freemans. And thank you, thank you, thank you, for the book's strong, and sensible advocacy of standards compliance. It's great to see an entry level book, that I think will be widely read and studied, campaign so eloquently and persuasively on behalf of the value of standards compliance in web page code. I even found in here a few great arguments I had not thought of ones I can remember and use when I am asked as I still am 'what's the deal with compliance and why should we care?' I'll have more ammo now! I also liked that the book sprinkles in some basics about the mechanics of actually getting a web page live FTP, web server basics, file structures, etc." Robert Neer, Director of Product Development, Movies.com "Freeman's Head First HTML with CSS & XHTML is a most entertaining book for learning how to build a great web page. It not only covers everything you need to know about HTML, CSS, and XHTML, it also excels in explaining everything in layman's terms with a lot of great examples. I found the book truly enjoyable to read, and I learned something new!" Newton Lee, Editor-in-Chief, ACM Computers in Entertainment http://www.acmcie.org "My wife stole the book. She's never done any web design, so she needed a book like Head First HTML with CSS & XHTML to take her from beginning to end. She now has a list of web sites she wants to build for our son's class, our family, ... If I'm lucky, I'll get the book back when she's done." David Kaminsky, Master Inventor, IBM "Beware. If you're someone who reads at night before falling asleep, you'll have to restrict Head First HTML with CSS & XHTML to daytime reading. This book wakes up your brain." Pauline McNamara, Center for New Technologies and Education, Fribourg University, Switzerland Previous Praise for books by the authors From the awesome Head First Java folks, this book uses every conceivable trick to help you understand and remember. Not just loads of pictures: pictures of humans, which tend to interest other humans. Surprises everywhere. Stories, because humans love narrative. (Stories about things like pizza and chocolate. Need we say more?) Plus, it's darned funny. Bill Camarda, READ ONLY "This book's admirable clarity, humor and substantial doses of clever make it the sort of book that helps even non-programmers think well about problem-solving." Cory Doctorow, co-editor of Boing Boing and author of "Down and Out in the Magic Kingdom" and "Someone Comes to Town, Someone Leaves Town" "I feel like a thousand pounds of books have just been lifted off of my head." Ward Cunningham, inventor of the Wiki and founder of the Hillside Group "This book is close to perfect, because of the way it combines expertise and readability. It speaks with authority and it reads beautifully. It's one of the very few software books I've ever read that strikes me as indispensable. (I'd put maybe 10 books in this category, at the outside.)" David Gelernter, Professor of Computer Science, Yale University and author of "Mirror Worlds" and "Machine Beauty" "A Nose Dive into the realm of patterns, a land where complex things become simple, but where simple things can also become complex. I can think of no better tour guides than the Freemans." Miko Matsumura, Industry Analyst, The Middleware Company Former Chief Java Evangelist, Sun Microsystems "I laughed, I cried, it moved me." Daniel Steinberg, Editor-in-Chief, java.net "Just the right tone for the geeked-out, casual-cool guru coder in all of us. The right reference for practical development strategiesgets my brain going without having to slog through a bunch of tired, stale professor-speak." Travis Kalanick, Founder of Scour and Red Swoosh Member of the MIT TR100 "I literally love this book. In fact, I kissed this book in front of my wife." Satish Kumar
|
|
|
|
|
|
|
|
Authors of Head First HTML with CSS & XHTML Elisabeth Freeman Elisabeth is an author and software developer. She's been involved with the Internet since the early days, having co-founded The Ada Project (TAP), an award winning web site for women in computing now adopted by the ACM. More recently Elisabeth led research and development efforts in digital media at the Walt Disney Company where she co-invented Motion, a content system that delivers terabytes of video every day to Disney, ESPN, and Movies.com users. Elisabeth is a computer scientist at heart and holds graduate degrees in Computer Science from Yale University and Indiana University. She's worked in a variety of areas including visual languages, RSS syndication, and Internet systems. She's also been an active advocate for women in computing, developing programs that encourage woman to enter the field. These days you'll find her sipping some Java or Cocoa on her Mac, although she dreams of a day when the whole world is using Scheme. Elisabeth has loved hiking and the outdoors since her days growing up in Scotland. When she's outdoors her camera is never far away. She's also an avid cyclist, vegetarian, and animal lover. You can send her email at beth@oreilly.com Eric freeman Eric is a computer scientist with a passion for media and software architectures. He just wrapped up four years at a dream job directing Internet broadband and wireless efforts at Disney and is now back to writing, creating cool software, and hacking Java and Macs. Eric spent a lot of the '90s working on alternatives to the desktop metaphor with David Gelernter (and they're both still asking the question "why do I have to give a file a name?"). Based on this work, Eric landed a Ph.D. at Yale University in '97. He also co-founded Mirror Worlds Technologies (now acquired) to create a commercial version of his thesis work, Lifestreams. In a previous life, Eric built software for networks and supercomputers. You might know him from such books as JavaSpaces Principles Patterns and Practice. Eric has fond memories of implementing tuple-space systems on Thinking Machine CM-5s and creating some of the first Internet information systems for NASA in the late 80s. Eric is currently living on Bainbridge Island. When he's not writing text or code you'll find him spending more time tweaking than watching his home theater and trying to restoring a circa 1980s Dragon's Lair video game. He also wouldn't mind moonlighting as an electronica DJ. Write to him at eric@oreilly.com or visit his blog at http://www.ericfreeman.com |
|
|
|
|
|
|
|
Intro I can't believe they put that in an HTML book! In this section, we answer the burning question: "So, why DID they put that in an HTML book?" Who is this book for? If you can answer "yes" to all of these:
If you have access to any computer manufactured in the last decade, the answer is yes. this book is for you. Who should probably back away from this book? If you can answer "yes" to any one of these:
this book is not for you. [Note from marketing: this book is for anyone with a credit card.] We know what you're thinking. "How can this be a serious book?" "What's with all the graphics?" "Can I actually learn it this way?" And we know what your brain is thinking. Your brain craves novelty. It's always searching, scanning, waiting for something unusual. It was built that way, and it helps you stay alive. Your brain thinks THIS is important. Today, you're less likely to be a tiger snack. But your brain's still looking. You just never know. So what does your brain do with all the routine, ordinary, normal things you encounter? Everything it can to stop them from interfering with the brain's real jobrecording things that matter. It doesn't bother saving the boring things; they never make it past the "this is obviously not important" filter. How does your brain know what's important? Suppose you're out for a day hike and a tiger jumps in front of you, what happens inside your head and body? Neurons fire. Emotions crank up. Chemicals surge. And that's how your brain knows... This must be important! Don't forget it! Great. Only 637 more dull, dry, boring pages. Your brain thinks THIS isn't worth saving. But imagine you're at home, or in a library. It's a safe, warm, tigerfree zone. You're studying. Getting ready for an exam. Or trying to learn some tough technical topic your boss thinks will take a week, ten days at the most. Just one problem. Your brain's trying to do you a big favor. It's trying to make sure that this obviously non-important content doesn't clutter up scarce resources. Resources that are better spent storing the really big things. Like tigers. Like the danger of fire. Like how you should never again snowboard in shorts. And there's no simple way to tell your brain, "Hey brain, thank you very much, but no matter how dull this book is, and how little I'm registering on the emotional Richter scale right now, I really do want you to keep this stuff around." Metacognition: thinking about thinking If you really want to learn, and you want to learn more quickly and more deeply, pay attention to how you pay attention. Think about how you think. Learn how you learn. I wonder how I can trick my brain into remembering this stuff... Most of us did not take courses on metacognition or learning theory when we were growing up. We were expected to learn, but rarely taught how to learn. But we assume that if you're holding this book, you really want to learn how to create Web pages. And you probably don't want to spend a lot of time. And you want to remember what you read, and be able to apply it. And for that, you've got to understand it. To get the most from this book, or any book or learning experience, take responsibility for your brain. Your brain on this content. The trick is to get your brain to see the new material you're learning as Really Important. Crucial to your well-being. As important as a tiger. Otherwise, you're in for a constant battle, with your brain doing its best to keep the new content from sticking. So how DO you get your brain to think HTML & CSS are as important as a tiger? There's the slow, tedious way, or the faster, more effective way. The slow way is about sheer repetition. You obviously know that you are able to learn and remember even the dullest of topics, if you keep pounding on the same thing. With enough repetition, your brain says, "This doesn't feel important to him, but he keeps looking at the same thing over and over and over, so I suppose it must be." The faster way is to do anything that increases brain activity, especially different types of brain activity. The things on the previous page are a big part of the solution, and they're all things that have been proven to help your brain work in your favor. For example, studies show that putting words within the pictures they describe (as opposed to somewhere else in the page, like a caption or in the body text) causes your brain to try to makes sense of how the words and picture relate, and this causes more neurons to fire. More neurons firing = more chances for your brain to get that this is something worth paying attention to, and possibly recording. A conversational style helps because people tend to pay more attention when they perceive that they're in a conversation, since they're expected to follow along and hold up their end. The amazing thing is, your brain doesn't necessarily care that the "conversation" is between you and a book! On the other hand, if the writing style is formal and dry, your brain perceives it the same way you experience being lectured to while sitting in a roomful of passive attendees. No need to stay awake. But pictures and conversational style are just the beginning. Here's what WE did: We used pictures, because your brain is tuned for visuals, not text. As far as your brain's concerned, a picture really is worth 1024 words. And when text and pictures work together, we embedded the text in the pictures because your brain works more effectively when the text is within the thing the text refers to, as opposed to in a caption or buried in the text somewhere. html body h1 p p h2 p img a em a We used redundancy, saying the same thing in different ways and with different media types, and multiple senses, to increase the chance that the content gets coded into more than one area of your brain. We used concepts and pictures in unexpected ways because your brain is tuned for novelty, and we used pictures and ideas with at least some emotional content, because your brain is tuned to pay attention to the biochemistry of emotions. That which causes you to feel something is more likely to be remembered, even if that feeling is nothing more than a little humor, surprise, or interest. Be the Browser We used a personalized, conversational style, because your brain is tuned to pay more attention when it believes you're in a conversation than if it thinks you're passively listening to a presentation. Your brain does this even when you're reading. We included more than 100 activities, because your brain is tuned to learn and remember more when you do things than when you read about things. And we made the exercises challenging-yet-do-able, because that's what most people prefer. We used multiple learning styles, because you might prefer step-by-step procedures, while someone else wants to understand the big picture first, while someone else just wants to see a code example. But regardless of your own learning preference, everyone benefits from seeing the same content represented in multiple ways. BULLET POINTS We include content for both sides of your brain, because the more of your brain you engage, the more likely you are to learn and remember, and the longer you can stay focused. Since working one side of the brain often means giving the other side a chance to rest, you can be more productive at learning for a longer period of time. Puzzles And we included stories and exercises that present more than one point of view, because your brain is tuned to learn more deeply when it's forced to make evaluations and judgements. We included challenges, with exercises, and by asking questions that don't always have a straight answer, because your brain is tuned to learn and remember when it has to work at something. Think about it-you can't get your body in shape just by watching people at the gym. But we did our best to make sure that when you're working hard, it's on the right things. That you're not spending one extra dendrite processing a hard-to-understand example, or parsing difficult, jargon-laden, or overly terse text. We used people. In stories, examples, pictures, etc., because, well, because you're a person. And your brain pays more attention to people than it does to things. We used an 80/20 approach. We assume that if you're going to be a kick-butt Web developer, this won't be your only book. So we don't talk about everything. Just the stuff you'll actually need. Here's what YOU can do to bend your brain into submission So, we did our part. The rest is up to you. These tips are a starting point; listen to your brain and figure out what works for you and what doesn't. Try new things. cut this out and stick it on your refrigerator.
Read Me This is a learning experience, not a reference book. We deliberately stripped out everything that might get in the way of learning whatever it is we're working on at that point in the book. And the first time through, you need to begin at the beginning, because the book makes assumptions about what you've already seen and learned. We begin by teaching basic HTML, then standards-based HTML 4.01, and then on to XHTML. To write standards-based HTML or XHTML, there are a lot of technical details you need to understand that aren't helpful when you're trying to learn the basics of HTML. Our approach is to have you learn the basic concepts of HTML first (without worrying about these details), and then, when you have a solid understanding of HTML, teach you to write standards compliant HTML and XHTML. This has the added benefit that the technical details are more meaningful after you've already learned the basics. It's also important that you be writing complaint HTML or XHTML when you start using CSS, so, we make a point of getting you to standards-based HTML and XHTML before you begin any serious work with CSS. We don't cover every single HTML element or attribute or CSS property ever created. There are a lot of HTML elements, a lot of attributes, and a lot of CSS properties. Sure, they're all interesting, but our goal was to write a book that weighs less than the person reading it, so we don't cover them all here. Our focus is on the core HTML elements and CSS properties that matter to you, the beginner, and making sure that you really, truly, deeply understand how and when to use them. In any case, once you're done with Head First HTML & CSS, you'll be able to pick up any reference book and get up to speed quickly on all the elements and properties we left out. This book advocates a clean separation between the structure of your pages and the presentation of your pages. Today, serious Web pages use HTML and XHTML to structure their content, and CSS for style and presentation. 1990s-era pages often used a different model, one where HTML was used for both structure and style. This book teaches you to use HTML for structure and CSS for style; we see no reason to teach you out-dated bad habits. We encourage you to use more than one browser with this book. While we teach you to write HTML, CSS, and XHTML that is based on standards, you'll still (and probably always) encounter minor differences in the way Web browsers display pages. So, we encourage you to pick at least two up-to-date browsers and test your pages using them. This will give you experience in seeing the differences among browsers and in creating pages that work well in a variety of browsers. We often use tag names for element names. Rather than saying "the a element", or "the 'a' element", we use a tag name, like "the <a> element". While this may not be technically correct (because <a> is an opening tag, not a full blown element), it does make the text more readable, and we always follow the name with the word "element" to avoid confusion. The activities are NOT optional. The exercises and activities are not add-ons; they're part of the core content of the book. Some of them are to help with memory, some are for understanding, and some will help you apply what you've learned. Don't skip the exercises. The crossword puzzles are the only things you don't have to do, but they're good for giving your brain a chance to think about the words in a different context. The redundancy is intentional and important. One distinct difference in a Head First book is that we want you to really get it. And we want you to finish the book remembering what you've learned. Most reference books don't have retention and recall as a goal, but this book is about learning, so you'll see some of the same concepts come up more than once. The examples are as lean as possible. Our readers tell us that it's frustrating to wade through 200 lines of an example looking for the two lines they need to understand. Most examples in this book are shown within the smallest possible context, so that the part you're trying to learn is clear and simple. Don't expect all of the examples to be robust, or even completethey are written specifically for learning, and aren't always fully-functional. We've placed all the example files on the Web so you can download them. You'll find them at http://www.headfirstlabs.com/books/hfhtml/ The 'Brain Power' exercises don't have answers. For some of them, there is no right answer, and for others, part of the learning experience of the Brain Power activities is for you to decide if and when your answers are right. In some of the Brain Power exercises you will find hints to point you in the right direction. Tech Reviewers Lousie Barr Joe Konior Valentin Crettaz Corey McGlone Barney Marispini Pauline McNamara Pauline gets the "kick ass reviewer" award. Eiffel Tower Fearless leader of the Extreme Review Team. Johannes de Jong Marcus Green Ike Van Atta David O'Meara Our reviewers: We're extremely grateful for our technical review team. Johannes de Jong organized and led the whole effort, acted as "series dad," and made it all work smoothly. Pauline McNamara, "co-manager" of the effort, held things together and was the first to point out when our examples were a little more "baby boomer" than hip. The whole team proved how much we needed their technical expertise and attention to detail. Valentin Crettaz, Barney Marispini, Marcus Green, Ike Van Atta, David O'Meara, Joe Konior, and Corey McGlone left no stone unturned in their review and the book is a much better book for it. You guys rock! And further thanks to Corey and Pauline for never letting us slide on our often too formal (or we should just say it, incorrect) punctuation. A shout out to JavaRanch as well for hosting the whole thing. A big thanks to Louise Barr, our token Web designer, who kept us honest on our designs and on our use of XHTML & CSS (although you'll have to blame us for the actual designs). Acknowledgments[*] [*] The large number of acknowledgments is because we're testing the theory that everyone mentioned in a book acknowledgment will buy at least one copy, probably more, what with relatives and everything. If you'd like to be in the acknowledgment of our next book, and you have a large family, write to us. Even more technical review: We're also extremely grateful to our esteemed technical reviewer David Powers. We have a real love/hate relationship with David because he made us work so hard, but the result was oh so worth it. The truth be told, based on David's comments, we made significant changes to this book and it is technically twice the book it was before. Thank you, David. Esteemed Reviewer, David Powers Don't let the sweater fool you, this guy is hard core (technically of course). At O'Reilly: Our biggest thanks to our editor, Brett McLaughlin, who cleared the path for this book, removed every obstacle to its completion, and sacrificed family time to get it done. Brett also did hard editing time on this book (not an easy task for a Head First title). Thanks Brett, this book wouldn't have happened without you. Brett McLaughlin Our sincerest thanks to the whole O'Reilly team: Greg Corrin, Glenn Bisignani, Tony Artuso, and Kyle Hart all led the way on marketing and we appreciate their out-of-the-box approach. Thanks to Ellie Volkhausen for her inspired cover design that continues to serve us well, and to Karen Montgomery for stepping in and bringing life to this book's cover. Thank you, as always, to Colleen Gorman for her hardcore copyedit (and for keeping it all fun). And, we couldn't have pulled off a color book like this without Sue Willing and Claire Cloutier. No Head First acknowledgment would be complete without thanking Mike Loukides for shaping the Head First concept into a series, and to Tim O'Reilly for always being there and his continued support. Finally, thanks to Mike Hendrickson for bringing us into the Head First family and having the faith to let us run with it. Kathy Sierra and Bert Bates: Last, and anything but least, to Kathy Sierra and Bert Bates, our partners in crime and the BRAINS who created the series. Thanks guys for trusting us even more with your baby. We hope once again we've done it justice. The three-day jam session was the highlight of writing the book, we hope to repeat it soon. Oh, and next time around can you give LTJ a call and tell him he's just going to have to make a trip back to Seattle? Bert Bates Kathy Sierra Hard at work researching Head First Parelli. Kara |
|
|
|
|
|
|
|
Chapter 1. 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. |
|
|
|
|
|
|
|
|
|
|
|
|
|
1.2. What does the Web server do? Web servers have a full time job on the Internet, tirelessly waiting for requests from Web browsers. What kinds of requests? Requests for Web pages, images, sounds, or maybe even a movie. When a server gets a request for any of these resources, the server finds the resource, and then sends it back to the browser. Web ServerThe server's just a computer connected to the Internet waiting for requests from browsers. Each server stores HTML files, pictures, sounds and other file types. "I need the HTML file 'lounge.html'"Browsers make requests for HTML pages or other resources, like images. "Found it, here ya go"...and if the server can locate the resource, it sends it to the browser. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1.5. What the browser creates... When the browser reads your HTML, it interprets all the tags that surround your text. Tags are just words or characters in angle brackets, like <head>, <p>, <h1>, and so on. The tags tell the browser about the structure and meaning of your text. So rather than just giving the browser a bunch of text, with HTML you can use tags to tell the browser what text is in a heading, what text is a paragraph, what text needs to be emphasized, or even where images need to be placed. Let's check out how the browser interprets the tags in the Head First Lounge: A Notice how each tag in the HTML maps to what the browser displays. B C D E F G
|
|
|
|
|
|
|
|
1.6. there are no Dumb Questions
<html> <head> <title>Head First Lounge</title> </head> <body> <h1>Welcome to the Head First Lounge</h1> <img src="drinks.gif"> <p> Join us any evening for refreshing elixirs, conversation and maybe a game or two of <em>Dance Dance Revolution</em>. Wireless access is always provided; BYOWS (Bring your own web server). </p> <h2>Directions</h2> <p> You'll find us right in the center of downtown Webville. Come join us! </p> </body> </html>
|
|
|
|
|
|
|
|
1.7. Your big break at Starbuzz Coffee Starbuzz Coffee has made a name for itself as the fastest growing coffee shop around. If you've seen one on your local corner, look across the street you'll see another one. In fact, they've grown so quickly, they haven't even managed to put up a web page, yet... and therein lies your big break: By chance, while buying your Starbuzz Chai Tea, you run into the Starbuzz CEO... Word has it you know a little about HTML. We really need a Web page that features the Starbuzz offerings. Can you help? The Starbuzz CEO
Wonderful! We're so glad you'll be helping us.[*] Here's what we need on our first page... [*] If by chance you chose options A, B, or D on the previous page, we recommend you donate this book to a good library, use it as kindling this winter, or what the hell, go ahead and sell it on Amazon and make some cash.
|
|
|
|
|
|
|
|
1.8. Creating the Starbuzz Web page Of course, the only problem with all this is that you haven't actually created any Web pages, yet. But, that's why you decided to dive head first into HTML, right? No worries, here's what you're going to do on the next few pages:
No pressure, but thousands of people are going to visit this Web page when you're finished. It not only needs to be correct, it's gotta look great, too!
|
|
|
|
|
|
|
|
1.9. Creating an HTML file (Mac) All HTML files are text files. To create a text file you need an application that allows you to create plain text without throwing in a lot of fancy formatting and special characters. You just need plain, pure text. We'll use TextEdit on the Mac in this book; however, if you prefer another text editor, that should work fine as well. And, if you're running Windows, you'll want to skip ahead a couple of pages to the Windows instructions. Step one: Navigate to your Applications folder The TextEdit application is in the Applications folder. The easiest way to get there is to choose "New Finder Window" from the Finder's File menu and then look for the Application directly in your shortcuts. When you've found it, click on Applications. step two: Locate and run TextEdit You'll probably have lots of applications listed in your applications folder, so scroll down until you see TextEdit. To run the application, double click on the TextEdit icon. Your Finder shortcuts. step three (optional): Keep TextEdit in your Dock If you want to make your life easier, click and hold on the TextEdit icon in the Dock (this icon appears once the application is running). When it displays a popup menu, choose "Keep in Dock." That way, the TextEdit icon will always appear in your Dock and you won't have to hunt it down in the Applications folder every time you need to use it. Step four: Change your TextEdit Preferences By default, TextEdit is in "rich text" mode, which means it will add its own formatting and special characters to your file when you save it not what you want. So, you'll need to change your TextEdit Preferences so that TextEdit saves your work as a pure text file. To do this, first choose the "Preferences" menu item from the TextEdit menu. This text formatting menu means you're in "rich text" mode. If you see these, you need to change your preferences. Step five Set Preferences for Plain text Once you see the Preferences dialog box, there are three things you need to do. First, choose "Plain text" as the default editor mode in the New Document tab. Second, in the "Open and Save" tab, make sure that the "Add .txt extension to plain text files" is unchecked. Last, make sure "Ignore rich text commands in HTML files" is checked. That's it; to close the dialog box click on the red button in the top left corner. Step six: Quit and restart Now quit out of TextEdit by choosing Quit from the TextEdit menu, and then restart the application. This time, you'll see a window with no fancy text formatting menus at the top of the window. You're now ready to create some HTML. See, the formatting menu is gone: that means we're in text mode. |
|
|
|
|
|
|
|
1.10. Creating an HTML file (Windows) Or another version of Windows. If you're reading this page you must be a Windows XP user. If not, you might want to skip a couple of pages ahead. Or, if you just want to sit in the back and not ask questions, we're okay with that too. To create HTML files in XP we're going to use Notepad it ships with every copy of Windows, the price is right, and it's easy to use. If you've got your own favorite editor that runs on XP, that's fine too; just make sure you can create a plain text file with an ".html" extension. Assuming you're using Notepad, here's how you're going to create your first HTML file. If you're using another version of Windows you'll find Notepad there as well. step one: Open the Start menu and navigate to Notepad You'll find the Notepad application in Accessories. The easiest way to get there is to click on the "Start" menu, then on "All Programs", then "Accessories". You'll see Notepad listed there. Step two: Open Notepad Once you've located Notepad in the Accessories folder, go ahead and click on it. You'll see a blank window ready for you to start typing HTML. Step three: Optional but recommended Don't hide extensions of well known file types. By default XP's File Explorer hides the file extensions of well known file types. For example, a file named, "Irule.html" will be shown in the Explorer as "Irule" without its ".html" extension. It's much less confusing if XP shows you these extensions, so let's change your folder options so you can see the file extensions. First, in any Explorer window select "Folder Options..." from the Tools menu. Next, in the "View" tab, under "Advanced settings", scroll down until you see "Hide extensions for known file types" and uncheck this option. That's it. Click on the OK button to save the preference and you'll now see the file extensions in the Explorer.
|
|
|
|
|
|
|
|
1.11. there are no Dumb Questions
|
|
|
|
|
|
|
|
1.12. Meanwhile, back at Starbuzz Coffee... Okay, now that you know the basics of creating a plain text file, you just need to get some content into your text editor, save it, and then load it into your browser. Start by typing in the beverages straight from the CEO's napkin; these beverages are the content for your page. You'll be adding some HTML markup to give the content some structure in a bit, but for now, just get the basic content typed in. While you're at it, go ahead and add "Starbuzz Coffee Beverages" at the top of the file. Type in the info from the napkin like this. Mac Windows |
|
|
|
|
|
|
|
1.13. Saving your work... Once you've typed in the beverages from the CEO's napkin, you're going to save your work in a file called "index.html". Before you do that, you'll want to create a folder named "starbuzz" to hold the site's files. To get this all started, choose "Save" from the File menu and you'll see a "Save As" dialog box. Then, here's what you need to do:
|
|
|
|
|
|
|
|
1.14. Opening your Web page in a browser Are you ready to open your first Web page? Using your favorite browser, choose "Open File..." (or "Open..." using Windows XP and Internet Explorer) from the File menu and navigate to your "index.html" file. Select it and click "Open". Mac On the Mac, navigate to your file, and select it by clicking on the file icon and then on the Open button. Windows In Windows Internet Explorer it's a two step process. First you'll get the open dialog box. Then click "Browse" to get a browse dialog and navigate to where you saved your file.
|
|
|
|
|
|
|
|
1.15. Taking your page for a test drive... Success! You've got the page loaded in the browser, although the results are a little... uh... unsatisfying. But that's just because all you've done so far is go through the mechanics of creating a page and viewing it in the browser. And, so far, you've only typed in the content of the Web page. That's where HTML comes in. HTML gives you a way to tell the browser about the structure of your page. What's structure? As you've already seen, it is a way of marking up your text so that the browser knows what's a heading, what text is in a paragraph, what text is a subheading, and so on. Once the browser knows a little about the structure, it can display your page in a more meaningful and readable manner. Depending on your operating system and browser, often you can just double-click the HTML file or drag it on top of the browser icon to open it. Much simpler. Windows Mac
|
|
|
|
|
|
|
|
1.16. Markup Magnets So, let's add that structure... Your job is to add structure to the text from the Starbuzz napkin. Use the fridge magnets at the bottom of the page to mark up the text so that you've indicated which parts are headings, subheadings and paragraph text. We've already done a few to get you started. You won't need all the magnets below to complete the job; some will be left over. <h1>Starbuzz Coffee Beverages</h1> House Blend, $1.49 A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala. <h2>Mocha Cafe Latte, $2.35</h2> <p>Espresso, steamed milk and chocolate syrup.</p> Cappuccino, $1.89 A mixture of espresso, steamed milk and foam. Chai Tea, $1.85 A spicy drink made with black tea, spices, milk and honey. <h1>Use this magnet to start a heading. </h1>Use this magnet to end a heading. <h2> <h2>Use this magnet to start a subheading. </h2>Use this magnet to end a subheading. <p> <p> <p>Use this magnet to start a paragraph. </p>Use this magnet to end a paragraph.
|
|
|
|
|
|
|
|
1.17. 1st Congratulations, you've just written your first HTML! They might have looked like fridge magnets, but you were really marking up your text with HTML. Only, as you know, we usually refer to the magnets as tags. Check out the markup below and compare it to your magnets on the previous page. Use the <h1> and </h1> tags to mark headings. All the text in between is the actual content of the heading.<h1>Starbuzz Coffee Beverages</h1> <h2> House Blend, $1.49</h2>The <h2> and </h2> tags go around a subheading. Think of an <h2> heading as a subheading of an <h1> heading. <p> A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p> <h2>Mocha Cafe Latte, $2.35</h2> <p>Espresso, steamed milk and chocolate syrup.</p>The <p> and </p> tags go around a block of text that is a paragraph. That can be one or many sentences. <h2>Cappuccino, $1.89</h2> <p>A mixture of espresso, steamed milk and foam.</p> <h2>Chai Tea, $1.85</h2> <p>A spicy drink made with black tea, spices, milk and honey.</p>Notice that you don't have to put matching tags on the same line. You can put as much content as you like between them.
|
|
|
|
|
|
|
|
1.18. Are we there yet? You have an HTML file with markup does that make a Web page? Almost. You've already seen the <html > , <head > , <title> , and <body > tags, and we just need to add those to make this a first class HTML page... First, surround your HTML with <html> & </html> tags. This tells the browser the content of the file is HTML.<html> Next add <head> and </head> tags. The head contains information about your Web page, like its title. For now, think about it this way: the head allows you to tell the browser things about the Web page.<head> The head consists of the <head> & </head> tags and everything in between. <title>Starbuzz Coffee</title>Go ahead and put a title inside the head. The title usually appears at the top of the browser window. </head> <body>The body consists of the <body> & </body> tags and everything in between. <h1 >Starbuzz Coffee Beverages</h1> <h2 <p >A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p> <h2>Mocha Cafe Latte, $2.35</h2> <p>Espresso, steamed milk and chocolate syrup.</p> <h2>Cappuccino, $1.89</h2> <p>A mixture of espresso, steamed milk and foam.</p> <h2>Chai Tea, $1.85</h2> <p>A spicy drink made with black tea, spices, milk and honey.</p> </body>The body contains all the content and structure of your Web page the parts of the Web page that you see in your browser. </html> Keep your head and body separate when writing HTML.
|
|
|
|
|
|
|
|
1.19. Another test drive... Go ahead and change your "index.html" file by adding in the <head>, </head>, <title>, </title>, <body> and </body> tags. Once you've done that, save your changes and reload the file into your browser. You can reload the index.html file by selecting the "Open File" menu item again, or by using your browser's reload button. Notice that the title, which you specified in the <head> element, shows up here. Now things look a bit better. The browser has interpreted your tags and created a display for the page that is not only more structured but also more readable. Sweet! |
|
|
|
|
|
|
|
1.20. Tags dissected... Okay, you've seen a bit of markup, so let's zoom in and take a look at how tags really work... Here's the opening tag heading.<h1> Tags consist of the tag name surrounded by angle brackets; that is, the < and > characters.You usually put tags around some piece of content. Here we're using tags to tell the browser that our content, "Starbuzz Coffee Beverages", is a top level heading (that is, heading level one). Starbuzz Coffee Beverages The whole shebang is called an element. In this case we can call it the <h1> element. An element consists of the enclosing tags and the content in between. This is the closing tag that ends the heading; in this case the </h1> tag is ending an <h1> heading. You know it's a closing tag because it comes after the content, and it's got a "/" before the "h1". All closing tags have a "/" in them.</h1>We call an opening tag and its closing tag matching tags To tell the browser about the structure of your page, use pairs of tags around your content. Remember, Element = Opening Tag + Content + Closing Tag |
|
|
|
|
|
|
|
1.21. there are no Dumb Questions
Okay, it looks like you're getting somewhere. You've got the main page and the mission page all set. But, don't forget the CEO said the site needs to look great too. Don't you think it needs a little style? Right. We have the structure down, so now we're going to concentrate on its presentation. You already know that HTML gives you a way to describe the structure of the content in your files. When the browser displays your HTML, it uses its own built-in default style to present this structure. But, relying on the browser for style obviously isn't going to win you any "designer of the month" awards. That's where CSS comes in. CSS gives you a way to describe how your content should be presented. Let's get our feet wet by creating some CSS that makes the Starbuzz page look a little more presentable (and launch your Web career in the process). CSS is an abbreviation for Cascading Style Sheets. We'll get into what that all means later, but for now just know that CSS gives you a way to tell the browser how elements in your page should look.
|
|
|
|
|
|
|
|
To add style, you add a new (say it with us) E-L-E-M-E-N-T to your page the <style> element. Let's go back to the main Starbuzz page and add some style. Check it out... <html> <head> The <style> element is placed inside the head of your HTML. <title>Starbuzz Coffee</title> <style type="text/css">Just like other elements, the <style> element has an opening tag, <style>, and a closing tag, </style>... ...but, the <style> tag also requires an attribute, called type, which tells the browser the kind of style you're using. Because you're going to use CSS, you need to specify the "text/css" type. And, here's where you're going to define the styles for the page. </style> </head> <body> <h1>Starbuzz Coffee Beverages</h1> <h2>House Blend, $1.49</h2> <p>A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p> <h2>Mocha Caffe Latte, $2.35</h2> <p>Espresso, steamed milk and chocolate syrup.</p> <h2>Cappuccino, $1.89</h2> <p>A mixture of espresso, steamed milk and milk foam.</p> <h2>Chai Tea, $1.85</h2> <p>A spicy drink made with black tea, spices, milk and honey.</p> </body> </html>
|
|
|
|
|
|
|
|
1.23. Giving Starbuzz some style... Now that you've got a <style> element in the HTML head, all you need to do is supply some CSS to give the page a little pizazz. Below you'll find some CSS already "baked" for you. Whenever you see the logo, you're seeing HTML and CSS that you should type in as-is. Trust us. You'll learn how the markup works later, after you've seen what it can do. So, take a look at the CSS and then add it to your "index.html" file. Once you've got it typed in, save your file. 1.23.1. Ready Bake CSS <html> <head> <title>Starbuzz Coffee</title> <style type="text/css"> body { background-color: #d2b48c; margin-left: 20%; margin-right: 20%; border: 1px dotted gray; padding: 10px 10px 10px 10px; font-family: sans-serif; } </style> </head> <body> <h1>Starbuzz Coffee Beverages</h1> <h2>House Blend, $1.49</h2> <p>A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p> <h2>Mocha Caffe Latte, $2.35</h2> <p>Espresso, steamed milk and chocolate syrup.</p> <h2>Cappuccino, $1.89</h2> <p>A mixture of espresso, steamed milk and milk foam.</p> <h2>Chai Tea, $1.85</h2> <p>A spicy drink made with black tea, spices, milk and honey.</p> </body> </html> CSS uses a syntax that is totally different from HTML. |
|
|
|
|
|
|
|
1.24. Cruisin' with style... It's time for another test drive, so reload your "index.html" file again. This time you'll see the Starbuzz Web page has a whole new look. Background color is now tan. Now we have margins around the content. We've got a gray border around the content as well... There's now some padding between the content and the border (on all sides). We're using a different font for a cleaner look. Whoa! Very nice. We're in business now!
1.24.1. there are no Dumb Questions
|
|
|
|
|
|
|
|
1.25. Exercise Now that you've put a little style in the Starbuzz "index.html" page, go ahead and update your "mission.html" page to have the same style.
|
|
|
|
|
|
|
|
1.26. Firside Chats Tonight's talk: HTML and CSS on content anad style.
Not only is this one fine cup of House Blend, but now we've got a web page to tell all our customers about our coffees. Excellent work. I've got some bigger ideas for the future; in the meantime, can you start thinking about how we are going to get these pages on the Internet so other people can see them?
|
|
|
|
|
|
|
|
1.27. HTML cross It's time to sit back and give your left brain something to do. It's your standard crossword; all of the solution words are from this chapter.
|
|
|
|
|
|
|
|
1.28. Markup Magnets Solution Your job is to add some structure to the text from the Starbuzz napkin. Use the fridge magnets at the bottom of the page to mark up the text so that you've indicated which parts are headings, subheadings and paragraph text. We've already done a few to get you started. You won't need all the magnets below to complete the job; some will be left over.
|
|
|
|
|
|
|
|
1.29. Exercise Solutions Starbuzz Coffee's Mission To provide all the caffeine that you need to power your life. Just drink it. <html> <head> <title>Starbuzz Coffee's Mission</title> </head> <body> <h1>Starbuzz Coffee's Mission</h1> <p>To provide all the caffeine that you need to power your life.</p> <p>Just drink it.</p> </body> </html> Here's the HTML. Here's the HTML displayed in a browser.
|
|
|
|
|
|
|
|
Chapter 2. Meeting the 'HT' in HTML Right, that's me, they call me Hyper Ted. You're not listening. I came here to meet HyperTEXT! Did someone say "hypertext?" What's that? Oh, only the entire basis of the Web. In Chapter 1 we kicked the tires of HTML and found it to be a nice markup language (the 'ML' in HTML) for describing the structure of Web pages. Now we're going to check out the 'HT' in HTML, hypertext, which will let us break free of a single page and link to other pages. Along the way we're going to meet a powerful new element, the <a> element, and learn how being "relative" is a groovy thing. So, fasten your seat belts-you're about to learn some hypertext.
|
|
|
|
|
|
|
|
2.1. Head First Lounge , New and Improved Remember the Head First Lounge? Great site, but wouldn't it be nice if customers could view a list of the refreshing elixirs? Even better, we should give customers some real driving directions so they can find the place. Welcome to the New and Improved Head First Lounge Here's the new and improved page. The "elixirs" link points to a page with a full list of elixir selections. Join us any evening for refreshing elixirs, conversation and maybe a game or two of Dance Dance Revolution. Wireless access is always provided; BYOWS (Bring your own web server). We've added links to two new pages, one for elixirs and one for driving directions. Directions You'll find us right in the center of downtown Webville. If you need help finding us, check out our detailed directions. Come join us! The "detailed directions" link leads to an HTML page with driving directions. Directions directions.html Our Elixirs Green Tea Cooler Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of chamomile blossoms and ginger root. Raspberry Ice Concentration Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy drink will make your mind feel clear and crisp. Blueberry Bliss Elixir Blueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss in no time. Cranberry Antioxidant Blast Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir. A page listing some refreshing and healthy drinks. Feel free to grab one before going on. elixir.html 2.1.1. Creating the new and improved lounge in three steps... Let's rework the original Head First Lounge page so it links to the two new pages.
|
|
|
|
|
|
|
|
2.2. Creating the new lounge
files. lounge All the lounge files are in this folder. lounge.html Here's the current lounge file, without links. elixir.html Two new files, already written for you. Go ahead and take a peek-you already know everything you need to understand them. directions.html blue.jpg drinks.gif red.jpg green.jpg lightblue.jpgAnd here's all the images needed for our new and improved lounge.
<head> <title>Head First Lounge</title> </head> <body> <h1>Welcome to the New and ImprovedLet's add "New and Improved" to the heading. Head First Lounge</h1> <img src="drinks.gif"> <p> Join us any evening for refreshing <a href="elixir.html"Here's where we add the HTML for the link to the elixirs.>elixirs</a>,To create links we use the <a> element; we'll take a look at how this element works in just a sec... conversation and maybe a game or two of <em>Dance Dance Revolution</em>. Wireless access is always provided; BYOWS (Bring your own web server). </p> <h2>Directions</h2> <p> You'll find us right in the center of downtown Webville. If you need help finding us, check out our <a href="directions.And here's where we add the link to the directions, again using an <a> element.html">detailed directions</a>.We need to add some text here to point customers to the new directions. </p> </body> </html>
2.2.1. Behind the Scenes Okay, I've loaded the new lounge page, clicked the links, and everything worked. But, I want to make sure I understand how the HTML works. |
|
|
|
|
|
|
|
2.3. What did we do?
<a>driving directions</a> The content of the <a> element acts as a label for the link. In the browser the label appears with an underline to indicate you can click on it.
For this link, the browser will display an "elixirs" label that, when clicked, will take the user to the "elixir.html" page. </a> <a href="directions.html"And for this link, the browser will display a "driving directions" link that, when clicked, will take the user to the "directions.html" page.>driving directions</a>
|
|
|
|
|
|
|
|
2.4. What does the browser do? Behind the Scenes
The user clicks on either the elixirs link or... ...on detailed directions. When "detailed directions" is clicked, the browser grabs the value of the href attribute, in this case "directions.html"... <a href="directions.html">detailed directions</a> ...and loads "directions.html". If elixirs was clicked, the browser grabs the href value "elixir.html"... <a href="elixir.html">elixirs</a> ...and displays the "elixir.html" page. |
|
|
|
|
|
|
|
2.5. Understanding attributes Attributes give you a way to specify additional information about an element. While we haven't looked at attributes in detail, you've already seen a few examples of them: <style type="text/css">The type attribute specifies which style language we're using, in this case CSS. <a href="irule.html">The href attribute tells us the destination of a hyperlink. <img src="sweetphoto.gif">The src attribute specifies the filename of the picture an img tag displays. Let's cook up an example to give you an even better feel for how attributes work: 2.5.1. What if <car> was an element? If <car> was an element, then you'd naturally want to write some markup like this: <car>My Red Mini</car>With no attributes, all we can supply is a descriptive name for the car. But this <car> element only gives a descriptive name for your car-it doesn't tell us the make, precise model, whether it is a convertible, or a zillion other details we might want to know. So, if <car> were really an element, we might use attributes like this: <car make="BMW" model="Mini Cooper" convertibleBut with attributes, we can customize the element with all kinds of information.="no">My Red Mini</car> Better, right? Now this markup tells us a lot more information in an easy to write, convenient form.
The "href" attribute is pronounced "h-ref"... ...rhymes with "space chef". 2.5.2. there are no Dumb Questions
2.5.3. Attributes Exposed This week's interview: Confessions of the href attribute HeadFirst: Welcome, href. It's certainly a pleasure to interview as big an attribute as you. href: Thanks. It's good to be here and get away from all the linking; it can wear an attribute out. Every time someone clicks on a link, guess who gets to tell the browser where to go next? That would be me. HeadFirst: We're glad you could work us into your busy schedule. Why don't you take us back to the beginning... What does it mean to be an attribute? href: Sure. Well, attributes are used to customize an element. It's easy to wrap some <a> tags around a piece of content, like "Sign up now!"-we do it like this: <a>Sign up now!</a>-but without me, the href attribute, you have no way to tell the <a> element the destination of the link. HeadFirst: Got it so far... href: ...but with an attribute you can provide additional information about the element. In my case, that's where the link points to: <a href="signup.html">Sign up now!</a>. This says that the <a> element, which is labeled "Sign up now!", links to the "signup.html" page. Now, there are lots of other attributes in the world, but I'm the one you use with the <a> element to tell it where it points to. HeadFirst: Nice. Now, I have to ask, and I hope you aren't offended, but what is with the name? href ? What's with that? href: It's an old Internet family name. It means "hypertext reference", but all my friends just call me "href " for short. HeadFirst: Which is? href: A hypertext reference is just another name for a resource that is on the Internet or your computer. Usually the resource is a Web page, but I can also point to audio, video... all kinds of things. HeadFirst: Interesting. All our readers have seen so far are links to their own pages; how do we link to other pages and resources on the Web? href: Hey, I gotta get back to work, the whole Web is getting gunked up without me. Besides, isn't it your job to teach them this stuff ? HeadFirst: Okay okay, yes, we're getting to that in a bit... thanks for joining us, href.
2.5.4. there are no Dumb Questions
Your work on the Head First Lounge has really paid off. With those enticing elixirs and directions, lots of people are frequenting the place and visiting the Web site. Now we've got plans for expanding the lounge's online content in all sorts of directions. |
|
|
|
|
|
|
|
2.6. Getting organized Before you start creating more HTML pages, it's time to get things organized. So far, we've been putting all our files and images in one folder. You'll find that even for modestly-sized Web sites, things are much more manageable if you organize your Web pages, graphics, and other resources into a set of folders. Here's what we've got now: We've got a top-level folder called "lounge" that holds all our files in the site.loungeThis is often referred to as the "root" folder of the site, which means it is the top-level folder that contains the entire site. lounge.htmlHere are the three HTML files: for the lounge, the elixirs page, and the directions. elixir.html directions.html blue.jpg drinks.gif red.jpg green.jpg lightblue.jpgAnd here are all the images. See, this is getting sorta cluttered already, and we only have three pages and a few graphics. Let's do something about it.... |
|
|
|
|
|
|
|
2.7. Organizing the lounge... Let's give the lounge site some meaningful organization now. Keep in mind there are lots of ways to organize any site; we're going to start simple and create a couple of folders for pages. We'll also group all those images into one place. loungeOur root folder is still the "lounge" folder. lounge.htmlWe're going to leave the main "lounge.html" page in the "lounge" folder. aboutLet's create a folder to hold pages about the lounge, like the directions. We could also add new pages here about the management, events, and so on. directions.html beveragesWe'll also create a folder to hold pages about the lounge's beverages. Right now that's just the elixirs, but we'll be adding more soon. elixir.html imagesAnd, let's group all images into one folder. drinks.gif green.jpg blue.jpg red.jpg lightblue.jpg
|
|
|
|
|
|
|
|
2.8. Technical difficulties It looks like we've got a few problems with the lounge page after moving things around. We've got an image that isn't displaying. We usually call this a "broken image". And, when you click on elixirs (or detailed directions) things get much worse: we get an error saying the page can't be found. Some browsers display this error as a web page rather than a dialog box. I think the problem is that the browser thinks the files are still in the same folder as "lounge.html". We need to change the links so they point to the files in their new folders. Right. We need to tell the browser the new location of the pages. So far you've used href values that point to pages in the same folder. Sites are usually a little more complicated, though, and you need to be able to point to pages that are in other folders. To do that, you trace the path from your page to the destination file. That might mean going down a folder or two, or up a folder or two, but either way we end up with a relative path that we can put in the href. |
|
|
|
|
|
|
|
2.9. Planning your paths... What do you do when you're planning that vacation in the family truckster? You get out a map and start at your current location, and then trace a path to the destination. The directions themselves are relative to your location-if you were in another city, they'd be different directions, right? Okay, you'd really go to Google maps, but work with us here! To figure out a relative path for your links, it's the same deal: you start from the page which has the link, and then you trace a path through your folders until you find the file you need to point to. There are other kinds of paths too. We'll get to those in later chapters. Let's work through a couple of relative paths (and fix the lounge at the same time): 2.9.1. Linking down into a subfolder
now we're just using the filename "elixir.html", which tells the browser to look in the same folder as "lounge.html".
lounge.htmlStart here... about directions.html beverages elixirs.html...and find a path to here. images drinks.gif green.jpg blue.jpg red.jpg lightblue.jpg
lounge.htmlFirst we need to go down into the "beverages" folder. about directions.html beveragesAnd "elixir.html" is directly in that folder. elixir.html images drinks.gif green.jpg red.jpg blue.jpg lightblue.jpg
folder. / Separate all parts of the path with a "/". beverages / elixir.html Finally we have the file name.
2.9.2. Going the other way; linking up into a "parent " folder
now we're just using the filename "lounge.html", which tells the browser to look in the same folder as "directions.html". That's not going to work.</a>
lounge.html...and find a path to here. about directions.htmlStart here... beverages elixir.html images drinks.gif green.jpg blue.jpg red.jpg lightblue.jpg
lounge.html about directions.html beverages elixir.html images drinks.gif green.jpg blue.jpg red.jpg lightblue.jpg
That's right, two periods. Go with it, we'll explain in a sec...Pronounce ".." as "dot dot". /Separate all parts of the path with a "/". ../ loungeFinally you have the file name..html
click on the link, the browser will look for the "lounge.html" file in the folder above.>Back to the Lounge</a> Dot dot Up, down, housewares, lingerie? 2.9.3. there are no Dumb Questions
|
|
|
|
|
|
|
|
2.10. Fixing those broken images... You've almost got the lounge back in working order; all you need to do now is fix those images that aren't displaying. We haven't looked at the <img> element in detail yet (we will in a couple of chapters), but all you need to know for now is that the <img> element's src attribute takes a relative path, just like the href attribute. Here's the image element from the "lounge.html" file: <img src="drinks.gif"Here's the relative path, which tells the browser where the image is located. We specify this just like we do with the href attribute in the <a> element.> Hey, it's nice you fixed all those links, but didn't you forget something? All our images are broken! Don't leave us hanging, we've got a business to run. 2.10.1. Finding the path from "lounge.html" to "drinks.gif" To find the path, we need to go from the "lounge.html" file to where the images are located, in the "images" folder. GOAL: we're in the lounge folder and we need to get down into the images folder. lounge lounge.htmlStart here... about directions.html beverages elixir.html images drinks.gif...and find a path to here. green.jpg blue.jpg red.jpg lightblue.jpg
So putting (1) and (2) together our path looks like "images/drinks.gif ", or: <img src="images/drinks.gif"> 2.10.2. Finding the path from "elixir.html" to "red.jpg" The elixirs page contains images of several drinks: "red.jpg", "green.jpg", "blue.jpg", and so on. Let's figure out the path to "red.jpg" and then the rest will have a similar path because they are all in the same folder: GOAL: we're in the beverages folder and we need to get over to the images folder. lounge lounge.html about directions.html beverages elixir.html Start here... images drinks.gif blue.jpg green.jpg red.jpg lightblue.jpg...and find a path to here.
So putting (1), (2), and (3) together we get: ..Up to the parent folder. / "/" in between. imagesDown into the "images" folder. /"/" in between. red.jpgAnd the file name itself. <img src="../images/red.jpg">
You did it! Now we've got organization and all our links are working. Time to celebrate. Join us and have a green tea cooler. And then we can take the site to the next level!
|
|
|
|
|
|
|
|
2.11. HTMLcross How does a crossword help you learn HTML? Well, all the words are HTML-related and from this chapter. In addition, the clues provide the mental twist and turns that will help you burn alternative routes to HTML right into your brain! Across 1. ../myfiles/index.html is this kind of link. 3. Another name for a folder. 6. Flavor of blue drink. 9. what href stands for. 13. Everything between the <a> and </a> is this. 16. Can go in an <a> element, just like text. 17. Pronounced "..". Down 2. href and src are two of these. 4. Hardest working attribute on the web. 5. Rhymes with href. 7. Top folder of your site. 8. The "H" in HTML. 10. Healthy drink. 11. A folder at the same level. 12. Use .. to reach this kind of directory. 14. Text between the <a> tags acts as a ______. 15. A subfolder is also called this.
2.11.1. Exercise Solutions
1.RELATIVE 3.DIRECTORY 6.RASPBERRY 9.HYPERTEXTREFERENCE 13.CLICKABLE 16.IMAGE 17.DOTDOT 2.ATTRIBUTES 4.HREF 5.SPACECHEF 7.ROOT 8.HYPERTEXT 10.ELIXIR 11.SIBLING 12.PARENT 14.LABEL 15.CHILD
|
|
|
|
|
|
|
|
2.12. The Relativity Grand Challenge Solution ROUND ONE top100.html images/logo.giftop100.html is in the music folder, so to get to logo.gif, we had to go down into the images folder. logo.gif ROUND TWO genres.html ../images/logo.gif genres.html is down in the genres directory, so to get to logo.gif, we first had to go up to music, and then down into the images folder. logo.gif ROUND THREE top100.html genres/rock/pinkfloyd.html From top100.html, we go down into genres, then down into rock, and find pinkfloyd.html. pinkfloyd.html BONUS ROUND coldplay.html ../../images/artists/chris.gif This was a tricky one. From coldplay.html, which is down in the rock folder, we had to go up TWO folders to get to music, and then go down into images, and finally artists to find the image chris.gif. Whew! chris.gif |
|
|
|
|
|
|
|
Chapter 3. Web Page Construction We better find some hard hats, Betty. It's a real construction zone around here, and these Web pages are going up fast! I was told I'd actually be creating Web pages in this book? You've certainly learned a lot already: tags, elements, links, paths... but it's all for nothing if you don't create some killer Web pages with that knowledge. In this chapter we're going to ramp up construction: you're going to take a Web page from conception to blueprint, pour the foundation, build it, and even put on some finishing touches. All you need is your hard hat and your tool belt, as we'll be adding some new tools and giving you some insider knowledge that would make Tim "The Toolman" Taylor proud. What better way to enjoy my new Segway than to hit the open road? I'm riding it across the entire USA and I've been documenting my travels in my journal. What I really need to do is get this in a Web page so my friends and family can see it. Tony Tony's Segway Segway'n USA Documenting my trip around the US on my very own Segway! June 2, 2005 My first day of the trip! I can't believe I finally got everything packed and ready to go. Because I'm on a Segway, I wasn't able to bring a whole lot with me: cell phone, iPod, digital camera, and a protein bar. Just the essentials. As Lao Tzu would have said, "A journey of a thousand miles begins with one step Segway." July 14, 2005 Tony's journal I saw some Burma Shave style signs on the side of the road today: "Passing cars, When you can't see, May get you, A glimpse, Of eternity." I definitely won't be passing any cars! August 20 2005 Well I made it 1200 miles already, and I passed through some interesting places on the way: Walla Walla, WA, Magic City, ID, Bountiful, UT, Last Chance, CO, Why, AZ and Truth or Consequences, NM. Make sure you read through Tony's adventures they'll come in handy throughout the chapter.
|
|
|
|
|
|
|
|
3.1. From Journal to Web site, at 12mph The Segway's recommended top speed. Tony's got his hands full driving across the United States on his Segway. Why don't you give him a hand and create a Web page for him. Here's what you're going to do:
STOP! Do this exercise before turning the page.
|
|
|
|
|
|
|
|
3.2. The rough design sketch Tony's journal looks a lot like a Web page; all we need to do to create the design sketch is to get all his entries on one page and map out the general organization. It looks like, for each day that Tony creates an entry, he has a date heading, an optional picture, and a description of what happened that day. Let's look at the sketch... Segway'n USA Tony gave his journal a title, "Segway'n USA", so let's get that right at the top as a heading. Documenting my trip around the US on my very own Segway! He also gave his journal a description. We'll capture that here as a small paragraph at the top. August 20, 2005 Each day, Tony creates an entry that includes the date, usually a picture, and a description of the day's adventures. So, that's a heading, an image, and another paragraph of text. Well I made it 1200 miles already, and I passed through some interesting places on the way: Walla Walla, WA, Magic City, ID, Bountiful, UT, Last Chance, CO, Why, AZ and Truth or Consequences, NM. July 14, 2005 I saw some Burma Shave style signs on the side of the road today: "Passing cars, When you can't see, May get you, A glimpse, Of eternity." I definitely won't be passing any cars.Sometimes he doesn't include a picture. In this entry he just has a heading (the date) and a description of the day's events. June 2, 2005 The third entry should look just like the first one: a heading, an image, and a paragraph. My first day of the trip! I can't believe I finally got everything packed and ready to go. Because I'm on a Segway, I wasn't able to bring a whole lot with me: cellphone, iPod, digital camera, and a protein bar. Just the essentials. As Lao Tzu would hav |
