HTML. A Beginner's Guide [2 ed.] 0072226447, 9780072226447, 9780072230420

Citation preview

TEAM LinG - Live, Informative, Non-cost and Genuine!

HTML A Beginner’s Guide Second Edition Wendy Willard

McGraw-Hill/Osborne New York Chicago San Francisco Lisbon London Madrid Mexico City Milan New Delhi San Juan Seoul Singapore Sydney Toronto

TEAM LinG - Live, Informative, Non-cost and Genuine!

Copyright © 2003 by The McGraw-Hill Companies, Inc.]. All rights reserved. Manufactured in the United States of America. Except as permitted under the United States Copyright Act of 1976, no part of this publication may be reproduced or distributed in any form or by any means, or stored in a database or retrieval system, without the prior written permission of the publisher. 0-07-223042-8 The material in this eBook also appears in the print version of this title: 0-07-222644-7

All trademarks are trademarks of their respective owners. Rather than put a trademark symbol after every occurrence of a trademarked name, we use names in an editorial fashion only, and to the benefit of the trademark owner, with no intention of infringement of the trademark. Where such designations appear in this book, they have been printed with initial caps. McGraw-Hill eBooks are available at special quantity discounts to use as premiums and sales promotions, or for use in corporate training programs. For more information, please contact George Hoare, Special Sales, at [email protected] or (212) 904-4069.

TERMS OF USE This is a copyrighted work and The McGraw-Hill Companies, Inc. (“McGraw-Hill”) and its licensors reserve all rights in and to the work. Use of this work is subject to these terms. Except as permitted under the Copyright Act of 1976 and the right to store and retrieve one copy of the work, you may not decompile, disassemble, reverse engineer, reproduce, modify, create derivative works based upon, transmit, distribute, disseminate, sell, publish or sublicense the work or any part of it without McGraw-Hill’s prior consent. You may use the work for your own noncommercial and personal use; any other use of the work is strictly prohibited. Your right to use the work may be terminated if you fail to comply with these terms. THE WORK IS PROVIDED “AS IS”. McGRAW-HILL AND ITS LICENSORS MAKE NO GUARANTEES OR WARRANTIES AS TO THE ACCURACY, ADEQUACY OR COMPLETENESS OF OR RESULTS TO BE OBTAINED FROM USING THE WORK, INCLUDING ANY INFORMATION THAT CAN BE ACCESSED THROUGH THE WORK VIA HYPERLINK OR OTHERWISE, AND EXPRESSLY DISCLAIM ANY WARRANTY, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. McGraw-Hill and its licensors do not warrant or guarantee that the functions contained in the work will meet your requirements or that its operation will be uninterrupted or error free. Neither McGraw-Hill nor its licensors shall be liable to you or anyone else for any inaccuracy, error or omission, regardless of cause, in the work or for any damages resulting therefrom. McGraw-Hill has no responsibility for the content of any information accessed through the work. Under no circumstances shall McGraw-Hill and/or its licensors be liable for any indirect, incidental, special, punitive, consequential or similar damages that result from the use of or inability to use the work, even if any of them has been advised of the possibility of such damages. This limitation of liability shall apply to any claim or cause whatsoever whether such claim or cause arises in contract, tort or otherwise. DOI: 10.1036/0072230428

TEAM LinG - Live, Informative, Non-cost and Genuine!

To Corinna and Caeli——that you might remember your mom once knew some “cool stuff,” even when HTML becomes for you what 8-track tapes are to me. “Therefore do not worry about tomorrow, for tomorrow will worry about itself. Each day has enough trouble of its own.” —Matthew 6:34

TEAM LinG - Live, Informative, Non-cost and Genuine!

About the Author Wendy Willard offers design, illustration, marketing, and consulting services to businesses for both print and Web campaigns. She also teaches and writes on these topics, and is the author of Web Design: A Beginner’s Guide and Photoshop 7: Tips & Techniques (both published by McGraw-Hill/Osborne). She holds a degree in Illustration from Art Center College of Design in Pasadena, California, where she first learned HTML in 1995. Wendy’s passions include all aspects of digital design, drawing, painting, and photographing Maine, Chop Point School & Camp, and anything related to the Web. She lives and works in the midcoast area of Maine with her husband, Wyeth, and their two young daughters.

TEAM LinG - Live, Informative, Non-cost and Genuine!

For more information about this title, click here.

Contents ACKNOWLEDGMENTS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii PART I

HTML Basics 1 Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 1.1 Understand the Internet as a Medium for Disseminating Information . . . The Anatomy of a Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ask the Expert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Web Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Looking to the Future . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 1.2 Plan for the Audience, Goals, Structure, Content, and Navigation of Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Identify the Target Audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Set Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Create the Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Organize Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Develop Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 1.3 Identify the Different Types of HTML Editors . . . . . . . . . . . . . . . . . Text- or Code-based HTML Editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . WYSIWYG HTML Editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Which Is Best? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

v Copyright 2003 by The McGraw-Hill Companies, Inc. Click Here for Terms of Use.

TEAM LinG - Live, Informative, Non-cost and Genuine!

3 4 4 5 7 8 9 10 11 11 12 13 14 15 15 16

vi

HTML: A Beginner’s Guide

Critical Skill 1.4 Learn from the Pros Using the VIEW SOURCE Command of Popular Web Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 1-1 Develop a Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Module 1 Mastery Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17 18 20

2 Basic Page Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 2.1 Create an HTML File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Naming Conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 2.2 Preview an HTML File in a Browser . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 2.3 Describe and Apply the Basic HTML Document Format . . . . . . . . . Ask the Expert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Types of Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Required Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The Three Flavors of XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ask the Expert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Capitalization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Quotations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Nesting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Spacing and Breaks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Use Character Entities to Display Special Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 2.4 Add Comments to an HTML File . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 2.5 Add Style Sheets to an HTML File . . . . . . . . . . . . . . . . . . . . . . . . . . Define the Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Define the Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Create the Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 2-1 Create the First Page of Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Module 2 Mastery Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

3 Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 3.1 Identify the Use of Hexadecimal Color in Web Development . . . . . Color Names . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Web-safe Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Specify Document Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ask the Expert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 3-1 Change the Colors of Your Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Module 3 Mastery Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

45

4 Working with Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 4.1 Format and Align Paragraphs of Text . . . . . . . . . . . . . . . . . . . . . . . . Paragraph Breaks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Line Breaks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

57

TEAM LinG - Live, Informative, Non-cost and Genuine!

22 23 24 25 26 26 27 28 29 30 30 31 31 31 34 36 36 36 37 37 41 43 46 48 49 50 51 54 55 58 58 61

Contents

Preformat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Quotation Blocks and Text Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Horizontal Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 4-1 Format Paragraphs and Page Elements . . . . . . . . . . . . . . . . . . . . . . . . . . Extra Credit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 4.2 Add Headings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 4.3 Add Emphasis to Sections of Text . . . . . . . . . . . . . . . . . . . . . . . . . . . Logical Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Physical Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Emphasis with Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 4.4 Alter the Face, Size and Color of Text . . . . . . . . . . . . . . . . . . . . . . . Format with HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Format with Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 4-2 Add Styles to Your Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Module 4 Mastery Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

62 63 66 68 71 74 76 79 79 81 83 84 85 91 94 99

5 Working with Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 5.1 Add Links to Other Web Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Absolute Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Relative Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 5.2 Add Links to Sections Within the Same Page . . . . . . . . . . . . . . . . . . . Ask the Expert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Create an Anchor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Link to an Anchor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 5.3 Add Links to E-mail Addresses, Newsgroups, and Downloadable Files . . . E-mail Addresses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Newsgroups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . FTP and Downloadable Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 5-1 Add Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Change Link Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Default Link Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 5.4 Customize Links by Setting the Title, Tab Order, Keyboard Shortcut, and Target Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tab Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Keyboard Shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Target Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 5-2 Customize Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Module 5 Mastery Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

101

TEAM LinG - Live, Informative, Non-cost and Genuine!

102 105 105 108 108 109 111 113 113 114 115 115 120 121 123 123 124 124 125 126 127 130

vii

viii

HTML: A Beginner’s Guide

6 Working with Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 6.1 Use Images as Elements in the Foreground of a Web page . . . . . . . . Image File Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Using Existing Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating Your Own Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 6-1 Add an Image to Your Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 6.2 Specify the Height and Width of Images . . . . . . . . . . . . . . . . . . . . . . Critical Skill 6.3 Provide Alternative Text and Titles for Images . . . . . . . . . . . . . . . . . Critical Skill 6.4 Link Images to Other Content on a Web Site . . . . . . . . . . . . . . . . . . . Link the Entire Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Link Sections of an Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Use Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 6.5 Align Images with Other Elements on the Page . . . . . . . . . . . . . . . . Ask the Expert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ending Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Add Space Around Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 6-2 Change Image Characteristics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 6.6 Use Images as Elements in the Background of a Web Page . . . . . . . Project 6-3 Add a Background Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Module 6 Mastery Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

133

7 Working with Multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 7.1 Understand How Plug-ins and ActiveX Controls Are Used with Web Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Identify the Installed Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Recognize File Types, Extensions, and Appropriate Plug-ins . . . . . . . . . . . . . . . . Ask the Expert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 7.2 Link to Multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 7.3 Embed Multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Using Embed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ask the Expert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Using Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Use Embed and Object Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ask the Expert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Java Applets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 7-1 Embed Sound in a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Extra Credit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Module 7 Mastery Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

175

134 135 136 137 137 139 142 144 144 146 151 153 156 156 159 161 164 170 172

176 177 177 179 180 182 183 188 190 192 193 193 194 197 197

8 Creating Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Critical Skill 8.1 Use Ordered Lists in a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

TEAM LinG - Live, Informative, Non-cost and Genuine!

Contents

Critical Skill 8.2 Use Unordered Lists in a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . Project 8-1 Use Lists on Your Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 8.3 Use Definition Lists in a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . Use Style Sheets to Format Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 8.4 Combine and Nest Two or More Types of Lists in a Web Page . . . . Project 8-2 Use Two Different Types of Lists Within Your Web Page . . . . . . . . . . Module 8 Mastery Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

203 204 208 210 211 213 218

9 Using Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 9.1 Understand the Concept and Uses of Tables in Web Pages . . . . . . . Critical Skill 9.2 Create a Basic Table Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Table Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Cell Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 9.3 Format Tables Within Web Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Cell Padding and Spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Width and Height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ask the Expert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ask the Expert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Background Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Captions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 9-1 Create a Basic Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 9.4 Format Content Within Table Cells . . . . . . . . . . . . . . . . . . . . . . . . . . Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Width and Height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ask the Expert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Prohibit Line Breaks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Spanning Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Spanning Rows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 9-2 Format Cell Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Additional Formatting Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Grouping and Aligning Rows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Group and Align Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 9.5 Use Seamless and Nested Tables for Page Layout . . . . . . . . . . . . . . Seamless Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Nested Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 9-3 Using Seamless and Nested Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Module 9 Mastery Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

221

TEAM LinG - Live, Informative, Non-cost and Genuine!

222 223 223 224 228 228 233 235 237 240 241 242 244 244 245 249 249 252 254 255 256 258 259 260 263 263 265 268 271 272 274 278

ix

x

HTML: A Beginner’s Guide

10 Developing Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 10.1 Understand the Concept and Uses of Frames in Web Pages . . . . . . Browser Support for Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 10.2 Create a Basic Frameset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Columns and Rows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Identify Frame Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 10.3 Format Frames Within a Frameset . . . . . . . . . . . . . . . . . . . . . . . . . . Naming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Margin Height and Width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ask the Expert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Scrolling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Resizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 10.4 Create Links Between Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Targets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Base Targets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 10.5 Nest Framesets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 10.6 Create Inline Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 10.7 Accommodate Non-Frames-Capable Browsers . . . . . . . . . . . . . . . . Project 10-1 Creating a Basic Frameset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Module 10 Mastery Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

281

11 Employing Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 11.1 Understand the Concept and Uses of Forms in Web Pages. . . . . . . . Critical Skill 11.2 Create a Basic Form. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Text Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Radio Buttons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Check Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Select Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . File Uploads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Hidden Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 11-1 Create a Basic Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 11.3 Provide a Way for Your Form to Be Processed. . . . . . . . . . . . . . . . . The action Attribute. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The method and enctype Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 11.4 Use Additional Formatting Techniques for Forms . . . . . . . . . . . . . . Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ask the Expert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

311

TEAM LinG - Live, Informative, Non-cost and Genuine!

282 283 283 284 288 290 290 291 293 294 295 296 297 298 299 300 302 305 306 309 312 312 314 319 321 322 326 327 328 330 334 334 337 338 338 340

Contents

Tab Order and Keyboard Shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Groups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Disable Form Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 11-2 Format the Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Module 11 Mastery Check. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

340 341 342 344 345 348

PART II

Beyond HTML 12 Creating Your Own Web Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 12.1 Become Familiar with Graphics Software . . . . . . . . . . . . . . . . . . . . Adobe Photoshop/ImageReady . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Macromedia Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jasc’s Paint Shop Pro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 12.2 Describe Issues That Impact Design Decisions . . . . . . . . . . . . . . . . Platforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Target Audience Demographics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Bandwidth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 12.3 Recognize Graphic File Formats for the Web . . . . . . . . . . . . . . . . . Terminology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ask the Expert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Choose the Best File Format for the Job . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 12-1 Saving Web Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Module 12 Mastery Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Learning More . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

355

13 Web Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 13.1 Ensure Onscreen Readability of Text . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 13.2 Create Effective Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 13.3 Offer Printer-friendly Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 13-1 Optimizing Text Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Module 13 Mastery Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Learning More . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

383

TEAM LinG - Live, Informative, Non-cost and Genuine!

356 357 358 358 359 359 360 362 363 364 365 369 369 372 374 375 375 376 377 379 380 384 385 387 388 389 392

xi

xii

HTML: A Beginner’s Guide

14 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 14.1 Understand the Concept and Uses of JavaScript in Web Pages . . . Troubleshoot JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Hide Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Terminology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . JavaScript Logic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 14.2 Use and Modify an Example JavaScript in a Web Page . . . . . . . . . Add the Current Date and Time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Make Required Form Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Change Page Elements When the User Points to Them . . . . . . . . . . . . . . . . . . . . Format a New Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 14-1 Using JavaScript to Launch a New Browser Window . . . . . . . . . . . . . Module 14 Mastery Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Learning More . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Online References and Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Books . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

393

15 Making Pages Available to Others . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 15.1 Select Possible Domain Names for Your Site . . . . . . . . . . . . . . . . . Ask the Expert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 15.2 Determine the Most Appropriate Type of Hosting for Your Site . . Personal Site Hosting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Business Site Hosting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 15.3 Differentiate Between Search Engines and Search Directories . . . . Prepare Your Site for Its Public Debut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Project 15-1 Adding Meta Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 15.4 Upload Your Site to a Host Computer . . . . . . . . . . . . . . . . . . . . . . . Windows FTP Programs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Macintosh FTP Programs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Web-based FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 15.5 Test Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Critical Skill 15.6 Publicize Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Marketing Tips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Make the Site Live! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Module 15 Mastery Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Learning More . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Search Engines and Search Directories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

413

TEAM LinG - Live, Informative, Non-cost and Genuine!

394 395 396 396 400 402 402 402 404 407 408 411 411 412 412 414 414 415 415 416 418 419 421 422 422 425 427 427 429 430 431 431 432 432 433

Contents

PART III

Appendixes A Mastery Check Answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437 B HTML 4.01 Reference Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Generic Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Group Type: Core . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Group Type: Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Group Type: Intl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Basic Page Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Working with Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Working with Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Working with Images and Multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Using Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Developing Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Employing Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Using Style Sheets and Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

465

C Troubleshooting (FAQ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . My Page Is Blank in the Browser! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . All I See Is Code in the Browser! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . My Images Don’t Appear! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . I Tried to Change the Font, But Nothing Happened! . . . . . . . . . . . . . . . . . . . . . . . . . . . When I Used a Special Character, It Doesn’t Appear! . . . . . . . . . . . . . . . . . . . . . . . . . . My Links Don’t Work! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . My Page Looks Great in One Browser, But Terrible in Another! . . . . . . . . . . . . . . . . . . When I Link My Images, They Have Little Colored Dashes Next to Them! . . . . . . . . . I Saved My Image as a JPEG, but the Browser Says It’s Not a Valid File Format! . . . . Strange Characters Are at the Top of My Page! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . I Added Internal Links to Sections of a Web Page, But When I Click Them, the Browser Launches a Brand New Window! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . I Specified One Color But Got a Totally Different One! . . . . . . . . . . . . . . . . . . . . . . . . I Need to Protect Some of My Pages From Unwanted Visitors! . . . . . . . . . . . . . . . . . . . I Need to Prevent People From Stealing My Images! . . . . . . . . . . . . . . . . . . . . . . . . . . . I Tried to Send My Web Page in an E-mail, But the Page Looked Terrible! . . . . . . . . . I Updated My Web Page, But I Don't See the Changes in the Browser! . . . . . . . . . . . . My Whole Page Is_____________! (Fill in the Blank) . . . . . . . . . . . . . . . . . . . . . . . . . My Page Has a White Background in Internet Explorer, But Not in Netscape! . . . . . . .

483

TEAM LinG - Live, Informative, Non-cost and Genuine!

466 466 467 467 467 469 471 472 474 475 477 479 481 482 484 484 485 485 485 486 486 487 488 488 488 489 489 489 490 490 491 491

xiii

xiv

HTML: A Beginner’s Guide

I Shrank My Images, but They Still Take Forever To Download! . . . . . . . . . . . . . . . . . I Embedded a Flash File That Works Fine on My Computer, But Doesn’t Work Properly on Other Computers! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . My Tables Look Fine in One Browser, But Terrible in Another! . . . . . . . . . . . . . . . . . . I Still Have Questions! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

491 492 492 493

D Special Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495 Standard HTML Entites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496 E File Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501

Index

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505

TEAM LinG - Live, Informative, Non-cost and Genuine!

Acknowledgments T

hanks to Rachel, the first edition’s non-technical editor, for spending hours reading this material with a critical eye, pointing out things she didn’t understand in the text that I needed to clarify. I wouldn’t turn a chapter in without you reading it first! Thanks to Sam, the second edition’s technical editor, for making sure everything is still clear, concise and accurate. Thanks to everyone at McGraw-Hill/Osborne for making it easy to update this book. Thanks to the readers of the first edition for pointing out errata and suggesting additions, so I could make the second edition even better than the first. A special thanks to the Woolwich Historical Society, for providing the real-world project in the book. And finally, Wyeth, Corinna & Caeli— you are my inspiration and my reward.

xv Copyright 2003 by The McGraw-Hill Companies, Inc. Click Here for Terms of Use.

TEAM LinG - Live, Informative, Non-cost and Genuine!

This page intentionally left blank.

TEAM LinG - Live, Informative, Non-cost and Genuine!

Introduction W

hen I was first approached about writing this book, I must admit that my thought was, “Another HTML book——how many do we need?” I learned HTML by experience when there was only one version of Netscape, and it had been a long time since I’d even looked at an HTML book. But after I researched the other HTML books on the market, I felt compelled to write a book that gives readers a realistic, easy-to-understand approach to learning HTML, while at the same time offering real-world practice activities and advice on related issues. HTML: A Beginner’s Guide is that book, offering you practical tools and knowledge that can easily be applied to a variety of development situations, without the boring rhetoric or lengthy technical fluff. This book tells you what you need to know, when you need to know it. In revising this book as a second edition, I again reviewed competing books to determine what readers wanted in a “new” HTML book. Again and again, I saw that you wanted a book that combined HTML and cascading style sheets in a way that was easy to understand and use. This is that book.

Who Should Read This Book Since this book is geared toward anyone with little or no prior HTML knowledge, it’s perfect for anyone wishing to learn HTML. If you are a stay-at-home mom who wants to create a Web site for your family, you’ve come to the right place. If you are a business professional seeking to acquire Web development skills, this is the book for you. If you are interested in learning HTML, this book is for you.

xvii Copyright 2003 by The McGraw-Hill Companies, Inc. Click Here for Terms of Use.

TEAM LinG - Live, Informative, Non-cost and Genuine!

xviii

HTML: A Beginner’s Guide

You don’t need to know anything about computer programming or Web development in order to learn HTML, and you certainly don’t need to know either of those things to get a lot from this book.

What This Book Covers The book is divided into three parts——HTML Basics, Beyond HTML, and Appendixes. Part I, “HTML Basics” covers all you need to know in order to start coding effective and efficient Web pages with HTML. Part I consists of eleven modules, in which information is broken up into manageable chunks. Each module contains one or more step-by-step, real-world projects to give you practice performing the suggested concepts. In addition to the HTML taught therein, each module provides details on how cascading style sheets can be used to accomplish the same or similar techniques. Module 1, “Getting Started” helps you understand the Web by answering common questions such as “Who created HTML?” and “Who maintains HTML?” and also by tackling the anatomy of a Web site, Web browsers, and XHTML. Issues surrounding how to plan your Web site, using HTML editors, and learning from the pros are also discussed. Module 2, “Basic Page Structure” explains beginning terminology such as tags, attributes, and nesting while also describing naming conventions and proper page structure. Module 3, “Color” gives you details on how to work with and reference color in your Web pages. Hexadecimal color and the Web-safe color palette are also discussed. Module 4, “Working with Text” teaches you how to use HTML to format text within your Web pages, whether that means changing the font style or color, or adding line breaks and emphasis. Module 5, “Working with Links” discusses the core of HTML: hypertext links. This module gives details on how to add and customize links in your Web pages, whether you’re linking to another Web page, a section of a Web page, or an e-mail address. Module 6, “Working with Images” helps you use images in your Web pages by describing different image types, how to add them to a page, and how to link to and from them. Additional tips on using images in Web pages are also provided. Module 7, “Working with Multimedia” explains different types of multimedia you can add to your pages and tells how to do so in ways that work in multiple browsers. Module 8, “Creating Lists” teaches you how to create and format the three different types of lists available in HTML. Module 9, “Using Tables” tackles the somewhat difficult but very useful topic of HTML tables. In step-by-step fashion, this module takes you through creating a very basic table structure all the way to formatting nested and seamless tables for the purposes of page layout. Module 10, “Developing Frames” offers you ways to break your Web pages up into separate window frames, each with different pieces of content. Both standard and inline frames are discussed, as well as how to format each.

TEAM LinG - Live, Informative, Non-cost and Genuine!

Introduction

Module 11, “Employing Forms” discusses a key ingredient for most Web sites—forms providing communication methods for customers. Various types of input controls are taught, including textfields, check boxes, file uploads, select menus, and buttons, as well as information about processing forms with scripts and additional formatting techniques. Part II, “Beyond HTML” gives you an introduction into several additional areas related to building Web pages with HTML. If you’re only interested in learning HTML, you might be able to skip these sections, but if you’re wondering what comes next after you learn HTML, I recommend checking out the modules in Part II. All of the modules in Part II also include sections called “Learning More”, which provide additional resources for those interested in pursuing the topic. Module 12, “Creating Your Own Web Graphics” contains a review of popular Web graphics software, as well as guidelines you can use when creating images for the Web. This module also discusses issues that impact design decisions and Web graphics file formats. Even if you don’t have a graphics editor, the module lists several places where you can download demos for free to practice the concepts taught. Module 13, “Web Content” discusses ways to ensure the on-screen readability of your Web pages, how to create effective links and printer-friendly pages. In addition, this module provides essential dos and don’ts for working with Web content. Module 14, “JavaScript” offers you an introduction into JavaScript, a technology used to add dynamic aspects to otherwise static HTML pages. Sample scripts allow you to add the current date and time to a Web page, make form fields required, and change page elements when users point to them. Module 15, “Making Pages Available to Others” teaches you to prepare your pages for online distribution before guiding you on important decisions such as where to host your site, what domain name to use, and how to upload the site. Testing, submission to search engines and directories, and general marketing tips are also discussed. Part III, “Appendixes,” provides additional information in quick-reference formats and puts commonly used details at the fingertips of both beginning and advanced HTML coders. Appendix A, “Mastery Check Answers” contains the answers to the questions asked at the end of each module. Appendix B, “HTML 4.01 Reference Table” outlines all of the HTML tags taught in the book in an easy-to-read and reference format. Appendix C, “Troubleshooting (FAQs)” provides answers to commonly asked questions from beginning and advanced HTML coders. Appendix D, “Special Characters” lists the character entities used to embed special characters, such as the copyright symbol and an ampersand, into a Web page. Appendix E, “File Types” includes a list of the file types you are most likely to encounter while creating Web pages, as well as a brief description and MIME type for each.

TEAM LinG - Live, Informative, Non-cost and Genuine!

xix

xx

HTML: A Beginner’s Guide

How to Read This Book The content is structured so that you can read a single module as needed or the entire book from cover to cover. While beginners should read through the book, module by module, in order to efficiently grasp the concepts taught, intermediate and advanced users can use certain modules as reference materials. The projects at the end of each module build upon each other, but you could certainly adapt a specific module to your own needs if you read them out of order. If you’re using this book within a classroom setting, be sure to visit www.willardesigns.com/html for instructor tips and additional notes.

Special Features Each module includes “Tips”, “Notes”, and “Cautions” to provide additional reference information wherever needed. Detailed “code listings” are included, many times with certain tags or features highlighted with further explanation. Many modules contain “Ask the Expert” question-and-answer sections to address potentially confusing issues. Each module contains “Critical Skills” exercises, “Progress Check” segments, and step-by-step “Projects” to give you a chance to practice the concepts taught thus far. These Projects are based on a real-world Web development project I worked on for the Woolwich Historical Society in Woolwich, Maine. “Mastery Checks” are included at the end of each module to give you another chance to review the concepts taught in the module. The answers to the Mastery Checks are in Appendix A. You can download the content for the Woolwich Historical Society projects from Osborne’s Web site (www.osborne.com) or the companion site to this book (www.willardesigns .com/html). Links to images, clip art, multimedia, software, and scripts, as well as additional troubleshooting tips and bulletin boards are also available on the companion book site. Throughout the development of this book, our objective has always been to provide you with a cohesive, easy-to-understand guide for coding HTML to help you get up and running in no time. As you’ll hear me say countless times, HTML is not that difficult and is definitely within your reach. I applaud your decision to learn HTML and encourage you to use the Internet to its fullest potential both during the learning process and in your ensuing Web development aspirations. As Module 1 discusses, visit the Web sites you love and love-to-hate to determine how they accomplished various features. Follow the links identified in the book for additional information, and don’t forget to perform your own Web searches for related content. Have fun and good luck!

TEAM LinG - Live, Informative, Non-cost and Genuine!

Part

I

HTML Basics

Copyright 2003 by The McGraw-Hill Companies, Inc. Click Here for Terms of Use.

TEAM LinG - Live, Informative, Non-cost and Genuine!

This page intentionally left blank.

TEAM LinG - Live, Informative, Non-cost and Genuine!

Module

1

Getting Started

CRITICAL SKILLS 1.1

Understand the Internet as a medium for disseminating information

1.2

Plan for the audience, goals, structure, content, and navigation of your site

1.3

Identify the different types of HTML editors

1.4

Learn from the pros using the VIEW SOURCE command of popular Web browsers

3 Copyright 2003 by The McGraw-Hill Companies, Inc. Click Here for Terms of Use.

TEAM LinG - Live, Informative, Non-cost and Genuine!

4

Module 1:

Getting Started

F

or as long as I have been involved in making Web pages, people have asked me to teach them the process. At the start, many people are intimidated by the thought of learning HTML. Fear not. One of the reasons I decided to go to art school was to avoid all math and science classes. So, as I tell my students . . . if I could learn HTML, so can you. HTML is not rocket science. Quite simply, HTML is a means of telling a Web browser how to display a page. That’s why it’s called HTML, which is the acronym for Hypertext Markup Language. Like any new skill, HTML takes practice to comprehend what you are doing. Before we dive into the actual creation of the Web pages, you need to understand a few things about the Internet. I could probably fill an entire book with the material in this first chapter, but the following should provide you with a firm foundation.

CRITICAL SKILL

1.1

Understand the Internet as a Medium for Disseminating Information When you are asked to write a term paper in school, you don’t sit down and just start writing. First, you have to do research and learn how to format the paper. The process for writing and designing a Web page is similar.

The Anatomy of a Web Site Undoubtedly, you have seen a few Web sites by now. Perhaps you know someone who is a Web geek, and you have watched him navigate through a Web site by chopping off pieces of the Web address. Do you ever wonder what he is doing? He knows a little bit about the anatomy of a Web site and how the underlying structure is laid out.

URLs The fancy word for “Web address” is uniform resource locator, also referenced by its acronym URL (pronounced either by the letters U-R-L or as a single word, “url,” which rhymes with “girl”). If you haven’t heard a Web address referred to as a URL, you have probably seen one— URLs start with http://, and they usually end with .com, .org, .edu, or .net. (Other possibilities include .tv, .biz, and .info. For more information, see www.networksolutions.com). Every Web site has a URL. An example is http://www.yahoo.com. The following illustration shows another example of a URL, as it appears in a Netscape browser.

Protocol

Domain

Folder

File

TEAM LinG - Live, Informative, Non-cost and Genuine!

Ask the Expert Q: A:

I’ve heard the phrase “The World Wide Web” used so many times, but I’m a little confused about what it actually means and how it relates to the Internet. The World Wide Web (WWW or the Web) is often confused with the Internet. While the precursor to the Internet was originally created during the Cold War as a way to link sections of the country together during an emergency, the actual term “Internet” wasn’t used until the early 1970s. At that time, academic research institutions developed the Internet to create better communication and to share resources. Later, universities and research facilities throughout the world began using the Internet. In the early 1990s, Tim Berners-Lee created a set of technologies that allowed information on the Internet to be linked together through the use of links, or connections, in documents. The language component of these technologies is Hypertext Markup Language (HTML). A good source of information on the history of the Internet is available at www.isoc.org/internet-history. The Web was mostly text based until Marc Andreessen created the first graphical Web browser in 1993, called Mosaic. This paved the way for video, sound, and photos on the Web. As a large group of interconnected computers all over the world, the Internet comprises not only the Web, but also things like newsgroups (online bulletin boards) and e-mail. Many people think of the Web as the graphical or illustrated part of the Internet.

One part of a URL is the domain name, which helps identify and locate computers on the Internet. To avoid confusion, each domain name is unique. You can think of the domain name as a label or a shortcut. Behind that shortcut is a series of numbers, called an IP Address, which gives the specific address of where the site you are looking for is located on the Internet. To draw an analogy, if the domain name is the word “Emergency” written next to the first aid symbol on your speed dial, the IP Address is 9-1-1.

NOTE Although many URLs begin with “www,” this is not a necessity. Originally used to denote “World Wide Web” in the URL, using www has caught on as common practice. The characters before the first period in the URL are not part of the registered domain, and can be almost anything. In fact, many businesses use this part of the URL to differentiate between various departments within the company. For example, the GO Network includes ABC, ESPN, and Disney, to name a few. Each of these are departments of go.com: abc.go.com, espn.go.com, and disney.go.com.

TEAM LinG - Live, Informative, Non-cost and Genuine!

5

1 Getting Started

HTML: A Beginner’s Guide, Second Edition

6

Module 1:

Getting Started

Businesses typically register domain names ending in a .com (which signifies a commercial venture) that are similar to their business or product name. Domain registration is like renting office space on the Internet. Once you register a domain name, you have the right to publish a Web site under that name on the Internet for as long as you pay the rental fees.

TIP Wondering whether yourname.com is already being used? You can check to see which domain names are still available for registration by visiting www.networksolutions.com.

Web Servers Every Web site and Web page also needs a Web server. Quite simply, a Web server is a computer, running special software, which is always connected to the Internet.

NOTE Some people talk about the computer as the server, as in “We need to buy a new server.” Others call the software the server, saying “We need to install a new Web server.” Both uses of the word essentially refer to the same thing—Web servers make information available to those requesting it.

When you type a URL into your Web browser or click a link in a Web page, you send a request to the server that houses that information. It’s similar to the process that occurs when you dial a phone number with your telephone. Your request “calls” the computer that contains all the files necessary to show you the Web page you requested. The computer then “serves” and displays all the pages to you, usually in your Web browser.

Sites A URL is commonly associated with a Web site. You have seen plenty of examples on billboards and in television advertising. www.yahoo.com is the URL for Yahoo!’s Web site; www.cbs.com is the URL for CBS’s Web site. Most commonly, these sites are located in directories or folders on the server, just as you might have your C: drive on your personal computer. Then, within this main site, there may be several folders, which house other sections of the Web site. For example, Chop Point is a summer camp and K-12 school in Maine. It has several main sections of its Web site, but the most notable are “camp” and “school.” If you look at the URL for Chop Point’s camp section, you can see the name of the folder after the site name: www.choppoint.org/camp

TEAM LinG - Live, Informative, Non-cost and Genuine!

If you were to look at the main page for the school, the URL changes to: www.choppoint.org/school

Pages When you visit a Web site, you look at pages on the site that contain all the text, graphics, sound, and video content. Even though a Web page is not the same size or format as a printed page, the word “page” is used to help us differentiate between pages, folders, and sites. Just as many pages and chapters can be within a single book, many pages and folders (or sections) can also be within a Web site. Most Web servers are set up to look automatically for a page called “index” as the main page in any folder. So, if you were to type in the URL used in the previous example, the server would look for the index page in the “camp” folder. www.choppoint.org/camp/index.html If you want to look for a different page in the camp folder, you could type the name of that page after the site and folder names, keeping in mind that HTML pages usually end with .html or .htm. www.choppoint.org/camp/dayactivities.html

Web Browsers A Web browser is a piece of software that runs on your personal computer and enables you to view Web pages. Web browsers, often simply called “browsers,” interpret the HTML code and provide a visual layout displayed on the screen. Many browsers can also be used to check e-mail and access newsgroups. The most popular browsers are Netscape Navigator and Microsoft Internet Explorer. These browsers can be downloaded from the respective company’s Web site. Each company updates its browser regularly, changing to address new aspects of HTML or emerging technologies. Many people continue to use older versions of their browsers, however. This means, at any given time, there may be three or four active versions of one browser, and several different versions of other browsers being used by the general public. What if there were several versions of televisions, which all displayed TV programs differently? Then, imagine your favorite television show looked different every time you watched it on anyone else’s television. This would not only be frustrating to you as a viewer, it would also be frustrating for the show’s creator. Web developers must deal with this frustration every day. Because of the differences among various browsers and the large number of computer types, the look and feel of a Web page can vary greatly. This means Web developers must keep up-to-date on the latest features

TEAM LinG - Live, Informative, Non-cost and Genuine!

7

1 Getting Started

HTML: A Beginner’s Guide, Second Edition

8

Module 1:

Getting Started

of the new browsers, but we must also know how to create Web pages that are backwardscompatible for the older browsers many people may still be using.

TIP To keep current on statistics about browser use, try visiting www.w3schools.com/browsers/browsers_stats.asp.

Internet Service Providers You use an Internet Service Provider (ISP) to gain access to the Internet. Usually, you can also obtain a free Web browser from your ISP. This connection can be made through your phone line with a company like MCI, RCN, or Earthlink, or you can connect through a cable line with a company like Comcast or Time Warner. Many companies offer you a choice of browsers; however, some companies may support only one browser, such as America Online (AOL). To locate an ISP with local service in your area, visit http://thelist.internet.com/areacode.html, and click your phone number’s area code.

What about AOL? AOL runs what you might think of as a mini “Web-within-the-Web” because it maintains content on its own systems that non-AOL users cannot view. Whereas most ISPs don’t maintain proprietary content for their users, AOL is both an ISP and a content provider. Its software provides you with access to the entire Web, in addition to AOL user-restricted content. Many people think of AOL as “the Internet with training wheels”—it walks beginning users through the experience of surfing the Web.

TIP Most browsers can be easily customized, meaning you can change the text sizes, styles, and colors, as well as the first page that appears when you start your browser. This is usually called your “home” page or your “start” page, and it’s the page displayed when you click the “home” button in your browser. For easier access, many people change their home page to a search engine or a news site customized according to their needs. These personalized sites are often called portals and also offer free e-mail to users. A few examples are Yahoo!, Excite, Netscape, and MSN.

Looking to the Future Over the past few years, HTML has been through many iterations; this has led to a lack of standardization across the Internet. The World Wide Web Consortium (W3C—www.w3.org) publishes a list of recommendations, called standards, for HTML and other Web languages. The last official standard for HTML was HTML 4.01.

TEAM LinG - Live, Informative, Non-cost and Genuine!

In an attempt to set standards, the W3C rewrote HTML 4.01 using Extensible Markup Language (XML). The resulting set of standards is called Extensible Hypertext Markup Language (XHTML), and it even provides a way for HTML to handle alternative devices, such as cell phones and hand-held computers. XHTML offers many new features to Web developers that will make life easier in the long run but, at press time, no browser supports all these features. Because XHTML is here to stay, Web developers would be smart to learn the basics and use them now. In fact, every new version of HTML will be built on the foundation of XHTML 1.0. How to prepare your documents for XHTML is discussed in upcoming modules. You can learn much more about XHTML from several online resources, including the following: ●

“The Fear of X,” by Molly E. Holzschlag. (www.molly.com/articles/markupandcss/2001-08-fearofx.php)

●

The HTML Writer’s Guide’s guide to “Marking Up Documents in XHTML 1” (http://gutenberg.hwg.org/markupXHTML.html)

●

W3C’s recommendation on XHTML 1.0: The Extensible Hypertext Markup Language (www.w3.org/TR/xhtml1/)

●

whatis.com’s definition of XHTML (www.whatis.com/xhtml.htm)

●

Web Developer’s Virtual Library discussion on XHTML (www.wdvl.com/Authoring/Languages/XML/XHTML/)

Progress Check 1 What is a Web browser? 2 List some parts of a URL.

CRITICAL SKILL

1.2

Plan for the Audience, Goals, Structure, Content, and Navigation of Your Site In addition to learning about the medium, you also need to do the following: ●

Identify your target audience

●

Set goals for your site

1. A Web browser is a piece of software that runs on your computer and enables you to view Web pages. 2. Domain name, folder, file

TEAM LinG - Live, Informative, Non-cost and Genuine!

9

1 Getting Started

HTML: A Beginner’s Guide, Second Edition

10

Module 1:

Getting Started

●

Create your Web site’s structure

●

Organize your Web site’s content

●

Develop your Web site’s navigation

Identify the Target Audience If you are creating a Web site for a business, a group, or an organization, you are most likely targeting people who might buy or use the company’s products or services. Even if your site is set up purely for the purpose of disseminating information, you must target a certain audience. Consider whether you have existing research regarding your client or user base. This might include demographics, statistics, or other marketing information, such as age, gender, and Web experience.

TIP If your site represents a new company or one that doesn’t already have information about its clients’ demographics, you might check out the competition. Chances are good that if your competition has a successful Web site, you can learn from them about your target audience.

Knowing your target audience will influence how you design and develop your Web site. For example, if you are developing a site for beginners to learn about the Internet, you want to create a site that is extremely easy to use and does not stray from standard computer conventions. Once you identify your target audience, you need to think about what functions each part of that audience can perform at your site. Try drawing up a chart like Table 1-1 to make your plans. The following example is designed for a bank, but you can use it as a starting point for any site you create. You can use this information to determine the appropriate direction for the site. I like to break down the audience into two major sectors: the “accidental tourists” and the “navy seals.” Most sites have a little of both. Have you ever surfed a certain site, and then wondered how you got there from here? This is the “accidental tourist,” a.k.a. the serendipitous visitor. At the other end of the spectrum is the student on a mission—looking for a specific piece of information for a homework assignment. I call these the “navy seals.”

TIP Does your site target mostly “navy seals” visitors? These individuals prefer search engines, especially when trying to locate information quickly. Providing a good search engine or site map on your site can greatly increase your repeat visitors.

TEAM LinG - Live, Informative, Non-cost and Genuine!

User Group

Functions Performed

Ages

Gender

Web Experience

Current customers

bank online contact customer service research additional services/products

16+

male/female

varies

Potential customers

research services/products contact sales

16+

male/female

varies

Potential employees

search job openings research company contact HR

18-60

male/female

varies

Financial consultants

research services/products view company financials contact sales

30-60

male/female 60/40

savvy

Table 1-1 Functions Performed by a Target Audience

Set Goals Since the Web’s inception, millions of new Web sites have been created. To compete in such a large market, you need to set clear goals for the site. The site might ●

Sell products/services

●

Recruit potential employees

●

Entertain

●

Educate

●

Communicate with customers

Always remember the goals when developing the site to avoid unnecessary content. If a page on your site doesn’t meet one of the goals, it may confuse or turn away visitors.

Create the Structure Once you align your site’s goals with the functions performed by the target audience, you will see a structure forming. Consider a site whose primary goal is to sell office supplies to businesses and whose secondary goal is to recruit potential employees. This site would most likely contain two main topic areas: shop for office supplies and browse available jobs.

TEAM LinG - Live, Informative, Non-cost and Genuine!

11

1 Getting Started

HTML: A Beginner’s Guide, Second Edition

12

Module 1:

Getting Started

Figure 1-1 Tree diagram showing a portion of the structure for a sample office supplies site

Many people use tree diagrams, such as the one shown in Figure 1-1, to help define the structure of the site. Others use flow charts or simple outlines.

Organize Content All the content for the site should fit under each of the topic areas in the site structure. You might have several subcategories in each topic area. So, the “shop for office supplies” section from the previous example might be broken down into several subcategories, according to the different types of products available. Table 1-2 shows how the category names might relate to the folder names.

TEAM LinG - Live, Informative, Non-cost and Genuine!

13

Category Name

Folder Name

1

Paper

shop/paper/

Pens

shop/pens/

Software

shop/software/

Furniture

shop/furniture/

Getting Started

HTML: A Beginner’s Guide, Second Edition

Furniture, Desks

shop/furniture/desks/

Furniture, Chairs

shop/furniture/chairs/

Furniture, Bookcases

shop/furniture/bookcases/

Table 1-2 Content Organization

Develop Navigation After the site structure has been defined and the content has been placed into the structure accordingly, you will want to plan out how a visitor to this site navigates between each of the pages and sections. Good practice is to include a standard navigation bar on all pages for consistency and ease of use. This navigation bar probably should include links to your home page and any major topic areas. It should probably also contain the name of your business or a logo so a simple visual clue lets the user know she has not passed from your site by accident. Highlighting the current section on the navigation bar is important, so visitors can more easily distinguish where they are in your site’s structure. This means if your site has two sections— jobs and resumes—the jobs button would look different when you were inside that section and, in some way, should identify it as the current section. In addition, consider giving your visitors as many visual clues as possible to aid in the navigation of your site (see Figure 1-2). This might be accomplished by repeating the page name in ●

The page’s title (the text that appears in the top of the browser window, as well as in search engines)

●

The page’s filename

●

A headline

●

Buttons and links to the page (highlighted if you are viewing that page)

TEAM LinG - Live, Informative, Non-cost and Genuine!

14

Module 1:

Getting Started

This tab is a different color to show the visitor in which section this page is located

The page title lists the names of the sites as well as the page and section names

The URL clues the visitor to the name and location of the page being viewed

This link is highlighted to remind the visitor which page he/she is visiting

Figure 1-2 The page name is repeated several times.

CRITICAL SKILL

1.3

Identify the Different Types of HTML Editors At some point, you may wonder: “Why go to the trouble of learning HTML if I can use a program that does it for me?” With so many new software packages available to help you

TEAM LinG - Live, Informative, Non-cost and Genuine!

15

develop HTML, that’s a valid question. The bulk of the software packages can be broken up into two main categories: text-based HTML editors (also called code-based HTML editors) and What You See Is What You Get (WYSIWYG), pronounced wuzzywig or wizzywig editors.

1

Text- or Code-based HTML Editors Text-based editors require you to know some HTML to use them. They can be customized to help speed your coding process, and often have sophisticated checks and balances in place to check for errors in coding. The most popular text-based HTML editors are ●

Macromedia HomeSite (www.macromedia.com/homesite/) is summed up wonderfully by ComputerShopper.com: “Many Web designers still believe that creating a good site requires working from the source code up. For them, HomeSite is the best choice … The power of this program lies in its easy-to-use interface, which with its full set of configurable menus, tabs, and assorted icons, gives you complete control over the content, usability, and interactivity of your site.” This product is currently only available for Windows operating systems.

●

Bare Bones Software’s BBEdit (www.barebones.com) won the Macworld Editor’s Choice Award for Best Web Development Tool. In its review, Macworld wrote “Bare Bones Software’s BBEdit is beloved by many different kinds of Mac users, and rightly so: for Web authors, it’s an excellent HTML editor; for programmers, it’s a versatile coding environment; and for noncoders, it’s a flexible text editor with impressive search-andreplace features.” This product is currently only available for Mac operating systems.

WYSIWYG HTML Editors WYSIWYG editors don’t require HTML knowledge. Instead of looking at the HTML of your pages, you are shown a “preview” of how the page will look in a browser. You can simply drag-and-drop pieces of your layout as you see fit. These types of programs can have many drawbacks, but they can also be quite useful for the purposes of learning different aspects of HTML or for quickly publishing a basic Web page. The most popular WYSIWYG editors are ●

Macromedia Dreamweaver (www.macromedia.com/dreamweaver/) is available for both the Macintosh and the PC. It offers benefits such as customizable features and automated production and is integrated with graphics tools such as Macromedia Fireworks.

●

Adobe GoLive (www.adobe.com/golive/) is also available for both the Macintosh and the PC, and is fast catching up to Dreamweaver in both site development and maintenance. Its development environment enables designers and coders to work quite well together. Perhaps the best feature of this product is its streamlined workflow with other Adobe tools like Photoshop and LiveMotion.

TEAM LinG - Live, Informative, Non-cost and Genuine!

Getting Started

HTML: A Beginner’s Guide, Second Edition

16

Module 1:

●

Getting Started

Microsoft FrontPage (www.microsoft.com/frontpage/) is also available for both the Macintosh and the PC (although in different versions). It boasts integrated support for other products in the Microsoft Office suite and advanced features, such as sample forms and site management tools.

Which Is Best? Many Web developers prefer to use the text-based HTML editors, rather than have a WYSIWYG editor do it for them, for the following reasons: ●

Better control WYSIWYG editors may write HTML in a variety of ways—although not all of them will have the same outcome. For example, Microsoft Front Page sometimes uses proprietary code that is not understood by Netscape’s browsers. This means your pages can look different in each browser. Unfortunately, this has caused many of these programs to be labeled “WYSINWYG” or What-You-See-Is-NOT-What-You-Get.

●

Faster pages WYSIWYG editors often overcompensate for the amount of code needed to render a page properly, and they end up repeating code many more times than necessary. This leads to large file sizes and longer downloads.

●

Speedier editing The large-scale WYSIWYG editors often take a lot of memory and system resources, slowing both the computer and the development process.

●

More flexibility Many WYSIWYG editors are programmed to “fix” code they think is faulty. This may make you unable to insert code or edit the existing code as you want.

That said, the newest WYSIWYG editors have come a long way in terms of control and flexibility. They even offer Web developers advanced features such as the capability to code DHTML and JavaScript. Note that: ●

Dynamic HTML (or DHTML) is a newer version of HTML, in which page content is easily changed and customized on the fly, without having to send and receive additional information from the server. Style sheets, used especially in DHTML, are discussed throughout the book.

●

JavaScript is a scripting language designed to give Web pages more interactivity than can be achieved through HTML. Even though the name might make you think otherwise, JavaScript is different from Java, which is a full programming language. You will read more about JavaScript in Module 14.

Both text-based HTML editors and WYSIWYG editors have their benefits. My recommendation is to download free trials of the various programs and decide for yourself which one works best for your needs.

TEAM LinG - Live, Informative, Non-cost and Genuine!

To achieve the purposes of this book, you are free to use any editor or software package you like, although to begin, I recommend you use the basic text editor that came with your computer system, such as SimpleText (Macintosh) or Notepad (PC). Once you have the basics of HTML down, you can move on and experiment with other available programs. CRITICAL SKILL

1.4

Learn from the Pros Using the VIEW SOURCE Command of Popular Web Browsers One of the best ways to learn HTML is to surf the Web and look at the HTML for sites you like (as well as those you don’t like). Most Web browsers enable you to view the HTML source code of Web pages, using the following commands: ●

In Netscape, choose VIEW | PAGE SOURCE

●

In Internet Explorer, choose VIEW | SOURCE

You can even print or save these pages to review at a later time or to keep in a reference library. Because the Web is open source, meaning your code is free for anyone to see, copying other developers’ code is tempting. But remember, you should give credit where credit is due (you’ll learn more about commenting HTML pages in Module 2) and never copy anything protected by a copyright, such as graphics and text content.

NOTE A few browsers don’t let you View Source. If you find you cannot view the HTML source of a Web page, try saving the page to your local hard drive, and then opening it in a text editor instead.

TEAM LinG - Live, Informative, Non-cost and Genuine!

17

1 Getting Started

HTML: A Beginner’s Guide, Second Edition

18

Module 1:

Project 1-1

Getting Started

Develop a Web Site

The best way to practice HTML is to develop Web sites. While developing a personal site might be fun, I think you can sometimes learn more about the whole development process by working on a site for a business or organization. In fact, volunteering your time to develop a Web site for a nonprofit organization is a wonderful way to start. Throughout the course of this book, I give you projects that relate to the development of such an organization’s Web site. If you already have an organization in mind for which you want to develop a site, then use that one. If not, you can use the organization I used while creating examples for this book—the Woolwich Historical Society, located in Woolwich, Maine. All the files needed to complete the projects in this book for the Woolwich Historical Society can be downloaded from www.osborne.com or www.willardesigns.com/htmlbook. In addition, you can view my version of the Web site anytime by visiting www.woolwichhistory.org. This specific project takes you through the planning phase of the Web development project. Goals for this project include ●

Identify your target audience

●

Set goals for your site

●

Create your Web site’s structure

●

Organize your Web site’s content

●

Develop your Web site’s navigation

Step by Step 1. Spend some time researching your organization. Try to learn as much about its business

as possible. If you know people within the organization, do some interviews to help you identify your target audience, as well as the site goals. If you can’t speak with members of the organization, visit other similar sites to determine what type of people the competition is targeting. Some questions to ask and things to consider ●

What business problem(s) will the Web site address? What do you want to accomplish? What are your goals for the Web site?

●

Who are the targeted users/visitors of the site? Do you have any existing research regarding your client or user base, such as demographics, statistics, or other marketing information?

TEAM LinG - Live, Informative, Non-cost and Genuine!

To determine the appropriate direction for the site, you must match the targeted users and the functions they will perform when visiting the site. For example, will the targeted users be “accidental tourists” directed to the site by an advertisement or potential investors looking for the financials? How do the audience demographics affect this? (You can use a table like the following one to help you plan the targeted users and the functions they might perform at the site. An example is shown for the Woolwich Historical Society.)

●

USER GROUP

Functions Performed at Site

Ages

Web Experience

1. students

research for school projects

6-18

moderate - high

19

1 Getting Started

HTML: A Beginner’s Guide, Second Edition

2. 3.

2. After you decide on the target audience and goals for the site, it’s time to evaluate your

content. This is best accomplished through conversations with the people for whom you’re developing the site. If this isn’t possible, be creative and come up with a list of content you think could be appropriate. 3. Use the answers to the following questions as a springboard for building the structure of

your site. Then develop a tree diagram, similar to the one shown in Figure 1-1, to identify all the pieces of your site and where they fit within the overall structure. ●

Does an official logo have to be used on the Web site?

●

Is all the content written and available in digital format?

●

What are the main sections of the site? Does all the content fit within those sections?

●

List all the content for the site. Assign each piece of content to a section (as necessary) and define filenames.

Project Summary Before you begin writing the actual HTML for your Web pages, you need to know something about the site you are creating. The questions asked in this project should get you off to a good start and help you build a solid foundation for your Web site. In the next module, you continue working with this site as you write the code for one of the pages.

TEAM LinG - Live, Informative, Non-cost and Genuine!

Project 1-1

20

Module 1:

Getting Started

Module 1 Mastery Check 1. What is a Web browser? 2. What does HTML stand for? 3. Identify the various parts of the following URL:

http://www.osborne.com/books/webdesign/favorites.html ___________://___________________/___________/___________/_______________ 4. What is WYSIWYG? 5. Fill in the blank: Every new version of HTML will be built on the foundation of

_____________. 6. How does AOL differ from a typical ISP? 7. What are the two most popular Web browsers for Windows and Macintosh operating

systems? 8. Fill in the blank: When you type a URL into your Web browser, you send a request

to the ________________ that houses that information. 9. What does the acronym “URL” stand for? 10. What organization maintains the standards for HTML? 11. How can you give your site’s visitors visual clues as to where they are in your site’s structure? 12. Fill in the blank: Good practice is to include a standard _________________ on all pages

for consistency and ease of use. 13. Fill in the blank: Selling products and recruiting potential employees are examples of

Web site _______________. 14. Fill in the blank: Before you can begin developing your Web site, you must know a little

about the site’s target _________________. 15. If your site represents a new company or one that doesn’t already have information about

its client demographics, where might you look for information?

TEAM LinG - Live, Informative, Non-cost and Genuine!

Module

2

Basic Page Structure

CRITICAL SKILLS Create an HTML file Preview an HTML file in a browser Describe and apply the basic HTML document format Add comments to an HTML file Add style sheets to an HTML file

21 Copyright 2003 by The McGraw-Hill Companies, Inc. Click Here for Terms of Use.

TEAM LinG - Live, Informative, Non-cost and Genuine!

22

Module 2:

N CRITICAL SKILL

2.1

Basic Page Structure

ow that you know a little about the Web and what to think about before creating a Web page, let’s talk about the basic structure of an HTML page.

Create an HTML File At their very core, HTML files are simply text files with two additional features. 1. HTML files have an .html or .htm file extension.

A file extension is an abbreviation that associates the file with the appropriate program or tool needed to access it. In most cases, this abbreviation follows a period, and is three or four letters long. In the following example, notice that the Yahoo! home page ends in an .html file extension.

2. HTML files have tags.

Tags are commands or code used to tell the computer how to display the page content. After choosing VIEW | SOURCE, you can see some of the HTML tags in Yahoo!’s home page.

TEAM LinG - Live, Informative, Non-cost and Genuine!

HTML: A Beginner’s Guide, Second Edition

NOTE

Naming Conventions Remember these few points when naming your HTML files. Although in most cases it doesn’t matter whether you use .html or .htm, you should be consistent to avoid confusing yourself, the browser, and your users.

NOTE Older systems such as Windows 3.1 and DOS cannot understand four-letter file extensions. Because the first three letters of .html and .htm are the same, those systems simply ignore the "l" and recognize the file type without any problems. ●

Some Web servers are case-sensitive, so remember this when naming and referencing filenames and try to be consistent. If you name your file MyPage.html, and then reference it later using mypage.html, you may end up with a broken link. One good technique is to use only uppercase or lowercase to name your files. This way, if you see a file with a letter in it that doesn’t match, you know instantly that file is probably the problem. Even the pros run into case sensitivity problems on an almost daily basis.

●

Use simple filenames with only letters and numbers. Don’t use spaces, punctuation, or special characters. (Dashes (-) and underscores ( _ ) are allowed.) Good examples might be home.html, my-story.html, and contact_me.html.

TIP If you decide to use Microsoft Word or WordPad to type your HTML, you need to choose the file type “Text Document” or “Text Only” and to give the file an .html extension the first time you save it. This is because both of those programs default to saving “Word for Windows” or “Microsoft Word” documents with a .doc extension.

TEAM LinG - Live, Informative, Non-cost and Genuine!

Basic Page Structure

2

You might also see more advanced types of pages on the Internet, such as Microsoft’s Active Server Pages (.asp) or those written in the Extensible Markup Language (.xml). These are beyond the scope of the traditional HTML page and follow different standards.

●

23

24

Module 2:

Basic Page Structure

These same recommendations hold true for any folder names you use. If you were creating a Web site that had your favorite links, family photos, and résumé, you might find it useful to put each of those things in a separate folder.

CRITICAL SKILL

2.2

Preview an HTML File in a Browser You can view HTML files located on your personal computer within your own Web browser. It isn’t necessary for your files to be stored on a Web server until you are ready to make them visible on the Internet. When you want to preview a page, open your Web browser and choose FILE | OPEN PAGE (Netscape) or FILE | OPEN (Internet Explorer), and then browse your hard drive until you locate the HTML file you want to open. If you are going to make frequent changes to the HTML file in a text editor, and then switch back to a Web browser to preview the page, keeping both programs (a text editor and a Web browser) open at the same time makes sense. The steps to edit and preview HTML files are 1. Open/return to your HTML file in a text editor. 2. Edit your HTML file in a text editor. 3. Save your HTML file in a text editor. 4. Open/return to your HTML file in a Web browser. 5. Click the REFRESH button in Internet Explorer or RELOAD button in Netscape in your Web

browser to update the HTML page according to any changes you just made to it.

TEAM LinG - Live, Informative, Non-cost and Genuine!

By keeping your HTML file open in both a text editor and a browser, you can easily make and preview changes. Web browser

CRITICAL SKILL

2.3

Text editor

Describe and Apply the Basic HTML Document Format An HTML entity or tag is a command used to tell the computer how to display content on a page. This command is similar to what happens behind the scenes when you highlight some text in a word processor and click the BOLD button to make the text boldface. With HTML, instead of clicking a button to make text bold, you type a tag before and after the text you want to make bold. Tag

Tag

Reminder: There will be no band practice today. Text affected by the tags

You can easily recognize tags because they are placed within brackets (< >), or less-than and greater-than symbols.

TEAM LinG - Live, Informative, Non-cost and Genuine!

25

2 Basic Page Structure

HTML: A Beginner’s Guide, Second Edition

26

Module 2:

Basic Page Structure

Ask the Expert Q: A:

Do I need to buy a special program to write and preview HTML files on my home computer? No. If you have a basic text editor (which nearly every new computer comes with) and a Web browser, you have everything you need! As I mentioned in Module 1, you could certainly purchase some programs that would help you write and preview HTML, but they aren’t necessary at this point. While you are learning, it’s best to use a basic text editor, such as SimpleText (Mac) or Notepad (PC), and then preview your pages in whichever Web browser you normally use to access the Internet.

Did you notice the tag for bold is b? Given that piece of information, can you guess the tags to make text italic or underlined?

Desired Effect

Tag

Bold text

Italicized text

Underlined text

Now do you believe me when I say HTML is not rocket science? Don’t worry—most of the tags are pretty intuitive and easy to remember.

Types of Tags In HTML, there are usually both opening and closing tags. For example, if you use as an opening tag to signify where to start making text bold, you have to use a closing tag to signify where to stop making text bold (unless you want your entire page to be boldface). To do so, you use the same tag with a forward slash placed before it: . Table 2-1 shows a list of basic HTML page tags.

NOTE Even though older versions of HTML don’t require every tag to be closed, XHTML does require it. Because all future versions of HTML are based on XHTML, you might as well get used to closing all your tags now. Throughout the rest of this book, I will add notes wherever we come across a tag that HTML doesn’t require closing.

TEAM LinG - Live, Informative, Non-cost and Genuine!

27

Opening Tag

Closing Tag

Description

2

!DOCTYPE

n/a

Tells the browser which set of standards your page adheres to –Lists the standard (see the section “The Three Flavors of XHTML”) –Identifies the location of the standard by linking to the URL



Frames the entire HTML page



Frames the identification information for the page, such as the title, that is transferred to the browser and search engines



Frames the content of the page to be displayed in the browser window

Basic Page Structure

HTML: A Beginner’s Guide, Second Edition



Gives the name of the page that will appear at the top of the browser window and be listed in search engines –Is contained within and

Table 2-1 Basic HTML Page Tags

Attributes Many tags have additional aspects that you can customize. These options are called attributes and are placed after the tag, but before the final bracket. You might think of attributes as ice cream flavors and toppings. After you choose what type of ice cream dessert you are going to have (cone, banana split, sundae), you get to choose what flavor you want (vanilla, chocolate, strawberry), as well as any additional toppings (sprinkles, hot fudge). The same is true for tags, in that after you select which tag you want to use, you often have a variety of optional attributes from which to choose. Specific attributes for each tag are discussed as we move through the book. But to give you an idea of how specific attributes work, let’s look at an example using the font tag. Attribute Tag

Attribute Value

Value

) are used to signify HTML tags and the ampersand (&) is used to begin these entities. If you need to use a bracket within the content of your HTML page, such as when a greater-than symbol is needed, in the case of 3 > 2, you will use the character entity (>) to do so.

Character

Numbered Entity

Named Entity

“

"

"

&

&

&

(nonbreaking space)

 

 

©

©

©

®

®

®

É

é

é




Now having made the case for using character entities, it’s been my experience that certain characters can actually be used in a Web page without causing any problems. These include straight—not curly—quotation marks ("), exclamation marks (!), question marks (?), colons (;), and parentheses (). While I haven’t noticed any of these to cause problems in the majority of browsers, you should still test your pages thoroughly when using any special characters.

TEAM LinG - Live, Informative, Non-cost and Genuine!

35

2 Basic Page Structure

HTML: A Beginner’s Guide, Second Edition

36

Module 2:

CRITICAL SKILL

2.4

Basic Page Structure

Add Comments to an HTML File Sometimes you might not want visitors to your Web site to see comments or notes you need to add to your Web pages. These notes might be directions to another person or reminders to yourself. Signifies the beginning of a comment

This is the HTML code used to end a comment

This is JavaScript’s way of adding a comment. Without these double slashes before the closing HTML comment code (-->), the browser may become confused

This is done so that older browsers that aren’t capable of understanding JavaScript will simply skip over the script and not produce any errors.

Terminology You should learn several new terms before you use any JavaScript. Here are the most common.

NOTE Many Web sites and books contain the official JavaScript specifications. Refer to the “Learning More” section at the end of this module for details.

TEAM LinG - Live, Informative, Non-cost and Genuine!

HTML: A Beginner’s Guide, Second Edition

397

JavaScript

14

Figure 14-1 Netscape 4’s console helps you troubleshoot JavaScript errors

Objects and Methods To understand these terms, let’s first look back at the previous example and identify the pieces. Object

Method

document.write("I can write JavaScript!"); This is the text to be written on the page

In this example, document is acting as a JavaScript object. Quite simply, an object is anything that can be manipulated or changed by the script. In this case, the object document tells the browser the code directly following it is referring to the HTML document itself. Objects can have methods, which are actual things that happen to the objects (in this case, a document is written to). For example, the object “car” might have a method called “drive”. Along those lines, what other methods might you imagine for the car object? (How about “clean” or “park”…) Methods are followed by a set of parentheses, containing any specific instructions on how to accomplish the method. In the previous example, the text inside the parentheses is written within the current document.

TEAM LinG - Live, Informative, Non-cost and Genuine!

398

Module 14:

JavaScript

Properties Just as an object, such as a car, has features (tires, brakes, and so forth) in the real world, JavaScript objects can have properties. This is useful if, for example, you want to manipulate a specific section of a document. Objects and properties are separated by periods. When you want to specify the value of a property, such as the color of the background, you add the value after the property, as in the following example. document.bgColor="333333";

Note the capital C in this property and remember JavaScript is case sensitive

NOTE An object can even have a property that is, in itself, another object. For example, document.location.href includes a document object, its location (an object itself and a property of document), and an href (property of location).

Variables, Operators, and Functions In JavaScript, a variable is something you specify for your own needs. You might think of variables as labels for changeable values used within a single script. To define a variable, type var, followed by the one-word name of the variable.

TIP Remember, JavaScript is case-sensitive. If you capitalize a letter when you first define a variable, you must also capitalize that letter every time you refer to it. var VotingAge;

An operator does something, such as a calculation or a comparison between two or more variables. The symbols used to do this (listed in Table 14-1) should look familiar because they are also used in simple mathematics. One place you can use operators is in defining values of variables, as in the following example: Tells the browser we are defining a variable Gives a name to our variable, so we can refer to it later

var VotingAge = 18;

Gives a value to associate with the variable

var DrivingAge = VotingAge - 2; Operator Gives a name to this second variable

Refers to the variable associated with the variable named VotingAge (18)

TEAM LinG - Live, Informative, Non-cost and Genuine!

399

Operator

Description

Operator

Description

14

+

Adds

-

Subtracts

*

Multiplies

/

Divides

++

Adds one

--

Subtracts one

JavaScript

HTML: A Beginner’s Guide, Second Edition

=

Sets value

==

Is equal to




Greater than

=

Greater than or equal to

!=

Is not equal to

||

Or

&&

And

Table 14-1 JavaScript Operators

Likewise, a function is a group of commands to which you give a name so that you can refer to the group later in the page. To create a function, type function, followed by the function name and a set of parentheses. Then, type the commands that are part of the function below the name and enclosed in curly brackets. This is shown in the following example. function functionName() { commands go here }

You can’t use just any name for a variable or a function because there’s a list of reserved words that have a special meaning in either JavaScript or Java. If you use one of these words (shown in Table 14-2) as a function or a variable, users may encounter errors when viewing your pages. abstract

break

boolean

byte

case

char

comment

continue

default

delete

do

double

else

export

false

final

float

for

function

goto

if

implements

import

instanceOf

in

int

interface

label

long

native

new

null

Table 14-2 Common Reserved JavaScript Words

TEAM LinG - Live, Informative, Non-cost and Genuine!

400

Module 14:

JavaScript

package

private

protected

return

switch

public

synchronized

this

throws

true

typeof

var

while

with

void

transient

Table 14-2 Common Reserved JavaScript Words (continued)

Event Handlers By contrast with other terms discussed here, event handlers needn’t be placed within the opening and closing script tags. These pieces of JavaScript can actually be embedded within HTML to respond to a user’s interaction and make a page dynamic. For example, placing the event handler onClick within an a tag () causes the event to occur when the user clicks the link. So, if I wanted to change the page’s background color when a link was clicked, I could use the following code. Event Handler (notice the capital C)

This value is enclosed in single quotes because the entire object-property-value string is enclosed in double quotes

) code, use of, 36 equal sign (=) in HTML tags, 27 using with e-mail messages, 114 event handlers, using with JavaScript, 400-401 Excite Web site, 418, 433 external CSS example of, 40-41 explanation of, 37

F fieldset tags attributes and use of, 479 using with forms, 342-343 file compression, explanation of, 368 file extensions explanation of, 22 list of, 502-503

TEAM LinG - Live, Informative, Non-cost and Genuine!

509

510

HTML: A Beginner’s Guide

file formats, choosing, 376-357 file size determining, 365-366 reducing for images, 366-368 file uploads, performing with forms, 326-327 files, indentation of, 106 Fireworks, features of, 358 Firm List Web site, 137 Fishnet NewMedia Web site, 403 Flash files specifying location of, 191 troubleshooting, 492 float property, description of, 242 floating frames, creating, 302-305. See also frames, framesets floppy disks, capacity of, 366 folders indentation of, 106 naming conventions for, 25 follow value of robots version of meta tags, meaning of, 420 font changes, troubleshooting, 485 font colors, specifying, 90-91 font faces changing defaults for, 91-93 explanation of, 86-88 font-size-adjust property, using, 92 font-size property, using, 92 font sizes, specifying, 88-90 font-stretch property, using with CSS, 84 font-style property, using with CSS, 83 font tags attributes and use of, 470 purpose of, 85 fonts examples of, 87 Web site for, 86 form fields, adding to Web pages using JavaScript, 402-404 form information, indicating location for, 334-335 form tags attributes and use of, 479 disabling, 344 format of, 312 formatting styles, defining, 36-37 forms advisory about extra space in cells of, 340 creating, 330-333 employing, 479-481 formatting, 345-348 laying out with tables, 338-339 performing file uploads with, 326-327

processing, 334-338 understanding use of, 312-313 using buttons with, 328-330 using check boxes with, 321-322 using fieldset attributes with, 342-343 using groups with, 342-343 using hidden fields with, 327 using labels with, 341 using method and enctype attributes with, 337-338 using radio buttons with, 319-321 using select menus, 322-325 using submenus with, 325 using tab order and keyboard shortcuts with, 340-341 forward slash (/) using with br tags, 61 using with frame tags, 285 using with hr tags, 66 using with img tags, 134 using with param tags, 190 frame tags attributes and use of, 477-478 using, 283 values for, 230 frameborder attributes, using, 291-292 frameborder="#" attribute of iframe tag, description of, 304 frameborder="value" attribute of embed tag, description of, 184 frames. See also framesets, inline frames adding rows to, 286 adjusting margin height and width of, 293-294 advisories about, 294 browser support for, 283 creating links between, 297-299 developing, 477-479 formatting within framesets, 290-297 identifying content for, 288-290 naming, 290 resizing, 296-297 turning off space between, 292 use of, 282-283 using base targets with, 299 using borders with, 291-292 using scrolling attributes with, 295 viewing source of, 289 frameset tags adding cols and rows attributes to, 284 attributes and use of, 478 Frameset XHTML, explanation of, 29 frameset.html file, creating, 306-309

TEAM LinG - Live, Informative, Non-cost and Genuine!

Index

framesets. See also frames, inline frames adding columns to, 285 creating, 283-290, 306-309 explanation of, 282 formatting frames within, 290-297 mixing columns and rows in, 287-288 nesting, 300-302 troubleshooting display of, 307 FrontPage Web site, 16 FTP (file transfer protocol) sites, referencing files on, 115 FTP files, ASCII versus binary transfer of, 423 FTP programs. See also Web-based FTP CoffeeCup Free FTP, 424 CuteFTP, 424 FTP Client 3, 425-427 FTP Voyager, 424 transferring Web pages to host computers with, 422-427 WS-FTP, 422-424 FTP Voyager Web site, 424 functions in JavaScript, purpose of, 399

G gamma correction tools, purpose of, 52 genealogy.html adding background images to, 170-171 paragraphs for, 119-120 Georgia font, example and availability of, 87 get value of method attributes, using with forms, 337-338 GIF (Graphic Interchange Format) explanation of, 135-136 features of, 372-373 versus JPEG, 375 Go Web site, 418, 433 Google Web site, 418, 433 GoTo Web site, 433 graphic file formats for the Web GIF (Graphic Interchange Format), 372-374 JPEG (Joint Photographic Experts Group), 375 PNG (Portable Network Graphics), 375-376 graphical buttons, using with input tags, 330 graphics appearance on PCs versus Macs, 360 creating, 137-139 designing for different browsers, 363 saving, 377-379 using, 136-137 graphics software Adobe Photoshop/ImageReady, 357 choosing, 376-357

Jasc’s Paint Shop Pro, 358-359 Macromedia Fireworks, 358 groups, using with forms, 342-343 groups value of rules attribute, description of, 231

H - tags, use of, 76-79 h1...h6 tags, attributes and use of, 468 hash symbol (#), using with links to anchors, 111-113 head tags attributes and use of, 468 using, 28, 32 headings adding attributes to, 78 adding to text, 76-79 height and width attributes specifying for images, 139-141 using with inline frames, 302 using with table cells, 252-253 using with tables, 235-237 height property, description of, 242 height="#" attribute of embed tag, 183 of iframe tag, 303 specifying for windows with JavaScript, 407 helper applications, purpose of, 176-177 Helvetica font, example and availability of, 87 hexadecimal color, identifying use of, 46-48 hexadecimal values for standard colors, 49 for Web-safe colors, 50 hidden fields, using with forms, 327 hidden="value" attribute of embed tag, description of, 184 high color, explanation of, 52 horizontal rule spans, troubleshooting, 261 horizontal rules, using with text, 66-67 horizontal value for align attribute, description of, 155 host computers, uploading Web sites to, 422-427 hosting, determining for Web sites, 415-417 hot spots in image maps finding coordinates of, 149-150 purpose of, 148 hot spots in image maps, purpose of, 146 HotBot Web site, 433 hr tags attributes and use of, 468 using, 66 href attributes, purpose of, 102-104, 148 hsides value for frame attribute, description of, 230 hspace attribute of img tag, using, 159-160 hspace="#" attribute of embed tag, description of, 184

TEAM LinG - Live, Informative, Non-cost and Genuine!

511

512

HTML: A Beginner’s Guide

HTML editors, identifying different types of, 14-17 HTML extensions, advisory about inclusion of, 496 HTML files adding comments to, 36 adding style sheets to, 36-41 case insensitivity of, 30-31 creating, 22 design concerns related to, 362-363 naming conventions for, 23-24 versus PostScript files, 387 previewing in browsers, 24-26 restrictions of, 362-363 spacing and breaks in, 31-34 HTML (Hypertext Markup Language) versus JavaScript, 395 learning, 17 troubleshooting with online validators, 484 HTML pages, testing, 29 HTML specifications, locating current version of, 466 HTML tags attributes and use of, 468 standardizing, 363 using, 28 examples of, 26-27 nesting, 31 purpose of, 22, 25-26 requirements for, 28-29 types of, 26-27 HTML Tidy Web site, 484 .html versus .htm file extension, 24 http:// versus mailto, using with links, 113

I i tags attributes and use of, 470 description of, 82 ice.html file, creating, 194 ID attributes, attributes and use of, 466 IE (Internet Explorer) advisory about plug-in support, 179 attributes for table borders, 232-233 default margin sizes in, 293 determining size of images in, 140-141 displaying background colors in, 255 identifying plug-in components installed in, 177-178 using frame tags with, 292 iframe tags attributes and use of, 478-479 attributes for, 303 using, 303

if...then statements, using with JavaScript, 401 image file types, explanation of, 135-136 image maps, creating, 146 ImageReady, features of, 357 images adding space around, 159-160 adding to table cells, 227-228 adding to Web pages, 137-139 aligning with other page tags, 153-155 in backgrounds versus foregrounds, 164-165 changing characteristics of, 161-162 determining size of, 140 guidelines for, 134 linking to other content on Web sites, 144-153 protecting stealing of, 489-490 providing alternative text and titles for, 142-144 reducing file size of, 366-368 replacing with JavaScript onMouseOver event handler, 405-407 specifying height and width of, 139-141 troubleshooting, 485 troubleshooting after downsizing, 491-492 troubleshooting colored dashes in, 487 troubleshooting display of, 139, 142 using as tags in backgrounds of Web pages, 164-170 using in foreground of Web pages, 134-138 working with, 472-474 img tags attributes and use of, 473 role in speeding display of Web pages, 140 using, 134-138 Impact font, example and availability of, 87 indentation, adding to text, 64-65 indenting with CSS, 60 index value of robots version of meta tags, meaning of, 420 index.html file adding images to, 137-139 adding links to, 116-119 changing background and colors in, 54-55 changing image characteristics of, 161-162 creating, 42 formatting paragraphs and page tags in, 71-74 linking frameset.html file to, 307 optimizing text content with, 388-389 inline CSS example of, 39 explanation of, 37 inline frames, creating, 302-305. See also frames, framesets input controls, relationship to forms, 312-313

TEAM LinG - Live, Informative, Non-cost and Genuine!

Index

input tags attributes and use of, 479-480 using with forms, 314 using with graphical buttons, 330 ins tags, attributes and use of, 470 interlacing explanation of, 371-372 GIF file format characteristic, 373 PNG file format characteristic, 375 internal CSS example of, 39-40, 53-54 explanation of, 37 internal links, troubleshooting, 488-489 Internet history of, 5 versus World Wide Web, 5 IP Addresses, explanation of, 5 ISPs (Internet Service Providers) consulting for personal site hosting, 415-416 explanation of, 8

J Jasc’s Paint Shop Pro, features of, 358-359 Java applets, using, 193-194 JavaScript adding comments to, 396 case sensitivity of, 399 event handlers in, 400-401 features of, 16, 394-395 functions in, 399 hiding scripts in, 396 versus HTML, 395 logic of, 400-402 objects and methods in, 397-398 operators in, 398-399 password protection scripts, 489 properties in, 398 replacing URLs with, 404, 406 reserved words in, 399-400 specifying values of properties in, 398 troubleshooting, 395-397 variables in, 398 JavaScript code, placing within tags, 405 JavaScript example in Web page, 408-410 adding current date and time to, 402 changing page tags when user points to them in, 404-406 formatting new windows with, 407-408 making required form fields in, 402-404 JPEG (Joint Photographic Experts Group) explanation of, 135-136, 375

versus GIF, 375 troubleshooting images saved as, 488 Juno Web site, 430-431 justification, applying to text, 68

K kbd tags attributes and use of, 470 description of, 80 keyboard shortcuts assigning to links, 125-126 using with forms, 340-341 keyword value in CSS, description of, 38 keywordcount.com Web site, 433 keywords, using on Web pages, 419-420

L label tags, attributes and use of, 480 labels, using with forms, 341 lang attributes, use of, 467 layers, explanation of, 356 left property, description of, 242 left value for clear attribute of br tag, effect of, 156 legend attributes, using with forms, 342-343 length value in CSS, description of, 38 letter-spacing property, using with CSS, 83 lhs value for frame attribute, description of, 230 li tags attributes and use of, 475 meaning of, 200 using value attributes with, 203 using with unordered lists, 204 line breaks adding to text, 61-62 prohibiting in table cells, 256-258 line-height property, using with CSS, 83 link attribute of body tag, description of, 122 link colors, changing, 121-123 link tags attributes and use of, 472 using with external CSS, 40 links absolute links, 105 adding to e-mail addresses, 113-114 adding to newsgroups, 114-115 adding to sections within same page, 108 adding to Web pages, 102-108 advisory about using anchors with, 112 assigning keyboard shortcuts to, 125-126 creating between frames, 297-299

TEAM LinG - Live, Informative, Non-cost and Genuine!

513

514

HTML: A Beginner’s Guide

creating for anchors, 111-113 creating for multimedia files, 180-182 customizing, 123-128 exchanging with related sites, 430 increasing effectiveness of, 385-386 relative links, 105-108 troubleshooting, 120, 486 wording of, 104 working with, 471-472 lists combining and nesting in Web pages, 211-213 creating, 474-475 formatting with CSS, 210-211 guidelines for use of, 385 location=yes or no, specifying for windows with JavaScript, 407 logical styles, emphasizing sections of text with, 79-81 LookSmart Web site, 418, 434 loop attribute, purpose of, 186 loop="value" attributes for QuickTime, 189 for Real Media, 186 for sound players, 187 lossless compression, explanation of, 369-370 lossy compression, explanation of, 369 Lycos Web site, 418, 434 LZW compression, explanation of, 372

M Macintosh FTP programs, 425-427 HTML font sizes rendered on, 89 Macromedia Dreamweaver Web site, 15 Fireworks, 358 HomeSite Web site, 15 mailto links, using, 113-114 map tags attributes and use of, 473 using, 148 Mapedit Web site, 150 margin height and width, adjusting for frames, 293-294 margin property, effects of, 65 marginheight="#" attribute of iframe tag, description of, 304 marginwidth="#" attribute of iframe tag, description of, 303 Matt’s Script Archive Web site, 337 max-height property, description of, 242 max-width property, description of, 242 maxlength attributes, using with input tags, 315-316 membership.html file, creating for use with lists, 205

menubar=yes or no, specifying for windows with JavaScript, 407 menus, using with forms, 322-325 meta tags adding to Web pages, 421 attributes and use of, 468-469 using, 419-420 method attribute, using with forms, 337-338 methods in JavaScript, explanation of, 397 Microsoft FrontPage Web site, 16 Microsoft image gallery Web site, 136-137 MIME (Multipurpose Internet Mail Extensions), explanation of, 185 MIME types, list of, 502-503 min-height property, description of, 242 min-width property, description of, 242 MSN Web site, 415 multimedia definition of, 176 working with, 472-474 multimedia files embedding, 182-188 linking to, 180-182 multiple attributes, using with form menus, 324

N name attributes description of, 127 using with frames, 290 using with input tags, 315 using with radio buttons on forms, 320-321 name="frame name" attribute of iframe tag, description of, 303 name="vname" attribute of embed tag, description of, 184 navigation bars placement of, 13-14 placing frames in, 306-309 navigation.html file, code for, 308-309 "navy seals," role in developing Web sites, 10 nested tables. See also seamless tables, tables explanation of, 272-274 project for, 274-276 nesting explanation of, 31 framesets, 300-302 lists, 211-213 netmechanic.com Web site, purpose of, 429 Netscape advisory about frame attribute, 230 advisory about rules attribute, 230 default margin sizes in, 293

TEAM LinG - Live, Informative, Non-cost and Genuine!

Index

identifying plug-in components installed in, 177-178 troubleshooting backgrounds in, 489 troubleshooting display of Web pages in, 274 troubleshooting JavaScript errors with, 396-397 using frame tags with, 292 Web site, 434 Netscape, determining size of images in, 140 Network Solutions Web site, 414 newsgroups adding links to, 114-115 Web site for, 115 no resize attributes of frame tags, using, 297 noembed tags versus object tags, 192 using, 188-190 nofollow of robots version of meta tags, meaning of, 420 noframes tags accommodating non-frames-capable browsers with, 305-306 attributes and use of, 478-479 noindex value of robots version of meta tags, meaning of, 420 nojava="value" attribute for Real Media, description of, 186 nolabels="value" attribute for Real Media, description of, 187 nologo="value" attribute for Real Media, description of, 187 nonbreaking space character entity, using, 59-60 none value of robots version of meta tags, 420 of rules attribute, 231 noscript tags, attributes and use of, 481 noshade attribute, using with horizontal rules, 67 numbered lists, creating, 201-202 numloop="value" attribute for Real Media, description of, 187

O object controls, explanation of, 313 object-oriented applications, explanation of, 356 object tags attributes for, 191 attributes and use of, 473-474 embedding Java applets with, 193-194 versus noembed tags, 192 using, 182, 190-192 using with embed tags, 192 objects in JavaScript, dynamics of, 397-398 offsite hosting, benefits of, 416

ol tags attributes and use of, 475 meaning of, 200 On* event handlers in HTML, 467 in JavaScript, 401 online tutorials, list of, 432 online validators, troubleshooting HTML with, 484 onMouseOver event handler in JavaScript, replacing images with, 405-407 onsite hosting, features of, 416-417 Open Directory Web site, 418, 434 open source, explanation of, 17 opening tags in HTML files, purpose of, 26 operators in JavaScript, purpose of, 398-399 optgroup tags, using with form submenus, 325 option tags attributes and use of, 480 using with form menus, 323 ordered lists, using in Web pages, 200-203, 212 outlines, creating with lists, 212 overflow property, description of, 242

P p tags versus
tag, 62 attributes and use of, 470 purpose of, 33, 58-59 using with blockquotes, 64 padding, adding to text, 65 page layout, using tables for, 268-274 page size, role in printing Web pages, 388 Paint program, finding coordinates of hot spots with, 150 Paint Shop Pro, features of, 358-359 palette="value" attribute of embed tag, description of, 184 paragraph breaks, adding to text, 58-60 paragraphs, separating with blank lines, 384 param tags attributes and use of, 474 using with object tags, 190-191 password protection, resources for, 489 passwords, text fields for, 317-318 PCs, HTML fonts rendered on, 90 PDFs (Portable Document Format) files, benefits of, 387-388 percentage value in CSS, description of, 38 percentages, using with width attributes, 266 period (.), using with classes, 243 Perl CGI script, example of, 336 personal site hosting, considerations for, 415

TEAM LinG - Live, Informative, Non-cost and Genuine!

515

516

HTML: A Beginner’s Guide

photographs advisory about saving as GIFs, 374 using as graphics, 136 Photoshop determining hexadecimal values for colors in, 47-48 Save for Web feature, 367 physical styles, emphasizing sections of text with, 81-82 pipe (|), appearance with tables in text-based browsers, 229 pixel dimensions and percentages, using with tables, 237-242 pixels determining for frames, 284 using with width attributes, 266-267 platforms, deciding on, 359-360 play="value" attribute for sound players, description of, 188 plug-ins identifying installation of, 177 using with Web browsers, 176-179 Web site, 179 pluginspage="location" attribute of embed tag, description of, 185 pluginurl="location" attribute of embed tag, description of, 185 PNG (Portable Network Graphics) image file type, explanation of, 135-136, 375-376 Position Agent Web site, 433 position property, description of, 242 positioning, style sheet properties for, 242 post value of method attributes, using with forms, 338 PostScript files versus HTML files, 387 pre tags attributes and use of, 470 using, 62-63 preformatting text, 62-63 printer-friendly Web pages, offering, 387-388 processing method, relationship to forms, 334-338 projects adding background images, 170-171 adding images to Web pages, 137-139 adding links to Web pages, 115-120 adding meta tags to Web pages, 421 adding styles to Web pages, 94-97 changing image characteristics, 161-162 changing page colors, 54-55 creating forms, 330-333 creating framesets, 306-309 creating tables, 245-248 creating Web pages, 41-42 customizing links, 127-128 embedding sound in Web pages, 194-196 formatting forms, 345-348 formatting paragraphs and page tags, 71-74 formatting table cell content, 260-262

optimizing text content, 388-389 saving Web graphics, 377-379 using different types of lists in Web pages, 213-218 using JavaScript to launch new browser window, 408-410 using lists on Web pages, 204-208 using seamless and nested tables, 274-276 Web-site development, 18-19 properties defining for selectors in CSS, 37 identifying, 54 in JavaScript, 398 values of, 37-38

Q q tags, attributes and use of, 470 qtnextn="value" attribute for QuickTime, explanation of, 189 qtsrc="value" attribute for QuickTime, explanation of, 189 quality="value" attribute for sound players, description of, 188 question mark (), using with e-mail messages, 113-114 QuickTime, attributes for, 189 quotation blocks, using with text, 63-65 quotation marks (" ") purpose in HTML tags, 27, 31 using in inline CSS, 39 using with hexadecimal color values, 91 using with usemap attribute, 148

R radio buttons, using with forms, 319-321 raster applications, explanation of, 356 readability of text, ensuring, 384-385 readonly attributes, using with forms, 344 Real Media, attributes for, 186-187 rebel browsers, 363 relative font sizes, explanation of, 88-89 relative lengths, using with width attributes, 267 relative links versus absolute links, 108-109 using, 105-108 relative sizing. See also absolute sizing versus absolute sizing, 240, 242 explanation of, 236-237 remote systems, role in WS-FTP, 422-424 reserved JavaScript words, list of, 399-400 Reset buttons, purpose on forms, 328 resizeable=yes or no, specifying for windows with JavaScript, 407-408

TEAM LinG - Live, Informative, Non-cost and Genuine!

Index

resolution explanation of, 370 role in printing Web pages, 388 RETURNs, identifying, 32 RGB (Red, Green, Blue) mode, explanation of, 47 RGB values for standard colors, 49 for Web-safe colors, 50 rhs value for frame attribute, description of, 230 right attributes aligning text with, 68 for clear attribute of br tag, 156 description of, 242 robots version of meta tags, using on Web pages, 420 rollovers, example of, 123 rows grouping and aligning in tables, 263-265 spanning in table cells, 259-260 rows attributes adding to frameset tags, 284 description of, 231 using with cols attributes, 287-288 using with text areas in forms, 318-319 using without cols attributes for frames, 286 rowspan attributes, using with table cells, 259 rules attribute, values for, 230-231 rules, style sheet properties used with, 67 rulesets, role in CSS, 37

S s, strike tags, attributes and use of, 470 samp tags attributes and use of, 470 description of, 80 Save for Web feature in Photoshop, purpose of, 367 scale="value" attribute for sound players, description of, 188 script tags, attributes and use of, 481 scripts, using, 481-482 scrolling attributes, using with frames, 295 scrolling="value" attribute of iframe tag, description of, 304 scrolling=yes or no, specifying for windows with JavaScript, 407 seamless tables. See also nested tables, tables explanation of, 271 project for, 274-276 Search Engine Guide Web site, 433 Search Engine Watch Web site, 420, 433 search engines versus search directories, 418-420, 433-434 SearchMSN Web site, 434 select menus, troubleshooting display of, 331

select tags, attributes and use of, 480-481 selected attributes, using with form menus, 324 selectors in CSS identifying, 54 purpose of, 36-37 _self attribute value, description of, 127 semicolon (;) using in inline CSS, 39 using in JavaScript, 394 using with character entities, 35 SEO (search engine optimization) providers, purpose of, 429 servers, explanation of, 6 shape attribute of area tag, description of, 148 Shockwave files, specifying location of, 191 shuffle="value" attribute for Real Media, description of, 187 Site Check channels, posting links to, 484 size attributes using with horizontal rules, 67 using with input tags, 315-316 small tags attributes and use of, 471 description of, 82 using, 82 Snap Web site, 418 sound, embedding in Web pages, 194-196 sound players, attributes for, 187-188 space, adding around images, 159-160 spaces, eliminating from seamless tables, 271 spacing adding to HTML files, 32-34 and cell padding in tables, 233-234 span attributes, using with colgroup tags, 266 span tags, attributes and use of, 469 special characters displaying with character entities, 34-35 list of, 496-499 troubleshooting, 485-486 .specialstyle class, using, 93 spinning.tif file, creating for graphics project, 378 src attributes using with frame tags, 288 using with images in foregrounds of Web pages, 134 src="filename.ext" attribute of embed tag, description of, 183 src="filename.html" attribute of iframe tag, description of, 303 status=yes or no, specifying for windows with JavaScript, 407 stock photography Web site, 136 store.html file, creating for use with lists in Web pages, 214

TEAM LinG - Live, Informative, Non-cost and Genuine!

517

518

HTML: A Beginner’s Guide

Strict XHTML, explanation of, 29 strike tags advisory about, 81 description of, 82 strong tags attributes and use of, 471 description of, 80 style attributes, use of, 466 style interpretation Web site, 81 style sheets. See CSS (cascading style sheets) style tags, attributes and use of, 482 sub tags attributes and use of, 471 description of, 82 submenus, using with forms, 325 Submit buttons, purpose on forms, 328 sup tags attributes and use of, 471 physical style, description of, 82

T T1 connections, best download speed for, 367 tab order customizing for links, 124-125 using with forms, 340-341 tabindex attributes, using, 124-125, 340-341, 466 table cells adding colors to, 254-255 align attributes used with, 249-252 changing vertical and horizontal alignment in, 249-250 formatting, 260-262 prohibiting line breaks in, 256-258 spanning columns in, 258 spanning rows in, 259-260 width and height attributes used with, 252-253 table tags attributes and use of, 476 purpose of, 223-224 tables. See also nested tables, seamless tables adding background images to, 244 adding captions to, 244-245 adding colors to, 242-243 cell content for, 224-228 cell padding and spacing in, 233-234 changing borders of, 229-233 creating, 245-248 creating structures for, 223-228 customizing text in cells of, 226-227 grouping and aligning columns in, 265-268 grouping and aligning rows in, 263-265

hiding borders in, 229 including blank cells in, 225 laying out forms with, 338-339 planning, 222-223 tags used with, 223-224 troubleshooting display of, 247 troubleshooting in different browsers, 492-493 using, 475-477 using align attributes with, 240 using pixel dimensions and percentages with, 237-242 using width and height attributes with, 235-237 wrapping content in cells of, 226 tag library Web sites, 466 tags in HTML files attributes and use of, 468 standardizing, 363 using, 28 examples of, 26-27 nesting, 31 purpose of, 22, 25-26 requirements for, 28-29 types of, 26-27 target attributes creating links between frames with, 297-299 use of, 126-127 target audience of Web sites, identifying, 10-11, 19 target links, troubleshooting, 120 tbody tags attributes and use of, 476 using with tables, 263-265 td tags aligning table cells with, 249, 252 attributes and use of, 476-477 formatting, 255-256 purpose of, 224, 227 text adding emphasis to sections of, 79-84 adding headings to, 76-79 aligning, 68-71 centering guidelines, 384 customizing in table cells, 226-227 emphasizing, 385 emphasizing with CSS, 83-84 ensuring readability of, 384-385 horizontal rules used with, 66-67 indenting, 64-65 line breaks in, 61-62 paragraph breaks on, 58-60 preformatting, 62-63 providing alternatives for images, 142-144 quotation blocks and text boxes used with, 63-65

TEAM LinG - Live, Informative, Non-cost and Genuine!

Index

using logical styles with, 79-81 using physical styles with, 81-82 working with, 469-471 text- or code-based HTML editors features of, 15 versus WYSIWYG HTML editors, 16 text-align property description and values of, 71 purpose of, 70 text areas, using with forms, 318-319 text attributes description of, 122 values for, 50 text boxes, using, 63-65 text content, optimizing, 388-389 text-decoration property, using with CSS, 83 text fields increasing size of, 327 troubleshooting display of, 331 using with forms, 314-317 text input for forms using multiple text areas for, 318-319 using single-line text fields for, 314-317 text-shadow property, using with CSS, 84 text-transform property, using with CSS, 84 textarea tags, attributes and use of, 481 tfoot tags attributes and use of, 477 using with tables, 263-265 th tags aligning table cells with, 249 attributes and use of, 476-477 purpose of, 224 thead tags, using with tables, 263-265 thousands of colors, explanation of, 52 thread tags, attributes and use of, 477 tic-tac-toe game adding align and valign attributes to, 250 creating table for, 223-228 tiling, explanation of, 164 timeline.html file creating for use with tables, 245 formatting table cell content with, 260-262 using for seamless and nested tables, 274-276 Times New Roman font, example and availability of, 87 title attributes use of, 466 using, 124 title tags attributes and use of, 469 using, 32

titles placement of, 28 providing alternatives for images, 142-144 tool tips, purpose of, 142 toolbar=yes or no, specifying for windows with JavaScript, 407 top property, description of, 242 tr tags aligning table cells with, 249 attributes and use of, 477 purpose of, 223 Transitional XHTML, explanation of, 29 transparency explanation of, 370-371 GIF file format characteristic, 373 PNG file format characteristic, 375 Trebuchet MS font, example and availability of, 87 Tripod Web site, 415 troubleshooting blank pages in browsers, 484 broken links, 486 browser display without Web pages, 484 color selections, 489 Flash files, 492 font changes, 485 general guidelines, 493 images after downsizing, 491-492 images not appearing, 485 images saved as JPEGs, 488 images with colored dashes, 487 internal links, 488-489 special characters not appearing, 485-486 stolen images, 489-490 strange characters, 488 tables in different browsers, 492-493 unwanted visitors to Web sites, 489 viewing HTML files, 29 Web page updates, 490 Web pages in different browsers, 486-487 Web pages sent in email, 490 white backgrounds in IE, 491 tt tags attributes and use of, 471 description of, 82 tutorials, list of, 432 type attributes using, 190 using with forms, 314 type attributes, using with ol tags, 202 type="value" attribute of embed tag, 185 of object tags, 191

TEAM LinG - Live, Informative, Non-cost and Genuine!

519

520

HTML: A Beginner’s Guide

U u tags advisory about, 81 attributes and use of, 471 description of, 82 ul tags attributes and use of, 475 using, 204, 213 underlining, avoiding, 384 underscore (_), using with frame names, 299 units="value" attribute of embed tag, description of, 185 unordered lists, using in Web pages, 203-204 uploads, performing with forms, 326-327 URL value in CSS, description of, 38 URLs (uniform resource locators) explanation of, 4-6 replacing with JavaScript, 404, 406 role in printing Web pages, 388 usemap attribute of img tag, using, 147-148

V validators for Web pages, using, 484, 487 valign attributes, values for, 250-251 value attributes using with input tags, 315 using with radio buttons on forms, 320-321 values defining for CSS, 37-38 identifying, 54 specifying for properties in JavaScript, 398 var tags attributes and use of, 471 description of, 80 variable transparency, 370 variables in JavaScript, use of, 399 vector applications, explanation of, 356 Verdana font, example and availability of, 87 vertical-align property, description and values of, 71 vertical value for align attribute, description of, 155 Vicomsoft FTP Client 3 Web site, 425, 427 VIEW SOURCE command locating table cells with, 268 using, 17, 22 Visibone Web site, 365 vlink attribute of body tag, description of, 122 void value for frame attribute, description of, 230 volume="#" attribute for sound players, description of, 187 vsides value for frame attribute, description of, 230 vspace attribute of img tag, using, 159-160 vspace="#" attribute of embed tag, description of, 185

W W3C (World Wide Web Consortium) purpose of, 8-9 Web site, 466 Web-based FTP, explanation of, 427. See also FTP entries Web browsers customization tips, 8 design concerns related to, 363-364 explanation of, 7-8 finding older versions of, 395 troubleshooting blank pages in, 484 troubleshooting tables in, 492-493 troubleshooting Web pages displayed in, 484-493 using plug-ins and ActiveX controls with, 176-179 Web site, 363 Web design forums, example of, 484 Web graphics. See graphics Web Know How Web site, 432 Web Marketing Info Center Web site, 433 Web pages adding images to, 137-139 adding links to, 102-108, 115-120 adding links to sections of, 108 adding meta tags to, 421 adding styles to, 94-97 basic structure of, 467-469 changing colors on, 54-55 changing default font face for, 91-93 combining and nesting lists in, 211-213 creating, 41-42 designing window size of, 361 embedding sound in, 194-196 estimating size of, 366 explanation of, 7 increasing printer-friendliness of, 387-388 JavaScript example in, 402-408 making information easy to read on, 385 organizing content of, 385 previewing in browsers, 30 protecting against unwanted visitors, 489 repeating keywords throughout, 419 separating sections of, 66 speeding display of, 140 title guidelines for, 419 troubleshooting display in different browsers, 486-487 troubleshooting strange characters on, 488 troubleshooting updates made to, 490 troubleshooting when sent in email, 490 using definition lists in, 208-210

TEAM LinG - Live, Informative, Non-cost and Genuine!

Index

using different types of lists in, 213-218 using frames with, 282-283 using images as tags in backgrounds of, 164-170 using images in foreground of, 134-138 using lists on, 204-208 using ordered lists in, 200-203 using unordered lists in, 203-204 Web rings, explanation of, 430 Web-safe colors advisory about, 51 creating, 365 different appearances of, 51-52 example of, 55 explanation of, 49-50 Web servers, case sensitivity of, 24 Web sites Acrobat Reader, 387 Adobe, 357 Adobe GoLive, 15 advertising, 430 AltaVista, 418, 433 anatomy of, 4-7 Angelfire, 415 AOL Hometown, 415 AOLNetfind, 433 AOL’s FTP Help, 432 Ask Jeeves, 418 AskJeeves, 433 audience demographics, 360 BBEdit, 15 browser differences, 363 browser use, 8 browsers, 395 CGI scripts, 335, 337 clip art, 137 CLUTS, 365 CNET download center, 357 CoffeeCup Free FTP, 424 comparing, 431 creating first page of, 41-42 creating newsworthy content on, 430 creating structure for, 11-12 CSS (cascading style sheets), 71 CSS-P, 241 CuteFTP, 424 determining hosting for, 415-417 developing, 18-19 developing navigation of, 13-14 development project, 18-19 DHTML (Dynamic HTML), 241 directory structure for, 106 domain name availability, 414

dynamics of, 6-7 embedding Flash and Shockwave files, 191 Excite, 418, 433 Firm List, The, 137 Fishnet NewMedia, 403 font comparisons, 86 FTP Voyager, 424 Go, 418, 433 Google, 418, 433 GoTo, 433 high color, 52 hosting companies, 417 HotBot, 433 HTML Tidy, 484 image protection against stealing, 489-490 Internet history, 5 ISPs (Internet Service Providers), 8 Java applets, 194 Juno, 430-431 keywordcount.com, 433 listing, 418 LookSmart, 418, 434 Lycos, 418, 434 Macromedia, 358 Macromedia Dreamweaver, 15 Macromedia HomeSite, 15 Mapedit, 150 marketing tips for, 430-431 Microsoft FrontPage, 16 Microsoft image gallery, 136-137 MSN, 415 netmechanic.com, 429 Netscape, 434 Network Solutions, 414 newsgroups, 115 Open Directory, 418, 434 organizing content of, 12-13 Paint Shop Pro, 358-359 password protection scripts, 489 PDFs (Portable Document Format) files, 388 plug-in issues, 179 PNG graphic support, 376 Position Agent, 433 preparing for public debut, 419 promoting, 431 publicizing, 429-430 rebel browsers, 363 Search Engine Guide, 433 Search Engine Watch, 420, 433 search engines, 418 SearchMSN, 434 “Selecting a Reputable SEO Provider” article, 429

TEAM LinG - Live, Informative, Non-cost and Genuine!

521

522

HTML: A Beginner’s Guide

setting goals for, 11 Snap, 418 stock photography, 136-137 style interpretation, 81 tag libraries, 466 testing, 427-428, 431 Tripod, 415 troubleshooting unwanted visitors to, 489 uploading to host computers, 422-427 validators for Web pages, 484 Vicomsoft, 425, 427 Visibone, 365 W3C (World Wide Web Consortium), 466 Web designers, 137 Web Know How, 432 Web Marketing Info Center, 433 Web-safe colors, 55 Web technologies, 431 Woolwich Historical Society, 18, 41, 54, 71, 94, 127, 194-196, 204, 245, 260, 274-276, 306-309, 330, 345-348, 378-379, 388-389, 409-410 Workz Network, 433 “Writing for the Web” article, 384 WS-FTP, 422, 424 XHTML (Extensible Hypertext Markup Language), 9 Yahoo!, 434 Yahoo! GeoCities, 415, 431 Yahoo! GeoCities FTP Help, 432 ZDNET: Help & How-To: File Transfer Protocol Web site, 432 Web technologies Web site, 431 Webdings font, example and availability of, 87 width and height attributes using with table cells, 252-253 using with tables, 235-237 width and height of images, specifying, 139-141 width attributes using with col and colgroup tags, 266-267 using with horizontal rules, 67 width property, description of, 242 width="#" attribute of embed tag, 183 of iframe tag, 303 width=#, specifying for windows with JavaScript, 407 windows, formatting with JavaScript, 407-408 Windows FTP programs, examples of, 422-424 windows, using target attribute with, 126-127

Woolwich Historical Society Web site adding meta tags to Web pages with, 421 adding styles to Web pages project, 94 changing page colors project, 54 creating first page of Web site project, 41 customizing links project, 127 embedding sound in Web pages project, 194 formatting forms project, 345-348 formatting paragraphs and page tags project, 71 formatting table cell content, 260 forms project, 330-333 framesets project, 306-309 graphics project, 378-379 increasing effectiveness of links in, 385-386 optimizing text content, 388-389 seamless and nested tables project, 274-276 table creation project, 245 using JavaScript to launch new browser window, 409-410 using lists on Web pages project, 204 Web site development project, 18 word-spacing property, using with CSS, 84 Workz Network Web site, 433 World Wide Web versus Internet, 5 wrap attributes, using with text areas in forms, 318-319 WS-FTP program, features of, 422-424 www prefix, advisory about, 5 WYSIWYG HTML editors features of, 15-16 versus text- or code-based HTML editors, 16

X XHTML (Extensible Hypertext Markup Language) features of, 9 types of, 29

Y Yahoo! GeoCities FTP Help, 432 Yahoo! GeoCities Web site, 415, 431 Yahoo! Web site, 434

Z z-index property, description of, 242 ZDNET: Help & How-To: File Transfer Protocol Web site, 432

TEAM LinG - Live, Informative, Non-cost and Genuine!

INTERNATIONAL CONTACT INFORMATION AUSTRALIA McGraw-Hill Book Company Australia Pty. Ltd. TEL +61-2-9900-1800 FAX +61-2-9878-8881 http://www.mcgraw-hill.com.au [email protected] CANADA McGraw-Hill Ryerson Ltd. TEL +905-430-5000 FAX +905-430-5020 http://www.mcgraw-hill.ca GREECE, MIDDLE EAST, & AFRICA (Excluding South Africa) McGraw-Hill Hellas TEL +30-1-656-0990-3-4 FAX +30-1-654-5525 MEXICO (Also serving Latin America) McGraw-Hill Interamericana Editores S.A. de C.V. TEL +525-117-1583 FAX +525-117-1589 http://www.mcgraw-hill.com.mx [email protected] SINGAPORE (Serving Asia) McGraw-Hill Book Company TEL +65-863-1580 FAX +65-862-3354 http://www.mcgraw-hill.com.sg [email protected]

SOUTH AFRICA McGraw-Hill South Africa TEL +27-11-622-7512 FAX +27-11-622-9045 [email protected] SPAIN McGraw-Hill/Interamericana de España, S.A.U. TEL +34-91-180-3000 FAX +34-91-372-8513 http://www.mcgraw-hill.es [email protected] UNITED KINGDOM, NORTHERN, EASTERN, & CENTRAL EUROPE McGraw-Hill Education Europe TEL +44-1-628-502500 FAX +44-1-628-770224 http://www.mcgraw-hill.co.uk [email protected] ALL OTHER INQUIRIES Contact: Osborne/McGraw-Hill TEL +1-510-549-6600 FAX +1-510-883-7600 http://www.osborne.com [email protected]

TEAM LinG - Live, Informative, Non-cost and Genuine!

Designed for people. Not clocks. People learn at their own pace. That’s why our Beginner’s Guides provide a systematic pedagogy using real-world examples from seasoned trainers to teach the critical skills needed to master a tool or technology.

Osborne Beginner’s Guides: Essential Skills—Made Easy Solaris 9 Administration: A Beginner’s Guide Paul A. Watters, Ph.D. ISBN: 0-07-222317-0 UNIX System Administration: A Beginner’s Guide Steve Maxwell ISBN: 0-07-219486-3

9

proven learning features:

1 2 3 4 5

Modules Critical Skills Step-by-step Tutorials Ask the Experts Progress Checks

6 7 8 9

Annotated Syntax Mastery Checks Projects Network Blueprints

Windows XP: A Beginner’s Guide Marty Matthews 0-07-222608-0 Networking: A Beginner’s Guide, Third Edition Bruce Hallberg ISBN: 0-07-222563-7

Dreamweaver MX: A Beginner’s Guide Ray West & Tom Muck ISBN: 0-07-222366-9

Linux Administration: A Beginner’s Guide, Third Edition Steve Graham ISBN: 0-07-222562-9

HTML: A Beginner’s Guide, Second Edition Wendy Willard ISBN: 0-07-222644-7

Red Hat Linux Administration: A Beginner’s Guide Narender Muthyala ISBN: 0-07-222631-5

Java 2: A Beginner’s Guide, Second Edition Herb Schildt ISBN: 0-07-222588-2

Windows.NET Server: A Beginner’s Guide Marty Matthews ISBN: 0-07-219309-3

UML: A Beginner’s Guide Jason Roff ISBN: 0-07-222460-6

O s b o r n e d e l i v e r s r e s u lt s !

]

TEAM LinG - Live, Informative, Non-cost and Genuine!