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
Copyright 2003 by The McGraw-Hill Companies, Inc. Click Here for Terms of Use.
TEAM LinG - Live, Informative, Non-cost and Genuine!
3
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
Copyright 2003 by The McGraw-Hill Companies, Inc. Click Here for Terms of Use.
TEAM LinG - Live, Informative, Non-cost and Genuine!
21
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
the required field is left empty This prevents the form from being
This onSubmit event handler needs to go in the opening form tag, and then the form needs to be named with the name attribute, like this:
TEAM LinG - Live, Informative, Non-cost and Genuine!
JavaScript
HTML: A Beginner’s Guide, Second Edition
404
Module 14:
JavaScript
Then continue with the rest of the form, making sure to name each form field appropriately: Your Name:
Change Page Elements When the User Points to Them If you’ve done any amount of surfing on the Web, you’ve probably noticed that page elements sometimes change when you move the cursor over them. For example, have you ever moved your mouse over a link and found it changed color or style? Or have you noticed a message appearing in the status bar at the bottom of the page when your mouse is pointed toward a certain image or text? These things can be accomplished using event handlers in JavaScript.
Add a Label in the Status Window Normally, when a user moves the mouse over a link, the link’s location or URL appears in the status bar at the bottom of the browser window.
You can use JavaScript to replace that URL with a more descriptive link label if needed. Or, because some people like to use the URL to aid in the navigation of a site, you could add a link label to the URL instead of replacing it. You can see an example of this in Figure 14-2.
Figure 14-2 Using JavaScript, you can change the information displayed in the browser’s status bar when a user moves the mouse over the link.
TEAM LinG - Live, Informative, Non-cost and Genuine!
405
Place the JavaScript code right within the a tag for the link. No other script is necessary to make this easy technique work. The bolded text highlights pieces of the script you should customize.
14
Instructions and Script
This tells the browser you’re changing the text that appears in the status bar
This is the text that actually appears in the status bar
onMouseOver="window.status='LINK: Contact Information'; return true;" This event handler tells the browser to perform the specified action when the mouse moves over this link
This is required to make the script work because it’s checking to make sure the status bar is present
Here’s an example of how the JavaScript code is placed within an a tag.
NOTE If you want to have any apostrophes or quotes appear in the status bar label, you must differentiate them from the other quotes used in JavaScript by preceding them with a backslash: "Here\'s a list of our favorite links!" Contact Us
Replace an Image You can also use the onMouseOver event handler to replace an image when the mouse is moved over an image. This handler is placed within the a tag, so you can replace an image only when the user rolls over a link (either the image itself or a text link). Because this script is a bit more involved than just changing a link’s status bar label, it requires additional JavaScript in the header of the HTML page. Both the code at the top of the page and the code in the a tag must be present for the image swap to work. You also need two versions of each image you want to change: one that’s present when the page is first viewed and another for when the mouse is rolled over the image or link—and both of those versions should be the same size. Name your images so you can recognize which one should be used when. For example, the original link to a section called “camp” might be referred to as campOff, while the version appearing when the user rolls over it might be called campOver. camp Off
TEAM LinG - Live, Informative, Non-cost and Genuine!
JavaScript
HTML: A Beginner’s Guide, Second Edition
406
Module 14:
JavaScript
campOver
Instructions and Script
Place this script in the header of your page (in between the opening and closing head tags). The bolded text highlights pieces of the script you should customize.
This line gives the original image a name, so it can be referenced later
This line gives the location (URL) of the original image
<script language="JavaScript" type="text/javascript">
This line gives the replacement image a name, so it can be referenced later
function replaceImg(oldImg,newImg) { document[oldImg].src=eval(newImg + ".src"); }
This line gives the location (URL) of the replacement image
This part identifies the function we use to replace the image
// -->
Place the onMouseOver and onMouseOut event handlers in the a tag of the link for the image that should be changed. Place the name attribute in the img tag, to identify the image to be changed. Here’s an example of how the script looks when placed within an a tag for an image: Here, we’re telling the browser to look for the image named campOff . . .
Then, when the mouse moves away from the link, we tell the browser to look again for the location of the image named campOff . . . . . . and change it back to its original state, named campOff
. . . and replace it with the image named campOver when the mouse moves over the link
You must remember to identify the image using the name attribute inside of the img tag
TEAM LinG - Live, Informative, Non-cost and Genuine!
Format a New Window While you learned in previous modules that you could use the target attribute to load links into another browser window, you cannot control the size and style of that browser window with HTML. Instead, you can use JavaScript to specify settings such as how large or small that window should be and whether the scroll bars are present (see Figure 14-3). Some of the characteristics you can specify include ●
toolbar=yes or no Turns the browser tool bar—Back, Stop, Reload, and so on—on or off in the new window
●
location=yes or no Turns the browser location bar on or off in the new window
●
status=yes or no Turns the browser status bar on or off in the new window
●
menubar=yes or no Turns the browser menus—File, Edit, View, and so on—on or off in the new window
●
resizeable=yes or no Specifies whether users can resize the new window
●
scrolling=yes, no or auto Allows or prevents scrolling, or leaves it up to the browser to decide as needed
●
width=# Specifies width of new window in pixels
●
height=# Specifies height of new window in pixels
Figure 14-3 You can use JavaScript to force a link to load into a new browser window that is formatted to your specifications.
TEAM LinG - Live, Informative, Non-cost and Genuine!
407
14 JavaScript
HTML: A Beginner’s Guide, Second Edition
408
Module 14:
JavaScript
Instructions and Script Place this script in the header of your page (in between the opening and closing head tags). The bolded text highlights pieces of the script you should customize. This part identifies the function we use to open the new window, so we can reference it later <script language="JavaScript" type="text/javascript"> actually the proper way to write it! window. When typed in your text editor, these should be contained on a single line (The correct spelling is ignored by without any breaks most browsers…) This part brings the window named MonthWindow to the front of the screen
Then, in the body of your page, reference the function created in the previous script from within the appropriate link. You can use the following code to load other links in the NewWindow, simply by changing the URL listed in the parentheses. January
This tells the browser to perform the function called NewWindow
This gives the location of the page to load in the new window
February
If you want to give users the option of closing the window easily, you can add the following code to the bottom of the page that’s loaded into the new window. So, in this case, the code was added to the january.html and february.html pages. Refer to Figure 14-3 for an example. Close Window
Project 14-1
Using JavaScript to Launch a New Browser Window
JavaScript can add much to a Web site, which wouldn’t otherwise be possible with HTML. Many of the popular JavaScript techniques used on the Web make a site seem more dynamic. In this project, we use JavaScript to launch a new browser window from a link on the Woolwich,
TEAM LinG - Live, Informative, Non-cost and Genuine!
Maine Timeline. The goal for this project is to use JavaScript to launch and control a new browser window.
NOTE
409
14 JavaScript
HTML: A Beginner’s Guide, Second Edition
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. Those of you who aren’t using the Woolwich Historical Society can tailor the project to your particular needs.
Step by Step 1. Open the file timeline.html saved from Module 9 in your text editor (SimpleText on
the Mac or Notepad on the PC). 2. Add the necessary JavaScript to the header of the page to set up a function for launching a
new browser window. 3. Name the window DetailsWindow. 4. Title it 'Details'. 5. Turn the menu bar, the status bar, the tool bar, and the location off in the new window. 6. Set the scrolling to auto. 7. Format the new window to be 300 by 300 pixels in size. 8. Create a link from the phrase Court of Merrymeeting in the year 1654. Using JavaScript,
specify the text should link to a page called 1654-May23.html and should open in the DetailsWindow.
NOTE 1654-May23.html was created for you and is located in the Module14 folder for this book on the Osborne Web site.
9. Save the file. 10. Open your Web browser and choose FILE | OPEN PAGE (or OPEN FILE or OPEN, depending
on the browser you’re using). Locate the file timeline.html you just saved. Click the link labeled Court of Merrymeeting to verify the linked page opens in a new browser window with the appropriate customizations.
(continued) TEAM LinG - Live, Informative, Non-cost and Genuine!
Project 14-1
410
Module 14:
JavaScript
11. If you need to make changes, return to your text editor to do so. After making any changes,
save the file and switch back to the browser. Choose REFRESH or RELOAD to preview the changes you just made.
TIP Do you get an error or see nothing in the new browser window? Make sure the 1654-May23.html page is located in the same folder as the timeline.html page. If you receive other errors, verify your script against the following one or try using your browser’s JavaScript console for troubleshooting. Woolwich, Maine Historical Timeline <script language="JavaScript" type="text/javascript"> Woolwich, Maine Historical Timeline 1639-Present*
. . . The code in between these two sections remains unchanged.
Court of Merrymeeting - organization of laws by a committee of 15 pioneers of the territory to govern the settlers along the Kennebec. | . . . The rest of the page remains unchanged.
Project Summary Although JavaScript isn’t the same as HTML, the two can be used together to make Web pages more dynamic in nature. This project gave you a chance to practice one JavaScript technique—controlling browser windows.
TEAM LinG - Live, Informative, Non-cost and Genuine!
Module 14 Mastery Check 1. Fill in the blank: JavaScript is case-_____________. 2. Name two ways JavaScript differs from HTML. 3. How do you hide JavaScript from older browsers that don’t support it? 4. Fill in the blank: In the following code, ____________ is the JavaScript object. document.write("This is a text!");
5. True/False: A plus sign (+) is an example of a JavaScript variable. 6. When placed within the header of a Web page, which opening and closing tags surround all
JavaScripts? 7. Fill in the blank: Objects can have ________________, which are actual things that happen
to the objects, such as write in the following statement: document.write("I can write JavaScript");. 8. What term is given to an aspect of a JavaScript you specify for your own needs, as a label
for a changeable value? 9. Fill in the blank: A _______________ is a group of commands to which you give a name
so you can refer to it later in the script. 10. Which aspect of JavaScript is embedded within the page’s HTML and responds to user’s
interaction? 11. How are conditionals used in JavaScript? 12. What does the following JavaScript do when added to an a tag on a Web page? onMouseOver="window.status='LINK: Contact Information'; return true;"
13. How do you specify that a new browser window should not have any scroll bars? 14. What punctuation ends all JavaScript statements? 15. What does onFocus do when used in a JavaScript?
Learning More While I didn’t expect this module would teach you everything you need to know about JavaScript, I hope it gave you a basic understanding of what types of things JavaScript can do. If you’d like
TEAM LinG - Live, Informative, Non-cost and Genuine!
411
14 JavaScript
HTML: A Beginner’s Guide, Second Edition
412
Module 14:
JavaScript
to learn more, many sources of additional information are available on this topic. Here are some of the most popular. P.S. The sites listed here offer many free scripts that you may borrow and use on your own site. This is considered perfectly normal, so long as you give credit to the original author(s) in your code.
Online References and Scripts ●
Doc JavaScript—www.webreference.com/js/ This Web site includes tutorials, tips, and reviews of tools.
●
Joe Burns’ JavaScript Primer—htmlgoodies.earthweb.com/primers/jsp/ This site is packed with 30 tutorials on JavaScript, starting with the basics.
●
javascripts.com You can find thousands of free scripts and information about how to use them.
●
Builder.com’s Script Library for JavaScript— http://builder.cnet.com/ webbuilding/0-7600.html This site has thousands of free scripts you can download and customize.
Books ●
JavaScript for the World Wide Web (Visual Quickstart Guide), by Tom Negrino and Dori Smith, is a good place for beginners to start.
●
JavaScript: The Definitive Guide, by David Flanagan, offers more advanced information for users with a bit of previous programming experience.
●
JavaScript Goodies, by Joe Burns, is the companion to his popular Web site and a great resource for HTML developers who want to add some JavaScript to their Web sites.
●
Designing with JavaScript, by Nick Heinle, is another good book for beginners.
TEAM LinG - Live, Informative, Non-cost and Genuine!
Module
15
Making Pages Available to Others
CRITICAL SKILLS 15.1
Select possible domain names for your site
15.2
Determine the most appropriate type of hosting for your site
15.3
Differentiate between search engines and search directories
15.4
Upload your site to a host computer
15.5
Test your site
15.6
Publicize your Web site
Copyright 2003 by The McGraw-Hill Companies, Inc. Click Here for Terms of Use.
TEAM LinG - Live, Informative, Non-cost and Genuine!
413
414
Module 15:
Making Pages Available to Others
T
hroughout the course of this book, you’ve created and viewed Web pages on your personal computer. At some point you’ll, undoubtedly, want to show your Web pages to other people. To do that, your site must be transferred or uploaded to a host computer with 24-hour access to the Internet, where it has a suitable domain name or URL. Then, to drive traffic to that site, you need to consider submitting your site to search engines and other marketing techniques.
CRITICAL SKILL
15.1
Select Possible Domain Names for Your Site Before diving into the actual meat of this module, I want to mention domain names briefly. Many people underestimate the power of a guessable and memorable domain name. Consider a company called Acme Landscaping Incorporated. While it may seem logical to its business owners to purchase the domain name alinc.com, this is probably not the first thing a potential customer would guess.
TIP Visit www.networksolutions.com to check for domain name availability.
The name acmelandscaping.com would be my first guess, but if that were already taken, I might try acmelandscapers.com, acmelawns.com, or even something like beautifullawns.com. If more than one of those were available, you might even register both. Purchasing multiple domain names is an inexpensive way to bring in some additional customers and build your brand identity online. Whenever appropriate, you might also purchase the same domain name ending with different extensions, such as beautifullawns.com and beautifullawns.net.
Ask the Expert Q: A:
What are the valid characters for a domain name, and how long can a domain name be? According to Network Solutions (www.networksolutions.com), you can use letters and numbers. You can also use hyphens, although they may not appear at the beginning or end of your Web address. Spaces or other characters like question marks and exclamation marks are never allowed.
(continued)
TEAM LinG - Live, Informative, Non-cost and Genuine!
Your complete domain name (including the four- or five-character extension— such as .com, .edu, .net, .org, .biz, .tv, or .info) can be up to 26 characters long. Remember, “www” isn’t included in the domain name you register, so you needn’t count those characters. For example, acmelandscaping.com (19 characters) is acceptable, but acmelandscapingincorporated.com (31 characters) isn’t.
CRITICAL SKILL
15.2
Determine the Most Appropriate Type of Hosting for Your Site Many different options are available for those who want to publish a site on the Internet. For the purposes of this module, I group these options into two categories: personal site hosting and business site hosting.
Personal Site Hosting When you want to publish a personal Web site and you aren’t concerned about having your own domain name (such as wendywillard.com), you have a wide range of free options available. For example, all the following sites offer free Web space for personal sites to anyone who asks for it. If you currently have an e-mail account with any of these, you’re already halfway there. ●
Yahoo! GeoCities www.geocities.com
●
AOL Hometown
●
Tripod
●
Angelfire www.angelfire.com
●
MSN
hometown.aol.com
www.tripod.com
communities.msn.com
Because these sites are largely targeting toward beginners, they make uploading and maintaining your site a breeze. Most use Web-based tools to do so, meaning you don’t even need any additional software. While these sites offer free hosting to anyone who requests it, remember to check first with your current Internet service provider (ISP). ISPs frequently throw in some free Web space with dial-up Internet connections. If none of these free options suit your purposes or if you need to register your own domain, move on to the next section about business site hosting.
TEAM LinG - Live, Informative, Non-cost and Genuine!
415
15 Making Pages Available to Others
HTML: A Beginner’s Guide, Second Edition
416
Module 15:
Making Pages Available to Others
NOTE Before you sign up with any ISP, be sure to check the terms of service to verify your site fits within the confines of the ISP’s requirements. For example, the majority of ISPs prohibit sites distributing pornography or illegal copies of computer software. In addition, free ISPs usually limit the amount of space and/or bandwidth you can use. I mention these only to point out that restrictions do exist and you’d be wise to review all terms and details carefully to avoid incurring unexpected fees.
Business Site Hosting On the business side, your options vary from onsite to colocated to offsite. In the case of onsite hosting, your business purchases a server, its software, and a dedicated Internet connection capable of serving your site to Web users 24-hours a day, 365-days a year. For small businesses, this isn’t a viable option because it requires expensive start-up costs and on-staff Information Technology (IT) talent. For businesses that already own the appropriate equipment and have an experienced Webmaster but don’t want to spend the money for an expensive, dedicated Internet connection, colocation is an option. In this case, you use your own equipment and personnel but rent space and a high-speed Internet connection from a host company. Your equipment is housed in that space and can be reached any time of day by your personnel, thereby enabling you to maintain a higher level of control over your site as desired. For the majority of small to mid-size businesses, offsite hosting is the most cost-effective and popular solution. This can be on either a shared or a dedicated server. While a shared server can be significantly less expensive than one dedicated to your needs, it may not be possible in all situations. For example, if your site runs custom Web applications, requires a high level of security, or needs a large amount of space, a dedicated server is preferred. Many service levels, and therefore, many price levels, exist within shared offsite hosting. For this reason, be wary of comparing apples to oranges. When you are considering two or more hosting providers, look closely at the fine print to be sure they offer similar services before making a final decision solely on price. Here are some questions to ask when you look for business hosting. ●
How much space on the server will I receive? How much extra do I have to pay if I go over that space?
●
How much traffic can my site generate over a month? What are some average traffic rates for some similar sites you host? How much extra will I pay if the site generates more traffic than allowed?
●
Is multimedia streaming supported? If so, how much traffic is supported for any given event and at what point will the system overload? What are procedures for dealing with excess traffic?
TEAM LinG - Live, Informative, Non-cost and Genuine!
417
●
How many e-mail accounts will I receive with this account?
15
●
Can I use my own domain name(s) (as opposed to www.hostcompany.com/mybusiness)? Will you help me register my domain? (If you haven’t already registered one.) Will you charge extra if I have multiple domain names for a Web site? If so, how much more?
●
What kind of access will I have to my Web site? (For example, is FTP access available for uploading files?)
●
What kind of support do you offer? (For example, If I need help adding password protection to my site, will you help me?) What hours is your support staff available?
●
Can I load my own applications (database tools, e-commerce tools, and so forth) onto the server? What requirements or restrictions do you have regarding those? Are additional costs involved?
Making Pages Available to Others
HTML: A Beginner’s Guide, Second Edition
●
What additional services do you offer? (For example, can you also host my online store and if so, for how much additionally? Can I use the Microsoft FrontPage extensions if I want to?)
●
How many Internet connections do you have? (The more connections a host has, the better chance your site has of staying “live” if one connection goes down.)
●
How often do you perform backups? How easy is it for me to gain access to a backup if I need one?
●
What are the start-up costs? What are the monthly costs? Are there any guarantees?
●
Do you offer a service to measure statistics for my site, such as how many people have visited? If so, can I see an example?
●
Can you also provide Internet access if I need it?
●
Can you provide references?
Many services online let you compare different Web site host companies. To get started, you might try ●
www.hostsearch.com
●
www.cnet.com/internet/0-3799.html
Or, try searching in Yahoo! for web site host to see lists of hosting companies. In the end, you’ll probably get the best ideas about which hosting provider to use by asking friends or business associates.
TEAM LinG - Live, Informative, Non-cost and Genuine!
418
Module 15:
CRITICAL SKILL
15.3
Making Pages Available to Others
Differentiate Between Search Engines and Search Directories Many times in this book, I direct you to search for more information on the Internet. The majority of Web surfers use a search engine or search directory at some point to locate information. If the Web were a large book, you might think of these as different types of indexes—some listing alphabetically, others by topic. Search directories like Yahoo! (www.yahoo.com) organize huge lists of Web sites by category and enable you to search these listings by keyword. Search directories usually include short descriptions next to each listing and sometimes even editorial comment. Other popular search directories are Open Directory (www.dmoz.org), LookSmart (www.looksmart.com), and Snap (www.snap.com). In addition to these large search directories, thousands of smaller search directories exist for specific topics. So, if your site sells children’s clothing, submitting the site to search directories of children’s products or those specifically for parents might be wise. Search for these keywords to locate related search directories.
TIP A great way to find out where you should list your site is to check your competition. If you enter link:competitor.com into AltaVista’s search engine (where competitor.com is replaced with the URL of your competitor’s Web site), you can see all the sites that link to your competitor. Chances are good that if you want to acquire some of those customers from the competition, you could benefit by having links from those same sites.
Search engines maintain a large database of the content on the Web. You can search that database according to keyword, to return pages of results. Some search engines are now adding directory features, trying to give users the best of both worlds. Popular engines are Google (www.google.com), AltaVista (www.altavista.com), Excite (www.excite.com), Lycos (www.lycos.com), and Go (www.go.com). A few of these engines now allow users to ask questions in sentence format, such as “How can I advertise my Web site?” The most popular of these is Ask Jeeves (www.ask.com). Search engines and search directories don’t have to conform to any set of standards, so any details or special techniques you may read about them are subject to change. To help you keep current on these issues, visit www.searchenginewatch.com.
TEAM LinG - Live, Informative, Non-cost and Genuine!
Prepare Your Site for Its Public Debut Before you upload your site to a host computer and submit it to directories and engines, tidying it up a little is best. Consider the following dos and don’ts.
Do: ●
Make sure all your images have alternative text. Directories and engines can’t see the images—they only “look” at the alternative text for descriptions.
●
Give your pages descriptive 5–13 word titles, using keywords from the page. Directories and engines look at the titles of your pages and often use them to list your site. So “Page 2” would definitely not entice as many visitors as “Lawn Care Products for Sale.”
●
Repeat keywords throughout the page. On a page entitled “Lawn Care Products for Sale,” you should include those same words in the headlines, body text, and alternative text for images on the page. This increases the relevancy of the page when someone searches for those words.
Don’t: ●
Stray from the topic. If a page is about lawn care products, don’t include information about your favorite links or television shows on that same page. Extraneous information only weakens the relevancy of your pages because search engines typically show pages with the most relevant information at the top of the results list.
●
Repeat keywords too many times. Search engines are known for dropping sites from their listings because of suspected spamming—a word repeated too many times on a page is a big red flag for spamming. Be realistic and honest. Use the words whenever they seem appropriate and you’ll be fine.
●
Use irrelevant keywords just to draw in people. Don’t include keywords that aren’t appropriate for your site. Users will get annoyed and complain, causing your site to be dropped from the search engine altogether.
Meta Tags Finally, use meta tags to aid those engines or directories supporting them in identifying your content. meta tags are hidden instructions about your page, such as a description and keywords.
NOTE Be aware that some engines and directories ignore meta tags altogether. For this reason, they shouldn’t be relied on as the “be all and end all” of preparing your site.
TEAM LinG - Live, Informative, Non-cost and Genuine!
419
15 Making Pages Available to Others
HTML: A Beginner’s Guide, Second Edition
420
Module 15:
Making Pages Available to Others
These tags should be added to each page on your site in between the opening and closing head tags. Here’s an example of how meta tags might be used on a page selling handmade children’s clothing. Wendy's Handmade Children's Clothing For Sale <meta name="description" content="We sell handmade children's clothing for boys and girls, sizes 6-12. Our children's clothing -- pants, shirts, dresses, and more -- is made to last generations."> <meta name="keywords" content="kids children clothing clothes handmade pant shirt suit dress skirt">
Customize the content of these tags to identify a description that properly explains the purpose of your site in a sentence or two (20–40 words is a good place to start) and keywords that parallel what users will probably search for. Because most users search for words in lowercase, you can avoid using capital letters in your keywords. The number of keywords you can use varies somewhat according to the search engine or directory; make sure your most important keywords are listed first because many limit the contents of your keywords to 900 characters. You can also use the robots version of the meta tag to restrict a page from being indexed at all. This might be useful for a private page or a work in progress. <meta name="robots" content="none">
Possible values for this tag include ●
all Index the page and follow its links (default)
●
none Don’t index to index the page and don’t follow any of its links
●
index Index the page
●
noindex Don’t index the page
●
follow Follow all the links on the page
●
nofollow Don’t follow all the links on the page
The last four values can be used together as needed, so content="index,nofollow" would tell the engine to index the page, but not to follow any of its links.
TIP Visit Search Engine Watch (http://searchenginewatch.com/webmasters/ meta.html) for more tips on using the latest meta tags.
TEAM LinG - Live, Informative, Non-cost and Genuine!
Project 15-1
Adding Meta Tags
As discussed, one way to help boost your rankings in some search engines is to add keywords and descriptions to all your Web pages using meta tags. This project asks you to add these tags to some of the pages in the Woolwich Historical Society’s Web site. Goals for this project include using ●
Research related sites to determine appropriate keywords
●
meta tags to add descriptions and keywords to Web pages
Step by Step 1. Visit www.google.com with your Web browser.
421
15 Making Pages Available to Others
HTML: A Beginner’s Guide, Second Edition
2. In the search box, enter keywords that might be appropriate for your organization. If you
are using the Woolwich Historical Society, these might be “maine history”, “maine genealogy”, “woolwich history”, “history museum maine”, and so on. 3. View the Web sites listed on the first page of results to determine what keywords are
included on their pages to make them rise to the top of the search results. If necessary, view the HTML source of the pages to view any meta tags. 4. Repeat this process in www.yahoo.com to see how different the results are. 5. Open the index.html file in your text editor (SimpleText on the Mac or Notepad
on the PC). 6. Add meta tags to this page to identify the page’s description and appropriate keywords. 7. Save the file.
Project Summary Advertising your site is a necessary, but time-consuming, aspect of Web development. This project gave you practice with two techniques used for improving search engine rankings. In the end, bringing your site to the top of the search listings (and keeping it there) involves dedication and patience—and a bit of luck.
NOTE For extra practice, try adding unique meta tags to all the pages you created.
TEAM LinG - Live, Informative, Non-cost and Genuine!
Project 15-1
422
Module 15:
CRITICAL SKILL
15.4
Making Pages Available to Others
Upload Your Site to a Host Computer After your site is finished and you’re ready to make it “live” or accessible by visitors on the Web, it’s time to transfer the pages to the host computer. You can use file transfer protocol (FTP) programs to do so. The concept of using an FTP program is similar to moving things around on your own personal computer. The key difference is, instead of moving files from one folder to another on your computer, you’re actually moving them from one folder on your computer to another folder on a different computer. Just as you can change settings and information about who has access to view or edit a file on your own computer, you can also make these changes on a host computer. For information about how these settings might work, checking with your ISP or host company is best. Depending on what type of computer you have and who’s hosting your site, you may use one of many different types of FTP programs. Or you might use an FTP tool that comes with your HTML editor, if you have one. The next sections outline a few popular options.
Windows FTP Programs One of the most popular FTP programs for the PC is WS-FTP. It comes in a free LE (lite) version or an inexpensive professional version, and is available for download from www.ipswitch.com. To begin, you must choose which computer you want to access. If you want to upload your files to your Web server, enter that computer’s information in the Session Properties screen that comes up when you first start the program (Figure 15-1). (You may need to click the button labeled NEW first, if a different computer’s information is already filled into the blanks when you launch the program.)
NOTE You should receive all the necessary information when you sign up for hosting service. If you’re unsure, check your host company’s Web site or call its customer support line for assistance.
After entering all the appropriate information, click the button labeled OK to connect to that computer. If your connection is successful, WS-FTP displays the company you’re accessing,
TEAM LinG - Live, Informative, Non-cost and Genuine!
Give your setting a name
Unless your hosting provider specifies otherwise, leave this as "Automatic detect"
Enter the domain name or IP address of the computer you’re trying to access Enter your username, as specified by your hosting provider Enter your password, as specified by your hosting provider
When finished, click this button
Figure 15-1 To begin, enter the information for the computer you want to access.
referred to as the remote system, in the right window. Your local computer is visible in the left window (Figure 15-2). You can transfer files between these two computers by first clicking the filename to highlight it, and then using one of the two arrows in the center of the screen to move the file. You can also navigate through the directory structure of either computer by clicking the arrow at the top of the list of files to move back to the previous directory. Double-click the name of a folder to view the contents of that folder.
TIP Notice near the bottom of the screen that you can transfer files in two different ways: ASCII or binary (the AUTO option attempts to help you choose between these two). HTML and text files should be transferred in ASCII mode, while graphic, multimedia, and most other file types should be transferred in binary mode. This is true regardless of what FTP program you are using.
TEAM LinG - Live, Informative, Non-cost and Genuine!
423
15 Making Pages Available to Others
HTML: A Beginner’s Guide, Second Edition
424
Module 15:
Making Pages Available to Others
This is your computer
After highlighting a file on the remote system, click this arrow to download it to your personal system
This shows which directory you’re currently in on the local system
Any notes or instructions are printed in this space
After highlighting a file on the local system, click this arrow to upload it to the remote system
This shows which directory you’re currently viewing on the remote system
This is the computer to which you’re connected
Figure 15-2 Once you’ve connected to another computer, it’s displayed in WS-FTP’s right menu and referred to as the remote system. For more information about using WS-FTP, visit www.ispwitch.com. Or, if you prefer, try one of these other great Windows FTP programs. ●
CoffeeCup Free FTP www.coffeecup.com
●
CuteFTP www.globalscape.com
●
FTP Voyager www.rhinosoft.com
TEAM LinG - Live, Informative, Non-cost and Genuine!
HTML: A Beginner’s Guide, Second Edition
Macintosh FTP Programs
425
When working on my Mac, I use Vicomsoft FTP Client 3. This excellent FTP program is available in shareware and professional versions, which can be downloaded from Vicomsoft’s Web site (www.vicomsoft.com). To start the process, you have to enter all the information about the computer you intend to access. For example, you need the computer’s name (domain name or IP address) as well as your username and password. In Vicomsoft FTP Client, choose FILE | NEW SERVICE to set up a new connection (Figure 15-3).
NOTE You should receive all the necessary information when you sign up for hosting service. If you’re unsure, check your host company’s Web site or call its customer support line for assistance.
Enter a name for these settings, so you can refer to them later Enter your username, as specified by your hosting provider Enter your password, as specified by your hosting provider Unless told otherwise by your hosting provider, leave the type as AutoDetect Enter the domain name or IP address of the company you’re accessing
Figure 15-3 After entering the necessary information, click the button labeled NEW to save your settings.
TEAM LinG - Live, Informative, Non-cost and Genuine!
Making Pages Available to Others
15
426
Module 15:
Making Pages Available to Others
After setting up the new profile, click the button labeled NEW to save the information. Then, select the name of the profile from the CONNECT menu at the top of the screen to access the other computer. A window will display, showing your local hard drive on the left side and the computer you’re accessing on the right side (Figure 15-4). You can drag-and-drop files from one side to the other, as you would in other folders on your Mac. Or you can use the buttons next to each of the two windows to perform functions like renaming, moving, or deleting files. To upload or download a file, you must first highlight the file. Then, either drag it over to the other window or click the first button next to the current window. (When a file is highlighted, the button is labeled with an arrow. Otherwise, it’s labeled with a folder and can be used to refresh the contents of the window.)
After highlighting a file, click the arrow to move the file to the opposite computer
Current folder on local hard drive Profile name
Current folder on remote system
Figure 15-4 When you’re connected to another computer, your local hard drive is shown on the left and the remote system is shown on the right.
TEAM LinG - Live, Informative, Non-cost and Genuine!
427
For more information about using Vicomsoft FTP Client, visit www.vicomsoft.com. Or, if you prefer, try one of these other great Macintosh FTP programs.
15
●
Fetch
●
Interarchy www.stairways.com
●
NetFinder www.ozemail.com.au/~pli/netfinder
●
Transmit
www.fetchsoftworks.com
www.panic.com
Web-based FTP If you are using a free service to host your Web page, you probably have FTP capabilities through that company’s Web site. This is called Web-based FTP because you don’t need any additional software to transmit the files—in fact, you transmit the files right from within your Web browser. For example, Figure 15-5 shows the FTP capabilities for users of Yahoo! GeoCities. To use this Web-based FTP, click the first button labeled BROWSE and locate the file on your hard drive you’d like to upload. If you want to upload more than one file, use the additional Browse buttons to select multiple files. When you finish, click the button labeled Upload Files. Depending on the size of the files and the speed of your connection, you may experience a delay as the file is uploaded to Yahoo! GeoCities’ servers. Once your files are uploaded, you can use Yahoo! GeoCities’ File Manager to move, rename, or delete files, as well as to create and edit folders. CRITICAL SKILL
15.5
Test Your Site After your site is uploaded to the server, you want to run through each page once more, to verify everything transferred as expected. In addition, test to make sure all the links work and images appear. Once you’ve made a cursory check, it’s time to check for cross-browser and cross-platform consistency. Throughout the book, I have mentioned the importance of checking your pages in multiple browsers and on multiple computer systems to make sure they appear as you intended. However, if you weren’t able to do so before because you didn’t have another computer or browser handy, now’s the time. The .zip archive for this module (which can be downloaded from www.osborne.com or www.willardesigns.com) contains an excellent testing checklist to help you complete this task. After your site is uploaded to the host computer, you want to run through each page once more, to verify that everything transferred as expected. In addition, test to make sure all the links work and the images appear.
TEAM LinG - Live, Informative, Non-cost and Genuine!
Making Pages Available to Others
HTML: A Beginner’s Guide, Second Edition
428
Module 15:
Making Pages Available to Others
Figure 15-5 If available, Web-based FTP can be an easy way to upload your files to a Web server. (Reproduced with permission of Yahoo! Inc. © 2002 by Yahoo! Inc. YAHOO! and the YAHOO! logo are trademarks of Yahoo! Inc.)
TIP Finding errors? Remember to check out Appendix C: Troubleshooting.
Even if you don’t have more than one type of computer or browser, now that your pages are live, you can ask friends or family to test them for you. Have them record what type of browser they’re using, what size monitor they have, what size screen resolution they’re using, and what computer operating system they’re running. That way, when they report bugs or errors on your pages, you’ll have help in determining the problem.
TEAM LinG - Live, Informative, Non-cost and Genuine!
CRITICAL SKILL
15.6
Publicize Your Site After your site is live, you can begin submitting its URL to search engines and search directories. When you submit your site to a search directory, you typically have to fill out a form detailing information about the site and its purpose. To begin the process, visit a directory and look for links where you can “Suggest a Site” (Yahoo!) or “Add URL” (Open Directory) to get your site listed. Be aware, though, changing a listing in a directory is difficult, so be sure to enter the correct information the first time. It can take as long as eight to twelve weeks (Yahoo!) for your site to appear in a directory. By contrast, submitting your site to an engine simply involves entering the URL of your Web site and, perhaps, a contact e-mail address. Just like with directories, you should look for a link labeled “Add URL” or “Add a Site”. Your listing typically appears within a few days, but it may take as long as a week or so. The different types of engines vary greatly according to how they index your site. Because most engines give results based on how relevant pages are to search terms, you might rank 10th th on one day or 1,000 on another. The only way to keep your site current in the engines is to resubmit it often. There are two schools of thought regarding how to submit your site to search engines and search directories. First, you can do this manually, by visiting each of the top eight to ten search engines or search directories (as well as any other smaller directories you choose) and submitting your URL.
TIP You can use a site like netmechanic.com to help you organize the submission process when submitting your site to multiple search engines and search directories. This type of company is often referred to as a search engine optimization or SEO provider.
Second, you can pay someone else to do it for you. Unfortunately, finding a reputable service to do this is difficult and can be costly. Be wary of companies willing to boost your site to the “top ten” for a fee. These companies may bring you to the top ten of a popular engine for a single day or, even worse, to the top ten of some unknown search engine. If you do hire a company to help you with this, look for one willing to submit and resubmit your site over a period of six to nine months. For a checklist of what to consider regarding these services before signing up, visit Paul Bruemmer’s article on the Workz Network entitled “Selecting a Reputable SEO Provider” (http://www.clickz.com/search/opt/article.php/918341).
TEAM LinG - Live, Informative, Non-cost and Genuine!
429
15 Making Pages Available to Others
HTML: A Beginner’s Guide, Second Edition
430
Module 15:
Making Pages Available to Others
Either way, this is a time-intensive process for whoever does it and there’s no magic solution. Some surveys (such as this one: www.workz.com/cgi-bin/gt/tpl_page.html,template= 1&content=1136&nav1=1&) show that unless you spend about 60 minutes a week resubmitting your site to a few engines, you are unlikely to see an increase in your ranking.
NOTE Because many search engines and search directories have their own set of rules and guidelines, reading through any tips or help files they provide before submitting your site is important. For example, on some sites, if you submit your site too often, they actually remove it from their listings altogether.
Marketing Tips In addition to submitting your site to search engines and search directories, you can do many other things to promote your Web site on- and offline. ●
Exchange links with related sites. Consider asking sites with related content for links in exchange for a link to their site from yours. Don’t forget about organizations you belong to like your local Chamber of Commerce or an industry association. These are great places to exchange links. Another place you can exchange links is with a group of related sites, called a Web ring. Visit www.webring.com for some examples.
●
Create newsworthy content. Everyone loves free publicity, and with the thousands of media outlets both on- and offline, you should be able to get a little publicity yourself. If you have an interesting product or a new twist on an old idea, tell someone! E-mail news agencies, send out a press release, write to your local paper, contribute to an association’s newsletter . . . and don’t forget to plug your Web site.
●
Use your customers and tell everyone you know. Give out free pins, bumper stickers, pens, or anything with your Web site address to your existing customers. If your services and products are good, they’ll have no problem telling others about them. In addition, spread the word through industry events where you can network and sell your business.
●
Don’t forget traditional advertising! If you have stationery, add your Web site address. If you already run radio or print ads, include your Web site address. Consider running a special ad promoting your new or revamped Web site.
●
If you have the budget, consider paid online advertising. Banner ads and paid listings in directories can be beneficial if targeted toward the right audience. Sometimes a lessexpensive alternative might be to sponsor a related nonprofit Web site. For example, if you sell school supplies, consider sponsoring a nonprofit homework help site. Another alternative is to sponsor free e-mail or Internet Service Providers. Juno (www.juno.com),
TEAM LinG - Live, Informative, Non-cost and Genuine!
whose Internet service is free, generates revenue entirely through advertisements shown to all its users. ●
Most important, create useful content. If your site is boring or otherwise useless, people won’t come and they won’t help you promote it. While the best marketer for your business is a satisfied customer, the best marketer for your competition is a dissatisfied one.
Make the Site Live! As a final step in creating your Web site, research possible hosting solutions. Refer to the beginning of the module for links and tips on finding personal and business hosting.
TIP If you simply want to test the site you created to learn HTML in this book, I suggest signing up for a free site with Yahoo! GeoCities (geocities.yahoo.com). You can then follow the onscreen instructions to use Yahoo!’s Web-based FTP or use any of the popular FTP programs.
After selecting a hosting provider, use an FTP program to transfer your Web site to the server. Test the pages in several browsers and on different computer systems to confirm you successfully created and uploaded your Web site. For practice, try making a change to one of the pages after viewing it live. Then, re-upload the page and choose REFRESH or RELOAD in your browser to review the change. If appropriate, add your site to search engines and search directories, and continue with other marketing techniques. Remember, promoting your Web site is an ongoing task and requires frequent maintenance.
Summary Congratulations! If you’ve successfully uploaded your pages to a server and made them live, you certainly should be proud. To compare your sites to others created by readers of this book, visit www.willardesigns.com/htmlbook. If you need help, refer to Appendix C: Troubleshooting or visit www.willardesigns.com/htmlbook/bbs.
TIP Ready to learn about more Web technologies? Check out Obsorne’s Web site (www.osborne.com) for information regarding additional books in the Beginner’s Guide series.
TEAM LinG - Live, Informative, Non-cost and Genuine!
431
15 Making Pages Available to Others
HTML: A Beginner’s Guide, Second Edition
432
Module 15:
Making Pages Available to Others
Module 15 Mastery Check 1. Fill in the blank: ISP stands for _____________________________________. 2. Including the extension, what is the limit for characters in a domain name? 3. Which type of business hosting enables you to use your own equipment and personnel to
maintain a server but lease space and a high-speed Internet connection from a host company? 4. Name a key difference between search engines and search directories. 5. True/False: Some search engines ignore meta tags. 6. Add the appropriate code below to cause search engines to not index the page or
follow its links. <meta name="
"
content="
">
7. Where are meta tags placed within a Web page? 8. True/False: All search engines use the same set of standards for indexing Web pages. 9. Fill in the blanks: When testing a Web site, you should test for cross-_____________ and
cross-_____________ consistency. 10. What does FTP stand for?
Learning More Many online tutorials can help you learn more about transferring files on the Internet. Check with your hosting provider because it probably will have additional help files on this subject. Here are some of the most popular: ●
Yahoo! GeoCities FTP Help
●
ZDNET: Help & How-To: File Transfer Protocol www.zdnet.com/ products/stories/reviews/0,4161,2302088,00.html
●
AOL’s FTP Help
●
Web Know How www.webknowhow.net Contains online tutorials, as well as help with finding a Web host.
help.yahoo.com/help/us/geo/gftp
www.aol.com/nethelp/ftp/ftp.html
TEAM LinG - Live, Informative, Non-cost and Genuine!
Search Engines and Search Directories This module only scratched the surface of a complex issue for Web developers—marketing a site on the Internet. I recommend you check out some of the following sources of additional information to help improve your site’s standing in the market. ●
Search Engine Watch (www.searchenginewatch.com) is considered one of the best places to look for information about improving your site’s rankings online. It includes search engine tips and techniques, reviews, tests, resources, and the latest headlines.
●
The Search Engine Guide (www.searchengineguide.com) gives search engine and directory news, marketing information, and general tips.
●
keywordcount.com helps you analyze the most popular words on your Web site, as well as compare them to your competition.
●
Web Marketing Info Center (www.wilsonweb.com/webmarket) gives advice and links for articles about marketing on the Web.
●
The Workz Network (www.workz.com) is a large network of information including a section about effective marketing of Web sites both on and offline.
●
Position Agent (www.positionagent.com) enables you to search by keyword for your site in ten of the top engines and directories at once.
In addition, the search engines and search directories themselves can be a great place to look for information about advertising your site. Most of them have sections of their site dedicated to answering users’ questions about this very topic. Here’s a list of the key engines and directories. ●
Alta Vista www.altavista.com
●
AOLNetfind
●
AskJeeves www.ask.com
●
Excite www.excite.com
●
Go www.go.com
●
GoTo www.goto.com
●
Google www.google.com
●
HotBot
search.aol.com
www.hotbot.com
TEAM LinG - Live, Informative, Non-cost and Genuine!
433
15 Making Pages Available to Others
HTML: A Beginner’s Guide, Second Edition
434
Module 15:
Making Pages Available to Others
●
LookSmart
●
Lycos www.lycos.com
●
Netscape www.netscape.com
●
Open Directory dmoz.org
●
SearchMSN
●
Yahoo!
www.looksmart.com
search.msn.com
www.yahoo.com
TEAM LinG - Live, Informative, Non-cost and Genuine!
Part
III
Appendixes
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!
Appendix Mastery Check Answers
A
437 Copyright 2003 by The McGraw-Hill Companies, Inc. Click Here for Terms of Use.
TEAM LinG - Live, Informative, Non-cost and Genuine!
438
Appendix A:
Mastery Check Answers
Module 1: Getting Started 1. What is a Web browser? A Web browser is a software program that runs on your computer and enables you to view Web pages.
2. What does HTML stand for? HTML is hypertext markup language.
3. Identify the various parts of the following URL: http://www.osborne.com/books/webdesign/favorites.html ___________://___________________/___________/___________/_______________ The various parts of the URL are as follows: protocol://domain/folder/folder/file
4. What is WYSIWYG? WYSIWYG is the acronym for what-you-see-is-what-you-get. It refers to the idea that, for example, instead of typing code to cause a certain bit of text to be bold, you simply click a button that makes it bold.
5. Fill in the blank: Every new version of HTML will be built on the foundation of _____________. Every new version of HTML will be built on the foundation of XHTML 1.0.
6. How does AOL differ from a typical ISP? AOL also produces content that is available only to subscribers.
7. What are the two most popular Web browsers for Windows and Macintosh operating systems? Microsoft Internet Explorer and Netscape Navigator are the two most popular Web browsers for Windows and Macintosh.
8. Fill in the blank: When you type a URL into your Web browser, you send a request to the ________________ that houses that information. When you type a URL into your Web browser, you send a request to the Web server that houses that information.
9. What does the acronym “URL” stand for? URL is uniform resource locator.
10. What organization maintains the standards for HTML? The World Wide Web Consortium (W3C) maintains the standards for HTML.
TEAM LinG - Live, Informative, Non-cost and Genuine!
11. How can you give your site’s visitors visual clues as to where they are in your site’s structure? The following list is not exhaustive; there are plenty of other good ideas the students may come up with. A. Highlight the current section on the navigation bar. B. Repeat the page name in the page title (at the top of the browser window). C. Include the page name in the filename. D. Include an appropriate headline on the page.
12. Fill in the blank: Good practice is to include a standard _________________ on all pages for consistency and ease of use. Good practice is to include a standard navigation bar 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 _______________. Selling products and recruiting potential employees are examples of Web site goals.
14. Fill in the blank: Before you can begin developing your Web site, you must know a little about the site’s target _________________. Before you can begin developing your Web site, you must know a little about the site’s target audience.
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? Look to the competition. Chances are good that if your competition has a successful Web site, you can learn from them about your target audience.
Module 2: Basic Page Structure 1. What file extensions do HTML files use? HTML uses the .htm or .html file extension.
2. The following line of HTML code contains errors. What is the correct way to write this line:
This is a paragraph of text
3. At the very least, which tags should be included in a basic HTML page? A basic HTML page should include the following tags: !DOCTYPE, html, head, title, and body.
TEAM LinG - Live, Informative, Non-cost and Genuine!
439
A Mastery Check Answers
HTML: A Beginner’s Guide, Second Edition
440
Appendix A:
Mastery Check Answers
4. Identify the tag name, attribute, and value in the following line of HTML code: font is the tag name, face is the attribute, and arial is the value.
5. Fill in the blank: XHTML requires all tags to be ________case. XHTML requires all tags to be lowercase.
6. Which option is not acceptable for an HTML filename? A. myfile.html B. my_file.html C. my file.html D. my_file.html C. my file.html is not an acceptable HTML filename.
7. What is the named character entity used to add a copyright symbol to a Web page? © is the named character entity used to add a copyright symbol to a Web page.
8. You just created a Web page, and you’re previewing it in a Web browser when you notice an error. After fixing the error and saving the Web page, which button should you click in the browser to view the changes made? Use the Refresh or Reload button to view the changes you have made.
9. Which is the proper way to close the hr tag to make it XHTML compliant? A. B. C. D. E. D. is the proper way to close the hr tag to make it XHTML compliant.
10. The tags in the following line of code aren’t nested properly. Rewrite the code so the tags are nested properly: Hello World! Hello World!
11. How can you rewrite the text below so it doesn’t display when the page is viewed in a browser? (end comment) code, use of, 36 - (dash), appearance with tables in text-based browsers, 229 - operator in JavaScript, description of, 399 . (period), using with classes, 243 // (double slashes), purpose in JavaScript, 396 / (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 / operator in JavaScript, description of, 399 ; (semicolon) using in inline CSS, 39 using in JavaScript, 394 using with character entities, 35 tags, attributes and use of, 467 < operator in JavaScript, description of, 399 operator in JavaScript, description of, 399 >= operator in JavaScript, description of, 399 >blockquote tags, attributes and use of, 469 >center="value" attribute for Real Media, description of, 186 >console="value" attribute for Real Media, description of, 186 ? (question mark), using with e-mail messages, 113-114 _ (underscore), using with frame names, 299 {} (curly brackets) using with internal CSS, 39-40 using with JavaScript, 401 | (pipe), appearance with tables in text-based browsers, 229 || operator in JavaScript, description of, 399 216 Web-safe colors, explanation of, 49-50 256 colors, benefits of reducing, 374 27K image, example of, 368 28.8 Kbps modem connections, best download speed for, 367 32-bit color versus 24-bit color, 376 33.6 Kbps modem connections, best download speed for, 367 56 Kbps modem connections, best download speed for, 367 5K image, example of, 368
A a tags attributes and use of, 471 description of, 80 using with CSS, 54 above value for frame attribute, description of, 230 absolute font sizes, explanation of, 88
505
Copyright 2003 by The McGraw-Hill Companies, Inc. Click Here for Terms of Use.
TEAM LinG - Live, Informative, Non-cost and Genuine!
506
HTML: A Beginner’s Guide
absolute links versus relative links, 108-109 using, 105 absolute sizing. See also relative sizing explanation of, 235 versus relative sizing, 242 accesskey attributes browser support for, 125-126 uses, 466 using with forms, 340-341 "accidental tourists," role in developing Web sites, 10 Acrobat Reader, downloading, 387 acronym logical style, description of, 80, 469 action attributes, role in processing forms, 334-335 ActiveX controls, using with Web browsers, 176-179 address tags, attributes and use of, 469 Adobe GoLive Web site, 15 Adobe ImageReady, features of, 357 Adobe Photoshop determining hexadecimal values for colors in, 47-48 Save for Web feature, 367 Adobe Photoshop/ImageReady, features of, 357 align attributes advisory about, 241-242 using, tr, td, and th values with, 249 using with horizontal rules, 67 using with images, 154, 156 using with inline frames, 303 using with tables, 240, 242 values for, 250-251 align="#" attribute of iframe tag, description of, 303 align="value" attribute of embed tag, description of, 184 aligning text, 68-71 alignment advisory about, 156 ending, 156-158 alink attribute of body tag, description of, 122 all value of clear attribute of br tag, 157-158 of robots version of meta tags, 420 of rules attribute, 231 alpha channels, 370 alt attribute of area tag, description of, 148 of img tag, using, 142-143 AltaVista Web site, 418, 433 ampersand (&) separating fields with, 114 using with character entities, 35 anchors advisory about using with links, 112
creating, 109-110 linking to, 111-113 Angelfire Web site, 415 animation explanation of, 372 GIF file format characteristic, 373 PNG file format characteristic, 375 AOL’s FTP Help Web site, 432 AOL Hometown Web site, 415 AOLNetfind Web site, 433 applet tags, attributes and use of, 472 arc attributes, using with frames, 284 area tags attributes and use of, 472 using, 148 Arial font, example and availability of, 87 AskJeeves Web site, 433 asterisk (*), representing variable frame size with, 284 attributes adding to body tags, 52 adding to headings, 78 advisory about blank spaces in, 316 core group of, 466 event type of, 467 explanation and examples of, 27, 30 of horizontal rules, 67 international type of, 467 audience demographics online survey, 360 audience of Web sites, identifying, 10-11, 360-361 autoplay="value" attribute for QuickTime, explanation of, 189 autostart="value" attribute for Real Media, description of, 186
B b tags attributes and use of, 469 description of, 82 using, 25, 226-227 background-attachment property, using, 168 background attribute of body tag, using, 164 background-color property, using, 92, 243 background colors choosing, 52-53 controlling in table cells, 255 background images adding to tables, 244 adding to Web pages, 170-171 guidelines for, 164-170 background-repeat property, values of, 168-169
TEAM LinG - Live, Informative, Non-cost and Genuine!
Index
background sounds, including in Web pages, 193 backgroundcolor="value" attribute for Real Media, description of, 186 backgrounds, troubleshooting in Netscape, 489 bandwidth, design concerns related to, 365-368 base tags, attributes and use of, 471 base targets, using with frames, 299 base="url" attribute for sound players, description of, 188 basefont tags attributes and use of, 469 purpose of, 88, 91-92 BBEdit Web site, 15 below value for frame attribute, description of, 230 bgcolor attributes description of, 122 using with tables, 242-243 values for, 50 bgcolor="######" attribute for QuickTime, 189 for sound players, 187 bgsound tag, using, 193 big tags attributes and use of, 469 description of, 82 using, 82 binary transparency, 370 bitmap applications, explanation of, 356 _blank target attribute value, launching new windows with, 126-127 blockquote tags, using, 63-64 blue, sample display of RGB values for, 47-48 body tags attributes and use of, 467-468 attributes of, 122 using, 28 border value for frame attribute, description of, 230 border="#" attribute of embed tag, description of, 184 borders changing in tables, 229-233 style sheet properties used with, 67 turning on, 270 using, 151-153 using with frames, 291-292 bottom property, description of, 242 box value for frame attribute, description of, 230 br tags attributes and use of, 469 advisory about, 61-62 purpose of, 33 using, 61 using with blockquotes, 64 brackets () in HTML tags, purpose of, 25-26
breaks, adding to HTML files, 31-32 Browse buttons, uploading files from forms with, 326 browsers customization tips, 8 design concerns related to, 363-364 explanation of, 7-8, 7-8 previewing HTML files in, 24-26 previewing Web pages in, 30 troubleshooting blank pages in, 484 troubleshooting tables in, 492-493 using plug-ins and ActiveX controls with, 176-179 Web site, 363 Builder.com Script Library Web site, 337 bullet style changing for definition lists, 209 changing for unordered lists, 204 business site hosting, considerations for, 416-417 button tags attributes and use of, 479 formatting, 329 buttons, using with forms, 328-330
C cable modem connections, best download speed for, 367 capital letters, guidelines for use of, 385 caption tags, attributes and use of, 475 captions, adding to tables, 244-245 cascading order of CSS, explanation of, 38 cell padding and spacing in tables, using, 233-234 cellpadding attributes, eliminating spaces in table cells with, 271-272 cellspacing attributes, eliminating spaces in table cells with, 271 cellspacing, setting for background colors in table cells, 255 center tags, advisory about, 69-70 CGI (Common Gateway Interface) password protection scripts, Web site for, 489 CGI Resource Index Web site, 337 CGI scripts, role in form processing, 335-337 character entities, displaying special characters with, 34-35 check boxes, using with forms, 321-322 checked values, using with forms, 321-322 Chop Point Web site analyzing, 268-274 use of, 6-7 "circle rule" for nesting tags in HTML files, explanation of, 31 cite tags attributes and use of, 470 description of, 80
TEAM LinG - Live, Informative, Non-cost and Genuine!
507
508
HTML: A Beginner’s Guide
class attributes, use of, 466 classes adding to internal style sheets used with tables, 251 identifying, 54 using period (.) with, 243 clear attributes description of, 242 using, 156-158 Click here link, advisory about, 104 client-side image maps, explanation of, 146-147 clip art, using as graphics, 136-137 closing quotes ("), advisory about, 496 closing tags in HTML files, purpose of, 26 CLUTS (color lookup tables), displaying, 365 CNET download center Web site, 357 code tags attributes and use of, 470 description of, 80 codebase="value" attribute of object tags, description of, 190-191 codetype="value" attribute of object tags, description of, 191 CoffeeCup Free FTP Web site, 424 col tags, attributes and use of, 475 colgroup tags attributes and use of, 475-476 using, 265-267 colocation, role in business site hosting, 416 color mode GIF file format characteristic, 373 PNG file format characteristic, 375 color names, advisory and list of, 48-49 color property, using, 92 color value in CSS, description of, 38 colors adding to table cells, 254-255 changing on Web pages, 54-55, 54-55 design concerns related to, 364-365 identifying hexadecimal type of, 46-48 identifying use of, 46-48 referencing, 91 role in printing Web pages, 388 specifying for documents, 50 specifying with CSS, 53-54 troubleshooting selection of, 489 cols attributes adding to frameset tags, 284 using with rows attributes, 287-288 using with text areas in forms, 318-319 using without rows attributes for frames, 285 cols value of rules attribute, description of, 231
colspan attribute, using with table cells, 258 column widths, limiting, 384 columns grouping and aligning in tables, 265-268 sizing widths of, 253 spanning in table cells, 258 .com suffix, meaning of, 5 Comic Sans MS font, example and availability of, 87 comments adding to HTML files, 36 adding to JavaScript files, 396 compression explanation of, 368 GIF file format characteristic, 373 compression methods explanation of, 369-370 GIF file format characteristic, 373 PNG file format characteristic, 375 conditional statements, using with JavaScript, 401 connection types, download speeds for, 367 contactus.html file creating in forms project, 331 formatting forms with, 345-348 controller="value" attribute for QuickTime, explanation of, 189 controls in forms initial and current values in, 316 troubleshooting display of, 331 controls="value" attribute for Real Media, description of, 186 for sound players, description of, 187 coords attribute of area tag, description of, 148 Courier New font, example and availability of, 87 CSS (cascading style sheets), 481-482 adding to HTML files, 36-41 adjusting display of borders with, 152-153 attributes and use of, 482-483 changing link colors with, 122-123 controlling columns and rows with, 260 creating horizontal rules with, 67 creating structure for, 37-41 emphasizing text with, 83-84 versus font tags, 85 formatting fonts with, 91-93 formatting lists with, 210-211 formatting spacing and borders around frames with, 293 indenting with, 60 specifying colors with, 53-54 text alignment properties of, 71 types of, 37-41
TEAM LinG - Live, Informative, Non-cost and Genuine!
Index
using background property with, 164 using with tables, 227 Web site, 71 CSS classes, using, 93 CSS-P, explanation of, 241 CSS values, types of, 38 curly brackets ({}) using with internal CSS, 39-40 using with JavaScript, 401 CuteFTP Web site, 424
D dash (-), appearance with tables in text-based browsers, 229 data attribute of object tag, using, 190 data="value" attribute of object tags, description of, 191 date and time, adding to Web pages with JavaScript, 402 dd tags attributes and use of, 474 using, 209-210 decimal numbering system, explanation of, 46-47 declarations, creating for selectors in CSS, 37 definition lists, using in Web pages, 208-210 del tags, attributes and use of, 470 deprecated tags, explanation of, 58 design decisions bandwidth, 365-368 browsers, 363-364 color, 364-365 HTML files, 362-363 platforms, 359-360 target audience demographics, 360-361 dfn tags attributes and use of, 470 description of, 79-80 DHTML (Dynamic HTML), features of, 16 dimensions in Internet Explorer (IE), explanation of, 141 dir attributes, use of, 467 disabled attributes, using with forms, 344 dithering, explanation of, 51, 374 div tags aligning sections of text with, 68-70 attributes and use of, 468 dl tags attributes and use of, 474 using, 209, 213 !DOCTYPE identifier in inline frames, 302 meaning of, 28 using with framesets, 283
document colors, specifying, 50 domain names checking existence of, 6 explanation of, 5-6 registering, 6 selecting, 414-415 valid characters and lengths of, 414-415 double slashes (//), purpose in JavaScript, 396 download speeds for connection types, list of, 367 Dreamweaver Web site, 15 drop-down menus, using with forms, 322-325 dt tags attributes and use of, 475 using, 209 DTD identifier, meaning of, 28
E e-mail addresses, adding links to, 113-114 e-mail messages, customizing, 113-114 em tags attributes and use of, 470 description of, 80 embed tags attributes and use of, 473 using, 182-190 using with object tags, 192 embedded CSS example of, 39-40, 53-54 explanation of, 37 emphasis, adding to sections of text, 79-84 enctype attributes, using with forms, 338 end comment (-->) 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!