Html 4 for dummies
Upcoming SlideShare
Loading in...5
×
 

Html 4 for dummies

on

  • 43,796 views

 

Statistics

Views

Total Views
43,796
Views on SlideShare
43,796
Embed Views
0

Actions

Likes
0
Downloads
14
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html 4 for dummies Html 4 for dummies Document Transcript

  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition Back Cover ISBN:0764519956 by Ed Tittel and Natanya Pitts Do you speak HTML? Never fear—this friendly book will save you from getting tangled in the language of the Web. John Wiley & Sons © 2003 (408 pages) It’s loaded with examples, illustrations, and step-by-step instructions on everything from basic tags and attributes Whether asked about, build a simple, text-oriented animation, to cool new stuff our readers your goal is tolike adding sound, video, and Web site making pages dynamic with scripting, and more.or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. About the Authors Table of Contents veteran of the computer industry, ahs worked on over 20 For Dummies books. Ed Tittel, a 20-year HTML 4 For Dummies, 4th Edition Natanya Pitts is a writer, trainer, Web guru, and HTML instructor. Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, HTML 4 ForTittel and Natanya4th Edition Edition Dummies, 4th ISBN:0764519956 by Ed Pitts John Wiley & by Ed Tittel & Natanya Pitts Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepPublished by by-step Wiley Publishing, Inc. book will put you on the right track. 909 Third Avenue New York, NY 10022 Table of Contents www.wiley.com HTML 4 For Dummies, 4th Edition Introduction© 2003 by Wiley Publishing, Inc., Indianapolis, Indiana Copyright Part I - Meeting HTML in Its Natural Environment Chapter 1 by The Least You Need to Know about HTML and the Web Published - Wiley Publishing, Inc., Indianapolis, Indiana Chapter 2 - HTML at Work on the Web Published simultaneously in Canada Page - Creating Your First HTML Chapter 3 Part II - Getting Started with HTML No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by Chapter 4 Structuring Your HTML photocopying, recording, scanning or otherwise, except as permitted any means,- electronic, mechanical,Documents Chapter Sections 107 or 108 of ResourcesUnited States Copyright Act, without either the prior written 5 - Linking to Online the 1976 under Chapter 6 permission - Finding and Using Images of the Publisher, or authorization through payment of the appropriate per-copy fee to the Chapter 7 ClearanceYour Page with Formatting Copyright - Top Off Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 750Part IIIRequests to the Publisher Level 4470. - Taking HTML to the Next for permission should be addressed to the Legal Department, Wiley Chapter 8 Publishing, - HTML Tables Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317) 572-4447, email:permcoordinator@wiley.com. Chapter 9 - HTML Frames Chapter 10 - HTML Forms Chapter 15 - How HTML Relates to Other Markup Languages Trademarks: Wiley, the Wiley Publishing logo, Part IV - Extending HTML with Other TechnologiesFor Dummies, the Dummies Man logo, A Reference for the Rest of - Getting Stylish withWay, Dummies Daily, The Fun and Easy Way, Dummies.com and related Us!, The Dummies CSS Chapter 11 trade dress are trademarks or registered trademarks of Wiley Publishing, Inc., in the United States and Chapter 12 - HTML and Scripting other countries, and may not be used without written permission. All other trademarks are the property of Chapter 13 - Making Multimedia Magic their respective owners. Wiley Publishing, Inc., is not associated with any product or vendor mentioned in Chapter 14 - Integrating a Database into Your HTML this book. Part V ofFrom Web Page to Web Warranty: Limit - Liability/Disclaimer of Site While the publisher and author have used their best efforts in Chapter 16 this book, theyHTML Toolbox preparing - Creating an make no representations or warranties with respect to the accuracy or Chapter 17 - Setting Up Your Online Presence completeness of the contents of this book and specifically disclaim any implied warranties of merchantability or fitness for User Interface Chapter 18 - Creating a Great a particular purpose. No warranty may be created or extended by sales representatives of Tens Part VI - The Partor written sales materials. The advice and strategies contained herein may not be suitable for your situation.Ways should consult Web a professional where appropriate. Neither the publisher nor You to Exterminate with Bugs Chapter 19 - Ten author shall Ten HTML Do’s and Don’ts Chapter 20 - be liable for any loss of profit or any other commercial damages, including but not limited to special, Appendixes Part VII - incidental, consequential, or other damages. Appendix A - HTML 4 Tags For general information on our other products and services or to obtain technical support, please contact our Customer Care Department within the U.S. at 800-762-2974, outside the U.S. at 317-572-3993, or fax Appendix C - Glossary 317-572-4002. Appendix B - HTML Character Codes Index Cheat Sheet publishes Forbooks in a variety of electronic formats. Some content that appears in print may Wiley also - HTML 4 its Dummies, 4th Edition not be available in electronic books. List of Figures List of Tables Library of Congress Control Number: 2002114830 List of Listings List of Sidebars ISBN: 0-7645-1995-6 Manufactured in the United States of America 10 9 8 7 6 5 4 3 2 1 4O/TR/QR/QT/IN About the Authors
  • Ed Tittel is a full-time writer-trainer who 4th Edition small gang of technoids at LANWrights, his company HTML 4 for Dummies, manages a in Austin, TX. Ed by Ed Tittel and Natanya Pitts press since 1986 and has worked on more than 100 books. has been writing for the trade ISBN:0764519956 In addition to this John Wiley & worked2003 more than 30 books for Wiley, including Networking Windows NT title, Ed has Sons © on (408 pages) Server For Dummies,XMLyour goal is to build aNetworking with NetWare site Dummies. For Dummies, and simple, text-oriented Web For Whether or one loaded with frames, graphics, and animation, this step- Ed teaches NetWorld + Interop and for private clients track. by-step book will put you on the right on demand. He also writes regularly for Certification magazine, Cramsession.com, and a variety of Web sites. When he's not busy doing all that work stuff, Ed likes to travel, shoot pool, spend time with his family, and wrestle with his indefatigable Labrador retriever, Table of Contents Blackie. HTML 4 For Dummies, 4th Edition You can contact Ed Tittel by e-mail at etittel@lanw.com. Introduction Part I - Meeting HTML in Its Natural Environment Natanya Pitts is a writer, trainer, and Web guru in Austin, TX. She has extensive experience in the - The Least You Need to Know about HTML and the Web technical training realm, including overseeing the development of the materials for in-class and WebChapter 2 - HTML at Work on the based training offerings. She also Web helped establish the Austin Community College Webmaster Certification Chapter 3 andCreatingin the program for two years. Natanya has authored, coauthored, or contributed to program - taught Your First HTML Page Part II than a dozen Web- and Internet-related titles, including XML For Dummies (1st, 2nd, and 3rd more - Getting Started with HTML Chapter 4 TheStructuring Your HTML Documents Editions), - XML Black Book, and XML In Record Time. Natanya has also taught classes on HTML, Chapter 5 HTML, andto Online several national conferences (including MacWorld, Networld + Interop, and Dynamic - Linking XML at Resources Chapter 6 Finding and the NASA Ames Research Center. HP World), -as well as at Using Images Chapter 1 Chapter 7 - Top Off Your Page with Formatting You can contact Natanya Pitts at natanya@io.com. Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Authors' Acknowledgments Chapter 10 this HTML Forms iteration of HTML For Dummies, we'd like to start by thanking our many readers Because - is the eighth Part making this book a continued success. We'd for IV - Extending HTML with Other Technologies also like to thank them and the Wiley editorial team for Chapter 11 - Getting Stylish with CSS the feedback that drives the continuing improvement of this book's content. Please, don't stop now - tell us Chapter 12 want to do with HTML, and what you do and don't like about this book. what you - HTML and Scripting Chapter 13 - Making Multimedia Magic Let me go onIntegrating a Database into Your HTML by thanking my sterling coauthor, Natanya Pitts, for her efforts on this revision. I am eternally grateful for your ideas, your hard work, and your experience in reaching an audience of budding Web Chapter 15 - How HTML Relates to Other Markup Languages experts. Chapter 14 Part V - From Web Page to Web Site Chapter 16 - to thank the HTML Toolboxat LANWrights and Wiley for their efforts on this title. At LANWrights, Next, I'd like Creating an great teams Chapter 17 thanks go toYour Online Presence her services and the time spent on this book. Because Mary my fervent - Setting Up Mary Burmeister, for Chapter 18 - Creatinga bit of copy, she gets 'nodding credit' for her more substantive contributions, too. herself revised quite a Great User Interface Part VI - The Part of Tens I Thanks Mary! At Wiley, must thank Bob Woerner and Nicole Haims for their outstanding efforts, and ChapterChilds-Helton forto Exterminate Web Bugs our words. Other folks we need to thank include the folks Barry 19 - Ten Ways his marvelous ways with Chapter 20 - Ten HTML Do’s and Don’ts page layouts, and the Media Development team for their assistance in Composition Services for their artful Part VII - HTML For Dummies with the Appendixes Web site on Dummies.com. Appendix A - HTML 4 Tags I'd like to thank and welcome my lovely wife, Dina Kutueva-Tittel, for signing up with me all the way from Kyrgyzstan, and for making the big move from central Asia to central Texas. Welcome to my home, my Appendix C - Glossary heart, and my house, honey! Finally, I'd like to thank my parents, Al and Ceil, for all the great things they Index did for me. I must also thank my faithful sidekick, Blackie, who's always ready to pull me away from the Cheat Sheet - HTML 4 For Dummies, 4th Edition keyboard - sometimes literally - to explore the great outdoors. List of Figures - Ed Tittel Appendix B - HTML Character Codes List of Tables List of and foremost I'd like to thank my coauthor, Ed Tittel, for giving me the opportunity to work on this First Listings book again. It's List of Sidebars been fun! In addition to being a great coauthor, you've been a great friend. This book wouldn't have been possible without the editorial and managerial efforts of Mary Burmeister. Thank you so much for keeping me on track and keeping me sane. Special thanks to my beloved husband, Robby, and my beautiful daughter, Alanna. All things are easier because you are a part of my life. Thanks to my parents, Charles and Swanya, for always believing in me and supporting me. - Natanya Pitts Publisher's Acknowledgments
  • We're proud of this book; please send us your comments through our online registration form located at HTML 4 for Dummies, 4th Edition www.dummies.com/register/. by Ed Tittel and Natanya Pitts ISBN:0764519956 John Wiley & Sons © 2003 (408 pages) Some of the people who helped bring this book to market include the following: Whether your goal is to build a simple, text-oriented Web site Acquisitions, Editorial, and Media Development and animation, this stepor one loaded with frames, graphics, by-step book will put you on the right track. Senior Project Editor: Nicole Haims Table of Contents Acquisitions Editor: HTML 4 For Dummies, 4th Edition Bob Woerner Introduction Part I - Meeting HTML in Its Natural Environment Senior Copy Editor: - The Least You Need to Know about HTML and the Web Barry Childs-Helton Chapter 1 Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Technical Editor: Your First HTML Page Part II - Getting Started with HTML Matthew Haughey Chapter 4 - Structuring Your HTML Documents Editorial - Linking Chapter 5 Manager: to Online Resources Leah Cameron Chapter 6 - Finding and Using Images Chapter 7 PermissionsTop Off Your Page with Formatting Editor: Carmen Krikorian Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter Development Specialist: Media 9 - HTML Frames Megan Decraene Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Media Development Manager: CSS - Getting Stylish with Laura VanWinkle Chapter 11 Chapter 12 - HTML and Scripting Chapter Development Supervisor: Media 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Richard Graves Chapter 15 - How HTML Relates to Other Markup Languages Editorial Assistant: Part V - From Web Page to Web Site Amanda - Creating an HTML Toolbox Chapter 16Foxworth Chapter 17 - Setting Up Your Online Presence Chapter 19 - Ten Ways to Exterminate Web Bugs Cartoons: Chapter 18 - Creating a Great User Interface Rich Tennant Part VI - The Part of Tens www.the5thwave.com Chapter 20 - Ten HTML Do’s and Don’ts Production Part VII - Appendixes Project Coordinator: Appendix A - HTML 4 Tags Dale White Appendix B - HTML Character Codes Appendix C - Glossary Layout and Graphics: Index Michael Kruzil Cheat Sheet - HTML 4 For Dummies, 4th Edition Kristin McMullan List of Figures Tiffany Muth List of Tables Proofreaders: List of Listings Tyler Connoley List of Sidebars John Greenough Susan Moritz TECHBOOKS Production Services Indexer: TECHBOOKS Production Services Special Help
  • Diana Conover HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts Publishing and Editorial for Technology Dummies ISBN:0764519956 John Wiley & Sons © 2003 (408 pages) Vice President and Executive Group Publisher Whether your goal is to build a simple, text-oriented Web site Richard Swadley one loaded with frames, graphics, and animation, this stepor by-step book will put you on the right track. Vice President and Publisher Andy Cummings Table of Contents Editorial Dummies, HTML 4 ForDirector 4th Edition Mary C. Corder Introduction Part I - Meeting HTML in Its Natural Environment Publishing for Consumer Dummies Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Vice President and Publisher Web Chapter Graves SteeleYour First HTML Page Diane 3 - Creating Part II - Getting Started with HTML AcquisitionsStructuring Your HTML Documents Chapter 4 - Director Joyce Pepple Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Composition Services Part III - Taking HTML to the Next Level Vice President of Production Services Chapter FaheyHTML Tables Gerry 8 Chapter 9 - HTML Frames Director Chapter 10of-Composition Services HTML Forms Debbie Stailey Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 Dummies, Introduction forand Natanya4th Edition by Ed Tittel Pitts Overview ISBN:0764519956 John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepWelcome to the wild, wacky, and wonderful possibilities inherent on the World Wide Web, simply referred by-step book will put you on the right track. to as the Web. In this book, we introduce you to the mysteries of the Hypertext Markup Language (HTML), which is used to build Web pages, and initiate you into the still-select, but rapidly growing, community of Table of Contents Web authors. HTML 4 For Dummies, 4th Edition Introduction If you've tried to build your own Web pages before but found it too forbidding, now you can relax. If you can Part Ia telephone or findIts Natural in the morning, dial - Meeting HTML in your keys Environment Chapter 1 you too can become an HTML author. (No kidding! ) - The Least You Need to Know about HTML and the Web When we first wrote this book,the Web a straightforward approach to the basics of authoring documents we took - HTML at Work on for the Web. In this edition, for the latest generation of Web page designers, we mix the best of old and Chapter 3 - Creating Your First HTML Page new approaches. As always, we keep the amount of technobabble to a minimum and stick with plain Part II - Getting Started with HTML English whenever possible. Besides plain talk about hypertext, HTML, and the Web, we include lots of Chapter 4 - Structuring Your HTML Documents examples, plus tag-by-tag instructions to help you build your very own Web pages with minimum muss and Chapter 5 - Linking to Online Resources fuss. We also provide more examples about what to do with your Web pages once created, so you can Chapter 6 Finding and Using share them-with the world. We Images also explain the differences between HTML 4 and XHTML, so you can Chapter 7 you Top Off Your Page the most widely used and popular Web markup language (HTML) or the decide if - want to stick with with Formatting Part IIIand greatest Webthe Next Level latest - Taking HTML to markup language (XHTML). Chapter 2 Chapter 8 - HTML Tables We also - HTML Frames Chapter 9 have a companion Web site for this book that contains HTML examples from the chapters in usable form HTML Forms Chapter 10 - - plus a number of pointers to interesting widgets that you can use to embellish your own documents and astound your friends. Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • About This HTML 4 for Dummies, 4th Edition Book by Ed Tittel and Natanya Pitts ISBN:0764519956 Think of this book as a friendly, approachable guide to taking up the tools of HTML and building readable, John Wiley & Sons © 2003 (408 pages) attractive pages for the Web. Although HTMLaisn't hard to learn, it does pack a plethora of details. You Whether your goal is to build simple, text-oriented Web site need to wrestle withone loaded with frames, graphics, and animation, this stepor these details some while you build your Web pages. Some sample topics you find in this book include by-step book will put you on the right track. Designing and building Web pages Table of Contents HTML Uploading and publishing Web pages for the world to see 4 For Dummies, 4th Edition Introduction Creating interesting page layouts Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You your Web pages Testing and debuggingNeed to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Although, - Creating Your First HTML Page Chapter 3 at first glance, building Web pages may seem to require years of arduous training, advanced aesthetic capabilities, with HTML Part II - Getting Startedand ritual ablutions in ice-cold streams, take heart: It just ain't so. If you can tell somebody how to drive across town to your house, you can certainly build a Web document that does Chapter 4 - Structuring Your HTML Documents what you - Linking to Online Resources Chapter 5 want it to. The purpose of this book isn't to turn you into a rocket scientist (or, for that matter, a rocket 6 - Finding and Using Images Chapter scientist into a Web site). The purpose is to show you all the design and technical elements you need to Chapter 7buildTop Off Your Page with Formatting - a good-looking, readable Web page, and to give you the know-how and confidence to do it! Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 Book How to Use Thisfor Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 This book tells you how to useSons © 2003 (408 pages) page up and running on the World Wide Web. We tell you what's invo John Wiley & HTML 4 to get your ideas and information to the whole online worldsimple, text-orientedwant to do - and maybe have some high-tech fun com Whether your goal is to build a - if that's what you Web site or one loaded with frames, graphics, and animation, this step- All HTML code appears in monospaced typethe right track. by-step book will put you on such as this: <head><title>What's in a Title?</title></head>... Table of Contents HTML 4 you Dummies, 4th Edition When For type HTML tags or other related information, be sure to copy the information exactly as you see it between the Introduction that makes HTML work. Other than that, you find out how to marshal and manage the content that makes y of the magic Part I - Meeting HTML in Its Naturalwork. elements of HTML with your own Environment Chapter 1 - The Least You Need to Know about HTML and the Web The margins HTMLbook don't give us the same room as the vast reaches of cyberspace. Therefore, some long lines of H Chapter 2 - of a at Work on the Web Resource Locators), may wrap HTML Page line after we present them here. Remember that your computer shows such w Chapter 3 - Creating Your First to the next typing -that hunk of code, keep it as one line. Don't insert a hard return if you see one of these wrapped lines. We clue yo Part II Getting Started with HTML line at 4 - Structuring Your HTML character, Chapter a slash, or other appropriate Documents (to imply 'but wait, there's more!') and slightly indenting the overage, as in http://www.infocadabra.transylvania.com/nexus/plexus/lexus/ praxis/okay/this/is/a/makeChapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Tip HTML doesn't care if you type tag text in uppercase, lowercase, or both (except for character entities, also known a of this book). To make your own work look like ours as much as possible, enter all HTML tag text in lowercase only. Tho Chapter 8 - HTML Tables reversal of earlier instructions. That it is! But the keepers of the eternal and ever-magnanimous standard of HTML, the W Chapter 9 - HTML Frames so we changed our instructions to follow their lead. We may not make the rules, but we do know how to play the game! Part III - Taking HTML to the Next Level Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition Three Presumptuous Assumptions by Ed Tittel and Natanya Pitts ISBN:0764519956 They say that making Wiley & Sons © 2003 (408 pages) of the person who makes them and the person who is John assumptions makes a fool out subject to those assumptions (and just who aresimple, text-oriented Web site we know, but . . . never mind). Whether your goal is to build a They, anyway? We assume Even so, practicalityone loaded with we make a few assumptions about you, our gentle reader: or demands that frames, graphics, and animation, this stepby-step book will put you on the right track. You can turn your computer on and off. Table of Contents You know how to use a mouse and a keyboard. HTML 4 For Dummies, 4th Edition You want to build your own Web pages for fun, for profit, or for your job. Introduction Part I - Meeting HTML in Its Natural Environment In addition, we assume you already have a working connection to the Internet, and one of the many fine Chapter 1 - The Least You hook, Know about HTML and the Web Web browsers available byNeed toby crook, or by download from that same Internet. You don’t need to be Chapter 2 logician or aWork on in the arcane arts of programming, nor do you need a Ph.D. in computer a master - HTML at wizard the Web Chapter 3 You Creating Your First HTML Page science. - don’t even need a detailed sense of what’s going on in the innards of your computer to deal Part II - Getting Started with HTML with the material in this book. Chapter 4 - Structuring Your HTML Documents If you 5 - Linking to Online Resources Chaptercan write a sentence and know the difference between a heading and a paragraph, you’re better off than nine - of ten and Using Images Chapter 6 outFinding playground bullies — and you can build and publish your own documents on the Web. If you 7 an active imagination and the ability Chapterhave - Top Off Your Page with Formatting to communicate what’s important to you, even better — you’ve already HTML to the Next ingredients Part III - Taking mastered the key Level necessary to build useful, attractive Web pages. The rest consists of details, Tables help you with those! and we Chapter 8 - HTML Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML for Dummies, 4th How This Book4Is Organized Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 This book contains seven major parts, arranged like Russian Matrioshka,otherwise known as nesting John Wiley & Sons © 2003 (408 pages) dolls: All these parts contain three or to build a simple, text-oriented Webcontains several modular sections. Whether your goal is more chapters, and each chapter site Any time you need help loaded with frames, graphics, and animation, this step- you like, or use the Table of or one or information, pick up the book and start anywhere by-step book will put you or keywords. Contents or Index to locate specific topicson the right track. Here is a breakdown of the parts and what you find in each one. Table of Contents HTML 4 For Dummies, 4th Edition Part I: Meeting HTML in Its Natural Environment Introduction Part I - Meeting HTML in Its Natural Environment This part sets the stage and includes an overview of and introduction to the Web and the software that Chapter 1 The Least You Need This section HTML and the Web people use -to mine its treasures.to Know aboutalso explains how the Web works, including the HTML to Chapter this book is devoted, on the Web which 2 - HTML at Work and the server-side software and services that deliver information to end-users Chapter of us are whenYour First HTML Page with the logical innards of our systems). (as all 3 - Creating we're not doing battle Part II - Getting Started with HTML HTML 4 - Structuring Your HTML pages, are Chapter documents, also called WebDocuments the fundamental units of information organization and delivery the Web. Here, you also discover what HTML is about and how hypertext can enrich ordinary Chapter 5 on - Linking to Online Resources text. Next, - Finding walk on Images Chapter 6 you take aand Usingthe Web side and build your very first HTML document. Chapter 7 - Top Off Your Page with Formatting Part II: Getting Started with HTML Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables HTML 9 - ordinary text Chapter mixes HTML Frames with special strings of characters, called markup, used to instruct browsers how to display - HTML Forms Chapter 10 HTML documents. In this part of the book, you find out about markup in general and HTML in particular. We start with a fascinating discussion Part IV - Extending HTML with Other Technologies of HTML document organization and structure (well . . . we think it's-fascinating, andwith CSS do, too). Next, we tackle how the hyperlinks that put the H into hope you Chapter 11 Getting Stylish HTML work. After that we discuss how you can find and use graphical images in your Web pages, and Chapter 12 - HTML and Scripting make some fancy formatting maneuvers to spruce up those pages. Chapter 13 - Making Multimedia Magic Chapter 14 - this part of the book, we include HTML Throughout Integrating a Database into Your discussion of HTML markup elements (also known as tags) Chapter 15they work. Thus, at the same time you Languages to lay out and design Web pages, you'll also and how - How HTML Relates to Other Markup learn how Part V - From the not-so-mysterious markup learn about Web Page to Web Site Chapter 16 that really makes HTML work. - Creating an HTML Toolbox By the 17 Chapter time-you finish Part II, Online Presence a good overall idea of what HTML is, what it can do, and how Setting Up Your expect to have you can use Creating a Chapter 18 - it yourself. Great User Interface Part VI - The Part of Tens Ten Ways HTML to Web Next Part III: -Taking to Exterminatethe Bugs Level Chapter 19 Chapter 20 - Ten HTML Do’s and Don’ts Part III - Appendixes Part VII takes the same approach used in Part II and kicks it up a notch. That is, it covers the ins and outs of more complex collections Appendix A - HTML 4 Tags of markup - specifically tables, frames, and forms - and explores and explains them in detail, with lots of examples, Appendix B - HTML Character Codes to help you design and build commercial-grade HTML documents. You can get Glossary Appendix C - started working with related HTML tag syntax and structures that you need to know so you can build complex Web pages. By the time you knock off this section, you'll be ready to create some pretty and sophisticated Web pages of your own. Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures Part IV: Extending HTML with Other Technologies List of Tables List of Listings By itself, HTML is good at handling text and graphics. But HTML's not terribly good at snazzing up the way such text and graphics look when they're on display, and HTML really can't do too much by itself. Because modern, savvy Web designers want to build interactive, dynamic Web pages, other add-ins and technologies help provide such characteristics within an HTML framework. List of Sidebars Thus, in this part of the book you learn about the Cascading Style Sheets (CSS) markup language that can really add color and pizzazz to Web pages. You also learn about scripting languages that enable Web pages to interact with users in interesting ways, and that also provide ways to respond to user input or actions and to grab and massage data along the way. Next, we cover what's involved in adding audio,
  • video, or animations to your Web pages to bring them to life, as we explore various multimedia options that HTML 4 for Dummies, 4th work well on the Web. After that, we explore Edition ways you can grab data from a database and import it various ISBN:0764519956 into a Web page,by Edexplain how HTMLPitts and Tittel and Natanya relates to other, more modern markup languages like the John Wiley & Sons © and (408 pages) 2003 a recasting of HTML into XML form called the Extensible Extensible Markup Language (XML) Whether your goal is to Hypertext Markup Language (XHTML). build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this step- by-step book will put you on the right track. Throughout this part of the book, we combine examples, advice, and details to help you see and understand how these extra components can enhance and improve your Web site's capabilities - and your users' Contents Table of experiences when visiting your pages. HTML 4 For Dummies, 4th Edition Part V: From Web Page to Web Site Introduction Part I - Meeting HTML in Its Natural Environment In this 1 we expand your view on what's involved and the Web Chapter part, - The Least You Need to Know about HTMLin working with HTML. By themselves, Web pages provide Chapter 2the -focus for most real activity and development work when using HTML. But without some sense HTML at Work on the Web of how the sets of interlinked and interlocking Web pages known as Web sites work together, or a notion - Creating Your First HTML Page of how to design and manage collections of Web pages on a bigger scale, we wouldn't really be showing Part II - Getting Started with HTML you how to make the most of HTML. Chapter 3 Chapter 4 - Structuring Your HTML Documents Chapterin this part of the Online we explain how to manage collections of Web pages and work with entire Thus, 5 - Linking to book Resources Chapter 6 - Finding this adventure with Web sites. We beginand Using Images a discussion of typical and useful HTML tools, and exploring the Chapter 7 of -aTop Off Web Page with Formatting contents typical Your professional's toolbox. We also explain what's involved in setting up a Web site Part III - Taking HTML to theshare Level online, and in arranging to Next the fruits of your labors with the world. Finally, we explain what's involved Chapter 8 - HTML Tables in designing an entire Web site so that all its parts work together well, and so that users can understand Chapter 9 how to find - HTML Frames and get things done within your HTML documents. As always, we provide their way around ample 10 - HTML Forms Chapter examples and illustrations to show you what to do, and how to make things work. Part IV - Extending HTML with Other Technologies Getting Stylish with CSS Part VI:- The Part of Tens Chapter 11 Chapter 12 - HTML and Scripting Chapterconcluding part of the book, we sum up and distill the very essence of what you now know about the In the 13 - Making Multimedia Magic mystic 14 - Integrating Here, you into Your HTML Chapter secrets of HTML.a Database review how to catch and kill potential bugs and errors in your pages before anybody else sees them, get a second chance to review top do's and don'ts for HTML markup, and Chapter 15 - How HTML Relates to Other Markup Languages can peruse Web Page to Web Site Part V - From our compendium of top Chapter 16 HTML resources available online. - Creating an HTML Toolbox - Appendixes Part VII: Setting Up Your Online Presence Chapter 17 Chapter 18 - Creating a Great User Interface The last part of of book Part VI - The PartthisTens ends with a set of appendixes designed to sum up and further expand on the book's 19 - Ten Appendix A is an alphabetical list of HTML tags, designed for easy access and reference. contents. Ways to Exterminate Web Bugs Chapter Appendix Chapter 20 B-contains a set of tables that document the various kinds of character codes that you can use to Ten HTML Do’s and Don’ts cause - kinds of special and interesting characters to appear within your Web pages. And finally, Part VII allAppendixes Appendix Appendix A C- provides Tags HTML 4 a Glossary for the technical terms that appear in this book. Appendix B - HTML Character Codes By the time you make it through all the materials in the book, you'll be pretty well equipped to build your own Web documents and perhaps even ready to roll out your own Web site! Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • Icons UsedHTML 4 for Dummies, 4th Edition in This Book by Ed Tittel and Natanya Pitts ISBN:0764519956 Technical Stuff John Wiley signals © 2003 (408 pages) that are informative and interesting, but not critical to This icon & Sons technical details writing HTML. Skip these if yougoal is (but please, come back and read them later). Whether your want to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this step- Tip This icon flags useful information that makes HTML markup, Web page design, or other important by-step book will put you on the right track. stuff even less complicated than you feared it might be. Table of Contents icon points out information you shouldn't pass by - don't overlook these gentle Remember This reminders (the life, 4th Edition HTML 4 For Dummies,sanity, or page you save could be your own). Introduction Warning Be cautious when you see this icon. It warns you of things you shouldn't do; consequences can be severe if you ignore the accompanying bit of wisdom. Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 Web Text marked with this icon contains information about something that can be found on this On The - HTML at Work on the Web Chapter 3 - Creating Your First HTML find book's companion Web site. You can Page all the code examples in this book, for starters. Simply visit the Part II - section of Dummies.com (www.dummies.com/extras) Extras Getting Started with HTML and click the link for this book. We also Chapter 4 icon Structuring Your HTML Documents we think you'll find useful. - to point out great Web resources use this Chapter 5 - Linking to Online Resources Tricks Chapter 6of the Trade The information highlighted with this icon gives best practices - advice that we wish - Finding and Using Images we'd had - Top Off Your Page out! Formatting Chapter 7 when we first started with The techniques here can save you time and money on migraine medication. Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, Where to Go from Here 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 This is the part where Wiley & Sons © 2003 (408 pages) road! HTML 4 For Dummies, 4th Edition, is a lot like John you pick a direction and hit the the parable of the six blind men and the build a simple, text-oriented out doesn't matter; you'll look at lots of Whether your goal is to elephant: Where you start Web site different parts as or one loaded yourself to build your own Web pages - and each part has a distinctive you prepare with frames, graphics, and animation, this stepby-step book will put you on the right track. nature, but the whole is something else again. Don't worry. You can handle it. Who cares if anybody else thinks you're just goofing around? We know you're getting ready to have the time of your life. Table of Contents Enjoy! HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, Part I: Meetingand Natanya4th Edition Natural Environment HTMLPitts Its in ISBN:0764519956 by Ed Tittel John Wiley & Sons © 2003 (408 pages) In This Part: Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Chapter 1: The Least You Need to Know about HTML and the Web Table of Contents HTML Chapter 2: HTML at Editionon the Web 4 For Dummies, 4th Work Introduction Chapter 3: Creating Your First HTML Page Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web In this part . . .Your First HTML Page - Creating Chapter 3 Part II - Getting Started with HTML This part introduces you to the Hypertext Markup Language, a.k.a. HTML. It explains the basic principles - Structuring Your HTML Documents behind the way HTML works, including the markup to which this book is primarily devoted. It covers how Chapter 5 - Linking to Online Resources HTML makes Web pages work, surveys how full-scale Web sites work, and offers pointers for taking best Chapter 6 - Finding and Using Images advantage of HTML's many capabilities. We conclude this part with some thrilling hands-on exposure to Chapter 7 - Top Off Your Page with Formatting HTML, as you design, build, save, and view your very own first Web page. Chapter 4 Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • 4 for Chapter HTML Tittel and Natanya4th EditionNeed ISBN:0764519956 about HTML 1: The Dummies, Pitts Least You to Know by Ed John Wiley and the Web & Sons © 2003 (408 pages) Overview Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. In This Chapter Table of Contents HTML Creating HTML in text files 4 For Dummies, 4th Edition Introduction Serving and browsing Web pages Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Understanding links and URLsKnow about HTML and the Web Chapter 2 - HTML at Work on the Web Understanding basic HTMLHTML Page Chapter 3 - Creating Your First syntax Part II - Getting Started with HTML Welcome to the wonderful world of Documents HTML. With just a little bit of knowledge, some practice, the Web and - Structuring Your HTML and, of course, something to say, you too can build your own little piece of cyberspace or expand on work Chapter 5 - Linking to Online Resources you've already done. This book is your down-and-dirty guide to putting together your first Web page, Chapter 6 - Finding and Using Images sprucing up an existing Web page, or creating complex and exciting pages that integrate intricate designs, Chapter 7 - Top Off Your Page with Formatting multimedia, scripting, and more. Chapter 4 Part III - Taking HTML to the Next Level Chapter 8 way to get started working with HTML is to jump right in, so that's what this chapter does: It brings The best - HTML Tables Chapter 9 speed onFrames you up to - HTML the basics of how HTML works behind the scenes of Web pages, introducing you to Chapter 10 - HTML FormsWhen you're done here, you'll have a good idea of just how HTML works so you HTML's building blocks. Part IV - Extending Web pages right Technologies can start creating HTML with Other away. Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 Pages in Their Natural Habitat Introducing Webfor Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 Web pages can contain manySons © 2003 (408 pages) John Wiley & different kinds of content: Text Graphics Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Forms Table of Contents HTML 4 For Dummies, 4th Edition Audio and video files Introduction Part IInteractive HTML in Its Natural Environment - Meeting games Chapter 1 - The Least You Need to Know about HTML and the Web And that's - HTML at Work Browse the Chapter 2 just a partial list. on the Web Web for just a little while, and you'll come across a veritable smorgasbordCreating Your First HTML Page Chapter 3 - of information and content displayed in various ways. And although every Web site is different, each has onewith HTML Part II - Getting Started thing in common: Hypertext Markup Language (HTML). Chapter 4 - Structuring Your HTML Documents That's right, no matter what information a Web page may contain, every single Web page is created using Chapter 5 - Linking to to be Resources HTML. Consider HTMLOnline the mortar that creates a Web page's structure; the graphics, content, and Chapterinformation are theUsing Images 6 - Finding and bricks. But what exactly is HTML and how does it work? Read on to find out. other Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Using hypertext to add structure to Web pages - HTML Tables Chapter 8 Chapter 9 HTML Frames Web pages-are nothing more than text documents. In fact, that's what makes the Web work as well as it ChapterText is HTML Forms language of computers, which means that any text file (including a Web page) 10 - the universal does. Part IV - Extending HTML with Other Technologies that you create on a Windows computer works equally well on a system running the Mac OS, Linux, Unix, Chapter other operating system. CSS or any 11 - Getting Stylish with Chapter 12 - HTML and Scripting Okay, 13 - Making Multimedia Magic Chapter so Web pages aren't merelytext documents. They're documents made with text of a special, attention-deprived, sugar-loaded kind. HTML is a collection of instructions you include along with your Chapter 14 - Integrating a Database into Your HTML content in - How HTML Relates to Other Markup Languages Chapter 15 a plain-text file that specifies how your page should look and behave. If this doesn't make sense to you From Web well, it Web Part V - right now - Page towill. Site Chapter 16 Remember Creating anor not, Toolbox page's status as a text file means you can create and edit it in any Hypertext HTML a Web Chapter 17 - Setting Up Your Online Presence application that creates plain text (such as Notepad or SimpleText). In fact, when you're getting started with Chapter 18text Creating a Great User Interface HTML, a - editor is the best tool to start with. Just break out Notepad, and you're ready to go. There are, Partcourse, a Part of Tens of of VI - The wide variety software tools with fancy options and applications (which we discuss in Chapter Chapter 19 - Tenhelp you create Web Web Bugs essentially, they generate text files just as plain-text 16) designed to Ways to Exterminate pages, but Chapter 20 - Ten HTML Do’s and Don’ts editors do. Part VII - Appendixes Web browsers were Tags Appendix A - HTML 4 created specifically for the purpose of reading HTML instructions and displaying the resulting - HTML Character Codes Appendix Bpage accordingly. For example, take a look at the Web page shown in Figure 1-1 and make a quick mental list of everything you see. Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 Figure -1-1: This Web page has several different components. Structuring Your HTML Documents Chapter 5 - Linking to Online Resources The components on and Using Images an image, a heading that describes the information on the page, a Chapter 6 - Finding this page include paragraph of Top Off Your Page with Formatting common varietals. Notice, however, that different text about red wine, and a list of components of HTML to the Next Level formatting. The heading at the top of the page is larger than the the page have different Part III - Taking text in the paragraph, and the items in the list have bullet points before them. The browser knows to Chapter 8 - HTML Tables display these different components of the page in specific ways thanks to the HTML, which looks like Chapter 9 - HTML Frames Listing 1-1. Chapter 7 Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Listing 1-1: Sample HTML Markup Chapter 11 - Getting Stylish with CSS Chapter 15 - How HTML Relates to Other Markup Languages <html> Chapter 12 - HTML and Scripting <head> Chapter 13 - Making Multimedia Magic <title>Wine Varietals</title> Chapter 14 - Integrating a Database into Your HTML </head> Part<body> Web Page to Web Site V - From Chapter 16 - Creating an HTML Toolbox <h1><img src="red_grapes.jpg" width="75" height="100" Chapter 17 - alt="Red Your Online Presence Setting Up Grapes" align="middle" hspace="5"> Chapter 18 - Understanding Red Wine Varietals Creating a Great User Interface Part VI</h1> - The Part of Tens Chapter 19 - Ten Wayswines tend to be generically categorized as <p>Although to Exterminate Web Bugs Chapter 20 either "white" or "red," in reality, there is a - Ten HTML Do’s and Don’ts Part VII - Appendixes collection of wine varietals each with its own Appendix A distinguishing characteristics. The red category - HTML 4 Tags Appendix B includes a robust collection of over 20 varietals, - HTML Character Codes Appendix C including: - Glossary Index </p> <ul> Cheat Sheet - HTML 4 For Dummies, 4th Edition <li>Barbera</li> <li>Brunello</li> List of Tables <li>Cabernet Franc</li> List of Listings <li>Cabernet Sauvignon</li> List of Sidebars <li>Carignan</li> <li>Carmenere</li> <li>Charbono</li> <li>Dolcetto</li> <li>Gamay</li> <li>Grenache</li> <li>Malbrec</li> <li>Merlot</li> List of Figures
  • <li>Mourvedre</li> HTML 4 for Dummies, 4th Edition <li>Neebiolo</li> ISBN:0764519956 by Ed Sirah</li> <li>Petite Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) <li>Pinot Noir</li> Whether your goal <li>Sangiovese</li> is to build a simple, text-oriented Web site or one loaded <li>Syrah</li> with frames, graphics, and animation, this stepby-step book will put you on the right track. <li>Tempranillo</li> <li>Zinfandel</li> </ul> Table of Contents </body> HTML 4 For Dummies, 4th Edition </html> Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web The text enclosed in the less-than and greater-than signs (< >) is the HTML (often referred to as the - Creating Your First HTML Page markup). For example, the <p>...</p> markup identifies the text about red varietals as a paragraph, Part II - Getting Started with HTML and the <li>...</li> markup identifies each item in the list of varietals. And that's really all there is to Chapter 4 - Structuring Your HTML Documents it. You embed the markup in a text file along with your text to let the browser know how to display your Chapter 5 Web page. - Linking to Online Resources Chapter 3 Chapter 6 - Finding and Using Images Chapter 7 delve into the basic syntaxFormatting a bit later in the chapter in the section 'Introducing HTML Tip We - Top Off Your Page with of markup Part III - Taking HTML tonow, what's important Syntax and Rules.' For the Next Level is that you understand that markup lives inside of a text file along 8 - HTML Tables Chapterwith your content to give instructions to a browser. Chapter 9 - HTML Frames HTML Forms Using a- server to host your pages Chapter 10 Part IV - Extending HTML with Other Technologies Chapter 11 -pages wouldn't withmuch good if you couldn't share them with the rest of the world, and Web Your HTML Getting Stylish be CSS servers make that and Scripting Chapter 12 - HTML possible. A Web server is a computer that's connected to the Internet, has Web server software - Making Multimedia Magic Chapter 13installed, and can respond to requests for particular pages from Web browsers. Chapter 14 - Integrating a Database into Your HTML Remember Just about any computer can be a Web server, including your home computer; however, - How HTML Relates to Other Markup Languages Web servers are generally computers dedicated to the task. Although you don't have to be an Internet or Part V - From Web Page to Web Site computer guru to put your Web pages out so anyone can access them, you do have to find a Web server Chapter 16 - Creating an HTML Toolbox for your Web pages. If you're building pages for a company Web site, you may already have a Web server Chapter 17 - Setting Up Your Online Presence to put them on; you just have to ask your IT guru for the information. However, if you're starting a new site Chapter 18 for Creating a Great Userfind a host for your pages. for fun or - profit, you'll need to Interface Chapter 15 Part VI - The Part of Tens Chapter 19 hosting is a bigExterminate Webdays, so finding an inexpensive host is easy. We lay out all of the Tip Web - Ten Ways to business these Bugs details on - Ten HTML Do’s and hosting Chapter 20 figuring out what your Don’ts needs are and finding the perfect provider in Chapter 17. Part VII - Appendixes Understanding basic browser technology Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - GlossaryWeb puzzle is a Web browser. Web browsers take instructions written in HTML and The last piece of the use Index these instructions to display a Web page's content on your screen. Think of it this way: Microsoft Word documents HTML 4 For Dummies, 4th Edition Cheat Sheet -are best viewed using Microsoft Word. You can use other word-processing programs (or even different versions of Word) to view Word documents, and for the most part, the documents look pretty List of Figures much the same. This concept applies to HTML documents. You should always write your HTML with the List of Tables idea Listings List of that people will be viewing the content using a Web browser. Just remember that there's more than one kind of browser out there, and each one comes in several versions. List of Sidebars Usually, Web browsers request and display Web pages available via the Internet from a Web server, but you can also display HTML pages you've saved on your own computer before making them available on a Web server on the Internet. When you're developing your own HTML pages, you view these pages (called local pages), in your browser. You can use local pages to get a good idea of what people see when the page goes live on the Internet. Remember The most important thing to remember about Web browsers is that each browser interprets
  • HTML in its own way. The same HTML doesn't look exactly the same from one browser to another. When HTML 4 you're working with basic for Dummies, 4th Edition significant, but when you start integrating other HTML, the variances aren't by Ed Tittel and multimedia), elements (such as scripting and Natanya Pitts things get a little ISBN:0764519956 hairy. The bottom line is that the browser John Wiley & Sons © 2003 (408 pages) has the ultimate control over how your Web pages look, so you should concentrate on creating solid HTML and let theWhether yourthe rest. build a simple, text-oriented Web site browser do goal is to or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. A bevy of browsers The Web world is full of browsers of many shapes and sizes - or rather versions and feature-sets. The two most popular browsers available today are Microsoft Internet Explorer and Netscape Navigator HTML 4 For Dummies, 4th Edition (sometimes called Mozilla), but there are others like Opera and Amaya in use as well. As a user, you Introduction have probably chosen a browser you like best, but as an HTML developer you have to think beyond Part I - Meeting HTML in Its Natural Environment your own browser needs. Every user has his or her own browser preference and browser settings. Table of Contents Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - things Work on the Web To makeHTML ateven more complicated (or challenging if you choose to see the glass as half-full), Chapter 3 browser renders First HTML Page a bit differently. In addition, every browser handles JavaScript, each - Creating Your your HTML just Part II - Getting Started with HTML other multimedia, style sheets, and HTML add-ins just a bit differently. When you throw in different Chapter 4 operating systems (Mac or Windows), things get really fun. Most of the time, the differences in the way - Structuring Your HTML Documents two Chapter 5 browsers display the same HTML will be negligible, but other times, a particular combination of - Linking to Online Resources HTML, - Finding and Using Images a particular browser to its knees. text, and media may bring Chapter 6 Chapter 7 - Top Off Your Page with Formatting The bottom line is as you begin to work more with HTML, you'll need to test your pages on as many different browsers as you can manage. You should install two or three different browsers on your own Chapter 8 - HTML Tables system (we recommend the latest versions of Internet Explorer, Netscape, and Opera) for testing Chapter 9 - HTML Frames purposes. To access a fairly complete list of the browser's available, visit Yahoo!'s Web browser Chapter 10 - HTML Forms category (http://dir.yahoo.com/Computersand_Internet/Software/Internet/ Part IV - Extending HTML with Other Technologies World_Wide_Web/Browsers/_). Part III - Taking HTML to the Next Level Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Tip InChapter 3, you find out how into Your HTML Chapter 14 - Integrating a Database to use a Web browser to view a local copy of your first Web page. You can choose How HTML several Web browsers to view your Chapter 15 - from one ofRelates to Other Markup Languages pages, but we suggest that you start with the browser you use Page to Web Site Part V - From Web now to surf the Web. That way you don't have to get used to a new browser andget comfortable with HTML all at the same time. Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Tricks of the Trade Most people view the Web with graphical browsers (such as Netscape or Internet Chapter 18 that display a Great User Interface Explorer) - Creating images, text formatting, complex layouts, and more. However, some people prefer to Part VI - The Part of Tens use text-only browsers (such as Lynx) because they're visually impaired and can't take advantage of a Chapter 19 display Ways to Exterminate Web Bugs graphical - Ten or because they like a lean, mean Web server that just displays content. Even if you Chapter 20 view the Web with a graphical browser, you should always be sensitive to the fact that at least choose to - Ten HTML Do’s and Don’ts Part VII - Appendixes of your page will only see your page in text. Chapter 18 includes more information on some of the viewers AppendixmakeHTML Web page accessible to everyone regardless of the type of browser they choose to use. how to A - your 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Understanding how hyperlinks make the Web the Web Index Cheat World Wide Web comes by its4th Edition The Sheet - HTML 4 For Dummies, name honestly. It's quite literally a Web of HTML pages hosted on List of Figures around the world, connected in a million different ways. Of course, those connections aren't Web servers List of Tablesspider webbing, but are instead created by hyperlinks that connect one page to the next. made with Without those List of Listings links (as they're called for short), the Web could still exist, but rather than being a collection of of Sidebars List interrelated pages that users can easily traverse, it would just be a group of standalone pages. In fact, a healthy portion of the Web's value is its ability to link to pages and other resources (such as images, downloadable files, and media presentations) on the same Web site or on another one. For example, FirstGov (www.firstgov.gov) is a gatewayWeb site - its sole function is to provide access to other Web sites. If you aren't sure which government agency handles first-time loans for homebuyers, or want to know how to arrange a tour of the Capital, you can visit this site (shown in Figure 1-2) to find out.
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 Figure -1-2: FirstGov is a HTML Documents hyperlinks to help visitors find government information on Structuring Your gateway that uses the Chapter 5Web.Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page Technical Stuff Introducing Internet protocols with Formatting Part III - Taking HTML to the Next Level Interactions between browsers and servers are made possible by a set of computer-communication - HTML Tables instructions called the Hyper-text Transfer Protocol (HTTP) protocol. This protocol defines all the rules Chapter 9 - HTML Frames about how browsers should request Web pages and how Web servers should respond to those Chapter 10 - HTML Forms requests. Chapter 8 Part IV - Extending HTML with Other Technologies Chapter 11 isn't the only protocol CSS HTTP - Getting Stylish with at work on the Internet. The Simple Mail Transfer Protocol (SMTP) and Post - HTML and Scripting Chapter 12Office Protocol (POP) protocols make e-mail exchange possible, and the File Transfer Protocol (FTP) - Making Multimedia Magic Chapter 13 allows you to upload, download, move, copy, and delete files and folders across the Internet. The good news is that Web browsers and servers do all of the HTTP work for you, so you don't have Chapter 14 - Integrating a Database into Your HTML to 15 - How HTML Relates to Other Markup Languages Chapter do anything more than put your pages on a server or type a Web address into a browser to take advantage of this to Web Site Part V - From Web Pageprotocol. Chapter 16 - Creating an HTML Toolbox If you're interested in how HTTP works, we recommend Webmonkey's article 'HTTP Trans-actions and You'Setting Up Your Online Presence at Chapter 17 Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens http://hotwired.lycos.com/ webmonkey/geektalk/97/06/index4a.html Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes for a good overview. Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Introducing URLs Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 The Web is made up of millions of © 2003 (408 pages) of them linkable. Knowing a page's (or some other John Wiley & Sons resources, each resource's) exactWhether your goal isto creating simple, text-oriented Web siteAlso, without the exact address location is the key to build a a successful hyperlink to it. (called a Uniformor one loaded with frames, graphics, and animation, this step-in a Web browser to visit a Resource Locator or URL), you can't use the Address bar Web site or Web by-step book will put you on the right track. page directly. Remember URLs provide the standard addressing system for resources on the Web. Each resource Table of Contents (whether Web page, site, or individual file) has a unique URL. URLs work a lot like your postal address. HTMLexample, your address includes some general information, such as the state and city you live in, but For 4 For Dummies, 4th Edition Introduction then it narrows to specify what street you live on, and then what building, and maybe which apartment in Part Ibuilding. And if that isn't specific enough, when that - Meeting HTML in Its Natural Environment you add your name to the address, you have a very Chapter 1definition Least whom a piece of mail is supposed the Web - The of to You Need to Know about HTML and to go. precise Chapter 2 - HTML at Work on the Web A URL uses a similar Your First HTML Pageon its destination: It begins with generic information and includes Chapter 3 - Creating approach to zero in increasingly specific information until Part II - Getting Started with HTML it points to a single, unique file on the Web. Figure 1-3 identifies the components Structuring Your HTML Documents of a URL. Chapter 4 Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Figure 1-3: The components of a URL help it define the exact location of a single file on the Web. Part IV - Extending HTML with Other Technologies Chaptercomponent of a URL plays a particular role in defining the location of a Web page or other Web Each 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting resource: Chapter 13 - Making Multimedia Magic Protocol: This portion of the link specifies which protocol the browser should follow when it requests Chapter 14 - Integrating a Database into Your HTML the file. How HTML Relates to pages is http:// (the Chapter 15 - The protocol for WebOther Markup Languages familiar precursor to most Web URLs). Part V - From Web Page to Web Site Domain: This part of the link points to the general Web site (such as www.sun.com) where the file - Creating an HTML Toolbox resides. A single domain may host a few files (as does a personal Web site) or millions (as does a Chapter 17 - Setting Up Your Online Presence corporate site like www.sun.com). Chapter 16 Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Path: This part of the link names the sequence of folders through which you have to navigate before Chapter 19 - to a particular file. For example, to get to a file in the evangcentral folder that resides in the you get Ten Ways to Exterminate Web Bugs developers folder, you would use Chapter 20 - Ten HTML Do’s and Don’ts the /developers/evangcentral/ path. Part VII - Appendixes Filename: The Tags Appendix A - HTML 4name of the file specifies exactly which file in a directory path the browser should access. Appendix B - HTML Character Codes Appendix C shown in Figure 1-3 points to the Sun domain and offers a path that leads to a specific file The URL - Glossary Index namedbios.html: Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures http://www.sun.com/developers/evangcentral/bios.html List of Tables List of Listings 5 provides the complete details on how you use HTML and URLs to add hyperlinks to your Tip Chapter List of Sidebars Web pages, and Chapter 17 discusses how to obtain a URL for your own Web site after you're ready move it to a Web server.
  • HTML 4 for Dummies, and Rules Introducing HTML Syntax 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 All things considered, Wiley &is a very straightforward language for describing the contents of a Web page. Its John HTML Sons © 2003 (408 pages) components are Whetheruse - and whenbuild a simple, text-oriented Web of HTML, the rest follows naturally. HTML easy to your goal is to you know how to use a little bit site has three main components: with frames, graphics, and animation, this stepor one loaded by-step book will put you on the right track. Elements: Identify different pieces and parts of an HTML page. Table of ContentsProvide additional information about an instance of an element. Attributes: HTML 4 For Dummies, 4th Edition Entities: Represent non-ASCII text characters such as copyright symbols (©) and accented letters (É). (See Appendix B for more details.) Part I - Meeting HTML in Its Natural Environment Introduction Chapterbit of -HTML markup that you Know about HTML a Web page's content includes some combination of elements, The Least You Need to used to describe and the Web Every 1 Chapter 2 and entities. attributes, - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Tip - Getting Started with cover Part II The following sections HTML the basic form and syntax for elements, attributes, and entities. All the chapters in Parts and-III of the book include details on how to use elements and attributes to do the following: ChapterII4 Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Describe particular kinds of text (such as paragraphs or tables) Chapter 7 Create -aTop Off Your Pageon the page (such as changing a font style) particular effect with Formatting Part III - Taking HTML to the Next Level Add - HTML Tables Chapter 8 images and links to a page Chapter 9 - HTML Frames - HTML Elements Forms Chapter 10 Part IV - Extending HTML with Other Technologies Elements - Getting Stylish HTML, and you use them to describe every piece of text on your page. Elements are Chapter 11 are at the core of with CSS made 12 Chapter up of-tags,and an element may have either a start and end tag, or just a start tag. Here's how you know which HTML and Scripting kind of tag - tags to use: Chapter 13 orMaking Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Elements that describe content use a tag pair: Content like paragraphs, headings, tables, and lists always - How HTML Relates to Other Markup Languages use a tag pair that follows the same syntax: Chapter 15 Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence <tag>...</tag> Chapter 18 - Creatingred wineUser Interface in Listing 1-1 used the paragraph element (<p>) to describe a For example, the a Great varietal page Part paragraph: of Tens VI - The Part Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts <p>Although wines tend to be generically categorized as either "white" or "red," in reality, there is a collection of wine varietals each with Appendix A - HTML 4 Tags its own distinguishing characteristics. The red category includes a Appendix B - HTML Character Codes robust collection of over 20 varietals, including: Appendix C - </p> Glossary Part VII - Appendixes Index CheatRemember The paragraph element uses a tag pair (that is, two tags, one at the start and the other at the end) Sheet - HTML 4 For Dummies, 4th Edition to surround the text of the paragraph. Think of the start tag as an on switch that says to the browser, 'The List of Figures paragraph begins here' - and the end tag as an off switch that says, 'The paragraph ends here.' List of Tables List of Listings Elements that insert something into the page use one tag: Content like an image or a line break always uses a single tag: List of Sidebars <tag> Listing 1-1 also uses the image element (<img>) to include an image on the page: <img src="red_grapes.jpg" width="75" height="100" alt="Red Grapes"
  • align="middle" hspace="5"> HTML 4 for Dummies, 4th Edition ISBN:0764519956 The<img> elementTittel and Natanya Pitts by Ed uses a single tag (called an empty element) to reference an image. When the browser displays the page, it replaces the 2003 (408 element with the file that it points to (it uses an attribute to do the John Wiley & Sons © <img> pages) pointing, which we discuss next). to build a simple, text-oriented Web site Whether your goal is or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Warning You can't go around making up your own HTML elements. The elements that are legal in HTML form a very specific set - if you try to use elements that aren't part of the HTML set, every browser in the universe will ignore them. The actual set of elements you can use is defined in the HTML 4.01 specification, discussed later in this Table of Contents chapter. HTML 4 For Dummies, 4th Edition Introduction structures (like the list of red wines you saw earlier) use combinations of elements to describe part of Many page Part I - Meeting HTML in of aNatural Environment your page. In the case Its bulleted list, for example, the <ul> element specifies that the list is unordered (bulleted), and<li> - The Least You Need to Know about Chapter 1 elements mark each item in the list. HTML and the Web Chapter 2 - HTML at Work on the Web Tip When-you combine elements byPage method (called nesting), be sure you close the inside element completely this Creating Your First HTML before- you close the outsideHTML element: Part II Getting Started with Chapter 3 Chapter 4 - Structuring Your HTML Documents <ul> Chapter 5 - Linking to Online Resources <li>Barbera</li>Using Images Chapter 6 - Finding and <li>Brunello</li> - Top Off Your Page with Formatting </ul>- Taking HTML to the Next Level Part III Chapter 7 Chapter 8 Think of yourHTML Tables suitcases that fit neatly within one another, and you can't go wrong. elements as Chapter 9 - HTML Frames Chapter 10 - HTML Forms Attributes Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 15 - How HTML Relates to Other Markup Languages Attributes allow variety in the way an element describes content or works on the page. Think of attributes as Chapter 12 an HTML andso you can use it differently depending on the circumstances. For example, the <img> extending - element Scripting Chapter 13 - Making Multimedia Magic element uses the src attribute to specify the location of the image you want to include at a particular spot on your Chapter 14 - Integrating a Database into Your HTML page: Part V - From Web Page to Web Site <imgsrc="red_grapes.jpg" width="75" height="100" alt="Red Grapes" - Creating an HTML Toolbox align="middle" hspace="5"> Chapter 16 Chapter 17 - Setting Up Your Online Presence Chapter bit of-HTML, the <img> element itself is a general flag to the browser that you want to include an image; the In this 18 Creating a Great User Interface Part VI - The Part of Tens src attribute provides the specifics on the image you want to include, red_grapes.jpg in this instance. Other attributes - Ten Ways to Exterminate Web Bugs Chapter 19 (such as width, height, align, and hspace) provide information about how to display the image, and thealt attribute HTML Do’s and Don’ts Chapter 20 - Ten provides a text alternative to the image if the browser doesn't display the image. Part VII - Appendixes Tip Chapter 6 discusses the <img> element and its attributes in detail. Appendix A - HTML 4 Tags Appendix B -includeCharacter Codes the start tag of the element you want them to go with - after the element name You always HTML attributes within Appendix C the closing greater-than sign, like this: but before - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition <tagattribute="value" attribute="value"> List of Figures List of Tables Remember Attribute values must always appear in quotation marks, but you can include the attributes and their List of Listings order within the start tag. values in any List of Sidebars Every HTML element has a collection of attributes that can be used with it, and you can't mix and match attributes and elements. Some attributes can take any text as a value because the value could be anything, like the location of an image or a page you want to link to. Others have a specific list of values the attribute can take, such as your options for aligning text in a table cell. The HTML 4.01 specification defines exactly which attributes you can use with any given element and which values (if explicitly defined) each attribute can take. Tip Each chapter in Parts II and III of the book covers which attributes you can use with each HTML element.
  • Entities HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 Although text makes the Web possible, it does have its limitations. There are characters that basic ASCII text doesn't John Wiley & Sons © 2003 (408 pages) include, such as trademark symbols, fractions, and accented characters. For example, the list of white wine varietals Whether your goal is to build shown in Figure 1-4 includes two accented e a simple, text-oriented Web site characters (é) and two u characters with umlauts (ü). or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Figure 1-4: ASCII test can't represent all text characters so HTML entities do instead. Part IV - Extending HTML with Other Technologies Because ASCII text doesn't include either the accented e or the umlauted u, the HTML uses entities to represent Chapter 11 - Getting Stylish with CSS them instead. When the browser comes across the entity, it replaces it with the character it references. Every entity Chapter 12 -an ampersand (&) and ends with a semicolon (;). The following markup shows the entities in bold: begins with HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 <html> - Integrating a Database into Your HTML Chapter 15 <head> - How HTML Relates to Other Markup Languages Part V - From WebVarietals</title> <title>Wine Page to Web Site Chapter 16 - Creating an HTML Toolbox </head> Chapter 17 - Setting Up Your Online Presence <body bgcolor="#FFFFFF"> Chapter 18 - Creating a Great User Interface Part<h2>White of Tens VI - The Part Varietals</h2> <ul> - Ten Ways to Exterminate Web Bugs Chapter 19 <li> Ten HTML Do’s and Don’ts Chapter 20 - Chardonnay</li> <li>Chenin Blanc</li> Part VII - Appendixes <li>Fum&eacute; Appendix A - HTML 4 Tags Blanc</li> <li>Gew&uuml;rztraminer</li> Appendix B - HTML Character Codes <li>Gr&uuml;ner Veltliner</li> Appendix C - Glossary <li>Marsanne</li> Index <li>Muscat</li> Cheat Sheet - HTML 4 For Dummies, 4th Edition <li>Pinot Blanc</li> List of Figures <li>Pinot Gris</li> List of Tables <li>Reisling</li> List of Listings <li>Sauvignon Blanc</li> List of Sidebars <li>S&eacute;millon</li> <li>Trebbiano</li> <li>Viognie</li> </ul> </body> </html>
  • The entity that represents the e with the acute accent is &eacute; and the entity that represents the umlauted u is HTML 4 for Dummies, 4th Edition &uuml;. by Ed Tittel and Natanya Pitts ISBN:0764519956 John Wiley & HTML specification Tip As you might expect, the Sons © 2003 (408 pages) lays out exactly which entity you use to replace every non-ASCII character the specification supports. Appendix B includes a complete listsite characters and the entities you use to Whether your goal is to build a simple, text-oriented Web of or one loaded represent them in your HTML. with frames, graphics, and animation, this stepby-step book will put you on the right track. In addition to non-ASCII characters, you also use entities to represent the characters that HTML uses to differentiate itself from the text around it: Table of Contents HTML less-than sign (<): &lt; 4 For Dummies, 4th Edition Introduction Part Igreater-than signIts Natural Environment - Meeting HTML in (>):&gt; Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web ampersand (&): &amp; Chapter 3 - As you Your First noticed, the Remember Creating may have HTML Page < and > signs are used all the time as part of the markup, but these Part II - Getting Started with the browser symbols are instructions to HTML and won't actually show up on the page. So if you ever need these symbols Chapter 4 on Structuring Your you have to include the entities for them in your page, like this: to appear - the Web page, HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 paragraph element identifies some text as a paragraph:</p> <p>The - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting <p>&lt;p&gt;This is a paragraph.&lt;/p&gt;</p> Part III - Taking HTML to the Next Level In the 8 - HTML Tables Chapterfirst line of the following markup, we use tags to describe a simple paragraph. The second line shows how to use entities-to describe the < and > symbols. Figure 1-5 shows how the browser converts these entities to characters Chapter 9 HTML Frames to show the HTML of your Chapter 10 -results Forms markup in a browser window. Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Figure Part of Tens Part VI - The 1-5: Always use entities when you want to display a less-than sign, greater-than sign, or ampersand in the19 - Ten window. Exterminate Web Bugs browser Ways to Chapter Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML Specification The HTML 4.01 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 The HTML 4.01 specification is the © 2003 (408 pages) John Wiley & Sons rulebook of HTML - it tells you exactly which elements you can use, which attributes go with those elements,build how you use elementsWeb site Whether your goal is to and a simple, text-oriented in combinations to create lists, forms, tables frames, and other page with frames, graphics, and animation, this stepor one loaded structures. by-step book will put you on the right track. The HTML specification uses Document Type Definitions (DTDs) written in the Standard Generalized Markup Language (SGML) - the granddaddy of all markup - to define the details of HTML. In its earlier Table of Contentsused elements for formatting; over time, developers realized that formatting needed its versions, HTML HTML 4 For Dummies, called Cascading Style Sheets, or CSS) and that HTML elements should just describe own language (now 4th Edition Introduction a page's structure. That's how the three flavors of HTML that the specification includes came to be: Part I - Meeting HTML in Its Natural Environment HTML - The Least You Need to Know about HTML and the Web to describe font faces and page Transitional: A version of HTML that includes elements Chapter 1 colors. -HTML Transitionalthe Web Chapter 2 HTML at Work on represents a version that accounts for formatting elements in older versions of 3 - Creating Your First HTML HTML Transitional are deprecated (considered obsolete) because Chapter HTML. Formatting elements inPage the W3C would like to HTML Part II - Getting Started withsee HTML developers move away from them and to a combination of HTML Strict and CSS. Chapter 4 - Structuring Your HTML Documents Chapter 5 HTML - Linking to Online Resources doesn't include any elements that describe formatting. This Strict: A version of HTML that Chapter 6 Finding and Using Images version-is designed to work with CSS driving the page formatting. Chapter 7 - Top Off Your Page with Formatting Tip The HTML to the Next Level Part III - TakingCSS-with-HTML Strict approach is an ambitious way to build Web pages, but in practice it has its - HTML Tables CSS provides more control over your page formatting, but creating style sheets pros and cons. Chapter 8 that - HTML Frames Chapter 9 work well in all browsers can be tricky. Chapter 11 discusses style sheets and the issues around using - HTML Forms Chapter 10 them in more detail. Part IV - Extending HTML with Other Technologies HTML Frameset: A version of HTML that includes frames, which is markup that allows you to display - Getting Stylish with CSS more than one Web page or resource at a time in the same browser window. Chapter 11 Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic in HTML Transitional; thus you can choose to use elements from it All Web browsers support all elements Chapter 14 - HTML Strict a Database you use frames, you'll technically be working with HTML Frameset, but or stick with Integrating instead. If into Your HTML all of the - How HTML in the to Other Markup Languages Chapter 15elements workRelates same way. Part V - From Web Page to Web Site In this book, we coveran HTML Toolbox all versions, lumping them into a single category (aptly called all HTML tags in - Creating HTML) because all real-world Web browsers support these three flavors - and they're extremely unlikely to Chapter 17 - Setting Up Your Online Presence withdraw support for HTML Transitional or HTML Frameset any time soon. What this means is you have a Chapter 18 - Creating a Great User Interface large assortment of elements to choose from when you create your HTML, so you can build the best Part VI - The Part of Tens possible Web page. Chapter 16 Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Tenyou'll find all the details of the HTML elements, their attributes, and their usage here in this Tip Of course, HTML Do’s and Don’ts Part VII - Appendixes very book - so you don't have to struggle with reading DTDs or arcane technical specifications if you want Appendix A - HTML 4 Tagsif you ever want to go to the source, it's good to know where the horse's mouth is to learn HTML. Even so, Appendix B it - HTML Character Codes HTML 4.01 specification and the HTML DTDs at and what says. You can review the www.w3.org/TR/html4. Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • 4 for Dummies, Chapter HTML Tittel and Natanya4th Edition the Web 2: HTML at Work on ISBN:0764519956 by Ed Pitts Overview John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepIn This Chapter by-step book will put you on the right track. Understanding how others are using HTML Table of Contents HTML Deciding what you want your Web page to do for you 4 For Dummies, 4th Edition Introduction Thinking about your page design and features Part I - Meeting HTML in Its Natural Environment Chapter 1 - for Least expansion PlanningThe futureYou Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web HTML 3 - Creating Your First and it's pretty simple to create a tag or two and throw some text in - which Chapter is rather straightforward, HTML Page is great if you want to create a one-line Part II - Getting Started with HTML Web page. However, there's much more to building a Web page than just creating a couple of HTMLand adding some text. Even the simplest Web page is a well-planned tags Documents Chapter 4 - Structuring Your collection - Linking to Online Resources Chapter 5 of elements and text with images thrown in for good measure. Chapter 6 - Finding In the end, your goaland Using HTML to put information on the Web. Whether you want to sell a product, is to use Images Chapter 7 - Top Off Your about your services, tell potential clients more Page with Formatting or share Christmas pictures, be sure you have a clear idea Partwhat you want HTML thedo for Level When you have that firmly in mind, it's just a matter of using the right III - Taking HTML to to Next you. of Chapter to get HTML Tables HTML 8 - the result you're looking for (which is what the majority of this book is about, of course). Chapter 9 - HTML Frames This chapter looks at what Chapter 10 - HTML Forms others are doing with HTML on the Web - it may spark your imagination if you don't - Extending page with in mind just yet, or Part IVhave a Web HTML goal Other Technologies help you refine your ideas if you do. Then we take a look at how you might want to use different Chapter 11 - Getting Stylish with CSS elements such as images, multimedia, and even (gasp) programming in your page so you can bring your Web-page plan closer to its final form. Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic You don't have to know exactly how your page will behave or how it will look before you start creating - Integrating a HTML. In fact, you'll soon Database that Web HTML are constantly evolving entities that take on a life of discover into Your pages Chapter 15 Even so, if you have a basic plan in mind, you'll be able to better direct your HTML work and - How HTML Relates to Other Markup Languages their own. Part V -first on those elements and attributes that you need most. You can pick up other elements as your focus From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox page requires. Chapter 14 Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 Doing with Edition What Others Arefor Dummies, 4th HTML by Ed Tittel and Natanya Pitts ISBN:0764519956 Spend a few moments surfingSonsWeb and you'll quickly see how others are using HTML. From news John Wiley & the © 2003 (408 pages) sites to online stores to personal home pages, HTML helps people around the world share information of Whether your goal is to build a simple, text-oriented Web site incalculable variety.one loaded with frames, graphics, and animation, this stepor by-step book will put you on the right track. Building Web pages and Web sites Table of Contents At its For Dummies, is a collection of Web pages, all built with HTML. Although Web technologies have HTML 4heart, the Web 4th Edition greatly evolved to include complex programming, streaming multimedia, and intricate interfaces, every Web site starts with a single Web page, and every Web page starts with HTML. The complexity of a Web Part I - Meeting HTML in Its Natural Environment page has everything to do with both its content as well as the message its creator needs to convey. (Often, Chapter 1 - The Least You Need to Know about HTML and the Web these are two sides of the same coin.) Introduction Chapter 2 - HTML at Work on the Web Chapter 3 - the Impact Online Web page For example,Creating Your First HTML Page (www.impactonline.com), shown in Figure 2-1, serves as a Part II - marketing tool for a consultant simple Getting Started with HTML to let potential clients know what services he offers. Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 -2-1: The Impact Online Web page is simple but direct - the best way to present its creator's Figure Creating a Great User Interface Part VI - The Part of Tens message. Chapter 19 - Ten Ways to Exterminate Web Bugs In contrast, Ten HTML Do’s Web Consortium (W3C) home page (www.w3.org), shown in Figure 2-2, is Chapter 20 -the World Wide and Don’ts Part VII - Appendixes much more complex and contains more content (hence more HTML) because the page serves as a portal to the vast - HTML 4 of the Appendix A resourcesTags W3C. Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 Figure -2-2: The W3C home page is complex and robust; it helps visitors access the hundreds of other Structuring Your HTML Documents pages - Linking to site. Chapter 5 on the W3COnline Resources Chapter 6 - Finding and Using Images Chapter 9 - HTML Frames Even though Top Off Your Page are vastly different, they use the same collection of HTML elements and these two pages with Formatting Chapter 7 attributes to make content appear in a Web browser. The W3C page has more markup and may use Part III - Taking HTML to the Next Level different HTML constructs (such as complex tables) than the Impact Online page does. In the end, they're Chapter 8 - HTML Tables both just Web pages built with HTML. Chapter 10 - HTML Forms Remember If you're thinking that you have to do something different with your HTML to build a Web site, Part IVagain. A Web site is nothing more than a collection think - Extending HTML with Other Technologies of Web pages. You'll most likely use hyperlinks Chapter 11 - Gettingin Chapter 5) to connect pages so visitors can easily navigate your site, but all you're (discussed in detail Stylish with CSS Chapterdoing- is connecting several pages into a cohesive collection of related information. HTML and Scripting really 12 Chapter 13 - Making Multimedia Magic Tip With - Integrating a Database into Your HTML Chapter 14 the right tools, a hosting provider, and a good interface, you can grow a single Web page into a larger Web-site. Check Relates to Other Markup Languages V of this book for the basics. out Chapters 16 through 18 in Part How HTML Chapter 15 Part V - From Web Page to Web Site CreatingCreating an HTML Toolbox - programming- and database-driven sites Chapter 16 Chapter 17 - Setting Up Your Online Presence Many 18 sites these Great User Interface ChapterWeb - Creating adays go beyond plain HTML to include programming code that makes the sites interactive and responsive to individual user needs and preferences. For example, when you visit an online Part VI - The Part of Tens store and add items to your shopping cart, the Web pages you see are different from the ones other Chapter 19 - Ten Ways to Exterminate Web Bugs visitors see. Each visitor's shopping cart is unique; everyone's view of the shopping cart in a Web browser Chapter 20 - Ten HTML Do’s and Don’ts is unique. Part VII - Appendixes Appendix A - HTML only to help you display information. If you want that information to provide a smart HTML is designed 4 Tags Appendix B for HTML Character Codes as varying the display automatically to fit the person viewing it), you'll response - different viewers (such Appendix C -other technologies in addition to HTML. need some Glossary Index For Sheet - sites that offer advanced features Cheatexample,HTML 4 For Dummies, 4th Edition - such as shopping carts, bill payment, customized news, and Figures List ofpersonalized displays - use both programming code and databases to make these features work. List of Tables Don't let the words programming and database intimidate you. Neither is required to put together a solid List of Listings Web site of well-designed and robust pages. There are entire Web sites that meet their goals beautifully List of Sidebars a lick of programming code (the W3C is a great example). Fortunately, if you find that the without using only way to meet your page's goals is with programming (selling products online is a typical example), the Web is chock-full of resources to help you. Tip Chapters 10,12, and 14 look more closely at what it takes to add programming and database functionality to your Web page or site.
  • HTML You Want 4th Edition Deciding What 4 for Dummies,to Use HTML For by Ed Tittel and Natanya Pitts ISBN:0764519956 You've looked around Wiley & Sons © and know what others are dong with their pages, and you have an John the Web a bit 2003 (408 pages) idea of what you Whether your goal is tobut nowsimple, text-oriented Web siteinto a more concrete plan. want your page to do, build a it's time to solidify that idea (Okay, we admit that your planwith probably change and animation, this stepor one loaded will frames, graphics, along the way, but you have to start somewhere.) by-step book will put you on the right track. To help formulate that plan, answer the four questions that head the upcoming sections as best you can now; revisit them from time to time as your Web page evolves. You can consult the resulting design for Table of Contents write your HTML. your page as you HTML 4 For Dummies, 4th Edition Introduction What do you want your page to do for you? Part I - Meeting HTML in Its Natural Environment Chapter 1 you The Least You Need to Knowfor fun,HTML and the some of both? The most important thing you Why are - building a Web page? Is it about for profit, for Web Chapter 2know about your page is what you want it to do for you. Everything else about your page, from the - HTML at Work on the Web need to Chapterlooks-to the information and HTML you use to build it, grows out of that one idea. Creating Your First HTML Page way it 3 Part II - Getting Started with HTML For example,Structuring Your HTML a Web version of your résumé to give to potential employers or to help Chapter 4 - if you decide to build Documents drum 5 - Linking to Online Resources Chapterup some consulting business, you can make some good assumptions about how that page should look and - Finding and Using Images Chapter 6 decide what information absolutely must be on it: Chapter 7 - Top Off Your Page with Formatting The design should be professional. Part III - Taking HTML to the Next Level Chapter 8 - won't play GraphicsHTML Tablesa large role because the meat of the page should be your work history and other Chapter 9 - HTML Frames relevant information. Chapter 10 - HTML Forms You will use a combination of Technologies Part IV - Extending HTML with Otherheadings, paragraphs, Chapter 11 - Getting Stylish with CSS Chapter 12 lists, and other text elements to build the page. - HTML and Scripting The page may link to the Web sites of companies you've worked on in the past. Chapter 13might want Multimedia downloadable versions of your résumé in text, PDF, or Microsoft Word You - Making to include Magic Chapter 14 - Integrating a Database into Your HTML format for easy printing. Chapter 15 - How HTML Relates to Other Markup Languages Although you may decide to expand Part V - From Web Page to Web Site your résumé page later into a site that includes examples of your work or references, initially an HTML Toolbox be just a single page. your presence will Chapter 16 - Creating Chapter 17 -you're planning to put together a digital scrapbook that chronicles your growing family's If, however, Setting Up Your Online Presence Chapter 18 - you will make a completely different set of assumptions, such as these: adventures, Creating a Great User Interface Part VI - The Part of Tens The - Ten Ways fun, playful, and a Bugs Chapter 19design can beto Exterminate Web reflection of your family's personality. Chapter 20 - Ten HTML Do’s and Don’ts Graphics, digital video, and even audio clips will play a significant role in the site because images are what digital scrapbook is all about. Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes well run the entire HTML gamut because your page will include The markup you use may very Appendix C - Glossary everything from text to images to media. Index CheatYou mayHTML 4 For Dummies,family members' Web sites, to your kid's favorite toy stores, or to maps Sheet - want to link to other 4th Edition List ofthat show the places you visited on vacation. Figures List of Tables You might want to set up a family mailing list or a guest book so visitors to your site can play an active role in the site. List of Listings List of Sidebars Your site may begin with a single page, but chances are it will rapidly grow into an entire Web site. When you lay out the assumptions for your page along the same general lines shown here, you catch a glimpse of how your page will evolve from an idea to a Web creation - and what it will take to get you there. How do you want your page to look?
  • The way your page looks forcritical to how effectively it does its job. Don't believe us? Read the following HTML 4 is Dummies, 4th Edition list and imagine what you might think if you saw pages that matched these descriptions: ISBN:0764519956 by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) Plain = uninteresting: If the site is too plain, people won't be inter- ested and may not stick around Whether your goal is to build a simple, text-oriented Web site long enoughor one loaded important information. and animation, this stepto get to the with frames, graphics, by-step book will put you on the right track. Busy = disorienting: If the page is a riot of images and colors, people may be overwhelmed and visit another site just to give their eyes a rest. Table of Contents Theme doesn't match content = a joke: Visitors won't take you or your information seriously if your design doesn't match the information on the page. (A Hawaiian luau, for example, really isn't an Introduction appropriate theme for a résumé page unless you cater luaus for a living.) HTML 4 For Dummies, 4th Edition Part I - Meeting HTML in Its Natural Environment Chapter 1 youThe Least You Need to Know update the look and Web of your page, it's a good idea to set aside Although - can continually tweak and about HTML and the feel Chaptertime before you buildon the Web decide what you want it to look like. Some quick and easy routes some 2 - HTML at Work the page to Chapter 3 - Creating Your First HTML to an initial design idea include these:Page Part II - Getting Started with HTML Bookmark or print pages HTML other Web sites whose designs are similar to what you want to use. Chapter 4 - Structuring Your from Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Sketch a design on paper or even a napkin at a restaurant. Just don't smear ketchup on the design. Chapter 7 ads Top Off Your Page with Formatting if they spark your interest. Clip - and other layouts from magazines Part III - Taking HTML to the Next Level Remember HTML Tables Chapter 8 - The goal here isn't to become a graphic designer or to finalize every detail of your page's appearance. HTML Frameswant to begin to build an overall idea of what you want your HTML to do for you Chapter 9 - Rather, you so you can construct it accordingly. Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Getting Stylish with CSS Do you -need multimedia, scripts, or other advanced features? Chapter 11 Chapter 12 - HTML and Scripting You need - Making Multimedia Magic Chapter 13 to decide whether the overall plan for your page requires that you use multimedia, a shopping cart, a 14 - book, or any other features that go beyond what HTML can do for you. For example, if you Chapter guest Integrating a Database into Your HTML plan to build an online store, you'llOther Markup Languages need a shopping cart and some form of online payment system. - How HTML Relates to However, a site that just lists your consulting services may not need these features at all. Part V - From Web Page to Web Site Chapter 15 Chapter 2-1 shows you different kinds of features you might consider, what kind of effort and skills you might Table 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence can find information on these skills. need to do the work yourself, and where you Chapter 18 - Creating a Great User Interface Part VI - TheAdding Tens Table 2-1: Part of Advanced Chapter 19 Features to a Page - Ten Ways to Exterminate Web Bugs Feature Degree of Difficulty Chapter 20 - Ten HTML Do’s and Don’ts See Part VII - Appendixes Chapter 10 Forms to Although many of your Web pages will be designed to present Appendix A - HTML 4 Tags gather users with information, you may want to gather information Appendix B - HTML Character Codes Suggestion forms, a guest book, and a information from users as well. Appendix C - Glossary from visitors request for more information page are just a few examples of Index how you can use forms to interact with your users. Creating Cheat Sheet - HTML 4 For isn't difficult, but you'll need to have a script or other HTML Dummies, 4th Edition List of Figures application running in the background to work with the form List of Tables List of Listings List of Sidebars Image rollovers, drop-down menus, and other dynamic features data. Luckily, many such scripts are available on the Web for free. To make your Web page do interesting things such as dynamically swap images, display menus that appear and disappear, and hide and show content with the click of a button, you'll need to use JavaScript or VBScript. Neither is difficult to learn, and the Web is full of example scripts you can leverage. Chapter 12
  • Multimedia Actually adding audio, video, and multimedia to your Web HTML 4 for Dummies, 4th Edition Chapter 13 page is easy. Natanya and ISBN:0764519956 by Ed Tittel andDigitizing Pitts editing the multimedia presentations however requires John Wiley & Sons © 2003 (408 pages)a bit of knowledge and the right equipment. Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepWithout any programming knowledge, creating a shopping by-step book will put you on the right track. Shopping cart Chapter 14 cart from scratch is not easy. However, many Web site hosting providers have shopping cart tools you can easily Table of Contents integrate into your site for a small fee. HTML 4 For Dummies, 4th Edition If your page Introduction needs advanced features to meet its goal, you'll need to plan for those at the beginning of your page-building fun Its Natural if you plan to Part I - Meeting HTML in - especiallyEnvironment have someone (such as a consultant or even a friend with the right - The Least You Need to Know about HTML and the your Chapter 1 skills) help you. Think carefully about how you want Web advanced features to behave. Consider whether - then at Work on the Web Chapter 2 (andHTML decide how) they will fit with the other elements on your page. Then write everything down 3 - have a Your for the person helping you put the features together. Chapterso you Creatingguide First HTML Page Part II - Getting Started with HTML If you're not sold on using advanced features now but you think they may be nice to have later on, you can always makeStructuring Your HTML Documents integrate them into your page, and then set a time frame a few notes about how you might Chapter 5 learning how to build them, or for working with someone to have them built. for either - Linking to Online Resources Chapter 4 Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Do you plan to create a Web site? Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables If you intend for your Web page to grow into a larger site, start thinking about that larger site as you build Chapter 9 Sketch some ideas of other pages your site might include, and how those pages relate to the the page. - HTML Frames Chapter 10 you plan Forms Don't worry too much about those future pages themselves just yet; often an first page - HTML to build. Part IV - page design is different when there are more overall Extending HTML with Other Technologies Chapter 11 pages to follow. - Getting Stylish with CSS Tip Planning ahead for a complete site later can save you a lot of rework on the page you build now. Chapter 12 - HTML and Scripting Chapters - and 18 provide you the Chapter 13 17 Making Multimedia Magicbasics about planning and building a site that is easy for visitors to use and that achieves your a Database Chapter 14 - Integratingsite goals. into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages If you aren't sure whether you want your page to grow into a larger site later on, don't sweat it. The great thing about HTML is that you can quickly update it and place a new version of your page on the Web Chapter 16 - Creating an HTML Toolbox immediately for all to see. When you take advantage of HTML's organic nature, every markup, design, and Chapter 17 - Setting Up Your Online Presence content decision you make is reversible. Part V - From Web Page to Web Site Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • 4 for Dummies, Chapter HTML Tittel and NatanyaYour First HTML Page 3: Creating 4th Edition ISBN:0764519956 by Ed Pitts Overview John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepIn This Chapter by-step book will put you on the right track. Planning your Web page Table of Contents HTML Writing some HTMLEdition 4 For Dummies, 4th Introduction Saving your page Part I - Meeting HTML in Its Natural Environment Chapter 1 - The page offline and Know Viewing your Least You Need to online about HTML and the Web Chapter 2 - HTML at Work on the Web Editing -your pageYour First HTML Page Chapter 3 Creating Part II - Getting Started with HTML Creating your very first Web page can seem a little daunting, but it’s definitely fun, and our experience tells - Structuring Your HTML Documents us the best way to get started is to jump right in with both feet. You might splash around a bit at first, but Chapter 5 - Linking to Online Resources you’ll keep your head above water without too much thrashing. Chapter 4 Chapter 6 - Finding and Using Images Chapter 7 - walks you through four simple steps to creating a Web page. We won’t stop and explain This chapter Top Off Your Page with Formatting Part IIInuance of the markup you’re using every - Taking HTML to the Next Level — we save that for other chapters. Instead, we just want you to Chapter 8 get comfortable working with markup and content to create and view a Web page. - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • Before YouHTML 4Started 4th Edition Get for Dummies, by Ed Tittel and Natanya Pitts ISBN:0764519956 Creating HTML documents & Sons © differentpages) creating word-processing documents in an application John Wiley is a little 2003 (408 from like Microsoft Word because you have to use a simple, text-oriented Web site Whether your goal is to build two applications: You do the work in one (your text or HTML editor) and view theone loadedthe other (your Web browser). Well, okay, it is a bit unwieldy to edit in one or results in with frames, graphics, and animation, this stepby-step another put you to the at your work, but you’ll be switching like a pro from text application and switch to book will in order on lookright track. editor to browser and back in (almost) no time. Table of Contents your first Web page, you need two things: To get started on HTML 4 For Dummies, 4th Edition A text Introductioneditor such as Notepad or SimpleText Part I - Meeting HTML in Its Natural Environment A Web browser Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 in this chapter show HTML created with TextPad, a shareware plain-text editor available from All figures - HTML at Work on the Web Chapter 3 - Creating www.textpad.com. Your First HTML Page Part II - Getting Started with HTML We discuss-these basic tools HTML Documents Chapter 4 Structuring Your in a little more detail in Chapter 6. Also, if you plan to use an HTML editor such as Chapter 5 FrontPage or Dreamweaver to do your HTML work, put it away for now and whip out good ol’ - Linking to Online Resources Notepad - Finding and Using Images Chapter 6 instead. More advanced HTML editors often hide your HTML from you, and for the purposes of your first - Top Off Your Page with Formatting Chapter 7 page, you want to see your HTML in all of its glory. You’ll be able to make a smooth transition to a more Taking HTML to later. Part III - advanced editorthe Next Level Chapter 8 Although youHTML Tables might be tempted to use Microsoft Word or some other word processor instead of Notepad Chapter 9 - HTML Frames or a plain-text editor to work with HTML, we strongly recommend that you don’t. Word processors tend to Chapter 10 of HTML information behind the scenes of the files they create (for example, formatting store a lot - extra Forms Part IV - Extending HTML with Other Technologies instructions your computer needs to display or print said files) that you can’t see or change, but that will Chapter 11with Getting Stylish with CSS interfere - your HTML. Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • Creating a HTML 4 for Dummies, 4th Edition Page from Scratch by Ed Tittel and Natanya Pitts ISBN:0764519956 Using HTML to createWiley & Sons © 2003 scratch involves four straightforward steps: John a Web page from (408 pages) 1. Plan yourWhether your goal is to build a simple, text-oriented Web site page design. or one loaded with frames, graphics, and animation, this step- 2. Combine by-step and text in ayou on the rightmake that design a reality. HTML book will put text editor to track. 3. Save your page. Table of Contents HTML 4 For Dummies, 4th in a Web browser. 4. View your page Edition Introduction So break out your text editor and Web browser and roll up your sleeves. Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Step 1: -Planning a simple design HTML at Work on the Web Chapter 2 Chapter 3 - Creating Your First HTML Page Although you can just with HTML Part II - Getting Startedstart writing HTML without a final goal in mind, we’ve discovered (painfully) over time that a few minutes spentYour HTMLyour general approach to a page at the beginning of your work will make planning Documents Chapter 4 - Structuring the whole page creation process much easier. You don’t have to create a complicated diagram or elaborate Chapter 5 - Linking to Online Resources graphical display in this step; just jot down some ideas for what you want on the page and how you want it Chapter 6 - Finding and Using Images arranged. Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to be at your desk You don’t even have to the Next Level to plan your simple design. Take a notepad and pencil outside and Chapter 8 the HTMLor scribble on a napkin while you’re having lunch. Remember, this is supposed to be fun. design in - sun, Tables Chapter 9 - HTML Frames The example in this chapter is our take on the traditional “Hello World” exercise used as the most basic Chapter 10 - HTML Forms example for just about every existing programming Part IV - Extending HTML with Other Technologies language. Customarily, you learn how to use a programming language to with CSS Chapter 11 - Getting Stylishdisplay the phrase Hello World on-screen. In our example, we create a short letter to the HTML and Scripting Chapter 12 -world instead, so the page is a bit more substantial and gives you more to work with. Figure 3-1 shows our basic design for this page. - Making Multimedia Magic Chapter 13 Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • Figure 3-1: Taking a few minutes to sketch your page design makes writing HTML easier. HTML 4 for Dummies, 4th Edition ISBN:0764519956 The basic designby Ed Tittel and Natanya Pitts for the page includes four basic components: John Wiley & Sons © 2003 (408 pages) A serviceable title: “Hello World”.to build a simple, text-oriented Web site Whether your goal is or one loaded with frames, graphics, and animation, this step- A few paragraphs explaining howyou on the right track. by-step book will put the page’s author plans to help the Earth meet its yearly quota of Znufengerbs. Table ofsalutation of “Sincerely”. A Contents HTML 4 For Dummies, 4th Edition A signature. Introduction Part I - Meeting HTML in Its Natural Environment Don’t forget to jot down some notes about that color scheme you want to use on the page. For effect, we Chapter 1 that our example page should have a black background and white text, and the title should be decided - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web “Greetings From Your Future Znufengerb Minister.” Chapter 3 - Creating Your First HTML Page When Getting Started with HTML Part II -you know what kind of information you want on the page, you can move on to Step 2 — writing the markup. Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Finding and Using Images Step 2: -Writing some HTML Chapter 6 Chapter 7 - Top Off Your Page with Formatting You have a couple of different options Part III - Taking HTML to the Next Level when you’re ready to create your HTML. If you already have some content that you just want to describe with HTML, you can save that content as a plain-text file and add text Chapter 8 - HTML Tables around Chapter 9it. Alternately, you can start creating markup and add the content in as you go. In the end, you’ll - HTML Frames probably - some combination of both. Chapter 10useHTML Forms Part IV - Extending HTML with Other Technologies In our example, we already had some text to start with that was originally in a Word document format; we just - Getting Stylish with CSS saved the content as a text file and added markup around it. Chapter 11 Chapter 12 - HTML and Scripting Chapter 13 Word file as a text document, choose FileØSave As. In the dialog box that appears, choose Text To save a - Making Multimedia Magic Chapter 14 from the Save As Type drop-down list. Only (*.txt) - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Figure 3-2 shows how to Web Site Part V - From Web Page our draft letter appears in Microsoft Word before we convert it to text for our page. Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 3-2: The letter that is the text for our page in word-processing form. “Hello World” in HTML The complete HTML page looks like Listing 3-1:
  • Listing 3-1: The Complete HTML Page for the Zog Letter HTML 4 for Dummies, 4th Edition <!DOCTYPE HTML Ed Tittel and Natanya Pitts ISBN:0764519956 by PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site <html> or one loaded with frames, graphics, and animation, this step<head> by-step book will put you on the right track. <title>Greetings From Your Future Znufengerb Minister</title> </head> Table of Contents HTML 4 For Dummies, 4th Edition text="white"> <body bgcolor="black" Introduction Part<h1>Hello World</h1> I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work our Web <p>It has come to on theattention that Earth has fallen well short of Chapter producing its yearly quota of Znufengerbs. To help you improve your 3 - Creating Your First HTML Page Part II - production and establish Getting Started with HTML a plentiful Znufengerb colony, I, Zog, the Chapter Minister of Agriculture of Grustland, will be arriving on your planet 4 - Structuring Your HTML Documents Chapter within thetoweek along with my herd experts to take command of your 5 - Linking Online Resources Chapter Znufengerband Using Images 6 - Finding enterprise. </p> Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level <p>Do not fear, I have the highest expectations for a smooth transition Chapter 8 - HTML Tables from HTML Frames your current production of the creatures you call cows to our beloved Znufengerbs. The future of the galaxy hinges on Earth’s ability to meet Chapter 10 - HTML Forms its Znufengerb quota, and I will do all in my power to make you the most Part IV - Extending HTML with Other Technologies productive source of Znufengerbs in the universe. Chapter 11 - Getting Stylish with CSS </p> Chapter 9 Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic <p>I have studied your history extensively and feel that I am the best Chapter candidate for Database into Your of Znufengerb Minister. I look forward to 14 - Integrating a the position HTML Chapter placing HTML Relates to Other Markup Languages bring you joy. 15 - How a Znufengerb in every home to Part</p> V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence <p>Sincerely,</br> Chapter Zog, Creating a Great User Interface 18 - Minister of Agriculture Part</p> VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs </body> Chapter 20 - Ten HTML Do’s and Don’ts </html> Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary What Index the markup is doing Cheat Sheet - HTML 4 For Dummies, 4th Edition The HTML includes a collection of markup elements and attributes that describe the letter’s contents: List of Figures List ofThe<html> element defines the document as an HTML document. Tables List of Listings List ofThe<head> element creates a header section for the document, and the <title> element inside of it Sidebars defines a document title that will be displayed in the browser’s title bar. The<body> element holds the actual text that will display in the browser window. The bgcolor and text attributes work with the <body> element to set the background color to black and the text color to white. The<h1> element marks the Hello World text as a first-level heading.
  • The<p> elements identify each of the paragraphs in the document. HTML 4 for Dummies, 4th Edition ISBN:0764519956 The<br> element Tittel and Natanya Pitts by Ed adds a manual line break after the word Sincerely in the salutation. John Wiley & Sons © 2003 (408 pages) Don’t worry about the ins and outs of to build a simple,elements work. They are covered in detail in Chapters Whether your goal is how all of these text-oriented Web site 4 and 7. or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. After you create a complete HTML page, or at least the first chunk of it that you want to review, you must save it before you can view your work in a browser. Table of Contents HTML 4 For Dummies, 4th Edition Step 3: Saving your page Introduction Part I - Meeting HTML in Its Natural Environment your Remember that you use a text editor to create HTML documents and a Web browser to view them, but Chapter 1 before you - The Least You Need loose onabout HTMLand the Web can let your browser to Know your HTML page, you have to save that page. When you’re just Chapter 2 a page, you should save a copy of it to your local hard drive and view it locally with your browser. - HTML at Work on the Web building Chapter 3 - Creating Your First HTML Page Choosing a location and name for your file Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents When 5 - Linking file to your hard drive, keep two things in mind: Chapter you save yourto Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting You need to be able to find it again soon. Part III - Taking HTML to the Next Level you The name should make sense to Chapter 8 and work well on a Web browser. - HTML Tables That said, - HTML Frames Chapter 9 we recommend that you create a folder somewhere on your hard drive especially for your Web pages. Call “Web Pages” Chapter 10 -itHTML Forms or “HTML” (or any other name that makes sense to you), and be sure you put it somewhere easy HTML with Other Technologies Part IV - Extending to find. Chapter 11 - Getting When you choose a Stylish for your page, don’t include spaces in it because some operating systems — most name with CSS Chapter 12 - and Linux Scripting popular Web-hosting operating systems around) — don’t tolerate spaces in notably Unix HTML and (the most Chapter 13 Choose names that Magic sense to you and that you can use to identify file contents without filenames. - Making Multimedia make Chapter 14 - Integrating a Database into Your HTML actually opening the file. Chapter 15 - How HTML Relates to Other Markup Languages In our From Web Page to Web file Part V - example, we saved our Sitein a folder called Web Pages and named it (drumroll, please) zog_letter.html, as shown in Figure 3-3. Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List ofFigure 3-3: Choose an easy-to-access location and a descriptive filename for your HTML pages. Sidebars .htm or .html Notice that our filename, zog_letter.html, uses the .html suffix. You can actually choose from one of two suffixes for your pages: .html or .htm. The shorter .htm is a relic from the 8.3 DOS days when filenames could only have eight characters followed by a three-character suffix that describes the file’s type. Today, operating systems can support very long filenames and suffixes that are more than three letters long
  • so we suggest you stick with .html. HTML 4 for Dummies, 4th Edition ISBN:0764519956 That said, you can use Tittel and Natanya Pitts and Web servers and Web browsers will handle both equally by Ed either .htm or .html, John recommend that (408 pages) well. We do, however,Wiley & Sons © 2003you stick with one option or the other to be consistent. Even though .html and .htm files areyour goaltheto buildby simple, text-oriented Web site Whether treated is same a browsers and servers, they are different suffixes. The name or one loaded with frames, graphics, and animation, this stepzog_letter.html is different from zog_letter.htm, and this matters when you create hyperlinks, as by-step you learn in Chapter 5. book will put you on the right track. Step 4: Viewing your page Table of Contents HTML 4 For Dummies, 4th Edition After you save a copy of your page, you’re ready to view it in a Web browser. If you haven’t opened your Introduction browser, do that now. Its Natural Environment Part I - Meeting HTML inNext, choose FileØOpen and click the Browse button. Navigate your file system until you find Chapter 1 your The Least You Need to in Figure 3-4. - HTML file, as shown Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 Getting Figure -3-4: Use Stylish with CSS to navigate to your Web pages. Internet Explorer Chapter 12 - HTML and Scripting Chapter 13Open button, and the page appears in your Web browser in all its glory, as shown in Figure 3-5. Click the - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List ofFigure 3-5: Viewing a file in your Web browser. Listings List of Sidebars You aren’t actually viewing this file on the Web yet; you’re just viewing a copy of it saved on your local hard drive. You can’t give anyone the URL for this file yet, but you can edit and view the changes you make.
  • HTML 4 for Web Page Editing an ExistingDummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 Chances are you’ll want to change © 2003 (408 pages) John Wiley & Sons one thing (at least) about your page after you view it in a Web browser for the first time. After all, your can’t is to build ahow the page is goingWeb site when you’re creating the Whether you goal really see simple, text-oriented to look markup, and youor one loaded with frames, graphics, andis too big orthis step- really want purple text on a might decide that a first-level heading animation, that you by-step book will put you on the right track. green background. To make changes to the Web page you’ve created in a text editor and are viewing in a browser, follow Table ofsteps: these Contents HTML 4 For Dummies, 4th Edition 1. Leave the browser window with the HTML page display open and go back to the text editor. Introduction Part 2.- Meeting HTMLpage isn’t open in the text I If the HTML in Its Natural Environment Chapter 1 editor, open it. - The Least You Need to Know about HTML and the Web should at Work on the file Chapter You - HTML have the sameWebopen in both the browser and the text editor, as shown in Figure 3-6. 2 Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 Figure 3-6: Viewing an HTML file in your text editor and Web browser at the same time. - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface 3. Make your changes to the HTML and its content in the text editor. Part VI - The Part of Tens Chapter Save the changes. 4. 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII This is an important - Appendixes step. If you don’t save your changes, you won’t see them in the Web browser. Appendix A - HTML 4 Tags 5. Move back to the Web browser and click the Refresh button. Appendix B - HTML Character Codes Appendix C - Glossary steps until you’re happy with the final display of your page. 6. Repeat these Index Although you don’t have to keep the HTML file Cheat Sheet - HTML 4 For Dummies, 4th Edition open in both the text editor and the browser while you work, it’s easiest if List of Figures you do. You can quickly make a change in the editor, flip to the browser and refresh, flip back to the editor to make more changes, flip back to the browser and refresh, and so on. List of Tables List our example letter, we decided after our initial draft of the HTML page that we should add a date to the In of Listings List of Sidebars letter.Figure 3-7 shows the change we made to the HTML to add the date and the resulting display in the Web browser.
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 Figure -3-7: A change in the HTML is displayed in a browser after a quick save and refresh. Structuring Your HTML Documents Chapter 5 - Linking to Online Resources This approach to editing Using Images only applies to pages saved on your local hard drive. If you want Chapter 6 - Finding and an HTML page to edit a page that you have alreadyFormatting a Web server, you have to save a copy of the page to your stored on - Top Off Your Page with hard drive, edit HTML to yourNext Level and then upload the file again to the server, as discussed in the it, verify the changes, Part III - Taking following section. Chapter 7 Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Online Posting Your Page Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 After you’re happy with your & Sons © 2003it’s time to put it online. Chapter 17 is devoted to a detailed John Wiley Web page, (408 pages) discussion of what you need togoalto putbuild apage online, but to sum it up in a few quick steps: Whether your do is to your simple, text-oriented Web site or hosting provider to hold your and pages. 1. Find a Web one loaded with frames, graphics,Webanimation, this stepby-step book will put you on the right track. Your Web host might be a company Web server or space that you pay an ISP for. If you don’t have a provider yet, double-check with the ISP you use for Internet access — see whether you get some Table of Contents Web-server space along with your access. Regardless of where you find space, get details from the HTML 4 For Dummies, 4th Edition provider on where to move your site’s files and what your URL will be. Introduction Part 2.- Meeting HTMLclient Natural Environmentto I Use an FTP in Its or a Web browser make a connection to your Web server as specified in Chapter the information from your Know about HTML and the Web 1 - The Least You Need to hosting provider. Chapter 2 - HTML at Work on the Web 3. 3 - the HTML file from your hard Chapter Copy Creating Your First HTML Page drive to the Web server. Part II - Getting Started with HTML 4. Use your Web browser to view the file via the Internet. Chapter 4 - Structuring Your HTML Documents Chapter 5 - to host our letter online at For example,Linking to Online Resources ftp.io.com/~natanya, we used Internet Explorer to access Chapter 6and providedand Using Imagesname and password (which you will get from your ISP). A collection - Finding the appropriate the site Chapter 7 and files appeared. with Formatting of folders - Top Off Your Page Part III - Taking HTML to the Next Level We copied - HTML to the server with a simple drag-and-drop operation from Windows Explorer to Internet the file Tables Chapter 8 Explorer, as shownFrames 3-8. in Figure - HTML Chapter 9 Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Figure Glossary Appendix C -3-8: Drag and drop HTML files from your local system to a Web server to make them available Indexon the Internet. Cheat Sheet - HTML 4 For Dummies, 4th Edition The URL for this page is http://www.io.com/~natanya/zog_letter.html, and the page is now served from the Web browser instead of from a local file system, as shown in Figure 3-9. List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 Figure -3-9: After you transfer aDocuments Structuring Your HTML file to a Web server, it’s available via a URL to anyone with a Web browser and liveto Online connection. Chapter 5 - Linking Internet Resources Chapter 6 - Finding and Using Images Again, see Chapter 17 forPage with Formatting to serve your Web pages to the world. more details on how Chapter 7 - Top Off Your Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, Part II: Gettingand Natanya4th Edition HTML Started with ISBN:0764519956 by Ed Tittel Pitts John Wiley & Sons © 2003 (408 pages) In This Part: Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Chapter 4: Structuring Your HTML Documents Table of Contents HTML Chapter 5: Linking to Online Resources 4 For Dummies, 4th Edition Introduction Chapter 6: Finding and Using Images Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least Your Page Know about HTML Chapter 7: Top OffYou Need to with Formatting and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML In this part . . . Your HTML Documents - Structuring Chapter 4 Chapter part of Linking to Online Resources markup and document structures that make Web pages workable In this 5 - the book, we describe the Chapter 6 - Finding and Using Images and attractive. To begin with, we explore and explain basic HTML document structure and talk about Chapter 7 - Top blocks Page with Formatting organizing text in Off Yourand lists. Next, we explain how linking works in HTML, and how it provides the Part III - Taking HTML toWorld Wide Web glue that ties the entire the Next Level together. Then we explain how to add graphics to your pages. Chapter 8we - HTML Tables Finally, cover the elements of HTML formatting — including colors, backgrounds, and fonts — so you Chapter 9 your HTML documents (and Web pages) really stand out! can make - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • 4 for Dummies, Chapter HTML Tittel and Natanya4th Edition HTML Documents 4: Structuring Your ISBN:0764519956 by Ed Pitts Overview John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepIn This Chapter by-step book will put you on the right track. Creating a basic document structure Table of Contents HTML Defining metadata Edition 4 For Dummies, 4th Introduction Working with paragraphs, headings, and other block elements Part I - Meeting HTML in Its Natural Environment Chapter 1 - bulleted, You Need to Know about HTML Creating The Least numbered, and definition lists and the Web Chapter 2 - HTML at Work on the Web HTML 3 - Creating Your First HTML Page Chapter documents consist of text, images, multimedia files, links, and other pieces of content that you bring together into a Started with HTML Part II - Getting single page using markup elements and attributes. You use blocks of text to create headings, paragraphs, lists, and more. The first step in creating a solid HTML document is laying a firm Chapter 4 - Structuring Your HTML Documents foundation that establishes the document’s structure. Chapter 5 - Linking to Online Resources Chapter 6 This chapter Finding the major Images that you use to set up a basic HTML document structure — covers and Using elements Chapter 7 the Top Off Your Page with document. We also show you how to define the various large chunks of including - head and body of the Formatting Part III - Taking HTML to the Next Level Finally, you find out how to use HTML’s three different kinds of lists text that will make up your document. Chapter 8 HTML Tables — bulleted,-numbered, and definition — to group like information and add a little visual variety to your Chapter 9 - HTML Frames page. Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition Establishing a Basic Document Structure by Ed Tittel and Natanya Pitts ISBN:0764519956 Although no two HTML pages Sonsalike — each employs a unique combination of content and elements to John Wiley & are © 2003 (408 pages) define the page — every HTML page to build a simple, text-oriented Web sitestructure that includes Whether your goal is must have the same basic document or one loaded with frames, graphics, and animation, this step- A statement by-step book will put you on the an HTML document that identifies the document as right track. A document header Table of Contents HTML A document body Edition 4 For Dummies, 4th Introduction Every time you create an HTML document, start with these three elements; then you can fill in the rest of your content and markup to create an individual page. Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 Tip Although a basic document structure is a requirement for every HTML document, creating it over and - HTML at Work on the Web over again can be a little monotonous. Most HTML editing tools — shareware, freeware, and commercial Chapter 3 - Creating Your First HTML Page — II - Getting Started with the basic Part can automatically set up HTML document structure for you when you start a new HTML document. As you evaluate potential HTML editors, look for this feature and others that help you create commonly Chapter 4 - Structuring Your HTML Documents used chunks Linking to Onlineas list structures and basic tables. Chapter 16 includes more information on Chapter 5 - of HTML, such Resources finding a - Finding and Using Images Chapter 6 good HTML editor to make your page creation more efficient. Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition Labeling Your Document as an HTML Page by Ed Tittel and Natanya Pitts ISBN:0764519956 Every HTML document must begin© 2003a(408 pages) declaration that specifies which version of HTML you John Wiley & Sons with DOCTYPE used to create the document. (DOCTYPE is short for document type.) There are three possible DOCTYPE Whether your goal is to build a simple, text-oriented Web site declarations for HTML 4.0 documents, onegraphics, and animation, this stepor one loaded with frames, for each of the three flavors of HTML: by-step book will put you on the right track. HTML 4.0 Transitional: The most inclusive version of HTML 4.0 that incorporates all HTML structural elements as well as all presentation elements. Table of Contents HTML 4 For Dummies, 4th Edition <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 HTML - The Least A streamlined version of HTML and the Web all presentation-related elements in 4.0 Strict: You Need to Know about HTML that excludes Chapter 2 of style sheets as a mecha- nism for driving display. favor - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML <!DOCTYPE HTML PUBLIC Chapter 4 "-//W3C//DTD HTML 4.0//EN" - Structuring Your HTML Documents "http://www.w3.org/TR/REC-html40/strict.dtd"> Chapter 5 - Linking to Online Resources HTML - Finding and Using Images HTML that begins with HTML 4.0 Transitional and includes all the 4.0 Frameset: A version of Chapter 6 elements that make frames possible. Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" Chapter 9 - HTML Frames "http://www.w3.org/TR/REC-html40/frameset.dtd"> Chapter 10 - HTML Forms Regardless of the HTML flavor you choose to use, Part IV - Extending HTML with Other Technologies always begin every document with a DOCTYPE declaration. Most browsers with display your page even if you don’t, but some others won’t, so it’s always can CSS Chapter 11 - Getting Stylish better to be safe than sorry. Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia information on why there are three different flavors of HTML and shows you Tip Chapter 1 includes more Magic Chapter 14 - Integrating flavor for an individual HTML document. how to choose the right a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages After - From Web Page version of Part V you specify whichto Web SiteHTML the document follows, you must create an <html> element to hold all the Creating an HTML Toolbox Chapter 16 -other content markup in your page: Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" Part VI - The Part of Tens "http://www.w3.org/TR/REC-html40/loose.dtd"> Chapter 19 - Ten Ways to Exterminate Web Bugs <html> Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes </html> Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Remember It’s easy, but also important: Never forget that a single <html> element holds all other text in your HTML page. Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Adding a Document Header Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 After you’ve declared which & Sons ©of HTMLpages) document adheres to and created an <html> element, John Wiley version 2003 (408 your you set up a document headergoal is to build some basic information about the document, including its title Whether your that provides a simple, text-oriented Web site and metadata, which provides with frames, graphics, andthe document such as keywords, author information, or one loaded useful information about animation, this stepby-step book will you’re on the right a style a description, and so forth. Also, ifput you going to usetrack. sheet (internal or external) with your page, you include information about that style sheet in the header. Table of Contents includes a complete overview of creating style sheets with CSS and shows you how to Tip Chapter 11 HTML 4 For Dummies, 4th Edition include them in your HTML documents. Introduction The<head> element, Its Natural Environment Part I - Meeting HTML inwhich defines the page header, Chapter 1 immediately follows the <html> opening tag: - The Least You Need to Know about HTML and the Web Chapter 2 <!DOCTYPE HTML atPUBLIC the Web - HTML Work on "-//W3C//DTD HTML 4.0 Transitional//EN" Chapter 3 - "http://www.w3.org/TR/REC-html40/loose.dtd"> Creating Your First HTML Page Part II - Getting Started with HTML <html> Chapter 4 - Structuring Your HTML Documents <head> - Linking to Online Resources Chapter 5 Chapter 6 - Finding and Using Images </head> Top Off Your Page with Formatting Chapter 7 </html> Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables - HTML Frames Giving your page a title Chapter 9 Chapter 10 - HTML Forms Every - Extending needs a descriptive title that Part IV HTML pageHTML with Other Technologieshelps a visitor understand at a glance why the page exists in the first place. The page title should Chapter 11 - Getting Stylish with CSS be concise, yet informative. (For example, My home page isn’t nearly as informative HTML IT Scripting Chapter 12 -as Ed’sandConsulting Service.) Chapter 13 - Making Multimedia Magic the <title> element inside the <head> element: You define the title for your page using Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 <html> - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface <head> Part VI<title>Ed’s IT Consulting Service</title> - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs </head> Chapter 20 - Ten HTML Do’s and Don’ts </html> Part VII - Appendixes The document title doesn’t Appendix A - HTML 4 Tags actually show up in the middle of a browser window in huge boldface text. Instead, most browsers display the Appendix B - HTML Character Codes page title as in the browser window’s title bar, as shown in Figure 4-1. Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 4-1: HTML page titles usually appear in a Web browser’s window title bar. Remember Search engines use the contents of the <title> bar when they list Web pages in response to
  • a query. Your page title may be the first thing your visitors read about your Web page, especially if they find it HTML via their favorite search 4 for Dummies, 4th Edition will most likely be listed (by its title) with many others on engines because your page ISBN:0764519956 by Ed Tittel and Natanya Pitts a search results page — you’ve got one chance to grab your audience’s attention and get them to choose John WileyA well-crafted (408 pages)do just that, as discussed in more detail in Chapter 17. & Sons © 2003 title can your page over the others. Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Defining metadata The term metadata refers to data about data; in the context of the Web, it means data that describes the data Table of Contents on your Web page. Metadata for your page may include HTML 4 For Dummies, 4th Edition Keywords Introduction Part I - Meeting HTML in Its Natural Environment A description of your page Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Information about the page author Chapter 3 - Creating Your First HTML Page The software application you Part II - Getting Started with HTML Chapter 4 used to create the page - Structuring Your HTML Documents You use the <meta> element and the name and content attributes to define each piece of metadata for - Linking to Online Resources your HTML page. For example, the following elements create a list of keywords and a description for a Chapter 6 - Finding and Using Images consulting-service page: Chapter 5 Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" - HTML Tables "http://www.w3.org/TR/REC-html40/loose.dtd"> Chapter 8 Chapter 9 - HTML Frames Chapter 10 - HTML Forms <html> <head> Chapter 11 - Getting Stylish with CSS <title>Ed’s IT Consulting Service</title> Chapter 12 - HTML and Scripting <meta name="keywords" content="IT consulting, MCSE, networking guru"> Chapter 13 - Making Multimedia Magic <meta name="description" content="An overview of Ed’s skills and services"> Chapter 14 - Integrating a Database into Your HTML </head> Chapter 15 - How HTML Relates to Other Markup Languages </html> Part IV - Extending HTML with Other Technologies Part V - From Web Page to Web Site The HTML specification HTML Toolbox Chapter 16 - Creating an doesn’t predefine the different kinds of metadata you can include in your page, nor does it specify how Up Your Online Presence Chapter 17 - Settingto name different pieces of metadata, such as keywords and descriptions. So, for example, - Creating a Great User Interface Chapter 18 instead of using keywords and description as names for keyword and description metadata, you can just as of Tens Part VI - The Parteasily use kwrd and desc, as in the following markup: Chapter 19 - Ten Ways to Exterminate Web Bugs <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" Chapter 20 - Ten HTML Do’s and Don’ts "http://www.w3.org/TR/REC-html40/loose.dtd"> Part VII - Appendixes Appendix A - HTML 4 Tags <html> Appendix B - HTML Character Codes <head> Appendix C - Glossary <title>Ed’s IT Consulting Service</title> <meta name="kwrd" content="IT consulting, MCSE, networking guru"> Cheat Sheet - HTML 4 For Dummies, 4th Edition <meta name="desc" content="An overview of Ed’s skills and services"> List of Figures </head> List of Tables </html> Index List of Listings List of you can use just any old values for metaname and content attributes, how do systems know what to So if Sidebars do with your metadata? The answer is — they don’t. Each search engine works differently, although keywords and description are commonly used metadata names, many search engines may not recognize or use other metadata elements that you include. Instead, many developers use metadata as a way to leave messages for others who might look at the source of their page later, or with the hope that one day browsers and search engines will make better use of the metadata they’ve provided. Tip Although you may not want to take the time to load your page with metadata, be sure you do include
  • keywords and a page description. Those two metadata elements are most commonly used by search HTML 4 for Dummies, engines. Keywords help engines catalog4th Editionmore precisely; many engines display your description your page ISBN:0764519956 by title, which gives prospective visitors a bit more information about your site — and maybe along with the page Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) incentive to visit it. Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Automatically redirecting users to another page You can use metadata in your header to send messages to Web browsers about how they should display or Table of Contents your Web page. You commonly see the <meta> element used this way to automatically otherwise handle HTML 4 For Dummies, 4th Edition page to the other. For example, if you’ve ever come across a page that says redirect page visitors from one Introduction This page has moved. Please wait 10 seconds to be automatically sent to the new Part I - Meeting HTML in Its similar), Environment location (or something Natural you’ve seen Chapter 1 this trick at work. - The Least You Need to Know about HTML and the Web To use the - HTML atelement to send messages to the browser, you use the http-equiv attribute in place <meta> Work on the Web of the name attribute. Then, you choose from a predefined list of values that represents instructions for the Chapter 3 - Creating Your First HTML Page browser. These values are based on instructions you can also send to a browser in the HTTP header, but Part II - Getting Started with HTML changing the HTTP header for a document is more difficult than embedding the instructions into the Web Chapter 4 - Structuring Your HTML Documents page itself. Chapter 2 Chapter 5 - Linking to Online Resources Chapter 6 - browser to Using Images To instruct a Finding and redirect users from one page to another, you use the <meta> element with an Chapter 7 - Top Off Your Page with of refresh http-equiv attribute with a value Formatting and a value for content that specifies how many seconds Part III - Taking HTML to the Next what URL before the refresh happens and Level you want to jump to. For example, this <meta> element creates a Chapter 8that-jumps Tables refresh HTML to www.w3.org after 15 seconds: Chapter 9 - HTML Frames Chapter 10 - HTML Forms <meta http-equiv="refresh" content="15; url= http://www.w3.org/"> Part IV - Extending HTML with Other Technologies Warning - Getting Stylish with may Chapter 11 Older Web browsers CSS not know what to do with <meta> elements that use the http-equiv element to create and Scripting Chapter 12 - HTML a redirector page. Be sure to include some text and a link on your page to enable a visitor to link 13 - Making Multimedia Magic Chapter manually to your redirector page if your <meta> element fails. Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages The line shown in bold in the following markup shows you how: Part V - From Web Page to Web Site <!DOCTYPE CreatingPUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" HTML an HTML Toolbox "http://www.w3.org/TR/REC-html40/loose.dtd"> Chapter 16 Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens <html> - Ten Ways to Exterminate Web Bugs <head> Chapter 20 - Ten HTML Do’s and Don’ts <title>All About Markup</title> Part VII - Appendixes <meta http-equiv="refresh" content="15; url= http://www.w3.org/"> Appendix A - HTML 4 Tags </head> Chapter 19 Appendix B - HTML Character Codes Appendix C - Glossary <body> Index <p>This page is still in development. Until we are done, please visit Cheat Sheet - HTML 4 For Dummies, 4th Edition the <a href="http://www.w3.org">W3C Website</a> for the definitive List of Figures collection of markup-related resources. </p> List of Tables List of Listings <p>Please wait 10 seconds to be automatically redirected to the W3C.</p> List of Sidebars </body> </html> If a user’s browser doesn’t know what to do with your redirector information, the user can simply click the link in the page body to go to the new page, as shown in Figure 4-2.
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part IFigure 4-2: When youNatural<meta> element - Meeting HTML in Its use a Environment to create a page redirector, include text that visitors can Chapter 1 if their browsers can’t handle the redirector. and the Web click - The Least You Need to Know about HTML Chapter 2 - HTML at Work on the Web On The - Creating Your First http-equiv attribute with the <meta> element for a variety of other Chapter 3 Web You can use theHTML Page purposes, including setting HTML Part II - Getting Started with an expiration date for a page, specifying the character set (that is, language) the page uses, -and more. To findHTML Documents Chapter 4 Structuring Your out what your http-equiv options are (and how to use them), check out the Dictionary - HTML to Online Resources Chapter 5 of Linking META tags at the following URL: Chapter 6 - Finding and Using Images http://vancouver-webpages.com/META/metatags.detail.html Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for of Your HTML Document Creating the Body Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 After you set up your page header,© 2003 (408title, and define some metadata, you're ready to create the John Wiley & Sons create a pages) HTML and content that will show up in abuild a simple, text-oriented Web element holds every bit of content Whether your goal is to browser window. The <body> site and markup not definedloaded with frames, graphics, you want to see something in your browser window, or one in the header. In general, if and animation, this stepby-step book put it in the <body> element: will put you on the right track. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" Table of Contents "http://www.w3.org/TR/REC-html40/loose.dtd"> HTML 4 For Dummies, 4th Edition Introduction <html> <head> Chapter 1 - The Least You Need to Know about HTML and the Web <title>Ed's IT Consulting Service</title> Chapter 2 - HTML at Work on the Web <meta name="kwrd" content="IT consulting, MCSE, networking guru"> Chapter 3 - Creating Your First HTML Page <meta name="desc" content="An overview of Ed's skills and services"> Part II - Getting Started with HTML </head> Part I - Meeting HTML in Its Natural Environment Chapter 4 - Structuring Your HTML Documents Chapter 5 <body> - Linking to Online Resources Chapter 6 - Finding Consulting Service Homepage</p> <p>Ed's IT and Using Images Chapter 7 - has over 20 with Formatting <p>Ed Top Off Your Page years of IT consulting experience and is available Part III - Taking HTML you with Level to help to the Next any IT need you might have. From network design Chapter 8 and configuration to technical documentation and training, you can - HTML Tables Chapter 9 count on Ed to help you create and manage your IT infrastructure.</p> - HTML Frames Chapter 10 - HTML Forms Part IV<p>For more information please - Extending HTML with Other Technologies contact Ed by e-mail at ed@itguru.com or Chapter 11 by Getting Stylish with CSS - phone at 555.555.5555.</p> </body> Chapter 12 - HTML and Scripting </html> Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Figure 4-3 shows how a browser displays this complete HTML page. Again, notice the following: Part V - From Web of the to Web Siteelement The content Page <title> Chapter 16 is in the window's title bar. - Creating an HTML Toolbox The<meta> elements don't affect the page display at all. Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Only the paragraph text contained in the <p> elements in the <body> element actually displays in the browser window. Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 4-3: Only Content in the <body>element appears in the browser's window. Remember You can use a variety of attributes with the <body> element to define the default text and link colors for your document text. Chapter 7 covers these attributes in detail.
  • HTML 4 for Dummies, 4th Working with Blocks of Text Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 Here’s a super-ultra-technical Sons © 2003 (408 block of text: some chunk of content that wraps from one line John Wiley & definition of a pages) to another in an HTML element. Every bit of content on your Web page has to be part of an initial block Whether your goal is to build a simple, text-oriented Web site element, and every one loaded with sits within the <body> element on your page. In the end, your HTML or block element frames, graphics, and animation, this stepby-step of blocks of text. page is a giant collectionbook will put you on the right track. Remember Inline content is a word or string of words inside a block element. The difference between Table inline content and a block of text is important because certain HTML elements (like those discussed in the of Contents HTMLchapter) are designed to describe blocks of text, whereas others (such as linking and formatting this 4 For Dummies, 4th Edition Introduction are designed to describe a few words or lines of content found inside those blocks. The elements) Part I - Meeting HTML of this Natural Environment remaining chapters in Its book often refer to block elements and inline elements. Just remember that Chapterelements must be nested within a block element orthe Web inline 1 - The Least You Need to Know about HTML and your HTML document won’t be syntactically Chapter 2 correct. - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page HTML Getting Started with HTML Part II -recognizes several different kinds of text blocks that you might want to use in your document, including (but not limitedYour HTML Documents to) Chapter 4 - Structuring Chapter 5 - Linking to Online Resources Paragraphs Chapter 6 - Finding and Using Images Headings Off Your Page with Formatting Chapter 7 - Top Part III - Taking HTML to the Next Level Block quotes Tables - HTML Chapter 8 Chapter 9 Lists - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Tables Chapter 11 - Getting Stylish with CSS Forms Chapter 12 - HTML and Scripting Chapter 13 farMaking Multimedia Magic This list is - from complete, but it gives you a good idea of what kinds of text are labeled as text blocks in Chapter 14 - chapter looks Database into markup you use to describe less-complicated text blocks such as HTML. This Integrating a at the HTML Your HTML Chapter 15 -and lists. Later chapters delve into the more complicated text structures such as tables and paragraphs How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site forms. Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Inserting paragraphs Interface Chapter 18 - Creating a Great User Part VI - The Part probably used more Paragraphs are of Tens often in Web pages than any other kind of text block. To label a Chapter 19 -simply place your content Web <p> element. Presto! Here’s what it looks like: paragraph, Ten Ways to Exterminate in a Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" Appendix A - "http://www.w3.org/TR/REC-html40/loose.dtd"> HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary <html> Index <head> Cheat Sheet - HTML 4 About Blocks</title> <title>All For Dummies, 4th Edition List </head> of Figures List of Tables <body> List of Listings <p>This is a paragraph. It’s a very simple structure that you will use List of Sidebars time and again in your Web pages.</p> <p>This is another paragraph. What could be simpler to create?</p> </body> </html> This HTML page includes two paragraphs, each marked with a separate <p> element. Most Web browsers add a line break and full line of white space after every paragraph on your page, as shown in
  • Figure 4-4. HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Figure 4-4: Web browsers delineate paragraphs with a line break and white space. Chapter 3 Creating for First HTML Page The default-alignmentYoura paragraph is left, and you can use the align attribute with a value of center, Part II - Getting Started with HTML right, or justify to override that Chapter 4 default and control the alignment for any paragraph. - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources <p align="center">This paragraph is centered.</p> Chapter 6 - Finding and Using Images <p align="right">This paragraph is right-justified.</p> Chapter 7 - Top Off Your Page with Formatting <p align="justify">This paragraph is double-justified.</p> Part III - Taking HTML to the Next Level Figure 4-5 shows how a Web browser aligns each paragraph according to the value of the align Chapter 8 - HTML Tables attribute. Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Figure Part of Tens Part VI - The 4-5: Use the Chapter 19 align attribute with a paragraph to specify its horizontal alignment. - Ten Ways to Exterminate Web Bugs Warning If you look at other people’s markup, you may find that many eliminate the closing </p> tag - Ten HTML Do’s and Don’ts when they create paragraphs. Although some browsers will let you get away with this, leaving out the Part VII - Appendixes closing tag doesn’t follow correct syntax and will cause problems with style sheets (at the very least). Appendix A - HTML 4 Tags Additionally, leaving out closing tags can get in the way of a consistent display for your page across all Appendix B - HTML Character Codes browsers. Chapter 20 Appendix C - Glossary Index Breaking down information with headings Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures Headings are commonly used to break a document into sections. This book, for example, uses headings List ofsubheadings to divide every chapter into sections — and you can do the same with your Web page. In and Tables List of Listings addition to creating an organizational structure, headings help break up the visual display of the page and List of readers visual clues about how the different pieces of content are grouped. give Sidebars HTML includes six different elements to help you define six different heading levels in your documents. Every browser has a different way of displaying these different heading levels. Most graphical browsers use a distinctive size and typeface, although text-only browsers may use a different convention because all content is displayed in a single size and font. In graphical browser displays, first-level headings (<h1>) are the largest (usually two or three font sizes larger than the default text size for paragraphs); sixth-level headings (<h6>) are the smallest and may be two or three font sizes smaller than the default text size.
  • The following excerpt of HTML markup shows all six headings at work: HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" John Wiley & Sons © 2003 (408 pages) "http://www.w3.org/TR/REC-html40/loose.dtd"> Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. <html> <head> <title>All About Blocks</title> Table of Contents </head> HTML 4 For Dummies, 4th Edition Introduction <body> Part I -<h1>First-level Natural Environment Meeting HTML in Its heading</h1> Chapter 1 <h2>Second-level heading</h2> HTML and the Web - The Least You Need to Know about <h3>Third-level on the Web Chapter 2 - HTML at Work heading</h3> <h4>Fourth-level heading</h4> Chapter 3 - Creating Your First HTML Page Part II <h5>Fifth-level heading</h5> - Getting Started with HTML <h6>Sixth-level heading</h6> Chapter 4 - Structuring Your HTML Documents </body> Linking to Online Resources Chapter 5 </html> - Finding and Using Images Chapter 6 Chapter 7 - Top Off Your Page with Formatting Figure 4-6 shows this HTML page as rendered in a browser. Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 -4-6: Web browsers display headings in decreasing size from level one to level six. Figure Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Tip You shouldn’t Part VII - Appendixesuse a second-level heading until you’ve used a first-level heading, nor a third-level heading A - HTML 4 used a second, and so on. If you want to change the way headings display in a until you’ve Tags Appendix browser, you can either use <font> elements (as discussed in Chapter 7) or style sheets (as discussed in Appendix B - HTML Character Codes Chapter 11). Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition Exerting More Layout Control Over Blocks of Text by Ed Tittel and Natanya Pitts ISBN:0764519956 Although blocks of text form& Sons © 2003 (408 pages) page, you'll occasionally want to break those blocks up to John Wiley the foundation for your better guide readers through your content. Twosimple, most common methods for breaking up the blocks of Whether your goal is to build a of the text-oriented Web site text on your pageor one loaded with frames, graphics, and animation, this stepare line breaks and horizontal rules. by-step book will put you on the right track. Using block quotes Table of Contents Ablock quote is a long quotation HTML 4 For Dummies, 4th Edition or excerpt from a printed source that you want to set apart on your page. You use the <blockquote> element to identify block quotes, as in this markup: Introduction Part I - Meeting HTML in Its Natural Environment <!DOCTYPE The Least You Need to Know about HTML and the Web Chapter 1 - HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" Chapter 2 - "http://www.w3.org/TR/REC-html40/loose.dtd"> HTML at Work on the Web Chapter 3 - Creating Your First HTML Page <html> Part II - Getting Started with HTML <head> - Structuring Your HTML Documents <title>Famous Quotations</title> Chapter 5 - Linking to Online Resources </head> Chapter 4 Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting <body> <h1>An Inspiring Quote</h1> Chapter 8 - HTML <p>When I Tables a little inspiration to remind me of why I spend my days need Chapter 9 in HTML Frames - the classroom, I just remember what Lee Iococca said:</p> Chapter 10 - HTML Forms <blockquote> Part IV - Extending HTML with Other Technologies In a completely rational society, the best of us would be teachers Chapter 11 - Getting Stylish with CSS and the rest of us would have to settle for something else. Chapter 12 - HTML and Scripting </blockquote> Chapter 13 - Making Multimedia Magic </body> Chapter 14 - Integrating a Database into Your HTML </html> Part III - Taking HTML to the Next Level Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Most Web - Creating an HTML Toolbox Chapter 16 browsers display block-quote content with a slight left indent, as shown in Figure 4-7. Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List ofFigure 4-7: Web browsers typically indent a block quote to separate it from paragraphs. Tables List of Listings List of Sidebars Using preformatted text HTML ignores white space; if your block elements include hard returns, line breaks, or too many large spaces, the browser won't display them. For example, in the following markup we included several hard returns, some line breaks, and a lot of spaces, but as you can see in Figure 4-8, Web browsers ignore every bit of formatting you might try to add.
  • <p>This is a paragraph HTML 4 for Dummies, 4th Edition by Ed white Natanya with a lot of Tittel andspace Pitts ISBN:0764519956 John Wiley & Sons © 2003 (408 pages) Whether your goal (and as a test of course).</p> thrown in for fun is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 Structuring Your HTML Documents Figure -4-8: Web browsers routinely ignore white space. Chapter 5 - Linking to Online Resources Sometimes, however, you mayImages browser to display the white space you include in an HTML page (for Chapter 6 - Finding and Using want the example, - Top Off Your Page with Formatting Chapter 7 when you include code samples or text tables where proper spacing is important). The preformatted text element (<pre>) instructs browsers to Part III - Taking HTML to the Next Level keep all white space intact when it displays your content (as in the sample that follows). Use the <pre> element in place of the <p> element to get the browser to honor all your Chapter 8 - HTML Tables white 9 - as shown in Chapterspace, HTML FramesFigure 4-9. Chapter 10 - HTML Forms <!DOCTYPE HTML PUBLIC "-//W3C//DTD Part IV - Extending HTML with Other Technologies HTML 4.0 Transitional//EN" Chapter 11 - "http://www.w3.org/TR/REC-html40/loose.dtd"> Getting Stylish with CSS Chapter 12 - HTML and Scripting <html> Chapter 13 - Making Multimedia Magic <head> - Integrating a Database into Your HTML <title>White space</title> Chapter 15 - How HTML Relates to Other Markup Languages </head> Chapter 14 Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox <body> - Setting Up Your Online Presence <pre>This is a paragraph Chapter 17 Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens with a lot of white space Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 thrown in Do’s and Don’ts - Ten HTML for fun (and as a test of course). Part VII - Appendixes </pre> Appendix A - HTML 4 Tags </body> Appendix B - HTML Character Codes </html> Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 4-9: Use preformat-ted text to force browsers to recognize white space.
  • Using preformatted text in4th Edition HTML 4 for Dummies, block quotes by Ed Tittel and Natanya Pitts ISBN:0764519956 You can nest <pre> elements inside <blockquote> elements to carefully control the way the lines of John Wiley & Sons © 2003 (408 pages) quoted text appear on the page. This feature is particularly useful for poetry stanzas or other quoted text in which line breaksWhether your goal are important, as shown in this bit of markup and Figure 4-10. and white space is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this step- <!DOCTYPE HTML PUBLIC will put you on the right track. Transitional//EN" by-step book "-//W3C//DTD HTML 4.0 "http://www.w3.org/TR/REC-html40/loose.dtd"> Table of Contents <html> HTML 4 For Dummies, 4th Edition <head> Introduction <title>Shakespeare in HTML</title> Part</head> HTML in Its Natural Environment I - Meeting Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 <body> - HTML at Work on the Web Chapter 3 - Creating Your Sonnets XVIII: Shall I compare thee to a summer's day? </h1> <h1>Shakespeare's First HTML Page Part<blockquote> II - Getting Started with HTML Chapter 4 <pre>Shall I compare thee to a summer's day? - Structuring Your HTML Documents Thou - art more lovely and more temperate. Chapter 5 Linking to Online Resources Rough Finding and Using Images darling buds of May, Chapter 6 - winds do shake the And summer's lease with Formatting Chapter 7 - Top Off Your Page hath all too short a date. Sometime too the the eye Part III - Taking HTML to hotNext Level of heaven shines, And often Tables is his gold complexion dimm'd; Chapter 8 - HTML And every Frames from fair sometime declines, Chapter 9 - HTML fair By chance Forms or nature's changing course untrimm'd; Chapter 10 - HTML But thy eternal summer shall not fade Part IV - Extending HTML with Other Technologies Nor lose possession of that fair thou ow'st; Chapter 11 - Getting Stylish with CSS Nor shall Death brag thou wander'st in his shade, Chapter 12 - HTML and Scripting When in eternal lines to time thou grow'st: Chapter 13 - Making Multimedia Magic So long as men can breathe or eyes can see, Chapter 14 - Integrating a Database into Your HTML So long lives this, and this gives life to thee.</pre> Chapter 15 - How HTML Relates to Other Markup Languages </blockquote> Part</body>Web Page to Web Site V - From Chapter 16 - Creating an HTML Toolbox </html> Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 4-10: Use<pre> with <block quote> to control white space within a quotation.
  • HTML 4 for Dummies, 4th Edition Adding lineby Ed Tittel and Natanya Pitts breaks ISBN:0764519956 John Wiley & Sons © 2003 (408 pages) Whether your goal is appears in block elements such as paragraphs, headings, and block Typically, browsers wrap any text thatto build a simple, text-oriented Web site quotes; if the textor one loaded end of a browser window, you don't have step- control over where a line ends reaches the with frames, graphics, and animation, this much by-step book will put you on the right track. (unless you use preformatted text). If you don't want to worry about accounting for every space in your content, you can always turn one paragraph into two - but you may not want the extra line of white space that most browsers include Table of Contents after each paragraph. What to do? HTML 4 For Dummies, 4th Edition The best way to specify when you've reached the end of a line in a paragraph, but aren't ready to create a new paragraph, is to use a line break, denoted by the <br> element. The <br> is the HTML equivalent of the Part I - Meeting HTML in Its Natural Environment good, old manual hard return that you use in paragraphs and other blocks of text when you're working in a Chapter 1 - The word-processing Least You Need to Know about HTML and the Web program. Introduction Chapter 2 - HTML at Work on the Web Any time browser sees a <br>, it breaks Chapter 3 a - Creating Your First HTML Page the text there and moves to the next line. The following markup Part II - a different way to break the shows Getting Started with HTML lines of text in a poem. The entire poem is described as a single paragraph, and the Chapter 4<br> element marksHTML Documents line: - Structuring Your the end of each Chapter 5 - Linking to Online Resources Chapter 6 - HTML PUBLIC Images <!DOCTYPE Finding and Using "-//W3C//DTD HTML 4.0 Transitional//EN" Chapter 7 - "http://www.w3.org/TR/REC-html40/loose.dtd"> Top Off Your Page with Formatting Part III - Taking HTML to the Next Level <html> Chapter 8 - HTML Tables <head> - HTML Frames Chapter 9 <title> Shakespeare in HTML</title> Chapter 10 - HTML Forms Part</head> IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS <body> Chapter 12 - HTML and Scripting <h1>Shakespeare's Sonnets XVIII: Shall I compare thee to a summer's day? </h1> Chapter 13 - Making Multimedia Magic <p> Chapter 14 - Integrating a Database into Your HTML Shall I compare thee to a summer's day? <br> Chapter 15 - How HTML Relates to Other Markup Languages Thou art more lovely and more temperate. <br> Part V - From Web Page to Web Site Rough winds do shake the darling buds of May, <br> Chapter 16 - Creating an HTML Toolbox And summer's lease hath all too short a date. <br> Chapter 17 - Setting Up Your Online Presence Sometime too hot the eye of heaven shines, <br> Chapter 18 - Creating a Great User Interface And often is his gold complexion dimm'd; <br> Part VI - The Part of Tens And every fair from fair sometime declines, <br> Chapter 19 - chance or Exterminate Web Bugs By Ten Ways to nature's changing course untrimm'd; <br> Chapter 20 - Ten HTML Do’s and Don’ts shall not fade <br> But thy eternal summer Part VII - Nor lose possession of that fair thou ow'st; <br> Appendixes Appendix A - HTML 4 Tags Nor shall Death brag thou wander'st in his shade, <br> Appendix B - HTML Character Codes When in eternal lines to time thou grow'st: <br> Appendix C - long as men can breathe or eyes can see, <br> So Glossary So long lives this, and this gives life to thee. <br> Index </p> Cheat Sheet - HTML 4 For Dummies, 4th Edition List </body> of Figures </html> List of Tables List of Listings List of Sidebars Figure 4-11 shows how a browser handles each line break. In this example, the poem isn't left-indented because the <p> element replaces the <block quote> element.
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Figure 4-11: Using the <br> element to specify where lines in block elements should break. Part III - Taking HTML to the Next Level Chapter 8 - Using the <br> element isn't necessarily better than using preformatted text in block quotes, but Remember HTML Tables Chapter 9 - HTML Frames it does offer you a choice in the visual results. Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Adding -horizontalwith CSS rules Getting Stylish Chapter 11 Chapter 12 - HTML and Scripting The horizontal rule element (<hr>) helps you include solid straight lines (rules) on your page - and put them Chapter 13 you'd rather not use a graphic. If you want to break your page into logical sections (or just separate anywhere - Making Multimedia Magic Chapter 14 - Integrating a from the rest of theHTML a horizontal rule is a good option. Users don't have to wait your headers and footers Database into Your page), Chapter 15 - How HTML Relates to Other browser Languages rule based on the <hr> element, not an image for a graphic to download because the Markup creates the Part V - From Web Page to Web Site reference. Chapter 16 - Creating an HTML Toolbox When 17 - Setting Up Your Online Presence Chapter you include an <hr> element in your page, as in the following HTML, the browser replaces it with a line, as shown - Creating a Great User Interface Chapter 18 in Figure 4-12. Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables Figure 4-12: Use the <hr> element to add horizontal lines to your page. List of Listings List of Sidebars Tip A horizontal rule must always sit on a line by itself; you can't add an <hr> element in the middle of a paragraph (or other block element) and expect the rule to just appear in the middle of the block. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head>
  • <title>Horizontal Rules</title> HTML 4 for Dummies, 4th Edition </head> by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 <body> Whether your goal is to build a simple, text-oriented Web site <p>This is a paragraph followed by a horizontal rule.</p> or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. <hr> </p>This Table of Contents is a paragraph preceded by a horizontal rule.</p> </body> HTML 4 For Dummies, 4th Edition </html> Introduction Part I - Meeting HTML in Its Natural Environment Four different attributes help you control the display of each horizontal rule: Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at line on the pixels width: SpecifiesWork width inWeb or by percentage. For example, your rule can be 50 pixels wide or Chapter 3 up 75 percent of the page. Page take - Creating Your First HTML Part II - Getting Started with HTML size: Specifies the Your HTML Documents Chapter 4 - Structuring height of the line in pixels. The default is 1 pixel. Chapter 5 - Linking to Online Resources align: Specifies the horizontal alignment of the rule as left (the default), center, or right. If you - Finding and Using Images don't define a width for your rule, it takes up the entire width of the page, preventing any alignment you set Chapter 7 - Top Off from showing upYour Page with Formatting in the display. Chapter 6 Part III - Taking HTML to the Next Level Chapter 8 noshade: Specifies a rule with no shading. By default, most browsers display hard rules with a shade. If - HTML Tables you Chapter 9 include the noshade attribute in your <hr> element, the line will appear as a solid line. - HTML Frames Chapter 10 - HTML Forms This bit of HTML HTML with Other Technologies Part IV - Extendingcreates a horizontal rule that takes up 45 percent of the page, is 4 pixels high, aligned to the center, and has shading turned off: Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting <p>This is a paragraph Chapter 13 - Making Multimedia Magic followed by a horizontal rule.</p> Chapter 14 - Integrating a Database into Your HTML <hr width="45%" size="4" Markup Languages noshade> align="center" - How HTML Relates to Other Chapter 15 Part V - From Web Page to Web Site <p>This is a paragraph preceded by a horizontal rule.</p> Chapter 16 - Creating an HTML Toolbox Chapter 17 - shows how YouradditionPresence attributes can greatly alter the way a browser displays the rule. Figure 4-13 Setting Up the Online of these Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List ofFigure 4-13: Use the <hr> attributes to better control how a browser displays the rule. Tables List of Listings For a look at how you can use horizontal rules in the real world to highlight important content, take a gander at Figure 4-14. The LANWrights, Inc. site uses colored hard rules to surround a key statement on the site's home page that tells visitors exactly what the company does. The rules make the statement stand out from the rest of the page. List of Sidebars
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 Figure -4-14: The LANWrights, Documents uses hard rules to draw your attention to important Structuring Your HTML Inc. Web site information on the page. Resources Chapter 5 - Linking to Online Chapter 6 - Finding and Using Images Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Tip Cascading Style Sheets give you much more control over the placement of horizontal rules; you can Chapter 7 - Top Off Your Page with Formatting even fancy them up withthe Next Level color and shading options. Part III - Taking HTML to Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • OrganizingHTML 4 for Dummies, 4thLists Information into Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 Lists are powerful tools for arranging2003 (408 elements together and giving visitors to your site an easy way John Wiley & Sons © similar pages) to hone in on groups of information. Youbuild a simple, text-oriented Web site from a set of instructions to a Whether your goal is to can put just about anything in a list: collection of hyperlinks or navigational tools. or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. HTML provides for three different kinds of lists: Table of Contents Numbered lists HTML 4 For Dummies, 4th Edition Bulleted lists Introduction Part I - Meeting HTML in Its Natural Environment Definition lists Chapter 1 - The Least You Need to Know about HTML and the Web Chapter the other markup elements you’ve seen in this chapter (which use a single element to describe a Unlike 2 - HTML at Work on the Web chunk 3 - Creating Your a little more complex. They use a combination of elements — at least two Chapter of content), lists are First HTML Page components: Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources A markup element that says “Hey browser. This is a list.” Chapter 6 - Finding and Using “Hey browser. This is an item in the list.” Markup elements that say Images Chapter 7 - Top Off Your Page with Formatting Lists are easy to create the Next get the Part III - Taking HTML to once youLevel hang of using markup elements together. Mastering lists can also make the more complicated combinations of elements easier to handle when you create tables and Chapter 8 - HTML Tables forms. Chapter 9 - HTML Frames Chapter 10 - HTML Forms Using numbered lists Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Anumbered HTML and Scripting Chapter 12 - list consists of one or more items, each prefaced by a number. Usually, lists are numbered when 13 - Making Multimedia Magic Chapterthe order of the items is important. Chapter 14 - Integrating a Database into Your HTML You use the ordered list element (<ol>) to specify that you’re creating a numbered list, and a list item - How HTML Relates to Other Markup Languages element (<li>) to mark each item in the list. This bit of markup defines a three-item numbered list: Chapter 15 Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" - Setting Up Your Online Presence "http://www.w3.org/TR/REC-html40/loose.dtd"> Chapter 17 Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens <html> - Ten Ways to Exterminate Web Bugs <head> Chapter 20 - Ten HTML Do’s and Don’ts <title>Numbered Lists</title> Part VII - Appendixes </head> Chapter 19 Appendix A - HTML 4 Tags Appendix B - HTML Character Codes <body> Appendix C - Glossary <h1>Things to do today</h1> Index <ol> Cheat Sheet - HTML 4 cat</li> <li>Feed For Dummies, 4th Edition List of Figures <li>Wash car</li> <li>Grocery shopping</li> List of Tables </ol> List of Listings </body> List of Sidebars </html> Figure 4-15 shows how a browser renders this markup. Notice that you don’t actually have to specify a number for each item in the list, the HTML infers it from the markup.
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Figure Introduction 4-15: Use the <ol> and <li> attributes to create a numbered list. Part I - Meeting HTML in Its Natural Environment If you 1 Chapterswap-the first two items in the list, their numbers change when the page displays again, as in Figure The Least You Need to Know about HTML and the Web 4-16. Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II <ol> - Getting Started with HTML Chapter 4 <li>Wash car</li> - Structuring Your HTML Documents Chapter 5 <li>Feed to Online Resources - Linking cat</li> Chapter 6 <li>Grocery Using Images - Finding and shopping</li> </ol> Top Off Your Page with Formatting - Chapter 7 Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Figure Creating an HTML Toolbox Chapter 16 -4-16: Web browsers set the numbers for your list according to the order items appear in the list. Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface You can use two different attributes with the <ol> element to control the display of any given list: Part VI - The Part of Tens Chapter 19 - Specifies what number you want the list to start with. The default starting number is 1, but if start: Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML with a paragraph or other block element, and want to pick it up again later, you can you interrupt a list Do’s and Don’ts Part VII - Appendixes specify any number as the start number for the new list. Appendix A - HTML 4 Tags type: - HTML Character Codes Appendix B Specifies the numbering style from the list. You can choose from five predefined numbering styles: Appendix C - Glossary Index 1: Decimal numbers Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures Lowercase letters a: List of Tables A:Uppercase letters List of Listings List of Sidebars i: Lowercase Roman numerals I: Uppercase Roman numerals This bit of markup uses ordered list elements and attributes to create a list that uses uppercase Roman numerals and begins numbering at 5 (V in Roman numerals): <ol start="5" type="I">
  • <li>Wash car</li> HTML 4 for Dummies, 4th Edition <li>Feed cat</li> by Ed Tittel and Natanya Pitts <li>Grocery shopping</li> John Wiley & Sons © 2003 (408 pages) </ol> ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one the attributes affect the list display in a browser. Figure 4-17 shows how loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 Figure -4-17: Use the start and type attributes to guide the display of a numbered list in a browser. Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Using bulleted lists Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Abulleted - consists of one or more items each prefaced by a bullet. This type of list is commonly used if Chapter 9 list HTML Frames the order - HTML Forms Chapter 10 of the presentation of the items isn’t necessary for understanding the information presented. Part IV - Extending HTML with Other Technologies You use the unordered list element (<ul>) to specify that you’re creating a bulleted list, and a list item - Getting Stylish with CSS element (<li>) to mark each item in the list. The following markup changes a three-item numbered list to Chapter 12 - HTML and Scripting a three-item bulleted list: Chapter 11 Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" - How HTML Relates to Other Markup Languages "http://www.w3.org/TR/REC-html40/loose.dtd"> Chapter 15 Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox <html> <head> - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface <title>Bulleted Lists</title> Part</head> VI - The Part of Tens Chapter 17 Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts <body> Part VII - Appendixes <h1>Things to do today</h1> Appendix A - HTML 4 Tags <ul> Appendix B - HTML Character Codes <li>Feed cat</li> Appendix C - Glossary <li>Wash car</li> Index <li>Grocery shopping</li> </ul> Cheat Sheet - HTML 4 For Dummies, 4th Edition List </body> of Figures </html> List of Tables List of Listings Figure 4-18 shows how a browser renders this list with bullets instead of numbers. List of Sidebars
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction 4-18: An unordered list uses bullets instead of numbers to mark items. Figure Part I - Meeting HTML in Its Natural Environment You can - the Least attribute to Know about HTML and specify Chapter 1 use The type You Needwith the <ul> element tothe Web what kind of bullet you want the list to use: Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page disc: Solid circle bullets (the default) Part II - Getting Started with HTML Chapter 4 square:Structuring Your HTML Documents - Solid square bullets Chapter 5 - Linking to Online Resources circle:Finding and Using Images Hollow circle bullets - Chapter 6 Chapter 7 - of the type attribute to the bulleted-list markup just given changes the bullets from discs to The addition Top Off Your Page with Formatting Part III - Taking HTML to the Next Level squares, as shown in Figure 4-19. Here’s what the relevant markup looks like: Chapter 8 - HTML Tables Chapter 9 - HTML Frames <ul type="square"> - HTML Forms <li>Feed cat</li> Part IV - Extending HTML with Other Technologies <li>Wash car</li> Chapter 11 - Getting Stylish with CSS <li>Grocery shopping</li> Chapter 12 - HTML and Scripting </ul> Chapter 10 Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Figure 4-19: Use the type attribute to change the bullet style for an unordered list. Appendix B - HTML Character Codes Appendix C - Glossary Index Adding definition lists Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures Definition lists group terms and definitions into a single list and require three different elements to List of Tables list: complete the List of Listings List of<dl>: Holds the list definitions. Sidebars <dt>: Defines a term in the list. <dd>: Defines a definition for a term. You can have as many terms (defined by <dt>) in a list as you’d like, and each term can have one or more definitions (defined by <dd>). The following definition list includes three terms, one of which has two definitions:
  • HTML 4 for "-//W3C//DTD HTML 4.0 Transitional//EN" <!DOCTYPE HTML PUBLICDummies, 4th Edition ISBN:0764519956 by Ed Tittel and Natanya Pitts "http://www.w3.org/TR/REC-html40/loose.dtd"> John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site <html> or one loaded with frames, graphics, and animation, this step<head> by-step book will put you on the right track. <title>Definition Lists</title> </head> Table of Contents <body> HTML 4 For Dummies, 4th Edition <h1>Markup Language Definitions</h1> Introduction <dl> <dt>SGML</dt> Need to Know about HTML and the Web Chapter 1 - The Least You <dd>The Standard Generalized Markup Language</dd> Chapter 2 - HTML at Work on the Web <dt>HTML</dt> Chapter 3 - Creating Your First HTML Page <dd>The Hypertext Markup Language</dd> Part II - Getting Started with HTML <dd>The markup language you use to create Web pages.</dd> Chapter 4 - Structuring Your HTML Documents <dt>XML</dt> Chapter 5 - Linking Online Resources <dd>ThetoExtensible Markup Language</dd> Chapter 6 - Finding and Using Images </dl> Chapter 7 </body> Top Off Your Page with Formatting Part III - Taking HTML to the Next Level </html> Part I - Meeting HTML in Its Natural Environment Chapter 8 - HTML Tables Chapter 9 - HTML Frames Figure 4-20 HTML how a Chapter 10 - shows Forms browser displays this HTML. Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Figure 4-20: Definition lists group terms and their related definitions into a single list. Appendix A - HTML 4 Tags Tip If you think the items in a list are spaced too closely together, you can put two <br> elements before each </li> or </dd> element to add more white space. You can also use CSS styles to more carefully Appendix C - Glossary control all aspects of your list display, as discussed in Chapter 11. Appendix B - HTML Character Codes Index Cheat Sheet - HTML 4 For Dummies, 4th Edition Creating nested lists List of Figures List of Tables One handy way that HTML lists behave is to break up the display of your page and add some horizontal depth to it. You can take such lists one step further and group a large number of related items when you List of Sidebars nest lists, creating subcategories. Some common uses for nested lists include List of Listings Site maps and other navigation tools Table of contents for online books and papers Outlines You can combine any of the three kinds of lists to create nested lists. The following example starts with a
  • numbered list that defines a list of things to do for the day, and uses three bulleted lists to further break HTML 4 for Dummies, 4th Edition down those items into specific tasks: by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" Whether your goal is to build a simple, text-oriented Web site "http://www.w3.org/TR/REC-html40/loose.dtd"> or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. <html> <head> Table of Contents <title>Nested Lists</title> HTML 4 For Dummies, 4th Edition </head> Introduction Part<body> I - Meeting HTML in Its Natural Environment Chapter 1 <h1>Things to do today</h1> - The Least You Need to Know about HTML and the Web <ol> - HTML at Work on the Web Chapter 2 Chapter 3 <li>Feed cat</li>HTML Page - Creating Your First <ul> Part II - Getting Started with HTML Chapter 4 <li>Rinse bowl</li> - Structuring Your HTML Documents Chapter 5 <li>Open cat food</li> - Linking to Online Resources Chapter 6 <li>Mix dry Images - Finding and Using and wet food in bowl</li> <li>Deliver on a silver platter to fluffy</li> - Top Off Your Page with Formatting </ul> to the Next Level Part III - Taking HTML <li>Wash car</li> Chapter 8 - HTML Tables <ul> Chapter 9 - HTML Frames <li>Vacuum interior</li> Chapter 10 - HTML Forms <li>Wash exterior</li> Part IV - Extending HTML with Other Technologies <li>Wax exterior</li> Chapter 11 - Getting Stylish with CSS </ul> Chapter 12 - HTML and Scripting <li>Grocery shopping</li> Chapter 13 <ul> - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML <li>Plan meals</li> Chapter 15 - How HTML Relates tofridge</li> <li>Clean out Other Markup Languages Part V - From Web Page to Web Site <li>Make list</li> Chapter 16 - Creating anto store</li> <li>Go HTML Toolbox Chapter 17 </ul> Up Your Online Presence - Setting Chapter </ol> 18 - Creating a Great User Interface Part</body> VI - The Part of Tens </html> Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 7 Chapter 20 - Ten HTML Do’s and Don’ts Notice the pattern that the nested list uses: Each list item in the top-level ordered list is followed by a complete second-level list. The second-level lists don’t sit inside the list items; instead, they sit inside the Appendix A - HTML 4 Tags top-level list. Figure 4-21 shows how a browser reflects this nesting in its display of the nested list. Part VII - Appendixes Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Figure -4-21: NestedUsingcombine two or more lists for a multi-level organization of information. Chapter 6 Finding and lists Images Chapter 7 - Top Off Your Page Warning As you build nested with Formatting open and close tags carefully. Close first what you lists, watch your opened last is an especially important axiom here. Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • 4 for Dummies, Chapter HTML Tittel and Natanya4th Edition Resources 5: Linking toPitts Online ISBN:0764519956 by Ed Overview John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepIn This Chapter by-step book will put you on the right track. Creating links Table of Contents HTML Looking behind the scenes of URLs 4 For Dummies, 4th Edition Introduction Linking two Web pages Part I - Meeting HTML in Its Natural Environment Chapter 1 The Least You Need to Know Setting-up links within a Web page about HTML and the Web Chapter 2 - HTML at Work on the Web Creating Creating thingsFirst HTML Page pages Chapter 3 - links to Your other than Web Part II - Getting Started with HTML Hyperlinksconnect resources on the Web. When you include a link in your page, you give users the - Structuring Your HTML Documents capability to jump from your page to somewhere else on the Web, somewhere else on your site, or even Chapter 5 - Linking to Online Resources somewhere else on the same page. Without links, your page stands alone, disconnected from the rest of Chapter 6 - Finding the Web. With links, and Using Images an almost boundless collection of information. it becomes part of Chapter 4 Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • Creating a HTML 4 for Dummies, 4th Edition Basic Link by Ed Tittel and Natanya Pitts ISBN:0764519956 To create a hyperlink, Wileyneed three things:pages) John you & Sons © 2003 (408 Whether your goal is to build a simple, text-oriented Web site The Web address (called a Uniform Resource Locator, or URL) of stepor one loaded with frames, graphics, and animation, this the place you want to link to. by-step book will put you on the right track. Some text in your Web page to hang the link on. Usually, the text you attach a link to describes the resource being linked. Table of Contents Ananchor element (<a>) to bring it all together. The element you use to create links is called anchor element (as opposed to the link element) because you use it to anchor a URL to some text on your Introduction page. When a user views your page in a browser, he or she can click the text to activate the link and Part I - Meeting HTML in Its Natural Environment jump to the page whose URL you specified in the link. HTML 4 For Dummies, 4th Edition Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 have a Web Work that describes HTML standards. You might want to refer Web surfers to the Say you - HTML at page on the Web Chapter Wide Web Consortium (W3C) Page World 3 - Creating Your First HTML - seeing as it's the organization that governs all things related to the Part II -standard - for detailed information. HTML Getting Started with HTML A basic hyperlink to the W3C's Web site, www.w3.org, looks Chapter 4 like this: - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 <a Finding and Using Images <p>The - href="http://www.w3.org">World Wide Web Chapter 7 - Top Off is Page with Formatting Consortium</a> Yourthe standards body that oversees Part III - Taking HTML to the Next Level the development of the HTML Chapter 8 specification.</p> - HTML Tables You specify-the linkFrames Chapter 9 HTML URL (http://www.w3.org) in the anchor element's href attribute. The text (World Wide 10 - HTML Forms ChapterWeb Consortium) you include between the anchor element's open and close tags (<a> and </a>) is the text you hang HTML with Other Technologies Part IV - Extending your link on. Figure 5-1 shows how a browser displays this bit of markup. Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 -5-1: A paragraph with a link to Bugs Figure Ten Ways to Exterminate Web the W3C. Chapter 20 - Ten HTML Do’s and Don’ts Tip You can also anchor Part VII - Appendixes URLs to images so users can click the image to activate a link. (For more about creating images that link, Appendix A - HTML 4 Tags see Chapter 6.) Appendix B - HTML Character Codes For a detailed discussion of the ins and outs of URLs, see Chapter 1. Appendix C - Glossary Index Anchor elements aren't block elements Cheat Sheet - HTML 4 For Dummies, 4th Edition List ofNotice, in the W3C link example, that the anchor element sits inside a paragraph (<p>) element. Figures List ofAnchor elements are inline elements - they don't define blocks of text, but instead apply to a few Tables List ofwords or characters within a block of text. When you create a link, you should always do so within a Listings List ofblock element (such as a paragraph, list item, heading, or even a table cell). Turn to Chapter 4 for Sidebars more information on block elements. Although many Web browsers may display your anchors just fine (even if you don't nest them in block elements), some browsers don't handle this breach of HTML syntax very well. A good example is textonly browsers like those on Palm devices and mobile phones, as well as those used by the visually impaired with text-to-speech readers. These browsers have to display your pages with text and nothing more, and they rely heavily on block elements to help them properly divide the sections of your page. Without a block element, these browsers may not know what to do with your links and put the links in
  • the wrong place in their final display. HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML for Difference Between Absolute and Relative Links Understanding 4the Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 As mentioned in a later section ('Beyond (408 pages) John Wiley & Sons © 2003 Basic Links'), you can link to a variety of online resources. You can create links to other HTMLgoal is to build a simple,Web site or on another Web site), create links to Whether your pages (either on your text-oriented Web site different locations on the samewith frames, graphics, and animation, this even HTML pages at all (such as or one loaded HTML page, or to resources that aren't stepby-step book will put you e-mail addresses, pictures, and text files).on the right track. The kind of link you create is determined by where you link to: Table of Contents HTML Anabsolute link4th Edition 4 For Dummies, uses a complete URL to connect browsers to a Web page or online resource. Introduction Links that use a complete URL to point to a resource are labeled absolute because they provide a complete, standalone pointer to another Web resource. When you link to a page on someone else's Chapter 1 - The Least You Need to Know about HTML and the Web Web site, the Web browser needs every bit of information in the URL to help it find the page. The Chapter 2 - HTML at Work on the Web browser starts with the domain in the URL and works its way through the path to a specific file. When Chapter 3 - Creating Your First HTML Page you link to files on someone else's site, you must always use absolute URLs in the href attribute of Part II - Getting Started with HTML the anchor element. Part I - Meeting HTML in Its Natural Environment Chapter 4 - Structuring Your HTML Documents Chapterrelative link uses a kind of shorthand to specify the URL for the resource you're pointing to. You A 5 - Linking to Online Resources Chapter 6 create relative links between resources on the same domain, and because the two resources are on - Finding and Using Images the Chapter 7same domain, you canwith Formatting information from the URL. A relative URL uses the - Top Off Your Page omit the domain location of the resource you're linking Part III - Taking HTML to the Next Level Chapter 8 from to identify the location of the resource you're linking to. - HTML Tables Imagine that the following URLs identify documents on your Web site. The only difference between them - HTML Frames is the specific file they point to: Chapter 9 Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies http://www.mysite.com/webdocs/home.html Chapter 11 - Getting Stylish with CSS http://www.mysite.com/webdocs/about.html - HTML and Scripting Chapter 12 Chapter 13 - Making Multimedia Magic Because both of these pages reside on the same Web site, you can take advantage of relative URLs when Chapter 14 a Integrating a Databaseyou want to make a link from home.html to about.html, you can you create - link between them. If into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages use this simplified, relative URL in the anchor element: Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface <p>Learn more <a href="about.html">about</a> our company.</p> Part VI - The Part of Tens Remember When a browser encounters this link and finds that the link doesn't include a domain name, Chapter 19 - assumes the Exterminate Web Bugs the domain and path of the linking page the browser Ten Ways to link is relative and uses (http://www.mysite.com/webdocs/) as a guide for finding the linked page (about.html). Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Tip As your site grows more complex and you organize your files into a variety of folders, you can still use Appendix A - HTML 4 Tags relative links. However, you have to provide some additional information in the URL to help the browser find files that aren't stored in the same directory as the file you're linking from. Appendix B - HTML Character Codes Appendix C - Glossary Index../ (two periods and a slash) before the filename to indicate that the browser should move up one Use Cheat Sheet - HTML 4 structure. The 4th Edition this anchor element instructs the browser to move up one level in the directory For Dummies, notation in List of Figuresthe folder the linking document is stored in, find a folder called docs, and then find a file called folder from List of Tables The markup for this process looks like this: home.html. List of Listings List ofhref="../docs/home.html>Documentation home</a> <a Sidebars Remember When you create a relative link, the location of the file you're linking to is always relative to the file you're linking from. As you create your relative URL, trace the path a browser must take if it starts on the page you're linking from before it can get to the page you're linking to. That path defines the URL you will use in your relative link.
  • HTML 4 for URL Mistakes Avoiding Common Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 Every site, page, John Wiley other resource onpages)Web has its own unique URL, and even one incorrect image, or & Sons © 2003 (408 the letter in your URL can lead to a broken link. Broken links lead to an Web site Whether your goal is to build a simple, text-oriented error page. or one loaded with frames, graphics, and animation, this step- URLs are such finicky creatures that a simple typo can lead to links that simply don't work. If you have a by-step book will put you on the right track. URL that doesn't work, try these tactics to solve the problem: Table of Contents Check the case. Some Web servers, Linux and Unix most notably, are case-sensitive. Thus the HTML servers treat the4th Edition Bios.html and bios.html as two different files on the Web server. 4 For Dummies, filenames That also means that browsers must use uppercase and lowercase letters when necessary. Be sure Introduction Part Ithe case you're using in the link matches the actual - Meeting HTML in Its Natural Environment Chapter 1 case of the URL that works in a Web browser. - The Least You Need to Know about HTML and the Web Check the extension.Bios.htm and Bios.html are two different files. If your link's URL uses one - HTML at Work on the Web extension but the actual filename uses another, your link won't work. Chapter 2 Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 The importance of http:// in HTML links - Structuring Your HTML Documents Chapter 5 You've - Linking to Onlinethat browsers are designed to make it as easy as possible for you to surf the probably noticed Resources Web. Finding www.sun.com in Chapter 6 If-you type and Using Images your browser's link window, the browser obligingly brings up http://www.sun.com. Although this technique works when you type URLs into your browser Chapter 7 - Top Off Your Page with Formatting window, it HTML to the Next Level Part III - Takingwon't work when you're writing Chapter 8 markup for your Web page. - HTML Tables The URLs you use in your HTML need to be fully formed. Browsers won't interpret URLs that don't - HTML Frames include the page protocol. Forget the http://, and your link simply won't work. Chapter 9 Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 -the filename. If you change one part of a URL from the name of the domain to the path or Check HTML and Scripting filename (say you type bio.html Chapter 13 - Making Multimedia Magic instead of bios.html), you've got a completely different URL on your - Integrating a Database into Your HTML Chapter 14hands or you've got a broken link. Enter the URL with bios.html at the end, and you're golden. Enter - How HTML URL, and a File Not Found error page appears in your browser: Chapter 15 the following Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox http://www.sun.com/developers/evangcentral/bio.html Chapter 17 - Setting Up Your Online Presence Tip - Creating a Great User Interface Chapter 18 Cut and paste. The best and most foolproof way to create a URL that works is to load a page in your browser, copy the URL from the browser's address or link field, and then paste the URL into your Part VI - The Part of Tens HTML markup. Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition Beyond Basic Links by Ed Tittel and Natanya Pitts ISBN:0764519956 In the section 'Creating a Basic Link' 2003 (408 pages) John Wiley & Sons © at the beginning of this chapter, we gave you a perfect example of how to create a link in your Web page tobuild a simple, (an interdocumentsite Whether your goal is to a Web page text-oriented Web hyperlink) on another site. You pick a page to link to, find some text in yourgraphics, and animation,link on, create an anchor element, and or one loaded with frames, document to hang the this stepby-step book will put you on the right track. you're done. However, you can go beyond the basics when you link to other Web pages: You can create links that Table ofbrowsers to open linked documents in new windows, link to specific locations within a Web page, direct Contents HTML link to Dummies, 4ththan HTML pages, such as Portable Document Format (PDF) files, compressed and 4 For things other Edition Introduction files, word-processing documents, and more. Part I - Meeting HTML in Its Natural Environment Chapter 1 CreatingThe link You Need toWeb about HTML and the Web a Least that the Know in a new window opens Chapter 2 - HTML at Work on Chapter 3 works because you can linkPage The Web - Creating Your First HTML pages on your Web site to pages on other people's Web sites with Part II - Getting Startedan anchor element. the simple addition of with HTML However, when you link to someone else's site, you're sending Chapteraway-from your own site, andDocumentsno guarantee that they will find their way back. Structuring Your HTML you have users 4 Chapter 5 - Linking to Online Resources An increasingly commonUsing Images linking users to other sites without sending them away from your site Chapter 6 - Finding and approach to is to use - Top Off Your Page with Formatting Chapter 7 HTML that instructs the browser to open the linked page in a new window. A simple addition of thetarget attribute to your anchor element sends the link to a new browser window instead of opening it in the currentHTML Tables window: Chapter 8 Part III - Taking HTML to the Next Level Chapter 9 - HTML Frames <p>The - href="http://www.w3.org" target="_blank">World Wide Chapter 10 <a HTML Forms Web - Extending HTML with the standards Part IVConsortium</a> isOther Technologies body that oversees the developmentStylish with HTML specification.</p> of the CSS Chapter 11 - Getting Chapter 12 - HTML When you give the and Scripting target attribute a value of _blank, that tells the browser to keep the linking page Making Multimedia open in the -current window andMagic the linked page in a new one, as shown in Figure 5-2. open Chapter 13 Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings Figure 5-2: Use the target attribute to open a new window in a Web browser to display a linked file. List of Sidebars Warning This technique gives you the best of both worlds: You can link to an off-site resource without really sending your users off site. However, many users are easily irritated when new window after new window pops up on their screens. Use this technique with care and sparingly, or your users will leave your site without benefiting from any links you might provide. Tip You can use JavaScript to control the size and appearance of pop-up windows, as well as give them buttons that help users close them quickly. Learn more about this in Chapter 12.
  • HTML 4 for locations in the Linking to specific Dummies, 4th Edition same Web page by Ed Tittel and Natanya Pitts ISBN:0764519956 Just as you can use links to & Sons © 2003 (408navigate your Web site or the Web in general, you can help John Wiley help your users pages) users navigate on a singleyour goal is to build a simple, text-orientedtop' links or a table of contents section Whether Web page. If you've ever seen 'Back to Web site or page, you've seen intradocument hyperlinks at work. Creating an intradocument for a very long Webone loaded with frames, graphics, and animation, this stepby-step book will hyperlink is a two-step process: put you on the right track. 1. Identify and mark the places in your document that you want to link to. Table of Contents For example, mark the top of your page or its major headings. HTML 4 For Dummies, 4th Edition Introduction to those spots. 2. Link Part I - Meeting HTML in Its Natural Environment Chapter you createLeast You Need to Know about HTML andyou use URLs to define the location of the page When 1 - The a link from one Web page to another, the Web you want Chapter 2 to-link to. at Work onURLs apply to a whole page, not segments of a page. If you want to direct HTML However, the Web your links - Creating Your First the page, Chapter 3 to a specific place on HTML Page you first have to mark the spot you want to link to. You use the anchor element with the name attribute Part II - Getting Started with HTML Chapter 4 to make your mark: - Structuring Your HTML Documents Chapter 5 <a name="top"></a> - Linking to Online Resources Chapter 6 - Finding and Using Images Notice that - Top Off Your Pagebetween the opening and closing tags. That's because an anchor tag that there isn't any text with Formatting Chapter 7 marks - Taking HTML to thetext toLevel the spot on. Instead, you simply create an empty anchor tag and a spot doesn't need Next hang Part III you've created a spot in your document that you can link to. Chapter 8 - HTML Tables Chapter 9 thisHTML Frames a slightly different URL than you've seen before: To link to - spot, you use Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies <a href="#top">Back to top</a> Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting you're pointing to a spot on the page, rather than another page. Listing 5The pound sign (#) indicates that Chapter 13 - Makingtwo anchor Magic 1 shows how these Multimedia elements work together as part of a more complete page. Chapter 14 - Integrating a Database into Your HTML Listing 5-1: Intradocument to Other Markup Languages Chapter 15 - How HTML RelatesHyperlinks Part V - From Web Page to Web Site Chapter 16 <html> - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence <head> Chapter 18 - Creating a Great User Interface <title>Intradocumment hyperlinks at work</title> Part</head> VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs <body> Chapter 20 - Ten HTML Do’s and Don’ts <h1><a name="top"></a>Web-Based Part VII - Appendixes Training</h1> Appendix A - HTML 4 Tags <p>Given Character Codes Appendix B - HTMLthe importance of the Web to businesses and Appendix C other organizations, individuals who seek to improve - Glossary job skills, or fulfill essential job functions, are turning to HTML and XML to deliver training. We Cheat Sheet - HTML 4 For Dummies, 4th Edition believe this provides an outstanding opportunity for List of Figures participation in an active and lucrative adult and List of Tables continuing education market.</p> Index List of Listings List of Sidebars href="#top">Back to top</a></p> <p><a </body> </html> Remember Listing 5-1 is shorter than most documents that integrate intradocument links. It's designed as an example of the markup you should use and how to use it.
  • Figure 5-3 showsHTMLthis HTML appears in Edition browser. If the user clicks the Back to top link, the how 4 for Dummies, 4th a Web browser jumps backEd Tittel and spot - marked by <a name="top"></a>. ISBN:0764519956 by to the top Natanya Pitts John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 Linking anchor Resources Figure -5-3: Useto Onlineelements to mark spots on a page and link to them. Chapter 6 - Finding and Using Images Remember Top Off Your Page with that marks the spot doesn't affect the appearance of the first-level Chapter 7 - The anchor element Formatting heading. You can mark spots wherever Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 you need to without worrying about the final display of your page. - HTML Forms Tip You generally use intradocument navigation for long pages that users need help navigating. Linking to specific locations in another Web page Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages You can combine intradocument and interdocument links to point users to a specific spot on a different Chapter 12 - HTML and Scripting Web page. For instance, if you want to point to a spot named descriptions on a page named Chapter 13 - Making Multimedia Magic home.html on your site, the link would look like this: <p>Review the <a href="home.html#descriptions>document descriptions</a> to find the documentation specific to Chapter 16 - Creating an HTML Toolbox your product.</p> Part V - From Web Page to Web Site Chapter 17 - Setting Up Your Online Presence Chapter 18 youCreating a GreataUser Interface Because - have to define spot before you can link to it, you'll find that intradocument linking works Part VI - The Part of Tens best on your own site where you create and control the markup. However, if you happen to know that a Chapter 19 - Ten Ways to site has spots already marked on them, you can use an absolute URL to point to page on someone else's Exterminate Web Bugs Chapter 20 for Ten HTML Do’s and Don’ts that spot, - example: Part VII - Appendixes Appendix A out howTags <a href="http://www.lanw.com/training/ <p>Find - HTML 4 to Appendix B - HTML Character Codes online.htm#register">register</a> for upcoming training Appendix C lead by LANWrights instructors.</p> courses - Glossary Index Warning - HTML 4 For Dummies, 4th Edition Cheat Sheet When you link to spots on someone else's Web site, you're at their mercy because they control the spots. You List of Figures never know when someone will completely rework the markup and content on a page, and your Tables List of links will break if the site designer removes the spot. Be sure you check all of your links regularly to catch and fix List of Listings broken links to both Web pages and spots on Web pages. List of Sidebars Linking to non-HTML resources Although links on the Web were originally used strictly for linking from one Web page to another or within a single Web page, the uses for links have expanded significantly over time to link to a variety of other kinds of files, including these: Word-processing documents
  • Spreadsheets HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) PDFs ISBN:0764519956 ZIP files and Whether your goal isfilesbuild a simple, text-oriented Web site other compressed to or one loaded with frames, graphics, and animation, this step- Tip You can also use an anchor put you on the right track. by-step book will element to link to multimedia files, but there are generally better ways to embed media clips in your Web pages. Chapter 13 covers media file linking in detail. A great use for this kind of link is on software and PDF download pages. Table of Contents HTML 4 For Dummies, 4th Edition Creating Introduction a file download link Part I - Meeting HTML in Its Natural Environment Even non-Web files have unique URLs just like good old HTML pages. When you put a file on a Web - The Least You Need to Know about HTML and the Web server (regardless of its type) you can use a URL to point to it from a link. For instance, if you want your Chapter 2 HTML users to be -able to at Work on a PDF file named doc.pdf and a .ZIP archive called software. zip download the Web Chapter 3 - Creating Your First HTML Page from a Web page, you use this HTML: Chapter 1 Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents <h1>Download the new version of our software</h1> - Linking to Online Resources <p>The <a href="software.zip">software</a></p> Chapter 6 - Finding and Using Images <p>The <a href="doc.pdf">documentation</a></p> Chapter 5 Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the sure how any Remember You can't be Next Level given user's browser will respond when he or she clicks on a link Chapter 8 - HTML Tables to a non-Web file. The browser may prompt the user to save the file, or the browser may have a plug-in Chapter 9 that HTML Frames installed - allows the user to view the file without downloading. (This is common for PDFs.) In some rare Chapter 10 the browser may present an error message (such as a pop-up window) to let the user know the instances, - HTML Forms Part IV - Extending HTML with Other Technologies browser can't handle the file. Chapter 11 - Getting Stylish with CSS Tip To help users download files successfully, you should provide them with as much information as Chapter 12 - HTML and Scripting possible about the file formats and any special tools they might need to work with the files. For example, to Chapter 13 - Making Multimedia Magic work with the contents of a ZIP file you need WinZip or another utility; to view a PDF file, you need the free Chapter 14 - Integrating a Database into Your HTML Acrobat reader. You can make the previous download markup a little more user-friendly by adding some Chapter 15 - How HTML Relates to Other Markup Languages supporting text and links: Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox <h1>Download the new version of our software</h1> - Setting Up Your Online Presence <p>The <a href="software.zip">software</a> <br> Chapter 18 - Creating a Great User Interface <b>Note:</b> Part VI - The Part of Tens You need a <a href="http://www.winzip.com">zip</a> Chapter 19 - Ten Ways to Exterminate Web Bugs utility to open this file.</p> Chapter 20 - Ten HTML Do’s and Don’ts <p>The <a href="doc.pdf">documentation</a> <br> Part VII - Appendixes <b>Note:</b> Appendix A need theTags You - HTML 4 free <a href="http://www.adobe.com/ Appendix B - HTML Character Codes products/acrobat/readstep.html">Acrobat Reader</a> Appendix C - Glossary to view the documentation.</p> Chapter 17 Index Figure 5-4 - HTML 4 For browser renders this Cheat Sheet shows how a Dummies, 4th Edition HTML and the dialog box it displays when you click the software link. List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 Figure -5-4: This browser HTML Documentssave or view the ZIP file. Structuring Your prompts you to Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Linking toTop Off Your Page with Formatting an e-mail address Chapter 7 Part III - Taking HTML to the Next Level In addition to linking to non-Web files to create download pages and the like, you can also link to e-mail Chapter 8 HTML Tables addresses. -You use the standard anchor element and href attribute, but you preface the e-mail address Chapter 9 to-link to with mailto:, as shown here: HTML Frames you want Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies <p>Send us your - Getting Stylish with CSS <a href="mailto:comments@mysite.com">comments</a>.</p> Chapter 11 Chapter 12 - HTML and Scripting Chapter 13 the Making browser configuration ultimately controls how the browser handles an e-mail link, most Although - user's Multimedia Magic Chapter 14 automatically open a newinto Your HTML browsers - Integrating a Database e-mail message window with the e-mail address you specify in the href 15 - How HTML Relates to Other Markup Languages Chapterattribute already in the To field. This is a great way to help users send you e-mail while a request or issue is in the forefront of their mind. Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Tricks of the Trade Web page mailto links are one of the prime sources of e-mail addresses for spam - Setting Up Your Online Presence systems. If you choose to use an e-mail link as a way for users to contact you (a form is another option for Chapter 18 - Creating a Great User Interface receiving feedback, as discussed in Chapter 10), consider creating a special e-mail address just for your Part VI - The Part of Tens site feedback. You can keep the messages you receive at this address separate from your personal or Chapter 19 - Ten Ways to Exterminate Web Bugs other mail, so you can more easily filter out junk mail. Chapter 17 Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes what Tip Regardless of kind of link you include in your Web page, where you place your links, the text Appendix A -them to, and the clues you give your users about where a link is taking them have a significant you anchor HTML 4 Tags Appendixon the effectiveness of your links. Chapter 18 discusses some best practices for including links in impact B - HTML Character Codes your overall Glossary Appendix C - site design. Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • 4 for Dummies, Chapter HTML Tittel and Natanya4th Edition 6: Finding and Using Images ISBN:0764519956 by Ed Pitts Overview John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepIn This Chapter by-step book will put you on the right track. Finding the right format for your images Table of Contents HTML Using Dummies, 4th Edition 4 For markup to add images to Web pages Introduction Creating images that link Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need animated GIFs, and transparent Understanding image maps,to Know about HTML and the Web images Chapter 2 - HTML at Work on the Web Finding- images to use First HTML Page Chapter 3 Creating Your in your Web pages Part II - Getting Started with HTML Although the Web was once a text-heavy place where images played only a supporting role, things are - Structuring Your HTML Documents very different today. Web page designers use text and images equally to deliver important information, Chapter 5 - Linking to Online Resources direct site navigation, and of course contribute to the overall look and feel of a page. Images are a Chapter 6 - Finding and powerful weapon in your Using design armory, but you need to use them carefully and properly or you risk Web Images Chapter 7 their effectiveness. with Formatting reducing - Top Off Your Page Chapter 4 Part III - Taking HTML to the Next Level Chapter 8 Remember HTML Tables well, images are a key element of your page design. When used poorly, they - When used can make - HTML Frames Chapter 9 your page unreadable or inaccessible. Chapter 10 - HTML Forms This chapter gives you a crash course in using images on your Web pages. You find out which image formats are Web-friendly, how to use HTML elements to add images to your Web pages, how to attach Chapter 11 - Getting Stylish with CSS hyperlinks to your images, how to create image maps and animated images, and how to find and edit Chapter 12 - HTML and Scripting images for your Web page. Part IV - Extending HTML with Other Technologies Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Page The Role of Images in a Web Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 Think back to theJohn Wiley & Sons © 2003 (408 pages) last several Web pages you’ve visited and consider the role images have played in each. Images may be logos, clickable navigation aids, or display content; they may also make the page look Whether your goal is to build a simple, text-oriented Web site prettier, or serve or unify a page’s theme. Agraphics,example of the many different ways images can to one loaded with frames, perfect and animation, this stepby-step book will put you on White House enhance and contribute to Web pages is the the right track.home page at www.whitehouse.gov, shown inFigure 6-1. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Figure 6-1: The White House Web page uses images in a variety of ways. Chapter 15few How HTML analyzing this page, andLanguages that images play the following roles on the Spend a - moments Relates to Other Markup you’ll see Part V - From Web Page to Web Site page: Chapter 16 - Creating an HTML Toolbox For navigation: The navigation at the top of that page uses graphics with stylized text to link you to Chapter 17 - Setting Up Your Online Presence information about Great User Interface Chapter 18 - Creating athe President, the Vice President, a search of the site, and more. These navigation elements could have Part VI - The Part of Tens been text based (like those on the left-side of the screen), but using graphics to help visitors link to to Exterminate Web Bugs key areas of the site makes it just a little prettier and helps establish an overall flow Chapter 19 - Ten Ways and formal look and feel for the site. Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes As content: The picture on the right side of the screen isn’t just there to break up the text on the page; it conveys content in a way text simply can’t. The site could easily use text to describe the President Appendix B - HTML Character Codes making calls to world leaders from the Oval Office with the sun streaming through the windows on a Appendix C - Glossary beautiful day in Washington, D.C., but the picture captures the moment more effectively (and Index concisely) than words ever could. This illustrates the many times images are better vehicles for Cheatconveying content than text can be. Sheet - HTML 4 For Dummies, 4th Edition Appendix A - HTML 4 Tags List of Figures List ofFor decoration and to establish an overall look and feel for the site: The site uses a smattering of Tables List ofgraphics to make the site look good and establish an overall look and feel. Notice the White House Listings List ofbalcony in the upper-right corner. It helps emphasize that this is the White House home page and Sidebars adds a sense of dignity and formality to the site’s look and feel. A picture of Grover Cleveland sitting next to links to information about goings on in the Cleveland White House back in 1893 adds some variety and visual appeal to the page. Overall, the White House site balances images and text beautifully. Many of the images on the page perform double-duty as both navigation tools and decorations, and the images the designer chose help convey a consistent and appropriate look and feel for the site.
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition Creating Web-Friendly Images by Ed Tittel and Natanya Pitts ISBN:0764519956 There are a lot ofJohn Wileyways to © 2003 (408 pages) graphics, but only a few are actually appropriate for different & Sons create and save images you want Whether your goal is As build work to create Web-friendlysite to use on the Web. to you a simple, text-oriented Web images, you have to take two factors into account: fileloaded with frames, graphics, and animation, this stepor one format and file size. by-step book will put you on the right track. Choosing the right file format Table of Contents Usually, graphic file 4th Edition HTML 4 For Dummies, formats are particular to one operating system or another, or even to one software application or another. However, because you can’t predict what kind of computer visitors might be using, or what software (other than a Web browser) they have installed, you need to create images that anyone Part I - Meeting HTML in Its Natural Environment can view with any browser. This means you need to use file formats that can be viewed whether a person Chapter 1 - The Least You Need to Know about HTML and the Web uses any version of Microsoft Windows, the Mac OS, or any of the various varieties of Linux on the scene. Chapter 2 - HTML at Work on the Web Such file formats are called cross platform. Introduction Chapter 3 - Creating Your First HTML Page Part II -are only Started with HTML There Getting three graphics formats Chapter 4 that are appropriate for use on the Web: - Structuring Your HTML Documents GIF - Linking to Online Resources Chapter 5 (Graphics Interchange Format): GIF is the original cross-platform, application-independent image format created by CompuServe. It’s a compressed file format, which means that images saved Chapter 6 - Finding and Using Images as GIFs tendOff be smallerwith Formatting Chapter 7 - Top to Your Page than those saved in other file formats. However, GIF supports up to 256 colors (and that’s all, folks), Level Part III - Taking HTML to the Next so if you try to save an image created with millions of colors as a GIF, you may loseHTML Tables quality. Generally, GIF is the best format for line art, clip art, and other types of some image Chapter 8 less-complex images. Chapter 9 - HTML Frames Chapter 10 (Joint Photographic Experts Group): JPEG is a file format that supports 24-bit color (millions JPEG - HTML Forms Part IV -colors) andHTML with Other Technologies images, of Extending consequently more complex like photographs. JPEG is both cross-platform Chapter 11 - Getting Stylish with CSS as GIF is. JPEG also offers compression to make images smaller, and application-independent, just Chapter 12 good image-editing tool can help you tweak the level of compression that you use so you can and a - HTML and Scripting Chapter 13 the optimum balanceMagic strike - Making Multimedia between image quality and image size. Chapter 14 - Integrating a Database into Your HTML PNG - How HTML Relates to Other Markup Languages Chapter 15 (Portable Network Graphics): The latest cross-platform and application-independent image file format Web Page to Web together Part V - Fromdeveloped to bring Site the best of GIF and JPEG. PNG provides the same level of compression as GIFHTML Toolbox does, but supports 24-bit color (and even 32-bit color) like JPEG. Because PNG Chapter 16 - Creating an supports such rich color and uses more advanced compression schemes than either GIF or JPEG, it’s Chapter 17 - Setting Up Your Online Presence the best of the three formats and works with any kind of art. However, Internet Explorer 4 and Chapter 18 - Creating a Great User Interface Netscape 4 and older browsers don’t support it, so many designers still shy away from it. Part VI - The Part of Tens Chapter 19 graphics-editing tool (like those discussed in Chapter 16) allows you to save your images in any Any good - Ten Ways to Exterminate Web Bugs Chapter 20 - formats. You can experiment with each to see how converting a graphic from one format to of these file Ten HTML Do’s and Don’ts Part VII - Appendixes the other changes its appearance and file size, and then choose the format that gives you the best results. Appendix A - HTML 4 Tags Tip For - HTML Character Codes Appendix Ba complete overview of graphics formats and how to match a format to a particular graphic, visit Builder.com’s Graphics 101 http://builder.cnet.com/webbuilding/0-3883-8-48921401.htmland Webmonkey’s "Web Graphics Overview" at Index http://hotwired.lycos.com/webmonkey/01/28/index1a.html . Appendix C - Glossary Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures Achieving the smallest possible file size List of Tables List of Listings The fact that all three cross-platform graphics file formats (GIF, JPEG, and PNG) include file compression capabilities should be your first clue that file size is extremely important when you create Web graphics. Before users can view the images on your Web site, they have to download copies of those images to their local hard drives, which means the wrong set of circumstances can make your pages so difficult to access that visitors won’t stay long enough to see your content and certainly won’t be making a return visit: List of Sidebars You have several big images on your HTML page: If the graphics on your page take up several hundreds of kilobytes (K), they will take quite a while to download regardless of the speed of a user’s Internet connection.
  • A visitor has a slow for Dummies, 4th Editiontakes a minute or more (a very long time in HTML 4 Internet connection: If it cyberspace) by Ed Tittel and Natanya Pitts for your page to load on users’ computers, you can lose traffic. Most users don’t have ISBN:0764519956 that much patience, and they’ll© 2003 (408 pages) in search of one that loads faster. John Wiley & Sons leave your page Whether your goal is to build a simple, text-oriented Web site The good news is you can create graphics that look good and that havestepa reasonable file size. The few or one loaded with frames, graphics, and animation, this minutes you spend optimizing will put you on the right track. your images for Web use make them more effective and help you keep the by-step book users who visit your site on your site. Table of Contents Optimizing images for the Web HTML 4 For Dummies, 4th Edition Introduction graphics for your Web page, you’ll find yourself in a constant struggle to maintain a healthy As you build Part I - Meeting HTML in Its Natural Environmentmore balance between file quality and file size. The colors an image has, the better it looks, but the larger Chaptersize. - The Least You Need to Know about HTML and the Web its file 1 As you begin to reduce the number of colors, image quality begins to decline, but so does file Chapter 2 - the right balance in Web size. Finding HTML at Work on thean image is called optimizing it, and there are a variety of tools designed Chapter 3 Creating Your to help you -do just that. First HTML Page Part II - Getting Started with HTML The first - in optimizing your graphic for the Chapter 4 stepStructuring Your HTML Documents Web is choosing the proper file format. For example, if you try to save - Linking to Online Resources Chapter 5 a complex photograph as a GIF, you’ll only have 256 colors to work with, which typically isn’t enough a photograph. The file size Chapter 6 for - Finding and Using Images might be smaller, but the quality probably won’t be that great. On the other hand, if Off Yourto usewith Formatting some simple line art, you’ll have millions of colors to work you try Page JPEG to save - Top withIII - Taking HTML to the Next and your file size will typically be larger than you need. (that you really don’t need), Level Part Chapter 7 Chapter 6-1 offers some very general guidelines for choosing a file format for an image type. Table 8 - HTML Tables Chapter 9 - HTML Frames Chapter 6-1: - HTML Forms Right File Format Table 10 Choosing the Part IV - Extending HTML with Other Technologies File 11 - Getting Stylish with CSSFor Best Used ChapterFormat Watch Out Chapter 12 - HTML and Scripting Chapter 13 Don’t use this format if you have a complex image or photo. Chapter 14 - Making Multimedia Magic less detail. few colors and - Integrating a Database into Your HTML JPEG Chapter 15 Photos and other images with - How HTML Relates to Other Markup Languages GIF Line art and other images with millions of Part V - From Web Page to Web Site colors and lots of Chapter 16 - Creating andetail. Toolbox HTML Chapter 17 PNG Chapter 18 - Setting Up Your Online Presence Photos and other images with - Creating a Great User Interface lots of millions of colors and Part VI - The Part of Tens detail. Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Don’t use with line art. Be sure that you don’t compromise too much quality when you compress the file. Don’t use with line art. Older browsers don’t support PNG, so you may still lose Web surfers even though PNG offers the best balance between quality and file size. Part VII - Appendixes Appendix A - HTML 4 Tags Tip Although many visitors to your Web site may have broadband Internet connections, many more probably - HTML Character Codes Appendix Bdo not. The best way to ensure that your page is accessible to everyone and downloads quickly — regardless of connection speed — is to remember the 1-second, 1K rule. If you assume that it takes 1 Appendix C - Glossary second for every K of information on your page to download, you can add the total file size for the HTML Index file and all - HTML 4 For Dummies, 4th Edition Cheat Sheet images on the page and get a good idea of how long your page will take to download on a slow Internet connection. Try to keep it to 60 seconds, which is 60K, or less, and you’ll be just fine. List of Figures List of Tables Remember Webmonkey has two good tutorials on trimming your image file sizes and optimizing your List of Listings it downloads faster. For a healthy collection of tips and tricks that can help you create pages entire site so List ofdownload quickly, review “Optimizing Your Images” at that Sidebars http://hotwired.lycos.com/webmonkey/99/15/index0a.html and the "Site Optimization Tutorial" at http:// hotwired.lycos.com/webmonkey/design/site_building/tutorials/ tutorial2.html.
  • HTML 4 to Your 4th Edition Adding an Imagefor Dummies,Page by Ed Tittel and Natanya Pitts ISBN:0764519956 After you have an image to work with2003 (408 pages) it for the Web, you need to use the correct markup to John Wiley & Sons © and optimized make sure the image is added goal is to build Easy enough. The image (<img>) element is an empty Whether your to your page. a simple, text-oriented Web site element, sometimes called a singleton tag,graphics, and animation, this stepor one loaded with frames, which you place on the page wherever you want your image to by-step book will put you on the right track. go. Remember An empty element only has an open tag, and no close tag. Table of Contents The 4 For Dummies, 4th Edition HTML following markup places an image named three_cds.jpg between two paragraphs: Introduction Part I - MeetingHTML in Its Natural Environment <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" Chapter 1 - "http://www.w3.org/TR/REC-html40/loose.dtd"> The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web <html> Chapter 3 - Creating Your First HTML Page Part<head> II - Getting Started with HTML <title>CDs at Your HTML Documents Chapter 4 - Structuring Work</title> </head> Linking to Online Resources Chapter 5 Chapter 6 - Finding and Using Images <body> - Top Off Your Page with Formatting Chapter 7 Part III - Taking HTML to the Next Level <h1>CD - as a Tables Storage Media</h1> HTML Chapter 8 Chapter 9 - HTML Frames <p>CD-ROMs have become a standard storage option in today’s computing world - HTML Forms because they are an inexpensive and easy to use media.</p> Chapter 10 Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic <img src="three_cds.jpg"> Chapter 14 read from a Database intoonly HTML a standard CD-ROM drive, but to create <p>To - Integrating a CD, you Your need Chapter CDs, How HTML Relates to Other Markup Languages 15 - you need either a CD-R or a CD-R/W drive.</p> Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox </body> Chapter 17 - Setting Up Your Online Presence </html> Chapter 18 - Creating a Great User Interface A Web The Part of Tens Part VI - browser replaces the <img> element with the image file referenced by the src attribute, as shown inFigure 6-2. Ten Ways to Exterminate Web Bugs Chapter 19 Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 6-2: Use the <img> element to place graphics in a Web page. Thesrc attribute is very much like the href attribute that you use with an anchor (<a>) element. The src
  • attribute specifies the URL for the image you want to display on your page. The previous example points to an image file thatHTML 4 for Dummies, 4ththe HTML file referencing it, so the URL is relative. You’ll find sits in the same folder as Edition by Ed to images Natanya Pittsjust because you ISBN:0764519956image files on your site. that most of your links Tittel and are relative usually keep John Wiley & Sons © 2003 (408 pages) Remember You make relative linksto build a simple, text-oriented Web site and graphic) on the same Whether your goal is between resources (like a Web page or one loaded with between resources on two different stepWeb site. You make absolute links frames, graphics, and animation, this Web sites. Turn to Chapter 5 for a by-step book will put you on the relative and complete discussion of the differences between right track. absolute links. Tricks of the Trade So why should you keep all of the images you reference in your HTML on your site with your other files? After all, you can point to any image anywhere from your HTML. An image is just HTML 4 For Dummies, 4th Edition another Web resource. There are three compelling reasons to link to images on your own site: Table of Contents Introduction Part IWhen the HTML in are Naturalon your site, you - Meeting images Its stored Environment have complete control over them. You know they aren’t Chapter 1 to disappearYouchange, and you canHTML and the Webthem. going - The Least or Need to Know about work to optimize Chapter 2 - HTML at Work on the Web If you link to images on someonePage site, you never know when that site might go down or be else’s - Creating Your First HTML unbelievably slow. with HTML these things about your own site. You know Part II - Getting Started Chapter 3 Chapteryou link to images Your HTML Documents If 4 - Structuring on someone else’s Web site, you may very well be violating his or her copyright Chapter 5 the Linking to Online Resources at the end of the chapter), and that’s just plain illegal. (see - “Copyright matters” sidebar Chapter 6 - Finding and Using Images Chapter 7 Top Off Your Page with Adding -alternative text Formatting Part III - Taking HTML to the Next Level Chapter 8are-designed, obviously, to be seen. However, there two important reasons why your image might HTML Tables Images Chapter seen: HTML Frames 9 not be Chapter 10 - HTML Forms Users who are visually impaired may not be Part IV - Extending HTML with Other Technologies Chapter 11 Chapter 12 able to see them. - Getting Stylish with CSS - HTML and Scripting Users with slow modem connections may turn images off. Chapter 13 -Stuff Some searchMagic Technical Making Multimedia engines and other cataloging tools also use alternative text to index Chapter 14 - Integrating a Database into Your HTML images. Chapter 15 - How HTML Relates to Other Markup Languages Although most of your users will see your Part V - From Web Page to Web Site images, you should always be prepared for those who won’t. The HTML 4.0 specification requires that you provide alternative text that describes the image with every Chapter 16 - Creating an HTML Toolbox image 17 - Setting You use the alt attribute with the <img> element to add this information to your Chapter on your page.Up Your Online Presence markup: Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens <!DOCTYPE HTML PUBLIC "-//W3C//DTD Chapter 19 - Ten Ways to Exterminate Web Bugs HTML 4.0 Transitional//EN" Chapter 20 - "http://www.w3.org/TR/REC-html40/loose.dtd"> Ten HTML Do’s and Don’ts Part VII - Appendixes <html> Appendix A - HTML 4 Tags <head> Appendix B - HTML Character Codes <title>Inside the Orchestra</title> </head> Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition <body> <p>Among the different sections of the orchestra you will find:</p> List of Tables <p><img src="strings.jpg" alt="violin and sheet music"> Strings</p> List of Listings src="brass.jpg" alt="trumpet"> Brass</p> <p><img List of Sidebars src="woodwind.jpg" alt="clarinet"> Woodwinds</p> <p><img </body> </html> List of Figures When browsers don’t display an image (or can’t, in the case of text-only browsers such as Lynx), they display the alternative text instead, as shown in Figure 6-3.
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 Figure -6-3: When a Your HTML Documents an image, it shows alternative text instead. Structuring browser doesn’t show Chapter 5 - Linking to Online Resources Even when -browsersand Using Images many (Internet Explorer 4 and Netscape 4 and later) typically show Chapter 6 Finding show an image, the alternative text as a pop-upwithwhen you hold your mouse over the image for a few seconds, as shown tip Formatting - Top Off Your Page inFigure Taking HTML to the Next Level 6-4. Part III Chapter 7 Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List ofFigure 6-4: Even when a browser shows an image, it may display the alternative text as a pop-up tip Figures List ofas well. Tables List of Listings This means you can use alternative text to describe the image to those who can’t see it and to provide additional information about the image to those who can. List of Sidebars Tip The W3C’s Web Accessibility Initiative (WAI) includes a variety of helpful tips on how to create useful and usable alternatives to visual content at www.w3.org/TR/WCAG10-TECHS/#gl-provideequivalents.Chapter 18 also discusses making your site accessible in more detail. Specifying image size
  • You can use the height and width attributes with the <img> element to let the browser know just how HTML 4 for Dummies, 4th Edition tall and wide an image is (in pixels): by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 <img src="brass.jpg" width="72" height="108" alt="trumpet">Brass</p> Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepMost browsers downloadbook HTML and text the right track. a page long before they download all of the the will put you on associated with by-step page graphics. Rather than make users wait for every bit of a page to download, browsers typically display the text first and fill in graphics as they become available. If you let the browser know how big a graphic is, Table browser can reserve a spot for it in the display. This technique makes the transition from a page the of Contents without graphics displayed to a HTML 4 For Dummies, 4th Edition page with graphics displayed much smoother for the user. Introduction Tip Any image-editing program or even the image viewers built into Windows and Mac OS display the width and height of an image in pixels. Also, you may be able to simply view the properties of the image in Chapter 1 - The Least You Need to Know about HTML and the Web either operating system to see how wide and tall it is. Part I - Meeting HTML in Its Natural Environment Chapter 2 - HTML at Work on the Web Chapter 3 good use of the height andPage Another - Creating Your First HTML width attributes is to create colored lines on a page using just a Part II - Gettingsquare. For example, small colored Started with HTML Chapter 4 this markup adds a 10 by 10-pixel blue box to an HTML page: - Structuring Your HTML Documents Chapter src="blue_box.gif" alt="" height="10" width="10"> <img 5 - Linking to Online Resources Chapter 6 - Finding and Using Images When 7 - Top Off Your Page attributes in the Chapter the height and width with Formatting <img> element match the height and width of the image, it Part III - Taking HTML to thebrowser window, displays as a blue box in a Next Level Chapter 8 Chapter 9 - HTML Frames Chapter 10 as shown in Figure 6-5. - HTML Tables - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Figure Integrating box. Chapter 14 -6-5: A small a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Chapter 17 - Setting Up Your Online Presence However, a Web Page to Web Site Part V - From change to the height and width values in the markup turns this small blue box into a line 20 pixels high and 500 pixels long: Chapter 16 - Creating an HTML Toolbox <img 18 - Creating a Great User Interface Chapter src="blue_box.gif" alt="" height="20" width="500"> Part VI - The Part of Tens The browser will expand the image to fit the height and width specifics in the markup, as shown in Figure - Ten Ways to Exterminate Web Bugs 6-6. Chapter 19 Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List ofFigure 6-6: A small box becomes a long line. Tables List of Listings Tricks of the Trade Using this technique, you can turn a single image like the blue box (only 1K in size by the way) into a variety of lines and even boxes. This is a good way to ensure all of the dividers and other border elements on your page use the same color — because they are all based on the same graphic. Also, if you decide you want to change all of your blue lines to green, you simply change the image, and every line you’ve created changes colors. List of Sidebars Warning When you specify a height and width for an image that are different from the image’s actual height and width, you rely on the browser to scale the image display accordingly. Although this works great for single-color images like the blue box, it doesn’t work well for images with multiple colors or images that
  • display actual pictures. The browser doesn’t size images well, and you’ll wind up with a distorted picture. Figure 6-7 showsHTMLbadly a browser handles enlarging the trumpet image from the previous example how 4 for Dummies, 4th Edition ISBN:0764519956 by Ed Tittelheight and width in the markup: when we double the image and Natanya Pitts John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site <img src="brass.jpg" width="144" height="216" alt="trumpet"> Brass</p> or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Chapter 8 - HTML Tables Figure 6-7: Don’t use a browser to Part III - Taking HTML to the Next Level resize complex images. Tricks of the Trade If you need several sizes of the same image, say a logo or navigation button, use - HTML Frames the largest size image to make smaller versions in an image-editing tool so you can better control the final Chapter 10feelHTML Forms look and - of the image. Chapter 9 Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Setting the image border Chapter 12 - HTML and Scripting Chapter 13 By default, - Making Multimediaborder of 1, which doesn’t really show up until you turn that image into a every image has a Magic Chapter 14 (as Integrating in Database intothat Link” section coming up). You can use the border attribute hyperlink - discussed a the “Images Your HTML Chapter 15 - How HTML Relates to control what border the browser displays around your image. This with the <img> element to better Other Markup Languages Part V - From Webborder for theSite markup sets the Page to Web clarinet Chapter 16 image to 10 pixels: - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence <img src="woodwind.jpg" width="72" height="108" alt="clarinet" border="10"> Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens The browser applies this border to all four sides of the image, as shown in Figure 6-8. Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 6-8: Use the border attribute to create a border around your image. Notice that the border is black and applies to all four sides of the image. If you want to control the color of the border, or want the border to appear differently on each side of the image, you have two options:
  • Build the border into the image in an image-editing tool. HTML 4 for Dummies, 4th Edition by Style Sheets (covered in Use Cascading Ed Tittel and Natanya Pitts Chapter 11). ISBN:0764519956 John Wiley & Sons © 2003 (408 pages) If you use an image-editing tool to create your border, you can take Web site Whether your goal is to build a simple, text-oriented advantage of the tool’s features to create a patterned border or apply a unique effect. However, the additional information in the image may or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. make it bigger. You’ll need to carefully manage your image size in relation to its final appearance to be sure it doesn’t take too long to download. Table of Contents apply a border, your image won’t get any bigger, but your border may not show up in If you use CSS to HTML 4browsers that don’t support CSS well. The choice you make depends on how crucial the border is to older For Dummies, 4th Edition Introduction (if it’s very important, embed it in the image) and what browser you think your visitors use your image Part I - Meeting HTML in Its Natural Environment (newer browser have better support for style sheets). Chapter 1 - The Least You Need to Know about HTML and the Web Tip If you - HTML at Work on the Web don’t plan to make your image into a hyperlink and don’t want a border, don’t worry about Chapter 2 setting a border attribute at all. However, if you want to turn your image into a hyperlink and don’t want a Chapter 3 - Creating Your First HTML Page bright blue line around it, be sure to set the value of border to 0. Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Controlling image alignment - Linking to Online Resources Chapter 5 Chapter 6 - Finding and Using Images Thealign attribute works with the <img> element to control the way your image appears relative to the Chapter 7 - Top Off Your Page with Formatting text around it. The possible values for this attribute are: Part III - Taking HTML to the Next Level Chapter 8 Aligns the text around the image with the top of the image. top: - HTML Tables Chapter 9 - HTML Frames middle: Aligns the text around the image with the middle of the image. Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies bottom: Aligns the text around the image with the bottom of the image. Chapter 11 - Getting Stylish with CSS Chapter 12 The image sits on the left, and text floats to the right of the image. left: - HTML and Scripting Chapter 13 - Making Multimedia Magic right: Integrating a Database into and text floats to the left of the image. Chapter 14 - The image sits on the right,Your HTML Chapter 15 - How HTML Relates to Other Markup Languages By default, most browsers align images to the left and float all text to the right. The following markup shows how five different <img> elements use the align attribute to change the way text floats around the Chapter 16 - Creating an HTML Toolbox mouse images: Part V - From Web Page to Web Site Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface <p> - The src="white_mouse.jpg" Part VI<img Part of Tens alt="mouse on a white background" height="108" width="72" align="top"> Chapter 19 - Ten Ways to Exterminate Web Bugs This text is aligned with the top of the image. Chapter 20 - Ten HTML Do’s and Don’ts </p> Part VII - Appendixes Appendix A - HTML 4 Tags <p> <img src="kid_mouse.jpg" alt="mouse on a yellow background" height="108" width="72" align="middle"> Appendix C - Glossary This text is aligned with the middle of the image. Index </p> Appendix B - HTML Character Codes Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures src="grey_mouse.jpg" alt="grey mouse on a red background" <p> <img List of Tables height="108" width="72" align="bottom"> List of Listings text is aligned with the bottom of the image. This List of Sidebars </p> <p> <img src="threebutton_mouse.jpg" alt="three button mouse" height="108" width="72" align="left"> This image floats to the left of the text. </p> <p> <img src="blue_mouse.jpg" alt="trackball mouse and keyboard"
  • height="108" width="72" align="right"> HTML 4 for Dummies, right of This image floats to the 4th Edition the text. by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) </p> ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site Figure 6-9 showsor onealoaded with frames, graphics, and animation, this stephow browser interprets these different alignments. by-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Figure How HTML Relates to Other Markup to control Chapter 15 -6-9: You can vary image alignment Languagesimage placement on the page. Part V - From Web Page to Web Site Tip You may find that the <img> attributes don’t give you as much control over your image alignment as - Creating an HTML Toolbox you’d like. One of the primary uses for tables is to better control the way images sit relative to other content Chapter 17 - Setting Up Your Online Presence on the page. Find out more about using tables and images together in Chapter 8. In addition, CSS, Chapter 18 - Creating a Great User Interface discussed in Chapter 11, includes a variety of properties you can use to better control the way your images Part VI - The Part of Tens sit on the page. Chapter 16 Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Setting image spacing Part VII - Appendixes Appendix A - HTML 4 Tags Most browsers only leave a pixel or so of white space between images and the text or other images next to them. You can use the vspace and hspace attributes to give your images a little more breathing room Appendix C - Glossary both on the top Appendix B - HTML Character Codes Index Cheat bottom-(vertical space) and to 4th Edition right (horizontal space). This HTML gives the mouse and Sheet HTML 4 For Dummies, the left and graphic 20 pixels of white space on either side, and 25 pixels on the top and bottom: List of Figures List of Tables List of Listings <p> List of Sidebars This text doesn’t crowd the image on top.<br> <img src="white_mouse.jpg" height="108" width="72" hspace="20" vspace="25" alt="mouse on a white background"> And this text is a little further away from the sides. </p> Figure 6-10 shows how a browser adds space around the image to separate it from the text.
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 Figure -6-10: TheWork on the Web HTML at hspace and vspace attributes control the white space around an image. Chapter 3 - Creating Your First HTML Page Tricks of the Started with HTML Part II - Getting Trade The default value for hspace and vspace is 1. If you want to place images so close together that their sidesHTML Documents you might for a set of navigation buttons, set the value for are touching, as Chapter 4 - Structuring Your these attributes to 0 to Online Resources 1 pixel of space. to eliminate that extra Chapter 5 - Linking Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 Images that Linkfor Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 One of the most common uses for © 2003 (408 pages) John Wiley & Sons images is as navigation tools. They are prettier than plain-text links, and as you saw on the White House pageto build in simple, text-oriented Web site include both form and function Whether your goal is earlier a the chapter, they allow you to on your page with one element. To frames,an image and animation, simply substitute an <img> element in or one loaded with create graphics, that links, you this stepby-step book will put you on the right track. place of the text you would anchor your link to. This markup hangs a link on some text: <p><a href="http://www.w3.org">Visit the W3C</a></p> Table of Contents HTML 4 For Dummies, 4th Edition Introduction This markup replaces the text Visit the W3C with an appropriate icon: Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 3 - Creating Your First HTML Page <p><a href="http://www.w3.org"><img src="w3.jpg" Chapter 2 - HTML at Work on the Web alt="Visit the W3C Web Site" height="72" width="108" border="0"></a> Part II - Getting Started with HTML </p> Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking image that points This creates a linkedto Online Resourcesto http://www.w3.org. Also, notice that the alternative text now Chapter 6 Finding and Using Images saysVisit- the W3C Web Site, to let users who can't see the image know where the link takes them. Chapter a user Top Off Your Page with Formatting over the image, the cursor turns from a pointer into a pointing When 7 - moves his or her mouse pointer Part III - Taking HTML to his or herLevel hand (or whatever icon the Next browser Chapter 8 Chapter 9 - HTML Frames Chapter 10 uses to indicate a link), as shown in Figure 6-11. - HTML Tables - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 -6-11: Combine image and anchor elements to create a linked image. Figure Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence A quick click of the image launches the W3C Chapter 18 - Creating a Great User Interface Web site. It's as simple as that. Part VI - The Part of Tens Tricks of the Trade As discussed earlier in the chapter, you should set the border of any image you use in - Ten Ways to Exterminate Web Bugs a link to 0 to keep the browser from surrounding your image in an ugly blue line. Without the line, however, Chapter 20 - Ten HTML Do’s and Don’ts users will need other visual (or alternative text) clues so they know an image is a link. Be sure images that Part VII - Appendixes serve as links scream to the user (tastefully of course) "I'm a link." Chapter 18 discusses building a good user Appendix A - HTML 4 Tags interface in more detail. Chapter 19 Appendix B - HTML Character Codes Appendix C - Glossary Creating an image map Index Cheat Sheet - HTML 4 For Dummies, 4th Edition When you use an <img> element with an anchor element to create a linking image, you can only attach one link to that image. If you want to create a larger image that connects several different links to different regions List of Tables you need an image map. on the page, List of Figures List of Listings To create an List of Sidebars image map you need two things: An image with several distinct areas that would be obvious to users that point to different areas on your site. A set of markup to map the different regions on the map to different URLs. You use the <img> element to add the map image into your page, just as you would any other image. In addition, you include the usemap attribute to let the browser know that there's image map information to go
  • with the image. The value of the usemap attribute is the name of your map. HTML 4 for Dummies, 4th Edition ISBN:0764519956 You use two elements and aand Natanya Pitts by Ed Tittel collection of attributes to define the image map: <map> to hold the map information and <area> to link specific partspages) map to URLs. The <map> element uses the name John Wiley & Sons © 2003 (408 of the attribute to identify the map. The value of name shouldtext-oriented Web of usemap in the <img> element Whether your goal is to build a simple, match the value site or one The <area> element takes several attributes to define that goes with the map. loaded with frames, graphics, and animation, this step- the specifics for each region by-step book will put you on the right track. in the map: shape: Specifies the shape of the region. You can choose from rect (rectangle), circle, and poly (a triangle or polygon). Table of Contents HTML 4 For Dummies, 4th Edition Introduction coords: Define the region's coordinates. A rectangle's coordinates include the left, right, top, and Part Ibottom points. Ain Its Natural Environment - Meeting HTML circle's coordinates include the x and y coordinates for the center of the circle and the Chapter 1 circle's-radius. A polygon's coordinates areHTML and theof x and y coordinates for every point in the The Least You Need to Know about a collection Web polygon. HTML at Work on the Web Chapter 2 Chapter 3 - Creating Your First HTML Page href:Specifies the URL to which the region links. This can be an absolute or relative URL. Part II - Getting Started with HTML Chapter 4 Provides alternativeHTMLfor the image region. alt: - Structuring Your text Documents Chapter 5 - Linking to Online Resources This markup Finding and Using Images called NavMap linked to the navigation.gif image: Chapter 6 - defines a three-region map Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level <img src="navigation.gif" width="302" height="30" usemap="#NavMap" border="0"> Chapter name="NavMap"> <map 8 - HTML Tables Chapter 9 <area shape="rect" coords="0,0,99,30" href="home.html" alt="Home"> - HTML Frames <area - HTML Forms Chapter 10 shape="rect" coords="102,0,202,30" href="about.html" alt="About"> Part<area shape="rect" Other Technologies IV - Extending HTML with coords="202,0,301,30" </map> Chapter 11 Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 href="products.html" alt="Products"> - Getting Stylish with CSS - How HTML Relates to Other Markup Languages Figure 6-12 shows how a browser displays this markup. Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Figure 6-12: Image Part VII - Appendixes maps turn different areas of an image into linking regions. Appendix A - HTML 4 Tags Tip When the mouse sits over a region in the map, the cursor turns into a pointing hand, just as it does over any other hyperlink, so take advantage of the alternative text to include useful information about the link Appendix B - HTML Character Codes Appendix C - Glossary Index Creating thumbnail images Cheat Sheet - HTML 4 For Dummies, 4th Edition List ofThere may be times when you want to make large images available to users on your Web site, but want Figures List ofto give them a preview of the image and the option to view the larger image, rather than forcing them to Tables List ofwait for the larger image when they first view your page. Thumbnail images use smaller versions of a Listings List oflarge image to link to the larger (both in file size and image size) image, as in this markup: Sidebars <p><a href="brass_large.jpg"> <img src="brass_small.jpg" alt="trumpet thumbnail" height="98" width="109" border="0"> </a> </p>
  • This markup links a smaller version of the trumpet image directly to a larger version. Notice that the link is to a JPEG HTML 4 to another HTML page. This is a quick way to make a link to a larger image. file, not for Dummies, 4th Edition ISBN:0764519956 by is to create a Natanya Pittspage to hold the larger image and link to the page Another option Ed Tittel and new HTML John Wileyinstead of 2003 (408 pages) & Sons © the image itself. brass_large.html Whether your goal is to build a simple, text-oriented Web site <p><a href="brass_large.html"> and animation, this stepor one loaded with frames, graphics, <img by-step book will put you on the right track. src="brass_small.jpg" alt="trumpet thumbnail" height="98" width="109" border="0"> Table of Contents </a> HTML 4 For Dummies, 4th Edition </p> Introduction Part IThis approach gives you the flexibility to add - Meeting HTML in Its Natural Environment text and navigation to the page holding the larger image, but of 1 - The Least that you to Know about HTML and the Web Chapter course requires You Needcreate and maintain the page. If you only have a couple of such thumbnail images-on your site, maintaining them isn't that difficult. More than 10 or so is a different story though. Chapter 2 HTML at Work on the Web You - Creating Your yourself how much additional information you want to supply with the larger Chapter 3 have to decide forFirst HTML Page image. Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6of the Trade Image maps have really fallen out of favor among Web designers recently because - Finding and Using Images Tricks Chapter 7 to be bulkyYour Page difficult to manage. Even so, they're still used on the Web and they may be a they tend - Top Off and very with Formatting Part III - you want to include Next Level feature Taking HTML to the on your pages. A common use for image maps, even today, is to turn maps of Chapter 8 - HTML Tables places (states, countries, cities, neighborhoods, and such) into linkable maps. Webmonkey's image map tutorial at - HTML Frames Chapter 9 http://hotwired.lycos.com/webmonkey/96/40/index2a.html provides even more details on - HTML Forms Chapter 10 opti- mizing your image maps and making the most of this HTML feature. Part IV - Extending HTML with Other Technologies Remember Getting Stylish with CSS by hand can be a little tricky. You need to use an image editor to identify Creating image maps each point in the map and then create the proper markup for it. Most HTML tools from (both shareware and Chapter 12 - HTML and Scripting commercial software) include utilities to help you make image maps. If you take advantage of one of these Chapter 13 - Making Multimedia Magic tools, you'll create image maps quickly and with fewer errors. Find out more about HTML tools in Chapter 16. Chapter 11 Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition Other Interesting Image Tricks by Ed Tittel and Natanya Pitts ISBN:0764519956 As you look around the Web, you see types of interesting image tricks at work. Two of the most popular John Wiley & Sons © 2003 (408 pages) involve creating animated your goal is to build a simple, text-oriented these activities is particularly difficult. Whether GIFs and transparent images. Neither of Web site You just need to know how they work and then acquire the right tools. stepor one loaded with frames, graphics, and animation, this by-step book will put you on the right track. Tip Images often play an integral role in multimedia presentations you might add to your Web page. Be sure to review Chapter 13 for more information on working with media. Table of Contents HTML 4 For Dummies, 4th Edition Creating animated GIFs Introduction Part I - Meeting HTML in Its Natural Environment An animated GIF is a collection of graphics files in the GIF format that display in succession, one after the Chapter just like scenes in a movie. To create an HTML and the Web bring several images together in other, 1 - The Least You Need to Know about animated GIF, you Chapter 2 software, specifyon the Web such as how many times the animation should repeat, how fast animation - HTML at Work parameters Chapter 3 - Creating Your First you Page the animation should run, and ifHTMLwant any special effects applied to the transition from image to image. Part II - Getting Started with HTML To create - animated Your HTML Documents Chapter 4 an StructuringGIF, you need animation software such as GifBuilder or GIF Construction Set, both of which - Linking to Online Resources Chapter 5 are shareware. These tools handle the programming (such as it is - it's not what we'd describe as heavy 6 - behind the Using Images Chapter lifting) Finding and GIF, and help you put the pieces together. Chapter 7 - Top Off Your Page Tip You can visit TUCOWS atwith Formatting www.tucows.com and search for "animated GIF" to access a long list of tool possibilities. You're sure to find one that fits your budget and that works with your computer of choice. Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 animatedFrames Because - HTML GIFs are just GIF files with a little extra information thrown in, you reference them in your HTML HTML Forms Chapter 10 -just like you would any other GIF file; that is, you use the <img> element. Animated GIFs may Part IV with several HTML withbut they become a single begin - Extending GIF files, Other Technologies file whose name you can use as the value of the src attribute. Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Tricks of the Trade Much like image maps, animated GIFs are becoming something of a dinosaur on - Making Multimedia Magic the Web. New technologies such as Macromedia Flash (covered in Chapter 13) allow you to do more Chapter 14 - Integrating a Database into Your HTML advanced animations that are interactive and include links. However, Flash isn't a free product and does Chapter 15 - How HTML Relates to Other Markup Languages have a learning curve. If you want to quickly add a short animation to your page, an animated GIF may be Part V - From Web Page to Web Site just what you're looking for. The Webmonkey tutorial entitled 'My First GIF Animation' at Chapter 16 - Creating an HTML Toolbox http://hotwired.lycos.com/webmonkey/html/97/14/index2a.html walks you through all of Chapter 17 to creating Up Your Online Presence the steps - Setting an animated GIF. Chapter 13 Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Making -transparent imagesBugs Ten Ways to Exterminate Web Chapter 19 Chapter 20 - Ten HTML Do’s and Don’ts Transparent images are simply graphics saved in either the GIF or PNG file format (but not JPEG) where a color in the image is transparent. That is, the background color of whatever page the image is on will Appendix A - HTML 4 Tags color would have been. show through where that Part VII - Appendixes Appendix B - HTML Character Codes Transparency helps images blend into a page, but creating transparent images does have its drawbacks: Appendix C - Glossary Index Although you can set several colors in a PNG image to be transparent, you can only pick one color in a GIF. Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List ofIfTables the color on the remote edge of a GIF to transparent, the edge may appear jagged against a you set List ofdifferent color background. This happens because what the human eye perceives as the edge Listings List ofbetween two colors is really a blend of several shades of one color into the next. Black and white isn't Sidebars really just a transition between black and white, but instead requires several shades of gray. When you make a single color transparent, the other shades are still there. Just about any image-editing software, from shareware to commercial, has utilities for creating transparent images. Look in the help or documentation for your tool of choice to find out how to use the transparency feature. Also, because transparent images are just regular image files, you use the image element to reference them in your HTML pages.
  • Tricks of the Trade Transparency works best on line art that doesn't have a lot of colors so there is less HTML 4 for Dummies, 4th Edition shading to work with. If you have more complicated graphics that you would like to blend in with your page ISBN:0764519956 by Ed Tittel and Natanya Pitts background, consider making the graphic background match that of the page. John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Images Finding Sourcesfor Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 Of course, if you John Wiley &images 2003 (408 Web pages, you need a source for all of those images. If you want to use Sons © in your pages) aren’t a modern-day Rembrandt (or Picasso orsimple, text-orienteddoesn’t mean you can’t acquire quality Whether your goal is to build a even Warhol), that Web site images without spending an arm and a leg graphics, and animation, thisoptions for reasonably priced or one loaded with frames, to do so. You have several stepby-step (including free) images: book will put you on the right track. Online: There a variety of online image repositories that house free graphics you can use for personal Table of Contents and even business Web sites. Search your favorite search engines for “free Web graphics,” and you’ll HTML beFor Dummies, 4th Edition 4 presented with a very long list to get you started. However, because everyone can access these Introduction graphics your site may lose some of its uniqueness, or you may have a hard time finding images that Part Ifit Meeting HTML in Its Natural Environment - your needs. Chapter 1 - The Least You Need to Know about HTML and the Web Photo - HTML atart CDs: the Web several photo and clip art CD vendors that will sell you entire and clip Work on There are Chapter 2 collections of graphicsFirstaHTMLcost (even as little as $25 a CD). These images are usually high Chapter 3 - Creating Your for low Page quality andStartedin a variety of formats so you can use them for both print and Web work. Visit Part II - Getting come with HTML www.profotos.com for a list of companies that specialize in selling images on CD-ROM. In addition, Chapter 4 - Structuring Your HTML Documents www.iStockphoto.com is a great resource for free stock photography. Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Warning When you locate images either for free or for a fee, be sure to double check the licensing Chapter 7 agreement - Top Off Your PageSomeFormatting only free for personal use and require that you pay a fee for those images. with images are Part business use. Some the Next Level for III - Taking HTML to clip art and photo CDs only allow you to use the images in print or on the Web, but Chapter 8 When in doubt, ask the person or company providing the art what they will allow you to use the not both. - HTML Tables Chapter 9 - HTML Frames art for. Chapter 10 - HTML Forms Scanners and digital cameras: You can capture Part IV - Extending HTML with Other Technologies your own images using a scanner or a digital camera. Getting Stylish with CSS documents, or other art that you would like to incorporate into your If you have art, drawings, Chapter 11 site, just scan them. You can take pictures of products, a company office, people at work and at play, Chapter 12 - HTML and Scripting and more with a digital camera to create your own compelling images for your site. Chapter 13 - Making Multimedia Magic Chapter 14 -your own: Even if you haven’t done much drawing before, try your hand at creating your own Create Integrating a Database into Your HTML Chapter 15 - Howsoftware packages provide youLanguages art. Today’s HTML Relates to Other Markup with powerful collections of tools for creating original art. Part V - From Web Page to Web Site Tricks of - Creating When you pay a Chapter 16 the Trade an HTML Toolbox graphic artist to create any piece of customized artwork — from a company - Setting Up Your charts or presentation templates — always be sure to get copies of the Chapter 17 logo to specializedOnline Presence artwork in - Creating a Great User Interface Chapter 18 digital format, preferably TIFF format. If you want to use this artwork online (or for any other digital purpose later on), Part VI - The Part of Tens you’ll get a much clearer image if you work from the original digital version instead19 scanning a print version. Also, be sure that you retain all rights to any version of the artwork — of - Ten Ways to Exterminate Web Bugs Chapter print, electronic, otherwise — so you don’t have to secure the artist’s permission to use it over and over Chapter 20 - Ten HTML Do’s and Don’ts again. Part VII - Appendixes Appendix A chapter really only scratches the surface of what you can do with Web images and how to use Tip This - HTML 4 Tags Appendix B - HTML Character Codes and site design. Although you can find out everything you need to them effectively as part of your page Appendix C -started using images in your pages, the information in this chapter is really only the tip of the know to get Glossary Index iceberg. If you want to delve deeper into the ins and outs of Web graphics, consider reading Web Design Cheat Sheet - HTML 4 For Dummies, 4th Editionhelp you transition from a simple user of graphics in Web For Dummies by Lisa Lopuck. This book can List of Figures pages to a master of Web images and Web design. List of Tables List of Listings Remember Copyright matters List of Sidebars Whereas you might be tempted to download an image from someone else’s Web site to use on your own, or simply make a link to that image, don’t. Just about everything on the Web is copyrighted these days, and that includes any original work you’ve done. Even if the owner of some text or an image doesn’t apply for a copyright, by the very nature of creating an original work, he or she owns it. Many sites, especially education, science, and museum sites, will allow you to borrow their images, but only if you properly attribute them on your page. The bottom line about copyright is if you violate it, you’re breaking the law — which is bad in so many
  • ways. Don’t ever represent someone else’s work as your own, or use someone else’s work without HTML 4 for permission, and you’ll beDummies, 4th Edition side of the copyright law. sure to stay on the right by Ed Tittel and Natanya Pitts ISBN:0764519956 John Wiley & Sons © 2003 (408 pages) Much of the Web’s content is protected by copy-right, but there are many images paid for with taxpayer money, or whose goal is to build a simple, text-orientedworkssite images owned and Whether your copyrights have long expired (think Web and managed by or one loaded with frames,are in the public domain and step-for your use. Before you the federal government) graphics, and animation, this free by-step book will put you on the right track. assume something is in the public domain, however, look closely on the site for a copyright notice, and be sure to send e-mail to the site’s owners if you are at all in doubt. PDImages.com (www.pdimages.com) is a wonderful resource for beginning the search for copyright-free images Table of Contents available in the public domain. HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • 4 for Chapter HTML Tittel and Natanya4th Edition 7: TopDummies, Pitts Page with Formatting Off Your ISBN:0764519956 by Ed Overview John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepIn This Chapter by-step book will put you on the right track. Using color in HTML Table of Contents HTML Working with page colors and backgrounds 4 For Dummies, 4th Edition Introduction Changing font display Part I - Meeting HTML in Its Natural Environment Chapter 1 The Least You Adding-text treatments Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web It’s amazing what a little color and text variation can do to liven up a Web page. You can turn a plain page Chapter 3 - Creating Your First HTML Page into a striking work of art with a few Part II - Getting Started with HTML carefully placed text treatments. Color can bring attention to important information-on your site, Your the right font can emphasize your text’s message. and HTML Documents Chapter 4 Structuring Chapter 5 - Linking to Online Resources HTML includes a healthy collection of elements, which you can use to control the background, colors, - Finding and Using Images fonts, and text sizes on your Web page. In this chapter, you learn how to spruce up your pages a bit by Chapterthe HTML formatting elements. using 7 - Top Off Your Page with Formatting Chapter 6 Part III - Taking HTML to the Next Level Chapter 8 Tip Because HTML is really a language for defining document structure, not a formatting language, its - HTML Tables built-in formatting capabilities are basic. After you master HTML formatting you may find you want to do Chapter 9 - HTML Frames even more with the look Chapter 10 - HTML Formsand feel of your pages. Cascading Style Sheets (CSS) is a style-definition language for HTML designed to let you do just that Part IV - Extending HTML with Other Technologies — take your Web page formatting to the next level. Chapter 11 Getting Stylish to use CSS to set page margins, attach background images to different blocks Chapter 11 -shows you how with CSS of text, create borders Scripting Chapter 12 - HTML and around your text, and more. Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML in HTML Defining Color 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 You use differentJohn Wiley & SonsHTML (408 pages) and attributes depending on where you want to make a combinations of © 2003 elements color change — in your entire document, in aatable cell, or to a chunk of site Even so, the notation that defines Whether your goal is to build simple, text-oriented Web text. colors in HTML isor one loaded with frames,which elements and attributes you associate with the color. the same, regardless of graphics, and animation, this stepby-step book will put you on the right track. HTML gives you two different ways to specify a color: Table of Contents choose from a limited list) By name (you HTML 4 For Dummies, 4th Edition By number (harder to remember, but you have many more options) Introduction Part I - Meeting HTML in Its Natural Environment Color names You Need to Know about HTML and the Web - The Least Chapter 1 Chapter 2 - HTML at Work on the Web The HTML - Creating Your First HTMLcolor names you can use to define colors in your pages: Aqua, Black, specification includes 16 Page Chapter 3 Blue, - Getting Started with Lime, Part II Fuchsia, Gray, Green,HTML Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, and Yellow. Because these namesStructuring Yourspecification, you can be confident that any and every browser can recognize are part of the HTML Documents Chapter 4 them and apply the correct color to your page display. Chapter 5 - Linking to Online Resources Chapter 6 Web If youand Using Images your browser displays these different colors, visit On The - Finding want to see how Chapter 7 - Top Off Your Page with Formatting www.htmlhelp.com/reference/html40/values.html#color. If you can, view this page on two or Part III - Takingcomputers toNext how the three different HTML to the see Level browser, operating system, graphics card, and monitor can subtly Chapter 8the-display. HTML Tables change Chapter 9 - HTML Frames If you’re looking for burnt Chapter 10 - HTML Forms umber, chartreuse, or salmon, you’re out of luck. A box of 64 crayons this list is not. Don’t - Extending artist with Other Technologies Part IV despair; the HTML in you won’t be quashed. The hexadecimal color notation system gives you what you need to use any color (evenwith CSS burnt umber) on your Web page. Chapter 11 - Getting Stylish Chapter 12 - HTML and Scripting Hexadecimal Multimedia Magic - Making color codes Chapter 13 Chapter 14 - Integrating a Database into Your HTML Every 15 Chaptercolor-can be defined as a mixture Markup green, and blue (RGB). Monitors display colors in RGB, and How HTML Relates to Other of red, Languages hexadecimal notation to Web Site Part V - From Web Pagegives you a way to convey a color’s RGB values to a Web browser. If you know a color’s hexadecimal Creating an HTML Toolbox code for short), you have all you need to use that color in your HTML code (often called a hex Chapter 16 page. Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating auses six characters — a combination of numbers and letters — to define the amount of Hexadecimal notation Great User Interface Part VI - The and blue in any color. red, green, Part of Tens Table 7-1 shows the hexadecimal equivalents for each of the 16 color Chapter 19 - Ten Ways to Exterminate Web Bugs these. names. Every color out there has a hex code like Chapter 20 - Ten HTML Do’s and Don’ts Part VII7-1: The 16 Color Names Table - Appendixes with Their Hex Codes Appendix A - HTML 4 Tags Color Hex Color Appendix B - HTML Character Codes Name Hex Code Color Name Hex Code Color Name Hex Code Name Code Appendix C - Glossary Index Aqua Gray #808080 Navy #000080 Silver #C0C0C0 #00FFFF Cheat Sheet - HTML 4 For Dummies, 4th Edition Black List of Figures List of Tables # 000000 List of Listings #0000FF Blue List of Sidebars Fuchsia #FF00FF Green #008000 Olive #808000 Teal #008080 Lime #00FF00 Purple #800080 White #FFFFFF Maroon #800000 Red #FF0000 Yellow #FFFF00 Tip Notice the pound sign (#) before each of the six-digit hex codes. When you use hexadecimal code to define a color, you should always precede it with a pound sign. So, this HTML uses a color name to specify that some text in a paragraph should be blue: <p> Some of the text <font color="blue">in this paragraph is blue.</font></p>
  • This HTML uses a hex code to do the same thing: HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 <p> Some of the Wiley &<font 2003 (408 pages) John text Sons © color="#0000FF">in this paragraph is blue.</font></p> Whether Remember You find out your goal is to build a simple, text-oriented Web site apply color to different parts of all about which elements and attributes you use to or one loaded with frames, graphics, and animation, this stepyour HTML page by-step book will put you on the right track. later in the chapter. Finding out any color’s hex code Table of Contents HTML 4 For Dummies, 4th Editionyour magic wand and come up with the hex code for any color. But that doesn’t Of course, you can’t just wave Introduction you can’t find out through less magical means. Color converters follow a precise formula that mean that Part I - Meeting HTML in Its Naturalnotation into hexadecimal changes a color’s standard RGB Environment notation. Because you have better things to do with Chapter 1 than compute hex codes,Knowhave several and the Webfinding out the code for your color of choice, your time - The Least You Need to you about HTML options for Chapter 2 which requireWork to use a calculator: - HTML at you on the Web none of Chapter 3 - Creating Your First HTML Page On the Web: Two good sources Part II - Getting Started with HTML for hexadecimal color charts are www. hypersolutions.org/pages/rgbhex.html and www.fastboot.com/color_chart.html. Chapter 4 - Structuring Your HTML Documents You - Linking to Online Resources Chapter 5 simply find a color you like, and type the hex code listed next to it into your HTML. Chapter 6 Using - Finding and Using Images know the RGB percentages for a particular color, you can plug them a converter: If you already Chapter 7 an -online converter at with Formatting Top Off Your Page http://www.univox.com/home/support/rgb2hex.htmlto get the into Part III - Taking HTML to the Next Level hexadecimal equivalent. For example, the RGB percentages for nice sky blue are 159, 220, and 223. Plug Chapter 8 into the converter, and you get the equivalent hex code #9FDCDF. those - HTML Tables Chapter 9 - HTML Frames Using image-editing Chapter 10 - HTML Forms software: Many image-editing applications, such as Adobe Photoshop or Jasc Paint Shop Pro, display Other Technologies Part IV - Extending HTML withthe hexadecimal notation for any color. Even Microsoft Word’s color picker shows you hex Getting Stylish with CSS Chapter 11 - codes for colors in an image. If you have an image you like that you want to use as a color source for your HTML and Scripting Chapter 12 - Web page, open the image in your favorite editor and find out what the colors’ hex codes are. Chapter 13 - Making Multimedia Magic Technical Stuff Unlike the more familiar decimal system that uses base-ten numbers to represent all - Integrating a Database possible numbers, the hexadecimalinto Youruses base 16. If you want to know more about the hexadecimal system HTML Chapter 15 find outHTML to convert numbers fromLanguagesto hexadecimal, visit - How how Relates to Other Markup decimal system or Part V - From Web Page to Web Site http://mathforum.org/library/drmath/view/55830.html . Chapter 14 Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Backgrounds Setting Colors and Dummies, 4th Editionfor Your Entire Page by Ed Tittel and Natanya Pitts ISBN:0764519956 The<body> element containsSonsguts of(408 pages) page, so when you want attributes (namely colors John Wiley & the © 2003 your Web and backgrounds) to affect your entire Web page, the text-oriented Web is the element you need to deal Whether your goal is to build a simple, <body> element site with. You can use the <body> with frames, graphics, do the following: stepor one loaded element attributes to and animation, this by-step book will put you on the right track. Define the text color for your entire Web page. Table of Contents Specify the different colors for links in your Web page. HTML 4 For Dummies, 4th Edition Set a background color for your Web page. Introduction Part I - Meeting HTML in Its Natural Environment Attach a background image to your Web page. Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Changing textYour First HTML Page color - Creating Chapter 3 Part II - Getting Started with HTML By default, most Web browsers display the text on a Web page in black. Some users may change their - Structuring Your HTML browser preferences to display text Documents color, but most of the time, you can expect users to see in another Chaptertext against a white background on your page unless you specify otherwise. 5 - Linking to Online Resources black Chapter 4 Chapter 6 - Finding and Using Images You use - Top Off Your Page with Formatting Chapter 7 the text attribute with either a color name or hexadecimal value in the <body> element to set the color for the text to the Next Level Part III - Taking HTMLon your Web page. The following markup uses one of the 16 color names to set the page text - HTML Tables Chapter 8 color to white: Chapter 9 - HTML Frames Chapter 10 - HTML Forms <body text="white"> Part IV - Extending HTML with Other Technologies This code - Getting Stylish with CSS Chapter 11 uses the hex code to do the same: Chapter 12 - HTML and Scripting <body text="#FFFFFF> Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Remember Many Web browsers allow users to define their own color settings and override yours. You can expect about 90 percent or so of your users to see the colors you’ve defined and be content with Chapter 16 - Creating an HTML Toolbox them, but the other 10 percent or so will want their color choices to override yours. Part V - From Web Page to Web Site Chapter 17 - Setting Up Your Online Presence Chapter 18 You should coordinate your text, link, and background colors so they all work well together. If Warning - Creating a Great User Interface Part VI - The Part of Tens you set your background text to black but forget to set your text color to a lighter color, your text won’t show Chapterthe page. Conversely, light text Web link colors can be lost on a white page. up on 19 - Ten Ways to Exterminate and Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Changing link colors Appendix A - HTML 4 Tags Appendixprobably noticed when you visit a Web page, click a link, view the linked document, and return to You’ve B - HTML Character Codes Appendix C page, that the link may be a different color than it was before you clicked it. the linking - Glossary Index The Sheet - HTML color is your Web browser’s Cheat change in link 4 For Dummies, 4th Edition way of giving you a visual cue of which links you’ve clicked recently. Each browser has default settings for the different colors associated with each link state. For example, both Internet Explorer and Netscape use some shade of bright blue to highlight links you’ve List of Tables haven’t yet visited. You can use the following attributes with the <body> element to control those colors List of Listings for your page. List of Figures List of Sidebars Links come in three states, and you can modify each of them using an attribute: Link: The user hasn’t clicked the link or recently visited the resource it points to. The link attribute defines this link’s color. Active link: The user just clicked the link, but the browser hasn’t opened the page yet. Links are active for a second or two (maybe a few more on a slower computer and Internet connection) before
  • the browser displays the linked document. Define the color of this kind of link with the alink attribute. HTML 4 for Dummies, 4th Edition ISBN:0764519956 Visited link:by Eduser has recently visited this link. The vlink attribute defines this link’s color. The Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) The following HTML markup snippet makes allsimple, text-oriented silver, all the active links teal, and all Whether your goal is to build a the links on a page Web site the visited links blue: loaded with frames, graphics, and animation, this stepor one by-step book will put you on the right track. <body link="silver" alink="teal" vlink="blue"> Table of Contents HTML 4 For Dummies, 4th Edition This next HTML line uses hexadecimal codes to define the same color settings: Introduction Part I - Meeting HTML in Its Natural Environment <body link="#C0C0C0" alink="#008080" vlink="#0000FF"> Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 may have noticed that the links on some Web sites don’t seem to be underlined. All browsers Tip You - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page display hyperlinks as underlined by default, and HTML doesn’t provide an attribute or other method for Part II - Getting underlining. The removal turning off link Started with HTML of lines under links isn’t magic; style sheets give you more control Chapter 4 display and behaviorHTML these HTML attributes do. Turn to Chapter 11 to learn more about style over link - Structuring Your than Documents Chapter 5 - Linking to Online Resources sheets. Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page Background colors with Formatting Part III - Taking HTML to the Next Level Chapter 8you-can control text and link color, you can control the background color on your page. Add the HTML Tables Just as Chapter 9 attribute Frames bgcolor - HTML to the <body> element to set the background color for the page. This HTML sets the Chapter 10 - color to black: background HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS <body bgcolor="black"> Chapter 12 - HTML and Scripting This HTML Making hexadecimal code to do the same: Chapter 13 -uses the Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages <body bgcolor="#000000"> Part V - From Web Page to Web Site Chapter 16 HTML Toolbox BringingCreatingUpthe colors together all ofanYour Online Presence - Setting Chapter 17 Chapter 18 - in Listinga Great User Interface color-related <body> attributes to create a page with a black The markup Creating 7-1 combines all the Part VI - The Part of Tens silver background, white text, Chapter 19 links, teal active links, and blue visited links: - Ten Ways to Exterminate Web Bugs Listing 7-1: Using<body> Element Chapter 20 - Ten HTML Do’s and Don’ts Attributes to Control a Page’s Colors Part VII - Appendixes Appendix A - HTML 4 Tags <html> Appendix B - HTML Character Codes <head> Appendix C - Glossary <title>Page Colors</title> Index </head> <body text="white" link="silver" Cheat Sheet - HTML 4 For Dummies, 4th Edition alink="teal" vlink="blue" bgcolor="black"> <p>The List of Figures attributes in the document body element define the colors the browser uses to display text on the page.</p> List of Tables <p>This List of Listings <a href="home.html">link</a> is silver before it is clicked, teal when List of Sidebars it is clicked, and blue after it is clicked.</p> </body> </html> Figure 7-1 shows how a browser displays this HTML. You can’t actually see the colors in this figure, but you should get a good idea of the effect these attributes will have.
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction 7-1: Use the <body> element attributes to define the colors on your Web page. Figure Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 HTML at Work on the Adding -a background WebPage graphic - Creating Your First HTML Chapter 3 Part II - Getting Started simple background In addition to setting a with HTML color for your page, you can also specify a graphic to act as a Chapter 4 - Structuring Your HTML Documents background image for your page using the background attribute with the <body> element. This HTML Chapter 5 - Linking as the background assigns back. gif to Online Resources image for the page: Chapter 6 - Finding and Using Images Chapter 7 background="back.gif"> - Top Off Your Page with Formatting <body Part III - Taking HTML to the Next Level Chapter 8 A background image can be as small or as large as you like. Web browsers automatically repeat (or tile) - HTML Tables the image - HTML Frames Chapter 9 across and down the page to fill in the background. Figure 7-2 shows the background image back.gif, HTML Forms Chapter 10 - which is a 2-inch-by-2-inch square: Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition Figure 7-2: A back-ground image can be any size; the browser tiles it to fill in the entire page background. List of Figures List of Tables List of Listings Tip A browser has to download any background image before it can display it behind your page. Keep List of background images small. A 2-inch by 2-inch graphic will load much faster than a 6-inch by 6-inch your Sidebars one, and the effect will be the same. When you add the background attribute to the <body> element from Listing 7-1, the complete element with all its attributes is: <body text="white" link="silver" alink="teal" vlink="blue" bgcolor="black" background="back.gif">
  • Figure 7-3 showsHTMLthefor Dummies, the small back.gif image to fill the entire page. how 4 browser tiles 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Figure 7-3: A Web page with both colors and a background image defined. Chapter 3 Notice that - Creating Your First HTML Page the HTML for the <body> element includes the bgcolor attribute even though the Part II - Gettingattribute with HTML background Started defines an image background for the page. A background image always displays Chapter 4of a background Your HTML Documents - Structuring color, unless a user has turned off the image display settings in his or her instead Chapter 5 browser. - Linking to Online Resources Chapter 6 - Finding and Using Images Tip If a - Top can’t display with Formatting Chapter 7 browser Off Your Page images, it displays the background color. Be sure to define a background color as Taking HTML tobackground image, especially if your text is light and you’re counting on the Part III - a fallback to a the Next Level background to make the text readable. Chapter 8 - HTML Tables Chapter 9 - HTML Frames Warning Just as you have to coordinate text colors and background colors, you have to coordinate text - HTML Forms colors and background images. In Figure 7-4, the background image is light, as are the text and link Part IV - Extending HTML with Other Technologies colors, so the text is unreadable. Chapter 10 Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 -7-4: Be sure to coordinate your text colors and background colors, or your page may be Figure Ten HTML Do’s and Don’ts Part VII - Appendixes unreadable. Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Faces, Colors, Working with Font Dummies, 4th Edition and Sizes by Ed Tittel and Natanya Pitts ISBN:0764519956 All the attributes that work with the © 2003 (408element to set color and backgrounds for your page apply to John Wiley & Sons <body> pages) the entire document. Sometimes you to build a simple, text-orientedother site formatting to specific parts of Whether your goal is may want to apply color and Web text your page instead of the entire with frames, graphics, and element (both literally and figuratively). or one loaded thing. Enter the <font> animation, this stepby-step book will put you on the right track. You can use the <font> element and its related attributes to control three different aspects of a section of text on your page: Table of Contents HTML Font face 4 For Dummies, 4th Edition Introduction Font color Part I - Meeting HTML in Its Natural Environment Chapter 1 size Font - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Defining the font face Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Every browser has built-in settings that specify which font it uses to display various elements such as Chapter 5 Linking to Online Resources paragraphs-and headings. Most browsers use some variety of Times, such as Times New Roman, or a Chapter 6 -font to display almost all text, but when you combine the <font> element with the face similar serif Finding and Using Images Chapter 7 youTop Off Your Page with Formatting attribute, - can change that. Part III - Taking HTML to the Next Level This HTML -markup specifies that the first paragraph on the page should display in Arial, and the second Chapter 8 HTML Tables paragraph should display in Courier: Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies <p> <font - Getting Stylish with CSS Chapter 11 face="Arial">This text is displayed in Arial.</font> </p> Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic <p> Chapter 14 - Integrating a Database into Your HTML <font - How HTML Relates to Other Markup Languages Chapter 15 face="Courier">This text is displayed in Courier.</font> <p> Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Figure 7-5 shows how a browser renders this HTML. Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List ofFigure 7-5: Use the <font> element and the face attribute to change the font face for sections of Figures List oftext on the page. Tables List of Listings If of Sidebars Listyou’re wondering about the attribute that changes the font face of a whole HTML page at once, we’ve got bad news for you. There is no such attribute. HTML doesn’t include one, so if you want to set the font face for the entire page to something other than the browser default, you have to use the <font> element andface attribute on every block element. Tip Refer back to Chapter 4 to find out more about the difference between block and inline elements, and how you use them together. The<font> element is an inline element, so you can’t use a <font> tag at the beginning of the page
  • and close it at the end and get predictable results across several browsers. It may be tedious to set the HTML 4 for Dummies, your results <font> tag on every block element, but4th Edition will be more consistent across browsers. by Ed Tittel and Natanya Pitts ISBN:0764519956 John Wiley & Sons © in Chapter 16) Tip A good HTML editor (discussed2003 (408 pages) can make the process of applying a font face to each block element much easier, or goal is to use aastyle sheet (discussed in Chapter 11) to define a font face Whether your you can build simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepfor your entire document. by-step book will put you on the right track. Applying font color to pieces of text Table of Contents You 4 For Dummies, 4th Edition HTML can apply color to any chunk of text in your document using the <font> element and the color attribute. This HTML changes the font color twice in the same sentence, once to silver and once to white: Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 can change <font to Know about HTML and the Web <p>You - The Least You Need color="silver">font color</font> in the middle of <font color="white">paragraphs</font> if you like.</p> Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Figure Getting Started with HTML Part II - 7-6 shows how this affects the text display in a browser. Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Figure 7-6: Use the <font> element and the color attribute to change the font color for sections of - Making Multimedia Magic text on the page. Chapter 13 Chapter 14 - Integrating a Database into Your HTML Chapter 15 Notice HTML Relates to Other Markup Languages page at all, because the page background is Warning - How that the white text doesn’t show up on the Part V - From Web Page to Web Site the browser’s default white. Use the <font> tag with the color attribute carefully, or your page may be Chapter 16 - Creating an HTML Toolbox unreadable. Chapter 17 - Setting Up Your Online Presence Chapter 18 Creating a Setting -the fontGreat User Interface size Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs element to change the appearance of selected text is the The last attribute you can use with the <font> Chapterattribute. Most browsers support sizes 1 through 7, with 1 being the smallest and 7 being the largest. size 20 - Ten HTML Do’s and Don’ts Part VII - Appendixeseach This HTML applies size to a different line of text in a paragraph. Appendix A - HTML 4 Tags Appendix B - HTML Character Codes <p> Appendix C size="1">Font size 1</font> <br> <font - Glossary Index <font size="2">Font size 2</font> <br> Cheat Sheet size="3">Font size 3</font> <br> <font - HTML 4 For Dummies, 4th Edition List of Figures <font size="4">Font size 4</font> <br> List of Tablessize="5">Font size 5</font> <br> <font <font size="6">Font size 6</font> <br> List of Listings <font size="7">Font size 7</font> List of Sidebars </p> Figure 7-7 shows how a browser displays these different font sizes:
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Figure -7-7: Use the <font> element and HTML and the Web to change the font size for sections of Chapter 1 The Least You Need to Know about the size attribute text the page. Chapter 2 on - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page By default, most browsers display text in size 3. In addition to simply setting the font size number that you want to use as the value for the size attribute, you can also use positive and negative numbers to define Chapter 4 - Structuring Your HTML font sizes relative to the default text Documents size. For example, this HTML sets the size of one paragraph to one Chapter 5 size above - Linking to size and a second paragraph to one size following the default size. the default Online Resources Part II - Getting Started with HTML Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting <p> <font size="-1">One size smaller than the default</font><br> Chapter 8 - HTML The default Tables size <br> font Chapter 9 - HTML Frames <font size="+1">One size larger than the default</font> Chapter 10 - HTML Forms </p> Part III - Taking HTML to the Next Level Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS are called relative font sizes. Conversely, font sizes that just use a Remember Font sizes set this way number to - HTML and Scripting Chapter 12 define size are called absolute font sizes because they specifically define a font size instead of using relative measurement. Magic Chaptera13 - Making Multimedia Figure 7-8 shows how a browser displays the relative font sizes. Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Figure 7-8: Relative font sizes use positive and negative numbers to set font size relative to the Appendix B - HTML Character Codes browser’s default font size. Appendix C - Glossary Index Remember Just because you can do something . . . Cheat Sheet - HTML 4 For Dummies, 4th Edition List ofThe<font> element and its three attributes — face, color, and size, — give you a lot of power Figures List ofover the way your page displays. However, just because you can do something (for example, use 50 Tables colors, varying font sizes and faces, and add wild backgrounds) doesn’t necessarily mean you should. When you use formatting carefully and in moderation, you can make your content have more impact List of Sidebars and even enhance its meaning. If you use formatting just because you can, you may well drive users from your page before they even read a word of what it says. If you think of colors, backgrounds, font sizes, and other formatting tools as ways to augment your page, you’ll be on the right track. Chapter 18 includes other tips on creating a good experience for your site’s visitors. List of Listings If you assume that the browser’s default font size is 3, then a font size of -1 is equal to a size of 2, and a
  • font size of +1 is equal to a size of 4. Does the browser display size 2 and -1 as the same thing? What about size 3 and HTML 4 for size? Or +1 4th Edition the default Dummies, and 4? Here’s some HTML that uses these to define size: by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 <p> Whether your goal is to build a simple, text-oriented Web site <font size="-1">One size smaller than the default</font><br> or one loaded with frames, graphics, and animation, this step<font size="2">Font will put 2</font><br> by-step book size you on the right track. The default font size <br> <font size="3">Font size 3</font><br> Table of Contents <font size="+1">One size larger than the default</font><br> HTML 4 For Dummies, 4th Edition <font size="4">Font size 4</font> Introduction </p> Part I - Meeting HTML in Its Natural Environment Figure 7-9 showsLeast the browser Know about HTML and the Web Chapter 1 - The how You Need to interprets these size specifications. Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 -7-9: You can often get the same results using relative font sizes or absolute font sizes. Figure HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11which font size scheme do you use? Absolute font sizes are easier to use, but relative font sizes Tip So, - Getting Stylish with CSS are more - HTML and Scripting Chapter 12 flexible. When a user increases or decreases his or her browser’s default font size, relative font sizes grow - Making Multimedia Magic Chapter 13 and shrink as well. Some browsers expand and shrink both absolute and relative font sizes as the default - Integrating a Database into of them do. Chapter 14 font size changes, but not allYour HTML For maximum flexibility, use relative font sizes. You can also - CSS for even greater control over your font Chapter 15use How HTML Relates to Other Markup Languagessizes. Turn to Chapter 11 for more information. Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 and Other Text Treatments Boldface, Italics,for Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 Text color and font changes& Sons © 2003 (408 pages) John Wiley are only one way to emphasize bits of text or make them stand out. In addition to the <font> element, HTMLgoal is to build a simple, text-oriented Web site to apply treatments such as Whether your has a nice collection of elements you can use boldface, italics, underlining, and more to the text on and animation, this treatments can be broken into two or one loaded with frames, graphics, your page. These stepby-step book will put you on the right track. categories: Style elements: Much like the <font> element, these elements simply apply formatting to text on the Table of Contents describe anything about the text (such as the text is in italics because it is a book title). page but don't HTML The style elements include: 4 For Dummies, 4th Edition Introduction <b>: boldface text Part I - Meeting HTML in Its Natural Environment Chapter 1 Chapter 2 - The Least You Need to Know about HTML and the Web <big>: big text, usually one size larger than the text around it - HTML at Work on the Web Chapter 3 <i>:italicized text - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 <s>: strike-through text Documents - Structuring Your HTML Chapter 5 Chapter 6 - Linking to Online Resources <small>: small text, usually one size smaller than the text around it - Finding and Using Images Chapter 7 <strike>: strike-throughFormatting - Top Off Your Page with text Part III - Taking HTML to the Next Level Chapter 8 <tt>: teletype text like a typewriter might create - HTML Tables Chapter 9 Chapter 10 - HTML Frames <u>: underlined text - HTML Forms Part IV - Extending elements: Other Technologies Phrase HTML with These elements provide more information about some text in your page Chapter 11 (such as identifying it as computer code) and the browser formats the text accordingly (text - Getting Stylish with CSS Chapter 12 marked as code is displayed in a monospaced font). - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 <abbr>: an abbreviation into Your HTML - Integrating a Database Chapter 15 - How HTML Relates to Other Markup Languages <acronym>: an acronym Part V - From Web Page to Web Site Chapter 16 <cite>: a citation Toolbox - Creating an HTML Chapter 17 - Setting Up Your Online Presence Chapter 18 <code>: computer User Interface - Creating a Great code Part VI - The Part of Tens Chapter 19 <del>: deleted text - Ten Ways to Exterminate Web Bugs Chapter 20 <dfn>:HTML Do’s termDon’ts - Ten a defined and Part VII - Appendixes Appendix A <em>: emphasized text - HTML 4 Tags Appendix B - HTML Character Codes <ins>: inserted text Appendix C - Glossary Index <kbd>: text to be input on a keyboard or other device Cheat Sheet - HTML 4 For Dummies, 4th Edition <samp>: sample output List of Figures List of Tables <strong>: strongly emphasized text List of Listings List of Sidebars <var>: a variable The markup in Listing 7-2 shows all these elements in use in an HTML page. Notice that they are all inline elements, which means you need to use them within a block element like a paragraph, heading, or list item: Listing 7-2: Text Treatments at Work <h1>Style elements</h1>
  • <p><b>boldface text</b><br> HTML 4 for Dummies, 4th Edition <big>big text</big><br> ISBN:0764519956 by Ed text</i><br> <i>italicized Tittel and Natanya Pitts John Wiley &text</s><br> Sons © 2003 (408 pages) <s>strike-through Whether your goal is to build <small>small text</small><br> a simple, text-oriented Web site or one loaded with text</strike><br> <strike>strike-through frames, graphics, and animation, this stepby-step book will put you on the right track. <tt>teletype text</tt><br> <u>underlined text</u> </p> Table of Contents HTML 4 For Dummies, 4th Edition <h1>Phrase elements</h1> Introduction <p><abbr>an abbreviation</abbr><br> Part I - Meeting HTML in Its Natural Environment <acronym>an acronym</acronym><br> and the Web Chapter 1 - The Least You Need to Know about HTML <cite>a citation</cite><br> - HTML at Work on the Web <code>computer code</code><br> Chapter 3 - Creating Your First HTML Page <del>deleted text</del><br> Part II - Getting Started with HTML <dfn>a defined term</dfn><br> Chapter 4 - Structuring Your HTML Documents <em>emphasized text</em><br> Chapter 5 - Linking to Online Resources <ins>inserted text</ins><br> Chapter 6 - Finding <kbd>text toand Using Images be input</kbd><br> Chapter 7 - Top Off output</samp><br> <samp>sampleYour Page with Formatting Part III - Taking HTML to the Next Level <strong>strongly emphasized text</strong><br> Chapter 8 - variable</var> <var>a HTML Tables Chapter 9 - HTML Frames </p> Chapter 2 Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Figure 7-10 HTML how a browser interprets these different elements. Notice that many of them look the Chapter 12 - shows and Scripting same, 13 - Making Multimedia Magic Chapter even though the elements are different. Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 7-10: Many of the font style and phrase elements display the same way in a Web browser.
  • HTML 4 Right Text Elements for the Job Deciding on the for Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 So why does text John Wiley & Sons © 2003 (408look the same as that described with <b>? Bottom line: You described with <strong> pages) have only so many ways to format text. Your browser really has only bold, italics, underline, and Whether your goal is to build a simple, text-oriented Web site strikethrough to work with. Given that limitation, which elements do you step- apply text treatments to your or one loaded with frames, graphics, and animation, this use to text? After all, it'sby-step to type <b> than <strong>. track. easier book will put you on the right If you're practical about it, you have all the elements you need to format your text in the style elements. Table of Contents However, when you use phrase elements, you provide additional information about the text in your HTML 4 For Dummies, mayEdition in handy one day when browsers have a wider array of formatting document, and that 4th come Introduction capabilities. Part I - Meeting HTML in Its Natural Environment Remember The Least You Need to Know currently looks the same as struck-through text, but eventually you Chapter 1 - For example, deleted text about HTML and the Web may be Chapter 2able HTML at Work on the Web to show and hide deleted text. HTML purists tend to believe you - to toggle a browser's view should always be as accurate in your Page Chapter 3 - Creating Your First HTML markup as possible. Part II - Getting Started with HTML In the end, the choice is yours. If you take the time to accurately describe your text, it may pay off in the - Structuring Your HTML future. On the flip side, you can useDocuments basic formatting elements to create the display you're looking for - and Chapter 5serve your needs as well. - Linking to Online Resources that will Chapter 4 Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, Part III: Takingand Natanya4th Edition Next Level HTMLPitts the to ISBN:0764519956 by Ed Tittel John Wiley & Sons © 2003 (408 pages) In This Part: Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Chapter 8: HTML Tables Table of Contents HTML Chapter 9: HTML Frames 4 For Dummies, 4th Edition Introduction Chapter 10: HTML Forms Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web In this part . . .Your First HTML Page - Creating Chapter 3 Part II - Getting Started with HTML Part III is where you move from basic, simple HTML markup to more complex HTML markup concepts - Structuring Your HTML Documents and structures. Discover the wonder and majesty of HTML tables, which you can use to organize and Chapter 5 - Linking to Online Resources manage all kinds of text and graphical data. This part explains HTML frames, which let you break up Web Chapter 6 - Finding and Using Images pages into logical areas and manage display separately for each such area — often for stunning visual Chapter 7 - Top effects. You also Off Your Page usingFormatting get a look at with HTML forms to organize, format, solicit, and handle user input on your Part III - Taking HTML to the Next Level Web pages — techniques that can turn your Web pages into a tool for two-way communications with your Chapter The - HTML Tables part help you kick your Web pages up a notch! users. 8 chapters in this Chapter 4 Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • 4 for Dummies, Chapter HTML Tittel and Natanya4th Edition 8: HTML Tables by Ed Pitts Overview ISBN:0764519956 John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepIn This Chapter by-step book will put you on the right track. Understanding table benefits Table of Contents HTML Mapping a table 4th Edition 4 For Dummies, design Introduction Building simple tables Part I - Meeting HTML in Its Natural Environment Chapter 1 - complex You Need to Know Creating The Least table structures about HTML and the Web Chapter 2 - HTML at Work on the Web Table - Creating Your First Chapter 3 tips and techniques HTML Page Part II - Getting Started with HTML Most Web pages contain at least one table — some even nest tables within tables. Traditionally, tables - Structuring Your HTML Documents display data; HTML tables, however, are more commonly used to control layout. You can arrange Chapter 5 - Linking to Online Resources everything from text to images on your pages, efficiently and attractively, in HTML tables. Chapter 4 Chapter 6 - Finding and Using Images Chapter 7 - provides you with step-by-step instructions for creating and using HTML tables. In addition, a This chapter Top Off Your Page with Formatting Part of our favorite tried-and-true tips and list III - Taking HTML to the Next Level Chapter 8 Chapter 9 - HTML Frames Chapter 10 techniques can help make the whole process quicker. - HTML Tables - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th What Tables Can Do for You Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 Traditionally, tables displayed Sons © 2003 (408 pages) easy to read and understand. HTML changed all that. John Wiley & data in a format that's You may not realize it, butyour goal is to build a simple, text-oriented Web site Amazon, eBay, Yahoo!, and Whether tables are used in a lot of Web sites. Sites such as Google all use tables toloaded with frames, graphics, and animation, this step- Invisible tables dominate the or one display their content; but you can't see these tables. Web. The idea isby-step book will to arrange the right track.Web page, and then be sure to turn the borders this: Use tables put you on items on your off so the user cannot see the table. Table of Contents nature, Web pages start out linear; tables allow you to step out of that linear box and put Remember By HTML and images in the most interesting places in your layout. text 4 For Dummies, 4th Edition Introduction You - Meeting HTML in Its Natural Environment Part I can use tables in a couple of ways: Chapter 1 - The Least You Need to Know about HTML and the Web Traditional (ho-hum) method: You can define table or individual cell widths, producing a table that Chapter 2 - HTML at Work on the Web won't resize when users resize their browser's windows. Some designers prefer to use tables for the Chapter 3 - Creating Your First HTML Page traditional purpose - to present data - a straightforward, balanced approach that's easily tackled. Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML method: You can define table and cell width using percentages, Presentation-focused (wow) Documents Chapter 5 - Linking the table to resize thereby allowingto Online Resources when users resize their browser windows. Most designers are Chapter 6 more creative,Using Images with their tables. doing - Finding and complex tricks Chapter 7 - Top Off Your Page with Formatting Although this chapter covers all aspects Part III - Taking HTML to the Next Level of HTML tables, it focuses on layout tips and techniques. Chapter 8 Using tables HTML Tables result in rather complex structures, as seen in Figure 8-1. (Some other for layout can Chapter 9 of complex tables are viewable at www.amazon.com and www.yahoo.com.) examples - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List ofFigure 8-1: This Web page uses three different tables for layout. Each table is numbered. Tables List of Listings Tip After you List of Sidebars open these Web pages in your Web browser, take a look at each one's HTML source code (try ViewÍSource from your menu bar). Observe how complex the markup is, and mark ye well when the markup looks haphazardly arranged (alas, if only they'd asked us . . .). Equally effective are the Web pages that use the less-is-more approach. Some design models keep the interface simple - therefore easy to use. Figure 8-2 illustrates the simple approach.
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 Finding Web page uses Figure -8-2: Thisand Using Imagesone simple table with three cells for its layout. Chapter 7 - Top Off Your Page with Formatting For another example of a Web site that Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 uses a simple table to arrange navigation, visit www.google.com. - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, Introducing Table Basics 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 To understand the complexity Sons © 2003 (408 pages) must first understand their basic elements John Wiley & of HTML tables, you Whether your goal is to build a simple, text-oriented Web site Borders:Everyone loaded with frames, graphics, and animation, thisthat make up a rectangle. or basic table must always have exactlyfour borders stepby-step book will put you on the right track. Cells: These are the individual squares within the borders of a table. For example, Table of Contents even though the first table in Figure 8-3 has nine cells, it has four borders. HTML 4 For Dummies, 4th Edition Cell span: Within that four-walled structure, you can delete or add cell walls (as shown in the second table in Figure 8-3). When you delete cell walls, you require a cell to span multiple rows or columns Part I - Meeting HTML in Its Natural Environment — and that’s exactly what makes a table a flexible tool for layout. Introduction Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Figure 8-3: After you delete a few cell walls, an HTML table might not look like much of a table at all, - Integrating a Database into Your HTML but it’s perfect for laying out Web page elements. Chapter 14 Chapter 15 - How HTML Relates to Other Markup Languages Part V Cell spanning and cell width are Tip - From Web Page to Web Site different things. When you span cells, you add or delete cell walls Chapter 16 - Creating an HTML Toolbox the width of a cell, you just adjust the width of that cell. (merge cells), and when you increase Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML for Dummies, 4th Edition Sketching Your4Table by Ed Tittel and Natanya Pitts ISBN:0764519956 Tables can become complex, Sons they needpages) carefully planned. Mapping to the nearest pixel can get John Wiley & and © 2003 (408 to be rather tedious, and it could take several build a simple,it’s an essential step in designing a well-laid-out Whether your goal is to attempts, but text-oriented Web site page. or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Start with a general idea and slowly plan your layout until it becomes more solid and specific. Follow these basic steps: Table of Contents 1. Grab (believe it or not) a sheet of paper and a pencil so that you can sketch out your ideas. HTML 4 For Dummies, 4th Edition Introduction sure that you have a general idea of where you want everything to go on your page. Make Part I - Meeting HTML in Its Natural Environment 2. 1 - The Least You Need to Know about page and come Chapter Evaluate what to include in your WebHTML and the Webto a firmer decision on the layout. Chapter 2 - HTML at Work on the Web This way, you can begin to determine how many columns and rows you’ll need, the width of the - Creating Your First HTML Page table and cells, and whether to make any cells span rows or columns. Here are some things to - Getting Started with HTML decide: Chapter 3 Part II Chapter 4 - Structuring Your HTML Documents Chapter 5 Chapter 6 -Whether the table will be centered, left aligned, or right aligned. Linking to Online Resources - Finding and Using Images Chapter 7 -WhetherYour Page with Formatting Top Off you want to include hyperlinks, and where you might want to include them. The image in to the Next Level Part III - Taking HTML the top of the table in Chapter 8 Figure 8-2 provides a hyperlink to another Web site, and that image Tables pixels by 94 pixels. is 294 - HTML Chapter 9 - HTML Frames 3. Figure out the pixel dimensions of any images you want to use, for example: Chapter 10 - HTML Forms Part IV - Extending HTML how site navigation tools Where and with Other Technologies should appear. In Figure 8-2, to the right of the logo, Chapter 11 -there’s aStylish images used for navigation, and the greatest width value is 190 pixels. Don’t be Getting list of with CSS Chapter 12 -concerned Scripting height of these images; you don’t have to define cell or table height. HTML and with the Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Where the main logo should go, and what size it should be. For example, in Figure 8-2, the logo is the main focal point. Its dimensions are 400 pixels wide by 302 pixels tall. Part V - From Web Pagepoint is to make Tip The to Web Site Chapter 16 sure that the table fills a browser window nicely without forcing the Chapter 17 -user to scroll left and right to see everything. We think it’s best to let the contents of your table Creating an HTML Toolbox -determine the cell height; image height isn’t as important because users are used to scrolling Setting Up Your Online Presence Chapter 18 -up and down Web pages but may get frustrated if they have to scroll left and right to read Creating a Great User Interface Part VI - The Part of Tens content. Chapter 19 - Ten Ways to Exterminate Web Bugs If you 20 - a simple Do’s and Don’ts Chapteropt for Ten HTMLapproach, each main element (logo, hyperlink image, and navigation) will have its own cell. In Figure 8-2, Part VII - Appendixes that means only three cells. If you have only a few cells, you’ll probably have to span the cells so the Tags contents fill the width of your page. Appendix A - HTML 4 Appendix B - HTML complexity of your design, you may need several rows. A simple, clean design, such as Depending on the Character Codes Appendix in Figure 8-2, requires only two rows. The first row should span two cells; the second row should the one C - Glossary Index contain two cells. Cheat Sheet - HTML 4 For Dummies, 4th Edition SeeFigure 8-4 for a look at the final sketch. List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Figure -8-4: Always start by sketching the table dimensions, even before opening text editor. Chapter 5 Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 9 - HTML Frames Chapter 10 - HTML Forms Tip The author of our samplewith Formatting images in place of text for the navigational elements; Web site uses Chapter 7 - Top Off Your Page however, for usability to the Next Level text in place of images when possible. Even so, if you want reasons, try using Part III - Taking HTML complete control of the font(s) in which your text appears, you may have to use images instead — and Chapter 8 - HTML Tables create an image of the text written in your chosen font. Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Constructing Basic Tables Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 After you complete a sketch& Sons © 2003 pretty solid indication of the page and table layout, open your John Wiley that gives a (408 pages) HTML editor and Whether your goal is to build table. The building blocks for that framework are the three create the skeleton of your a simple, text-oriented Web site basic components of any table: or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table:<table> Table row:<tr> Table of Contents HTML 4 For Dummies, 4th Edition Table (data) cell:<td> Introduction Part I - MeetingA hierarchy defines the nesting order Remember HTML in Its Natural Environment of table elements: A <td> is always enclosed within a Chapter which The Least enclosed to Know <table>. and the Web <tr>, 1 - is always You Need within a about HTML Chapter 2 - HTML at Work on the Web With these three elements First HTML Page Chapter 3 - Creating Your alone, you're ready to build a simple table; the markup that does the job looks something like this: Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 <table> - Linking to Online Resources Chapter 6 <tr> - Finding and Using Images <td> - cell 1Your Page with Formatting Chapter 7 Top Off </td> <td> cell 2 to the Next Level Part III - Taking HTML </td> </tr> - HTML Tables Chapter 8 <tr> - HTML Frames Chapter 9 <td> HTML 3 </td> Chapter 10 - cell Forms Part IV<td> cell HTML with Other Technologies - Extending 4 </td> </tr> - Getting Stylish with CSS Chapter 11 </table> Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic In our example, we create a table with two rows based on the sketch in Figure 8-4. The first table row Chapter 14 cells 1 and 2; the second table rowHTML encloses - Integrating a Database into Your encloses cells 3 and 4. Chapter 15 - How HTML Relates to Other Markup Languages Remember Table rows always run Part V - From Web Page to Web Site horizontally and the contents of each cell - in this case, cell 1, cell 16 - Creating an contained within their own <td> element. Chapter 2, and so on - areHTML Toolbox Chapter 17 - Setting Up Your Online Presence To create the shell of your table-based Web page (for example, one based on the sketch from the Chapter 18 - Creating a Great User Interface previous section,Figure 8-4), you start with the <table> element: Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs <table> Chapter 20 - Ten HTML Do’s and Don’ts Part... - Appendixes VII </table> Appendix A - HTML 4 Tags Appendix B - HTML Character Codes number of optional attributes (for example, border="1" or The<table> element can have a Appendix C - Glossary - for now, however, keep it simple. Next, decide how many rows you want the table bgcolor="black") Index to have: Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures <table> List of Tables <tr>...</tr> List of Listings <tr>...</tr> List of Sidebars </table> Figure 8-5 shows the type of table this markup generates: a simple table with two rows. Each <tr> tag pair represents a single row.
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Figure -8-5: The beginning og thePage structure contains only two rows. Chapter 3 Creating Your First HTML table Part II - Getting Started with HTML After you enter the appropriate number of rows, you add cells using the table data cell (<td>) element. - Structuring Your HTML Documents The<td> element defines the number of cells - and, therefore, the number of columns. Chapter 4 Chapter 5 - Linking to Online Resources Chapter 6 Finding 8-4 shows a two-column table with three cells, the first row contains one cell, and the The sketch -in Figureand Using Images Chapter 7row containsYour cells. with Formatting this arrangement looks like this: - Top Off two Page The markup for second Part III - Taking HTML to the Next Level Chapter 8 <table> - HTML Tables Chapter 9 <tr> - HTML Frames Chapter 10 - contents </td> <td> HTML Forms Part</tr> IV - Extending HTML with Other Technologies Chapter 11 <tr> - Getting Stylish with CSS Chapter 12 - contents </td> <td> HTML and Scripting Chapter 13 - contents </td> <td> Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML </tr> </table> Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Here's where tables an get a bit tricky. Chapter 16 - Creatingcan HTML Toolbox A simple table with an even number of rows and columns (say two rows and twoSetting Up Yourpiece of cake - but you'll discover as you get more handy at designing your columns) is a Online Presence own pages that your needs aren't likely to produce such symmetrical tables very often. If your table will Chapter 18 - Creating a Great User Interface span more than one row or column (such as the first cell in the preceding example), you'll have to add an Part VI - The Part of Tens attribute that tells the browser which cell does the spanning. Chapter 17 Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s corresponds with the number of columns or rows you want the cell to span, The number in the attribute and Don’ts Part VIImeans if you're which - Appendixes creating a table like the one in our example, you have to add the colspan="2" Appendix A the first 4 Tags element. (The first cell in the table spans across two columns.) attribute to - HTML <td> Appendix B - HTML Character Codes See the section later Appendix C - Glossary in this chapter, 'Adding Spans,' for more information, but for now, assuming that you're Index creating a table like ours, the markup looks like this: Cheat Sheet - HTML 4 For Dummies, 4th Edition <table> List of Figures <tr> List of Tables <td colspan="2"> contents </td> List of Listings </tr> <tr> <td> contents </td> <td> contents </td> </tr> </table> List of Sidebars Congratulations, you're done with your first table. Well, sort of. To effectively use tables for layout, you need to know how to control several display issues, such as borders, table widths, and the handling of
  • white space within in your table. (For example, without borders, you can't really tell the table is there - it won't show up in HTML 4 for Dummies, 4th Edition or a good thing, but something that you do have the your browser. This isn't a bad thing ISBN:0764519956 power to change byyou Tittel and Natanya Pitts more information on completing your table and integrating if Ed want.) Keep reading for John Wiley & Sons © 2003 (408 pages) it into your page. Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this required. If you forget to include Warning The <table>,<tr>, and <td> opening and closing tags arestepby-step book will put in on the right track. one, your table won't display correctlyyoumost browsers. Adding borders Table of Contents HTML 4 For Dummies, 4th Edition For an HTML table, border refers not only to outside borders, but also to individual cell borders. You use Introduction the I - Meeting HTML to turn all these table borders Part border attribute in Its Natural Environment on or off. (Keep in mind, however, that if you're using tables 1 - The Least You Need to Know about HTML and the Web Chapter to lay out content, the table borders should probably be turned off.) To turn the table (and cell) border on, add the at Work on the Web the <table> start tag, as shown in the following bold markup: border attribute to - HTML Chapter 2 Chapter 3 - Creating Your First HTML Page <tableborder="1"> Part II - Getting Started with HTML <tr> Chapter 4 - Structuring Your HTML Documents <td colspan="2"> contents </td> Chapter 5 - Linking to Online Resources </tr> - Finding and Using Images Chapter 6 <tr> - Top Off Your Page with Formatting <td> contents </td> Part III - Taking HTML to the Next Level <td> contents </td> Chapter 8 - HTML Tables </tr> Chapter 9 - HTML Frames </table> Chapter 7 Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Other table elements Chapter 13 - Making Multimediacreated to contain and display tabular data, they are now most commonly Although tables were first Magic used - Integrating Database into this HTML Chapter 14 to control Webapage layout. InYour chapter, we focus on the elements that designer's use to control How HTML Relates of you Markup Languages Chapter 15 -layout, but for thoseto Otherwho might want to create a traditional table, we define the remaining table elements that Part V - From Web Page to Web Site Chapter 16 you can use in this sidebar. They are as follows: - Creating an HTML Toolbox <th>: The table header element displays text in boldface with a default center alignment. You - Setting Up Your Online Presence can use the <th> element within any row of a table, but you most often find and use it in the first Chapter 18 - Creating a Great User Interface row at the top - or head - of a table. Except for their position and egotism, they act just like table Part VI - The Part of Tens data (<td>) tags and should be treated as such. Chapter 17 Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTMLThe table Don’ts (<caption>) element is designed to exist anywhere inside the <caption>: Do’s and caption Part VII - <table> . Appendixes . . </table> tags but not inside table rows or cells (because then they wouldn't Appendix A - HTML 4 Tags be captioning anything) - and they can only occur once. Similar to table cells, captions accommodate any Codes Appendix B - HTML CharacterHTML elements that can appear in the body of a document (in other words, inline elements), but only those. By default, captions are horizontally centered with the table, and Appendix C - Glossary their lines wrap to fit within the table's width. The <caption> element accepts the align attribute. Cheat Sheet - HTML 4 For Dummies, 4th Edition Index List of Figures <tbody>: Table rows may be grouped into a table body section using the table body (<tbody>) element. A recent addition to the HTML 4 specification, these elements allow table bodies to scroll List of Listings independently of the table head (<thead>) and table foot (<tfoot>). The table body should List of Sidebars tain rows of table data. The <tbody> element must contain at least one table row (<tr>). conList of Tables <thead>: Table rows may be grouped into a table head section using the table head (<thead>) element. The table head contains information about the table's columns. The <thead> element must contain at least one table row. <tfoot>: Much like the <thead> element, table rows may be grouped into a table footer section, using the table footer (<tfoot>) element. The table foot contains information about the
  • table's columns and must contain at least one table row. Be sure to include your footer HTML 4 for Dummies, 4th Edition information before the first instance of the <tbody> element; that way, the browser renders that ISBN:0764519956 by before and Natanya at all information Ed Titteltaking a stab Pitts the content data cells. John Wiley & Sons © 2003 (408 pages) <colgroup>: The <colgroup> element creates an explicit column group. The number of Whether your goal is to build a simple, text-oriented Web site columnsor one loaded with frames, graphics, and animation,<col> element, which is defined is specified using the span attribute or using the this stepby-step the will put you on the right a uniform width for a group of columns. shortly. You use bookspan attribute to specifytrack. <col>: The table <col> element is an empty element. You use the <col> element to further define column structure. The <col> element should not be used to group columns - that is the HTML 4 For Dummies, 4th Edition job. The <col> element is used after you define a column group and set <colgroup> element's Introductionuniform width to specify a uniform width for a subset of columns. a Table of Contents Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web The value - the border attribute defines the Chapter 3 of Creating Your First HTML Page thickness of the border in pixels. For example, border="5" produces a 5-pixel border. you Part II - Getting Started withIfHTMLleave this attribute off, most browsers don't display a border. However, if you don't want your border visible, we suggest that you add border="0" to turn off the border for sure. Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Tip It's a good idea to turn on the table border when you're first creating and tweaking your table. This is - Finding and Using Images because it's sometimes difficult to see just what is going on without a border. After you've finished tweaking Chapter 7 - Top Off Your Page border. your table, you can turn off the with Formatting Chapter 6 Part III - Taking HTML to the Next Level Warning When you don't use the border attribute, most browsers don't display a border but there's still Chapter 8 - HTML Tables an invisible - HTML border. Therefore, when you design your table, factor those 2-pixels into your 2-pixel Frames Chapter 9 calculations. To avoid the Chapter 10 - HTML Forms invisible two-pixel border altogether, set the border attribute to equal 0 (border="0"). Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Right now, the examples build on the table skeleton created in the previous sections. Figure 8-6 shows Chapter 12 - HTML and Scripting how the Web page looks if you add a two-pixel border to the finished product. Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables Figure 8-6: Most Web pages that use tables for layout don't use borders; here you can see why. List of Listings List of Sidebars Adjusting height and width Officially, you can only set the width of tables and cells; unofficially, however, some browsers also allow you to set the height of your table. When you use tables to lay out Web pages, width becomes one of the primary variables. But first, let's identify what happens if you don't include the width attribute at all. Cell width
  • HTML 4 for width, the 4th Edition If you don't set table and cell Dummies,user's browser determines the width of every cell according to the by - no more, no less. Pitts width of its contents Ed Tittel and NatanyaFor example, supposeISBN:0764519956 a logo in the first cell and you want to put John Wiley Sons © 2003 (408 pages) navigational items in the cell&to its left. If you don't assign the width to the first cell (containing the logo), the navigational items are placed right beside thealogo, with no or almost no site Whether your goal is to build simple, text-oriented Web space between the two. To avoid or one loaded with width attribute and animation, define an that cramped look, you can use theframes, graphics, to strategically this step- exact number of pixels between the logoby-step book will put you on the right track. and navigational items. Tip If you're using tables for layout purposes, we recommend that you set the width for the table and cells. You can do this using either pixels or percentages, keeping in mind that percentages allow your table HTML 4 For Dummies, 4th Edition to be resized depending on the size of the browser window. Table of Contents Introduction Part I - Meeting HTML inwhen you use the width Defining width is easy Its Natural Environment attribute. For example, you can set the width of your table Chapter pixels The Least You Need to Know about HTML and the Web at 630 1 - like this: Chapter 2 - HTML at Work on the Web Chapter 3 border="1" width="630"> <table - Creating Your First HTML Page Part II - Getting Started with HTML ... Chapter 4 </table> - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources The value - the width Using Images Chapter 6 of Finding and attribute can be defined in pixels by using a positive integer (say, 630), or in percentages Topusing a positive integer followed by a percent sign (as in 95%). This choice also applies by Off Your Page with Formatting when - Taking HTML to the Next Level Part IIIyou set the width of individual cells. To add widths to the table built earlier in this chapter (and to set width for its-individual cells), add the following markup shown in bold text: Chapter 8 HTML Tables Chapter 7 Chapter 9 - HTML Frames <table - HTML Forms Chapter 10 border="1" width="630"> Part<tr> IV - Extending HTML with Other Technologies <td - Getting Stylish contents </td> Chapter 11 width="630">with CSS </tr> - HTML and Scripting <tr> Chapter 13 - Making Multimedia Magic <td width="400"> contents </td> Chapter 14 - Integrating a Database into Your HTML <td width="230"> contents </td> Chapter 15 - How HTML Relates to Other Markup Languages </tr> Part V - From Web Page to Web Site </table> Chapter 12 Chapter 16 - Creating an HTML Toolbox Chapter 17 -and 8-8 show the difference between a site that doesn't define table and cell width and one Figures 8-7 Setting Up Your Online Presence Chapter 18 the Creating attribute. that uses - width a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 8-7: This image doesn't define width properties.
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 Figure -8-8: This image definesDocuments Structuring Your HTML width properties. Chapter 5 - Linking to Online Resources Warning If you set and pixel width smaller than the content's pixel size, the browser ignores the width the Using Images - Finding attribute and Top Off Your Page with the cell contents. So, be sure to check all dimensions. defaults to display all Formatting Chapter 7 Chapter 6 Part III - Taking HTML to the Next Level Cell height - HTML Tables Chapter 8 Chapter 9 - HTML Frames Two factors bear close attention when you're defining table and cell height: Chapter 10 - HTML Forms You have two ways to Other Technologies Part IV - Extending HTML with define height. It works the same way as defining width - by using number of pixels - percentages. Chapter 11 or Getting Stylish with CSS Chapter 12 - HTML and Scripting Height is not nearly as important as width. Cell content determines the height of each cell; - Making Multimedia Magic normally, it's not even necessary to define cell height. Chapter 13 Chapter 14 - Integrating a Database into Your HTML Chapter 15 you may want to avoid using the height attribute. Here's why: According to the HTML That said, - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Sitenot standard, the height attribute is a <table>attribute. You can use the height attribute because Chapterbrowsers support it, but not all of them do yet. Bottom line: Using the height attribute may produce some 16 - Creating an HTML Toolbox unpredictable results. However, it is used occasionally, so here's how to use the height attribute to Chapter 17 - Setting Up Your Online Presence further define a table: Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 border="1" width="630"> Bugs <table - Ten Ways to Exterminate Web Chapter 20 <tr> - Ten HTML Do’s and Don’ts Part VII - Appendixes <td width="630" height="100"> contents </td> Appendix A - HTML 4 Tags </tr> <tr> Appendix B - HTML Character Codes <td - Glossary Appendix C width="400" height="302"> contents </td> Index <td width="230" height="302"> contents </td> </tr> Cheat Sheet - HTML 4 For Dummies, 4th Edition </table> List of Figures List of Tables Warning Although, according to the HTML 4 standard, the height attribute can legally be added to the List of Listings (<td>) element, it's now deprecated (considered obsolete and on the way out). The table data cell List of Sidebars standard currently favors the use of style sheets; future versions of this standard have or will phase out the height attribute. Not because they don't want you to define this property, but rather because they want you to set the height using style sheets instead. If you're interested in learning more about style sheets, see Chapter 11. Padding and spacing Determining the white space between cells is essential for proper layout. Thinking back to our sketch, you
  • have to determine - to the pixel - how space is going to be used in your table. There are two attributes that HTML 4 for Dummies, 4th Edition help you define white space: cellpaddingandcellspacing. These attributes are similar, and can ISBN:0764519956 by first-time HTML authors. sometimes confuse Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) Both attributes allow you to putgoal is to buildbetween cells; however, they do it using two different Whether your some space a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this steptechniques: by-step book will put you on the right track. cellspacing increases the border width between cells - increasing the space between cells. Table of Contents cellpadding pads the cell with space - the space is added within the cell walls. HTML 4 For Dummies, 4th Edition The value Introductionfor either attribute is defined in pixels. For example, cellpadding="5" adds five pixels worth of I - Meeting HTML in Its Natural Environment Partpadding to each cell. Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page To define either attribute, add it to the <table> start tag, as follows: <table cellpadding="5" cellspacing="5"> Part II - Getting Started with HTML Chapter 4 - Structuring Your When using tables for layout, HTML Documents without visible borders, it doesn't matter much which one you use. However, Chapteradd color to your Online Resources border for any reason - you can see a considerable difference. if you 5 - Linking to tables - or use the Chapter because cellpadding increases the space within the border, and cellspacingincreases the That's 6 - Finding and Using Images Chapterof the-border itself, as shown clearly in Figures 8-9 and 8-10. Top Off Your Page with Formatting width 7 Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Figure 8-9: Cellpadding increases the space within each cell. Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 Figure -8-10: CellspacingHTML Documents Structuring Your increases the width of the border. Chapter 5 - Linking to Online Resources Warning - Finding andvalue for cellpadding is 1; the default for cellspacing is 2. If you don't define The default Using Images cellpadding and cellspacing, your users' browsers assume the defaults. Accounting for those pixels Chapter 7 - Top Off Your Page with Formatting in your sketch is a good idea. Part III - Taking HTML to the Next Level Chapter 6 Chapter 8 - HTML Tables Shifting alignment - HTML Frames Chapter 9 Chapter 10 - HTML Forms Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic In the - Extending HTML with Other Technologies Part IV past, table alignment was not well supported by browsers; therefore, if you wanted to center your table, you had to find a different method that would work. Many designers used the <center> tag pair Chapter 11 - Getting Stylish with CSS outside the table, as follows: <center> Chapter 14 - Integrating a Database into Your HTML <table> How HTML Relates to Other Markup Languages ... Part V - From Web Page to Web Site </table> Chapter 16 - Creating an HTML Toolbox </center> Chapter 15 Chapter 17 - Setting Up Your Online Presence Chapter 18 finally caught Great User Interface attributes that are part of the HTML standard to align your Browsers - Creating a up; now you can use Part VI - The Part of Tens tables (horizontally) and your table contents (horizontally and vertically). Aligning tables is similar to Chapter 19 - Ten Ways to Exterminate Web Bugs aligning images. Chapter 20 - Ten HTML Do’s and Don’ts To VII - your table horizontally, Part align Appendixes you use the alignattribute with the <table> element. The align attribute, when used Tags the <table> element has the following possible values: left,right, or with Appendix A - HTML 4 center. - HTML Character Codes Appendix B When you use these values, the table is aligned to the left, right, or center of the document, respectively. Appendix C - Glossary Index can also use the align attribute with the <td> or <tr> elements. However, when used with these You Cheat Sheet the data 4 For Dummies, 4th Edition The values that can be used with the align attribute in the elements, - HTML is aligned in the cell or row. List of Figures <td> or <tr> elements are defined as follows: List of Tables List ofalign="right": Aligns the table or cell contents against the right side. Listings List of Sidebars align="left": Aligns the table or cell contents against the left side. (This is the default setting.) align="center": Centers the table or cell contents. align="justify": Justifies cell contents in the middle (not widely supported). align="char": Aligns cell contents around a specific character (not widely supported). In the following example, we align our table in the center of the page (see Figure 8-11):
  • HTML 4 for Dummies, 4th Edition <table border="1" width="630" align="center">ISBN:0764519956 by Ed Tittel and Natanya Pitts <tr> John Wiley & Sons © 2003 (408 pages) <td width="630" colspan="2"> contents </td> Whether your goal is to build a simple, text-oriented Web site </tr> or one loaded with frames, graphics, and animation, this step<tr> by-step book will put you on the right track. <td width="400"> contents </td> <td width="230"> contents </td> Table of Contents </tr> HTML 4 For Dummies, 4th Edition </table> Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Figure -8-11: Our simple table centered. Chapter 6 Finding and Using Images Chapter 7 - Top Off Your Page with Formatting You can also vertically align cell contents using the valign attribute. The valign attribute cannot be used for a <table>; it can only be used with the <tr> and <td> elements. Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - values are as The possible HTML Frames follows: Chapter 10 - HTML Forms valign="top": Vertically aligns cell contents Part IV - Extending HTML with Other Technologies Chapter 11 Chapter 12 to the top of the cell. - Getting Stylish with CSS - HTML and Scripting valign="bottom": Vertically aligns cell contents to the bottom of the cell. Chapter 13 - Making Multimedia Magic valign="middle": Vertically centers the cell contents. (This is the default.) Chapter 14 - Integrating a Database into Your HTML valign="baseline": Defines a Markup for all other cells in the same row, so alignment is the Chapter 15 - How HTML Relates to Other baselineLanguages same for all Page Part V - From Web cells. to Web Site Chapter 16 - Creating an HTML Toolbox Thealign and valign attributes can also be used with the following other table elements: <col>, - Setting Up Your Online Presence <colgroup>,<tbody>,<tfoot>,<th>, and <thead>. Chapter 17 Chapter 18 - Creating a Great User Interface Part VI - The If you set the alignment Warning Part of Tens for a row (<tr>), and then set the alignment for a cell within that row Chapter 19 -setting you to Exterminate Web Bugs the setting for the row. (<td>), the Ten Ways add to the cell overrides Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML Adding Spans 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 One of the main reasons tables are a flexiblepages) John Wiley & Sons © 2003 (408 alternative for arranging elements in your Web page is because of spanning. Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this step- Spanning enables you tobook willitems across multiple cells; you essentially tear down a cell wall. Whether by-step stretch put you on the right track. you need to span rows or columns, you can use the concept of spanning to wrangle your table into almost any arrangement. Keep in mind that row and column spanning takes careful planning, and that planning Table of Contents should occur during the sketching phase. The two attributes you use to span cells are colspan and HTML 4 For Dummies, 4th Edition rowspan. Both attributes are added to the <td> element. Introduction Part I - Meeting HTML in Its Natural Environment Changing columnNeed to Know about HTML and the Web spans - The Least You Chapter 1 Chapter 2 columns youWork the the Web attribute in the <td> element and set the value equal to the To span - HTML at use on colspan Chapter 3 of cells you want to span. Figure 8-12 illustrates a cell that spans two columns. - Creating Your First HTML Page number Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Figure Part of Tens Part VI - The 8-12: The cell Chapter 19 spans two columns. - Ten Ways to Exterminate Web Bugs In this example, the first cell spans the two cells in the next row. You use the colspan attribute set to 2, as - Ten HTML Do’s and Don’ts shown in the following markup, because the cell spans two columns: Chapter 20 Part VII - Appendixes Appendix A - HTML 4 Tags <table border="1" width="630"> <tr> Appendix C - Glossary <td width="630" colspan="2"> contents </td> Index </tr> Cheat Sheet - HTML 4 For Dummies, 4th Edition <tr> List of Figures <td width="400"> contents </td> List of Tableswidth="230"> contents </td> <td List of Listings </tr> List of Sidebars </table> Appendix B - HTML Character Codes After you add a colspan attribute, verify that you have the appropriate number of <td> cells. For example, if you define a cell to span two columns, you should have one less <td> in that row. If you use colspan="3", there should be two fewer <td> cells in that row. You also want to make sure that the other rows have the appropriate number of cells. For example, if you define a cell to span two columns, the other rows in that table should have two <td> cells to fill out the two columns.
  • HTML 4 for Dummies, 4th Edition Changing row spans by Ed Tittel and Natanya Pitts ISBN:0764519956 Row spans are similarWiley & Sons © 2003 the only difference is that you span rows instead of columns. Like John to column spans, (408 pages) thecolspan attribute, theyour goal is attribute a simple, text-oriented cell. Figure 8-13 illustrates a cell that Whether rowspan to build is added to the <td> Web site spans two rows. or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Figure 8-13: We have changed our table design so that the last cell containing our navigational items - Getting spans two rows. Stylish with CSS Chapter 11 Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic attribute in the <td> element and set the value equal to the number To span rows, you use the rowspan Chapter 14 -want to span. Database into Your HTML of cells you Integrating a Chapter 15 - How HTML Relates to Other Markup Languages Remember You should sketch your Part V - From Web Page to Web Site table first, so you know what cells should span what. The example design we've used throughout most of this chapter uses the colspan attribute with the first cell. However, Chapter 16 - Creating an HTML Toolbox the design could have been just as simple if we used a rowspan with the last cell that contains the Chapter 17 - Setting Up Your Online Presence navigational items. Either way, the table is efficiently laid out. The modified table comes from the following Chapter 18 - Creating a Great User Interface markup (note the bold rowspan) and is shown in Figure 8-14: Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs <table border="1" width="630"> - Ten HTML Do’s and Don’ts <tr> Part VII - Appendixes <td width="400"> contents </td> Appendix A - HTML 4 Tags <td width="230" rowspan="2"> contents </td> Appendix B - HTML Character Codes </tr> Appendix C - Glossary <tr> Index <td width="630"> contents </td> Cheat Sheet - HTML 4 For Dummies, 4th Edition </tr> List of Figures </table> Chapter 20 List of Tables List of Listings List of Sidebars Figure 8-14: Our simple table with the last rows spanned.
  • Tip Always keep in mind that columns are vertical and rows are horizontal. If you want to extend a cell vertically (across HTML 4 for Dummies, 4th Edition want to extend a cell horizontally (across multiple multiple rows), use rowspan. If you ISBN:0764519956 by Ed Tittel columns), use colspan. and Natanya Pitts John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • PopulatingHTML 4 for Dummies, 4th Edition Cells by Ed Tittel and Natanya Pitts ISBN:0764519956 After you've sketched Wiley table, defined (408 pages) John your & Sons © 2003 table properties such as width, cell padding and spacing, and cell spanning, you're Whether your goal is totable cells with text-oriented Web site and almost any other HTML ready to populate the build a simple, images, hyperlinks, text element. This is a simple process: You addgraphics, and animation, this step- <td> cell, similar to how you or one loaded with frames, images, hyperlinks and text to the by-step element. The following markup shows a populated table, with data added in bold: add them to the <body>book will put you on the right track. <table border="1" width="630" align="center" cellpadding="5" cellspacing="5"> Table of Contents <tr> HTML 4 For Dummies, 4th Edition <td colspan="2" valign="bottom" align="left"> <a href="http://www.ropeadope.com"> Part I - Meeting HTML in Its Natural Environment <img src="images/ropeAdopeRecords.gif" width="249" height="94" Chapter 1 - The Least You Need to Know about HTML and the Web alt="rope-a-dope records" border="0"> Chapter 2 - HTML at Work on the Web </a> Chapter 3 - Creating Your First HTML Page </td> Part II - Getting Started with HTML </tr> Chapter 4 <tr> - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources <td valign="top" align="right" width="400"> Chapter 6 <img src="images/gunlogo.gif" width="400" height="302" alt="rope-a-dope - Finding and Using Images Chapter 7 - Top Off Your Page with home" border="0"> Formatting Part III - Taking HTML to the Next Level </td> Chapter 8 - HTML Tables <td valign="top" align="left" width="230"> Chapter 9 <br><br><br> - HTML Frames Chapter 10 - HTML Forms <img src="images/bands.gif"> Part IV - Extending HTML with Other Technologies <br> <a Getting Stylish Chapter 11 - href="q/"> with CSS Chapter 12 <img src="images/q.gif" border="0"> - HTML and Scripting </a> Chapter 13 - Making Multimedia Magic <br> Chapter 14 - Integrating a Database into Your HTML <a - href="ilovemyself/">Markup Languages Chapter 15 How HTML Relates to Other <img src="images/ilovemyself.gif" border="0"> Part V - From Web Page to Web Site </a> Chapter 16 - Creating an HTML Toolbox <br> Chapter 17 - Setting Up Your Online Presence <a href="http://www.pwolf.com"> Chapter 18 - Creating a Great User Interface <img src="images/prescottCurlywolf.gif" border="0"> Part VI - The Part of Tens </a> Chapter 19 - Ten Ways to Exterminate Web Bugs <br><br> Chapter 20 - Ten HTML Do’s and Don’ts <img src="images/organizations.gif"> Introduction Part VII - Appendixes Appendix A - HTML 4 Tags <br> Appendix B - href="http://www.anthropos.org"> <a HTML Character Codes Appendix C <img src="images/anthropos.gif" border="0"> - Glossary Index </a> Cheat Sheet - HTML 4 For Dummies, 4th Edition <br><br> List of Figures <img src="images/distractions.gif"> <br> List of Tables <a List of Listings href="darth/"> <img src="images/hubbabubba.gif" border="0"> List of Sidebars </a> <br> </td> </tr> </table>
  • HTML 4 for Testing Your TableDummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 Testing is the final step beforeSons ©table (408 pages) You must test your tables in all the popular browsers John Wiley & your 2003 goes live. — including Internet Explorer, Netscape, and a simple, text-oriented Web site may have to squint at your Whether your goal is to build Opera. If you don’t, your users pages and may seeone loaded with one big mess. and animation, this stepor your tables as frames, graphics, by-step book will put you on the right track. Tip As you’re creating your table, we suggest that you have your browser window open at the same time. Each time you change the width of a cell or add an item to a cell, save the document, and view it in the Table of Contents That way, when it’s time to test your table, you probably won’t have too much tweaking to browser window. HTML 4 For Dummies, 4th Edition do. Introduction A challenge for many designers is to create table Part I - Meeting HTML in Its Natural Environment designs that work in every browser. Thanks to many crusaders - standards, the newest versions of the most the Web Chapter 1 of The Least You Need to Know about HTML and popular browsers, Netscape, Internet Explorer, and Opera,-all support the HTML standard. If your audience does not consist of technical-savvy Chapter 2 HTML at Work on the Web individuals, - Creating Your First HTML Page browsers when designing your tables. you might want to consider older Chapter 3 Part II - Getting Started with HTML You should always test your site in any browser that your users might have. For example, if your table is Chapter 4with align="center", but in an older version of Internet Explorer, the table remains flush with - Structuring Your HTML Documents aligned Chapter 5 - Linking to have Resources the left side, you might Onlineto add a <center> tag pair to your table. As we stated earlier, you won’t Chapter 6 many problemsUsing tables if you stick to the standard. have too - Finding and with Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Table Making Tips Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 Before closing this chapter, & Sons © 2003 (408 pages) of our favorite table techniques. After years of John Wiley we want to impart some building, maintaining, and your goal is to build a simple,following tips are asite start to creating effective Whether troubleshooting tables, the text-oriented Web head tables. or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Following the standards Table of Contents The 4 For Dummies, 4th Edition HTML first — and (we think) most important — tip is to keep with the established standards. The Web Standards Project has been campaigning for full standard support in browsers and HTML authoring applications since 1998. Their hard work should make your life easier. Part I - Meeting HTML in Its Natural Environment Introduction Chapter couple of years ago,Need to Know about HTML and the Web be forced to create different versions of Just a 1 - The Least You if you built an HTML table, you would Chapter 2 page (eachWork on the Web your Web - HTML at version containing browser-specific elements and attributes) to define some basic Chapter 3 - Creating Your First HTML Page table properties. As you might imagine, creating and maintaining different versions of the same Web page Part II - Getting Started with HTML can drive development costs sky-high. To get around those costs, many developers would carefully craft Chapter 4 Structuring Your HTML Documents their tables -with specific markup that worked in Internet Explorer and Netscape — but what about Opera? ChapterhappilyLinkingareOnline Resources past. The newest versions of Internet Explorer, Netscape, and Well, 5 - those to problems of the Chapter all support HTML, Using Images Opera 6 - Finding and as well as CSS and XHTML. To learn more about the fight for Web standards, visitwww.webstandards.org. Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level - HTML Tables Sanitizing markup Chapter 8 Chapter 9 - HTML Frames Chapter 10 written markup is easier to troubleshoot and maintain. Many designers use white space to Efficiently - HTML Forms Part IV - Extending HTML with Other Technologies separate elements. For example, the following markup Chapter 11 doesn’t use much white space and is hard to read: - Getting Stylish with CSS Chapter 12 border="1" width="630"> <table - HTML and Scripting Chapter 13 width="630" colspan="2"> contents </td></tr> <tr><td - Making Multimedia Magic Chapter 14 width="400"> contents </td> <tr><td - Integrating a Database into Your HTML <td width="230"> Relates to Other Markup Languages Chapter 15 - How HTML contents </td></tr></table> Part V - From Web Page to Web Site Check out - Creating an HTML Chapter 16 this clean version: Toolbox Chapter 17 - Setting Up Your Online Presence <table - Creating a width="630"> Chapter 18 border="1"Great User Interface Part<tr> VI - The Part of Tens <td - Ten Ways to Exterminate Web Bugs Chapter 19 width="630" colspan="2"> contents </td> </tr> - <tr> Chapter 20 Ten HTML Do’s and Don’ts <td width="400"> contents </td> Part VII - Appendixes <td width="230"> contents </td> Appendix A - HTML 4 Tags </tr> Appendix B - HTML Character Codes </table> Appendix C - Glossary Index Warning Notice that the white space we include is between elements; not within elements. If, for Cheat Sheet - HTML white space between the <td> and </td> tags, it affects the way the cell’s content is example, you add 4 For Dummies, 4th Edition List of Figures generally something you want to do. displayed. Not List of Tables List of Listings Nesting tables within tables List of Sidebars Many designers are forced to nest tables within tables to achieve a desired effect. This is not only legal, but quite common — and okay, a few such nestings won’t hurt. Remember, however, that nesting too many tables within tables can lengthen download time. To nest a table, you simply add the <table> within a <td> element as follows: <table border="1"> <tr>
  • <td> contents </td> HTML for Dummies, 4th Edition <td> contents4 </td> ISBN:0764519956 by Ed Tittel and Natanya Pitts </tr> John Wiley & Sons © 2003 (408 pages) <tr> Whether your goal is to build a simple, text-oriented Web site <td> or one loaded with <tableborder="1"> frames, graphics, and animation, this stepby-step book will put you on the right track. <tr> <td> contents </td> <td> Table of Contents contents </td> HTML 4 For</tr> Dummies, 4th Edition <tr> Introduction <td> contents </td> Part I - Meeting HTML in Its Natural Environment Chapter 1 <td> contents </td> - The Least You Need to Know about HTML and the Web </tr> at Work on the Web Chapter 2 - HTML </table> Chapter 3 - Creating Your First HTML Page </td> Part II - Getting Started with HTML <td> contents </td> Chapter 4 - Structuring Your HTML Documents </tr> Chapter 5 - Linking to Online Resources </table> Chapter 6 - Finding and Using Images Chapter 7 - produces the tables shown in Figure 8-15. Be sure to remember cell widths — the width of This markup Top Off Your Page with Formatting Part III - Taking HTML to the the width of the third cell should match Next Level the nested table. Also, create and test the table you intend to nest Chapter 8 - HTML Tables — separately, before you add it to your primary table. Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A -8-15: Nested tables. Figure HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Using CSS to control table properties Index Cheat Sheet - HTML 4 For Dummies, 4th Edition Chapter 11 List of Figuresprovides an overview of Cascading Style Sheets (CSS), a style-sheet language you can use to define display properties for HTML documents. Compactly, definitions of a few CSS properties can take List of Tables the place of List of Listings some attributes such as align, cellpadding, cellspacing, and more. Tempting, but watch out: Older browsers don’t support CSS — although the recent versions of Internet Explorer, List of Sidebars Netscape, and Opera do. CSS provides more options for table display and is more flexible than HTML. If you know your audience has appropriate (and recent) equipment, CSS may be the way to go. Avoiding dense tables We recommend creativity, but be careful and don’t pack a screen full of dense and impenetrable information — especially numbers. A long, unbroken list of numbers quickly drives away all but the truly
  • masochistic — pretty much negating the purpose of the table to begin with. Put those numbers into an HTML 4 for Dummies, attractive table (better yet, several tables4th Edition with a few well-chosen images). Watch your page’s interspersed ISBN:0764519956 by Ed Tittel and Natanya Pitts attractiveness and readability soar; hear visitors sigh with relief. John Wiley & Sons © 2003 (408 pages) Individual table cells can be surprisingly build a simple, text-oriented Web site them precisely. If you’re Whether your goal is to roomy; you can position graphics in or one loaded with frames, graphics, and animation, this stepmoved to put graphics in a table, be sure to: by-step book will put you on the right track. Select images that are similar in size and looks. Table of Contents Measure those images to determine their heights and widths in pixels (shareware programs such as HTML Paint Shop Pro and Edition 4 For Dummies, 4th GraphicConverter do this automatically). Introduction Part IUse HTML markup to Natural Environment - Meeting HTML in Its position these images Chapter 1 within their table cells. - The Least You Need to Know about HTML and the Web A short-and-sweet table keeps the graphics in check and guarantees that the text will always sit nicely to - HTML at Work on the Web its right. Chapter 2 Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Two more handy graphics-placement tips: Size your rows and columns of cells that contain images to Chapter 4 - Structuring Your HTML Documents accommodate the largest graphic and center all graphics in each cell (vertically and horizontally). The Chapteris a consistent, coherent image layout. result 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Top Off to Page with Adding -color Yourcells Formatting Chapter 7 Part III - Taking HTML to the Next Level Chapter 8 Remember-the bgcolor attribute that goes with the <body> element? bgcolor is the same attribute; it HTML Tables Chapter 9 affects the background of table cells in much the same way it affects the background of your entire HTML - HTML Frames document. Simply Forms Chapter 10 - HTML add this attribute to any table cell to change its background color: Part IVbgcolor="teal">...</td> <td - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Tip You - HTML and Scripting Chapter 12 can use background color instead of using an image that would take longer to download. Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • 4 for Dummies, Chapter HTML Tittel and Natanya4th Edition 9: HTML Frames by Ed Pitts Overview ISBN:0764519956 John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepIn This Chapter by-step book will put you on the right track. Deciding whether frames are right for your HTML page Table of Contents HTML Sketching a frame structure 4 For Dummies, 4th Edition Introduction Defining a frameset skeleton Part I - Meeting HTML in Its Natural Environment Chapter 1 The Least You Need to Know about HTML and the Web Adding-frame elements Chapter 2 - HTML at Work on the Web Targeting links in Your First HTML Page Chapter 3 - Creating frames Part II - Getting Started with HTML HTML frames delineate, outline, and give structure to HTML documents; by design, information can move - Structuring Your HTML Documents coherently within and among frames. Frames are not as commonly used as they once were, but times still Chapter 5 - Linking to Online Resources arise when frames work best and are used. For example, if you use any Macromedia products (such as Chapter 6 - Finding and Flash or Dreamweaver), Using Imagesthat the help section on the product (stored locally) is laid out using you'll notice Chapter 7 In this chapter, we cover the basics of frames step by step. - Top Off Your Page with Formatting frames. Chapter 4 Part III - Taking HTML to the Next Level Chapter 8 frames became part of the HTML repertoire with HTML 4.0, older browsers (and browser Because - HTML Tables versions - HTML 3.0) can't handle frames properly. Text-only browsers don't deal well with frames Chapter 9 older thanFrames either. 10 - practical, this Chapter To be HTML Forms means that some of your users may not be able to appreciate the beauty and efficacy of your frames. Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS As long as you're sure users have frames-compatible browsers - the recent versions of both Netscape Chapter 12 - HTML and Scripting Navigator and Internet Explorer support frames, as do many of the non-commercial browsers such as Chapter 13 - Making Multimedia Magic Mosaic and Amaya - you can safely use frames on your site. However, if your audience uses a wide variety Chapter 14 - Integrating a Database into Your HTML of browsers, you may want to shy away from frames. Another option is to offer a non-framed version of the Chaptermaterials so users can pick Other Markup Languages same 15 - How HTML Relates to which version of your pages they want to explore. Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Warning Frames have some significant usability concerns (covered later in this chapter). If frames are not strictly - Setting Up Your Online Presence Chapter 17 necessary, we recommend opting for tables instead. Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition When to Use Frames in an HTML Page by Ed Tittel and Natanya Pitts ISBN:0764519956 So, what are frames and why Sons © you want to use them in your Web pages? Frames provide John Wiley & would 2003 (408 pages) advantages as well as disadvantages. As mentioned previously, frames are not as widely used as they Whether your goal is to build a simple, text-oriented Web site used to be. In this section you find out the advantages of animation, this step- disadvantages. or one loaded with frames, graphics, and frames as well as the by-step book will put you on the right track. Why you may want to use frames Table of Contents A browser window usually holds HTML 4 For Dummies, 4th Edition a single frame that displays one HTML document. However, browser windows can hold several frames (which are defined with the <frameset> element), and can display several HTML documents at one time. Each frame works like a separate browser screen, but all the Part I - Meeting HTML in Its Natural Environment frames are displayed together in one window. Imagine having three browser windows open (and tiled) at Chapter 1 - The Least You Need to Know about HTML and the Web one time, and you begin to get the picture. Introduction Chapter 2 - HTML at Work on the Web Chapter 3 - cool is Your First HTML the What's reallyCreatingthat with frames, Pagedifferent browser windows work together to display your content. Part II - Getting Started with all of us And for the control freak in HTML - depending on the attributes you give it - you can make a frame act Chapter 4a standard browser screen, or freeze it so that it can't be adjusted. - Structuring Your HTML Documents just like Chapter 5 - Linking to Online Resources Tip The - Finding and Using Images Chapter 6 most significant difference between tables and frames is that tables are static, and frames can be dynamic. You Off Your Page with Formatting in individual frames, and users may find that appealing (or Chapter 7 - Top can scroll through information possibly annoying). Part III - Taking HTML to the Next Level Chapter 8 Frames haveHTML Tablesuses. You might be looking at a page that uses frames if numerous Chapter 9 - HTML Frames Chapter 10Web page has a fixed logo at the top and a scrolling bottom section. The - HTML Forms Part IV - Extending HTML with Other Technologies The - Getting fixed top logo, a Chapter 11page has a Stylish with CSS navigation bar and copyright notice at the bottom, and a scrolling middle -sectionand the page's content. for Scripting HTML Chapter 12 Chapter 13Web page has side-by-side frames that put a table of contents on the left and a scrolling text The - Making Multimedia Magic Chapter 14 on the right. a Database into Your HTML frame - Integrating Chapter 15 - How HTML Relates to Other Markup Languages On the Web Page to Web Site Part V - Fromleft side of the page, there's a frame that's filled with icons that link to different parts of a Web site; - Creating an HTML element Chapter 16click an icon, and the Toolbox is displayed in the right frame. Chapter 17 - Setting Up Your Online Presence Chapter 20 - Ten HTML Do’s and Don’ts You find out how to set up these structures later in this chapter. For now, note that frames are flexible. Chapter 18 - Creating a Great User Interface Frames allow you to keep constant chunks of information on display while your users can scroll through Part VI - The Part of Tens large amounts of text or dynamic content. Figure 9-1 provides an example of a Web page using two Chapter 19 - Ten Ways to Exterminate Web Bugs frames. Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 Linking Figure -9-1: Thisto Online Resources site uses two frames. Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Frame usability: Is another alternative better? - HTML Tables Chapter 8 Chapter 9their HTML Frames introduced some ticklish problems that caused many developers to shun - history, frames Early in Chapter Some common usability concerns (even these days) are as follows: 10 - HTML Forms them. Part IV - Extending HTML with Other Technologies The - Getting Stylish with CSS Chapter 11browser's Back button may not work correctly. Chapter 12 - HTML and Scripting Users can't bookmark a collection of documents in a frameset. Only individual frames can be - Making Multimedia Magic bookmarked. Chapter 13 Chapter 14 - Integrating a Database into Your HTML Chapter frameset may produce different results when reloaded. A 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Users - Creating an HTML Toolbox Chapter 16 can become trapped in a frameset. Chapter 17 - Setting Up Your Online Presence Search engines find HTML pages, not framesets; therefore, search results can produce pages without Chapter 18 - Creating a Great User Interface the navigational elements. Part VI - The Part of Tens Chapter older browsers, to Exterminate Web Bugs framed content could be a hassle. In 19 - Ten Ways printing Web pages with Chapter 20 - Ten HTML Do’s and Don’ts In many cases, using Part VII - Appendixes tables can produce the same result as using frames. The advantage to using frames is that you can define one document that contains navigational elements, and dynamically change the Appendix A - HTML 4 Tags contents pages. This requires less maintenance since the navigational elements are defined in a separate Appendix B - HTML Character Codes HTML document. However, with many of the modern HTML editors, you can define global templates that Appendix C - Glossary control the maintenance issue. For example, Macromedia's Dreamweaver allows you to define a Web Index page template that contains the navigational elements. Each time you create a new page using the Cheat Sheet - HTML 4 For Dummies, 4th Edition template, the navigational elements are already defined for you. Later you can make changes to the List of Figures global template, and Dreamweaver will update all the documents that were created using that template. List ofrecommend avoiding frames when you can. But if you must use them, be sure to follow the steps we We Tables List of Listings chapter: outline in this List of Sidebars Sketch your frame structure on paper. Define your frame structure with <frameset> and <frame> elements only. Add attributes to define behavior. Check your documents in a browser.
  • To get a look at some well-designed frames, visit some sites that use them. (Yes, we have an example in HTML 4 mind.) Before you sketch for Dummies, 4th Edition out the well-designed frames at your frame structure, check ISBN:0764519956 by Ed Tittel and Natanya Pitts www.internetgarden.co.uk/frameset_1.htm. John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition Sketching Frame Components by Ed Tittel and Natanya Pitts ISBN:0764519956 The first step in creating frames is to 2003 (408your design on paper. Using a pen or pencil - and a sheet of John Wiley & Sons © sketch pages) paper - you define how the browseris to build a simple, text-oriented Web site you don't need to be precise Whether your goal should render your pages. At this stage, about the content, just the frame dimensions. For example, if you want to create the Web page in Figure 9or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. 1, you would sketch the dimensions for two frames for the Web page (see Figure 9-2). The first framed component contains navigational elements, and the second framed component contains the main content for our Web page. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Figure HTML and Scripting Chapter 12 -9-2: A sketch of Figure 9-1. Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 Frames Building a Set offor Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 To build a Web page that contains © 2003 (408 pages) need to create three documents: John Wiley & Sons two frames, you Whether your goal is to build a simple, text-oriented Web site The documentone loaded with frames, graphics, andcalled the frameset document. The frameset or that defines the frame structure, animation, this stepdocument is by-step book will document in which you replace the <body> . . . </body> tags with a normal HTML put you on the right track. the<frameset> . . . </frameset> tags. The frameset document only defines the frame structure, so it's usually a short document. Table of Contents HTML Two documents, each containing the HTML markup used in the two frames. The <frame> 4 For Dummies, 4th Edition element Introduction is an empty element used in the <frameset> element to point to the HTML document(s) Part Iused for frame content. - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web - HTML at frameset document rules Following the Work on the Web Chapter 2 Chapter 3 - Creating Your First HTML Page Frameset documents with HTML Part II - Getting Startedare HTML documents, so they must always begin with an <html> tag, followed by the<head>-element, and we recommend you use the following HTML frameset DOCTYPE declaration Chapter 4 Structuring Your HTML Documents before the - Linking to Online Resources Chapter 5 <html> tag: Chapter 6 - Finding and Using Images <!DOCTYPE Top Off Your Page "-//W3C//DTD HTML 4.0 Frameset//EN" Chapter 7 - HTML PUBLIC with Formatting "http://www.w3.org/TR/REC-html40/frameset.dtd"> Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Remember With these elements, divide-and-conquer is the best approach. The frameset document only - HTML Forms contains elements that define the frame structure - no content is defined here. Chapter 10 Part IV - Extending HTML with Other Technologies Chapter 11 a - Getting Stylish withframeset documents that you should keep in mind: Here are few rules regarding CSS Chapter 12 - HTML and Scripting The<frameset> element follows Chapter 13 - Making Multimedia Magic immediately after the closing </head> tag. Chapter 14 - Integrating a Database into Your HTML If any <body> elements appear before the <frameset> elements, the <frameset> elements are - How HTML Relates to Other Markup Languages ignored. Chapter 15 Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Between the outermost <frameset> tags, you can only nest other <frameset> elements or Chapter 17 - Setting Up Your Online HTML is allowed. <frame> elements - no other Presence Chapter 18 - Creating a Great User Interface The basic frameset document Part VI - The Part of Tens starts just like any HTML document; notice that the <body> tags are replaced withTen Ways to Exterminate Web Bugs <frameset> tags. Chapter 19 Chapter 20 - Ten HTML Do’s and Don’ts <!DOCTYPE HTML Part VII - Appendixes PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> Appendix A - HTML 4 Tags <html> Appendix B - HTML Character Codes <head> Appendix C - Glossary <title>The Mettauer Family</title> </head> Cheat Sheet - HTML 4 For Dummies, 4th Edition Index List of Figures <frameset> </frameset> List of Tables List of Listings List of Sidebars </html> The<frameset> element is the main container in a frameset document just like the <body> element is the main container in regular HTML documents. Tip The <frameset> elements should also include <noframes> elements to define content for older browsers that don't support frames or for text-only devices such as PDAs, mobile phones, and more. We encourage you to put some content in this element, even if it's only to inform the readers to visit your no-
  • frames site. HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts Using frameset attributes (408 pages) John Wiley & Sons © 2003 ISBN:0764519956 Whether your goal is After you've added the <frameset> to build a simple, text-oriented Web site define the basic frame element, you need to add attributes that or one loaded with frames, graphics, and animation, this stepstructure in terms of columns or rows. The figures you've seen so far defined frames in terms of columns by-step book will put you on the right track. but rows work just as well for the purpose, as shown in Figure 9-3. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Figure 9-3: Navigational elements are defined as a row on top of the content. Chapter 14 either rows or a Database into Your HTMLthe following two attributes in the <frameset> element: To define - Integrating columns, you use one of Chapter 15 - How HTML Relates to Other Markup Languages rows: Determines the number Part V - From Web Page to Web Site of frames that appear vertically (stacked on top of each other) in the browser Creating an the height of Chapter 16 - window andHTML Toolbox each frame. Chapter 17 - Setting Up Your Online Presence cols: Determines the number of frames that appear horizontally (placed side by side) in the browser Chapter 18 - Creating a Great User Interface window and the width of each frame used to define a column structure. Part VI - The Part of Tens Chapter 19 for both attributes defines the height or width of the frames using pixels, percentages, or a The value - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts wildcard: Part VII - Appendixes pixels: HTML 4 define Appendix A - You can Tags a fixed number of pixels (such as 50 or 250) for the row's height. This procedure seems simple, but Appendix B - HTML Character Codesbe careful: The size of the browser window can vary substantially from one user to another. If you use fixed pixel values, try using one or more relative values (described later Appendix C - Glossary Index in this chapter) with them. Otherwise the user's browser can override your specified pixel value, with no way to ensure that the total height and width of all frames equals 100 percent of the user's window. You may not want that to happen; a browser doesn't care about eyestrain. All it knows is to follow List of Figures orders and display all defined frames, even if squashed together and crammed with unreadable text. Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Tables List ofpercentages: If you define the width or height in percentages, the value should be followed by a % Listings List ofsign ("20%"). This value tells the browser, "Size this frame to a percentage of screen area, between 1 Sidebars and 100." If the total for all frames is greater than 100 percent, all percentages are reduced to fit the browser window. If the values total less than 100 percent, extra space is added to any relative-sized frames that happen to be hanging around. wildcard: You have a couple of options for the wildcard. First, an asterisk (*) character identifies a relative-sized frame. Browsers give a frame defined with the asterisk all remaining space left over after the other frames defined with pixels and percentages are laid out on the screen. If you have
  • several frames that take advantage of this flexible system, the remaining space is divided evenly HTML 4 for Dummies, value in front among them. Second, if you place a4th Edition of the *, the frame gets that much more relative ISBN:0764519956 by Ed Tittel entry such as 3*,* allocates three times as much space to the first frame (3/4 space. For instance, an and Natanya Pitts John Wiley & Sons © 2003 (408 pages) frame (which gets a measly 1/4). of the total on-screen space) as to the second Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, absolutely or relatively. If the height or width of a frame is Tip Many developers define frames eithergraphics, and animation, this stepdefined in pixels, by-stepabsolute value. If the the right track. of a frame is defined in percentages or by it's an book will put you on width or height using a wildcard, it's a relative value. Table of Contents When you define values for the cols or rows attribute, you define a value for each frame you're creating, HTML 4 For Dummies, 4th Edition The number of elements appearing in the value of the rows or cols separating them with commas. Introduction attribute determines the number of frames displayed. For example, if you want to create two frames and Part Iwant the first frame column to Environment you - Meeting HTML in Its Natural occupy 20 percent of the window and the second frame column to take Chapter remainderLeast You Need to Know about HTML and the Web up the 1 - The of the window, you use the following markup: Chapter 2 - HTML at Work on the Web Chapter 3 <frameset Creating Your First HTML Page cols="20%,*"> Part II - Getting Started with HTML Chapterwith the rows attribute, HTML Documents would look yield a markup like this: Used 4 - Structuring Your the same principle Chapter 5 - Linking to Online Resources Chapter 6 - rows="20%,*"> <frameset Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Takingheight to the Next all simultaneously displayed Tip The total HTML or width of Level window. Chapter 8 Chapter 9 frames must equal the height of the browser - HTML Tables - HTML Frames - a two-column frameset BuildingHTML Forms Chapter 10 Part IV - Extending HTML with Other Technologies To build a - Getting Stylish with CSS Chapter 11 two-column frameset, you have to add the cols attribute to the <frameset> start tag. You can use pixels, percentages, or Chapter 12 - HTML and Scripting a wildcard for the value of the cols attribute. To create the scenario displayed - Making 9-1 and 9-2, you Chapter 13 in Figures Multimedia Magic could use the following <frameset> start tag: Chapter 14 - Integrating a Database into Your HTML Chapter 15 - cols="250,500"> Other Markup Languages <frameset How HTML Relates to Part V - From Web Page to Web Site Figure 9-4 - Creating an structure. Chapter 16 illustrates thisHTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 9-4: This Web page consists of two columns. Remember The cols attribute governs how many frames can sit horizontally across the browser's screen, as well as the width of each frame. To add a third frame to the scenario, you add a new value to the comma-separated list:
  • <frameset cols="250,500,200"> 4th Edition HTML 4 for Dummies, by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Building a two- or three-row frameset Whether your goal is to build a simple, text-oriented Web site or one loaded you frames, rows attribute - much the same way you use the cols attribute To create a two-row frameset, with use the graphics, and animation, this stepby-step book will The values are the track. (detailed in the previous section). put you on the right same as those defined by the cols attribute. The only difference is that with the rows attribute, the values define height instead of width: Table of Contents <framesetrows="150,*"> HTML 4 For Dummies, 4th Edition Introduction Figure 9-5 illustrates this structure. Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need To add a third frame, add a new to Know about HTML and the Web value to the comma-separated list: Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page <frameset rows="150,400,*"> Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Figure Creating a Great User Interface Chapter 18 -9-5: The Web page consists of two rows. Part VI - The Part of Tens Figure 9-6 illustrates this structure. Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 9-6: The Web page consists of three rows, with the third row taking up the remaining height in
  • the browser. HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 CombiningWhether your goal is to build a simple, text-oriented Web site rows and columns in the same frameset or one loaded with frames, graphics, and animation, this step- When you createby-step book willnot restricted toright track. rows or only columns. You can mix them up, frames, you're put you on the using only but go easy on that technique; it isn't common (or recommended) because it can make your page harder to use. If you want to try out the frameset mix 'n' match, however, you start by defining the rows and cols Table of Contents after another. You can place these attributes just about anywhere in your markup attributes one right without affecting the placement HTML 4 For Dummies, 4th Edition of the frames. What decides the actual number of frames is how many values you Introduction put in each attribute; the example in the previous section, "Building a two- or three-row frameset," yields six in Its Natural Environment Part I - Meeting HTML frames because it collectively defines a total of six values - three rows, each with two columns. - The mind that for each frame, you need a the Web Chapter 1 Keep inLeast You Need to Know about HTML and<frame> element that points to some resource, as in the - HTML at Work on Chapter 2 following example: the Web Chapter 3 - Creating Your First HTML Page <frameset rows="33%,33%,*" Part II - Getting Started with HTML cols="20%,80%"> <frame - src="one.htm"> Chapter 4 Structuring Your HTML Documents <frame - src="two.htm"> Chapter 5 Linking to Online Resources <frame - src="three.htm"> Chapter 6 Finding and Using Images <frame - src="four.htm"> Formatting Chapter 7 Top Off Your Page with Part<frame src="five.htm">Level III - Taking HTML to the Next <frame - src="six.htm"> HTML Tables </frameset> Chapter 8 Chapter 9 - HTML Frames Chapterthe order of the frame elements assigns the content. For example, the contents of one.htm will Here, 10 - HTML Forms Part IV - Extending frame. The contents of two.htm appear in the first HTML with Other Technologies will appear in the second frame in the first row. The Chapter 11of -the three.htm will CSS Getting Stylish with appear in the first frame of the second row, and so on. Figure 9-7 contents Chapter 12 how these documents are assigned. illustrates - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List ofFigure 9-7: This frame structure has three rows and two columns, which results in six separate Tables List offrames. Listings List of Sidebars
  • HTML 4 for Content Building the FrameDummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 The previous sections Wiley & Sons © 2003 (408to define the structure, write the frameset document, and use John have shown you how pages) attributes to specify exactly how theis to build a simple, text-orientedBut that's really only part of the work. You Whether your goal frames should look and work. Web site haven't created the one loaded with frames, graphics, andThat's whatthis show you how to do in this section. or content that the frames will display. animation, we stepby-step book will put you on the right track. The<frame> element is empty, meaning it stands alone and does not require a closing tag. The primary purpose of the <frame> element is to point to the resource that you want to populate the frame. In most Table of Contents cases, that resource is an HTML document, although it can also be an image or another resource. The HTML 4 Formarkup shows Edition following Dummies, 4th <frame> elements that point to navigation.htm and content.htm Introduction documents: Part I - Meeting HTML in Its Natural Environment Chapter 1 - cols="20%,*"> <frameset The Least You Need to Know about HTML and the Web Chapter 2 HTML at Work on the Web <frame - src="navigation.htm"> Chapter 3 Creating Your First HTML <frame - src="content.htm">Page Part II - Getting Started with HTML </frameset> Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 Finding Listing -the Off and Using Images regulations framePage with Formatting rules and Chapter 7 - Top Your Part with- all things HTML-related, you must As III Taking HTML to the Next Level Chapter 8 obey the rules. Here are the highlights: - HTML Tables You - HTML Frames Chapter 9 have to define a frame element for each frame. Yes, folks, it's true - if you want to display four different HTML pages Chapter 10 - HTML Forms in frames, you have to create four frames; therefore you need (all together, now) four<frame> elements. Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 13 - Making Multimedia Magic Any documents you point to (for example, navigation.htm and content.htm) must exist Chapter 12 - HTML and Scripting first.Be careful how you define the addresses of such documents. Chapter 14 - Integrating a Database into Your HTML Remember You can define documents in frames relatively (navigation.htm) or absolutely (http://www.domain.com/navigation.htm). Just be sure they exist. See Chapter 5 on more Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site about relative and absolute links. Chapter 16 - Creating an HTML Toolbox The order in which the frame elements are defined is important. The first <frame> element - Setting Up Your Online Presence defines the top or left-most frame area (depending on whether you use the rows or cols attributes, Chapter 18 - Creating a Great User Interface respectively). The second <frame> element defines the frame immediately to the right of the first Part VI - The Part of Tens frame or (if the edge of the browser is reached) the frame in the next row. And so on. Chapter 17 Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20can Ten HTML Do’s and Don’ts You - use many different attributes with the <frame> element to modify a frame's appearance. The Part VII - Appendixes following section takes a closer look at them. Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Using frame attributes Appendix C - Glossary Index As with tables, frames have many attributes you can use to alter their appearance within the Web browser. Cheat can turn HTML 4 For Dummies, 4th Edition frame margins, or disallow scrolling for a particular frame. You Sheet - a frame border on or off, define List of following sections show you how. The Figures List of Tables Borders List of Listings List of Sidebars Theframeborder attribute enables you to turn a border on or off. You can individually specify whether you want the frames within your frameset to have borders. Borders help your readers differentiate between frames, but they can also get in the way of a seamless page. The value of the frameborder attribute can be 1, to turn the border on, or 0 to turn the border off. <frameset cols="20%,*"> <frame src="navigation.htm" frameborder="1">
  • <frame src="content.htm" frameborder="0"> </frameset> HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 Warning The default value for the 2003 (408 pages) attribute is 1. If you don't want borders around your John Wiley & Sons © frameborder frames, you haveWhetherthe frameborder attribute to turn them off (0). to use your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this step- Figure 9-8 showsby-step book will put you on the turned off; Figure 9-9 shows it with borders turned on. the example site with borders right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Figure 9-8: Borders turned off using frameborder="0". Part IV - Extending HTML with Other Technologies Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index CheatFigure -9-9: Borders Dummies, 4th Edition Sheet HTML 4 For turned on using frame-border="1". List of Figures List of Tables Margins List of Listings List of can determine the margin height and width for any frame by using the following attributes: You Sidebars marginwidth: Accepts a value of 1 or more pixels to determine the exact width of the left and right margins of a frame. marginheight: Accepts a value of one or more pixels to determine the exact height of the controls at the top and bottom margins of a frame. Once defined, the margins show up as white space in a browser's display; therefore, you can use these
  • attributes to nicely separate the content in one frame from the content in another. Margins must be one or more pixels wide HTML 4 objects from touching the edges of a frame. The marginwidth and to keep for Dummies, 4th Edition ISBN:0764519956 by Ed Tittel and NatanyaIf you omit this attribute, the browser sets its own margin widths marginheight attributes are optional. Pitts John Wiley & Sons © 2003 the browser). (408 pages) (usually one or two pixels, depending on Whether your goal is to build a simple, text-oriented Web site or one loaded width, add the attributes to the frame elements: To define the margin height or with frames, graphics, and animation, this stepby-step book will put you on the right track. <frameset cols="20%,*"> <frame src="navigation.htm" frameborder="0" marginwidth="20" Table of Contents HTML 4marginheight="20"> For Dummies, 4th Edition <frame Introduction src="content.htm" frameborder="0" marginwidth="20" marginheight="20"> </frameset> Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Scrolling framesWork on the Web Chapter 2 - HTML at Chapter 3 - Creating One helpful attribute, Your First HTML Page you to turn a scroll bar on and off for any given frame. When scrolling, enables added to the <frame> element, you must define a value of yes,no, or auto: Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 Forces theto Online Resources a scroll bar for the frame. yes: - Linking browsers to display Chapter 6 - Finding and Using Images no: Does notOff Your Page with Formatting display a scroll bar for the frame. Chapter 7 - Top Part III - Taking HTML to the Next Level auto: Displays a scroll bar only if more content than fits in the window is displayed. This is the default value. - HTML Tables Chapter 8 Chapter 9 - HTML Frames Chapter 10 - HTMLwe force the first frame to have a scroll bar, and require the browser to not display a scroll For our example, Forms Part IV - the secondHTML with Other Technologies over. bar for Extending page, even if the content runs Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting <frameset cols="20%,*"> Chapter 13 - src="navigation.htm" frameborder="0" scrolling="yes"> <frame Making Multimedia Magic Chapter 14 - src="content.htm" frameborder="0" scrolling="no"> <frame Integrating a Database into Your HTML </frameset> Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Figure 9-10 Creating the features described in this example when rendered in a browser. Chapter 16 - illustratesan HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 9-10: The browser window displays a scroll bar for the first frame, yet leaves it off for the second frame, even though the content is cut off.
  • HTML 4 for Dummies, 4th Edition Targeting Links within a Frameset by Ed Tittel and Natanya Pitts ISBN:0764519956 Targeting links within a frameset is © 2003 (408 pages)get tricky, and usability can be thrown out the window if John Wiley & Sons where frames you’re not careful. To illustrate goal concept ofatargeting links, consider the example in Figure 9-1 where we Whether your the is to build simple, text-oriented Web site define a frameset document with two vertical frames: a skinny one on the left that serves as a navigation or one loaded with frames, graphics, and animation, this stepdocument, and aby-stepone on the right where the bulk of the content your users see shows up. wider book will put you on the right track. Say you want to create hyperlinks in the document that lives in the skinny frame on the left that, when Table of Contents clicked, cause new Web documents to load in the wide frame on the right. This is actually a common HTML 4 dilemma, because frames are often used to separate navigation from content. frame For Dummies, 4th Edition Introduction If you Meeting HTML in Its Natural Environment Part I - don’t define the behavior correctly and click a hyperlink in the navigation frame, the contents will most likely display in your browser window in place ofand the Web Chapter 1 - The Least You Need to Know about HTML the two frames. You need to make sure you target the link Chapter 2correctly so the linked the Web - HTML at Work on document replaces only the right frame, not the entire browser window. Chapter 3 - Creating Your First HTML Page Two steps are all you need to define how links behave in a frame structure: Part II - Getting Started with HTML 1. 4 - each frame in HTML Documents Chapter NameStructuring Your the frameset document. Chapter 5 2. Point Linking to Online Resources the link at the named frame. Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Naming the frame Part III - Taking HTML to the Next Level Chapter 8 To name the HTML Tables frameset document, you add the name attribute to the <frame> element as frame in the - HTML Frames follows: Chapter 9 Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies <frameset cols="20%,*"> - Getting Stylish with CSS <frame src="navigation.htm" frameborder="0" name="nav"> Chapter 12 - HTML and Scripting <frame src="content.htm" frameborder="0" name="content"> Chapter 13 - Making Multimedia Magic </frameset> Chapter 11 Chapter 14 - Integrating a Database into Your HTML Chapter 15 name of the frame can be almost anything you can think of, but we think you should keep the Tip The - How HTML Relates to Other Markup Languages Part V - From Web Page to WebIn our names short and descriptive. Site example, we named the frame that always contains the main content of our 16 - Creating Real creative? Maybe not. But definitely more useful than calling it spaghetti. Chapter site, content. an HTML Toolbox Chapter 17 - Setting Up Your Online Presence - the link to the target PointingCreating a Great User Interface frame Chapter 18 Part VI - The Part of Tens Chapter 19 name the frame, you can use the <a> element with the target attribute to create a link that After you - Ten Ways to Exterminate Web Bugs opens 20 - named frame. The following example creates a link in the navigation.htm document that Chapter in that Ten HTML Do’s and Don’ts opens history.htm Part VII - Appendixes in the content.htm window: Appendix A - HTML 4 Tags <a href="history.htm" target="content">History</a> Appendix B - HTML Character Codes Because target window name is already defined, the browser opens history.htm in the frame named Appendix Ca - Glossary content. Targeting works by giving you control over where the linked page (or other resource) appears Index when a user HTML a link in your documents. Cheat Sheet - clicks 4 For Dummies, 4th Edition List of Figures Normally, when a user clicks a link, the browser displays the new document in the current, entire browser window (not just in a frame). Targeting enables you to change that: You can assign names to specific List of Listings frames — using the name attribute — and require certain documents to appear in the frame that bears the List of Sidebars targeted name. List of Tables Tip As with the name attribute, any valid frame name you specify in a target attribute must begin with an alphanumeric character. The target attribute introduces a few predefined exceptions (covered shortly) that begin with an underscore character. Remember, however, that any targeted frame name starting with an underscore or a non-alphanumeric character (provided the name has no special purpose) gets ignored.
  • Using predefined values 4th Edition HTML 4 for Dummies, by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Other than naming a specific frame name, you can use four predefined values with the target attribute: Whether your goal is to build a simple, text-oriented Web site _self: Specifying the _self target always causes the linked document to load inside the frame that contains the or one loaded with frames, graphics, and animation, this stephyperlink. All links act this way by default. by-step book will put you on the right track. _blank: Specifying the _blank target causes the linked document to load inside a new browser window, which is an easy way to force the user’s browser to launch another window. The _blank Table of Contents attribute can be useful if you want to link to someone else’s site. But, make sure that your site is HTML 4 For Dummies, 4th Edition immediately available to users in the first browser window that never went away. Introduction Part I - Meeting HTML in Its Natural Environment Warning Don’t overuse _blank targets. Visitors to your site won’t appreciate new browser windows Chapter 1 - The Least time. popping up all the You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web _parent: Specifying the _parent target makes the linked document load in the immediate frameset Chapter 3 - Creating Your First HTML Page parent of the document. If the Part II - Getting Started with HTML current document in which the _parent target appears has no parent, this attribute behaves likeHTML Documents the _self value. Chapter 4 - Structuring Your Chapter 5 - Linking to Online Resources _top: Specifying the _top target makes the linked document load in the full body of the window. If Chapter 6current document is already at the top of the document hierarchy, the _top target name behaves - Finding and Using Images the Chapter 7_self. You can use this attribute to escape from a deeply nested frame. - Top Off Your Page with Formatting like Part III - Taking HTML to the Next Level Chapter 8 Tip If you - HTML Tables get carried away using frames nested within frames nested within frames, or you link to someone - HTML Frames Chapter 9 else’s framed site only to find their frames loading inside yours, you can use target="_top" to cancel - your Forms Chapter 10 out HTML frameset and revert back to a simple HTML page. Part IV - Extending HTML with Other Technologies - Getting targeted-link rules Zeroing in onStylish with CSS Chapter 11 Chapter 12 - HTML and Scripting Understanding targeted links may take Chapter 13 - Making Multimedia Magic a bit of wrestling. Keep a few things in mind while you grapple: Chapter 14 - Integrating a Database into Your HTML You must name the frames in the frameset document: For our example, we named our two - How HTML Relates to Other Markup Languages framesnav and content. Chapter 15 Part V - From Web Page to Web Site Chapter 16must targetan HTML Toolbox You - Creating your links defined in the HTML documents that populate the windows: For our Chapter 17 - Setting Upto target all the links in navigation.htm to point to the content window. example, we want Your Online Presence Chapter 18 - Creating a Great User Interface Check Part of Tens Part VI - The all links before the site goes live to verify that links are targeted correctly: This is always a good-practice, whether you’re using Bugs or not. Chapter 19 Ten Ways to Exterminate Web frames Chapter 20 - Ten HTML Do’s and Don’ts If linking to a document outside of your site, you can use target="_blank" to force that document to open in a new, separate browser window: That circumvents some of the Appendix A - HTML 4 Tags unpredictability — always a good thing — of how the document will appear when it opens. Part VII - Appendixes Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Nesting FramesetsDummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 Nesting frames introduces a&new twist to (408 pages) John Wiley Sons © 2003 the traditional frame structure, for example: Whether your goal is to build a simple, text-oriented Web site <frameset> or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. <frame> <frame> </frameset> Table of Contents HTML 4 For Dummies, 4th Edition In this example, we define one frameset that contains two frame documents. Remember, for every document included in the frameset, there must be a corresponding <frame> element. Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1a frame into smaller frame Know about HTML and the Web a <frameset> element within the - The Least You Need to components, you have to nest To split Chapter 2frameset: at Work on the Web - HTML original Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML <frameset> Chapter 4 - Structuring Your HTML Documents <frameset> Chapter 5 - Linking to Online Resources <frame> Chapter 6 - Finding and Using Images <frame> Chapter 7 </frameset> Your Page with Formatting - Top Off Part<frame> III - Taking HTML to the Next Level </frameset> Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Our example uses two sets of <frameset> tags. The outermost set defines the primary structure, and the second set defines the structure for the left frame. A third set is not needed for the right frame because Chapter 11 - Getting Stylish with CSS it's only a single frame. Part IV - Extending HTML with Other Technologies Chapter 12 - HTML and Scripting Chapter 13 - the navigation frame in the example we have been using throughout this chapter: We can split Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages <frameset cols="250,*" frameborder="1" framespacing="0"> Part<frameset rows="85%,*" V - From Web Page to Web Site frameborder="1" framespacing="0"> Chapter 16 - Creating an HTML Toolbox <frame src="navigation.htm" frameborder="1" framespacing="0" Chapter 17 - Setting Up Your Online Presence scrolling="yes"> Chapter 18 - Creating a Great User Interface <frame src="note.htm" frameborder="1" framespacing="0"> Part</frameset> Tens VI - The Part of Chapter 19 - src="content.htm" frameborder="1" framespacing="0"> <frame Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts </frameset> Part VII - Appendixes The second HTML 4 Tags Appendix A - frameset functions much like the first set. You can even use the same attributes. In this example, we split the first frame into two rows, and therefore, use the rows attribute. Keep in mind that adding a new frame here calls for three <frame> elements. Figure 9-11 shows the resulting new Appendix C - Glossary frameset. Appendix B - HTML Character Codes Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 Figure -9-11: The first frame, split into two smaller frames that contain navigational elements and a Structuring Your HTML Documents note Chapter 5 to -users. to Online Resources Linking Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • for Dummies, Chapter HTML Tittel and Natanya4th Edition 10: 4HTML Forms by Ed Pitts Overview ISBN:0764519956 John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepIn This Chapter by-step book will put you on the right track. Using forms in your Web pages Table of Contents HTML Creating forms 4th Edition 4 For Dummies, Introduction Working with form data Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You forms Designing easy-to-use Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Most of Chapter 3the -HTML you write helps you display content and information for your users. Sometimes, Creating Your First HTML Page however, you want a Web page to Part II - Getting Started with HTML gather information from users instead of giving info to them. HTML form markup givesStructuring Your HTML Documents you a healthy collection of elements and attributes you can use to create forms for collecting Chapter 4 information-from visitors to your site. Chapter 5 Linking to Online Resources Chapter 6 This chapter Finding and Using Images different uses for forms. It also shows you how to use form markup takes a look at the many Chapter 7 justTop Off Your Page with Formatting to create - the right form for soliciting information from your users, reviews your options for working with Part III - Taking HTML to the Next Level the data you receive, and gives you some tips for creating easy-to-use forms that really help your users Chapter 8the -information you’re looking for. HTML Tables provide Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML for Forms The Many Uses4for Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 Although you can find Wiley & Sons © 2003 unique forms on the Web, every form is driven by the same set of John literally millions of (408 pages) markup elements. Handily enough,is to build a simple, text-oriented Web site Whether your goal they all fall into one of two broad categories: or one loaded with frames, graphics, and animation, this step- Search forms: These give users you on to submittrack. criteria. by-step book will put a way the right search Data collection forms: These give your users a way to provide information for many uses such as Table of Contents online shopping, technical support, site preferences, and personalization. HTML 4 For Dummies, 4th Edition Web forms can be short or long, simple or complex, and they have myriad uses on the Web. Here are just a few examples of how forms are used: Part I - Meeting HTML in Its Natural Environment Introduction Chapter 1 Doing - The Leastsearch: When youabout HTML and the Web search a site or the entire Web, you enter an online You Need to Know use a search engine to Chapter 2 search criteria in a form. Web your - HTML at Work on the Chapter 3 - Creating Your First HTML Page Logging on to a site to view Part II - Getting Started with HTML customized content: When you log on to a site, you enter your username and password HTML Documents Chapter 4 - Structuring Your in a form. This type of form is a data-collection form. Chapter 5 - Linking to Online Resources Shopping online: When you shop online or reserve travel online, you enter your selections and credit - Finding and Using Images card information in this type of data- collection form. Chapter 6 Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Providing feedback to a site owner: When you send feedback to a Web site’s creator or ask for Chapter 8 - support via technicalHTML Tables a Web site, you use this data collection form to provide all the pertinent details. Chapter 9 - HTML Frames Technical HTML Forms Chapter 10 -Stuff Before you create any form markup, you need to have a good idea of what kind of data you need to collect. Your data is what drives the Part IV - Extending HTML with Other Technologies form elements you use — and the way you put them together on-aGetting— so make sure you understand what data you need before you collect it. page Stylish with CSS Chapter 11 Chapter 12 - HTML and Scripting Introducing search forms - Making Multimedia Magic Chapter 13 Chapter 14 - Integrating a Database into Your HTML You’d 15 - How at the many to Other Markup Languages Chapter be amazed HTML Relates ways forms can help users search a site, or even the Web itself. For example, the IRS home Web Site Part V - From Web Page topage (shown in Figure 10-1) uses two different single-field forms to help visitors to its site search for general information or to search for tax forms. Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 10-1: The IRS home page uses two short search forms to help users find what they are looking for in minimum time. The Get Refund Status page, however, has a different function: You can use it to search IRS records for the status of your refund. This page is a little more complicated, as shown in Figure 10-2.
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Figure -10-2: The refund status search form is a little more complex. Chapter 5 Linking to Online Resources Chapter 6 - Finding and Using Images The difference between the simple search forms on the home page and the slightly longer refund search Chapter 7 - Top Off Your Page form is the kind of data the IRSwith Formatting you to search the site. When you enter keywords into the site needs from Part III - Taking HTML to the Next Level fields on the home page, you may get dozens of relevant responses, which is okay: You can pick and Chapter 8from HTML Tablesand find the one that relates to you. - the options choose Chapter 9 - HTML Frames This strategy won’t work Chapter 10 - HTML Formson the refund status page because refund information is sensitive and the IRS doesn’t want you HTML through dozens of possible Part IV - Extendingtrollingwith Other Technologies responses to find your information; the engine that drives 11 - Getting your refund status needs more detailed information to find the exact data you’re Chapter the search for Stylish with CSS looking for. Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Remember Because searches come in all shapes and sizes, so must the search forms that drive those - Integrating a Database into Your HTML searches. If you plan to add a search form to your Web site, you must carefully consider what kind of data Chapter 15 - How HTML Relates to Other Markup Languages visitors will be searching and what information you’ll need from them to help them search successfully. A Part V - From Web Page to Web Site short keyword search may do the trick, or you may need something more complicated. Chapter 14 Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Introducing data collection forms Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Data collection is a general category that describes every form on the Web that doesn’t help someone - Ten Ways to Exterminate Web Bugs search for something. For example, the Library of Congress (LOC) uses a form to collect the information it Chapter to subscribe teachers to a free electronic newsletter, as shown in Figure 10-3. 20 - Ten HTML Do’s and Don’ts needs Chapter 19 Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 Figure -10-3: A subscription form collects information to help teachers subscribe to an online Structuring Your HTML Documents newsletter. Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 9 - HTML Frames Chapter 10 - HTML Forms The LOC doesn’tOff Your Pageinformation to set up the subscription, so the form is short and simple. By need much with Formatting Chapter 7 - Top contrast, RateGenius to the Next Levelrefinancing organization) uses a series of long and detailed forms to (a car-loan and Part III - Taking HTML gather the information it needs to help customers get the best possible loan rate. The form shown in Chapter 8 - HTML Tables Figure 10-4 is just the first of several a visitor must fill out to provide all the necessary information. Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Figure Glossary Appendix C -10-4: An online car loan site uses many long and detailed forms to collect necessary data. Index Tip When you create a form that collects information from visitors to your site, the information you need to acquire drives the final structure of the form and its complexities. If you need a lot of information, your List of Figures long and you may even use several forms. If you need just a little information, the form may form may be List of Tables (relatively) sweet. be short and Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Listings List of Sidebars
  • HTML 4 Creating Forms for Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 The HTML form markup elements © 2003 (408 pages) into one of two categories: John Wiley & Sons and attributes fall Whether your goal is to build a simple, text-oriented Web site Elements that define the overall form structure and let the Webthis step- know how to handle the form or one loaded with frames, graphics, and animation, browser data. by-step book will put you on the right track. Elements that create input objects: fields, check boxes, drop-down lists, and the like. Table of Contents Although Dummies, has the same basic structure, the input elements you use differ depending on the data HTML 4 Forevery form 4th Edition you’re trying to collect. Introduction Part I - Meeting HTML in Its Natural Environment Basic form Least You Need to Know about HTML and the Web - The structure Chapter 1 Chapter 2 - HTML at Work on the Web All of the input elements associated with a single form are contained with a <form> element and are all - Creating Your First HTML Page processed by the same form handler. A form handler is a program on the Web server (or even possibly a Part II - Getting Started with HTML simplemailto URL) that manages the data a user sends to you via the form. Chapter 3 Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources A Web browser is only programmed to gather information via forms; it doesn’t know what to do with the Chapter 6 Finding and You Images information-once it has it.Using have to provide some other mechanism to actually do something useful with the Chapter 7 collect. A later section in this chapter (“What Do You Want to Do with Your Form Data”) discusses data you - Top Off Your Page with Formatting Part III - Takingin more detail. form handlers HTML to the Next Level Chapter 8 - HTML Tables The two - HTML Frames Chapter 9 key attributes you must always use with the <form> element are Chapter 10 - HTML Forms action: Uses a URL to specify the location of the form handler. Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS the form data to be sent to the form handler. The two possible values for method: Specifies how you want Chapter 12 - HTML and Scripting this attribute are get and post. If you specify get, the form data is sent to the form handler on the URL. Chapteryou specify post, the form data is sent in the Hypertext Transfer Protocol (HTTP) header. Your specific If 13 - Making Multimedia Magic Chapter 14 handler dictates Database intoto use. form - Integrating a which value Your HTML Chapter 15 - How HTML Relates to Other Markup Languages For a good overview Web Site Part V - From Web Page to of the difference, read the Good Forms article on the Webmonkey site at http://hotwired.lycos.com/webmonkey/99/30/index4a_page3.html Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence The markup in Listing 10-1 creates a form processed by a form handler (on the Web server named Chapter 18 - Creating a Great User Interface guestbook.cgi) and sent to the handler via the post method. Part VI - The Part of Tens Chapter 19 - TenSimple Form Processed by a Form Handler Listing 10-1: A Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes <html> <head> Index <title>Forms</title> Cheat Sheet - HTML 4 For Dummies, 4th Edition </head> Appendix C - Glossary List of Figures List of Tables <body> List of Listings action="cgi-bin/guestbook.cgi" method="post"> <form List of Sidebars <!-- form input elements go here --> </form> </html>
  • Remember The value of the action attribute is a URL, so you can use absolute or relative URLs to point to HTML a form handler on your 4 for Dummies, 4th Edition site. by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Using input elements is to build a simple, text-oriented Web site Whether your goal or one loaded with frames, graphics, and animation, this step- The elements you use tobook will put fromon thesite visitors make up the bulk of any form. HTML supports a by-step solicit input you your right track. variety of different input options — from text fields to radio buttons to images. There are three HTML elements that you use to create input controls: Table of Contents HTML <input>: Uses 4th Edition attribute to define several different controls, including text and password fields, 4 For Dummies, the type check Introduction boxes, radio buttons, submit and reset buttons, hidden fields, and images. Part I - Meeting HTML in Its Natural Environment <select> and <option>: Used together to create drop-down lists. Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML Creates a the Web <textarea>:at Work on multiline text-input field. Chapter 3 - Creating Your First HTML Page Every input control, regardless of Part II - Getting Started with HTML the type, associates some value with a name. When you create the control, you give it a name and the control sends back a value based on what the user does in the form. For example, Chapter 4 - Structuring Your HTML Documents if you 5 - Linking to that collects someone’s first name, you might name the field firstname. When the Chaptercreate a text fieldOnline Resources user types his or her and Using Imagesfield and submits the form, the value associated with firstname is first name in the Chapter 6 - Finding whatever name the user typed with Formatting in the field. Chapter 7 - Top Off Your Page Part III - Taking HTML to the Next Level Remember For input elements that require a user to select an option (such as a check box or radio button), Chapter than - HTMLsomething into a field, you define both the name and the value. When the user selects a box rather 8 typing Tables Chapter 9 - HTML Frames or a button and hits the submit button, the form returns the name and value assigned to the element. Chapter 10 - HTML Forms Tip - Extending HTML a form is to gather values Part IVThe whole point of with Other Technologies associated with input controls, so the way you set the name and value - each control with CSS Chapter 11 forGetting Stylish is important. The following sections explain how you should work with names and values for - HTML and Scripting Chapter 12 each of the various controls. Chapter 13 - Making Multimedia Magic Text fields - Integrating a Database into Your HTML Chapter 14 Chapter 15 are single-line fields to Other Markup Languages Text fields - How HTML Relates that users can type information into. You define a text field using the <input> Part V - From Web type to Web Site element and the Page attribute with a value of text. You use the name attribute to give the input field a Chapter 16 - Creating an HTML Toolbox when he or she types in the field. This markup creates two text input name, and the user supplies the value Chapter one for a first name and one Presence name: fields: 17 - Setting Up Your Online for a last Chapter 18 - Creating a Great User Interface <form action="cgi-bin/guestbook.cgi" action="post"> <p>First Name: <input type="text" name="firstname"></p> Chapter 19 - Ten Ways to Exterminate Web Bugs <p>Last Name: <input type="text" name="lastname"></p> Chapter 20 - Ten HTML Do’s and Don’ts </form> Part VI - The Part of Tens Part VII - Appendixes Appendix of the TradeTags Tricks A - HTML 4 Notice that in addition to the input elements, the form includes paragraph (<p>) Appendix B and some text to label each of the fields. By themselves, most form elements won’t give the user elements - HTML Character Codes many clues Glossary Appendix C -about what kind of information you want him or her to provide. You also have to use HTML block and Index inline elements to format the display of your form. Figure 10-5 shows how a browser displays this HTML. Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 10-5: Text entry fields in a form.
  • Notice that the browser makes both text fields the same length. You can control both the length of the text HTML 4 for Dummies, 4th can type fields and the number of characters the userEdition into the field by using the size and maxlength by Ed Tittel and creates a modified version of ISBN:0764519956sets both fields to a size of 30 and attributes. The following markup Natanya Pitts the form that John Wiley sets the maxlength to 25. & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site <form action="cgi-bin/guestbook.cgi" action="post"> stepor one loaded with frames, graphics, and animation, this <p>First Name: <input will put you on the right track. by-step book type="text" name="firstname" size="30" maxlength="25"></p> <p>Last Name: <input type="text" name="lastname" size="30" maxlength="25"></p> </form> Table of Contents Each For will be approximately HTML 4field Dummies, 4th Edition 30 characters wide; even so, a user can only type 25 characters into each field, as shown in Figure 10-6. Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 HTML Tables Figure -10-6: You can specify the length and the maximum number of characters for a text field. Chapter 9 - HTML Frames Chapter 10 - HTML Forms Password fields Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS A password HTML and Scripting Chapter 12 - field behaves just like a text field, except that when a user types into the field, the text the user types is obscured by an asterisk, bullet, or other character so someone looking over his or her shoulder can’t Chapter 13 - Making Multimedia Magic see what is being typed. Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languageswith a type attribute set to password, as follows: You create a password field using the <input> element Part V - From Web Page to Web Site <form action="cgi-bin/guestbook.cgi" action="post"> - Creating an HTML Toolbox <p>First Name: <input type="text" name="firstname" size="30" maxlength="25"></p> Chapter 17 - Setting Up Your Online Presence <p>Last Name: <input type="text" name="lastname" size="30" maxlength="25"></p> Chapter 18 - Creating a Great User Interface <p>Password: <input type="password" name="psswd" size="30" maxlength="25"></p> Part VI - The Part of Tens </form> Chapter 16 Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - shows how a browser replaces what you type with asterisks. Figure 10-7 Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 10-7: Password fields are like text fields except that the browser masks the text a user enters. Check boxes and radio buttons You can use check boxes and radio buttons to give users a collection of possible options they can choose from. When you use check boxes, users can choose more than one option from a collection, but when you
  • use radio buttons they can only choose one option. HTML 4 for Dummies, 4th Edition ISBN:0764519956 To create radio buttonsTittel and Natanya Pitts use the <input> element with the type set to radio or by Ed and check boxes, you checkbox. Because users & Sons © 2003 (408 pages) option rather than typing text into a field, you use the name John Wiley are simply selecting an attribute to give each option a name andbuild value attribute to specify what value is returned if the user Whether your goal is to the a simple, text-oriented Web site or one loaded can also use the checked attribute to stepselects a particular option. Youwith frames, graphics, and animation, thisspecify that an option should be already by-step book will put you on the right track. selected when the browser displays the form. This is a good way to specify a default selection in a list. Here’s some markup that shows how to format check box and radio button options: <form action="cgi-bin/guestbook.cgi" action="post"> Table of Contents <p>What are some Edition HTML 4 For Dummies, 4thof your favorite foods?</p> <p><input type="checkbox" name="food" value="pizza" checked>Pizza<br> Introduction Part I<input type="checkbox"Environment - Meeting HTML in Its Natural name="food" value="ice cream">Ice Cream<br> <input The Least You Need to Know about HTML value="eggsham">Green Eggs and Ham<br> Chapter 1 - type="checkbox" name="food" and the Web </p> Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page <p>What is your gender?</p> <p><input type="radio" name="gender" value="male">Male<br> Chapter 4 - Structuring Your HTML Documents <input type="radio" name="gender" value="female" checked>Female Chapter 5 - Linking to Online Resources </p> Chapter 6 - Finding and Using Images </form> Part II - Getting Started with HTML Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTMLof options uses the Notice that each set to the Next Level same name for each input control but gives a different value to each Chapter 8 HTML Tables option. You-give each item in a set of options the same name to let the browser know they are part of a set. Chapter 9 HTML how a Figure 10-8- shows Framesbrowser displays this markup. Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Figure Ten Check boxes Don’ts Chapter 20 -10-8: HTML Do’s andand radio buttons. Part VII - Appendixes Appendix A - HTML 4 Tags Hidden fields Appendix B - HTML Character Codes Appendix C - Glossary a way to collect name and value information that the user can’t see along with the rest Ahidden field gives you Index form data. Hidden fields are useful if you want to keep track of information associated with the form of the (such as its HTML For Dummies, 4th Edition Cheat Sheet -version4or name). List of Figures If your ISP provides a generic application for a guest book or feedback form, you may have to supply your name and e-mail address in the form’s hidden fields so the application sends your form data specifically to List of Listings you. To create a hidden field, you use the <input> element with its type attribute set to hidden, and then List of Sidebars supply the name and value pair you want to send to the form handler. Here’s an example: List of Tables <form action="cgi-bin/guestbook.cgi" action="post"> <input type="hidden" name="e-mail" value="me@mysite.com"> <p>First Name: <input type="text" name="firstname" size="30" maxlength="25"></p> <p>Last Name: <input type="text" name="lastname" size="30" maxlength="25"></p> <p>Password: <input type="password" name="psswd" size="30" maxlength="25"></p> </form>
  • File upload fields 4 for Dummies, 4th Edition HTML ISBN:0764519956 You can also useby form to give users a way to share documents and other files with you. When the user a Ed Tittel and Natanya Pitts John browserSons © 2003 (408of the file and sends it with the other form data. To create this file Wiley & grabs a copy pages) submits the form, the upload field, you Whether <input> is to buildwith the type attribute Webto file. The file itself is the form field use the your goal element a simple, text-oriented set site orname attribute to give the control a name. value; you use the one loaded with frames, graphics, and animation, this step- by-step book will put you on the right track. <form action="cgi-bin/guestbook.cgi" action="post"> <p>Please submit your resume in Microsoft Word or plain text format:</br> Table <input type="file" name="resume"> of Contents HTML 4 For Dummies, 4th Edition </p> Introduction </form> Part I - Meeting HTML in Its Natural Environment Browsers - The a file You Need to with a browse button the Web Chapter 1 render Least upload field Know about HTML andusers can use to surf their local hard drive and select a file to Chapter 2send HTML atas shownthe Figure 10-9. - to you, Work on in Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending A file upload field. Figure 10-9: HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Warning When and Scripting Chapter 12 - HTMLyou accept files from users via a form, you open yourself up to receiving extremely large files or 13 -that might be infected by viruses. You should consult with whoever is programming your form Chapter files Making Multimedia Magic handler to discuss options for protecting the system files are saved to. You can put several barriers in place Chapter 14 - Integrating a Database into Your HTML that can help minimize your risks, including virus scanning software, restrictions on file size, and restrictions on Chapter 15 - How HTML Relates to Other Markup Languages file type. Part V - From Web Page to Web Site Chapter 16 - Creating Drop-down lists an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 of radio buttons or check boxes can take up a lot of screen real estate and make your page look Long lists - Creating a Great User Interface Part VI - The Part of Tens cluttered.Drop-down lists give you an alternative method for giving users lots of options to choose from. You Chapter 19 - Ten Ways to Exterminate Web Bugs use two elements to create a drop-down list: <select> to hold the list and a collection of <option> elements - Ten HTML list and Don’ts Chapter 20 to identify theDo’soptions. You use a name attribute with the <select> element to give the entire list a name, and the value Part VII - Appendixes attribute with each <option> element to assign a unique value for each. Here’s an example: Appendix A - HTML 4 Tags Appendix B - HTML Character Codes <form action="cgi-bin/guestbook.cgi" action="post"> Appendix C is your favorite food?</p> <p>What - Glossary Index <select name="food"> <option value="pizza">Pizza</option> Cheat Sheet - HTML 4 For Dummies, 4th Edition <option List of Figures value="ice cream">Ice Cream</option> <option List of Tables value="eggsham">Green Eggs and Ham</option> </select> List of Listings </form> List of Sidebars The browser turns this markup into a drop-down list with three items, as shown in Figure 10-10.
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML Figure 10-10: A 4th Edition list. 4 For Dummies, drop-down Introduction Tip As with radio buttons, the default allows a Part I - Meeting HTML in Its Natural Environment user to choose only one option from your list. If you want your user to choose more than one option (usually by holding the Web Alt or Cmd key while clicking options in the Chapter 1 - The Least You Need to Know about HTML and down the list), add the multiple attribute to the <select> element. - HTML at Work on the Web Chapter 2 Chapter 3 - Creating Your First HTML Also, by default, the browser displays Page one option until the user clicks the drop-down menu’s arrow to only size attribute with the <select> element to specify how many of the Chapter 4 options to show. If there are more options than you specify, the browser includes a scroll bar in the available - Structuring Your HTML Documents Chapter 5 drop-down - Linking to Online Resources list. Part II - Getting Startedlist. Use the display the rest of the with HTML Chapter 6 - Finding and Using Images You can - Top Off one Page options in the Chapter 7 specify that Your of thewith Formattingdrop-down list is already selected when the browser loads the page, - Taking HTML specify a check Part IIIjust as you canto the Next Level box or radio button to be checked. Simply add the selected attribute to the 8 - HTML Tables Chapter<option> element you want selected. Chapter 9 - HTML Frames This modification to the markup given earlier allows the user to choose more than one option from the list and - HTML Forms sets the number of options to display to two. Also, the third option in the list is selected by default. Chapter 10 Part IV - Extending HTML with Other Technologies <form action="cgi-bin/guestbook.cgi" action="post"> - Getting Stylish with CSS <p>What are some of your favorite foods?</p> Chapter 12 - HTML and Scripting <select name="food" size="2" multiple> Chapter 13 - Making Multimedia Magic <option value="pizza">Pizza</option> Chapter 14 - Integrating a Database into Your HTML <option value="ice cream">Ice Cream</option> Chapter 15 - How HTML Relates to Other Markup Languages <option value="eggsham" selected>Green Eggs and Ham</option> Part V - From Web Page to Web Site </select> Chapter 16 - Creating an HTML Toolbox </form> Chapter 11 Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creatinghow adding these attributes modifies the display of the list in a browser. Figure 10-11 shows a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List ofFigure 10-11: A drop-down list with modifications. Tables List of Listings List of Sidebars Multiline text boxes Often, a single-line text field won’t provide your users with enough room to include large chunks of text in a form. If you want to create a text box instead of a text field, use the <textarea> element to define the box and its parameters. Use the rows and columns attributes to specify the height and width of the box. The text the user types into the box provides the value, so you need only give the box a name with the name attribute: <form action="cgi-bin/guestbook.cgi" action="post">
  • <textarea rows="10" columns="30" name="comments"> HTML 4 any comments Edition Please include for Dummies, 4th here. ISBN:0764519956 by </textarea> Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) </form> Whether your goal is to build a simple, text-oriented Web site or between with frames, graphics, </textarea> tags displays in the text box in the Any text you includeone loadedthe <textarea> and and animation, this stepby-step book will put browser, as shown in Figure 10-12. you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Chapter 8 - HTML Tables Figure 10-12: A to the Next Level Part III - Taking HTML text box. Chapter 9 and reset buttons Submit - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Visitors need a way to let a browser know they are done with a form and are ready to send the contents. They Chapter 11 a way to clear the form if they want to start all over again or decide not to fill it out after all. You use also need - Getting Stylish with CSS the<input> element Scripting Chapter 12 - HTML andwith a type of submit to create a button users can click on to submit the form to you. You use the Making Multimedia with Chapter 13 - <input> element Magica type of reset to create a button that clears the form. These buttons help the user tell the browser what into Your the form, but don’t actually send you any information. This Chapter 14 - Integrating a Database to do withHTML means you How HTML Relates name and value labels for Chapter 15 -don’t need to set upto Other Markup Languages them, but you do use the value attribute to specify how - From Web Page to Web Site Part V the browser labels the buttons for display. Here’s an example: <form action="cgi-bin/guestbook.cgi" action="post"> Chapter 16 - Creating an HTML Toolbox <p>First Setting <input type="text" name="firstname" size="30" maxlength="25"></p> Chapter 17 - Name: Up Your Online Presence <p>Last - Creating a Great User Interface Chapter 18 Name: <input type="text" name="lastname" size="30" maxlength="25"></p> <p>Password: <input Part VI - The Part of Tens type="password" name="psswd" size="30" maxlength="25"></p> Chapter 19 - Ten Ways to Exterminate Web Bugs <p>What - Ten HTML of and Don’ts Chapter 20 are some Do’s your favorite foods?</p> <p><input type="checkbox" Part VII - Appendixes name="food" value="pizza" checked>Pizza<br> <input HTML 4 Tags type="checkbox" name="food" value="ice cream">Ice Cream<br> Appendix A <input type="checkbox" name="food" value="eggsham">Green Eggs and Ham<br> Appendix B - HTML Character Codes </p> Appendix C - Glossary Index <p>What is your gender?</p> <p><input type="radio" name="gender" value="male">Male<br> List of<input type="radio" name="gender" value="female" checked>Female Figures List of Tables </p> Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Listings List of Sidebars type="submit" value="Send"> <input type="reset" value="Clear"></p> <p><input </form> Figure 10-13 shows how a browser renders these buttons as part of an overall form.
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 Figure -10-13: Submit and Images Finding and Using reset buttons. Chapter 7 - Top Off Your Page with Formatting If you - Taking the submit and reset buttons Part IIIdon’t like HTML to the Next Level that a browser creates, you can substitute your own graphical buttons8by using the <input> element with a type of image and an src attribute that specifies the image’s Chapter - HTML Tables location. For an image that submits the form, set value to submit. For an image that clears the form, set Chapter 9 - HTML Frames value to reset. Also, use the alt attribute to provide alternative text for browsers that don’t show images (or Chapter 10 - HTML Forms for users who can’t see them). Part IV - Extending HTML with Other Technologies <p><input type="image" CSS Chapter 11 - Getting Stylish with value="submit" src=" submit_button.gif alt="Submit"> <inputtype="image" value="reset" src="reset_button.gif" alt="Clear"></p> Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for to Do 4th Edition What Do You WantDummies,with Your Form Data? by Ed Tittel and Natanya Pitts ISBN:0764519956 Getting form data is really only half© 2003 (408 pages) John Wiley & Sons of the form battle. You create form elements to help users give you a way to provide them with data, goal then you need to dotext-orientedwith that data. Of course, your form and Whether your but is to build a simple, something Web site your data will be uniqueloaded time,frames, graphics, and animation, thishandler that can manage the data or one every with so there is no single, generic form stepby-step book will put you on a program that for every form. Before you can find (or write) the right track. handles your form data, you have to know what you want to do with it. Table example, if you have a form that gathers information from users to display in a guest book, you want to For of Contents HTML the data to a text fileEdition a small database that holds the entries, and then create a Web page that add 4 For Dummies, 4th or even Introduction guest-book entries. If you want to create a shopping cart, you’ll need programs and a displays the Part I - Meeting can handle inventory, customer-order database that HTML in Its Natural Environment information, shipping data, cost calculations, and Chapter On theThe Least YouifNeed just wantabout HTMLcomments from a Web form via e-mail, you may need more. 1 - other hand, you to Know to receive and the Web only a 2 - mailto: URL. Chapter simpleHTML at Work on the Web Chapter 3 - Creating Your First HTML Page Chapter 7 - Top Off Your Page with Formatting Tip - Getting hosting provider — Part II Your WebStarted with HTML whether it’s an internal IT group or an ISP to which you pay a monthly fee — has the final say in what kindDocuments of applications you can use on your Web site to handle form data. If Chapter 4 - Structuring Your HTML you plan to incorporate forms into your site, be sure that your hosting provider supports the applications Chapter 5 - Linking to Online Resources you need to run on the server in order to process form. Chapter 17 includes more information on finding Chapter 6 - Finding and Using Images the right ISP to host your pages. Part III - Taking HTML to the Next Level Using CGI scripts and other programs with form data - HTML Tables Chapter 8 Chapter 9 - HTML Frames Typically, most form data is processed in some way or another by a CGI script written in some - HTML Forms programming language. This can be Perl, Java, AppleScript, or one of many other languages that run on Part IV - Extending HTML with Other Technologies Web servers. These scripts take the data from your form and make it useful by putting it into a database, Chapter 11 - Getting Stylish with CSS creating customized HTML based on it, writing it to a flat file, or one of thousands of other things. Chapter 10 Chapter 12 - HTML and Scripting Chapter 13 is-much too complicated a topic to cover completely in this book, so if you aren’t familiar with Making Multimedia Magic Tip CGI Chapter 14 -and how they work, the “CGI Scripts for Fun and Profit” article on Webmonkey provides an CGI scripts Integrating a Database into Your HTML excellent - How HTML Relates to Other Markup Languages Chapter 15 overview: Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox http://hotwired.lycos.com/webmonkey/99/26/index4a.html Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Chapter 14 also discusses Part VI - The Part of Tens CGI as it relates to creating dynamic Web sites that are integrated with databases. - Ten Ways to Exterminate Web Bugs Chapter 19 Chapter 20 - Ten HTML Do’s and Don’ts But don’t think that just because you need a program to get the most from your form data that you don’t have to become a programmer to make the most of forms. Many ISPs include support for (and access to) Appendix A - HTML 4 Tags standard scripts for processing commonly used forms such as guest books, comment forms, and even Appendix B carts. Your ISP may give you all the information you need to get the program up and running, shopping - HTML Character Codes Appendix mostGlossary and will C - likely give you some HTML to include in your pages. Part VII - Appendixes Index Warning Although you can tweak the markup that manages how the form displays in the canned HTML Cheat Sheet - HTML 4 For Dummies, 4th Edition you Figures List ofget from an ISP, be sure you don’t change the form itself — especially the form element names and values. The List of Tables program on the Web server relies on these to make the entire process work. List of Listings You can find several large script repositories online that provide free scripts you can download and use along with your forms. Many of these also come with some generic HTML you can dress-up and tweak to fit your Web site. You simply drop the program that processes the form into the folder on your site that holds programs (usually called a cgi-bin), add the HTML to your page, and you’re good to go. Some choice places on the Web to find scripts you can download and put to work immediately are List of Sidebars Matt’s Script archive:www.scriptarchive.com/ The CGI Resource Index: http://cgi.resourceindex.com/
  • ScriptSearch:www.scriptsearch.com HTML 4 for Dummies, 4th Edition ISBN:0764519956 by Ed use and Natanya Pitts However, if you want toTittel programs not provided by your ISP on your Web site, you’ll need complete John Wiley folder. Every ISP’s setup is a little different, so be sure to read your access to your site’s cgi-bin & Sons © 2003 (408 pages) documentation to find out your goal you have support for CGI scripts Web sitewhat languages the ISP Whether whether is to build a simple, text-oriented — and supports. (Perl isor one loaded with frames, graphics, and animation, this stepusually a safe bet, but it’s even safer to make sure.) by-step book will put you on the right track. Sending data via e-mail Table of Contents You 4 For Dummies, 4th Edition HTML can opt to receive your form data via e-mail instead of using a form to process it. You’ll just get a collection Introductionof name and value pairs in a text file sent to your e-mail address, but that’s not necessarily a bad thing. Meeting include Its Natural Environment Part I - You can HTML in a short contact form on your Web site that asks people to send you feedback (a feature Chapter 1that-always looks professional); then you canand the include, in the action URL, the e-mail address The Least You Need to Know about HTML simply Web you want - data at Work Chapter 2 the HTML sent to: on the Web <form Chapter 3 action="mailto:me@mysite.com" action="post"> - Creating Your First HTML Page Part II - Getting Started with HTML Tricks Chapter 4of the Trade Many spam companies get e-mail addresses by trolling Web sites looking for - Structuring Your HTML Documents mailto URLs. You might consider setting up a special e-mail account just to receive comments so the e- Linking to Online Resources mail address you use every day won’t have yet another way to get pulled onto spam mailing lists. Chapter 5 Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, Easy to Designing Forms That Are4th Edition Use by Ed Tittel and Natanya Pitts ISBN:0764519956 Designinguseful forms is a different undertaking from designing easy-to-use forms. Your form may gather John Wiley & Sons © 2003 (408 pages) the data that you Whether your goal is to build a simple, text-oriented Web siteit before they’re done. need, but if it’s hard for visitors to use, they may abandon or one loaded with frames, graphics, and animation, this step- Tricks of the Trade Asbook use put you on the right track. by-step you will the markup elements you’ve met in this chapter, along with the other elements that drive page layout, keep the following guidelines in mind: Table of Contents provide textual cues for all your forms. Be clear about what information you’re Be sure you HTML looking for in a particular field and what format you need it in. If you want users to enter a date as 4 For Dummies, 4th Edition mm/dd/yy, be sure you tell them that. If you’ve limited the number of characters a text field can take Introduction Part I(using the HTML in Its Natural Environment - Meeting maxlength attribute), let users know so they aren’t frustrated trying to enter more characters than your form allows. about HTML and the Web Chapter 1 - The Least You Need to Know Chapter 2 - HTML at Work on the Web Use field width and character limits to provide visual clues about the data you need. For - Creating Your First HTML Page example, if you want users to enter a phone number as xxx-xxx-xxxx, consider creating three text Part II - Getting Started with HTML fields: one for each segment of the phone number. Doing so helps users understand what kind of Chapter 4 - Structuring Your HTML Documents information you want. Chapter 3 Chapter 5 - Linking to Online Resources Chapter 6 Group -like fields together. A logical grouping of fields makes filling out a form easier for users. If you Finding and Using Images ask Chapter 7 for -someone’s first name, then his or her birthday, and then his or her last name, it will be Top Off Your Page with Formatting confusing. HTML to the Next Level Part III - Taking First name, last name, birthday Chapter 8 flows more along the lines of the way people think. - HTML Tables Break long forms into easy-to-manage sections. Let’s face it; people don’t like to fill out forms, - HTML Frames even when they’re working on a computer. When you break long forms into shorter chunks, people Chapter 10 - HTML Forms are less intimidated and are more likely to complete the form. Most major online retailers (such as Part IV - Extending HTML with Other Technologies Amazon.com) use this method to help customers provide all the detail the company needs to Chapter 11 - Getting Stylish with CSS complete an order without making the buying process seem too arduous. Chapter 9 Chapter 12 - HTML and Scripting Chapter 13 required fields clearly. If there are certain portions of your form that users must fill out before Mark - Making Multimedia Magic Chapter 14can Integrating a Database intosure to mark those fields clearly. You can make them bold, or a they - submit it successfully, be Your HTML different color, or put an asterisk beside them. It doesn’t really matter what you do as long as you do Chapter 15 - How HTML Relates to Other Markup Languages something to point out to Site Part V - From Web Page to Web users Chapter 16 how you’ve marked required fields. - Creating an HTML Toolbox Let users know what information they need to complete the form. If users need to have any - Setting Up Your Online Presence information in their hands before they fill out your form, consider adding a form gateway page that Chapter 18 - Creating a Great User Interface details everything users should have in front of them before they proceed on to the form. The Part VI - The Part of Tens RateGenius Apply For a Loan page, shown in Figure 10-14, uses this technique to lay out clearly for Chapter 19 - Ten Ways to Exterminate Web Bugs visitors about to fill out a long form exactly what information to prepare before starting to fill out the Chapter 20 - Ten HTML Do’s and Don’ts form. Chapter 17 Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 Figure 10-14: AYour HTML Documents - Structuring form gateway page helps users prepare to fill out a long form. Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Tip The series of forms RateGenius uses to gather information for car loans and loan refinancing are Chapter 7 - Top Off Your Page with Formatting excellent examples of long forms that collect a variety of different kinds of data using all the available form Part III - Taking HTML to www.rategenius.com to review its form techniques. markup elements. Visit the Next Level Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition Part IV: Extending HTML with Other Technologies ISBN:0764519956 by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) In This Part: Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Chapter 11: Getting Stylish with CSS Table of Contents HTML Chapter 12: HTML and Scripting 4 For Dummies, 4th Edition Introduction Chapter 13: Making Multimedia Magic Part I - Meeting HTML in Its Natural Environment Chapter 1 - 14: Least You a Database about HTML and Chapter The IntegratingNeed to Knowinto Your HTML the Web Chapter 2 - HTML at Work on the Web Chapter Creating Your First HTML to Other Markup Language Chapter 3 - 15: How HTML Relates Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents - Linking . In this part . .to Online Resources Chapter 5 Chapter 6 - Finding and Using Images Building - Top Off Your Page with Formatting Chapter 7 attractive, user-friendly Web pages often involves more than HTML markup. In this part, we cover some - Taking and useful Next Level Part IIIcommon HTML to thetools and techniques that help you extend and expand HTML’s capabilities through Chapter 8 various add-ons or add-ins. You get a look at Cascading Style Sheets — a markup language - HTML Tables designed - HTML define Chapter 9 to let youFrames and manage how HTML documents look and behave simply and systematically. You also - HTML Forms Chapter 10go behind the scenes of scripting languages such as JavaScript and VBScript to see how they can improve not only the way your Technologies Part IV - Extending HTML with Other Web pages interact with your visitors, but also how they can help manage sophisticated display and navigation on your site. Chapter 11 - Getting Stylish with CSS Chapter 12 review the features of various multimedia players and add-ins that can bring sound, video, and Next, you - HTML and Scripting Chapter 13 to your Web pages. You get some hints on how to use such tools to best effect. After that, you animation - Making Multimedia Magic Chapter 14 -complex and interestinginto Your HTMLthat Web pages can create between HTML and explore the Integrating a Database relationships Chapter 15 —How HTML Relates to Other Markup Languages judicious use of such technologies. Finally, you databases - and the capabilities you can cultivate through Part V - From preview of to Web Site get a sneak Web Page the new extended markup languages that may someday replace HTML — how Chapter 16 and why you might find them interesting for potential use in your Web sites. they work, - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • for Dummies, Chapter HTML Tittel and NatanyaStylish withISBN:0764519956 11: 4Getting 4th Edition CSS by Ed Pitts Overview John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepIn This Chapter by-step book will put you on the right track. Understanding style sheets Table of Contents HTML Introducing CSS4th Edition 4 For Dummies, Introduction Creating style rules Part I - Meeting HTML in Its Natural Environment Chapter 1 The rules You Need to Know about HTML and the Web Linking-style Least to Web pages Chapter 2 - HTML at Work on the Web Introducing CSS properties HTML Page Chapter 3 - Creating Your First Part II - Getting Started with HTML The goal of style sheets is to prevent users’ whims — as well as misconfigured browsers — from mangling - Structuring Your HTML Documents the display of style-dependent Web documents. Style sheets allow authors to specify layout and design Chapter 5 - Linking to Online Resources elements, such as fonts, colors, and text indentation. Style sheets give you precise control over how Chapter 6 - Finding elements appear on and Using Images a Web page. What’s even better is that you can create a single style sheet for an ChapterWeb - Top Off Your Pagethe layout and display of your content is consistent from page to page. And entire 7 site to ensure that with Formatting Part the - Taking HTML to the Next Level style sheets are easy to build and even easier to integrate into for III last bit of icing on the cake, Web Chapter 8 pages. Tables your Web - HTML Chapter 4 Chapter 9 - HTML Frames Remember As HTML has evolved and XHTML looms on the horizon for the future, the goal of the Chapter 10 - HTML Forms markup powers that be with Other Technologies Part IV - Extending HTML is to eventually remove all formatting markup (such as the <font> element) from HTML’s collection of elements CSS Chapter 11 - Getting Stylish within lieu of style sheets. Chapter 12 - HTML and Scripting Generally, style sheets give you more flexibility than markup ever will, and the HTML element collection - Making Multimedia Magic won’t grow to include more display-oriented tags. When you want tight control over the display of your Chapter 14 - Integrating a Database into Your HTML Web pages, style sheets are the way to go. Chapter 13 Chapter 15 - How HTML Relates to Other Markup Languages Part V Style sheetsPage towell supported Tip - From Web aren’t Web Site in 3.0 and earlier browsers, and aren’t even 100 percent supported Chapter 16 - Creating an HTML Toolbox in even the latest browsers, so you should carefully test your style sheets in a variety of browsers to be sure they - Setting Up your Online Chapter 17 don’t mangle Your page. Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML for Problems Style Understanding 4the Dummies, 4th Edition Sheets Solve by Ed Tittel and Natanya Pitts ISBN:0764519956 HTML was neverJohn Wiley to Sons © 2003 (408 pages) designed & be a formatting language, and as a result, its formatting capabilities are limited, to say the least. When goal tryto build a simple, text-oriented Web you’re limited to tables, font Whether your you is to design a page layout in HTML, site controls, and a few one loaded with frames, as bold and italics. Stylethis stepor other inline styles such graphics, and animation, sheets give you the tools you need to by-step book will put With style right track. take your Web page to the next level. you on the sheets you can Carefully control every aspect of the display of your page: Specify the amount of space between Table of Contents lines, character spacing, page margins, image placement, and more. HTML 4 For Dummies, 4th Edition Apply Introduction changes globally: You can guarantee consistent design across an entire Web site by applying Part Ithe same style sheet to every Environment - Meeting HTML in Its Natural Web page. Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 3 - Creating Your First HTML Page Tip Quickly and easily modify the look and feel of your entire site by changing a single document Chapter 2 - HTML at Work on the Web (the style sheet) instead of the markup on every page. Part II - Getting Started withcontrol Instruct browsers to HTML appearance: Provide Web browsers with more information about how Chapter 4 wantStructuring Your HTML Documents - your pages to appear than you can communicate with HTML. you Chapter 5 - Linking to Online Resources Create-dynamic pages: Use JavaScript or another scripting language along with style sheets to Chapter 6 Finding and Using Images create text and other Page with Formatting displays, and hides in response to user actions. Chapter 7 - Top Off Your content that moves, Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for to Drive Edition Using Style SheetsDummies, 4ththe Display of Your HTML by Ed Tittel and Natanya Pitts ISBN:0764519956 The gist of how style works onSons Web is this: You define rules in a style sheet that specify how you want John Wiley & the © 2003 (408 pages) content described by a particular set of markupsimple, text-oriented Web site could specify that every firstWhether your goal is to build a to display. For example, you level heading be or one loadedpurple, Garamond, 24-point type with this step-background (not that you displayed in with frames, graphics, and animation, a yellow by-step book will put you to markup, and the would, but you could). You link style ruleson the right track. browser does the rest. CSS (for Cascading Style Sheets) is the official name for the HTML style-sheet tool, now in its second Table of ContentsCSS1 was a good, solid shot at building a style-sheet mechanism for the Web. But it was version (CSS2). HTML 4 preliminary shot; the improvements built into CSS2 make CSS more robust. Currently, however, only a For Dummies, 4th Edition Introduction browsers actually offer better support for the first version of CSS (CSS1), which defines some most Web Part I - Meeting HTML in Its Natural Environment must-have Web features: Chapter 1 - The Least You Need to Know about HTML and the Web Specifying fontat Work on the Web effects Chapter 2 - HTML type, size, color, and Chapter 3 - Creating Your First HTML Page Setting background colors and images Part II - Getting Started with HTML Chapter 4 - Structuring Your of text layout, including alignment and spacing Controlling many aspectsHTML Documents Chapter 5 - Linking to Online Resources Setting-margins and Using Images Chapter 6 Finding and borders Chapter 7 - Top Off Your Page with Formatting Controlling list display Part III - Taking HTML to the Next Level Chapter improves the implementation of many CSS1 components and expands on CSS1 with some new CSS2 8 - HTML Tables Chapter 9 definitions: - HTML Frames Chapter 10 - HTML Forms Defining aural style sheets for Technologies Part IV - Extending HTML with Other text-to-speech Chapter 11 - Getting Stylish with CSS Chapter 12 browsers - HTML and Scripting Defining table layout and display Chapter 13 - Making Multimedia Magic for counters, footers, and other standard page elements Automatically generating content Chapter 14 - Integrating a Database into Your HTML Controlling cursor Relates Chapter 15 - How HTMLdisplay to Other Markup Languages Part V - From Web Page to Web Site The next generation of CSS — CSS3 — is a collection of modules that address different aspects of Web- Creating page formatting (suchan HTML Toolbox as fonts, background colors, lists, text colors, and so on). The first of these modules Chapter 17 - Setting Up Your Online Presence should become standards (officially called Candidate Recommendations) in late 2002, with additional Chapter 18becoming final in 2003. Interface modules - Creating a Great User Chapter 16 Part VI - The Part of Tens The W3C - Ten Ways an entire section of its Web site to this topic at www.w3.org/style/css. You can Chapter 19 has devoted to Exterminate Web Bugs find general Ten information there, as Chapter 20 - CSSHTML Do’s and Don’ts well as keep up with the status of CSS3. The site links to a number of VII - Appendixes Partgood CSS references and tutorials, and includes information on software packages that can make your style sheet endeavors easier. Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th What You Can Do with CSS Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 You have a healthy collection Sons © 2003 (408 pages) with as you write your style rules. You can control just John Wiley & of properties to work about every aspect of a page’sgoal is to— from simple, text-oriented Web site Whether your display build a borders to font sizes and everything in between. The properties fall into several categories: or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Background properties: These control the background colors associated with blocks of text and with images. You can also use these properties to attach background colors to your page or to individual Table of Contents elements. HTML 4 For Dummies, 4th Edition Border Introduction properties: These control borders associated with the page, lists, tables, images, and block Part Ielements (such as Its Natural Environment - Meeting HTML in paragraphs). You can specify border width, color, style, distance from the element’s content,You Need to Know about HTML and the Web Chapter 1 - The Least and so on. Chapter 2 - HTML at Work on the Web Classification properties: These control how elements such as images flow on the page relative to - Creating Your First HTML Page other elements. You can use these properties to integrate images and tables with the text on your Part II - Getting Started with HTML page. Chapter 3 Chapter 4 - Structuring Your HTML Documents Chapter 5 properties: These control all aspects of the font(s) you use — including font size, family, and Font - Linking to Online Resources height. -These properties give you more control over your text with style sheets than the font element Chapter 6 Finding and Using Images ever Chapter 7 will.Top Off Your Page with Formatting Part III - Taking HTML to the Next Level List properties: These control the way lists appear on your page. You can manage list markers, use - HTML Tables images in lieu of bullets, and so on. Chapter 8 Chapter 9 - HTML Frames Chapter 10 - properties: These control the margins of the page, block elements, tables, and images. Margin HTML Forms Part IV - Extending HTML with Other Technologies These properties extend the ultimate control Chapter 11 over the white space on your page. - Getting Stylish with CSS Padding properties: These Chapter 12 - HTML and Scripting control the amount of white space around any block element on the page. - Making Multimedia Magic Chapter 13 When used with margin and border properties, you can create some complex layouts. Chapter 14 - Integrating a Database into Your HTML Positioning properties: These control where elements sit on the page. These properties give you the - How HTML Relates to Other Markup Languages ability to specifically place elements on the page much as you would in a page layout tool. Chapter 15 Part V - From Web Page to Web Site Chapter 16 properties: an HTML Toolbox Size - Creating These control how much space (in height and width) that your elements (both text Chapter 17 - Setting Up Your Online Presence and images) take up on your page. They’re especially handy for limiting the size of text boxes and Chapter 18 - Creating a Great User Interface images. Part VI - The Part of Tens Table - Ten Ways These control the Bugs Chapter 19 properties: to Exterminate Weblayout of tables. You can use them to control cell spacing and other table-layout specifics. Don’ts - Ten HTML Do’s and Chapter 20 Part VII - Appendixes Text properties: These control how text displays on the page. You can set text color, letter and line Appendix A - HTML 4 Tags spacing, alignment, white space, and so on. Appendix B - HTML Character Codes On the Web A complete description of CSS properties is beyond the scope of this book, but if you’d like Appendix C - Glossary to see Index more about how each property works, there are entire books and Web sites devoted to the fine details of using each and every property in these various categories. If you’d like a print reference, we Cheat Sheet - HTML 4 For Dummies, 4th Edition suggestCascading Style Sheets For Dummies by Damon A. Dean and published by Wiley Publishing. If List of Figures you’d like a List of Tables Webified reference, we suggest you visit DevGuru’s CSS2 reference at www.devguru.com/Technologies/css/quickref/css_index.html . List of Listings List of Sidebars Although CSS syntax is straightforward, combining CSS styles with markup to fine-tune your Remember page layout can be a little complicated. Fortunately, all you really need do to become a CSS guru is to learn the details of how the different properties work — and then experiment to see how different browsers handle them. As with HTML, practice will give you insight into the right way to use CSS to help convey your message on the Web.
  • HTML 4 for Dummies, 4th Edition Introducing Basic CSS Syntax by Ed Tittel and Natanya Pitts ISBN:0764519956 A style sheet is made up of style rules; each pages) rule has two distinct parts: John Wiley & Sons © 2003 (408 style Whether your goal is to build a simple, text-oriented Web site Selector: Specifiesloaded with frames, graphics, and animation, this step- to apply. or one the markup element to which you want the style rules by-step book will put you on the right track. Declaration: Specifies how you want the content described by the markup to look. You use a particular set of punctuation and special characters to define a style rule. The syntax for a style Table of Contents rule 4 For Dummies, 4th Edition HTML always follows this pattern: selector Introduction {declaration} Part I - Meeting HTML in Its Natural Environment A declarationThe Least You Need to into a property and a value. Properties are different aspects of how the breaks down further Know about HTML and the Web computer is to display text and graphics (for example, font size or background color). You combine a value Chapter 2 - HTML at Work on the Web with a property to specify exactly how you want text and images to look on your page (for example, a 24Chapter 3 - Creating Your First HTML Page point font size or a yellow background). You separate the property from the value in a declaration with a Part II - Getting Started with HTML colon, like this: Chapter 1 Chapter 4 - Structuring Your HTML Documents selector - {property: value} Linking to Online Resources Chapter 5 Chapter 6 For example,Finding three style Images the colors for first-, second-, and third-level headings respectively: these and Using rules set Chapter 7 - Top Off Your Page with Formatting h1 {color: teal} h2 {color: maroon} Chapter 8 - HTML Tables h3 {color: black} Part III - Taking HTML to the Next Level Chapter 9 - HTML Frames Chapter 10 specification lists exactly which properties you can work with in your style rules and the different The CSS - HTML Forms Part IV -that they take. Most are pretty self-explanatory (color values Extending HTML with Other Technologies and border, for example). See "What You Chapter 11 - CSS" earlier inwith CSS Can Do with Getting Stylish this chapter for a quick rundown of what properties the CSS2 specification Chapter 12and HTML values they can take. includes - what and Scripting Chapter 13 - Making Multimedia Magic Style sheets Integrating a Database into Your HTML Chapter 14 - override a browser’s internal display rules; thus your formatting specifications affect the final display of theHow HTML Relates to Other Markup Languages can better control how your content looks, and pagein the user’s browser. This means you create From Web Page to Web appropriate experience for visitors to your site. For example, the following a more consistent and Site Part V style rules specify the font sizes for first-, second-, and third-level headings: Chapter 15 Chapter 16 - Creating an HTML Toolbox h1 {font-size: 16pt} Chapter 17 - Setting Up Your Online Presence h2 {font-size: a Great Chapter 18 - Creating14pt} User Interface h3 {font-size: 12pt} Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 Ten HTML Do’s Figure 11-1- shows a simple and Don’ts with all three heading levels without the style sheet applied. The HTML page browser uses its default settings to display the headings in different font sizes. Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 11-1: An HTML page without style specifications. Figure 11-2, however, shows the Web page with a style sheet applied. Notice that the headings are significantly smaller than in the previous figure. That’s because the style-sheet rules override the browser’s
  • settings. HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Figure -11-2: An HTMLon the with style specifications in effect. Chapter 2 HTML at Work page Web Chapter 3 - Creating Your First HTML Page Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Warning Users can with HTML Part II - Getting Started change their preferences so their browsers ignore your style sheets. Most users don’t do so,- but some will. It’sHTML Documents always a good idea to test your Web page with style sheets turned off to be Chapter 4 Structuring Your sure it still looks good (or acceptable, anyway) to those without the benefit of style. CombiningOff Your Page with Formatting Chapter 7 - Top selectors and declarations Part III - Taking HTML to the Next Level Chances areHTML Tablesa style rule to affect the display of more than one property for any given selector. you’ll want You could create several style rules for a single selector, each with one declaration, like this: Chapter 8 Chapter 9 - HTML Frames h1 {color: teal} Chapter 10 - HTML Forms h1 {font-family: with Other Technologies Part IV - Extending HTML Arial} h1 {font-size: 36pt} Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting After a while, however, such a large collection of style rules becomes difficult to manage. CSS enables - Making Multimedia Magic you to combine several declarations in a single style rule that affects the display characteristics of a single Chapter 14like Integrating a Database into Your HTML selector, - this: Chapter 13 Chapter 15 - How HTML Relates to Other Markup Languages h1 {color: teal; font-family: Arial; Chapter 16 - Creating an HTML Toolbox font-size: 36pt;} Part V - From Web Page to Web Site Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Notice that all the declarations for the h1 selector are contained within the same set of brackets ({}) and Part VI - The Part of Tens separated by a semicolon (;). You can put as many declarations as you want in a style rule; just be sure to Chapter 19 declaration withExterminate Web Bugs end each - Ten Ways to a semicolon. Chapter 20 - Ten HTML Do’s and Don’ts Tricks Appendixes Part VII -of the Trade From a purely technical standpoint, white space is irrelevant in style sheets (just as it is in HTML), but you should consider some consistent spacing scheme so you can easily read and edit Appendix A - HTML 4 Tags your style sheets. Appendix B - HTML Character Codes Appendix C - Glossary set of declarations to apply to a collection of selectors, you can do that, too: Just If you want the same Index separate the selectors with commas. The following style rule (for example) applies the declarations for text Cheat Sheet family, and font size to the h1, h2, and h3 selectors: color, font - HTML 4 For Dummies, 4th Edition List of Figures h1, h2, h3 {color: teal; font-family: Arial; List of Listings font-size: 36pt;} List of Tables List of Sidebars Remember As you can see from the sample style rules included in this section, style sheet syntax relies heavily on punctuation. When you have a style rule that doesn’t seem to be working exactly as you anticipated, double-check your syntax to be sure you haven’t inadvertently used a semicolon where you should have used a colon, or a parenthesis where you needed a bracket. The W3C’s validation service at http://jigsaw.w3.org/css-validator/ can also help you zero in on any problems with your style sheets.
  • Working with style Dummies, 4th Edition HTML 4 for classes by Ed Tittel and Natanya Pitts ISBN:0764519956 Sometimes you may want to create style rules that apply only to particular instances of an HTML markup John Wiley & Sons © 2003 (408 pages) element. For example, if you want to create a style rule that applies only to paragraphs that hold copyright Whether your information, you need a way togoaltheto build a know that the rule has a limited scope. let is browser simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. To target a style rule more carefully, you can use the class attribute with a markup element. This bit of HTML has two kinds of paragraphs: a regular paragraph (without a class attribute) and a class attribute with the value of Table of Contents copyright: HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment <p>This is a regular paragraph.</p> Chapter 1 - The Least You Need to is about HTML of class <p class="copyright">This Knowparagraph and the Web copyright.</p> Chapter 2 - HTML at Work on the Web To create Creating that First HTML Page Chapter 3 a-style rule Your only applies to the copyright paragraph, add a period (.) and the value of the class - Getting Started with HTML Part II attribute (copyright) after the paragraph selector in the style rule. The resulting rule looks like this: Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images p.copyright {font-family: Arial; Chapter 7 - Top Off Your Page with Formatting font-size: 10pt; Part III - Taking HTML to the white; color: Next Level Chapter 8 Chapter 9 - HTMLbackground: black;} Tables - HTML Frames This style - HTML Forms Chapter 10 rule specifies that all paragraphs of class copyright display white text on a black background in 10-point Arial font. Figure Other Technologies Part IV - Extending HTML with11-3 shows how a browser applies the style rule only to a paragraph that has the proper - Getting Stylish with CSS Chapter 11 class attribute defined. Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Figure 11-3: Use classes to target your style rules more precisely. Appendix A - HTML 4 Tags Appendix B - HTML Character Codes You can also create style-rule classes that aren’t associated with any element, as in the following Appendix C - Glossary example: Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures .warning {font-family: Arial; font-size: 14pt; List of Listings background: white; List of Sidebars color: white;} List of Tables You can use this style class with any element by adding class="warning" to the element. Figure 11-4 shows how a browser applies the warning style to both the paragraph and heading, but not to the block quote in this HTML:
  • <p class="warning">This is a paragraph of class warning.</p> HTML is a block quote without a defined class.</blockquote> <blockquote>This 4 for Dummies, 4th Edition ISBN:0764519956 by Ed Tittel and is a Pitts <p class="warning">This Natanyaparagraph of class warning.</p> John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Figure -11-4: YouYour create style rules that work with any element by using classes. Chapter 3 Creating can First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML for Dummies, 4th Edition Understanding 4How Styles Are Inherited by Ed Tittel and Natanya Pitts ISBN:0764519956 One of the fundamental concepts in HTML (and markup in general) is nesting tags. Your entire HTML John Wiley & Sons © 2003 (408 pages) document is nested withinyour goal is to build a simple, text-oriented Webasite Whether <html> and </html> tags, and everything browser displays in a window is nested within <body> and <body>frames, graphics, and animation, this step- The CSS specification or one loaded with tags. (And that’s just the beginning, really.) by-step book will one element right another and want to be sure the styles associated recognizes that you will often nestput you on the insidetrack. with the parent element find their way to the child element. Table of you assign a style to an element, all the elements nested inside it have that style applied to them as When Contents HTML 4 For Dummies, 4th Editionfor the body element that sets the page background, text color, font size, well. For example, a style rule Introduction and margins looks like this: font family, Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web body {background: black; - Creating Your First HTML Page color: white; Part II - Getting Started with HTML font-size: 14pt; Chapter 4 - Structuring Your HTML Documents font-family: Garamond; Chapter 5 - Linking to Online Resources margin-left: .75in; Chapter 6 margin-right: .75in; - Finding and Using Images Chapter 7 margin-top: 1in;} - Top Off Your Page with Formatting Chapter 3 Part III - Taking HTML to the Next Level Tip If you - HTML Tables rules for the entire document, be sure to set them in the body element. want to set style Chapter 8 Changing - HTML Frames Chapter 9 the font for the entire page (for example) is much easier to do that way; it beats changing every single 10 - HTML at a time. Chapter element oneForms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Tip Chapter 12 Paying attention to inheritance - HTML and Scripting As you begin to build complex style sheets that guide the display of every aspect of a page, you must - Making keep inheritanceMultimedia Magic in mind. For instance, if you set the margins for the page in a body style rule, the Chapter 14 - you set for every other into Your HTML page will build off of the ones you set for the body. As margins Integrating a Database element on the Chapter 15as-you pay close attention to how your Languages work together, you can use inheritance to your How HTML Relates to Other Markup style rules long Part V - From Web Page to Web Site advantage to minimize style rule repetition and create a cohesive display for your page. Chapter 13 Chapter 16 - Creating an HTML Toolbox This - Setting Up Your Online syntax, but if you want to fine-tune your style rules with some advanced Chapter 17chapter covers basic CSS Presence techniques, you a Great User Interface Chapter 18 - Creatingcan get a complete overview of CSS syntax rules in the “CSS Structure and Rules” tutorial Part of Tens Part VI - The put together by the Web Design Group at www.htmlhelp.com/reference/css/structure.html. Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags is set only for the body element, it applies to all elements in the following HTML Even though the style rule Appendix B in HTML Character Codes (as shown - Figure 11-5): Appendix C - Glossary <body> <p>This paragraph inherits the page styles.</p> Cheat Sheet - does 4 For Dummies, 4th Edition <h1>As HTML this heading</h1> List of Figures <ul> List of Tables <li>As do the items in this list</li> List of Listings <li>Item</li> List of Sidebars <li>Item</li> </ul> </body> Index
  • HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Figure 11-5: Inheritance means style rules apply to nested elements. Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML for Dummies, 4th Edition Adding Style to4Your HTML Page by Ed Tittel and Natanya Pitts ISBN:0764519956 When you finish creating your Sons © 2003 (408 pages) step is to connect them to your HTML page. You have John Wiley & style rules, the next three options: Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this step- Build a style by-step book will put Webon the — called an internal style sheet — by using the <style> sheet directly into a you page right track. element. Table of Contents Link a style sheet stored outside the Web page — called an external style sheet — by using the HTML <link> tag. 4 For Dummies, 4th Edition Introduction Add style information directly to a tag by using the style attribute. Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Internal- style sheets Web Chapter 2 HTML at Work on the Chapter 3 - Creating Your First HTML Page An internal style sheet lives within your HTML page. You simply add style rules in a <style> element in the document’s header and you’re done. You can include as many (or as few) style rules as you want in Chapter 4 - Structuring Your HTML Documents an internal style sheet. (See Listing 11-1.) Part II - Getting Started with HTML Chapter 5 - Linking to Online Resources Chapter 611-1: Adding an Internal Style Sheet to an HTML Document - Finding and Using Images Listing Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables <html> Chapter 9 - HTML Frames <head> Chapter 10 - HTML Forms Part<title>Internal with Other Technologies IV - Extending HTML Style Sheet Example</title> <style> Chapter 11 - Getting Stylish with CSS body - {background: black; HTML and Scripting color: white; Chapter 13 - Making Multimedia Magic font-size: 14pt; Chapter 14 - Integrating a Database into Your HTML font-family: Garamond; Chapter 15 - How HTML Relates to Other Markup Languages margin-left: .75in; Part V - From Web Page to Web Site margin-right: .75in; Chapter 16 - Creating an HTML Toolbox margin-top: 1in;} Chapter 12 Chapter 17 - Setting Up Your Online Presence Chapter 18 h2, h3 {color: teal; h1, - Creating a Great User Interface Part VI - The Part of Tens font-family: Arial; Chapter 19 - Ten Waysfont-size: 36pt;} to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes p.copyright {font-family: Arial; Appendix A - HTML 4 Tags font-size: 10pt; Appendix B - HTML Character Codes font-color: white; background: black;} warning {font-family: Arial; Index Cheat Sheet - HTMLfont-size: 14pt; 4 For Dummies, 4th Edition font-color: red;} List of Figures </style> List of Tables </head> List of Listings <body> Appendix C - Glossary List of Sidebars <!-- Document content goes here --> </body> </html>
  • Tip The main benefit of an internal style sheet is convenience: Your style rules are right there in the page with your markupHTML 4 can Dummies, 4th Edition so you for tweak both quickly. However, if you want to use the same style sheet to ISBN:0764519956 by Ed Tittelthan one HTML page, make the styles easy to find: Move them out of the control the display of more and Natanya Pitts John Wiley & an external (408 pages) Sons © 2003 style sheet. individual Web page and into Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. External style sheets An external style sheet holds all your style rules in a separate text document that you can reference from Table HTML file on your site. Although you have to maintain a separate style sheet file, the benefits an any of Contents HTML 4 For Dummies, offers for overall site maintenance are significant. If you have 50 pages on your site external style sheet 4th Edition Introduction use the same style sheet, you can change colors, fonts, or any other formatting characteristic and they all Part all your pages with a quick change to the style on I - Meeting HTML in Its Natural Environment Chapter 1 sheet. - The Least You Need to Know about HTML and the Web To referenceHTML at Work on the Web an external style sheet, you use the link element in the Web page header — like this: - Chapter 2 Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 <html> - Structuring Your HTML Documents Chapter 5 <head> - Linking to Online Resources Chapter 6 <title>External Using Images - Finding and Style Sheet Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> Chapter 7 - Top Off Your Page with Formatting <head> Part III - Taking HTML to the Next Level <body> Chapter 8 - HTML Tables Chapter 9 - HTML Frames <!-- 10 - HTML content goes here --> Chapter Document Forms Part IV - Extending HTML with Other Technologies </body> Chapter 11 - Getting Stylish with CSS </html> - HTML and Scripting Chapter 12 Chapter 13 - Making Multimedia Magic Chapter 14 attribute in thea Database into Your HTML an absolute or relative link. This means you can Thehref - Integrating <link> element can take Chapter 15 link to a style RelatesthatOther Markup Languages your site! Generally, however, it’s best not to do choose to - How HTML sheet to doesn’t even reside on Part — - From Web Page to Web Site your so V after all, you want to control site’s look and feel yourself. However, if you want to quickly add Chapter 16 - Web page (or experiment to see how browsers handle different styles), you might use an style to your Creating an HTML Toolbox Chapter 17URL to point to oneOnline Presence absolute - Setting Up Your of the W3C’s Core style sheets — predefined style sheets you can use by Chapter 18 - Creating a Great User Interfacethem at www.w3.org/StyleSheets/Core/. simply linking to a URL. Read more about Part VI - The Part of Tens Tip When Ten Ways to Exterminate Web Bugs Chapter 19 -you link to a style sheet that resides on your own site, you create a relative link. When you link to one 20 - Ten HTML Do’s and Don’ts Chapter on someone else’s site (such as the W3C’s core styles), you create an absolute link. Chapter 5 discusses the difference Part VII - Appendixes between the two types of links. Appendix A - HTML 4 Tags Element-level style rules: Use them with caution Appendix B - HTML Character Codes Appendix C - Glossary Just Index so you know, you can attach individual style rules to individual elements in an HTML document. A style rule attached to an element looks like this: Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List ofstyle="color: green">The paragraph is green.</p> <p Listings List of Sidebars Adding style rules to an element is quick and dirty, but isn’t really the best approach. We generally recommend that you choose either internal or external style sheets for your rules instead of attaching the rules to individual elements in your document. Here are a few reasons why: Your style rules get mixed up in the page and are difficult to find. You have to place the entire rule in the value of the style attribute, which makes complex rules difficult to write and edit.
  • You lose all the benefits that come with grouping selectors and reusing style rules in external style HTML 4 for Dummies, 4th Edition sheets. ISBN:0764519956 by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • for Dummies, Chapter HTML Tittel and Natanya4th Edition 12: 4HTML and Scripting ISBN:0764519956 by Ed Pitts Overview John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepIn This Chapter by-step book will put you on the right track. Looking behind the scenes with scripts Table of Contents HTML Adding scripts to4th Edition pages 4 For Dummies, your Web Introduction Understanding client-side and server-side scripts Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Dissecting three sample scripts Chapter 2 - HTML at Work on the Web HTML 3 - Creating Your First HTML your Chapter is static. You use it to describe Page content and a browser displays that content on the Web. That’s it. HTML can’t Started create images Part II - Gettinghelp youwith HTML that magically change when users move mouse pointers over them, cause additional browser windows to pop up when a page loads, or create any of the many other Chapter 4 - Structuring Your HTML Documents interactive - Linking to Online Resources Chapter 5 and dynamic effects you see at work regularly on the Web. Chapter 6 - Finding and Using Images So, if HTML can’t make this happen, what does? The answer is scripting. When used in conjunction with Chapter 7 Top Off content scripts — small programs that you add to your Web page — can help your your HTML -markup, Your Page with Formatting Part III - Taking HTML to userNext Level Web pages respond to the actions. Chapter 8 - HTML Tables Because - HTML Frames Chapter 9 scripts are programs, they’re written in a programming language and use programming techniques. HTML Forms Chapter 10 -Therefore, yes, you have to know something about programming if you want to create scripts from - Extending HTML you Other Technologies Part IVscratch. However, withcan easily integrate scripts that others have written into your HTML pages without knowing much about programming at all. This chapter focuses on laying out the least you need to Chapter 11 - Getting Stylish with CSS know 12 - HTML and integrate Chapterabout scripting toScripting pre-written scripts into your Web pages. Chapter 13 - Making Multimedia Magic Tip If you want to learn the ins and outs of creating scripts yourself, pick up JavaScript For Dummies, by - Integrating a Database into Your HTML Emily A. Vander Veer (Wiley Publishing). This book walks you through the least you need to know about Chapter 15 - How HTML Relates from scratch. Also, many good HTML editors (such as Macromedia creating scripts for your pages to Other Markup Languages Part V - From Web Page to Web Site have built-in toolsets to help you create scripts — even if you don’t Dreamweaver and Adobe GoLive) Chapteranything about programming. This is the route that some developers choose because it’s the know 16 - Creating an HTML Toolbox Chapter 17 - Settingdiscusses HTML editors like these in more detail. easiest.Chapter 16 Up Your Online Presence Chapter 14 Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition What Scripts Can Do for Your HTML by Ed Tittel and Natanya Pitts ISBN:0764519956 In a nutshell, scripts can help you transform static HTML that just sits on the page (an important but dull John Wiley & Sons © 2003 (408 pages) job) into dynamicWhether your goal is toto user activities and makes visible or audible changes in the user’s HTML that responds build a simple, text-oriented Web site experience. For example, if you visit Dummies.com (www.dummies.com) and click the red button next to or one loaded with frames, graphics, and animation, this stepby-step book will term to on the on, track. the search box without entering a put you searchrightthe browser displays a nice warning box that reminds you to enter a search term before you actually search, as shown in Figure 12-1. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 -12-1: . . . a Scripting Figure HTML and script makes a dialog box appear to tell you what you did wrong. Chapter 13 - Making Multimedia Magic Scripts add Integrating a functionality Your HTML Chapter 14 -programmaticDatabase intoto your Web pages and allow them to respond dynamically to what users 15 - How HTML Relates to Other Markup a form or Chapterdo on the page — for example, filling out Languagesmoving their mouse pointers over an image (called a mouseover and covered Part V - From Web Page to Web Site later). When you add scripts to your page, the page interacts with users and changes its display HTML Toolbox Chapter 16 - Creating an or its behavior in response to what users do. Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface A short script verifies whether you’ve entered a search term before the engine runs the query: Part VI you enter a search If - The Part of Tens Chapter 19 term, you don’t see the warning. - Ten Ways to Exterminate Web Bugs If 20 - Ten HTML search Don’ts Chapteryou don’t enter a Do’s andterm, the script built into the page prompts the warning dialog box to appear. Part VII - Appendixes Appendix A - HTML 4 Tags This bit of scripting makes the page dynamic, which means it responds in different ways to how a user interacts with its elements. In effect, the script helps the page respond to what you do with the elements on Appendix C - Glossary the page. Appendix B - HTML Character Codes Index Remember Notice For the page 4th doesn’t Cheat Sheet - HTML 4 that Dummies, URLEdition change and another browser window doesn’t open when you Figures List oftry to search on nothing. The page responds to what you do without sending a request back to the Web server List of Tables to request a new page. This is why the page is considered dynamic. List of Listings If you wanted to try this trick without using a script (that is, without the dynamic functionality), the browser would send the empty search string back to the Web browser. Then the server would return a separate warning page reminding the user to enter a search term. All the work would be done on the Web server instead of in the Web browser. List of Sidebars
  • HTML for Dummies, 4th Edition Understanding 4What Makes Scripts Tick by Ed Tittel and Natanya Pitts ISBN:0764519956 Ascript is a set ofJohn Wiley & Sons © 2003 (408that activate when an event that you define occurs. An event programming instructions pages) is most often a user activity, such as moving a mouse pointer over an image, clicking a link, or selecting a Whether your goal is to build a simple, text-oriented Web site drop-down menu. one loaded with frames, graphics, and animation, this stepor by-step book will put you on the right track. In your HTML, you specify that a particular script fires off when a particular event occurs on a particular element. For example, the event could be that a user rolls his or her mouse over an image on the page. Table of Contents Of course, you have to specify which element, which event, and which script. HTML 4 For Dummies, 4th Edition Here’s exactly what happens when you activate an image rollover (a change in the image triggered when Introduction you - Meeting HTML in Its Natural it): Part Imove the mouse pointer over Environment Chapter You’re browsingYou Need to Know aboutaHTML and the Web 1. 1 - The Least the Web and arrive at really cool Web page that includes some HTML for an Chapter image. 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Unbeknownst to you,HTML Getting Started with attached to that image are instructions to call a script named rollover that activates both when you move your mouse over and also when you move your mouse off the Chapter 4 - Structuring Your HTML Documents image. Chapter 5 - Linking to Online Resources Chapter You - Finding and Using over the image. 2. 6 move your mouse Images Chapter 7 - Top Off Your Page with Formatting The browser looks for the rollover Part III - Taking HTML to the Next Level script and executes the instructions in the script that specify Chapter what to do when a mouse pointer moves over the image. 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms 3. Therollover script instructs the browser to replace the original image with a new image. Part 4. -The browser downloads the Technologies IV Extending HTML with Other new image and Chapter 11 displays it in place of the original image. - Getting Stylish with CSS 5. 12 move your Scripting Chapter You - HTML and mouse off the image. Chapter 13 - Making Multimedia Magic The browser looks back at the rollover script and executes the instructions in the script that - Integrating a Database into Your HTML specify what to do when you move your mouse off the image. Chapter 14 Chapter 15 - How HTML Relates to Other Markup Languages Part 6. - From Web Page script instructs V Therollover to Web Site Chapter 16 the browser to display the original graphic again. - Creating an HTML Toolbox 7. 17 browser Up Your Online Presence Chapter The - Setting replaces the new image with the original image and you’re back to where you started. Chapter 18 - Creating a Great User Interface In this example, the only time the browser has to contact the Web server is to get the new image. If you want images to be ready to show if a user event triggers a script, you can have your script instruct the Chapter 19 - Ten Ways to Exterminate Web Bugs browser to preload and hold onto specific images referenced in the script. They are what the user sees Chapter 20 - Ten HTML Do’s and Don’ts when he or she triggers an event. Part VI - The Part of Tens Part VII - Appendixes Appendix A - HTML 4 Tags Specifying event attributes Appendix B - HTML Character Codes Appendix C - Glossary Although you write the actual instructions for the script in a scripting language, you still use HTML attributes to specify what script to call for each specific element. The attributes correlate to common user Cheat Sheet - HTML 4 For Dummies, 4th Edition events (such as clicking or moving a mouse) and include the following: Index List of Figures List ofonload: Browser loads an HTML page. Tables List of Listings onabort: User cancels a page load. List of Sidebars onunload:Browser stops displaying one Web page because it’s about to load another. onerror:Browser encounters an error in the scripts or other instructions on the page. onmousemove:User moves the mouse pointer anywhere on the page. onmouseover:User moves the cursor over an element.
  • onmouseout:User moves the mouse pointer off of an element. HTML 4 for Dummies, 4th Edition ISBN:0764519956 onmousedown:Ed Tittel and Natanya Pitts by User moves the mouse pointer over an element, presses the mouse button down, John Wiley & Sons © 2003 (408 pages) and holds it down. Whether your goal is to build a simple, text-oriented Web site onmouseup:User releases a held mouse button. animation, this stepor one loaded with frames, graphics, and by-step book will put you on the right track. onclick:User clicks an element with the mouse pointer. ondblclick: Table of Contents User double-clicks an element with the mouse. HTML 4 For Dummies, 4th Edition onkeypress:User presses and immediately releases a key on the keyboard. Introduction Part Ionkeydown: User Its Natural Environment - Meeting HTML in presses and holds a key Chapter 1 on the keyboard. - The Least You Need to Know about HTML and the Web onkeyup:User releases a depressed key. Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page onfocus:An element becomes the focus of the user’s attention, as a form field might when you begin to type in it. Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - An element loses focus because the user chooses to focus on a different element. onblur:Linking to Online Resources Chapter 6 - Finding and Using Images onchange:UserYour Page the contents of a form element or selects a different check box, radio Chapter 7 - Top Off changes with Formatting button, or HTML to the Part III - Takingmenu item. Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames onselect:User selects a check box, radio button, or menu item from a form. Chapter 10 - HTML Forms onsubmit: User clicks a form’s Submit button. Part IV - Extending HTML with Other Technologies onreset: User clicks with CSS Chapter 11 - Getting Stylish a form’s Reset button. Chapter 12 - HTML and Scripting Tip Not every element supports every event attribute. For example, onsubmit and onreset work with - Making Multimedia Magic the<input> element in a form because you use that element to create submit and reset buttons. The Chapter 14 - Integrating a Database into Your HTML two attributes don’t work with the <p> element because you can’t submit or reset a form with a paragraph. Chapter 15 - How HTML Relates to Other Markup Languages Appendix A lists which event attributes work with which elements. Chapter 13 Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Including scripts in your HTML page - Setting Up Your Online Presence Chapter 17 Chapter 18 - Creating a Great User Interface Linking a script to an HTML element that you plan for a user to interact with is simple. You place the script code in the <script> element in the document header. Then you attach the script name to an event Chapter 19 - Ten Ways to Exterminate Web Bugs attribute in an HTML element. Listing 12-1, for example, specifies that when the user clicks the submit Chapter 20 - Ten HTML Do’s verify that the user filled out both fields in the form. button, the browser should and Don’ts Part VI - The Part of Tens Part VII - Appendixes Appendix 12-1: Verifying the User Fills Out Both Form Fields Listing A - HTML 4 Tags Appendix B - HTML Character Codes <html> Appendix C - Glossary <head> Index <title>Linking scripts to HTML pages</title> Cheat Sheet - HTML 4 For Dummies, 4th Edition <script language="javascript"> List of Figures function checkSubmit ( thisForm ) { List of Tables ( thisForm.FirstName.value == ‘’ ) { if List of Listings alert(‘Please enter your First Name.’); List of Sidebars return false; } if ( thisForm.LastName.value == ‘’ ) { alert(‘Please enter your Last Name.’); return false; }
  • return true; HTML 4 for Dummies, 4th Edition } by Ed Tittel and Natanya Pitts </script> John Wiley & Sons © 2003 (408 pages) </head> ISBN:0764519956 Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. <body> <form method="POST" action="http://www.someURL.com/" onsubmit="return checkSubmit(this);"> <p> Table of Contents HTML 4First Name:4th Edition type="text" name="FirstName"><br> For Dummies, <input Last Introduction Name: <input type="text" name="LastName"><br> Part I -<input HTML in Its Natural Environment Meeting type="submit"> </p> - The Least You Need to Know about HTML and the Web Chapter 1 </form> HTML at Work on the Web Chapter 2 </body> Chapter 3 - Creating Your First HTML Page </html> Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 Notice that - Linking to Online Resourcesattribute, return checkSubmit(this);, includes the name the value of the onsubmit Chapter 6 function and Using Images element, checkSubmit. This tells the browser to run the following - Finding in the <script> Chapter 7 - Top Off Your Page with on this form. You may want to have several different sets of checkSubmit function in the scriptFormatting Part III - Taking the browser Next Level instructions for HTML to the to run, depending on what a user does with the page. In that case, store each Chapterinstructions as its own function, and link the function to the event attribute. set of 8 - HTML Tables Chapter 9 - HTML Frames Tip If this - HTML Forms Chapter 10 script looks like Greek to you, don’t worry. The “Form validation” section later in the chapter walks - Extending everything going on in this script. Part IV you throughHTML with Other Technologies Chapter 11 - Getting Stylish with CSS Technical Stuff The double parentheses following the name (in both the script and the attribute values) Chapter 12 - HTML and Scripting are part of the scripting syntax. You can pass parameters to the script within the parentheses so you can Chapter 13 - Making Multimedia Magic reuse a single script for several elements. When you use someone else’s script in your Web page, Chapter 14read any instructions that come with the script. Verify whether you have to put any information in carefully - Integrating a Database into Your HTML Chapter 15 - Howor can Relates to Other Markup Languages the parentheses HTML leave them empty. Part V - From Web Page to Web Site You can - put scripts HTML Toolbox Chapter 16alsoCreating an directly into the value of an event attribute (instead of storing them in the document - Setting Up Your Online Presence Chapter 17 header). This technique works best for short scripts like the one in the “Image rollover” section later in the - Creating Chapter 18 chapter. a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • Going with HTML 4 for Dummies, 4th Edition a Client-Side Script by Ed Tittel and Natanya Pitts ISBN:0764519956 As you might expect, there’s&more than one way to skin the scripting cat. Because a script is a set of John Wiley Sons © 2003 (408 pages) programming instructions, you goal ishave an a simple, text-oriented Web site and respond to those Whether your must to build application that can understand instructions. Youror one loadedare the Web browser or the Web server. Scripts that Web browsers read two options with frames, graphics, and animation, this stepby-step book will put scripts. Conversely, scripts that Web servers read and respond to are and respond to are called client-side you on the right track. server-sidescripts. (All the scripts we discuss in this chapter are client-side scripts.) Table of Contents scripts are commonly used with data that users submit through HTML forms. They also Tip Server-side HTML 4 For Dummies, other applications connected to a Web page. You can learn more about the role these help databases and 4th Edition Introduction scripts — often called CGI scripts — play in a Web site in Chapters 10 and 14. Part I - Meeting HTML in Its Natural Environment When 1 - The Least You Need to Know about HTML and the Web Chapter you include client-side scripts in your Web pages, the browser handles all script processing after a visitor 2 - site at Work on the Web Chapterto yourHTMLdownloads the page. When you use a client-side script, you rely on the browser to interpret - run the Your First HTML Page Chapter 3 and Creating script. That reduces the amount of processing your Web server has to do; it also limits - Getting Started the browser Part II how many times with HTML must contact your Web server to change the way a page looks or behaves. - Structuring Your HTML Documents Chapter 4 Chapter 5 different browsers support scripting in slightly different ways; you may have to do a little extra However, - Linking to Online Resources Chapter 6make sure your script runs successfully on all browsers. Older versions of the popular browsers - Finding and Using Images work to Chapter 7 earlier), Off Your Page scripting well — and text-only browsers can’t handle it at all — so if you (3.0 and - Top don’t handle with Formatting Part III - scripts, HTML to thethat their benefit include Taking remember Next Level Chapter 8 is lost on users who run those older browsers. - HTML Tables Tricks Chapter 9of the Trade When you download a script from the Web or have someone write a script for you, - HTML Frames be sure to - HTML Forms Chapter 10 identify which browsers the script works with. You want scripts that work with as many browsers as IV - Extending HTML with Other Technologies Part possible so you can support as many different users’ browser configurations as possible. A good programmer Getting Stylish with that work well in different browsers, and will provide documentation for the can create scripts CSS Chapter 11 script that specifies which browsers it works with. You should also state whether your script encounters any Chapter 12 - HTML and Scripting known problems when it runs in particular browsers. Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 Some Nice JavaScript? May We Suggestfor Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 You probably won’t beWiley & Sons © 2003 (408 pages) John surprised to find out that there’s more than one language for writing Web page scripts. JavaScript was createdgoalNetscape to simple, text-oriented Webbrowser and VBScript was created Whether your by is to build a work with the Navigator site by Microsoft to workone loaded with frames, graphics, and animation, this step- languages competed heavily or with Internet Explorer. For quite a while, the two scripting by-step book end, JavaScript won and actually became a standard known as ECMAscript for developer favor, but in the will put you on the right track. (even though everyone calls it JavaScript). Table of Contents Remember Older browsers (versions 3.0 and earlier) don’t work well with scripts written in rival HTML 4 For Dummies, 4th Edition languages. JavaScript scripts don’t work nearly as well in Internet Explorer 3.0 as they do in Navigator 3.0. Introduction even more restrictive; scripts written in it won’t run at all on anything but Windows machines VBScript is Part I - Internet Explorer Its the browser. using Meeting HTML in as Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web More recent browsersWork on the Web Chapter 2 - HTML at have all standardized on JavaScript — thus most of the scripts you’ll find are written in JavaScript. (So are Yourones HTML see later in the chapter.) If you choose to learn a scripting language, Chapter 3 - Creating the First you’ll Page choose Getting Started with HTML JavaScript. Part II Chapter 4 - Structuring Your HTML Documents You don’t need to know much about programming to use scripts in your Web page. All you really have to Chapter 5 Linking use event attributes understand-is how toto Online Resources to link scripts to common user activities (such as clicking a Chapter 6 - Finding and Using Images You can download canned scripts from several different repositories submit button or changing some text). Chapter Web (lookOff Your Page with Formatting on the 7 - Top for a list at the end of the chapter) and then slap them into your page. That’s really all Part III - to it. there is Taking HTML to the Next Level Chapter 8 - HTML Tables Remember HTMLcan use scripting to create some advanced user interfaces that respond to just about Chapter 9 - You Frames everything - HTML Forms Chapter 10 a user does. However, such scripts will be particular to your site; you’ll have a harder time finding Extending HTML with Other Technologies Part IV - canned scripts that meet your needs. For standard dynamic features (such as form validation and image rollovers), you can find what you need on the Web. For more complicated features (or those Chapter 11 - Getting Stylish with CSS specific to your site), you’ll need to work with a programmer (or become one yourself) to create the Chapter 12 - HTML and Scripting necessary scripts. Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Tip Finding Scripts Online Part V - From Web Page to Web Site Here are some good online sources of Chapter 16 free scripts to add to your Web pages: - Creating an HTML Toolbox The JavaScript Source:http:// Chapter 17 - Setting Up Your Online Presence javascript.internet.com/ Chapter 18 - Creating a Great User Interface JavaScript Kit:www.javascriptkit.com/ Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Java-Scripts.Net: www.javascripts.net/ Chapter 20 - Ten HTML Do’s and Don’ts Part VII - JavaScript Appendixes City: www.javascriptcity.com/ Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary The following three sections look at the kinds of JavaScript scripts you can easily add to your Web pages, Index if you don’t know much about programming. They illustrate various approaches that programmers even Cheatto write-scripts 4 For Dummies, 4th Edition use Sheet HTML — and introduce basic concepts you’ll need to work with scripts in your own pages. List of Figures List of Tables Image rollover List of Listings List of Sidebars Listing 12-2 shows an image rollover — short and sweet, it stores all scripting commands for the browser in the event attributes for the <img> element. Listing 12-2: Image Rollover <html>
  • <head> HTML for Dummies, 4th Edition <title>A simple4 image rollover</title> by Ed Tittel and Natanya Pitts </head> ISBN:0764519956 John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site <body> or one loaded with frames, graphics, and animation, this step<p> by-step book will put you on the right track. <img src="image_one.gif" alt="button" border="0" onmouseover="this.src = ‘image_two.gif’;" onmouseout="this.src = ‘image_one.gif’;"> Table of Contents </p> HTML 4 For Dummies, 4th Edition </body> Introduction </html> Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page The<img> element initially references image_one.gif, as shown in Figure 12-2. Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending When withpage loads, it displays Figure 12-2: HTML the Other Technologies Chapter 11 the image referenced in the image src attribute. - Getting Stylish with CSS The instructions in and Scripting Chapter 12 - HTML the onmouseover attribute tell the browser to change the source of this element (the image 13 - Making Multimedia Magic Chapter element) to image_two.gif when a user moves his or her mouse pointer over the image. This effectively - Integrating a Database into Your HTML Chapter 14 rewrites the <img> element so it reads <img src="image_two.gif">. Figure 12-3 shows that the browser HTML Relates to Other Markup graphic when the mouse pointer moves over the image. Chapter 15 - Howdoes indeed display a different Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Figure 12-3: When a mouse pointer moves over the image, the browser displays a different graphic. Appendix C - Glossary Index instructions in the onmouseout attribute tell the browser to change the source of the <img> element The back to its - HTML 4 For (image_one.gif) Cheat Sheet original value Dummies, 4th Editionwhen the mouse pointer moves off the image. List of Figures Tip The URLs in this example are relative, which means the images must reside in the same folder as the HTML for this markup and scripting to work. If you want to store your images in a separate directory, List of Listings you can — just reference the image in the script accordingly. For instance, if all images lived off the main List of Sidebars Web server root directory in a directory called images, the <img> element would change to something like this: List of Tables <img src="/images/image_one.gif" alt="button" border="0" onmouseover="this.src = ‘/images/image_two.gif’;" onmouseout="this.src = ‘/images/image_one.gif’;"> You can read more about relative URLs in Chapter 3.
  • Remember There are about as many ways to create image rollovers as there are images. (Okay, maybe HTML 4 notthat many, but you getfor Dummies, 4th Edition the point.) The rollover shown here is just one example; as you search for ISBN:0764519956 by Ed Tittel and Natanya Pitts scripts to use in your page, you may find others. Be sure to read any notes or documentation included with John WileyoutSons © 2003 (408 pages) names to make the script work. & where to put image the script you choose; find Whether your goal is to build a simple, text-oriented Web site Technical Stuff or one loaded with frames, graphics, some nice effects to your site, but don’t overuse them. Rollovers are an easy way to add and animation, this stepby-step book will on your site, right track. If images are constantly changingput you on theusers may be distracted from the important content. Choose a few places to use rollovers — say, your main navigation — and use them consistently across your site. You’ll get the benefit of the effect without making your visitors seasick. Table of Contents HTML 4 For Dummies, 4th Edition Pop-up windows Introduction Part I - Meeting HTML in Its Natural Environment A common -use for scripting is to to Know about HTML and thewindows and manage the size and Chapter 1 The Least You Need open new links in separate Web appearance of the at Work on the Web Chapter 2 - HTML browser window. Listing 12-3 attaches scripting instructions to a link that forces the linked document to open in a new 300 x 200 window that doesn’t have a status bar, menu bar, or scroll - Creating Your First HTML Page bars, and that isn’t resizable, as shown in Figure 12-4. Part II - Getting Started with HTML Chapter 3 Chapter 4 Listing 12-3:Structuring Window Documents Pop-Up Your HTML Chapter 5 - Linking to Online Resources <html> - Finding and Using Images <head> Chapter 7 - Top Off Your Page with Formatting <title>A pop-up window</title> Part III - Taking HTML to the Next Level </head> Chapter 6 Chapter 8 - HTML Tables Chapter 9 - HTML Frames <body> - HTML Forms <a href="javascript:void(0);" Part IV - Extending HTML with Other Technologies onclick="window.open(‘http://www.dummies.com’, ‘popupWin’, Chapter 11 - Getting Stylish with CSSstatus=0, menubar=0, scrollbars=0, resizable=0, ‘toolbar=0, location=0, Chapter 12 - HTML and Scripting width=300, height=200, left=20,top=20’)">Dummies.com</a> Chapter 13 - Making Multimedia Magic </body> Chapter 14 - Integrating a Database into Your HTML </html> Chapter 10 Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition Figure 12-4: You can use JavaScript to open a Web page in a new window and carefully control the display of the window. List of Figures List of Tables List of Listings Warning The <a> element in the preceding code sample is listed across several lines for display List of Sidebars purposes; however, you’ll need to remove the line breaks if you add this code to your HTML pages and put the entire anchor tag on a single line. Random line breaks in JavaScript can cause errors on the page. Notice that the value of href is javascript:void(0); rather than the actual URL the link points to (http://www.dummies.com). The link is part of the JavaScript, but you include the javascript:void(0); so the browser knows to move past the href attribute value and look to the scripting code to find the URL.
  • Theonclick event attribute holds all the instructions the browser needs to open the link in a new HTML 4 for Dummies, 4th Edition window, starting with window.open that instructs the browser to pop open a new window. The specifics ISBN:0764519956 by Ed the and Natanya for the window follow inTittel parentheses:Pitts John Wiley & Sons © 2003 (408 pages) http://www.dummies.com:is to build a simple, text-oriented Web site Whether your goal The URL to display in the window. or one loaded with frames, graphics, and animation, this step- popupWin:A name for the window. on the right track. by-step book will put you toolbar=0:Don’t display the toolbar. Table of Contents HTML location=0:Don’t Edition the location bar. 4 For Dummies, 4th display Introduction status=0:Don’t display the status bar. Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Don’t display the Know bar. menubar=0:Least You Need to menu about HTML and the Web Chapter 2 - HTML at Work on the Web scrollbars=0:Don’tFirst HTML Page bars. Chapter 3 - Creating Your display the scroll Part II - Getting Started with HTML resizable=0:Don’t allow the window to be resized. Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources width=300:Sets the window width to 300 pixels. Chapter 6 - Finding and Using Images height=200:Sets the window Formatting Chapter 7 - Top Off Your Page with height to 200 pixels. Part III - Taking HTML to the Next Level left=20:Positions the new window 20 pixels from the left of the parent window. Chapter 8 - HTML Tables Chapter 9 - Positions the top=20:HTML Frames new windows 20 pixels from the top of the parent window. Chapter 10 - HTML Forms This code turns off all the menus and other window Part IV - Extending HTML with Other Technologies features by setting their values to zero (0). You can turn any of them on Stylish with the Chapter 11 - Getting by changingCSS zeros to ones (1). Also note that the values for toolbar, location, and other 12 - HTML and aren’t included in quotation marks. JavaScript doesn’t require that you use them. Chapterwindow specifics Scripting Remember Making even though this Chapter 13 -also thatMultimedia Magic code is in an <a> element, all these parameters are part of the JavaScript - Integrating HTML code; therefore, they must abide by JavaScript rules. Chapter 14 code, not thea Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Tricks of the Trade Pop-up windows are helpful if you want to call someone’s attention to some special content immediately, but they can backfire on you if you use them too much. Many Web sites use pop-up Chapter 16to -deliver ads, so users are becoming desensitized (or hostile) to them and simply ignore them Creating an HTML Toolbox windows Chapter 17 software that prevents them). Before you add a pop-up window to your site, be sure it’s - Setting Up Your Online Presence (or install Chapter 18 necessary;a Great User Interface the user experience if it’s angrily slammed shut. absolutely - Creating consider how it affects Part V - From Web Page to Web Site Part VI - The Part of Tens Chapter 19 - Ten Ways to Form validation Exterminate Web Bugs - Ten HTML Do’s and Don’ts Chapter 20 Part VII - Appendixes A common use for JavaScript is to verify that users have filled out all the required fields in a form before Appendix A - actually submits the form to the form-processing program on the Web server. Listing 12-4 the browser HTML 4 Tags Appendix B - HTML Character Codes stores a form checking function, checkSubmit, in the <script> element of the HTML page, and Appendix C - Glossary references it in the form’s onsubmit attribute. Index Listing 12-4: Form Validation Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures <html> List of Tables <head> List of Listings <title>Linking scripts to HTML pages</title> <script List of Sidebars language="javascript"> function checkSubmit ( thisForm ) { if ( thisForm.FirstName.value == ‘’ ) { alert(‘Please enter your First Name.’); return false; } if ( thisForm.LastName.value == ‘’ ) {
  • alert(‘Please enter your Last Name.’); HTML 4 false; return for Dummies, 4th Edition by Ed Tittel and Natanya Pitts John Wiley & Sons © 2003 (408 pages) } ISBN:0764519956 return Whether your goal is to build a simple, text-oriented Web site true; } </script> </head> or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents <body> HTML 4 For Dummies, 4th Edition <form Introduction method="POST" action="/cgi-bin/form_processor.cgi" onsubmit="return checkSubmit(this);"> Part I - Meeting HTML in Its Natural Environment <p> Chapter 1 - The Least You Need to Know about HTML and the Web First HTML at Work on the Web Name: <input type="text" name="FirstName"><br> Chapter 2 Last Name: <input type="text" name="LastName"><br> Chapter 3 - Creating Your First HTML Page <input type="submit"> Part II - Getting Started with HTML </p> Chapter 4 - Structuring Your HTML Documents </form> Chapter 5 - Linking to Online Resources </body> Chapter 6 </html> - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 performs one of two operations if either form field isn’t filled in when the user clicks the submit This script - HTML Tables Chapter 9 - HTML Frames button: Chapter 10 - HTML Forms It - Extending browser to display a warning Part IV instructs theHTML with Other Technologies (the text is specified in the alert) to let the user know he or 11 - Getting Stylish with Chapter she forgot to fill in a field. CSS Chapter 12 It returnsHTML and Scripting to the browser, which prevents the browser from actually submitting the a value of false Making form to-the formMultimedia Magic processing application. Chapter 13 Chapter 14 - Integrating a Database into Your HTML If the fields are filled in Relates to Other Markup Languages Chapter 15 - How HTML correctly, the browser doesn’t display alerts and returns a value of true, which Part Vthe browser that the form Site tells - From Web Page to Web is ready to pass on to the Web server. Figure 12-5 shows how the browser displays the Creating an HTML Toolbox Chapter 16 - alert if the first name field is empty. Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars Figure 12-5: A good use of JavaScript is to validate form data. Tip Although this example only verifies whether users filled out the form fields, you can create more advanced scripts that check for particular data formats (such as @ signs in e-mail addresses and only numbers in phone number fields). JavaScript is a robust Web programming language, so your form
  • validation can be as simple (or as complex) as you need it to be. HTML 4 for Dummies, 4th Edition ISBN:0764519956 by Ed Tittel you create Pitts Tricks of the Trade When and Natanyaforms that include required fields, always include client-side John Wiley & Sons 2003 (408 pages) scripting validation to catch missing©data before the script can even find its way back to the program that processes it on the server. Users get to build a simple,they take the time to fill out a form only to be told to Whether your goal is frustrated when text-oriented Web site or one their browsers to provide missing information. When click the Back button in loaded with frames, graphics, and animation, this step- you use client-side scripts, the by-step book will put you on the right track. script catches any missing information before the form page disappears so users can quickly make changes and try to submit again. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • for Dummies, Chapter HTML Tittel and NatanyaMultimedia ISBN:0764519956 13: 4Making 4th Edition Magic by Ed Pitts Overview John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepIn This Chapter by-step book will put you on the right track. Understanding your multimedia options Table of Contents HTML Using Dummies, 4th Edition 4 For media wisely Introduction Linking to audio and video Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least Embedding media You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web More and - Creating Your First HTML Page Chapter 3 more Web sites are using multimedia. As a developer, you can now integrate different media types, Getting Started with and/or Part II -such as audio, video, HTML Chapter 4 animation clips, in a Web page to make your pages come alive. - Structuring Your HTML Documents Technical Stuff Multimedia has had an interesting evolution. In the beginning, user bandwidth didn’t - Linking to Online Resources allow multimedia elements to be incorporated; more recently, user bandwidth has increased, and Chapter 6 multimedia -isFinding usedUsing Images However, in an effort to improve usability and design methodology, being and everywhere. Chapter 7 are being morePage with Formatting designers - Top Off Your conservative with their use of multimedia elements. Chapter 5 Part III - Taking HTML to the Next Level Chapterconcerns must be addressed before you add media components to your page. For example, will the Many 8 - HTML Tables media 9 Chapter type -function properly on different platforms, or will the user have to use a plug-in application to see HTML Frames and hear - media? These are only two of the questions this chapter answers. Chapter 10 the HTML Forms Part IV - Extending HTML with Other Technologies Warning Although most Web technology has begun to embrace the concept of standards, multimedia is - Getting Stylish with CSS one area that has yet to follow suit. In this chapter, you get a look at some of the diverse audio and video Chapter 12 - HTML and Scripting formats, as well as several different players required for users to use these formats. There aren’t any Chapter 13 - Making Multimedia Magic consistent standards for embedding these functions (although the W3C uses the <object> element); Chapter 14 - Integrating a Database into Your HTML therefore, browsers use different methods for embedding these functions. Chapter 11 Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Siteby developers Remember Most methods used (and mentioned in this chapter), do not follow the HTML Chapter 16 We rarely break from our dedication to the standard; however, if you’re going to work with standard. - Creating an HTML Toolbox multimedia, Setting Up Your Online Presence Chapter 17 - you need to be aware of the most effective use of media — and for now, that means sometimes Creating a Great User Interface Chapter 18 -using non-standard methods. Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition Using Media Wisely by Ed Tittel and Natanya Pitts ISBN:0764519956 If you’re considering adding & Sons © 2003 (408Web page, you should be able to identify its function. For John Wiley multimedia to a pages) example, a band Whether yourlikely is to build a simple, text-oriented WebMP3; however, there is little reason would most goal want to allow users to download an site for yahoo.com to allow loaded with frames, graphics, and animation, you search the Web. or one you to play some background music while this stepby-step book will put you on the right track. If you adhere to a few basic dos and don’ts as you work with multimedia, your Web page will benefit vastly: Table of Contents the role and function of your media — don’t just include audio or video for the fun of it. Understand HTML 4 For Dummies, 4th Edition Compress your files — audio and video files can be quite large. Introduction Part IProvide an off function for users if a media - Meeting HTML in Its Natural Environment Chapter 1 program starts automatically. - The Least You Need to Know about HTML and the Web Chapter 2 intros should allow users to skip them — add a Skip Intro button. Flash - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Provide a Started with HTML Part II - Gettinglink to all necessary media players. Chapter 4 Structuring Your HTML Documents Identify-key information about your media, such as file sizes and types — users need to know what Chapter 5 they’re -inLinking to Online Resources for. Chapter 6 - Finding and Using Images Before getting started, you may want to check out some sites to see how other developers are using Chapter 7 - Top Off Your Page with Formatting multimedia elements. The Next Level Part III - Taking HTML to thefollowing three are excellent: Chapter 8 - HTML Tables Chapter 9 - HTML Frames www.egomedia.com Chapter 10 - HTML Forms www.cnn.com/ Part IV - Extending HTML with Other Technologies www.spoontheband.com Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Edition Your Web Multimedia Options by Ed Tittel and Natanya Pitts ISBN:0764519956 As you select and addWiley & Sonsfeatures to your Web page, you have to decide John multimedia © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site Which file format best suits your needs, as well as which are the most compressed. or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Whether to use a separate plug-in media player. Remember, not all browsers automatically support every media format. Table of Contents HTML How to integrate4th Edition into the Web page. You have three basic ways to integrate media files: 4 For Dummies, media files Link to the external media file, embed and present the clip as an internal file, or stream the media. Introduction Part I - Meeting HTML in Its Natural Environment Audio formats You Need to Know about HTML and the Web - The Least Chapter 1 Chapter 2 - HTML at Work on the Web You’ve probably heard of the more common formats in the following list, but several other types are also Chapter 3 - Creating Your First HTML Page worth looking at. Just remember Part II - Getting Started with HTMLthat when you select the audio format, you should also identify three other crucial Structuring Your HTML Documents players or plug-ins required, and the way you want to factors: your target audience, the Chapter 4 present audio on your page. Chapter 5 - Linking to Online Resources Chapter 6 this list of and Using Images Check out - Finding format options: Chapter 7 - Top Off Your Page with Formatting AU Taking HTML to the Next compressed Part III - (or Sun/NeXT audio): ALevel Chapter 8 audio format defined for Unix. - HTML Tables AIFF (Audio Interchange File Format): A common audio format used for the Mac OS. The format - HTML Frames does not support any kind of compression, so it tends to produce large files. Chapter 9 Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologiespopular MP3 (MPEG-1, Layer III): One of the most audio formats used on the Web. This format uses Chaptercompression ratio that can reduce file sizes to about a megabyte per minute — a drastic reduction in a 11 - Getting Stylish with CSS Chapter 12 - — by removing the part of the audio spectrum that is largely beyond the range of human file size HTML and Scripting Chapter 13 - Making Multimedia file preserves nearly all file contents that the human ear can hear, it retains hearing. Because an MP3 Magic Chapter 14 - Integrating a Database into Your HTML near-CD quality. Chapter 15 - How HTML Relates to Other Markup Languages Chapter 20 - Ten HTML Do’s and Don’ts MIDI (Musical Instrument Digital Part V - From Web Page to Web Site Interface): The MIDI file format is actually not an audio format, but rather a digital representation of a sound. It was originally created to allow sounds created on one Chapter 16 - Creating an HTML Toolbox keyboard to be played on another without losing any quality. MIDI is now used to enable electronic Chapter 17 - Setting Up Your Online Presence instruments and sound cards to communicate with each other. Instead of representations of sounds, a Chapter 18 - Creating a Great User Interface MIDI file contains instructions that tell the computer or instrument how to produce the music (which Part VI - The Part of Tens makes the file size remarkably small). The user’s sound card reads these instructions and then Chapter 19 - Ten Ways to Exterminate Web Bugs produces the notes. Part VII - (QuickTime) QT Appendixes and RA (RealAudio): The QT format works only with the QuickTime player. Same Appendix A for HTML 4 Tags thing - RA (RealAudio) files. You can find out more about these formats in the section, “Media Appendix B - for Audio and Video,” later in this chapter. Players HTML Character Codes Appendix C - Glossary RMF (Rich Music Format): An audio format, defined by Beatnik, that encrypts data and can contain both recorded audio and MIDI sequences. RMF file sizes are typically small enough that audio for a Cheat Sheet - HTML 4 For Dummies, 4th Edition Web site’s interface can be downloaded in one file. This file type requires Beatnik’s Player and List of Figures JavaScript Music Object to play the files, so it’s not used as often as the other types listed here. Check List of Tables outwww.beatnik.com for more information. Index List of Listings List ofSWA (Shockwave Audio): A compressed audio format, similar to MP3, that produces small files and Sidebars retains most of the audio integrity. As the author, you can decide the compression ratio: the higher the ratio, the smaller the file. Keep in mind, however, that a smaller audio file also sacrifices some sound quality. SWF (Flash): Animation format with built-in sound capabilities that can also stream files. SWF stands for Shockwave File Extension. Sound can loop in the background of a SWF animation or be triggered by a particular frame or event. As a binary vector format, Flash creates small files that stay small even
  • when they contain sound. HTML 4 for Dummies, 4th Edition by Ed Tittel and Natanya Pitts WAV (RIFF WAVE): Developed by Microsoft and IBM, thisISBN:0764519956 audio file format used for is the common John Wiley & Sons © 2003 (408 pages) Windows. Even when compressed, WAV files are still comparatively large. Whether your goal is to build a simple, text-oriented Web site WMA (Windows Media Audio): Microsoft format foranimation, this stepor one loaded with frames, graphics, and its new Windows Media Technologies — a suite of utilities for by-step book will put you on the right track. multimedia (including high-quality audio). creating, serving up, and viewing streamed Video formats Table of Contents HTML 4 For Dummies, 4th Edition Video publishing on the Web has seen a jump in the last few years. In the past, online video projects cost a lot of money to produce — and even more money to publish. These days, however, anyone with a digital Part I - Meeting HTML in Its Natural Environment video (DV) camcorder can capture images and publish them on the Web. Video is not yet where Chapter 1 - The Least You Need to Know about HTML and the Web developers would like it to be — almost everyone has seen a fuzzy image or two — but if visual quality is Chapter 2 - HTML at Work on the Web not as important (for your purposes) as access, publishing your video on the Web can be relatively easy. Introduction Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML The first step in getting a handle on video is to recognize video formats. The most common are .mov, Chapter and - Structuringdesigner, it’s your job to include a pointer to the appropriate player; most of the file .avi, 4 .rv. As the Your HTML Documents Chapterin the-following list require a specific player to be viewed: types 5 Linking to Online Resources Chapter 6 - Finding and Using Images .avi:AVI Top Off Your Page with Formatting (audio/video interleaved), video format for Windows. Chapter 7 Part III - Taking HTML to the Next Level .dcr:Movies created with Macromedia Director. Chapter 8 - HTML Tables Chapter 9 Format for QuickTime movies. .mov: - HTML Frames Chapter 10 - HTML Forms .mpg: Created by the Motion Picture Experts Part IV - Extending HTML with Other Technologies Group. This format is a widely used standard for digital compression of moving images. Chapter 11 - Getting Stylish with CSS Chapter 12 QuickTime movie file type from Apple. .qt:A - HTML and Scripting Chapter 13 - Making Multimedia Magic .qt3: - Integrating a Database into Your compression format for video, audio, MIDI, animation, 3D, Chapter 14QuickTime 3 provides an advancedHTML and so How Chapter 15 -on. HTML Relates to Other Markup Languages Part V - From Web Page to Web Site .rv:Real Video, a format for streaming video on the Web, optimized for low-to-medium-speed - Creating an HTML Toolbox connections. Chapter 16 Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great compression of streaming video, particularly over low bandwidth. .viv:VIVO format for the User Interface Part VI - The Part of Tens Chapter 19 - Ten Animation Ways to Exterminate Web Bugs - Ten HTML Do’s and Don’ts Chapter 20 Part VII - Appendixes For animation, there’s only one superstar. Flash has taken over Web design (no cheap jokes about the Appendix A - HTML 4 Tags Planet Mongo, please). Flash provides movement and images that are sleeker and easier to use than ever Appendix B - HTML Character Codes before. Appendix C - Glossary For Indexa look at what Flash can do, visit www.flash99good.com/. Unlike plain HTML pages, however, Flash-enabled Web For Dummies, a Flash plug-in before visitors can view them. When they’ve Cheat Sheet - HTML 4 pages require 4th Edition downloaded List of Figures the player, users don’t have to worry about it again until a new version of Flash is unveiled (about every one to two years). List of Tables List of Listings Don’t underestimate the amount of time it takes to learn Macromedia’s Flash application. Remember List of other graphics applications (such as Photoshop or Dreamweaver), the program can be rather Like Sidebars daunting to master and requires dedication. Most users like Flash animation because the images in Flash movies — which don’t look like movies at all, but more like moving Web pages — are clean and smooth. All in all, we like Flash and recommend using it, if you have the time to learn how to use it properly. Tip Flash is a topic worthy of an entire book. If you would like to explore it more fully, we recommend
  • visiting Macromedia’s site at www.macromedia.com. If you feel like you need an entire book, we suggest HTML 4 for theFlash MX Bible by Robert Dummies, and Snow Dowd Macromedia Flash MX For Dummies by Gurdy Reinhardt 4th Edition ISBN:0764519956 by Ed Tittel (both published by Wiley Publishing, Inc.). and Natanya Pitts Leete and Ellen Finkelstein John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this stepby-step book will put you on the right track. Table of Contents HTML 4 For Dummies, 4th Edition Introduction Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Video Media Players for Audio and Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 Media can be stored in any number of formats these days; our need to store and transmit information in John Wiley & Sons © 2003 (408 pages) this form has resulted in numerous is to build a players text-orientedall audio, video, and other media Whether your goal media-rich simple, that handle Web site formats. RealOne Player tries to beframes, graphics, and — but with this advent of new compression or one loaded with the player of choice animation, the stepby-step book will put you on the and track. formats (MP3, MPEG-4, and so on), developers right users alike have to upgrade constantly. Plug-in applications are programs that users can download, install, and use as a part of their Web Table of Contents browsers. This type of application initially began with Netscape, when users could download, install, and HTML 4 For Dummies, 4th Edition for audio or video. However, these applications were called “helper define supplementary programs Introduction applications.” This system is still used when you link to a media file. Part I - Meeting HTML in Its Natural Environment Now, users-can download plug-in applications that the browser recognizes automatically — these Chapter 1 The Least You Need to Know about HTML and the Web applications plug inat Workbrowser. Once recognized, the plug-in allows all functions to be integrated into Chapter 2 - HTML to the on the Web the renderedCreating Your First HTML Page a media file is embedded in a Web page). Chapter 3 - Web page (for example, when Part II - Getting Started with HTML Tip Users can download any number of possible plug-ins. Most users, however, wait until they need a - Structuring particular plug-in before Your download it. they HTML Documents Chapter 4 Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images RealNetworks Page with Formatting Chapter 7 - Top Off Your Part III - Taking HTML to the Next Level RealNetworks (then Progressive Networks) started the streaming audio craze in the mid-1990s — and - HTML Tables soon independent players were popping up everywhere. RealNetworks went through a stage of production Chapter versions of its software didn’t support older versions of its own media formats — in short, the whole 9 - HTML Frames where Chapter 10 a-mess. Forms HTML thing was Chapter 8 Part IV - Extending HTML with Other Technologies Now, however, RealNetworks has released RealOne Player, which provides an all-in-one player — it does Chapter 11 - Getting Stylish with CSS streaming - HTML and Scripting Chapter 12 audio and video, constructs MP3 libraries, and can be used to burn CDs. You must have the RealOne - Making Multimedia or .rv files. Chapter 13 Player to listen to .raMagic Chapter 14 - Integrating a Database into Your HTML Tricks of the Trade Manyexperienced multimedia users prefer MP3 players (such as WinAmp or - How HTML Relates to Other Markup Languages Sonique— or iTunes for the Mac), and streaming services such as Shoutcast. However, most lessPart V - From Web Page to Web Site experienced users out there are familiar with the RealOne Player. If you want to reach them where their Chapterpreference lives, you can download the RealOne Player at www.real.com. audio 16 - Creating an HTML Toolbox Chapter 15 Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface QuickTime Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs We like QuickTime, created by Apple, although it doesn’t have the wide range support that the other players have.Ten HTML Do’s and Don’ts media formats, and supports about the same functionality as the QuickTime supports most Part VII - Appendixes other players mentioned in this section. Chapter 20 Appendix A - HTML 4 Tags Appendix Bthing QuickTime can’t do is rip MP3s or burn CDs. (That sort of thing is left up to iTunes, another The only - HTML Character Codes Apple product.) QuickTime is also compatible with Flash, Cakewalk, Premiere, and other multimedia Appendix C - Glossary tools. Index Download a copy of this player at www.apple.com/quicktime. Cheat Sheet - HTML 4 For Dummies, 4th Edition Windows Media Player List of Figures List of Tables The Listings List of proprietary Windows answer to an all-in-one player has many of the same advantages as the RealOne Player. It supports streaming audio and video, DVD playback, encoding and burning audio files, List of Sidebars as well as other multimedia-related functions. You must have the Windows Media Player to listen to .wmp files. Download the Windows Media Player at www.microsoft.com/windows/windowsmedia/players.asp.
  • HTML 4 and Video Linking to Audiofor Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 One method of getting users to access your multimedia content is by adding a hyperlink that leads to the John Wiley & Sons © 2003 (408 pages) audio or video file. This method is bar-none thesimple, text-oriented Web you can choose. Whether your goal is to build a easiest delivery method site or one loaded with frames, graphics, and animation, this step- You can link to most audio and video youtypes (except for streaming formats). Here’s how it works: by-step book will put file on the right track. 1. You use the <a> element to provide a link to the media file, like this: Table of When the user clicks the hyperlink, the media file opens in a separate media-player window. 2. Contents HTML 4 For Dummies, 4th Edition Tricks of the Trade We recommend providing your users with information about what they will be Introduction downloading. For example, you could provide Part I - Meeting HTML in Its Natural Environment the file format, size, and URL location. You should Chapter also -provide a link to the appropriate media playerthecase your users have to download it first. 1 The Least You Need to Know about HTML and in Web Chapter Figure 13-1 at Workaon the WebMP3 file to download. 2 - HTML shows link to an Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 Figure 13-1: This Usershows a link for downloading an MP3 file. - Creating a Great site Interface Part VI - The Part of Tens Warning You cannot link to streaming formats. If linked, a streaming format down- loads like any - Ten Ways to Exterminate Web Bugs other media file, and will not play until completely downloaded — that is, it won’t stream. Chapter 19 Chapter 20 - Ten HTML Do’s and Don’ts Part VIIyou’ve created When - Appendixes a media file, using one of the file types defined in the previous sections, you point to Appendixby using the href attribute, like so: the file A - HTML 4 Tags Appendix B - HTML Character CodesHere to listen to a song.</a> <a href="song.wav">Click Appendix C - Glossary Index Because we HTML relative address for this audio file, the file must be located in the same directory as the Cheat Sheet - use a 4 For Dummies, 4th Edition Web page. List of FiguresIf you wanted to link to a song not stored on your sever, you could point to the resource by using an absolute address, like this: List of Tables <a Listings List ofhref="http://www.domain.com/song.wav">Click Here to listen to a song.</a> List of Sidebars When the user selects the link, the appropriate media player opens, and the audio file plays. The following is a complete example of the markup used to link to an audio file: <html> <head> <title>Anthropos Arts</title> </head> <body>
  • <p>One popular form of music in Colombia is the CUMBIA (koom-bee-ya). HTML for Dummies, 4th Edition It is typically4 in 4/4 time.</p> ISBN:0764519956 by Ed "La Piragua" / "The Little Boat"</p> <p>Example song: Tittel and Natanya Pitts John Wiley & Sons on mp3 pages) © 2003 (408 <p>Download "La Piragua" Whether your goal is to build a simple, text-oriented Web site <a href="http://www.anthropos.org/media/mp3/laPiragua.mp3">here</a></p> or one loaded with frames, graphics, and animation, this step</body> by-step book will put you on the right track. </html> Table of Contents Tip When the user selects the hyperlink to play an audio file, the browser looks for an appropriate player. If the user doesn’t have an audio player installed (oops), the browser prompts the user to save the file. A Introduction dialog box may also appear, mentioning that the file is being saved to the user’s hard drive. HTML 4 For Dummies, 4th Edition Part I - Meeting HTML in Its Natural Environment Chapter 1 Warning - The Least You Need to Knowelse’s audio or video Web make sure you have his or her If you’re linking to someone about HTML and the file, Chapter 2 permission - HTML at(Look on the Web link.) to do so. Work before you Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts Part VII - Appendixes Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 for Dummies, 4th Files Embedding Audio and Video Edition into Your Page by Ed Tittel and Natanya Pitts ISBN:0764519956 Embedding media components enables you pages) John Wiley & Sons © 2003 (408 to actually make media an integral part of how your Web page works. When the user activates to build a simple, text-oriented Web site Web page — a separate Whether your goal is the media file, it’s played as part of the window is not needed. Here’s how it works:graphics, and animation, this stepor one loaded with frames, by-step book will put you on the right track. 1. You define controls that allow the user to activate the file. 2. The user clicks (for example) a Play button to play file is activated. Table of Contents HTML 4 For Dummies, 4th Edition For example, in Figure 13-2, clicking Play activates a song, which plays from within the Web page Introduction separate window needed. — no Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level Chapter 8 - HTML Tables Chapter 9 - HTML Frames Figure 13-2: A console (defined as a control) is visible in the Web page. Chapter 10 - HTML Forms Part IV - Extending HTML with Other Technologies Tip Although embedding a Flash animation file into your Web page has its own quirks, the concepts - Getting Stylish with CSS remain the same. Once embedded, a Flash movie begins the moment the user accesses its browser Chapter 12 - HTML and Scripting window. In this case, the user need not even activate a control. Chapter 11 Chapter 13 - Making Multimedia Magic Chapter 14use Integrating a Database into Your HTML to embed a media file. Originally, developers used the You can - the <embed> or <object> element <embed> - How HTML Relates to Other Markup so today. Chapter 15 element to embed a media file — notLanguages Why? Well, the HTML standard doesn’t support the V - From element to Web Site Part <embed>Web Page (oh, that). This state of affairs is difficult for developers because Netscape traditionally Creating an <embed> element, whereas Internet Explorer supports the <object> element Chapter 16 -supports the HTML Toolbox (which is - Setting Up Your HTML standard). Chapter 17officially part of the Online Presence Thus the browser wars continue. Chapter 18 - Creating a Great User Interface Tip To embed a video, you can use either the <embed> or the <object> element. As with media files, however, neither of these techniques will work in all browsers (namely, Netscape, Internet Explorer, and Chapter 19 - Ten Ways to Exterminate Web Bugs Opera). Such differences in support mean that if you want to reach the widest possible audience, you Chapter 20 - Ten HTML Do’s and Don’ts should provide a link and let the user download (or stream) the video file. Part VI - The Part of Tens Part VII - Appendixes Appendix A - of you4 Tags Okay, some HTML will have an irresistible craving to embed a media file. Just remember: There are Appendix B - HTML Character Codes already several different ways to embed media, and we don’t have the space to cover each option. To Appendix C spoiling your fun, however, we can provide you with a few examples. keep from - Glossary Index Using the <embed> element Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures One Tables List of of the most common ways to embed media is to use the <embed> element. Here’s an example: List of Listings List of Sidebars <html> <head> <title>Anthropos Arts</title> </head> <body> <p>One popular form of music in Colombia is the CUMBIA (koom-bee-ya). It is typically in 4/4 time.</p>
  • <p>Example song: "La Piragua" / "The Little Boat"</p> HTML 4 for <p>Play "La Piragua":Dummies, 4th Edition ISBN:0764519956 by Ed Tittel and Natanya Pitts <embed src="http://www.anthropos.org/media/mp3/laPiragua.mp3" John Wiley width="150" height="15" & Sons © 2003 (408 pages) autostart="false" Whether your goal is to build a simple, controls="smallconsole">here</a></p> text-oriented Web site or one loaded with frames, graphics, and animation, this step</body> by-step book will put you on the right track. </html> In this Contents Table ofexample, we used several attributes to define media properties. In addition to the attributes used in this example, you can add a few more: HTML 4 For Dummies, 4th Edition Introduction src="filename":Identifies the source file. Part I - Meeting HTML in Its Natural Environment autostart="false Need to Know about attribute to require sound to play automatically when the Chapter 1 - The Least You | true":Use this HTML and the Web document renders, or to require users to activate the control. Chapter 2 - HTML at Work on the Web Chapter 3 - Creating Your First HTML Page controls="console | smallconsole | playbutton | pausebutton | stopbutton | volumelever ":Thecontrols attribute defines the type of control that will be displayed and Chapter 4 - Structuring Your HTML Documents serves as the interactive trigger for the user. Part II - Getting Started with HTML Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images width="pixel":Thewidth attribute defines the width for the control being used. Chapter 7 - Top Off Your Page with Formatting height="pixel":Theheight attribute Part III - Taking HTML to the Next Level Chapter 8 defines the height for the control being used. - HTML Tables loop="n" or ="true | false":Theloop attribute enables you to specify the number of times - HTML Frames an audio file should loop. The default is 1. Chapter 9 Chapter 10 - HTML Forms Part IV - Extending HTML right | center | justify":Thealign align="left | with Other Technologies attribute functions the same as it Chapter 11 when usedStylish with CSS element. The default is left. does - Getting with the <img> Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic Embedding the Windows Media Player Chapter 14 - Integrating a Database into Your HTML Chapteruse theHow HTML Relates to Internet Explorer users may not be able to access the media file. If you 15 - <embed> element, Other Markup Languages Part V - From Web Page to Web Site Therefore, if you’re trying to reach a large audience, another recommended method is to embed the Chapter 16 Media Player as a part of Internet Explorer and Netscape. Although doing so won’t reach all Windows - Creating an HTML Toolbox users, 17 Chapter it will-reach moreYour Online Presence using the <embed> element. Setting Up than you’d reach by Chapter 18 - Creating a Great User Interface Tip Providing a link to Part VI - The Part of Tensthe necessary media player helps users access your media. Chapter 19 - Ten Ways to Exterminate Web Bugs The Windows Media Player is normally embedded into a page for Internet Explorer as an ActiveX Control Chapterthe <object> element (this does not work on Macs). For Netscape, the player is incorporated by using 20 - Ten HTML Do’s and Don’ts Part VII -plug-in defined using a Appendixes by the <embed> element. If you use this technique, you can define the <embed> Appendix A - HTML <object> element (is that slick, or what?) — allowing this method to work for both element within the 4 Tags Appendix B - HTML Character Codes like this: Internet Explorer and Netscape — Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition <object id="mediaplayer" width=320 height=310 classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" List of Tables codebase="http://activex.microsoft.com/activex/controls/mplayer/ List of Listings en/nsmp2inf.cab#version=5,1,52,701" List of Sidebars "loading media player" type="application/x-oleobject"> standby= <param name="filename" value="movie.avi"> <param name="autostart" value="true"> <param name="showcontrols" value="true"> <param name="showstatusbar" value="true"> <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/windows/mediaplayer/" src="video/movie.avi"width="320" height="310" name="mediaplayer" List of Figures
  • autostart="true" showstatusbar="1" showcontrols="1"> HTML 4 for Dummies, 4th Edition </embed> ISBN:0764519956 by Ed Tittel and Natanya Pitts </object> John Wiley & Sons © 2003 (408 pages) Whether your goal is to build a simple, text-oriented Web site or here in bold are variables that you would want this stepAll the items shownone loaded with frames, graphics, and animation, to define yourself. The rest you can by-step book will put you want right track. leave alone. Note, however, that you mayon theto change a few variables such as autostart. Defining background audio Table of Contents HTML 4 For Dummies, 4th Edition Internet Explorer supports a function that allows background music. First, define the Internet Explorer Introduction version: Part I - Meeting HTML in Its Natural Environment Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web Chapter 3 <html> - Creating Your First HTML Page Part II - Getting Started with HTML <head> Chapter 4 - Structuring Your HTML Documents <title>Anthropos Arts</title> Chapter 5 </head> - Linking to Online Resources Chapter 6 <body> - Finding and Using Images <bgsound - src="http://www.anthropos.org/media/mp3/laPiragua.mp3"> Chapter 7 Top Off Your Page with Formatting <p>One popular to the Next Level Part III - Taking HTML form of music in Colombia is the CUMBIA (koom-bee-ya). It 8 - HTML Tables Chapter is typically in 4/4 time.</p> <p>Example song: "La Piragua" / "The Little Boat"</p> Chapter 9 - HTML Frames </body> Chapter 10 - HTML Forms </html> Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS The<bgsound> element is not officially part of the HTML standard, so we don’t recommend using it. If Chapter 12 - HTML and Scripting you do, you have to use the src attribute to define the audio file’s location. (The only audio formats Chapter 13 -with this Multimedia Magic recognized Making tag are .wav,.au, and .mid.) You can also use a loop attribute to define how many Chapterthe audio file shouldDatabase into Yourfor the loop attribute can be a number (loop="5") or times 14 - Integrating a loop. The values HTML Chapter 15 -(loop="infinite")Other Markup Languages the user leaves the Web page or goes into a infinite How HTML Relates to to loop the audio file until Part V - From Web Page to Web Site deep trance (just kidding). Chapter 16 - Creating an HTML Toolbox You can - indirectly Your Online Presence Chapter 17alsoSetting Up define background music for Netscape by using an <embed> attribute. For your users 18 - Creating a Great User Interface Chapterto enjoy some background music, you use the <embed> element and set the autostart attribute to true The Part autostart="true">). Part VI -(<embed of Tens Chapter 19 - Ten Ways to Exterminate Web Bugs Tip Keep in mind that these attributes are not a part of the HTML standard. In the future, as Internet Explorer and Ten HTML Do’s and stable support for the <object> element, you may want to make the Netscape provide Don’ts Part VII - Appendixes switch and use it. Chapter 20 Appendix A - HTML 4 Tags Appendix B - HTML Character Codes Appendix C - Glossary Index Cheat Sheet - HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars
  • HTML 4 and Video Streaming Audiofor Dummies, 4th Edition by Ed Tittel and Natanya Pitts ISBN:0764519956 To master streaming media & Sons © 2003 (408 pages) John Wiley (audio or video), you must first understand how a Web server, HTTP, and your browser work together. A your goal is is storedaon the Web server. When site open your browser and Whether Web page to build simple, text-oriented Web you request a Web page, that request is sent tographics, and animation, this step- information to the browser. or one loaded with frames, a Web server that then sends the by-step book will put and then right track. The transaction is completed quickly, you on thethe Web server disconnects and goes on to handle other requests from other users. Tablethe