Free Download PDF Books, Head First HTML With CSS And XHTML

Head First HTML With CSS And XHTML

CSS HTML HTML CSS HTML CSS ReadOnline XHTML

Summary of Contents

  • Page 1

    Upload by mohaa99 ™ (show some respect to the original uploader)A Brain-FriendlyGuideHead FirstHTML withCSS9XHTMLmLaunch yourWebcareer inone chapterA learner’s guideto creatingstandards-basedWebpagesI •>'vVV.Watchout forcommon HTML & CSStraps and pitfalls-"VLearn why everythingy...

  • Page 2

    www.freepdf-books.com

  • Page 3

    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 increm...

  • Page 4

    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 mos...

  • Page 5

    Previous Praise for books by the authorsFrom 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 narra...

  • Page 6

    Make it StickOther related books from O’ReillyHTML Pocket ReferenceCSS Pocket Reference CSS CookbookCascading Style Sheets: The Definitive GuideHTML & XHTML: The Definitive GuideDynamic HTML: The Definitive ReferenceLearning Web Design: A Beginner’s Guide to HTML, Graphics, and BeyondOthe...

  • Page 7

    Head First HTML with CSS & XHTMLBeijing • Cambridge • Köln • Sebastopol • Taipei • TokyoWouldn’t it be dreamy if there was an HTML book that didn’t assume you knew what elements, attributes, validation, selectors, and pseudo-classes were, all by page three? It’s pro...

  • Page 8

    Head First HTML with CSS and XHTMLby Elisabeth Freeman and Eric FreemanCopyright © 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 purch...

  • Page 9

    To the W3C, for saving us from the browser wars and for their brilliance in separating structure (HTML) from presentation (CSS)...And for making HTML, CSS, and XHTML complex enough that people need a book to learn it.Browser wars? You’ll find out in Chapter 6.www.freepdf-books.com

  • Page 10

    viii Authors of Head First HTML with CSS & XHTMLthe authorsEric 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 co...

  • Page 11

    ixIntroYour brain on HTML & CSS. Here you are trying to learn something, while here your brain is doing you a favor by making sure the learning doesn’t stick. Your brain’s thinking, “Better leave room for more important things, like which wild animals to avoid and whether naked snowbo...

  • Page 12

    x 1 The Language of the Webgetting to know html“I need the HTML f le ‘lounge.html’”“Found it, here ya go”Web ServerNo 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!The only thin...

  • Page 13

    xi2Meeting the ‘HT’ in HTMLgoing further, with hypertextDid 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. No...

  • Page 14

    xii 3Web Page Constructionbuilding blocksh2imgimgph2h2h1pppI 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 c...

  • Page 15

    xiii4A Trip to Webvillegetting connectedWeb pages are a dish best served on the Internet. So far you’ve only created HTML pages that live on your own computer. You’ve also only linked to pages that are on your own computer. We’re about to change all that. In this chapter we’ll encourage y...

  • Page 16

    xiv 5Meeting the Mediaadding images to your pagesHere’s one pixel.Here’s a lot of pixels that together make up the upper part of the right wing of the butterfly.This image is made up of thousands of pixels when it’s displayed on a computer screen.Smile and say “cheese.” Actually, smile ...

  • Page 17

    xv6 Serious HTMLstandards, compliance, and all that jazzWhat else is there to know about HTML? You’re well on your way to mastering HTML. In fact, isn’t it about time we move on to CSS and learn how to make all this bland markup look fabulous? Before we do, we need to make sure your HTML is ...

  • Page 18

    xvi 7 Putting the ‘X’ into HTMLmoving to xhtmlWe’ve been keeping a dirty secret from you. We know you thought you bought an HTML book, but this is really an XHTML book in disguise. In fact, we’ve been teaching you mostly XHTML all along. You’re probably wondering, just what the heck is ...

  • Page 19

    xvii8Adding a Little Stylegetting started with CSSFive-MinuteMysterybodyhtmltitleheadstylemetah1ph2ppimgaemaI was told there’d be CSS in this book. So far you’ve been concentrating on learning XHTML to create the structure of your Web pages. But as you can see, the browser’s idea of style...

  • Page 20

    xviii 9 Expanding your Vocabularystyling with fonts and colorstable of contentsYour CSS language lessons are coming along nicely. You already have the basics of CSS down and you know how to create CSS rules to select and determine the style of the elements. Now what you need is to increase your v...

  • Page 21

    xix10Getting Intimate with Elementsthe box modelTo do advanced Web construction you really need to know your building materials. In this chapter we’re going to take a close look at our building materials: the XHTML elements. We’re going to put block and inline elements right under the micros...

  • Page 22

    xx 11 Advanced Web Constructiondivs and spanstable of contentsIt’s time to get ready for heavy construction. In this chapter we’re going to roll out two new XHTML elements, called <div> and <span>. These are no simple “two by fours;” these are full blown steel beams. With &l...

  • Page 23

    xxi12Arranging Elementslayout and positioningIt’s time to teach your XHTML elements new tricks. We’re not going to let those XHTML elements just sit there anymore; it’s about time they get up and help us create some pages with real layouts. How? Well, you’ve got a good feel for the <di...

  • Page 24

    xxii 13table of contentsGetting Tabulartables and more listsIf it walks like a table and talks like a table... There comes a time in life when we have to deal with the dreaded tabular data. Whether you need to create a page representing your company’s inventory over the last year, or a catalog...

  • Page 25

    xxiii14 Getting Interactivexhtml formsSo far all your Web communication has been one way: from your page to your visitors. Golly, wouldn’t it be nice if your visitors could talk back? That’s where HTML forms come in: once you enable your pages with forms (along with a little help from a Web s...

  • Page 26

    xxiv 15 The Top Ten Topics (we didn’t cover)iIndex 651 table of contentsappendix: leftoversWe covered a lot of ground, and you’re almost finished with this book. We’ll miss you, but before we let you go, we wouldn’t feel right about sending you out into the world without a little more pre...

  • Page 27

    xxvMake it StickIntrohow to use this book 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?”www.freepdf-books.com

  • Page 28

    how to use this bookxxvi introWho is this book for ?1 Do you have access to a computer with a Web browser and a text editor?2 Do you want to learn, understand, and remember how to create Web pages using the best techniques and the most recent standards?this book is for you.Who should probably bac...

  • Page 29

    the introyou are here�xxvii“How can this be a serious book?”“What’s with all the graphics?”“Can I actually learn it this way?”We know what you’re thinking.Your brain craves novelty. It’s always searching, scanning, waiting for something unusual. It was built that way, and it h...

  • Page 30

    how to use this bookxxviii introWe think of a “Head First” reader as a learner.It really sucks to forget your <body> element.Does it make sense to create a bathtub class for my style, or just to style the whole bathroom?The head element is where you put things about your page.So what do...

  • Page 31

    the introyou are here�xxixIf 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.Most of us did not take courses on metacognition or learning theory when we were growing up. We were ...

  • Page 32

    how to use this bookxxx introWe 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...

  • Page 33

    the introyou are here�xxxiSo, 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.Here’s what YOU can do to bend your brain into submission1 Slow down. The more you understand, th...

  • Page 34

    xxxii introRead Mehow to use this bookThis 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, bec...

  • Page 35

    the introyou are here�xxxiiipages. 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 elem...

  • Page 36

    xxxiv introTech Reviewersthe review teamFearless leader of the Extreme Review Team.Johannes de JongLousie BarrBarney MarispiniIke Van AttaValentin CrettazOur reviewers:We’re extremely grateful for our technical review team. Johannes de Jong organized and led the whole effort, acted as “series...

  • Page 37

    the introyou are here�xxxvEven 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 comme...

  • Page 38

    www.freepdf-books.com

  • Page 39

    this is a new chapter1The 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...

  • Page 40

    2 Chapter 1Video killed the radio starThe WebWant to get an idea out there? Sell something? Just need a creative outlet? Turn to the Web – we don’t need to tell you it has become the universal form of communication. Even better, it’s a form of communication YOU can participate in.But, if...

  • Page 41

    getting to know html you are here �3What 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 the...

  • Page 42

    4 Chapter 1<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 ma...

  • Page 43

    getting to know html you are here �5What 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 str...

  • Page 44

    6 Chapter 1Q: So HTML is just a bunch of tags that I put around my text?A: For starters. Remember that HTML stands for HyperText Markup Language, so HTML gives you a way to “mark up” your text with tags that tell the browser how your text is structured. But there is also the HyperText aspec...

  • Page 45

    getting to know html you are here �7<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,...

  • Page 46

    8 Chapter 1<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 ma...

  • Page 47

    getting to know html you are here �9Starbuzz 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 ...

  • Page 48

    10 Chapter 1Wonderful! We’re so glad you’ll be helping us. Here’s what we need on our first page...Take a look at the napkin. Can you determine the structure of it? In other words, are there obvious headings? Paragraphs? Is it missing anything like a title?Go ahead and mark up the napkin...

  • Page 49

    getting to know html you are here �11Create an HTML file using your favorite text editor.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 goin...

  • Page 50

    12 Chapter 1Creating an HTML file (Mac)Navigate to your Applications folderLocate and run TextEditKeep TextEdit in your DockAll 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 c...

  • Page 51

    getting to know html you are here �13Change your TextEdit PreferencesBy 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 ...

  • Page 52

    14 Chapter 1Creating an HTML file (Windows)Open the Start menu and navigate to NotepadIf 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 ...

  • Page 53

    getting to know html you are here �15Open NotepadOnce 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 two:Don’t hide extensions of well known file types.By default XP’s File Explorer hides the ...

  • Page 54

    16 Chapter 1Q: Why am I using a simple text editor? Aren’t there powerful tools like Dreamweaver, FrontPage and GoLive for creating Web pages?A: You’re reading this book because you want to understand the true technologies used for Web pages, right? Now those are all great tools, but they do ...

  • Page 55

    getting to know html you are here �17Okay, 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...

  • Page 56

    18 Chapter 1Saving 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 “...

  • Page 57

    getting to know html you are here �19Opening your Web page in a browserAre 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. Sele...

  • Page 58

    20 Chapter 1MacWindowsTaking your page for a test drive...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.Success! You’ve got the page loaded in the browser, although the results are a ...

  • Page 59

    getting to know html you are here �21Starbuzz Coffee Beverages House Blend, $1.49 A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala. Mocha Cafe Latte, $2.35 Espresso, steamed milk and chocolate syrup. Cappuccino, $1.89 A mixture of espresso, steamed milk and foam. Chai Tea, $1....

  • Page 60

    22 Chapter 1Congratulations, 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 previou...

  • Page 61

    getting to know html you are here �23Are 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...Next ...

  • Page 62

    24 Chapter 1Notice that the title, which you specified in the <head> element, shows up here.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 do...

  • Page 63

    getting to know html you are here �25This 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 “/”...

  • Page 64

    26 Chapter 1Tags can be a little more interesting than what you’ve seen so far. Here’s the paragraph tag with a little extra added to it. What do you think this does?brainpower?<p id=”houseblend”>A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p> Q: So ma...

  • Page 65

    getting to know html you are here �27Oh, I forgot to mention, we need our company mission on a page, too. Grab the mission statement off one of our coffee cups and create another page for it...To provide all the caffeine that you need to power your life. Just drink it.Starbuzz Coffee’s Mis...

  • Page 66

    28 Chapter 1Okay, 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?using css for styleYou already know that HTML gives you a way to descri...

  • Page 67

    getting to know html you are here �29Meet the style elementTo 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> <title>Starbuzz Coffee...

  • Page 68

    30 Chapter 1Now 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 typ...

  • Page 69

    getting to know html you are here �31Now we have margins around the content.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.We’ve got a gray border around the content as w...

  • Page 70

    32 Chapter 1background-color: #d2b48c;margin-left: 20%;margin-right: 20%;border: 1px dotted gray;padding: 10px 10px 10px 10px;font-family: sans-serif;Q: CSS looks like a totally different language than HTML. Why have two languages? That’s just more for me to learn, right?A: You are quite righ...

  • Page 71

    getting to know html you are here �33Write the HTML for the “mission.html” page below, and then add the new CSS.Update your “mission.html” file to include the new CSS. Once you’ve done that, reload “mission.html” in your browser. Make sure your mission page looks like ours, at th...

  • Page 72

    34 Chapter 1Greetings CSS; I’m glad you’re here because I’ve been wanting to clear up some confusion about us.Really? What kind of confusion?Lots of people think that my tags tell the browsers how to display the content. It’s just not true! I’m all about structure, not presentation.W...

  • Page 73

    getting to know html you are here �35Fashion statement? Good design and layout can have a huge effect on how readable and usable pages are. And you should be happy that my flexible style rules allow designers to do all kinds of interesting things with your elements without messing up your stru...

  • Page 74

    36 Chapter 1Not 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 ot...

  • Page 75

    getting to know html you are here �37It’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. 123456789101112131415161718Across4. We emphasized this.5. Always separate these in HTML.7. CSS is used when yo...

  • Page 76

    38 Chapter 1Thanks for giving us a hand! On the Web page we just need something simple (see below) that includes the beverage names, prices and descriptions.House Blend, $1.49 A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.Mocha Cafe Latte, $2.35 Espresso, steamed milk and cho...

  • Page 77

    getting to know html you are here �39Markup Magnets SolutionYour 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 ...

  • Page 78

    40 Chapter 1To provide all the caffeine that you need to power your life. Just drink it.Starbuzz Coffee’s Mission<html> <head> <title>Starbuzz Coffee’s Mission</title> </head> <body> <h1>Starbuzz Coffee’s Mission</h1> <p>T...

  • Page 79

    getting to know html you are here �41<html> <head> <title>Starbuzz Coffee’s Mission</title> <style type=”text/css”> body { background-color: #d2b48c; margin-left: 20%; margin-right: 20%; border:...

  • Page 80

    42 Chapter 1background-color: #d2b48c;margin-left: 20%;margin-right: 20%;border: 1px dotted gray;padding: 10px 10px 10px 10px;font-family: sans-serif;Even though you’ve just glanced at CSS, you’ve already seen the beginnings of what it can do. Match each line in the style definition to what i...

  • Page 81

    this is a new chapter43Did 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 ‘H...

  • Page 82

    44 Chapter 2Remember 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. Head First Lounge, New and ImprovedThe “detailed directions...

  • Page 83

    going further with hypertextyou are here �45A page listing some refreshing and healthy drinks. Feel free to grab one before going on.Creating the new and improved lounge in three steps...1The first step is easy because we’ve already created the “directions.html” and “elixir.html” fi...

  • Page 84

    46 Chapter 2chapter2Go ahead and grab the source files from http://www.headfirstlabs.com. Once you’ve downloaded them, look under the folder “chapter2/lounge” and you’ll find “lounge.html”, “elixir.html”, and “directions.html” (and a bunch of image files).Grab the source files...

  • Page 85

    going further with hypertextyou are here �47When you’re finished with the changes, save the file “lounge.html” and open it in your browser. Here are a few things to try...Save lounge.html and give it a test drive.Open “lounge.html” in your editor. Add the new text and HTML that is hi...

  • Page 86

    48 Chapter 2<a>elixirs</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.What did we do?Okay, I’ve loaded the new lounge page, clicked the links, and everything worked. But, I wan...

  • Page 87

    going further with hypertextyou are here �49Use the <a> element to create a hypertext link to another web page.The content of the <a> element becomes clickable in the web page.The href attribute tells the browser the destination of the link.<a href=”elixir.html”>elixirs<...

  • Page 88

    50 Chapter 2<a href=”elixir.html”>elixirs</a>Next, when a user clicks on a link, the browser uses the “href” attribute to determine the page the link points to.2<a href=”directions.html”>detailed directions</a>The user clicks on either theelixirs link or......o...

  • Page 89

    going further with hypertextyou are here �51Understanding attributesAttributes 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”> <a href=...

  • Page 90

    52 Chapter 2Q: Can I just make up new attributes for an HTML element?A: No, because Web browsers only know about a predefined set of attributes for each element. If you just made up attributes, then Web browsers wouldn’t know what to do with them, and as you’ll see later in the book, doing th...

  • Page 91

    going further with hypertextyou are here �53HeadFirst: 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 ...

  • Page 92

    54 Chapter 2You’ve created links to go from “lounge.html” to “elixir.html” and “directions.html”; now we’re going to go back the other way. Below you’ll find the HTML for “elixir.html”. Add a link with the label “Back to the Lounge” at the bottom of the elixir page that...

  • Page 93

    going further with hypertextyou are here �55Q: I’ve seen many pages where I can click on an image rather than text. Can I use the <a> element for that?A: Yes, if you put an <img> element between the <a> tags then your image will be clickable just like text. We’re not going...

  • Page 94

    56 Chapter 2Getting organizedBefore 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, ...

  • Page 95

    going further with hypertextyou are here �57Organizing 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 imag...

  • Page 96

    58 Chapter 2Technical difficultiesIt looks like we’ve got a few problems with the lounge page after moving things around. Now you need to create the file and folder structure shown on the previous page. Here’s exactly what you need to do:� Locate your “lounge” folder and create three n...

  • Page 97

    going further with hypertextyou are here �59I 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.So far you’ve used href values that point to pages in the same fo...

  • Page 98

    60 Chapter 2green.jpglightblue.jpgblue.jpg<html>...</html>directions.html<html>...</html>elixir.htmllounge<html>...</html>lounge.htmlbeveragesaboutimagesdrinks.gifred.jpgStart here......and find a path to here.<a href=”elixir.html”>elixirs</a> ...

  • Page 99

    going further with hypertextyou are here �61green.jpglightblue.jpgblue.jpg<html>...</html>directions.html<html>...</html>elixir.htmllounge<html>...</html>lounge.htmlbeveragesaboutimagesdrinks.gifred.jpgTrace a path from the source to the destination.Let’s t...

  • Page 100

    62 Chapter 2 <a href=” ”>detailed directions</a> YOUR ANSWER HEREYour turn: trace the relative path from “lounge.html” to “directions.html”. When you’ve discovered it, complete the <a> element below. Check your answer in the back of the ch...

  • Page 101

    going further with hypertextyou are here �63green.jpglightblue.jpgblue.jpg<html>...</html>directions.html<html>...</html>elixir.htmllounge<html>...</html>lounge.htmlbeveragesaboutimagesdrinks.gifred.jpgStart here......and find a path to here.<a href=”lo...

  • Page 102

    64 Chapter 2Create an href to represent the path we traced.We’re almost there. Now that you know the path, you need to get it into a format the browser understands. Let’s work through this:4<a href=”../lounge.html”>Back to the Lounge</a> .. / lounge.html First you need to g...

  • Page 103

    going further with hypertextyou are here �65Q: What’s a parent folder? If I have a folder “apples” inside a folder “fruit”, is “fruit” the parent of “apples”?A: Exactly. Folders (you might have heard these called directories) are often described in terms of family relationship...

  • Page 104

    66 Chapter 2You’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’...

  • Page 105

    going further with hypertextyou are here �67The 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:green.jpgli...

  • Page 106

    68 Chapter 2You 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!That covers all the links we broke when we reorganized the lounge, although you still need to fix the images i...

  • Page 107

    going further with hypertextyou are here �69� When you want to link from one page to another, use the <a> element.� The href attribute of the <a> element specifies the destination of the link.� The content of the <a> element is the label for the link. The label is what ...

  • Page 108

    70 Chapter 2Here’s your chance to put your relativity skills to the test. We’ve got a Web site for the top 100 albums in a folder named “music”. In this folder you’ll find HTML files, other folders and images. Your challenge is to find the relative paths we need so we can link from o...

  • Page 109

    going further with hypertextyou are here �71Round One<html>...<html>top100.htmllogo.gifRound Two<html>...<html>genres.htmllogo.gifBonus Round<html>...<html>coldplay.htmlchris.gif“top100.html” is in the “music” folder, so to get to “genres.html”, w...

  • Page 110

    72 Chapter 21234567891011121314151617Across1. ../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 "...

  • Page 111

    going further with hypertextyou are here �73<html> <head> <title>Head First Lounge Elixirs</title> </head> <body> <h1>Our Elixirs</h1> <h2>Green Tea Cooler</h2> <p> <img src=”green.jpg”>...

  • Page 112

    74 Chapter 2Exercise solutionsLabelDestinationElement<a href=”hot.html”>Hot or Not?</a><a href=” ”>Eye Candy</a>Resumecv.htmlSee my minimini-cooper.htmlcandy.html<a href=”millionaire.html”> </a>let’s play<a href=”cv.html...

  • Page 113

    going further with hypertextyou are here �75 <a href=” ”>detailed directions</a> YOUR ANSWER HERETrace the relative path from “lounge.html” to “directions.html”. When you’ve discovered it, complete the <a> element below. Here’s the solution. Did...

  • Page 114

    76 Chapter 2exercise solutionsThe Relativity Grand Challenge SolutionRound One<html>...<html>top100.htmllogo.gifimages/logo.gifpinkfloyd.html<html>...<html>top100.htmlRound Threegenres/rock/pinkfloyd.html <html>...<html>Round Two<html>...<html>genre...

  • Page 115

    this is a new chapter77Web Page Construction3 building blocksWe 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, el...

  • Page 116

    78 Chapter 3What 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.TonyTony’s SegwayMake sure you read t...

  • Page 117

    building blocksyou are here �79From Journal to Web site, at 12mphTony’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:1First, you’re going to create a rough sketch of the jo...

  • Page 118

    80 Chapter 3My first day of the trip! I can’t believe 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 have said, “A journey of a t...

  • Page 119

    building blocksyou are here �81From a sketch to an outlineNow that you’ve got a sketch of the page, you can take each section and draw something that looks more like an outline or blueprint for the HTML page... All you need to do now is figure out which HTML element maps to each content area,...

  • Page 120

    82 Chapter 3From the outline to a Web pageNow that you know what “building blocks” make up each part of the page, you can translate this blueprint directly into HTML.You’re almost there. You’ve created an outline of Tony’s Web page. Now all you need to do is create the corresponding HT...

  • Page 121

    building blocksyou are here �83<html> <head> <title>My Trip Around the USA on a Segway</title> </head> <body> <h1>Segway’n USA</h1> <p> Documenting my trip around the US on my very own Segway! </p> <h2>...

  • Page 122

    84 Chapter 3Test driving Tony’s Web pageLook how well this page has come together. You’ve put everything in Tony’s journal into a readable and well-structured Web page.Fantastic! This looks great; I can’t wait to add more entries to my page.Tony’s calling in from the road...My first day...

  • Page 123

    building blocksyou are here �85Adding some new elementsYou have the basic elements of HTML down. You’ve gone from a hand-written journal to an online version in just a few steps using the basic HTML elements <p>, <h1>, <h2>, and <img>.Now we’re going to s-t-r-e-t-c-h...

  • Page 124

    86 Chapter 3Got a short quote in your HTML? The <q> element is just what you need. Here’s a little test HTML to show you how it works:Meet the <q> element<html> <head> <title>Quote Test Drive</title> </head> <body> <p> You neve...

  • Page 125

    building blocksyou are here �87Wait a sec... you removed the double quotes and substituted a <q> element, which just displays double quotes? Am I supposed to be impressed? Are you trying to make things more complicated?There are lots of reasons people use double quotes in text, but when ...

  • Page 126

    88 Chapter 3Here’s Tony’s journal. Go ahead and rework his Lao Tzu quote to use the <q> element. After you’ve done it on paper, make the changes in your “journal.html” file and give it a test drive. You’ll find the solution in the back of the chapter.<html> <head>...

  • Page 127

    building blocksyou are here �89The Case of the Elements Separated at BirthIdentical twins were born in Webville a number of years ago and by a freak accident involving an Internet router malfunction, the twins were separated shortly after birth. Both grew up without knowledge of the other, and ...

  • Page 128

    90 Chapter 3Looooong QuotesNow that you know how to do short quotes, let’s tackle long ones. Tony’s given us a long quote with the Burma Shave jingle. In his journal Tony just put the Burma Shave quote right inside his paragraph, but wouldn’t it be better if we pulled this quote out into a...

  • Page 129

    building blocksyou are here �91Adding a <blockquote>We also put each line of text on a separate line so it reads more like a Burma Shave slogan. <blockquote> creates a separate block (like <p> does), plus it indents the text a bit to make it look more like a quote. Just what w...

  • Page 130

    92 Chapter 3Q: So let me see if I have this right: I use <q> when I just want to have some quote in with the rest of my paragraph, and I use <blockquote> when I have a quote that I want to break out on its own in my Web page?A: You’ve got it. In general you’ll use <blockquote&g...

  • Page 131

    building blocksyou are here �93Five-MinuteMysterySolvedSolved: The Case of the Elements Separated at BirthHow were the identical quote twins found to be imposters so quickly? As you’ve no doubt guessed by now, <q> and <blockquote> were discovered as soon as they went to work and b...

  • Page 132

    94 Chapter 3The real truth behind the <q> and <blockquote> mysteryOkay, it’s time to stop the charade: <blockquote> and <q> are actually different types of elements. The <blockquote> element is a block element and the <q> element is an inline element. What’...

  • Page 133

    building blocksyou are here �95Q: I think I know what a linebreak is; it’s like hitting the carriage return on a typewriter or the return key on a computer keyboard. Right?A: Pretty much. A linebreak is literally a “break in the line,” like this, and happens when you hit the Return key, o...

  • Page 134

    96 Chapter 3Hey there, Block. I’m kind of surprised to see you here.Because you’re kind of a loner. You’ve always got those linebreaks hanging around keeping everyone away from you, like they’re your body guards or something.Don’t get too big on yourself over there. Yeah, you’re gre...

  • Page 135

    building blocksyou are here �97Well, a lot of people do think at first that the <img> element is block, but he’s not, and he makes much more sense as an inline element. People like images mixed in with all their text and links. Because people like to use small quotes inline with their ...

  • Page 136

    98 Chapter 3I’ve been thinking about the Burma Shave lines. I wasn’t surprised that they weren’t broken up because we’ve said from the beginning that whitespace and linebreaks aren’t displayed by the browser...<h2>July 14, 2005</h2><p> I saw some Burma Shave style si...

  • Page 137

    building blocksyou are here �99Here’s what the changes should look like. Now it reads like a Burma Shave slogan should read!Go ahead and add the <br> elements to Tony’s journal. After you make the changes, save the file, and give it a test drive. Each line now has a linebreak after i...

  • Page 138

    100 Chapter 3Here’s the closing tag.<br> </br> Here’s the opening tag.Content? Hmm, the whole point of this element is to insert a linebreak. There’s really no content.<br> </br> Okay, typing this in is REALLY silly. We know there’s neve...

  • Page 139

    building blocksyou are here �101Q: So, the only purpose of <br> is to insert a linebreak?A: Right; the only place the browser typically inserts breaks in your content is when you start a new block element (like <p>, <h1>, and so on). If you want to insert a linebreak into your...

  • Page 140

    102 Chapter 3You’ve come a long way already in this chapter: you’ve designed and created Tony’s site, you’ve met a few new elements, and you’ve learned a few things about elements that most people creating pages on the Web don’t even know (like block and inline elements, which are rea...

  • Page 141

    building blocksyou are here �103You should be sensing a common theme by now. You always want to choose the HTML element that is closest in meaning to the structure of your content. If this is a list, let’s use a list element. Doing so gives the browser and you (as you’ll see later in the b...

  • Page 142

    104 Chapter 3Constructing HTML lists in t wo easy steps<h2>August 20, 2005</h2> <img src=”images/segway2.jpg” /><p>Well I’ve made it 1200 miles already, and I passed through some interesting places on the way: </p><li>Walla Walla, WA</li><li&g...

  • Page 143

    building blocksyou are here �105Enclose your list items with either the <ol> or <ul> element.If you use an <ol> element to enclose your list items, then the items will be displayed as an ordered list; if you use <ul>, the list will be displayed as an unordered list. Her...

  • Page 144

    106 Chapter 3Here’s the new and improved list of cities.It turns out Tony actually visited Arizona after New Mexico. Can you rework the list so the numbering is correct?Taking a test drive through the citiesMake sure you’ve added all the HTML for the list, reload your “journal.html” file...

  • Page 145

    building blocksyou are here �107Here’s another list from Tony’s journal: cell phone, iPod, digital camera, and a protein bar. You’ll find it in his June 2nd entry. This is an unordered list of items. The HTML for this entry is typed below. Go ahead and add the HTML to change the items int...

  • Page 146

    108 Chapter 3Q: Do I always have to use <ol> and <li> together? A: Yes, you should always use <ol> and <li> together (or <ul> and <li>). Neither one of these elements really makes sense without the other. Remember, a list is really a group of items: the <...

  • Page 147

    building blocksyou are here �109Putting one element inside another is called “nesting”When we put one element inside another element, we call that nesting. We say, “the <p> element is nested inside the <body> element.” At this point, you’ve already seen lots of elements n...

  • Page 148

    110 Chapter 3To understand the nesting relationships, draw a picturetitleheadbodyhtmlpqDrawing the nesting of elements in a Web page is kind of like drawing a family tree. At the top you’ve got the great-grandparents, and then all their children and grandchildren below. Here’s an example...&l...

  • Page 149

    building blocksyou are here �111Your first payoff for understanding how elements are nested is that you can avoid mismatching your tags. (And there’s gonna be more payoff later, just wait.)What does “mismatching your tags” mean and how could that happen? Take a look at this example:<p...

  • Page 150

    112 Chapter 3Below, you’ll find an HTML file with some mismatched tags in it. Your job is to play like you’re the browser and locate all the errors. After you’ve done the exercise look at the end of the chapter to see if you caught all the errors.BE the Browser<html><head> &l...

  • Page 151

    building blocksyou are here �113Who am I?A bunch of HTML elements, in full costume, are playing a party game, “Who am I?” They’ll give you a clue – you try to guess who they are based on what they say. Assume they always tell the truth about themselves. Fill in the blanks to the right t...

  • Page 152

    114 Chapter 3I was just creating a Web page explaining everything I was learning from this book, and I wanted to mention the <html> element inside my page. Isn’t that going to mess up the nesting? Do I need to put double quotes around it or something?Because browsers use < and > to ...

  • Page 153

    building blocksyou are here �115Q: Wow, I never knew the browser could display so many different characters. There are a ton of different characters and languages at the www.unicode.org site.A: Be careful. Your browser will only display all these characters if your computer or device has the ...

  • Page 154

    116 Chapter 3Here’s a bunch of elements you already know, and a few you don’t.Remember, half the fun of HTML is experimenting! So make some files of your own and try these out.<q><hr><ol><ul><blockquote><pre><code>Use this element for short quotes.....

  • Page 155

    building blocksyou are here �117Rockin’ page. It’s perfect for my trip and it really does a good job of providing an online version of my journal. You’ve got the HTML well-organized too, so I should be able to add new material myself. So, when can we actually get this off your computer ...

  • Page 156

    118 Chapter 3123456789101112131415Across2. Block element for quotes.7. Major building blocks of your pages.9. Requires two elements.10. Element without content.11. <q> is this type of element.13. Famous catchy road signs.14. Tony's transportation.15. Another empty tag.Down1. Left together i...

  • Page 157

    building blocksyou are here �119Okay, it doesn’t LOOK any different, but don’t you FEEL better now?Here’s the rework of Tony’s Lao Tzu quote using the <q> element. Did you give your solution a test drive?We’ve added the <q> opening tag before the start of the quote and th...

  • Page 158

    120 Chapter 3Here’s another list from Tony’s journal: cell phone, iPod, digital camera, and a protein bar. You’ll find it in his July 14th entry. This is an unordered list of items. Make these changes in your “journal.html” file, too. Does it look like you expected? <h2>June 2...

  • Page 159

    building blocksyou are here �121<html><head> <title>Top 100</title><body><h1>Top 100<h2>Dark Side of the Moon</h2><h3>Pink Floyd</h3><p> There’s no dark side of the moon; matter of fact <q>it’s all dark.</p>...

  • Page 160

    122 Chapter 3Who am I?I’m the #1 heading.I’m all ready to link to another page.Emphasize text with me.I’m a list, but I don’t have my affairs in order.I’m an item that lives inside a list.I’m a real linebreaker.NameInline or block?I keep my list items in order.I’m all about image.Qu...

  • Page 161

    building blocksyou are here �123W1IVB2L O3CK Q U O T ERSC4N5DU6B7L O CKELE M E N T SNSRO18L9I ST STER2EIDDE10M PT YI11N LI N EEP12PTGB13U R M A S H A V EESDS14EG W A YINI15M GAcross2. Block element for quotes. [blockquote] 7. Major building blocks of your pages. [blockelements] 9. Requires two ...

  • Page 162

    www.freepdf-books.com

  • Page 163

    this is a new chapter125Web pages are a dish best served on the Internet. So far you’ve only created HTML pages that live on your own computer. You’ve also only linked to pages that are on your own computer. We’re about to change all that. In this chapter we’ll encourage you to get those ...

  • Page 164

    126 Chapter 4Getting Starbuzz (or yourself) onto the WebYou’re closer to getting Starbuzz – or even better, your own site – on the Web than you might think. All you need to do is find a “Web Hosting Company” (we’ll call this a “hosting company” from now on) to host your pages on t...

  • Page 165

    getting connected you are here �127Finding a hosting companyTo get your pages on the Web, you need a server that actually lives on the Web full-time. Your best bet is to find a hosting company and let them worry about the details of keeping a server running. No worries, though; finding a hostin...

  • Page 166

    what’s the goal128 Chapter 4 A Web DetourHELLO, my name is...After years of struggling, we finally have our very own domain name. Even if you’ve never heard of a domain name, you’ve seen and used a zillion of them; you know... google.com, yahoo.com, amazon.com, disney.com, and a maybe a few...

  • Page 167

    getting connected you are here �129Q: Why is it called a “domain name” rather than a “Web site name”?A: Because they are different things. If you look at www.starbuzzcoffee.com, that’s a Web site name, but only the “starbuzzcoffee.com” part is the domain name. You could also crea...

  • Page 168

    what’s the goal130 Chapter 4starbuzzHere’s the new Web server. The hosting company has already created a root folder for you, which is where all your pages are going to go.starbuzzindex.htmlmission.htmlYour computer, where the Starbuzz pages currently live.starbuzz<html>...</html>...

  • Page 169

    getting connected you are here �131 A Web DetourGetting your files to the root folderstarbuzz<html>...<html>index.html<html>...<html>mission.htmlQ: Wait a sec, what’s the “root folder” again?A: Up until now the root folder has just been the top-level folder for you...

  • Page 170

    what’s the goal132 Chapter 4 A Web DetourAs much FTP as you can possibly fit in t wo pagesSeriously, this really is an HTML and CSS book, but we didn’t want to leave you up a creek without a paddle. So, here’s a very quick guide to using FTP to get your files on the Web. Keep in mind your h...

  • Page 171

    getting connected you are here �133File Edit Window Help Jam%ftp www.starbuzzcoffee.com Connected to www.starbuzzcoffee.comName: headfirstPassword:******230 User headfirst logged in.ftp> dirdrwx------ 4096 Sep 5 15:07 starbuzzftp> cd starbuzzCWD command successfulftp> put index....

  • Page 172

    134 Chapter 4 A Web DetourQ: My hosting company told me to use SFTP, not FTP. What’s the difference?A: SFTP, or Secure File Transfer Protocol, is a more secure version of FTP, but works mostly the same way. Just make sure your FTP application supports SFTP before you make a purchase.Q: So do I ...

  • Page 173

    getting connected you are here �135starbuzz<html>...</html>index.html<html>...</html>mission.htmlwww.starbuzzcoffee.comBack to business...DO try this at homeIt’s another homework assignment for you (check each item as you do it):® Make sure you know where your root fo...

  • Page 174

    136 Chapter 4Come on down to http://www.earlsautos.comMainstreet, USAURLYou’ve probably heard the familiar “h” “t” “t” “p” “colon” “slash” “slash” a zillion times, but what does it mean? First, of all, the Web addresses you type into the browser are called URLs or ...

  • Page 175

    getting connected you are here �137Whatever you do, don’t pronounce URL as “Earl,” because that’s my name. It’s pronounced U-R-L.What is the HTTP Protocol?HTTP is also known as the HyperText Transfer Protocol. In other words, it’s an agreed-upon method (a protocol) for transferring ...

  • Page 176

    138 Chapter 4What’s an Absolute Path?The last time we talked about paths we were writing HTML to make links with the <a> element. The path we’re going to look at now is the absolute path part of a URL, the last part that comes after the protocol (http) and the Web site name (www.starbuz...

  • Page 177

    getting connected you are here �139Q: What is important about the absolute path?A: The absolute path is what a server needs to locate the file you are requesting. If the server didn’t have an absolute path, it wouldn’t know where to look.Q: I feel like I understood the pieces (protocols, se...

  • Page 178

    140 Chapter 4I’d like my visitors to be able to type “http://www.starbuzzcoffee.com” and not have to type the “index.html”. Is there a way to do that?http://www.starbuzzcoffee.com/http://www.starbuzzcoffee.com/images/it will change it to:http://www.starbuzzcoffee.comYes, there is. One ...

  • Page 179

    getting connected you are here �141Q: So anyone who comes to my site with the URL http://www.mysite.com is going to see my “index.html” page?A: Right. Or, possibly “default.htm” depending on which kind of Web server your hosting company is using. (Note that “default.htm” usually ha...

  • Page 180

    142 Chapter 4Earl needs a little help with his URLsearls_autos<html>...</html>index.htmlcars<html>...</html>directions.htmlnew<html>...</html>index.html<html>...</html>inventory.htmlused<html>...</html>index.html<html>...</html&...

  • Page 181

    getting connected you are here �143EDCBAWrite the URL here.www.freepdf-books.com

  • Page 182

    144 Chapter 4URLs aren’t just for typing into browsers; you can use them right in your HTML. And, of course, right on cue, the Starbuzz CEO has a new task for you: make a link from the main Starbuzz page over to the caffeine information at http://buzz.headfirstlabs.com. As you can probably gues...

  • Page 183

    getting connected you are here �145<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; f...

  • Page 184

    146 Chapter 4And now for the test drive...Here’s the page with the new link, just as we planned.And when you click on the link, your browser will make an HTTP request to buzz.headfirstlabs.com and then display the result.Here’s the new link. Notice, we only linked the words “Caffeine Buzz...

  • Page 185

    getting connected you are here �147there are noDumb QuestionsQ: It seems like there are two ways to link to pages now: relative paths and URLs.A: Well, relative paths can only be used to link to pages within the same Web site, while URLs are typically used to link to other Web sites.Q: Wouldn...

  • Page 186

    148 Chapter 4The Case of Relatives and AbsolutesPlanetRobots, Inc., faced with the task of developing a Web site for each of its two company divisions – PlanetRobot Home and PlanetRobot Garden – decided to contract with two firms to get the work done. RadWebDesign, a seemingly experienced fir...

  • Page 187

    getting connected you are here �149Can you say “Web career?” You’ve certainly delivered everything the Starbuzz CEO has asked for, and you’ve now got a high profile Web site under your belt (and in your portfolio). But you’re not going to stop there. You want your Web sites to have th...

  • Page 188

    150 Chapter 4The title test drive...For most browsers, the title is displayed as a “tool tip” when you pass the mouse over a link. Remember that browsers for the visually impaired may read the link title aloud to a visitor.The title is displayed as a “tool tip” in most browsers. Just pass...

  • Page 189

    getting connected you are here �151Open your Starbuzz “index.html” file and add a title to the link to “mission.html” with the text “Read more about Starbuzz Coffee’s important mission”. Notice that we didn’t make the mission link’s label as concise as it should be. Shorten th...

  • Page 190

    152 Chapter 4Using the <a> element to create a destination <h2>Chai Tea, $1.85</h2> <p>A spicy drink made with black tea, spices, milk and honey.</p>Here’s the snippet from “index.html” with the Chai heading and description.When you use an <a> element to ...

  • Page 191

    getting connected you are here �153How to link to destination anchors<a href=”index.html#chai”>See Chai Tea</a>You already know how to link to pages using either relative links or URLs. In either case, to link more specifically to a destination anchor in a page, just add a # on ...

  • Page 192

    154 Chapter 4This is similar to the naming problem with <b>mateine</b> and <b>guaranine</b>.</p> <h3><a id=”Coffee”>Coffee</a></h3><p><i>All fluid ounces are U.S. fluid ounces.</i></p>Now that you’ve got your hand...

  • Page 193

    getting connected you are here �155there are noDumb QuestionsQ: When I have two attributes in an element, is the order important? For example, should the title attribute always come after the href?A: The order of attributes is not important in any element (if it were we’d all have headaches 2...

  • Page 194

    156 Chapter 4The Case of Relatives and AbsolutesSo, how did RadWebDesign flub up the demo? Well, because they used URLs for their hrefs instead of relative links, they had to edit and change every single link from http://www.planetrobots.com to http://www.robotsrus.com. Can you say error-prone...

  • Page 195

    getting connected you are here �157Awesome job linking to the Buzz site... I know I keep asking for changes, but really, this is the last one. Can you make the Buzz site come up in a separate window when I click on the link? I don’t want the Starbuzz page to go away.Linking to a new windowW...

  • Page 196

    158 Chapter 4Opening a new window using targetTo open a page in a new window, you need to tell the browser the name of the window in which to open it. If you don’t tell the browser a specific window to use, the browser just opens the page in the same window. You can tell the browser to use a ...

  • Page 197

    getting connected you are here �159This week’s interview:Using target considered bad? The Target Attribute ExposedHead First: Hello target, we’re so glad you could join us. Target Attribute: I’m glad to be here. It’s nice to know you’re still interested in hearing about me.Head Firs...

  • Page 198

    160 Chapter 4HTMLcrossHere are some mind benders for your left brain.1234567891011121314Across2. Wrong way to pronounce URL.4. Attribute used to anchor an <a> element to a page.7. Earl sold these.8. Web address to a resource.9. Protocol we've been using up until this chapter.11. Unique name...

  • Page 199

    getting connected you are here �161Typically the best way to get on the Web is nto find a hosting company to host your Web pages.A domain name is a unique name, like namazon.com or starbuzzcoffee.com, that is used to identify a site.A hosting company can create one or more nWeb servers in yo...

  • Page 200

    162 Chapter 4protocolWeb site nameabsolute path://httpwww.starbuzzcoffee.com /index.htmlYour Web site name here.L1E2A3RLI4DBNSP5KB6OOC7A R SU8RLSOF9I10LEZUTNCZTCCD11O M AI NR12EL A TIVENORSFNODEAH13T TPULF14ET C HAcross2. Wrong way to pronounce URL. [earl] 4. Attribute used to anchor an <a>...

  • Page 201

    getting connected you are here �163http://www.earlsautos.com/directions.htmlhttp://www.earlsautos.com/cars/used/inventory.htmlhttp://www.earlsautos.com/cars/new/images/minicooper.gifhttp://www.earlsautos.com/cars/new/Earl needs a little help with his URLsEDCBAhttp://www.earlsautos.com/Solutionw...

  • Page 202

    164 Chapter 4<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; ...

  • Page 203

    this is a new chapter165Smile and say “cheese.” Actually, smile and say “gif”, “jpg”, or “png” – these are going to be your choices when “developing pictures” for the Web. In this chapter you’re going to learn all about adding your first media type to your pages: images. G...

  • Page 204

    166 Chapter 5How the browser works with imagesBrowsers handle <img> elements a little differently than other elements. Take an element like an <h1> or a <p>. When the browser sees these tags in a page, all it needs to do is display them. Pretty simple. But, when a browser sees ...

  • Page 205

    adding images to your web pagesyou are here �167BrowserBrowser<html> <head> <title>Head First Lounge Elix-irs</title> </head> <body> <h1>Our Elix-irs</h1>...</html><html> <head> <title>Another Page</title>...

  • Page 206

    168 Chapter 5Having just retrieved “green.jpg”, the browser displays it and then moves on to the next image: “lightblue.jpg”.3<html> <head> <title>Head First Lounge Elix-irs</title> </head> <body> <h1>Our Elix-irs</h1>...</html&g...

  • Page 207

    adding images to your web pagesyou are here �169How images workImages are just images, right? Well, actually there are a zillion formats for images out there in the world, all with their own strengths and weaknesses. But luckily, only two of those formats are commonly used on the Web: JPEG and ...

  • Page 208

    170 Chapter 5Hello again, GIF. Didn’t I just see you on a Web page?Yeah... wouldn’t it be nice if everyone just stuck to GIF? Then I wouldn’t have to run into you so often.Hah. As soon as you get good at representing complex images, like photos, I’m sure people will be happy to stick w...

  • Page 209

    adding images to your web pagesyou are here �171{GIF disappears, literally}{GIF reappears}Don’t panic. I’m just proving a point. If JPEG is so great, how come you can’t make parts of your images transparent like I can? With transparency, what is underneath the image shows through. If my ...

  • Page 210

    172 Chapter 5?Congratulations: you’ve been elected “Grand Image Format Chooser” of the day. For each image below, choose the format that would best represent it for the Web.WHICH Image Format?dddnJPEG or GIF® ®® ®® ®® ®® ®when to use gif or jpegwww.freepdf-books.com

  • Page 211

    adding images to your web pagesyou are here �173You already know <img> is an empty element.And now for the formal introduction: meet the <img> element.<img src=”images/drinks.gif”>We’ve held off on the introductions long enough. As you can see, there’s more to dealing ...

  • Page 212

    174 Chapter 5<img>: it’s not just relative links anymore<img src=”http://www.starbuzzcoffee.com/images/corporate/ceo.jpg”>Here’s a “Sharpen your pencil” that is actually about pencils (oh, and images too). This exercise involves a bit of trivia: Given a typical, brand-new ...

  • Page 213

    adding images to your web pagesyou are here �175there are noDumb QuestionsQ: So the <img> element is quite simple – it just provides a way to specify the location of the image that needs to be displayed in the page?A: Yes, that about sums it up. We’ll talk about a couple of attributes...

  • Page 214

    176 Chapter 5Always provide an alternativeOne thing you can be sure of on the Web is that you never know exactly which browsers and devices will be used to view your pages. Visitors are likely to show up with mobile devices, screen readers for the visually impaired, browsers that are running over...

  • Page 215

    adding images to your web pagesyou are here �177Sizing up your imagesThere’s one last attribute of the <img> element you should know about – actually, they’re a pair of attributes: width and height. You can use these attributes to tell the browser, up front, the size of an image in ...

  • Page 216

    178 Chapter 5Creating the ultimate fan site: myPodiPod owners love their iPods, and they take them everywhere. Imagine creating a new site called “myPod” to display pictures of your friends and their iPods from their favorite locations, all around the world. What do you need to get started? ...

  • Page 217

    adding images to your web pagesyou are here �179<html> <head> <title>myPod</title> <style type=”text/css”> body { background-color: #eaf3da;} </style> </head> <body> <h1>Welcome to myPod</h1> ...

  • Page 218

    180 Chapter 5As you can see, a lot of the HTML is already written to get myPod up and running. All you need to do is add an <img> element for each photo you want to include. There’s one photo so far, “seattle.jpg”, so go ahead and add an element to place that image in the page below....

  • Page 219

    adding images to your web pagesyou are here �181Here’s the full size of the image, which is bigger than the size of the browser window... much bigger. Whoa! The image is way too largeHere’s our browser. It’s about the size of the typical browser window.And here’s the “seattle.jpg” i...

  • Page 220

    182 Chapter 5Q: What’s wrong with having the user just use the scroll bar to see the image?A: In general, Web pages with large images are hard to use. Not only can your visitors not see the entire image at once, but using scroll bars is cumbersome. Large images also require more data to be tran...

  • Page 221

    adding images to your web pagesyou are here �183Resize the image to fit in the browserLet’s fix up this image so it fits the browser page better. Right now this image is 1200 pixels wide by 800 pixels tall (you’ll see how to determine that in a sec). Because we want the width of the image t...

  • Page 222

    184 Chapter 5Good question – there are lots of photo editing applications on the market (some freely available), which are all quite similar. We’re going to use Adobe’s Photoshop Elements to resize the images, because it is one of the most popular photo editing applications, and is availabl...

  • Page 223

    adding images to your web pagesyou are here �185First, start your photo editing application and open the “seattle.jpg” image. In Photoshop Elements, you’ll want to choose the “Browse Folders...” menu option under the “File” menu, which will open the “File Browser” dialog box. ...

  • Page 224

    186 Chapter 5Now that “seattle.jpg” is open, we’re going to use the “Save for Web” dialog to both resize the image and save it. To get to that dialog box, just choose the “Save for Web” menu option from the “File” menu. Resizing the imageHere’s the “seattle.jpg” image in ...

  • Page 225

    adding images to your web pagesyou are here �187After you’ve selected the “Save for Web” menu option, you should see the dialog box below; let’s get acquainted with it before we use it.This dialog lets you do all kinds of interesting things. For now, we’re going to focus on how to us...

  • Page 226

    188 Chapter 5(1) Change the image size here to a width of 600 and a height of 400. If you have “Constrain Proportions” checked, then all you have to do is type the new width, 600, and Elements will change the height to 400 for you.(2) Once the width and height are set correctly, click “App...

  • Page 227

    adding images to your web pagesyou are here �189You’ve resized - now save(1) Now that the image size is set, you just need to choose the format for the image. Currently it’s set to save as GIF; change this to JPEG like we’ve done here.(3) That’s it; click “OK” and go to the next pa...

  • Page 228

    190 Chapter 5Q: Can you say more about the quality setting in “Save for Web”?A: The JPEG format allows you to specify the level of image quality you need. The lower the quality, the smaller the file size. If you look at the preview pane in the “Save for Web” dialog you can see both the qu...

  • Page 229

    adding images to your web pagesyou are here �191Now the image fits nicely in the browser window. Fixing up the myPod HTMLOnce you’ve saved the image, you can quit out of Photoshop Elements. Now all you need to do is change the myPod “index.html” page to include the new version of the pho...

  • Page 230

    192 Chapter 5?WHICH Image Format?Format Quality Size Time WinnerJPEGJPEGJPEGJPEGJPEGGIFMaximumVery HighHighMediumLowN/A®®®®®®2Your task this time: open the file “chapter5/testimage/eye.jpg” in Photoshop Elements. Open the “Save for Web” dialog and fill in the blanks...

  • Page 231

    adding images to your web pagesyou are here �193<html> <head> <title>myPod</title> <style type=”text/css”> body { background-color: #eaf3da;} </style> </head> <body> <h1>Welcome to myPod</h1> ...

  • Page 232

    194 Chapter 5Taking myPod for another test driveAt this point we don’t need to tell you to reload the page in your browser; we’re sure you’re way ahead of us. Wow, what a difference a few images make, don’t you think? This page is starting to look downright interesting.But that doesn’t...

  • Page 233

    adding images to your web pagesyou are here �195Reworking the site to use thumbnailsCreate a new directory for the thumbnails.Resize each photo to 150 by 100 pixels and save it in a “thumbnail” folder.Set the src of each <img> element in “index.html” to the thumbnail version of th...

  • Page 234

    196 Chapter 5Create the thumbnailsYou’ve got a place to put your thumbnails, so let’s create them. Start by opening “seattle_med.jpg” with your photo editing application. You’re going to resize it to 150x100 pixels using the same method you used to create the 600x400 version:With the im...

  • Page 235

    adding images to your web pagesyou are here �197<html> <head> <title>myPod</title> <style type=”text/css”> body { background-color: #eaf3da;} </style> </head> <body> <h1>Welcome to myPod</h1> ...

  • Page 236

    198 Chapter 5Take myPod for another test driveAhhh... much better. Visitors can see all the available pictures at a glance. They can also tell which photos go with each city more easily. Now we need to find a way to link from each thumbnail to the corresponding large image.Wait a sec, don’t yo...

  • Page 237

    adding images to your web pagesyou are here �199Turning the thumbnails into linksYou’re almost there. Now you just need to create a link from each thumbnail image to its larger version. Here’s how this is going to work:A visitor sees a thumbnail they like, say the downtown iPod thumbnail.....

  • Page 238

    200 Chapter 5Create individual pages for the photos<html> <head> <title>myPod: Seattle Ferry</title> <style type=”text/css”> body { background-color: #eaf3da; } </style> </head> <body> <h1>Seattle Ferry</h1> ...

  • Page 239

    adding images to your web pagesyou are here �201 <a href=”html/seattle_downtown.html”> <img src=”thumbnails/seattle_downtown.jpg” alt=”An iPod in downtown Seattle, WA”></a>So, how do I make links out of images?If you look in the “html” folder...

  • Page 240

    202 Chapter 5<html> <head> <title>myPod</title> <style type=”text/css”> body { background-color: #eaf3da;} </style> </head> <body> <h1>Welcome to myPod</h1> <p> Welcome to the plac...

  • Page 241

    adding images to your web pagesyou are here �203 passionate folks over here who love their iPods. Check out the classic red British telephone box! </p> <p> <a href=”html/britain.html”> <img src=”thumbnails/britain.jpg” alt=”An...

  • Page 242

    204 Chapter 5The myPod Web page is looking awesome! I think you should add a logo to the page - that would add a great finishing touch.Great idea. In fact, we’ve got a myPod logo all ready to go.Take another look in the folder “chapter5/mypod”, and you’ll find a folder called “logo”...

  • Page 243

    adding images to your web pagesyou are here �205If your photo editing application won’t open the file, follow along anyway - the same principles apply for other formats as well.You’ll find the “logo” folder in the “chapter5/mypod” folder.Open the myPod logoLet’s check out the myPo...

  • Page 244

    206 Chapter 5What format should we use?Remember, use this pulldown menu to set the format. We’re going to set the format to GIF to save the logo.You already know that we have a couple of options in deciding how to save this image: we could use JPEG or GIF. This logo uses only three colors, te...

  • Page 245

    adding images to your web pagesyou are here �207To be transparent, or not to be transparent? That is the question...The myPod logo is going to be placed on a light green background, so you might think that transparency is going to be a good thing, right? Well, let’s compare how the logo look...

  • Page 246

    208 Chapter 5You know you want a transparent GIF version of the logo, and you also know we’ll need to use a matte to prevent the halos around the text. Let’s check out the GIF panel of the “Save for Web” dialog.Save the transparent GIFYou know to choose GIF already.And check Transparency....

  • Page 247

    adding images to your web pagesyou are here �209What? You can’t tell that’s light green? For now take our word for it; we’ll come back to this in a few chapters and explain all about colors.The Color Picker gives you a lot of different ways to choose the matte color. We just want to set i...

  • Page 248

    210 Chapter 5Type these letters in right here. This box is designed specifically for colors written in the Web format. You can type the letters in upper- or lowercase, it doesn’t matter.Set the matte color, continuedOnce you’ve typed the color into the Color Picker, click “OK” and it will...

  • Page 249

    adding images to your web pagesyou are here �211Save the logoOkay you’ve made all the adjustments you need to in the “Save for Web” dialog, so go ahead and click “OK” to save the image as “mypod.gif ”. Elements will automatically change the extension of your filename to “.gif”...

  • Page 250

    212 Chapter 5Excellent work. The logo looks great. You’ve got a kick-ass myPod Web site here!And it works - all that hard work paid off. You have a great looking logo on your myPod Web page. And now for the final test driveLet’s test this puppy! Reload the Web page in the browser and see...

  • Page 251

    adding images to your web pagesyou are here �213Q: Do I really need to know all this stuff about image formats to write good Web pages?A: No. You can build great Web pages without any images. However, images are a big part of the Web, so some knowledge of how images work can really help. Som...

  • Page 252

    214 Chapter 5Use the <img> nelement to place images in your Web page.Browsers treat <img> elements a little ndifferently than other HTML elements; after reading the HTML page, the browser retrieves each image from the Web server and displays it.If you have more than a couple of larg...

  • Page 253

    adding images to your web pagesyou are here �215HTMLcrossIt’s time to give your right brain a break and put that left brain to work. All these words are HTML-related and from this chapter. 123456789101112131415Across3. Smallest element on a screen.5. Web server makes a request for each one o...

  • Page 254

    216 Chapter 5?Congratulations: you’ve been elected “Grand Image Format Chooser” of the day. For each image below, choose the format that would best represent it on the Web.WHICH Image Format?dddnJPEG or GIF® ®® ®® ®® ®® ®This image is borderline. It has lots of continuous c...

  • Page 255

    adding images to your web pagesyou are here �217<html> <head> <title>Sharpen your pencil trivia</title> </head> <body> <p>How long a line can you draw with the typical pencil?</p> <p> <img src=”http://www.he...

  • Page 256

    218 Chapter 5Here are the results of having a broken image in a few different browsers. In most cases, the browser is able to use the extra alt attribute information to improve what is displayed. Why do we care? After all, this is an error in a Web page; we should just fix it, right? Well, in the...

  • Page 257

    adding images to your web pagesyou are here �219?WHICH Image Format?Format Quality Size Time WinnerJPEGJPEGJPEGJPEGJPEGGIFMaximumVery HighHighMediumLowN/A®®®®®®2232K112K64K30K18K221K83 Seconds41 Seconds24 Seconds12 Seconds7 Seconds80 SecondsIs the winner really Medium? No...

  • Page 258

    220 Chapter 5<html> <head> <title>myPod: Seattle Downtown</title> <style type=”text/css”> body { background-color: #eaf3da; } </style> </head> <body> <h1>Downtown Seattle</h1> <p> <img src=”....

  • Page 259

    adding images to your web pagesyou are here �221I1Q2P3I X EL4UOOI5M A G ET6DNLRG7IFIAEA8TP9N GC10O N C U RRE N TLYSTPT11HIRT YFIVEJ12AAPRT13H U M B N AIL SR14E SI ZEIGNACA15CCE S SIBILIT YAcross3. Smallest element on a screen. [pixel] 5. Web server makes a request for each one of these. [image]...

  • Page 260

    www.freepdf-books.com

  • Page 261

    this is a new chapter223Serious HTML6 standards, compliance, and all that jazzWhat else is there to know about HTML? You’re well on your way to mastering HTML. In fact, isn’t it about time we move on to CSS and learn how to make all this bland markup look fabulous? Before we do, we need to...

  • Page 262

    224 Chapter 6Jim: Button up? Frank: You know, make sure it meets the HTML “standards.”Jim: Our HTML is just fine... here, look at it in the browser. It looks beautiful. We’re a careful bunch. We know how to correctly form our elements. Joe: Yeah, that’s what I think... they’re just...

  • Page 263

    standards, compliance, and all that jazzyou are here �225Frank: But different browsers (say Internet Explorer versus Firefox versus Safari) have different ways of handling imperfect HTML. In other words, if you have mistakes in your HTML, then all bets are off in terms of how your pages will l...

  • Page 264

    226 Chapter 6A Brief History of HTMLHTML 1.0-2.0HTML 3These were the early days; you could fit everything there was to know about HTML into the back of your car. Pages weren’t pretty, but at least they were hypertext enabled. No one cared much about presentation, and just about everyone on the ...

  • Page 265

    standards, compliance, and all that jazzyou are here �227Ah, the good life. HTML 4.01 entered the scene in 1999, and is the most current version of HTML. While everyone hoped 4.0 would be the ONE, it’s always the case that a few fixes are needed here and there. No biggies and nothing to worr...

  • Page 266

    228 Chapter 6Head First: We’re glad to have you here, Browser. As you know, “HTML versions” have become a popular issue. What’s the deal with that? You’re a Web browser after all. I give you HTML and you display it the best you can.Browser: Being a browser is tough these days... there...

  • Page 267

    standards, compliance, and all that jazzyou are here �229We can’t have your pages putting the browser into Quirks Mode!We’ll all be better off for telling the browser up front: “Hey, we’re an HTML page that gets it. We’re standards compliant. This is HTML 4.01, baby!” When you do t...

  • Page 268

    230 Chapter 6Q: What exactly do you mean when you say we’re “compliant,” or that we’re writing “standard HTML?”A: “Standard HTML” just means the version of HTML that everyone has agreed is “the standard,” and right now that is HTML 4.01. Being compliant is just another way of...

  • Page 269

    standards, compliance, and all that jazzyou are here �231<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><html> <head> <title>Head First Lounge</title> </head> <body> <h1>We...

  • Page 270

    232 Chapter 6Wow, no difference. Well, we didn’t really expect any because all the DOCTYPE does is let the browser know for sure you’re using HTML 4.01.The DOCTYPE test driveMake the changes to your “lounge.html” file in the “chapter6/lounge” folder and then load the page in your br...

  • Page 271

    standards, compliance, and all that jazzyou are here �233See, piece of cake. The DOCTYPE is in our pages and working fine.Jim: Yeah, really easy. But here’s what I still don’t get: we put this DOCTYPE at the top of our file to tell the browser our page is HTML 4.01 but that doesn’t ensur...

  • Page 272

    234 Chapter 6Meet the W3C validatorThere are three ways you can check your HTML: The W3C validator is located at http://validator.w3.org.(1) If your page is on the Web, then you can type in the URL here, click the “Check” button, and the service will retrieve your HTML and check it.(2) You ...

  • Page 273

    standards, compliance, and all that jazzyou are here �235Validating the Head First LoungeWe’re going to use option (3) to validate the “lounge.html” file. That means we need to copy and paste the HTML from “lounge.html” into the form at the bottom of the W3C validator Web page; keep ...

  • Page 274

    236 Chapter 6Houston, we have a problem...That red on the page can’t be good. It doesn’t look like the page validated. We’d better take a look...This doesn’t look bad. It looks like in HTML 4.01 we have to put an alt attribute in the <img> element.We failed the validation. It looks ...

  • Page 275

    standards, compliance, and all that jazzyou are here �237<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><html> <head> <title>Head First Lounge</title> </head> <body> <h1>We...

  • Page 276

    238 Chapter 6We’re not there yet...Hmm; it looks like we’re now “tentatively valid HTML 4.01 Transitional.” That sounds like “close, but no cigar.” Let’s take a look:There’s definitely some issue with the lounge Web page, but what the heck does this mean??It looks like if we fix t...

  • Page 277

    standards, compliance, and all that jazzyou are here �239See, we’re getting this error message that the validator can’t find a character encoding.Frank: The character encoding tells the browser what kind of characters are being used in the page. For instance, pages can be written using enc...

  • Page 278

    240 Chapter 6using <meta> to specify a content typeAdding a <meta> tag to specify the content type<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1”>Most of you reading this book are probably using English or Western-European languages (the so-called...

  • Page 279

    standards, compliance, and all that jazzyou are here �241Making the validator (and more than a few browsers) happy with a <meta> content tag...Okay, you know the plan. You just need to type the <meta> content type line right into your HTML. Let’s first add it to the “lounge.htm...

  • Page 280

    242 Chapter 6Just like before, upload your “lounge.html” HTML file to the W3C validator Web page at http://validator.w3.org. Or, you can validate by copying and pasting your HTML into the form, or even transfer the files to your Web site and give the validator your URL, whichever you prefer....

  • Page 281

    standards, compliance, and all that jazzyou are here �243Okay, it’s been more than a “few pages” since you said you were going to talk about what “transitional” means. What’s with this transitional stuff? If we’re writing “standard” HTML 4.01, why is it transitional?Imagine yo...

  • Page 282

    244 Chapter 6Okay, so it gives us a transition point between old style HTML and standard HTML 4.01. But why are we using it? Why didn’t we just start with strict?That would have been a perfectly valid approach. But, while we’ve been writing pretty decent HTML in this book, we’re just now l...

  • Page 283

    standards, compliance, and all that jazzyou are here �245I think we’ve been pretty darn strict in our HTML. Let’s throw the strict DOCTYPE in and see what happens.To move from transitional HTML 4.01 to strict, we change the DOCTYPE to the strict version. Once we’ve done that, the validato...

  • Page 284

    246 Chapter 6Changing the DOCTYPE to strict<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1”> <title>Head First Lou...

  • Page 285

    standards, compliance, and all that jazzyou are here �247Do we have validation?Let’s look at the error message: it looks like strict HTML doesn’t like where we put the <img> element. But transitional was okay with it... sounds like maybe the nesting rules changed in strict HTML?“I ...

  • Page 286

    248 Chapter 6Come on guys, no fighting. I see your problem. You’re not using the right nesting for strict HTML 4.01. But it’s easy to fix.Joe: We’re not?Judy: No. Look here, you’ve got an <img> element that’s nested in the <body> element. That was okay in older version...

  • Page 287

    standards, compliance, and all that jazzyou are here �249Fixing the nesting problem<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-88...

  • Page 288

    250 Chapter 6One more chance to be strict...It works! The big green badge of success.You know the game. Ask the validator to give your “lounge.html” file another try. Let’s see if we’re worthy...And we’re HTML 4.01 Strict.Can you say “HTML Superstar?” Oh yeah, bring on that strict ...

  • Page 289

    standards, compliance, and all that jazzyou are here �251Your turn. Add the strict DOCTYPE and the <meta> tag to “directions.html” and “elixir.html”. Try validating them – do they validate? If not, fix them so that they do.Q: Okay, I think I get all this, and it was kind of fu...

  • Page 290

    252 Chapter 6You’ve been in Webville for a few chapters now. Don’t you think it’s about time you learn the local rules of the road? Luckily, Webville has prepared a handy guide to using strict HTML 4.01. This guide is meant for you – someone who is new to Webville. It isn’t an exhau...

  • Page 291

    standards, compliance, and all that jazzyou are here �253The <html> element: don’t leave home without it.Always start each page with a DOCTYPE, but following that, the <html> element must always be the top, or root, element of your Web page. So, after the DOCTYPE, the <html>...

  • Page 292

    254 Chapter 6Keep block elements out of your <p> element.Paragraphs are for text, so keep block elements out of your paragraphs. Of course it is perfectly fine to use all the inline elements you want in them (<em>, <a>, <strong>, <img>, <q>, and so on).Lists ar...

  • Page 293

    standards, compliance, and all that jazzyou are here �255Q: That wasn’t too bad; I was expecting pages of rules I had to remember. Can I really write strict HTML 4.01 just following these rules?A: These rules will get you a long way, but remember, you haven’t learned everything about HTML y...

  • Page 294

    256 Chapter 6Hey there, Strict. You here to talk about how much you love frustrating Web page writers?Oh, you know, all those Web page writers out there who are struggling to get their Web pages to validate with your strict DOCTYPE. You’re pretty tough, you know.Tough love?Oh, please. Not ev...

  • Page 295

    standards, compliance, and all that jazzyou are here �257TransitionalStrictSo, you’re just going to leave behind all those millions of Web pages out there that still use older versions of HTML? Ignore them completely? I bet you use some nonstrict Web pages yourself. How ’bout I come over...

  • Page 296

    258 Chapter 6One more question about this transitional stuff. What is all this old markup that isn’t allowed in strict? Have we seen any examples?Even though we haven’t been including a DOCTYPE or a <meta> tag, and we’ve been a little lazy on the image nesting rules, throughout this b...

  • Page 297

    standards, compliance, and all that jazzyou are here �259<html><head> <title>Webville Forecast</title></head><body bgcolor=”tan” text=”black”> <p> The weather report says lots of rain and wind in store for <font face=”arial...

  • Page 298

    260 Chapter 6Below, you’ll find an HTML file. Your job is to play like you’re the validator and locate ALL the errors. After you’ve done the exercise, look at the end of the chapter to see if you caught them all.BE the Validator<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “h...

  • Page 299

    standards, compliance, and all that jazzyou are here �261HTML 4.01 is the HTML nstandard that is most widely supported by browsers.The World Wide Web Consortium (W3C) is nthe standards organization that defines what “standard HTML” is.Many browsers have two modes for displaying nHTML: ...

  • Page 300

    262 Chapter 6It’s been a heck of a chapter. Go ahead and grab a cup of your favorite beverage, sit back, and strengthen those neural connections by doing this crossword. All the answers come from the chapter.123456789101112131415Across3. True or false: element names should be lowercase.4. Requi...

  • Page 301

    standards, compliance, and all that jazzyou are here �263<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><html><head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1”></head><bo...

  • Page 302

    264 Chapter 6V1S2AT3R U ELYT4ITLEA5DEW63CCAECTBC7O M PLI A N TEODHSB8R O W SER W A R SSVRC9S10SIEA11LTTQ12BM13LCRUIEOT14R A N SITI O N ALD15O CT YPEECRIAERTKTRSYAcross3. True or false: element names should be lowercase. [true] 4. Required in the <head> element. [title] 6. Standards organiza...

  • Page 303

    this is a new chapter265Putting an ‘X’ into HTML7 moving to XHTMLWe’ve been keeping a dirty secret from you. We know you thought you bought an HTML book, but this is really an XHTML book in disguise. In fact, we’ve been teaching you mostly XHTML all along. You’re probably wondering, ju...

  • Page 304

    266 Chapter 7Joe: I can’t believe our manager knows what it is.Frank: Hey guys, XHTML is the new standard for HTML. There’s not going to be an HTML 5; the new standard is XHTML 1.0.Jim: That’s great, but do we need to be so cutting edge?Frank: Actually, XHTML 1.0 has been around since 2000...

  • Page 305

    moving to xhtmlyou are here �267What is XML? <recipe xmlns=”http://www.foodnetwerk.com/recipe” lang=”en” xml:lang=”en”> <name>Head First Lounge Iced Tea</name> <description>A brisk iced tea with a bit of a kick. We serve this all day long....

  • Page 306

    268 Chapter 7What does this have to do with HTML?If XML is a language that can be used to invent new markup languages, and HTML is a markup language, can we use XML to recreate HTML? We sure can. Let’s see how this might look before we talk about why in the heck you’d actually want to: <!D...

  • Page 307

    moving to xhtmlyou are here �269I don’t get it. We changed the DOCTYPE and added a couple of new attributes, but the rest of this example is totally like HTML 4.01. So, what’s the big deal?This is going to sound very anticlimatic, but XHTML is XML while HTML is, well, just HTML. The big di...

  • Page 308

    270 Chapter 7So why would you want to use XHTML?By using HTML 4.01 Strict, you’re already reaping some of the benefits of XHTML. However, because XHTML is XML, it has some interesting advantages beyond HTML 4.01. Let’s take a look at everything XHTML gets you, including some of the benefits ...

  • Page 309

    moving to xhtmlyou are here �271XHTML is becoming the language of choice for browsers on mobile devices and cell phones. In the future, XHTML is going to let us pick and choose the parts of the language we want to support in each mobile device, as well.Junior software developer.XHTML can be rea...

  • Page 310

    272 Chapter 7The XHTML 1.0 checklist❏ Change your DOCTYPE to Strict XHTML. Or, you can use Transitional XHTML if you’re still using Transitional HTML.❏ Add the xmlns, lang, and xml:lang attributes to your <html> opening tag.❏ The <html> tag must be the first tag after...

  • Page 311

    moving to xhtmlyou are here �273If my HTML is transitional 4.01, and I want to switch to XHTML strict, then I have a little more work to do, right?HTML 4.01 Strict and XHTML 1.0 Strict are basically the same. So, going from transitional HTML 4.01 to HTML Strict or XHTML Strict is about the sam...

  • Page 312

    274 Chapter 71Change your DOCTYPE to XHTML 1.0 Strict.You already know all about DOCTYPEs and you’re used to seeing the HTML 4.01 Strict document type. Well, there’s also a document type for XHTML 1.0 Strict, and you need to change your DOCTYPE to use it instead. Here’s what it looks like:&...

  • Page 313

    moving to xhtmlyou are here �2753All empty tags should end in “ />”, not “>”.This is the final, and most bizarre step of the HTML to XHTML 1.0 transformation. But it’s not so mysterious if you know the background.We’ve told you XHTML is stricter than HTML, and one area where i...

  • Page 314

    276 Chapter 7Q: Can you explain the xmlns attribute a bit more; I feel like I missed something.A: You’re not the only one. This is one of the most confusing parts of XML. Okay, it works like this: lots of people can create XML languages (personally, we say get out and see the world, but some p...

  • Page 315

    moving to xhtmlyou are here �277ValidatorWe’re totally up on the new XHTML standards and ready to enforce them. Validation: it’s not just for HTMLAfter Chapter 6, you’re an expert at using the W3C validator, and you’ll find the validator is up to date and ready to validate your XHTML. Y...

  • Page 316

    278 Chapter 7You didn’t think we’d let you off the hook without validating your XHTML did you? Validate the “lounge.html” file in the “chapter7/lounge” folder, and the “journal.html” file in the “chapter7/journal/” folder (the one you turned into XHTML a couple of pages ago) ...

  • Page 317

    moving to xhtmlyou are here �279XHTML does seem like a good thing, and moving from HTML 4.01 Strict is almost trivial, so, why not just go for it? But, before you do, you should know that XHTML is still a little ahead of the curve in terms of browser support. So, while you can use XHTML today...

  • Page 318

    280 Chapter 7Tonight’s talk: HTML and XHTML ask for your support.HTMLXHTMLI’m certainly glad to have the opportunity to persuade you to stick with me: HTML 4.01. I’m going to be around a long time, have no worries there.HTML, face it, you’re yesterday’s news. The standards guys have al...

  • Page 319

    moving to xhtmlyou are here �281HTMLXHTMLHey, that’s a good thing. The designers of XHTML knew that not all browsers would support XHTML, so they made it backwards compatible. In other words, you can move to XHTML today, and still have it all work even on older browsers.You’re forgetting a ...

  • Page 320

    282 Chapter 7HTML or XHTML? The choice is yours...Do any of the advantages of XHTML matter to you? Are you translating existing XML into HTML for the Web? Are you working on pages that you need to display well on mobile devices? Are some of the newer XHTML technologies going to be important to yo...

  • Page 321

    moving to xhtmlyou are here �283Micro XHTMLcrossIt’s been a small chapter (aren’t you glad!). Here’s a Micro XHTMLcross for you.123456789Across1. Used to double check your XHTML.6. XHTML is this type of markup.8. Use these for special characters.9. We invented an XML language for these.Do...

  • Page 322

    284 Chapter 7Micro XHTMLcross SolutionIt’s been a small chapter (aren’t you glad!). Here’s a Micro XHTMLCross for you.V1ALID A2T ORTTE3RC4XL5ILTOBOEX6M7LWUSNOE8NTITIESBRENIICSGBLALR9ECIPESEEAcross1. Used to double check your XHTML. [validator] 6. XHTML is this type of markup. [xml] 8. Use t...

  • Page 323

    this is a new chapter285Adding a Little Style8 getting started with CSSI was told there’d be CSS in this book. So far you’ve been concentrating on learning XHTML to create the structure of your Web pages. But as you can see, the browser’s idea of style leaves a lot to be desired. Sure, ...

  • Page 324

    286 Chapter 8You’re not in Kansas anymoreYou’ve been a good sport learning about markup and structure and validation and proper syntax and nesting and compliance, but now you get to really start having some fun by styling your pages. But no worries, all those XHTML pushups you’ve been doing...

  • Page 325

    getting started with cssyou are here �287www.freepdf-books.com

  • Page 326

    288 Chapter 8Overheard on Webville’s “Trading Spaces”Okay, let’s get some design in this place...bedroom { drapes: blue; carpet: wool shag;}...and this bathroom needs some serious help!bathroom { tile: 1in white; drapes: pink;}Not up on the latest reality TV? No problem, h...

  • Page 327

    getting started with cssyou are here �289Using CSS with XHTMLWe’re sure CSS has a bright future in the home design category, but let’s get back to XHTML. XHTML doesn’t have rooms, but it does have elements and those elements are going to be the locations that we’re styling. Want to pai...

  • Page 328

    290 Chapter 8Say you have an <em> element inside a paragraph. If you change the background color of the paragraph, do you think you also have to change the background of the <em> element so it matches the background color of the paragraph?brainpower?Q: Does every <p> element hav...

  • Page 329

    getting started with cssyou are here �291Getting CSS into your XHTMLOkay, you know a little about CSS syntax now. You know how to select an element and then write a rule with properties and values inside it. But you still need to get this CSS into some XHTML. First, we need some XHTML to put i...

  • Page 330

    292 Chapter 8Adding style to the loungeNow that you’ve got the <style> element in your XHTML, you’re going to add some style to the Lounge to get a feel for writing CSS. This design probably won’t win you any “design awards,” but you gotta start somewhere.The first thing we’re g...

  • Page 331

    getting started with cssyou are here �293Cruising with style: the test driveInstead of setting the color, what if you set background-color of the <p> elements to maroon instead? How would it change the way the browser displays the page?Here’s our new maroon paragraph text. Go ahead an...

  • Page 332

    294 Chapter 8How about a different font for the Lounge headings? Make them really stand out. I’m seeing big, clean, gray...Style the headingh1 { font-family: sans-serif; color: gray;}h2 { font-family: sans-serif; color: gray;}p { color: maroon;}Now let...

  • Page 333

    getting started with cssyou are here �295Let’s put a line under the welcome message tooLet’s touch up the welcome heading a bit more. How about a line under it? That should set the main heading apart visually and add a nice touch. Here’s the property we’ll use to do that:border-botto...

  • Page 334

    296 Chapter 8We have the technology: specifying a second rule, just for the <h1>We don’t have to split the “h1, h2” rule up, we just need to add another rule that is only for “h1” and add the border style to it.h1, h2 { font-family: sans-serif; color: gray;...

  • Page 335

    getting started with cssyou are here �297So, how do selections really work? h1 { color: gray; }You’ve seen how to select an element to style it, like this:Or, how to select more than one element, like this:You’re going to see that CSS allows you to specify all kinds of selectors th...

  • Page 336

    298 Chapter 8bodyhtmlheadstylemetah1ph2ppimgaemMarkup MagnetsRemember drawing the diagram of HTML elements in Chapter 3? You’re going to do that again for the Lounge’s main page. Below, you’ll find all the element magnets you need to complete the diagram. Using the Lounge’s XHTML (on th...

  • Page 337

    getting started with cssyou are here �299<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”> <head> <meta http-equiv=“Con...

  • Page 338

    300 Chapter 8bodyhtmlh1h2ppimgaemaSeeing selectors visuallyh1 { font-family: sans-serif; }Let’s take some selectors and see how they map to the tree you just created. Here’s how this “h1” selector maps to the graph: This selector matches any <h1> elements in the page, and there...

  • Page 339

    getting started with cssyou are here �301Color in the elements that are selected by these selectors:p, h2 { font-family: sans-serif; }p, em { font-family: sans-serif; }bodyhtmlh1h2ppimgaemapbodyhtmlh1h2ppimgaemapSharpen your pencilwww.freepdf-books.com

  • Page 340

    302 Chapter 8The Case of Brute Force versus StyleWhen we last left RadWebDesign in Chapter 4, they had just blown the corporate demo and lost RobotsRUs’ business. CorrectWebDesign was put in charge of the entire RobotsRUs site and got to work getting everything nailed down before the site launc...

  • Page 341

    getting started with cssyou are here �303Getting the Lounge style into the elixirs and directions pagesIt’s great that we’ve added all this style to “lounge.html”, but what about “elixir.html” and “directions.html”? They need to have a look that is consistent with the main page...

  • Page 342

    304 Chapter 8Creating the “lounge.css” fileYou’re going to create a file called “lounge.css” to contain the style rules for all your Head First Lounge pages. To do that, create a new text file named “lounge.css” in your text editor. h1, h2 { font-family: sans-ser...

  • Page 343

    getting started with cssyou are here �305Linking from “lounge.html” to the external style sheetNow we need a way to tell the browser that it should style this page with the styles in the external style sheet. We can do that with an XHTML element called <link>. Here’s how you use the...

  • Page 344

    306 Chapter 8Linking from “elixir.html” and “directions.html” to the external style sheetNow you’re going to link the “elixir.html” and “directions.html” files just as you did with “lounge.html”. The only thing you need to remember is that “elixir.html” is in the “bev...

  • Page 345

    getting started with cssyou are here �307Test driving the entire lounge...Save each of these files and then open “lounge.html” with the browser. You should see no changes in its style, even though the styles are now coming from an external file. Now click on the “elixirs” and “detaile...

  • Page 346

    308 Chapter 8The Case of Brute Force versus StyleSo, how did RadWebDesign become Web page superheroes? Or, maybe we should first ask how the “do no wrong” CorrectWebDesign firm flubbed things up this time? The root of the problem was that CorrectWebDesign was creating the RobotsRUs pages usin...

  • Page 347

    getting started with cssyou are here �309Now that you’ve got one external style file (or “style sheet”), use it to change all the paragraph fonts to “sans-serif” to match the headings. Remember, the property to change the font style is “font-family”, and the value for sans-serif f...

  • Page 348

    310 Chapter 8SolutionJust add a font-family property to your paragraph rule in the “lounge.css” file.I’m wondering if that is really the best solution. Why are we specifying the font-family for EACH element? What if someone added a <blockquote> to the page - would we have to then add...

  • Page 349

    getting started with cssyou are here �311It’s time to talk about your inheritance...bodyhtmlh1h2ppimgaemapDid you notice when you added the font-family property to your “p” selector that it also affected the font family of the elements inside the <p> element? Let’s take a closer ...

  • Page 350

    312 Chapter 8What if we move the font up the family tree?bodyhtmlh1h2aimgappempWe’re going to move the font-family property from the paragraphs and headings to the body. If most elements inherit the font-family property, what if we move it up to the <body> element? That should have the ef...

  • Page 351

    getting started with cssyou are here �313Test drive your new CSSAs usual, go ahead and make these changes in the “lounge.css” style sheet, save, and reload the “lounge.html” page. You shouldn’t expect any changes, because the style is the same. It’s just coming from a different rul...

  • Page 352

    314 Chapter 8Overriding inheritanceBy moving the font-family property up into the body, you’ve set that font style for the entire page. But what if you don’t want the sans-serif font on every element? For instance, you could decide that you want <em> elements to use the serif font ins...

  • Page 353

    getting started with cssyou are here �315Test driveAdd a rule for the <em> element to your CSS with a font-family property value of serif, and reload your “lounge.html” page:Notice that the “Dance Dance Revolution” text, which is the text in the <em> element, is now a serif ...

  • Page 354

    316 Chapter 8I was thinking it would be cool to have the text below each elixir match the color of the elixir. Can you do that?Green text.Blue text.Purple text.Red text... oh, we don’t need to change this one.Can you style each of these paragraphs separately so that the color of the text matche...

  • Page 355

    getting started with cssyou are here �317Adding a class to “elixir.html”Open up the “elixir.html” file and locate the “Green Tea Cooler” paragraph. This is the text we want to change to green. All you’re going to do is add the <p> element to a class called greentea. Here’...

  • Page 356

    318 Chapter 8Creating a selector for the class body { font-family: sans-serif; } h1, h2 { color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; } p.greentea { ...

  • Page 357

    getting started with cssyou are here �319Your turn: add two classes, “raspberry” and “blueberry”, to the correct paragraphs in “elixir.html”, and then write the styles to color the text blue and purple, respectively. The property value for raspberry is “blue” and for blueberry i...

  • Page 358

    320 Chapter 8Taking classes further...You’ve already written one rule that uses the greentea class to change any paragraph in the class to the color “green”: p.greentea { color: green; }But what if you wanted to do the same to all <blockquote>s? Then you could do th...

  • Page 359

    getting started with cssyou are here �321Cool! Yes, that works. One more question... you said being in a class is like being in a club. Well, I can join many clubs. So, can an element be in more than one class?It’s easy to put an element into more than one class. Say you want to specify a &...

  • Page 360

    322 Chapter 8The world’s smallest & fastest guide to how styles are appliedElements and document trees and style rules and classes... it can get downright confusing. How does all this stuff come together so that you know which styles are being applied to which elements? As we said, to fully...

  • Page 361

    getting started with cssyou are here �323And if we still don’t have a clear winner?So, if you had an element that belonged only to the greentea class there would be an obvious winner: the p.greentea selector is the most specific, so the text would be green. But you have an element that belong...

  • Page 362

    324 Chapter 8Did you see that? I’m like Houdini! I broke right out of your <style> element and into my own file. And you said in Chapter 1 that I’d never escape.Have to link me in? Come on; you know your pages wouldn’t cut it without my styling.If you were paying attention in this ch...

  • Page 363

    getting started with cssyou are here �325You have to admit XHTML is kinda clunky, but that’s what you get when you’re related to an early ’90s technology.Are you kidding? I’m very expressive. I can select just the elements I want, and then describe exactly how I want them styled. And ...

  • Page 364

    326 Chapter 8Who gets the inheritance?Sniff, sniff; the <body> element has gone to that great browser in the sky. But he left behind a lot of descendants and a big inheritance of color “green”. Below you’ll find his family tree. Mark all the descendants that inherit the <body> e...

  • Page 365

    getting started with cssyou are here �327Below, you’ll find the CSS file “style.css”, with some errors in it. Your job is to play like you’re the browser and locate all the errors. After you’ve done the exercise look at the end of the chapter to see if you caught all the errors.BE the...

  • Page 366

    328 Chapter 8The exercise got me thinking... is there a way to validate CSS like there is with HTML and XHTML?Those W3C boys and girls aren’t just sitting around on their butts, they’ve been working hard. You can find their CSS validator at:http://jigsaw.w3.org/css-validator/Type that URL in ...

  • Page 367

    getting started with cssyou are here �329Making sure the Lounge CSS validatesBefore you wrap up this chapter, wouldn’t you feel a lot better if all that Head First Lounge CSS validated? Sure you would. Use whichever method you want to get your CSS to the W3C. If you have your CSS on a server...

  • Page 368

    330 Chapter 8CSS has a lot of style properties. You’ll see quite a few of these in the rest of this book, but have a quick look now to get an idea of all the aspects of style you can control with CSS.font-weightlist-stylemarginborderbackground-imageletter-spacingThis property controls the weigh...

  • Page 369

    getting started with cssyou are here �331CSS contains simple statements, called rules. nEach rule provides the style for a selection of nXHTML elements.A typical rule consists of a selector along with none or more properties and values.The selector nspecifies which elements the rule applies ...

  • Page 370

    332 Chapter 8XHTMLcrossHere are some clues with mental twist and turns that will help you burn alternative routes to CSS right into your brain!12345678910111213Across1. Defines a group of elements.2. Ornamental part of some fonts.4. Styles are defined in these.7. Fonts without serifs.9. Each rule...

  • Page 371

    getting started with cssyou are here �333bodyhtmltitleheadstylemetah1ph2ppimgaemaMarkup Magnets SolutionRemember drawing the diagram of XHTML elements in Chapter 3? You did that again for the Lounge’s main page. Here’s the answer:titleheadbodyhtmlpqLike this.www.freepdf-books.com

  • Page 372

    334 Chapter 8The selected elements are colored:bodyhtmlh1h2ppimgaemapbodyhtmlh1h2ppimgaemapSolutionSharpen your pencilp, h2 { font-family: sans-serif; }p, em { font-family: sans-serif; }exercise solutionswww.freepdf-books.com

  • Page 373

    getting started with cssyou are here �335Your turn: add two classes, “raspberry” and “blueberry” to the correct paragraphs in “elixir.html” and then write the styles to color the text blue and purple respectively. The property value for raspberry is “blue” and for blueberry is ...

  • Page 374

    336 Chapter 8<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”> <head> <meta http-equiv=“Content-Type” content=“text/h...

  • Page 375

    getting started with cssyou are here �337Who gets the inheritance?bodyh1ph2blockquoteemph2apempemaaimgExercise solutionsh1 and h2 get the inheritance because they don’t have a color property, so they inherit their color from body. Lucky them!There are no CSS rules for blockquote, so blockquo...

  • Page 376

    338 Chapter 8Below, you’ll find a CSS file with some errors in it. Your job is to play like you’re the browser and locate all the errors. Did you find them all?BE the Browser<style>body { background-color: whiteh1, { gray; font-family: sans-serif;}h2, p { color: }<em> ...

  • Page 377

    getting started with cssyou are here �339C1L A S SHS2ER3IFITAR4ULE SC5F6YDDOOLWRLNEEEOTBS7A N S SERIF-L8DTFOEYV9AL U E SSLMNI10N H ERIT A N CEIGGSLEL11I N KHYGS12ELECT O RUEYT13R A DI N G SPA CE SAcross1. Defines a group of elements. [class] 2. Ornamental part of some fonts. [serif] 4. Styles a...

  • Page 378

    www.freepdf-books.com

  • Page 379

    this is a new chapter341Expanding your9 styling with fonts and colorsVocabularyYour CSS language lessons are coming along nicely. You already have the basics of CSS down and you know how to create CSS rules to select and specify the style of an element. Now it’s time to build your vocabulary,...

  • Page 380

    342 Chapter 9A lot of the CSS properties are dedicated to helping you style your text. Using CSS, you can control typeface, style, color, and even the decorations that are put on your text, and we’re going to cover all these in this chapter. We’ll start by exploring the actual fonts that are ...

  • Page 381

    styling with fonts and colorsyou are here �343YellowOrangeMaroonTealRedPurpleOliveNavyLimeAquaGreenGrayFuchsiaBlueBlackWhiteSilverbody { color: silver;}Add color to your text with the color property.You can change your text color with the color property. To do that, it helps to know a little ab...

  • Page 382

    344 Chapter 9What is a font family anyway?You’ve already come across the font-family property, and so far you’ve always specified a value of “sans-serif ”. You can get a lot more creative than that with the font-family property, but it helps to know what a font family is first. Here’s a...

  • Page 383

    styling with fonts and colorsyou are here �345CourierMonospace FamilyComic Sans Apple ChanceryCursive FamilyThe Cursive family includes fonts that look handwritten. You’ll sometimes see these fonts used in headings.The Monospace family is made up of fonts that have constant width characters. ...

  • Page 384

    346 Chapter 9Font MagnetsYour job is to help the fictional fonts below find their way home to their own font family. Move each fridge magnet on the left into the correct font family on the right. Check your answers before you move on. Review the font family descriptions on the previous pages if y...

  • Page 385

    styling with fonts and colorsyou are here �347Okay, so there are a lot of good fonts out there from several font families. How do you get them in your pages? Well, you’ve already had a peek at the font-family property in the last chapter, when you specified a font-family of “sans-serif ” ...

  • Page 386

    348 Chapter 9Dusting off Tony’s JournalNow that you know how to specify fonts, let’s take another look at Tony’s Segway’n USA page and give it a different look. We’ll be making some small, incremental changes to the text styles in Tony’s page and while no single change is going to loo...

  • Page 387

    styling with fonts and colorsyou are here �349body { font-family: Verdana, Geneva, Arial, sans-serif;}Getting Tony a new font-family<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=“http://www.w3.org...

  • Page 388

    350 Chapter 9Test driving Tony’s new fontsThe font definitely gives Tony’s Web page a new look. The headings now have a cleaner look without the serifs on the letters, although they still look a tad large on the page.Open the page with the new CSS in the browser and you should see we’ve no...

  • Page 389

    styling with fonts and colorsyou are here �351How do I deal with everyone having different fonts?font-family: Verdana, Geneva, Arial, sans-serif;The unfortunate thing about fonts is that you can’t control what fonts are on your users’ computers. The best you can do is to create a list of fo...

  • Page 390

    352 Chapter 9font-size: 14px;You can specify your font size in pixels, just like the pixel dimensions you used for images in Chapter 5. When you specify font size in pixels, you’re telling the browser how many pixels tall the letters should be. In CSS you specify pixels with a number followed b...

  • Page 391

    styling with fonts and colorsyou are here �353You can also specify font sizes using “em”, which, like percentage, is another relative unit of measure. With em you don’t specify a percentage; instead you specify a scaling factor. Here’s how you use em:font-size: 1.2em;This says that the ...

  • Page 392

    354 Chapter 9There’s one more way to specify font sizes: keywords. You can specify a font size as xx-small, x-small, small, medium, large, x-large, or xx-large and the browser will translate these keywords into pixel values using defaults that are defined in the browser.keywordsThis is typicall...

  • Page 393

    styling with fonts and colorsyou are here �355body is smallh1 is 150% of body p is smallh2 is 120% of bodybody { font-size: small; }h1 { font-size: 150%; }h2 { font-size: 120%; }body is largeh1 is 150% of body p is largeh2 is 120% of bodyWe’ve set <h2>’s font size to 120% of its paren...

  • Page 394

    356 Chapter 9Let’s make these changes to the font sizes in Tony’s Web pagebody { font-family: Verdana, Geneva, Arial, sans-serif; font-size: small;}h1 { font-size: 170%;}h2 { font-size: 130%;}It’s time to try these font sizes in Tony’s Web page. Add the new properties to the ...

  • Page 395

    styling with fonts and colorsyou are here �357Test driving the font sizesThe body text is a tad smaller. The default body text font size is usually 16px, although it does depend on the browser. But it’s still easily readable at the “small” size, which is probably about 12px.The <h2&g...

  • Page 396

    358 Chapter 9Q: So, by defining a font size in the <body> element, I’m somehow defining a default size for the page? How does that work?A: Yes, that’s right. By setting a font size in your <body> element, you can then define the other font sizes of your elements in relation to the...

  • Page 397

    styling with fonts and colorsyou are here �359Changing a font’s weightThe font-weight property allows you to control how bold the text looks. As you know, bold text looks darker than normal text and tends to be a bit fatter too. You can make any element use bold text by setting the font-wei...

  • Page 398

    360 Chapter 9Test drive the normal weight headingsbody { font-family: Verdana, Geneva, Arial, sans-serif; font-size: small;}h1, h2 { font-weight: normal;}h1 { font-size: 170%;}h2 { font-size: 130%;}Here’s what your CSS should look like after you make the change to use a normal font-weight for b...

  • Page 399

    styling with fonts and colorsyou are here �361Adding style to your fontsYou’re familiar with italic text, right? Italic text is slanted, and sometimes has extra curly serifs. For example, compare these two styles:obliquenot obliqueitalicnot italicThe italic text is slanted to the right and ...

  • Page 400

    362 Chapter 9Styling Tony’s quotes with a little italicNow we’re going to use the font-style property to add a little pizazz to Tony’s quotes. Remember the Burma Shave slogan in the <blockquote> element? We’re going to change the slogan to italic style to set it off from the rest of...

  • Page 401

    styling with fonts and colorsyou are here �363Cool. Love the new look. Hey, how about a little color in those fonts? Say, ummm... the color of my shirt? I love orange!You’d think we could just tell you there was a color property and send you on your way to use it. But, unlike font sizes or w...

  • Page 402

    364 Chapter 9How do Web colors work?100% Red100% Blue100% Green60% Red60% Blue60% GreenYou’re starting to see that there are lots of places you can add color to your pages: background colors, border colors, and soon, font colors as well. But, how do colors on a computer actually work? Let’s ...

  • Page 403

    styling with fonts and colorsyou are here �36580% Red0% Blue40% GreenOn a computer screen, if 0% blue is added, then blue doesn’t add anything to the color.Mixing 80% red and 40% green we get a nice orange color.Or, say you mix together 80% red and 40% green. You’d expect an orange color, r...

  • Page 404

    366 Chapter 9Why do I need to know all this “color theory”? Can’t I just specify my colors by name? Like “red”, “green”, or “blue”? That’s what we’ve been doing so far.Having seventeen colors in your palette gets old pretty quickly and really limits the expressiveness of you...

  • Page 405

    styling with fonts and colorsyou are here �367How do I specify Web colors? Let me count the ways...CSS gives you a few ways to specify colors. You can specify the name of a color, specify a color in terms of its relative percentages in red, green and blue, or you can specify your color using a ...

  • Page 406

    368 Chapter 9Specify color in red, green and blue valuesYou can also specify a color as the amount of red, green, and blue. So, say you wanted to specify the orange color we looked at a couple of pages back, which consisted of 80% red, 40% green, and 0% blue. Here’s how you do that:body { backg...

  • Page 407

    styling with fonts and colorsyou are here �369Specify color using hex codesNow let’s tackle those funky looking hex codes. Here’s the secret to them: each set of two digits of a hex code just represents the red, green, and blue component of the color. So the first two digits represent the r...

  • Page 408

    370 Chapter 91234567 89ABCDE10 11F121314150The t wo minute guide to hex codesThe first thing you need to know about hex codes is that they aren’t based on ten digits (0 to 9) – they’re based on 16 digits (0 to F). Here’s how hex digits work:Using hex, you only need a single digit to count...

  • Page 409

    styling with fonts and colorsyou are here �371Convert each hex number into its decimal equivalent.Now that you have the components separated you can compute the value for each from 0 to 255. Let’s start with the hex number for the red component:Step two:Take the right-most number and write do...

  • Page 410

    372 Chapter 9How to find Web colors80% Red0% Blue40% GreenPutting it all togetherYou’ve now got a few different ways to specify colors. Take our orange color that is made up of 80% red, 40% green, and 0% blue. In CSS we could specify this color in any of these ways:body { background-color: rgb...

  • Page 411

    styling with fonts and colorsyou are here �373You’ll also find some useful color charts on the Web. These charts typically display Web colors that are arranged according to a number of different criteria with their corresponding hex code. Using these colors is as easy as choosing the colors y...

  • Page 412

    374 Chapter 9Dr. Evel’s master plans have been locked away inside his personal safe and you’ve just received a tip that he encodes the combination in hex code. In fact, so he won’t forget the combination, he makes the hex code the background color of his home page. Your job is to crack his ...

  • Page 413

    styling with fonts and colorsyou are here �375body { font-family: Verdana, Geneva, Arial, sans-serif; font-size: small;}h1, h2 { font-weight: normal; color: #cc6600; text-decoration: underline;}h1 { font-size: 170%;}h2 { font-size: 130%;}blockquote { font-style: italic;}We’re going to ma...

  • Page 414

    376 Chapter 9What do all these colors have in common? Try each one in a Web page, say as a font color, or use your photo-editing application’s color picker to determine what colors they are by entering the hex code into the dialog box directly. #111111#222222#333333#444444#555555#666666#777777...

  • Page 415

    styling with fonts and colorsyou are here �377Everything you ever wanted to know about text-decorations in less than one pageem { text-decoration: line-through;}Text decorations allow you to add decorative effects to your text like underlines, overlines, line-throughs (also known as a strike-th...

  • Page 416

    378 Chapter 9Removing the underline...Let’s get rid of that confusing underline and instead add a nice bottom border like we did in the Lounge. To do that, open your “journal.css” file and make these changes to the combined “h1, h2” rule:h1, h2 { font-weight: normal; color: #cc6600; ...

  • Page 417

    styling with fonts and colorsyou are here �379� CSS gives you lots of control over the look of your fonts, including properties like font-family, font-weight, font-size, and font-style.� A font-family is a set of fonts that share common characteristics.� The font families for the Web are ...

  • Page 418

    380 Chapter 9XHTMLcrossYou’ve absorbed a lot in this chapter: fonts, color, weights, and styles. It’s time to do another crossword and let it all sink in.12345678910111213Across3. Hex codes use this many different digits.4. Colors like #111111 through #EEEEEE, are all shades of _____.5. Simil...

  • Page 419

    styling with fonts and colorsyou are here �381Markup Magnets SolutionsYour job is to help the fictional fonts below find their way home to their own font family. Move each fridge magnet on the left into the correct font family on the right. Check your answers before you move on. Here’s the so...

  • Page 420

    382 Chapter 9Crack the Safe Solutionbody { background-color: #b817e0;}rightleftright(11 * 16) + 8 = 184(1 * 16) + 7 = 23(14 * 16) + 0 = 224Dr. Evel’s master plans have been locked away inside his personal safe and you’ve just received a tip that he encodes the combination in hex code. In fact...

  • Page 421

    styling with fonts and colorsyou are here �383#111111#222222#333333#444444#555555#666666#777777#888888#999999#aaaaaa#bbbbbb#cccccc#dddddd#eeeeeeWhat do all these colors have in common? You can try each one in a Web page, or use the color picker to determine what colors they are, by entering th...

  • Page 422

    www.freepdf-books.com

  • Page 423

    this is a new chapter38510 the box modelGetting IntimateTo do advanced Web construction you really need to know your building materials. In this chapter we’re going to take a close look at our building materials: the XHTML elements. We’re going to put block and inline elements right under ...

  • Page 424

    386 Chapter 10The lounge gets an upgradeYou’ve come a long way in nine chapters, and so has the Head First Lounge. In fact, over the next two chapters, we’re giving it a total upgrade with all new content for the main page and restyling it from scratch. And, just to entice you, we’re going...

  • Page 425

    the box modelyou are here �387Not too shabby. Now the Lounge design might be a tad on the, well, “ultra-stylish” side for you, but hey, it is a lounge. And we’re sure that you can see this design is starting to look downright sophisticated – just think what the same techniques could d...

  • Page 426

    388 Chapter 10123Starting with a few simple upgradesNow you’re all ready to start styling the lounge. Let’s add a few rules to your CSS just to get some basics out of the way – like the font family, size, and some color – that will immediately improve the lounge (and give you a good revi...

  • Page 427

    the box modelyou are here �389A very quick test driveLet’s do a quick test drive just to see how these styles affect the page. Make sure you’ve made all the changes; then save, and test.Headings are now sans-serif and a color that matches the logo, creating a theme for the page.Paragraph te...

  • Page 428

    390 Chapter 10Checking out the new line heightAs you might have guessed, the line-height property allows you to specify the amount of vertical space between each line of your text. Like other font-related properties, you can specify the line height in pixels, or using an em or percent value that...

  • Page 429

    the box modelyou are here �391Getting ready for some major renovationsAfter only a few pages of this chapter, you already have a ton of text style on the new lounge. Congrats!Now things are going to get really interesting. We’re going to move from changing simple properties of elements, like ...

  • Page 430

    392 Chapter 10A closer look at the box modelWhat is the content area?Every element starts with some content, like text or an image, and this content is placed inside a box that is just big enough to contain it. Notice that the content area has no whitespace between the content and the edge of thi...

  • Page 431

    the box modelyou are here �393Elements can have an optional border around them. The border surrounds the padding and, because it takes the form of a line around your content, borders provide visual separation between your content and other elements on the same page. Borders can be various width...

  • Page 432

    394 Chapter 10What you can do to boxesThe box model may look simple with just the content, some padding, a border, and margins. But when you combine these all together there are endless ways you can determine the layout of an element with its internal spacing (padding) and the spacing around it (...

  • Page 433

    the box modelyou are here �395Our guarantee: at the lounge, we’re committed to providing you, our guest, with an exceptional experience every time you visit. Whether you’re just stopping by to check in on email over an elixir, or are here for an out-of-the-ordinary dinner, you’ll find our...

  • Page 434

    396 Chapter 10Q: It seems like knowing this box stuff would be important if I were someone creating the software for a Web browser, but how is this going to help me make better Web pages?A: To go beyond simple Web pages that use the browser’s default layout, you need to be able to control how e...

  • Page 435

    the box modelyou are here �397Meanwhile back at the lounge...We do have our work cut out for us on the lounge page, so let’s get back to it. Did you notice the blue, stylized paragraph when you looked at the final version of the lounge page in the beginning of the chapter? This paragraph cont...

  • Page 436

    398 Chapter 10See if you can identify the padding, border and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom):Before going on to the next page, think about how you might use padding, borders, and margins to transform an ordinary paragraph into the “gua...

  • Page 437

    the box modelyou are here �399<p class=”guarantee”> Our guarantee: at the lounge, we’re committed to providing you, our guest, with an exceptional experience every time you visit. Whether you’re just stopping by to check in on email over an elixir, or are here for...

  • Page 438

    400 Chapter 10Our guarantee: at the lounge, we’re committed to providing you, our guest, with an exceptional experience every time you visit. Whether you’re just stopping by to check in on email over an elixir, or are here for an out-of-the-ordinary dinner, you’ll find our knowledgeable ser...

  • Page 439

    the box modelyou are here �401Our guarantee: at the lounge, we’re committed to providing you, our guest, with an exceptional experience every time you visit. Whether you’re just stopping by to check in on email over an elixir, or are here for an out-of-the-ordinary dinner, you’ll find our...

  • Page 440

    402 Chapter 10Now you can see 25 pixels of space between the edge of the text content and the border.Notice that the background color is under both the content and the padding. But it doesn’t extend into the margin.Now let’s add some marginMargins are easy to add using CSS. Like padding, you ...

  • Page 441

    the box modelyou are here �403Now we have 30 pixels of margin on all sides.A test drive with the marginWhen you reload the lounge page, you’ll see the paragraph is really beginning to stand out on the page. With the margins in place, the paragraph looks inset from the rest of the text, and th...

  • Page 442

    404 Chapter 10Adding a background imageYou’re almost there. What’s left? We still need to get the white “guarantee star” graphic into the paragraph and work on the border, which is a solid, black line. Let’s tackle the image first.If you look in the “chapter10/lounge/images” folder...

  • Page 443

    the box modelyou are here �405Wait a sec, it seems like we have two ways to put images on a page. Is background-image a replacement for the <img> element?No, the background-image property has a very specific purpose, which is to set the background image of an element. It isn’t for placi...

  • Page 444

    406 Chapter 10Test driving the background imageWell, this is certainly an interesting test drive – we have a background image, but it appears to be repeated many times. Let’s take a closer look at how to use CSS background images, and then you’ll be able to fix this.Here’s the guarantee ...

  • Page 445

    the box modelyou are here �407The background-position property sets the position of the image and can be specified in pixels, or as a percentage, or by using keywords like top, left, right, bottom, and center.background-position: top left;Places the image in the top, left of the element.There a...

  • Page 446

    408 Chapter 10Another test drive of the background imageHere we go again. This time, it looks like we’re much closer to what we want. But, since this is a background image, the text can sit on top of it. How do we fix this? That’s exactly what padding is for! Padding allows you to add visua...

  • Page 447

    the box modelyou are here �409Are we there yet?Make sure you save your changes and reload the page. You should see more padding on the left side of the paragraph, and the text is now positioned well with respect to the guarantee star. This is a great example of where you use padding instead of ...

  • Page 448

    410 Chapter 10A t wo-minute guide to bordersThere’s only one thing left to do to perfect the guarantee paragraph: add a better border. Before you do, take a look at all the different ways you can control the border of an element.The solid style is just what it sounds like, a solid border.The d...

  • Page 449

    the box modelyou are here �411thinmediumthick1px2px3px4px5px6pxborder-top-colorborder-top-styleborder-top-widthborder-right-colorborder-right-styleborder-right-widthborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-left-colorborder-left-styleborder-left-widthBorder WidthThe border...

  • Page 450

    412 Chapter 10Browsers can have different default sizes for the keywords thin, medium, and thick, so if the size of your border is really important to you, consider using pixel sizes instead.Browsers don’t always agree on the size of thin, medium, and thick.Watch it!Border fit and finishIt’s ...

  • Page 451

    the box modelyou are here �413Nice! I can’t wait to see the entire page remodeled. Take a break and have an iced chai on me!Congratulations!Bravo! You’ve taken an ordinary HTML paragraph and transformed it into something a lot more appealing and stylish using only fifteen lines of CSS.It wa...

  • Page 452

    414 Chapter 10Welcome back, and good timing. We’re just about to listen in on an interview with an XHTML class...This week’s interview: are classes always right? The Class ExposedHead First: Hey, Class; you know we’ve been making good use of you, but we still don’t know a lot about you.C...

  • Page 453

    the box modelyou are here �415Head First: An id attribute? I thought those were for those destination anchors, like in Chapter 4?Class: ids have lots of uses. They’re really just unique identifiers for elements.Head First: Can you tell us a little more about id attributes? This is all news...

  • Page 454

    416 Chapter 10The id attributethere are noDumb QuestionsQ: What’s the big deal? Why do I need an id just to prove something is unique on the page? I could use a class exactly the same way, right?A: Well, you can always “simulate” a unique id with a class, but there are many reasons not to....

  • Page 455

    the box modelyou are here �417But how do I use id in CSS?You select an element with an id almost exactly like you select an element with a class. To quickly review: if you have a class called “specials”, there are a couple of ways you can select elements using this class. You could select j...

  • Page 456

    418 Chapter 10Using an id in the loungeOur “guarantee paragraph” really should have an id since it’s intended to be used just once in the page. While we should have designed it that way from the beginning, making the change is going to be quite simple.Step One: change the class attribute to...

  • Page 457

    the box modelyou are here �419Step Three: save your changes and reload the page.Well, everything should look EXACTLY the same. But, don’t you feel much better now that everything is as it should be?there are noDumb QuestionsQ: So why did you make the selector #guarantee rather than p#guarante...

  • Page 458

    420 Chapter 10Remixing style sheetsBefore we wind this chapter down, let’s have a little fun remixing some style sheets. So far you’ve been using only one style sheet. Well, who ever said you can’t use more than one style sheet? You can specify a whole set of style sheets to be used with an...

  • Page 459

    the box modelyou are here �421<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en” > <head> <meta http-equiv=“Content-Type...

  • Page 460

    422 Chapter 10Style sheets - they’re not just for desktop browsers anymore...<link type=”text/css” rel=”stylesheet” href=”lounge-screen.css” media=”screen” />The media attribute allows you to specify the type of device this style sheet is for.Here we’re specifying that t...

  • Page 461

    the box modelyou are here �423there are noDumb QuestionsQ: That’s pretty cool. So I can set up different style sheets for different devices?A: Yes, you can set up several style sheets and then link to them all in your XHTML. It’s the browser’s job to grab the right style sheet based on th...

  • Page 462

    424 Chapter 10CSS uses a nbox model to control how elements are displayed.Boxes consist of the content area and optional npadding, border, and margin.The content area contains the content of the nelement.The padding is used to create visual space naround the content area.The border surrounds ...

  • Page 463

    the box modelyou are here �425You’re really expanding your HTML & CSS skills. Strengthen those neural connections by doing a crossword. All the answers come from this chapter.123456789101112Across2. CSS sees every element as a _____.4. The preferred font-style used in the guarantee paragr...

  • Page 464

    426 Chapter 10L1B2O XR3ELG4E O RGI AUPDM5E DI AL6B7O8R D ERIBIPANENTTG9U A R A N T EEI10DR-OYHNBEALILP11A D DI N GGSHD12A S H E DTAcross2. CSS sees every element as a _____. [box] 4. The preferred font-style used in the guarantee paragraph. [georgia] 5. Optional <link> attribute for other k...

  • Page 465

    the box modelyou are here �427See if you can identify the padding, border and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom):Left marginRight marginTop marginBottom marginLeft paddingRight paddingBottom paddingTop paddingSharpen your pencilSolutionwww...

  • Page 466

    428 Chapter 10.guarantee { line-height: 1.9em; font-style: italic; font-family: Georgia, “Times New Roman”, Times, serif; color: #444444; border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; pad...

  • Page 467

    this is a new chapter42911 divs and spansAdvanced Web ConstructionIt’s time to get ready for heavy construction. In this chapter we’re going to roll out two new XHTML elements, called <div> and <span>. These are no simple “two by fours,” these are full blown steel beams. W...

  • Page 468

    430 Chapter 11You know, we’d love it if you could make the elixir specials a little more attractive on the Web page. Could you make it look just like our handout menu?The elixir mixer, AliceHere’s the handout menu with the elixir specials. Wow, the design is a lot different than the rest of t...

  • Page 469

    divs and spansyou are here �431A close look at the elixirs XHTML <h2>Weekly Elixir Specials</h2><p> <img src=“images/yellow.gif” alt=“Lemon Breeze Elixir” /></p><h3>Lemon Breeze</h3><p> The ultimate healthy drink, this elixir combines herb...

  • Page 470

    432 Chapter 11Jim: Come on, Frank, you know we can just create a class or two and then style all the elixir elements separately from the rest of the page.Frank: That’s true. Maybe this isn’t so bad. I’m sure there is a simple property to make text align to the center And we know how to h...

  • Page 471

    divs and spansyou are here �433Let’s explore how we can divide a page into logical sectionsThis is a pretty normal looking page: lots of headings, paragraphs, and an image in there.ph2imgh2h1pppDogsppph1h2imgh2pCatsTake a look at the Web page to the right: it’s a Web page for PetStorz.com a...

  • Page 472

    434 Chapter 11pdivdivph2pimgh2h1pph2imgh2h1pppdiv id=“dogs”div id=“cats”Now that you know which elements belong in each section, you can add some XHTML to mark up this structure. The common way to do this is to place <div> opening and closing tags around the elements that belong to ...

  • Page 473

    divs and spansyou are here �435brainpower?On a referral from the Starbuzz CEO, you’ve been asked to come in and consult on style changes to PetStorz main page. How quickly would you understand the PetStorz Web page if you were shown Page One?What about Page Two?ph2imgh2h1pppdiv id=“dogs”d...

  • Page 474

    436 Chapter 11There are a couple of reasons you might want to add more structure to your pages with <div>s. First, you may want to further expose the underlying logical structure of your pages, which can help others understand them, and also help in maintaining them. Second, there are tim...

  • Page 475

    divs and spansyou are here �437Q: So, a <div> acts like a container that you can put elements into to keep them all together?A: It sure does. In fact, we often describe <div>s as “containers”. Not only do they act as logical containers that you can use to hold a bunch of related...

  • Page 476

    438 Chapter 11Meanwhile, back at the lounge...Okay, enough “theory” about <div>s – let’s get one into the lounge page. Remember, we’re trying to get all the elixir elements into a group and then we’re going to style it to make it look like the elixir handout. So, open up your ...

  • Page 477

    divs and spansyou are here �439Taking the <div> for a test driveThat was easy, wasn’t it? Now that we’ve got a more structured page, let’s fire up the browser and see how it looks...Hmmm... no change at all! But that’s okay: the <div> is pure structure, and it doesn’t hav...

  • Page 478

    440 Chapter 11An over-the-border test driveAfter you’ve added the CSS, save it and then reload your “lounge.html” file.Here’s the border that you just added to the elixirs <div> element.Notice that the border goes around all the elements inside the <div> element. The <div&...

  • Page 479

    divs and spansyou are here �441Adding some real style to the elixirs sectionThe main heading and the paragraph text are black, while the drink names are a red color that matches the red in the logo. The text and images are centered, and there’s padding on the sides to add space between the te...

  • Page 480

    442 Chapter 11That’s a lot of new style, so let’s get a game plan together before attacking it. Here’s what we need to do:First, we’re going to change the width of the elixirs <div> to make it narrower. Next, we’ll knock out some of the styles you’re already familiar with, like...

  • Page 481

    divs and spansyou are here �443Now all the content in the elixirs <div> fits into a space that is 200 pixels wide. It doesn’t change, even if you make your browser window really wide, or really narrow. Try it!200 pixelsCompare the behavior of the <div> to that of the other elemen...

  • Page 482

    444 Chapter 11Our guarantee: at the lounge, we’re committed to providing you, our guest, with an exceptional experience every time you visit. Whether you’re just stopping by to check in on email over an elixir, or are here for an out-of-the-ordinary dinner, you’ll find our knowledgeable ser...

  • Page 483

    divs and spansyou are here �445Well then how do we specify the width of the entire element?Say you set the content area width to be 300 pixels using the width property in a CSS rule.And let’s say you’ve set the margins to 20 pixels, the padding to 10 pixels, and you have a 1 pixel border. ...

  • Page 484

    446 Chapter 11Q: If I don’t set the width of an element, then where does the width come from?A: The default width for a block element is “auto”, which means that it will expand to fill whatever space is available. If you think about any of the Web pages we’ve been building, each block ele...

  • Page 485

    divs and spansyou are here �447We’ve got the width out of the way. What’s left to do?#elixirs { border-width: thin; border-style: solid; border-color: #007e7e; width: 200px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;...

  • Page 486

    448 Chapter 11Wait just a sec... why does the text-align property affect the alignment of the images? Shouldn’t it align only text? Seems like it should be called something else if it aligns images too.Good point... it doesn’t seem right, does it? But the truth is that text-align will align...

  • Page 487

    divs and spansyou are here �449Good catch. All the text inside the <div> element is in nested block elements, but it is all aligned now. That’s because these block elements inherit the text-align property from the <div>. So here’s the difference: rather than the <div> it...

  • Page 488

    450 Chapter 11So now that you understand widths, what’s the total width of the elixirs box? To start with, we know the content area is 200 pixels. We’ve also set some left and right padding that affects the width, as well as a border that’s set to “thin”. Just assume a thin border is 1 ...

  • Page 489

    divs and spansyou are here �451We’re close to having the elixirs done. What’s left? We’re almost there...Sounds pretty easy, right? After all, you’ve done all this before. In fact, given that you know you can just set styles on the <div> and they will be inherited, you can take ...

  • Page 490

    452 Chapter 11What are we trying to do?div id=”elixirs”h3h2h3bodyhtmlh1h2h3div id=”elixirs”h3h2h3bodyhtmlh1h3h2Let’s take a quick look at what we’re trying to do to the heading colors.Here’s just the main heading elements in the lounge XHTML.Right now the CSS says to color <h1>...

  • Page 491

    divs and spansyou are here �453What we need is a way to select descendantsWhat we’re really missing is a way to tell CSS that we want to only select elements that descend from certain elements, which is kinda like specifying that you only want your inheritance to go to the children of one dau...

  • Page 492

    454 Chapter 11Your turn. Write the selector that selects only <h3> elements inside the elixirs <div>. In your rule, set the color property to #d12c47. Also label the elements in the graph below that are selected.div id=”elixirs”h3h3htmlbodyh1h3h2h2div id=”calendar”h2h3h1h2Q...

  • Page 493

    divs and spansyou are here �455Changing the color of the elixir headingsNow that you know about descendant selectors, let’s set the <h2> heading to black and the <h3> headings to red in the elixirs. Here’s how you do that:#elixirs h2 { color: black;}#elixirs h3 { col...

  • Page 494

    456 Chapter 11another way to specify line heightFixing the line heightRecall that in the last chapter we made the line height of the text in the lounge a little taller than normal. This looks great, but in the elixirs we want our text to be a normal, single-spaced, line height to match the hando...

  • Page 495

    divs and spansyou are here �457Look what you’ve accomplished...Wow, that’s fantastic! You were able to make the elixirs section on the Web site look like the handout, with just a little CSS.Take a look at the elixirs section now. You’ve completely transformed it, and now it looks just l...

  • Page 496

    458 Chapter 11It’s time to take a little shortcutYou’ve probably noticed that there are quite a few CSS properties that seem to go together. For instance, padding-left, padding-right, padding-bottom, and padding-top. Margin properties are the same way. How about background-image, background...

  • Page 497

    divs and spansyou are here �459border-width: thin;border-style: solid; border-color: #007e7e;border: thin solid #007e7e; Rewrite border properties as one property. These can be in any order you like.But there’s more...Here’s another common way to abbreviate margins (or paddin...

  • Page 498

    460 Chapter 11And even more shorthandsNo description of shorthands would be complete without mentioning font shorthands. Check out all the properties we need for fonts: font-family, font-style, font-weight, font-size, font-variant, and don’t forget line-height. Well, there’s a shorthand that ...

  • Page 499

    divs and spansyou are here �461It’s time to put all your new knowledge to work. You’ll notice that at the bottom of the lounge, there’s a small section with copyright information that acts as a footer for the page. Add a <div> to make this into its own logical section. After you’v...

  • Page 500

    462 Chapter 11I saw the nice job you did on the elixirs. Can you give us a hand with the music recommendations on the site? We don’t need much, just some simple styling.The lounge’s resident DJ.All the CD titles are in an italic font style.And all the artists are in bold.What do you think is ...

  • Page 501

    divs and spansyou are here �463Frank: Yeah, but that’s kind of like using a <blockquote> just to indent text. What I mean is that we don’t really want to emphasize and strongly emphasize the CD and artists. We just want italic and bold. Plus, what if someone changes the style for <...

  • Page 502

    464 Chapter 11Adding <span>s in three easy steps<span> elements give you a way to logically separate inline content in the same way that <div>s allow you to create logical separation for block level content. To see how this works, we’re going to style the music recommendations...

  • Page 503

    divs and spansyou are here �465Nice job, guys. This next one’s for you.Step three: styling the <span>sBefore we move on, save the file and reload it in your browser. Like a <div>, by default a <span> has no effect on style, so you should see no changes.Now let’s add some s...

  • Page 504

    466 Chapter 11Q: When do I use a <span> rather than another inline element like <em> or <strong>?A: As always, you want to mark up your content with the element that most closely matches the meaning of your content. So, if you are emphasizing words, use <em>; if you’re ...

  • Page 505

    divs and spansyou are here �467Think about the <a> element. Is there something about its style that seems different from other elements?brainpower?Hey guys, I know you think you’re about done, but you forgot to style the links. They’re still that default blue color, which kinda clash...

  • Page 506

    468 Chapter 11The <a> element and its multiple personalitiesHave you noticed that links act a little differently when it comes to style? Links are chameleons of the element world because, depending on the circumstance, they can change their style at a moment’s notice. Let’s take a close...

  • Page 507

    divs and spansyou are here �469How can you style elements based on their state?A link can be in a few states: it can be unvisited, visited, or in the “hover” state (and a couple of other states too). So, how do you take advantage of all those states? For instance, it would be nice to be ab...

  • Page 508

    470 Chapter 11This week’s interview: getting to know the pseudo-class. The Pseudo-class ExposedHead First: Welcome, Pseudo-class. It’s a pleasure to have you here. I must confess that when they first asked me to do this interview, I drew a blank. Pseudo-class? The only thing that came to min...

  • Page 509

    divs and spansyou are here �471Putting those pseudo-classes to work#elixirs a:link { color: #007e7e;}#elixirs a:visited { color: #333333;}#elixirs a:hover { background: #f88396; color: #0d5353;}Okay, let’s be honest. You’ve probably just learned the most important thing in t...

  • Page 510

    472 Chapter 11Test drive the linksYour job is to give the “detailed directions” link in the lounge some style. Just like the elixirs link, we want all unvisited links to be aquamarine, and all visited links to be gray. However, we don’t want the other links in the lounge to have any hover...

  • Page 511

    divs and spansyou are here �473Isn’t it about time we talk about the “cascade”?Well, well, we’re quite far into this book (473 pages to be exact) and we still haven’t told you what the “Cascade” in Cascading Style Sheets is all about. Truth be told, you have to know a lot about CS...

  • Page 512

    474 Chapter 11So, to review, as the page authors, we can use multiple style sheets with our XHTML. And, the user might also supply their own styles, and then the browser has its default styles, too. And on top of all that we might have multiple selectors that apply to the same element. How do we ...

  • Page 513

    divs and spansyou are here �475The cascadeFor this exercise, you need to “be the browser”. Let’s say you’ve got an <h1> element on a page and you want to know the font-size property for it. Here’s how you do it:Gather all your style sheets together.For this step you need ALL th...

  • Page 514

    476 Chapter 11Welcome to the “What’s my specificity game”To calculate the specificity you start with a set of three numbers, like this:0 0 0In the old days we used four numbers, but that was before XHTML... aren’t you glad you’re learning this now?Does the selector have any element name...

  • Page 515

    divs and spansyou are here �477Q: What makes a specificity number bigger than another?A: Just read them like real numbers: 100 (one hundred) is bigger than 010 (ten) which is bigger than 001 (one), and so on.Q: What about a rule like “h1, h2”; what is its specificity?A: Think of that as two...

  • Page 516

    478 Chapter 11h1 { color: black;}body h1 { color: #cccccc;}h1 { color: #efefef;}h1.blueberry { color: blue;}Find all the declarations that match.Step two:Now take all your matches, and sort them by author, reader, browser.Step three:Now sort the declarations by how specific they are. To d...

  • Page 517

    divs and spansyou are here �479Step five:h1 { color: black;}body h1 { color: #cccccc;}h1.blueberry { color: blue;}h1 { color: #efefef;}We’re okay here, because we don’t have any conflicting rules at this point. The blueberry, with a score of 11, is the clear winner. If there had bee...

  • Page 518

    480 Chapter 11Ah, good question. We actually talked about this a little in Chapter 8. If you don’t find a match for the property in any rules in the cascade, then you try to use inheritance. Remember that not all properties are inherited, like border properties for instance. But for the proper...

  • Page 519

    divs and spansyou are here �481Super brainpower?This is a special brain power; so special that we’re going to let you think about it between chapters. Here’s what you need to do:4Open the file “lounge.css”.5Locate the “#elixirs” rule.6Add this declaration at the bottom of the rule:7...

  • Page 520

    482 Chapter 11Since you’ve got a Super Brain Power to work on, we gave the XHTMLcross a vacation in this chapter. Don’t worry, he’ll be back in the next one.XHTMLcross on Vacation<div> elements are used to group related nelements together into logical sections.Creating logical sectio...

  • Page 521

    divs and spansyou are here �48320 + 20 + 200 + 1 + 1 + 0 + 20 = 262left paddingright paddingcontent arealeft borderright borderright marginleft marginYour turn. Write the selector that selects only <h3> elements inside the elixirs <div>. In your rule, set the color property to #d...

  • Page 522

    484 Chapter 11It’s time to put all your new knowledge to work. You’ll notice at the bottom of the lounge there’s a small section with copyright information that acts as a footer for the page. Add a <div> to make this into its own logical section. After you’ve done that style it with...

  • Page 523

    divs and spansyou are here �485Your job was to finish adding the <span> elements to the rest of the music recommendations and test your page. Here’s the solution:<ul><li><span class=”cd”>Buddha Bar</span>, <span class=”artist”>Claude Challe</...

  • Page 524

    486 Chapter 11____________ { __________: #007e7e; }____________ { __________: #333333; }a:linka:visitedcolorcolorSharpen your pencilTry your hand at caclulating the specificity of these selectors using the cascade rules. Here’s the solution.h1.greentea 0 1 1p img0 0 2a:link0 1 1ol li p.gre...

  • Page 525

    this is a new chapter487Arranging Elements12 layout and positioningIt’s time to teach your XHTML elements new tricks. We’re not going to let those XHTML elements just sit there anymore – it’s about time they get up and help us create some pages with real layouts. How? Well, you’ve got...

  • Page 526

    488 Chapter 12Did you do the Super Brain Power?If you didn’t do the Super Brain Power at the end of the last chapter, then march right back there and do it. It’s required.Okay, now that we have that out of the way, at the end of the last chapter, we left you with a bit of a cliffhanger. We as...

  • Page 527

    layout and positioningyou are here �489The Flow is what gives a CSS master his power. It’s an energy field created by all living things. It surrounds us and penetrates us. It binds the galaxy together.... Oh, sorry.Flow is what the browser uses to lay out a page of XHTML elements. The browse...

  • Page 528

    490 Chapter 12Open your “lounge.html” file and locate all the block elements. Flow each one on to the page to the left. Just concentrate on the block elements nested directly inside the body element. You can also ignore the “float” property in your CSS because you don’t know what it do...

  • Page 529

    layout and positioningyou are here �491What about inline elements?So you know that block elements flow top to bottom, with a linebreak in between each element. Easy enough. What about the inline elements?Inline elements are flowed next to each other, horizontally, from top left to bottom right....

  • Page 530

    492 Chapter 12Now that you know how block and inline elements are flowed, let’s put them together. We’ll use a typical page with headings, paragraphs, and a few inline elements like spans, some emphasis elements, and even images. And, we can’t forget inline text.How it all works togetherph...

  • Page 531

    layout and positioningyou are here �493During your stay at the lounge, you’ll enjoy a smooth mixture of ambient and mystic sounds, filling the lounge and adding an extra dimension to your dining experience. The decor surrounds you with the relaxing sentiments of sights from eras past. And, d...

  • Page 532

    494 Chapter 12Q: So if I have a block element with a zero margin, and a block element below it with a top margin of 20, the margin between them would end up being 20?A: Right. If one of the margins is bigger, then the margin becomes the larger of the two, even if one margin is zero. But if the ma...

  • Page 533

    layout and positioningyou are here �495How to float an elementLet’s step through an example of how you get an element to float, and then we’ll look at what it does to the flow of the page when you do. h2ph1h2ppspanemspanemimgimgimgimgtexttexttexttexttexttexttextp id=“amazing”Now give it...

  • Page 534

    496 Chapter 12Now let’s add the float property. The float property can be set to either left or right. Let’s stick with right:#amazing { width: 200px; float: right;}h2h1texttext(1) First the browser flows the elements on the page as usual, starting at the top of the file and moving toward...

  • Page 535

    layout and positioningyou are here �497Behind the scenes at the loungeNow you know all about flow and how floated elements are placed on the page. Let’s look back at the lounge and see how this all fits together.Remember, in addition to setting the elixirs <div> to float right, we also ...

  • Page 536

    498 Chapter 12Move the elixirs <div> back to its original place below the music recommendations, then save and reload the page. Where does the element float now? Check your answer in the back and then put your elixirs <div> back underneath the header.Nice stuff. Do you think I’m goi...

  • Page 537

    layout and positioningyou are here �499The new StarbuzzLet’s take a quick look at what we’ve got so far, starting with the page as it looks now. Then we’ll take a peek at the markup and the CSS that’s styling it.We’ve got a header now with a new spiffy Starbuzz logo and the company m...

  • Page 538

    500 Chapter 12<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en” ><head> <meta http-equiv=“Content-Type” content=“te...

  • Page 539

    layout and positioningyou are here �501 from at Starbuzz, including our <a href=“beverages.html#house” title=“House Blend”>House Blend</a>, <a href=“beverages.html#mocha” title=“Mocha Cafe Latte”>Mocha Cafe Latte</a>, <a href=“beverages.htm...

  • Page 540

    502 Chapter 12body { background-color: #b5a789; font-family: Georgia, “Times New Roman”, Times, serif; font-size: small; margin: 0px;}#header { background-color: #675c47; margin: 10px; height: 108px;}#...

  • Page 541

    layout and positioningyou are here �503a:link { color: #b76666; text-decoration: none; border-bottom: thin dotted #b76666;}a:visited { color: #675c47; text-decoration: none; border-...

  • Page 542

    504 Chapter 12Move the sidebar just below the headerIt’s a fact of life that when you float an element, you need to move the XHTML for the element directly below the element that you want it to float below. In this case, the sidebar needs to come under the header. So, go ahead and locate the si...

  • Page 543

    layout and positioningyou are here �505On paper this looks like a great idea. What we do is set a width on the main content <div> and float it to the left, and then let the rest of the page flow around it. That way we get to keep the ordering of the page and we also get two columns.The on...

  • Page 544

    506 Chapter 12Test driving StarbuzzMake sure you add the new sidebar properties to the “starbuzz.css” file in the “chapter12/starbuzz” folder, and then reload the Starbuzz page. Let’s see what we’ve got...Hmm, this looks pretty good, but if you flip back three pages you’ll see we’...

  • Page 545

    layout and positioningyou are here �507Fixing the t wo-column problemAre you sitting there waiting for us to come riding in on a white horse with the magic property that solves all this? Well, that’s not going to happen. This is the point in CSS where page layout becomes more an art – or at...

  • Page 546

    508 Chapter 12What we want to do is set a right margin on the main content section so that it’s the same width as the sidebar. But how big is the sidebar? Well, we hope you aren’t already rusty since the last chapter. Here’s all the information you need to compute the width of the sidebar. ...

  • Page 547

    layout and positioningyou are here �509Test driveAs usual, save your “starbuzz.css” file and then reload “index.html”. You should now see a nice gutter between the two columns. Let’s think through how this is working one more time. The sidebar is floating right, so it’s been moved ...

  • Page 548

    510 Chapter 12Wait a sec. Before you get way into solving that problem, I have to ask, why did we have to go to all this trouble of using a margin? Why don’t we just set the width of the main area? Wouldn’t that do the same thing?The problem with setting a width on both the content area an...

  • Page 549

    layout and positioningyou are here �511Back to clearing up the overlap problemGuess what, this time we are going to ride in on a white horse with a solution, but don’t get used to it. The solution is called the clear property, and here’s how it works...div id=“main”div id=“header”di...

  • Page 550

    512 Chapter 12Test driveQ: So why isn’t there just a two-column property in CSS? Why is it so hard to get this stuff to work correctly?A: Yes, we have a winner! You’ve asked the $64,000 question. But, more seriously, while it seems like CSS should have some way of specifying “give me two c...

  • Page 551

    layout and positioningyou are here �513The only thing I don’t like about this design is that when I view the web page on my PDA, it puts the sidebar content above the main content, so I have to scroll through it. This is one of the disadvantages of the way we’ve designed this page – beca...

  • Page 552

    514 Chapter 12Want to know how your pages are going to look to your users under bad conditions (like on a browser that doesn’t support CSS)? Then open your “index.html” file and remove the <link> from the <head>, save, and reload the page in your browser. Now you can see the rea...

  • Page 553

    layout and positioningyou are here �515#main { background: #efe5d0 url(images/background.gif) top left; font-size: 105%; padding: 15px; margin: 0px 10px 10px 10px; width: 420px; float: left;}#footer { background-color...

  • Page 554

    516 Chapter 12A quick test driveWe’ve already said there might be a few problems with this method of floating the content to the left. Do a quick test drive before you move on just to see how this is all working. Go ahead and make the changes to your “starbuzz.css” file and then reload “i...

  • Page 555

    layout and positioningyou are here �517Liquid and Frozen DesignsAll the designs we’ve been playing with so far are called liquid layouts because they expand to fill whatever width we resize the browser to. These layouts are useful because, by expanding, they fill the space available and allow...

  • Page 556

    518 Chapter 12What’s the state bet ween liquid and frozen? Jello, of course!The frozen layout has some benefits, but it also just plain looks bad when you widen the browser. But we’ve got a fix, and it’s a common design you’ll see on the Web. This design is between frozen and liquid, and ...

  • Page 557

    layout and positioningyou are here �519With CSS, there are typically lots of ways to approach a layout, each with their own strengths and weaknesses. Actually, we’re just about to look at another common technique for creating a two-column layout that keeps the content in the correct order, an...

  • Page 558

    520 Chapter 12How absolute positioning worksdiv id=“main”div id=“header”div id=“footer”div id=“sidebar”Let’s start by getting an idea of what absolute positioning does, and how it works. Here’s a little CSS to position the sidebar <div> with absolute positioning. Don’t...

  • Page 559

    layout and positioningyou are here �521#annoyingad { position: absolute; top: 150px; left: 100px; width: 400px;}Another example of absolute positioningLet’s look at another example. Say we have another <div> with the id “annoyingad”. We could position it like this:Th...

  • Page 560

    522 Chapter 12Q: What is the position property set to by default?A: The default value for positioning is “static”. With static positioning the element is placed in the normal document flow and isn’t positioned by you – the browser decides where it goes. You can use the float property to t...

  • Page 561

    layout and positioningyou are here �523Using absolute positioningWe’re now going to create a two column Starbuzz page using techniques similar to those we used with the float version of the page; however, this time we’ll use absolute positioning. Here’s what we’re going to do:1First we...

  • Page 562

    524 Chapter 12Now we just need to rework the main <div>#main { background: #efe5d0 url(images/background.gif) top left; font-size: 105%; padding: 15px; margin: 0px 330px 10px 10px;}Actually, there’s not much reworking to be done. We’re just adding a margin like we di...

  • Page 563

    layout and positioningyou are here �525Time for the absolute test driveMake sure you’ve saved the new CSS and then reload “index.html” in your browser. Let’s check out the results:Wow, this looks amazingly like the float version; however, you know that the sidebar is being positioned ab...

  • Page 564

    526 Chapter 12What can we do? Or, can’t you just tell me how to do a t wo-column layout that doesn’t break?Okay, you know that one of the big motivations behind CSS was to separate structure from style. Right? And CSS does a great job of allowing you to create XHTML documents that can be used...

  • Page 565

    layout and positioningyou are here �527This solution trades having the footer under just the main content for having a footer under the entire page, to keep it from creeping up under the sidebar. One tradeoff you can make to fix the footerTo try this solution, just give the footer the same righ...

  • Page 566

    528 Chapter 12Holy beans! Starbuzz just won the Roaster of the Year Award. This is huge. Can we get it on the page front and center? All our customers need to see this. Top priority, make it happen!<div id=”award”> <img src=”images/award.gif” alt=”Roaster of the Y...

  • Page 567

    layout and positioningyou are here �529Positioning the award#award { position: absolute; top: 30px; left: 365px;}We want the award to sit just about in the middle of the page when the browser’s open to 800 pixels (the width of the image in the header, and a typical size for ...

  • Page 568

    530 Chapter 12Tonight’s talk: Float and Absolute discuss who’s more appropriate for layout.FloatAbsoluteAbsolute, have you noticed lots of people are going with me to do their layouts?Are you sure? I’m used on a lot of pages too, you know.Well, everyone knows I’m better for CSS layout. ...

  • Page 569

    layout and positioningyou are here �531But the important part, the inline content, flows around me, just like it should.Sometimes people want to position elements right on top of other elements, you know. And with me, you can position elements anywhere you want. None of this right and left cra...

  • Page 570

    532 Chapter 12Here’s a new <div> nested inside the sidebar.One more thing you should know about absolute positioningdiv id=“main”div id=“header”div id=“footer”div id=“sidebar”div id=“tv”100 pixels100 pixelsSo far, when you’ve used the left, right, top, and bottom pro...

  • Page 571

    layout and positioningyou are here �533_______________ { margin-top: 140px; margin-left: 20px; width: 500px;}_______________ { position: absolute; top: 20px; left: 550px; width: 200px;}_______________ { float: left;}_______________ { position: absol...

  • Page 572

    534 Chapter 12Hey, can we get a coupon on the site and put it right in customers’ faces so they can’t miss it? I’d like to offer one free coffee to everyone who clicks on the coupon, for a limited time, of course.Why? Because it’s going to give us the opportunity to try a little fixed pos...

  • Page 573

    layout and positioningyou are here �535How does fixed positioning work?#coupon { position: fixed; top: 300px; left: 100px;}Compared to absolute positioning, fixed positioning is pretty straightforward. With fixed positioning, you specify the position of an element just like yo...

  • Page 574

    536 Chapter 12Putting the coupon on the page#coupon { position: fixed; top: 300px; left: 0px;}#coupon img { border: none;}#coupon a:link { border: none;}#coupon a:visited { border: none;} <div id=”coupon”> <a href=”freecoffee.html” title=”Click here ...

  • Page 575

    layout and positioningyou are here �537Putting the coupon on the pageAdd the new coupon rules to your “starbuzz.css” file, save, and then reload the page. You may need to make the browser smaller to be able to see that the coupon stays put even when you scroll. Clicking on the coupon should...

  • Page 576

    538 Chapter 12A rather positive, negative test driveMake sure you’ve put in the negative left property value, save, and reload the page. Doesn’t that look slick? Congrats, you’ve just achieved your first CSS special effect. Watch out George Lucas!Can you believe how good this site looks? I ...

  • Page 577

    layout and positioningyou are here �539Getting relativeThis is it, the last type of positioning: relative positioning. Truth be told, it’s also the loneliest of the positions because you just won’t find a lot of people using it in their designs. But, new designs come along every day, so whe...

  • Page 578

    540 Chapter 12The test driveAfter reloading the Starbuzz page, you should see the coffee bag over to the right part of the sidebar. What is interesting is that part of the image is actually extending beyond the sidebar into the margin and off the edge of the page. How does that work? Well, as yo...

  • Page 579

    layout and positioningyou are here �541To three-columns and beyond...While we’ve spent this chapter looking at two-column layouts, the real goal was to learn about the float and clear properties, along with the various forms of positioning that CSS offers. Now that you’ve got the basics dow...

  • Page 580

    542 Chapter 12Browsers place elements in a page using flow. nBlock nelements flow from the top down, with a linebreak between elements. By default, each block element takes up the entire width of the browser window.Inline nelements flow inside a block element from the top left to the bottom ri...

  • Page 581

    layout and positioningyou are here �543This has been a turbo-charged chapter, with lots to learn. Help it all sink in by doing this crossword. All the answers come from the chapter.XHTMLcross123456789101112131415161718Across5. State between liquid and frozen.6. Type of positioning that is relat...

  • Page 582

    544 Chapter 12Open your “lounge.html” file and locate all the block elements. Flow each one on to the page below. Just concentrate on the block elements nested directly inside the body element. You can also ignore the “float” property in your CSS because you still don’t know what BE th...

  • Page 583

    layout and positioningyou are here �545Move the elixirs <div> back to its original place below the music recommendations, then save and reload the page. Where does the element get floated now? You should have seen the elixirs below the music recommendations.The <div> is floated to t...

  • Page 584

    546 Chapter 12Sharpen your pencil_______________ { margin-top: 140px; margin-left: 20px; width: 500px;}_______________ { position: absolute; top: 20px; left: 550px; width: 200px;}_______________ { float: left;}_______________ { position: absolute; ...

  • Page 585

    layout and positioningyou are here �547V1F2Z3C4IL-LJ5ELL OF6I X E DWWNAPDRC7O LL A8PSEB9RBXR10M11F12L O A TSL13EFTALTOF14LROT15E X TLLAGAOUC16O N T AI N I N GTMTAINN17EG A TIV ESEEI18DAcross5. State between liquid and frozen. [jello] 6. Type of positioning that is relative to the viewport. [fix...

  • Page 586

    www.freepdf-books.com

  • Page 587

    this is a new chapter549Getting Tabular13 tables and more listsIf it walks like a table and talks like a table... There comes a time in life when we have to deal with the dreaded tabular data. Whether you need to create a page representing your company’s inventory over the last year or a cat...

  • Page 588

    550 Chapter 13Hey guys, I just created this little table of the cities in my journal. I was going to put it on the Web site, but I couldn’t find a good way to do it with headings or blockquotes or paragraphs. Can you help?City Date Temperature Altitude Population Diner RatingW...

  • Page 589

    tables and more listsyou are here �551How do you make tables with XHTML?Tony’s right; you really haven’t seen a good way of using XHTML to represent his table, at least not yet. While you might think there’s a way to use CSS and <div>s to create tables, XHTML has a <table> ele...

  • Page 590

    552 Chapter 13How to create a table using XHTMLBefore we pull out Tony’s site and start making changes, let’s get the table working like we want it in a separate XHTML file. We’ve started the table and already entered the headings and the first two rows of the table into an XHTML file calle...

  • Page 591

    tables and more listsyou are here �553What the browser createsLet’s take a look at how the browser displays this XHTML table. We’ll warn you now: this isn’t going to be the best-looking table, but it will look like a table. We’ll worry about how it looks shortly; for now let’s make su...

  • Page 592

    554 Chapter 13Tables dissectedYou’ve seen four elements used to create a single table: <table>, <tr>, <th> and <td>. Let’s take a closer look at each one to see exactly what role it plays in the table.The <table> tag is the tag that starts the whole thing off. ...

  • Page 593

    tables and more listsyou are here �555Q: Why isn’t there a table column element? That seems pretty important.A: The designers of XHTML decided to let you specify tables by row, rather than by column. But notice that by specifying each row’s <td> elements, you are implicitly specifying...

  • Page 594

    556 Chapter 13On the left, you’ll find the XHTML for a table. Your job is to play like you’re the browser displaying the table. After you’ve done the exercise, look at the end of the chapter to see if you got it right.BE the Browser<table><tr><th>Artist</th> <th&g...

  • Page 595

    tables and more listsyou are here �557Adding a caption and a summaryThere are a couple of things you can do right off the bat to improve your tables, like adding a caption and a summary. <table summary=”This table holds data about the cities I visited on my travels. I’ve included the ...

  • Page 596

    558 Chapter 13Test drive... and start thinking about styleThe caption is at the top of the table. It’ll probably look better on the bottom.You won’t see the summary; it’s primarily for screen readers to read aloud to the visually impaired to help provide more information about the table da...

  • Page 597

    tables and more listsyou are here �559Before we start styling, let’s get the table into Tony’s pageBefore we start adding style to Tony’s new table, we should really get the table into his main page. Remember that Tony’s main page already has set a font-family, font-size, and a lot of o...

  • Page 598

    560 Chapter 13body { font-family: Verdana, Geneva, Arial, sans-serif; font-size: small;} h1, h2 { font-weight: normal; color: #cc6600; border-bottom: thin dotted #888888;} h1 { font-size: 170%;} h2 { font-size: 130%;} blockquote { font-style: italic;}table { mar...

  • Page 599

    tables and more listsyou are here �561Taking the styled tables for a test driveThat’s a lot of changes at once. Make sure you save them, and you should validate as well. Then load “journal.html” into your browser.The table looks quite different now that you’ve styled it. We’re also i...

  • Page 600

    562 Chapter 13Table cells look like they just use the box model too... they’ve got padding and a border. Do they also have a margin?The box model is a good way to think about table cells, but they do differ when it comes to margins. Let’s take a look at one of the cells in Tony’s table:Tabl...

  • Page 601

    tables and more listsyou are here �563Q: So border spacing is defined for the entire table, while a margin can be set for an individual element?A: Right. Table cells don’t have margins; what they have is spacing around their borders, and this spacing is set for the entire table. You can’t ...

  • Page 602

    564 Chapter 13Getting those borders to collaspetable { margin-left: 20px; margin-right: 20px; border: thin solid black; caption-side: bottom; border-collapse: collapse;}There is another way to solve the border dilemma, besides the border-spacing property. You can use a CSS property...

  • Page 603

    tables and more listsyou are here �565You’re becoming quite the pro at XHTML and CSS, so we don’t mind giving you a little more to play with in these exercises. How about this: we’d like to spruce this table up even a little more, starting with some text alignment issues. Let’s say we w...

  • Page 604

    566 Chapter 13How about some color?th { background-color: #cc6600;}.cellcolor { background-color: #fcba7a;}You know Tony loves his signature color and there’s no reason not to add some color to his table; not only will it look great, but we can actually improve the readability of the tabl...

  • Page 605

    tables and more listsyou are here �567Your turn. Add the class “cellcolor” to your CSS in “journal.css”, and then, in your XHTML, add class=”cellcolor” to each of the <tr> opening tags needed to make the rows alternating colors. Check your answers before moving on.Did we ment...

  • Page 606

    568 Chapter 13Another look at Tony’s tableBased on his return trip to New Mexico, Tony’s added a new entry for August 27th, just below the original Truth or Consequences entry. He’s also reused a couple of cells where the information didn’t change (a great technique for reducing the amoun...

  • Page 607

    tables and more listsyou are here �569How to tell cells to span more than one rowWhat does it mean for a cell to span more than one row? Let’s look at the entries for Truth or Consequences, NM in Tony’s table again. The data cells for city, altitude, and population span two rows, not one, w...

  • Page 608

    570 Chapter 13CityDateTempAltitudePopulationDiner RatingWalla Walla, WAJune 15th75º1,204 ft29,6864/5Magic City, IDJune 25th74º5,312 ft503/5Bountiful, UTJuly 10th91º4,226 ft41,1734/5Last Chance, COJuly 23rd102º4,780 ft2653/5Truth or Consequences, NMAugust 9thAugust 27th93º98º4,242 ft7,2895/5...

  • Page 609

    tables and more listsyou are here �571The new and improved tableMake the changes to the table in “journal.html” and give it a test run. Take a look at the table. Think about exactly what you’re doing to the table: you’re using XHTML to specify that certain cells should take up more than...

  • Page 610

    572 Chapter 13Four out of five stars? I know my diners and that was a solid five star rating! You better change that in the table.It looks like we’ve got a disagreement on the diner rating for August 27th, and while we could ask Tony and Tess to come to a consensus, why should we? We’ve got t...

  • Page 611

    tables and more listsyou are here �573 <tr> <td rowspan=”2”>Truth or Consequences, NM</td> <td class=”center”>August 9th</td> <td class=”center”>93</td> <td rowspan=”2” class=”right”>4,242 f...

  • Page 612

    574 Chapter 13Test driving the nested tableGo ahead and type in the new table. Tables are easy to mistype, so make sure you validate and then reload your page. You should see the new, nested table.Wow, looking nice. Only that background really is a bit much for a nested table. Let’s keep the na...

  • Page 613

    tables and more listsyou are here �575brainBarbell { background-color: white;}We want to change the background color of the nested table headers to white.Determine the selector to select only the nested table heading elements.It’s time to fall back on all that training you...

  • Page 614

    576 Chapter 13Overriding the CSS for the nested table headingstable table th { background-color: white;}You can target just the <th> elements in the nested table using a descendant selector. Add a new rule to your CSS that uses the “table table th” selector to change the background ...

  • Page 615

    tables and more listsyou are here �577Giving Tony’s site the final polishTony’s page is really looking nice, but there’s one more area we haven’t spent any time styling yet: the list that contains the set of items he was preparing for his trip. You’ll find this list in his June 2nd e...

  • Page 616

    578 Chapter 13Giving the list some styleYou’re probably figuring out that once you know the basic CSS font, text, color, and other properties, you can style just about anything. The same is true for lists; in fact, there are only a couple of properties that are specific to lists. The main list ...

  • Page 617

    tables and more listsyou are here �579What if you want a custom marker?Do you really think Tony would want anything less than his own custom marker? Well, luckily CSS has a property called list-style-image that lets you set an image to be the marker for a list. Let’s give it a try on Tony’s...

  • Page 618

    580 Chapter 13Q: What about ordered lists? What can I do to change their style?A: You style ordered and unordered lists in the same way. Of course, an ordered list has a sequence of numbers or letters for markers, not bullets. Using CSS you can control whether an ordered lists’ markers are dec...

  • Page 619

    tables and more listsyou are here �581XHTML tables are used nto structure tabular data.Use the HTML table elements, <table>, <tr>, n<th>, and <td> together to create a table.The <table> element defines and surrounds nthe entire table.Tables are defined in rows, ...

  • Page 620

    582 Chapter 13XHTMLcrossThat crossword looks a bit like a table, doesn’t it? Give your left brain a workout and solve this crossword. All the words are from this chapter.some left brain actionwww.freepdf-books.com

  • Page 621

    tables and more listsyou are here �583<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”><head> <meta http-equiv=“Content-...

  • Page 622

    584 Chapter 13 <td>93</td> <td>4,242 ft</td> <td>7,289</td> <td>5/5</td> </tr> <tr> <td>Why, AZ</td> <td>August 18th</td> <td>104</td> ...

  • Page 623

    tables and more listsyou are here �585 <td>93</td> <td>4,242 ft</td> <td>7,289</td> <td>5/5</td> </tr> <tr> <td>Why, AZ</td> <td>August 18th</td> ...

  • Page 624

    586 Chapter 13The double dotted lines are giving Tony’s table a busy and distracting look. It would be much better, and wouldn’t detract from the table, if we could just have one border around each table cell. Can you think of a way to do that with styling given that you’ve just learned? Y...

  • Page 625

    tables and more listsyou are here �587.center { text-align: center;}.right { text-align: right;} <table summary=”This table holds data about the cities I visited on my travels. I’ve included the date I was in each city, the temperature when I was there, and altitude and populati...

  • Page 626

    588 Chapter 13CityDateTempAltitudePopulationDiner RatingWalla Walla, WAJune 15th75º1,204 ft29,6864/5Magic City, IDJune 25th74º5,312 ft503/5Bountiful, UTJuly 10th91º4,226 ft41,1734/5Last Chance, COJuly 23rd102º4,780 ft2653/5Truth or Consequences, NMAugust 9thAugust 27th93º98º4,242 ft7,2895/5...

  • Page 627

    tables and more listsyou are here �589brainBarbellIt’s time to fall back on all that training you’ve done. What you need to do is change the table heading background color just for Tony and Tess, and do it without changing the background of the main table headings. How? You need to find a s...

  • Page 628

    590 Chapter 13S1U M M A RYPAH2L3M4B5N6E ST E DIC7AOSASARW8RDTPGRDL9I ST-ST YLE-I M A G ENSINPRGTOSP-SYNISLNPR10EL11GAB12O R D ER-C O LL APSECWTYIL13I ST-ST YLE-PO SIT14I O NPUOGM15A RKERD16A T APAcross1. Provides a longer description used for screen readers. [summary] 6. One table inside another ...

  • Page 629

    this is a new chapter591Getting Interactive14 xhtml formsSo far all your Web communication has been one way: from your page to your visitors. Golly, wouldn’t it be nice if your visitors could talk back? That’s where XHTML forms come in: once you enable your pages with forms (along with a li...

  • Page 630

    592 Chapter 14How forms workIf you use the Web at all, then you know what a form is. But you might not have really thought about what they have to do with XHTML. A form is basically a Web page with input fields that allows you to enter information. When the form is submitted, that information is...

  • Page 631

    xhtml formsyou are here �593How forms work in the browserTo a browser, a form is just a bit of XHTML in a page. You’ll see that you can easily create forms in your pages by adding a few new elements. Here’s how a form works from the browser’s perspective:The browser loads the XHTML for a...

  • Page 632

    594 Chapter 14<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html> <head> <meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1” /> <title>Enter ...

  • Page 633

    xhtml formsyou are here �595What the browser createsBig surprise; to create a form you use a <form> element. Now, just about any block level element can go inside the <form> element, but there’s a whole new set of elements that are made especially for forms. Each of these form ele...

  • Page 634

    596 Chapter 14contest.phpHow the form element works<form action=”http://www.headfirstlabs.com/contest.php” method=”POST”> </form>Everything inside your form goes here.Let’s take a closer look at the <form> element – not only does it hold all the element...

  • Page 635

    xhtml formsyou are here �597Okay, so I have an XHTML form - that seems like the easy part. But where do I get a Web application, or how do I make one?Good question. Creating Web applications is a whole topic unto itself and far beyond what we cover in this book. Well, we tried to cover them, bu...

  • Page 636

    598 Chapter 14What can go in a form?You can put just about any block element into a form, but that’s not what we really care about right now; we’re interested in the form elements that create controls in the browser. Here’s a quick rundown of all the commonly used form elements. We’re goi...

  • Page 637

    xhtml formsyou are here �599<input type=“radio” name=“hotornot” value=“hot” /><input type=“radio” name=“hotornot” value=“not” />radio inputThe radio <input> element creates a single control with several buttons, only one of which can be selected at any ...

  • Page 638

    600 Chapter 14<textarea name=“comments” rows=“10” cols=“48”></textarea>textareaThe <textarea> element creates a multi-line text area that you can type into. If you type more text than will fit into the text area, then a scroll bar appears on the right side.The <t...

  • Page 639

    xhtml formsyou are here �601optionThe <option> element works with the <select> element to create a menu. Use an <option> element for each menu item.<select name=“characters”> <option value=“Buckaroo”>Buckaroo Banzai</option> <option value=...

  • Page 640

    602 Chapter 14The Starbuzz Coffee Web site is kicking butt. We’ve got a new concept called the “Bean Machine”, which is an online form to order our coffees. Can you make it happen?Starbuzz Coffee Starbuzz Here’s what the form should look like.House BlendShade Grown Bolivia SupremoOrganic ...

  • Page 641

    xhtml formsyou are here �603House BlendShade Grown Bolivia SupremoOrganic GuatemalaKenyaMarkup MagnetsYour job is to take the form element magnets and lay them on top of the corresponding controls in the sketch. You won’t need all the magnets below to complete the job; some will be left over....

  • Page 642

    604 Chapter 14Getting ready to build the Bean Machine formBefore we start building that form, take a look inside the “chapter14/starbuzz” folder and you’ll find the file “form.html”. Open it and have a look around. All this file has in it are the XHTML basics:<!DOCTYPE html PUBLIC ...

  • Page 643

    xhtml formsyou are here �605Adding the form elementOnce you know the URL of the Web application that will process your form, all you need to do is plug it into the action attribute of your <form> element, like this (follow along and type the changes into your XHTML):<!DOCTYPE html PUBL...

  • Page 644

    606 Chapter 14How form element names workHere’s the thing to know about the name attribute: it acts as the glue between your form and the Web application that processes it. Here’s how this works:<input type=”text” name=”name” /><input type=”text” name=”address” />&...

  • Page 645

    xhtml formsyou are here �607there are noDumb QuestionsQ: What’s the difference between a text <input> and a <textarea>?A: You want to use a text <input> for entering text that is just a single line, like a name or zip code, and a <textarea> for longer, multi-line text....

  • Page 646

    608 Chapter 14 <form action=”http://www.starbuzzcoffee.com/processorder.php” method=”POST”> <p>Ship to: <br /> Name: <input type=”text” name=”name” /> <br /> Address: <input type=”text” name=”address” />...

  • Page 647

    xhtml formsyou are here �609A form-al test driveHere’s the Web application’s response. It looks like the application got what we submitted, but we haven’t given it everything it needs.Reload the page, fill in the text inputs, and submit the form. When you do that, the browser will package...

  • Page 648

    610 Chapter 14Adding the <select> element <form action=”http://www.starbuzzcoffee.com/processorder.php” method=”POST”> <p> Choose your beans: <select name=”beans”> <option value=”House Blend”>House Blend</option> ...

  • Page 649

    xhtml formsyou are here �611Test driving the <select> elementLet’s give the <select> element a spin now. Reload your page and you should have a nice new menu waiting on you. Choose your favorite coffee, fill in the rest of the form, and submit your order.We still haven’t given t...

  • Page 650

    612 Chapter 14Change the <select> element name attribute to “thembeans”. Reload the form and resubmit your order. How does this affect the results you get back from the Web application? brainpower?Give the customer a choice of whole or ground beansThe customer needs to be able to choose...

  • Page 651

    xhtml formsyou are here �613Punching the radio buttonsTake the radio button XHTML on the previous page and insert it into your XHTML just below the paragraph containing the <select> element. Make sure you reload the page, and then submit it again.Depending on your browser, you may have no...

  • Page 652

    614 Chapter 14Hey, 80% of our customers order “ground” beans. Can you make it so the ground bean type is already selected when the user loads the page?If you add an attribute called checked with a value of “checked” into your radio input element, then that element will be selected by def...

  • Page 653

    xhtml formsyou are here �615 <form action=”http://www.starbuzzcoffee.com/processorder.php” method=”POST”> <p> Choose your beans: <select name=”beans”> <option value=”House Blend”>House Blend</option> <op...

  • Page 654

    616 Chapter 14The final test driveSave your changes, reload, and check out the new form. Don’t you think it’s looking quite nice? Here’s our brand new checkboxes, with the catalog checkbox already checked.And a nice new text aera as well.Here’s what you get when you submit. The Web applic...

  • Page 655

    xhtml formsyou are here �617Stop right there. Do you think I didn’t see the way you slipped in that element name of “extras[]”? What’s with those square brackets! You have to explain that.But even if it’s valid, it doesn’t exactly look normal, does it? Here’s the deal: from the p...

  • Page 656

    618 Chapter 14<form action=”http://www.chooseyourmini.com/choice.php” method=”POST”> <p>Your information: <br /> Name: <input type=”text” name=”name” /><br /> Zip: <input type=”text” name=”zip” /><br /> </p> &...

  • Page 657

    xhtml formsyou are here �619name = __________________zip = ___________________model = _________________color = _________________caroptions[] = __________And here’s the form filled out.Match each piece of form data with its form name and put your answers here.“Buckaroo Banzai”Extra credit....

  • Page 658

    620 Chapter 14Now that we’ve got the form finished, can we talk about the method the browser uses to send this data to the server? We’ve been using “POST”, but you said there are other methods, too.POST and GET accomplish the same thing – getting your form data from the browser to a ser...

  • Page 659

    xhtml formsyou are here �621http://www.headfirstlabs.com/contest.php?firstname=buckaroo&lastname=banzaithere are noDumb QuestionsQ: Why is it called “GET” if we’re sending something to the server?A: Good question. What’s the main job of a browser? To get Web pages from a server. And...

  • Page 660

    622 Chapter 14For each description, circle either GET or POST depending on which method would be more appropriate. If you think it could be either, circle both. But be prepared to defend your answers...GET or POSTGET POST A form for typing in a username and password.GET POST A form for or...

  • Page 661

    xhtml formsyou are here �623I’ve been meaning to say, great job on the Bean Machine! This is really going to boost our coffee bean sales. All you need to do is give this a little style and we’re ready to launch it for our customers.Given everything you know about XHTML and CSS, how would yo...

  • Page 662

    624 Chapter 14Tonight’s talk: Table and CSS spar over how to lay out forms.TableCSSHey CSS, what’s happening?What on earth are you doing in this chapter, Table? What do you mean? I dropped by to help get these forms in shape. They’re looking a bit... well, ragged, if you ask me.I agree th...

  • Page 663

    xhtml formsyou are here �625TableCSSDude, you have no idea what you’re talking about. Forms should match the look and feel of the rest of the Web site. Users will be confused if they go to fill out a form and it doesn’t look like part of the site.I guess. But when it comes to laying out ...

  • Page 664

    626 Chapter 14To Table or Not to Table? That’s the question...You’re going to find people on both sides of this issue. Should you use CSS to layout your forms? Or tables? The harsh reality is that laying out forms with CSS is difficult. And, if you’d like to bend space and time to lay out y...

  • Page 665

    xhtml formsyou are here �627<form action=”http://www.starbuzzcoffee.com/processorder.php” method=”POST”><table> <tr> <th>Choose your beans:</th> <td> <select name=”beans”> <option value=”House Blend”>...

  • Page 666

    628 Chapter 14 <tr> <th>Ship to:</th> <td> <table> <tr> <td>Name:</td> <td> <input type=”text” name=”name” value=”” /> </td> ...

  • Page 667

    xhtml formsyou are here �629Test driving a very tabular formOpen “styledform.html” in your browser and take a look at the Starbuzz Bean Machine form in table format. It looks better, doesn’t it? All the labels and form elements are aligned, and it looks more professional. Now, we can u...

  • Page 668

    630 Chapter 14Styling the form and the table with CSSbody { background: #efe5d0 url(images/background.gif) top left; font-family: Verdana, Helvetica, Arial, sans-serif; margin: 20px;}table { border: thin dotted #7e7e7e; padding: 10px;}th { text-align: right; vertical-align: t...

  • Page 669

    xhtml formsyou are here �631The final test driveYou’re going to add two <link> elements to the <head> of your XHTML in “styledform.html”, linking in the Starbuzz style sheet from Chapter 12, “starbuzz.css”, and your new style sheet, “styledform.css”. Make sure you get ...

  • Page 670

    632 Chapter 14What more could possibly go into a form?We’ve covered just about everything you’ll regularly use in your forms, but there’s a few more elements you might want to consider adding to your form répertoire; so, we’re including them here just in case you want to take your own fo...

  • Page 671

    xhtml formsyou are here �633Here’s a whole new input element we haven’t talked about. If you need to send an entire file to a Web application, you’ll once again use the <input> element, but this time set its type to “file”. When you do that, the <input> element creates ...

  • Page 672

    634 Chapter 14The <form> element ndefines the form, and all form input elements are nested inside it.The action attribute contains the URL of the nWeb Application.The method attribute contains the method of nsending the form data: either POST or GET.A POST packages form data and sends it...

  • Page 673

    xhtml formsyou are here �635House BlendShade Grown Bolivia SupremoOrganic GuatemalaKenyaSubmitMarkup Magnets SolutionYour job is to take the form element magnets and lay them on top of the corresponding controls in the sketch. You won’t need all the magnets below to complete the job; some wil...

  • Page 674

    636 Chapter 14name = __________________zip = ___________________model = _________________color = _________________caroptions[] = __________“90050”“convertible”“chilired”“stripes”“Buckaroo Banzai”For each description, circle either GET or POST depending on which method would be...

  • Page 675

    xhtml formsyou are here �637 <form action=”http://www.starbuzzcoffee.com/processorder.php” method=”POST”> <p> Choose your beans: <select name=”beans”> <option value=”House Blend”>House Blend</option> <op...

  • Page 676

    638 Chapter 14Wouldn’t it be dreamy if this were the end of the book? If there were no bullet points or puzzles or XHTML listings or anything else? But that’s probably just a fantasy...Congratulations!You made it to the end.Of course, there’s still an appendix.And the index.And the colophon...

  • Page 677

    this is a new chapter639We covered a lot of ground, and you’re almost finished with this book. We’ll miss you, but before we let you go, we wouldn’t feel right about sending you out into the world without a little more preparation. We can’t possibly fit everything you’ll need to know i...

  • Page 678

    640 Appendix#1 More SelectorsWhile you’ve already learned the most common selectors, here are a few more you might want to know about... p:first-letter { font-size: 3em;}p:first-line { font-style: italic;}Pseudo-elements use the same syntax as pseudo-classes.Pseudo-elementsYou know all about ps...

  • Page 679

    leftoversyou are here �641Selecting by SiblingsYou can also select elements based on their preceding sibling. For example, say you want to select only paragraphs that have an <h1> element preceding them, then you’d use this selector:h1+p { font-style: italic;}This selector selects all ...

  • Page 680

    642 Appendix#2 FramesHTML allows you to divide a Web page into a set of frames, where each frame is capable of displaying one embedded Web page. You may have noticed pages with frames that allow you to visit a third party page while leaving the header and navigation of the original site intact. T...

  • Page 681

    leftoversyou are here �643#3 Multimedia & FlashBrowsers can play sounds and display videos or even interactive content like Flash applications in a Web page. HTML supports these types of media through an element called <object> that is responsible for embedding external content into y...

  • Page 682

    644 Appendix#4 Tools for Creating Web PagesNow that you know XHTML and CSS you’re in a good position to decide if tools like Dreamweaver, GoLive, and FrontPage are for you. All these applications attempt to provide what-you-see-is-what-you-get (WYSIWYG) tools for creating Web pages. We’re sur...

  • Page 683

    leftoversyou are here �645#5 Client-side ScriptingHTML pages don’t have to be passive documents; they can also have content that is executable. Executable content gives your pages behavior. You create executable content by writing programs or scripts using a scripting language. While there ar...

  • Page 684

    646 Appendix#6 Server-side ScriptingMany Web pages aren’t created by hand, but are generated by Web applications running on a server. For example, think about an online order system where a server is generating pages as you step through the order process. Or, an online forum, where there’s a ...

  • Page 685

    leftoversyou are here �647#7 Tuning for Search EnginesMany users will find your site through search engines (like Google and Yahoo!). In some cases you may not want your site to be listed in the search engine rankings, and you can use XHTML to request that they not be listed. But, in other case...

  • Page 686

    648 Appendix#8 More about Style Sheets for PrintingAs you saw in Chapter 10, you can use the media attribute of the <link> element to specify an alternative media type. If you specify a value of “print” in the media attribute of a style sheet, then that style sheet is used when your pag...

  • Page 687

    leftoversyou are here �649#9 Pages for Mobile DevicesDo you want your Web pages to be usable on mobile devices, like cell phones and personal digital assistants (PDAs)? If you do, then you need to keep some things in mind when creating your pages. While mobile devices are getting more sophist...

  • Page 688

    650 Appendix#10 Blogs<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”><head> <title><$BlogPageTitle$></titl...

  • Page 689

    this is the index651IndexghgSymbols!important 3, 477#d2b48c (color in hex code) 3, 32&amp; entity 3,114, 272& character 3,114, 272&gt; entity 3, 114&lt; entity 3,114.. (dot dot) notation 3,64, 65/* and */ 3,315:8000 port 3, 147<!-- and --> (see comments)< ch...

  • Page 690

    the index652 indexblock elementsflow 3,488–489, 493–494, 542strict HTML 4.01 3, 253–254versus inline elements 3,94–97<blockquote> element 3, 89–92, 94multiple paragraphs 3,92nested 3, 362nesting <q> inside 3, 92strict HTML 4.01 3, 254Blogger.com 3, 650blogs 3,6...

  • Page 691

    the indexyou are here �653hex codes 3, 379HTML 4.01 3, 261<img> element 3,214inline elements 3,117JPEG versus GIF 3, 214layouts 3, 542linking 3,69, 161lists 3, 117, 581margins 3, 424padding 3, 424positioning 3,542pseudo-classes 3, 482relative paths 3, 69<span> eleme...

  • Page 692

    the index654 indexCSS (continued)using with XHTML 3,289, 290validating 3, 328–329versus HTML 3,32, 34–35versus XHTML 3, 324–325.css file 3, 303lounge.css filecreating 3, 304linking 3,305CSS Up Closebackground-image property 3, 406–407background-position property 3, 406backgrou...

  • Page 693

    the indexyou are here �655FFantasy font family 3,345Fetch 3,134<fieldset> element 3, 632filesdirectories versus files in browsers 3,140fixing broken images 3, 66–67loading through forms 3,633organizing files and folders 3, 56–65separators 3,65updating file locations 3, 5...

  • Page 694

    the index656 indexforms (continued)picking names for elements 3,607POST 3,596, 620–621radio buttons 3,599, 607, 612–613submit button 3, 607submit input 3, 598submitting 3, 606text input 3,598text limitations 3,607what can go into 3, 598–601(see also <form> element)<fr...

  • Page 695

    the indexyou are here �657providers 3,127renaming root folder 3,131href attribute 3,47–49.. (dot dot) notation 3, 64Attributes Exposed 3,53linking style sheet 3, 305relative paths 3, 58–65versus id attribute 3,155HTMLattributes 3, xxxiibackwards compatibility of XHTML 3,276c...

  • Page 696

    the index658 indeximages (continued)users scrolling to see 3,182which format to use 3,206<img> element 3, 26, 101, 173–177adding multiple images 3, 193alt attribute 3, 176, 237browsers 3, 166–168fixing broken images 3, 66–67linking images 3, 55nesting HTML problems 3,251sr...

  • Page 697

    the indexyou are here �659destination anchors 3,151–155from html to style sheets 3,305grouping links and text into paragraph 3, 145images 3, 55new window 3,157–159other Web sites 3,144–147relative paths 3, 58–65style sheets 3,388(see also <a> element)liquid layout 3...

  • Page 698

    the index660 indexNo Dumb Questions!important 3,477absolute path 3,139absolute positioning 3, 522<a> elementlinking text 3, 55anchors 3, 155attributes 3, 52order 3, 155blink decoration 3,377block elements 3, 494<blockquote> element 3,92, 255border-spacing property 3, 56...

  • Page 699

    the indexyou are here �661JPEG quality setting 3, 190launching new window 3,158linebreaks 3, 95lists 3, 108list style 3,580logo 3,213margins 3, 396<meta> tag 3, 240nested lists 3, 108nesting HTML problems 3,251number of style rules 3, 297<option> element 3, 607ordere...

  • Page 700

    the index662 indexpasswords in forms 3,633PDAs 3,2, 649<p> elementsetting color 3, 289, 292style 3, 290percentage (%) 3,352versus em 3, 358Perl 3, 646photos (see images; JPEG)Photoshop Elements 3, 184–190Color Picker 3, 209, 372setting matte color 3, 209–211transparent imag...

  • Page 701

    the indexyou are here �663shorthand 3,458–461background 3, 459border 3, 459font 3, 460margin 3,458–459padding 3, 458text-align 3, 447–449text-decoration 3,343, 375–378removing 3,378width, <div> element 3,442–446proprietary document format 3, 6protocols 3,147PSD...

  • Page 702

    the index664 indexspanning rows and columns 3, 568–571special characters 3, 114–115&amp; entity 3, 114& character 3, 114&gt; entity 3,114&lt; entity 3, 114< character 3, 114> character 3,114copyright symbol 3,114specificity and CSS 3,476–477, 479speech br...

  • Page 703

    the indexyou are here �665mobile devices 3,422–423multiple 3, 421order 3,421printing 3, 648tables 3, 560submit button 3,607symbols 3, 114T<table> element 3, 551–559captions and summaries 3,557–558<form> element 3,627–628nested 3, 573<td> element 3, 552...

  • Page 704

    the index666 indextext, font size (continued)em 3,353em versus percentage (%) 3,358keywords 3,354not defining 3, 358percentage (%) 3,352pixels (px) 3,352, 358specifying 3, 354–355Tony’s Segway Journal 3, 356–357italics 3, 361–362line-height property 3, 389–390overview 3,...

  • Page 705

    the indexyou are here �667positioning 3,532fixed 3,535<q> element 3, 86text scaling 3,355W3C validator 3, 236Web-safe colors 3, 373Web browsers (see browsers)weblogs 3,650Web pagesignoring (search engines) 3, 647linking to other 3,144–147quick overview 3, 2rankings 3,64...

  • Page 706

    www.freepdf-books.com

Free CSS Books, CSS Book Pdf, CSS Pdf Books, CSS Pdf Books Download, CSS Pdf Books Free Download, Free HTML Books, HTML Book Pdf, HTML Pdf Books, HTML Pdf Books Download, HTML Pdf Books Free Download, Free HTML CSS Books, HTML CSS Book Pdf, HTML CSS Pdf Books, HTML CSS Pdf Books Download, HTML CSS Pdf Books Free Download, Free HTML CSS Books, HTML CSS Book Pdf, HTML CSS Pdf Books, HTML CSS Pdf Books Download, HTML CSS Pdf Books Free Download,