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...
www.freepdf-books.com
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...
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...
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...
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...
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...
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...
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
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...
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...
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...
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...
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...
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...
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 ...
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 ...
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 ...
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...
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...
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...
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...
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...
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...
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...
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...
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
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...
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...
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...
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 ...
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...
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...
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...
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...
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...
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...
www.freepdf-books.com
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...
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...
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...
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...
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...
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...
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,...
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...
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 ...
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...
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...
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...
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 ...
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 ...
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 ...
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 ...
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...
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 “...
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...
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 ...
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....
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...
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 ...
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...
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 “/”...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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 ...
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...
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:...
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...
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...
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...
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...
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...
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...
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...
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<...
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...
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=...
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...
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 ...
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...
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...
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, ...
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...
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...
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...
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> ...
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...
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...
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...
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...
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...
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’...
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...
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...
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 ...
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...
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...
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 "...
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”>...
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...
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...
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...
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...
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...
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...
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...
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,...
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...
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>...
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...
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...
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...
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 ...
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>...
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 ...
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...
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...
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...
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...
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’...
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...
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...
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 ...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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 <...
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...
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...
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...
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...
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...
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 ...
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 ...
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.....
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 ...
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...
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...
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...
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>...
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...
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 ...
www.freepdf-books.com
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 ...
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...
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...
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...
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...
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>...
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...
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...
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....
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 ...
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...
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 ...
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 ...
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...
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...
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 ...
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...
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&...
getting connected you are here �143EDCBAWrite the URL here.www.freepdf-books.com
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...
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...
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...
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...
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...
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...
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...
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...
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 ...
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 ...
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...
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...
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...
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...
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 ...
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...
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...
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...
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>...
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...
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; ...
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...
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 ...
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>...
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...
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 ...
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...
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 ...
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
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 ...
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 ...
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...
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...
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 ...
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? ...
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> ...
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....
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...
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...
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...
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...
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. ...
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 ...
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...
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...
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...
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...
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...
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...
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> ...
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...
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...
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...
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> ...
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...
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.....
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> ...
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...
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...
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...
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”...
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...
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...
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...
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....
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...
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...
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”...
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...
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...
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...
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...
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...
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...
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...
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...
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=”....
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]...
www.freepdf-books.com
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...
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...
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...
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 ...
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...
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...
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...
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...
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...
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...
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...
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 ...
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 ...
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 ...
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...
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...
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...
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...
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...
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....
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...
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...
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...
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...
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 ...
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...
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...
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 ...
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...
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...
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>...
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...
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...
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...
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...
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...
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...
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...
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: ...
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...
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...
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...
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...
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...
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....
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...
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...
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 ...
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...
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...
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...
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:&...
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...
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...
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...
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) ...
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...
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...
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 ...
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...
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...
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...
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, ...
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...
getting started with cssyou are here �287www.freepdf-books.com
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...
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...
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...
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...
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...
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...
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...
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...
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;...
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...
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...
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...
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...
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
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...
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...
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...
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...
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...
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...
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...
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...
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...
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 ...
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...
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...
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...
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 ...
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...
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’...
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 { ...
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...
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...
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 &...
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...
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...
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...
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 ...
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...
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...
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 ...
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...
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...
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 ...
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...
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
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
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 ...
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...
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...
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> ...
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...
www.freepdf-books.com
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,...
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 ...
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...
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...
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. ...
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...
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 ” ...
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...
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...
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...
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...
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...
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 ...
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...
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...
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 ...
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...
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...
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...
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...
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 ...
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...
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...
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 ...
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...
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...
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 ...
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...
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...
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...
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...
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...
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...
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 ...
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...
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...
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...
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; ...
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 ...
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...
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...
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...
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...
www.freepdf-books.com
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 ...
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...
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...
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...
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...
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...
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 ...
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...
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...
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 (...
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...
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...
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...
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...
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...
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...
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...
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 ...
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...
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...
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...
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 ...
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...
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...
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 ...
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...
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...
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 ...
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...
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...
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...
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....
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...
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...
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...
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...
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...
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...
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...
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 ...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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 ...
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...
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...
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...
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 ...
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...
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&...
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...
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...
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...
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...
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. ...
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...
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;...
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...
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...
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 ...
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 ...
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>...
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...
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...
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...
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...
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...
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...
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...
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 ...
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...
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 ...
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 <...
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...
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...
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 ...
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...
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...
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...
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...
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...
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...
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...
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 ...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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</...
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...
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...
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...
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...
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...
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....
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...
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...
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...
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...
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...
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 ...
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...
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...
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...
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...
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;}#...
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-...
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...
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...
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’...
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...
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. ...
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 ...
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...
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...
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...
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...
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...
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...
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...
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...
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 ...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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 ...
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. ...
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...
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...
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...
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...
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...
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 ...
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...
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 ...
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...
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...
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...
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...
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...
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...
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...
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; ...
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...
www.freepdf-books.com
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...
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...
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...
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...
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...
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. ...
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...
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...
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 ...
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...
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...
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...
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...
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...
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 ...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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 ...
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...
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 ...
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...
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...
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, ...
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
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-...
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> ...
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> ...
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...
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...
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...
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...
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 ...
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...
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...
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...
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 ...
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...
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...
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...
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...
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 ...
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...
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=...
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 ...
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....
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 ...
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...
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” />&...
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....
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” />...
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...
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> ...
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...
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...
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...
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...
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...
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...
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...
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> &...
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....
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...
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...
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...
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...
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...
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 ...
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...
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”>...
628 Chapter 14 <tr> <th>Ship to:</th> <td> <table> <tr> <td>Name:</td> <td> <input type=”text” name=”name” value=”” /> </td> ...
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...
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...
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 ...
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...
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 ...
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...
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...
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...
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...
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...
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...
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...
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 ...
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...
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...
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...
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...
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 ...
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...
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...
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...
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...
this is the index651IndexghgSymbols!important 3, 477#d2b48c (color in hex code) 3, 32& entity 3,114, 272& character 3,114, 272> entity 3, 114< entity 3,114.. (dot dot) notation 3,64, 65/* and */ 3,315:8000 port 3, 147<!-- and --> (see comments)< ch...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
the index664 indexspanning rows and columns 3, 568–571special characters 3, 114–115& entity 3, 114& character 3, 114> entity 3,114< entity 3, 114< character 3, 114> character 3,114copyright symbol 3,114specificity and CSS 3,476–477, 479speech br...
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...
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,...
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...
www.freepdf-books.com