20,99 €
Mehr erfahren.
- Herausgeber: John Wiley & Sons
- Kategorie: Wissenschaft und neue Technologien
- Serie: Teach Yourself VISUALLY (Tech)
- Sprache: Englisch
Are you a visual learner? Do you prefer instructions that show youhow to do something - and skip the long-winded explanations? If so,then this book is for you. Open it up and you'll find clear,step-by-step screen shots that show you how to tackle more than 175tasks involving HTML and CSS. Each task-based spread covers asingle technique, sure to help you get up and running with HTML andCSS in no time. You'll learn to: * View HTML code in a browser * Add and format text * Prepare images for the Web * Insert links to other pages * Control layout with style sheets * Add JavaScript to a Web page * Helpful sidebars offer practical tips and tricks * Succinct explanations walk you through step by step * Full-color screen shots demonstrate each task * Two-page lessons break big topics into bite-sized modules
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 325
Veröffentlichungsjahr: 2016
Ähnliche
Table of Contents
Cover
Title
Copyright
Praise for Visual Books
Credits
About the Authors
Authors’ Acknowledgements
Chapter 1: Getting Familiar with HTML and Web Page Basics
Internet Basics
An Introduction to HTML
Explore Web Browsers
Explore HTML Editors
Understanding HTML Syntax
View HTML Code in a Browser
Plan a Web Site
Chapter 2: Creating Your First HTML Page
Understanding HTML Document Structure
Start an HTML Document
Save an HTML Document
View an HTML Page
Add a Document Declaration
Add Metadata
Chapter 3: Adding Text
Create a New Paragraph
Change Paragraph Alignment
Add a Line Break
Insert a Blank Space
Insert Preformatted Text
Insert a Heading
Add Block Quotes
Insert a Comment
Create a Numbered List
Create a Bulleted List
Create a Nested List
Create a Definition List
Insert Special Characters
Special Characters
Chapter 4: Formatting Text
Make Text Bold
Italicize Text
Add Underlining to Text
Change Fonts
Change Font Size
Change the Text Color
Adjust Margins
Set a Background Page Color
Add a Horizontal Line
Chapter 5: Adding Images
Understanding Web Page Images
Prepare Your Images for the Web
Insert an Image
Specify an Image Size
Add Alternative Text
Create an Image Label
Add Copyright Text to Images
Align an Image Horizontally
Align an Image Vertically
Center an Image
Wrap Text Between Images
Stop Text Wrap
Set an Image Border
Add Space Around an Image
Add a Background Image
Create an Image Banner
Chapter 6: Adding Links
Understanding Links
Understanding URLs
Link to Another Page
Open a Linked Page in a New Window
Link to an Area on the Same Page
Link to Another File Type
Link to an E-mail Address
Change Link Colors
Chapter 7: Working with Tables
Understanding Table Structure
Add a Table
Assign a Table Border
Adjust Cell Padding and Spacing
Adjust Cell Width and Height
Add Column Labels
Create Newspaper-Style Columns
Create Side Navigation
Add a Table Caption
Control which Borders to Display
Adjust the Table Size
Change Cell Alignment
Extend Cells across Columns and Rows
Create Column and Row Groups
Add a Background Color to Cells
Add a Background Color to a Table
Insert an Image in a Cell
Insert a Background Image
Change Table Alignment
Control Text Wrapping in Cells
Nest a Table within a Table
Chapter 8: Working with Frames
Understanding Frames
Create Frames
Customize Frame Borders
Control Frame Margins
Add Alternative Text
Prevent Frame Resizing
Hide or Display Frame Scroll Bars
Target a Link
Create a Nested Frameset
Create an Inline Frame
Chapter 9: Creating Forms
Understanding Forms
Types of Form Elements
Gather Form Data
Create a Form
Send Form Data to an E-mail Address
Add a Text Box
Add a Large Text Area
Add Check Boxes
Add Radio Buttons
Add a Menu List
Add a Submit Button
Add a Reset Button
Add Active Labels
Change the Tab Order
Add a File Upload Element
Group Form Elements
Chapter 10: Creating Style Sheets
Understanding Style Sheets
Create an External Style Sheet
Link to a Style Sheet
Add Comments to a Style Sheet
Create an Internal Style Sheet
Create a Class
Apply a Style with the DIV Tag
Apply a Style Locally
Apply a Style Using the ID Attribute
Chapter 11: Formatting Text with Style Sheets
Add Bold to Text
Italicize Text
Indent Text
Change the Font Size
Change the Font
Change the Text Case
Change Text Alignment
Control Line Spacing
Control Letter Spacing
Add Color to Text
Add a Background Color to an Element
Add a Background Image to an Element
Add a Border
Change Link Colors
Change Link Hover Effects
Change Bullet or Number Styles
Customize Form Elements
Chapter 12: Controlling Layout with Style Sheets
Control Layout
Set Width and Height for an Element
Use Relative Positioning
Use Absolute Positioning
Use Fixed Positioning
Set Margins
Add Padding
Wrap Text around Elements
Change Vertical Alignment
Create a Centered Layout
Control the Overlap of Elements
Hide an Element
Customize a Background Image
Chapter 13: Working with JavaScript
Understanding JavaScript
Understanding Script Events and Handlers
Add JavaScript to a Web Page
Create a JavaScript File
Hide JavaScript
Add Alternative Text
Insert the Current Date and Time
Display an Alert Message Box
Display a Pop-Up Window
Customize the Status Bar Message for a Link
Create an Image Rollover Effect
Validate Form Data
Show a Hidden Element
Chapter 14: Adding Multimedia and Extra Touches
Understanding Multimedia Elements
Understanding Plug-Ins and Players
Link to Audio or Video Files
Embed a Video File
Embed an Audio File
Embed a Flash Movie
Add a Java Applet
Embed a Video Clip from YouTube
Embed an Image from Flickr
Add a Google Search Box to Your Page
Add a Digg Link to Your Page
Automatically Load Another Web Page
Create an Image Map
Chapter 15: Publishing Your Web Pages
Understanding Web Page Publishing
Transfer Files to a Web Server with WS_FTP
Troubleshoot Your Web Pages
Promote Your Web Site
HTML Tags
Advertisement
Index
End User Licence Agreement
Guide
Cover
Table of Contents
Begin Reading
Pages
C1
i
ii
iii
iv
v
vi
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
Teach Yourself VISUALLY HTML and CSS
by Mike and Linda Wooldridge
Teach Yourself VisuallyTM HTML and CSS
Published byWiley Publishing, Inc.10475 Crosspoint BoulevardIndianapolis, IN 46256www.wiley.com
Published simultaneously in Canada
Copyright © 2008 by Wiley Publishing, Inc., Indianapolis, Indiana
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Legal Department, Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317) 572-4355, Online: www.wiley.com/go/permisssions.
Library of Congress Control Number: 2008927916
ISBN: 978-0-470-28588-6Manufactured in the United States of America
Trademark Acknowledgments
Wiley, the Wiley logo, Visual, the Visual logo, Teach Yourself Visually, Read Less-Learn More, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates. All other trademarks are the property of their respective owners. Wiley Publishing, Inc. is not associated with any product or vendor mentioned in this book.
Contact Us
For general information on our other products and services contact our Customer Care Department within the U.S. at 800-762-2974, outside the U.S. at 317-572-3993 or fax 317-572-4002.
For technical support please visit www.wiley.com/techsupport.
LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.
FOR PURPOSES OF ILLUSTRATING THE CONCEPTS AND TECHNIQUES DESCRIBED IN THIS BOOK, THE AUTHOR HAS CREATED VARIOUS NAMES, COMPANY NAMES, MAILING, E-MAIL AND INTERNET ADDRESSES, PHONE AND FAX NUMBERS AND SIMILAR INFORMATION, ALL OF WHICH ARE FICTITIOUS. ANY RESEMBLANCE OF THESE FICTITIOUS NAMES, ADDRESSES, PHONE AND FAX NUMBERS AND SIMILAR INFORMATION TO ANY ACTUAL PERSON, COMPANY AND/OR ORGANIZATION IS UNINTENTIONAL AND PURELY COINCIDENTAL.
Permissions
The following Wikimedia images were used under free licenses: Everest kalapatthar crop.jpg (Creative Commons Attribution ShareAlike 2.5, Pavel Novak)
Cathedral square Santiago de Compostela.jpg (Creative Commons Attribution ShareAlike 3.0 Unported, Niels Bosboom)
Great Pyramid of Giza edge.jpg (GNU Free Documentation License, Mgiganteus1)
Praise for Visual Books
“Like a lot of other people, I understand things best when I see them visually. Your books really make learning easy and life more fun.”
John T. Frey (Cadillac, MI)
“I have quite a few of your Visual books and have been very pleased with all of them. I love the way the lessons are presented!”
Mary Jane Newman (Yorba Linda, CA)
“I just purchased my third Visual book (my first two are dog-eared now!), and, once again, your product has surpassed my expectations.
Tracey Moore (Memphis, TN)
“I am an avid fan of your Visual books. If I need to learn anything, I just buy one of your books and learn the topic in no time. Wonders! I have even trained my friends to give me Visual books as gifts.”
Illona Bergstrom (Aventura, FL)
“Thank you for making it so clear. I appreciate it. I will buy many more Visual books.”
J.P. Sangdong (North York, Ontario, Canada)
“I have several books from the Visual series and have always found them to be valuable resources.”
Stephen P. Miller (Ballston Spa, NY)
“Thank you for the wonderful books you produce. It wasn’t until I was an adult that I discovered how I learn — visually. Nothing compares to Visual books. I love the simple layout. I can just grab a book and use it at my computer, lesson by lesson. And I understand the material! You really know the way I think and learn. Thanks so much!”
Stacey Han (Avondale, AZ)
“I absolutely admire your company’s work. Your books are terrific. The format is perfect, especially for visual learners like me. Keep them coming!”
Frederick A. Taylor, Jr. (New Port Richey, FL)
“I have several of your Visual books and they are the best I have ever used.”
Stanley Clark (Crawfordville, FL)
“I bought my first Teach Yourself VISUALLY book last month. Wow. Now I want to learn everything in this easy format!”
Tom Vial (New York, NY)
“Thank you, thank you, thank you...for making it so easy for me to break into this high-tech world. I now own four of your books. I recommend them to anyone who is a beginner like myself.”
Gay O’Donnell (Calgary, Alberta, Canada)
“I write to extend my thanks and appreciation for your books. They are clear, easy to follow, and straight to the point. Keep up the good work! I bought several of your books and they are just right! No regrets! I will always buy your books because they are the best.”
Seward Kollie (Dakar, Senegal)
“Compliments to the chef!! Your books are extraordinary! Or, simply put, extra-ordinary, meaning way above the rest! THANK YOU THANK YOU THANK YOU! I buy them for friends, family, and colleagues.”
Christine J. Manfrin (Castle Rock, CO)
“What fantastic teaching books you have produced! Congratulations to you and your staff. You deserve the Nobel Prize in Education in the Software category. Thanks for helping me understand computers.”
Bruno Tonon (Melbourne, Australia)
“Over time, I have bought a number of your ‘Read Less - Learn More’ books. For me, they are THE way to learn anything easily. I learn easiest using your method of teaching.”
José A. Mazón (Cuba, NY)
“I am an avid purchaser and reader of the Visual series, and they are the greatest computer books I’ve seen. The Visual books are perfect for people like myself who enjoy the computer, but want to know how to use it more efficiently. Your books have definitely given me a greater understanding of my computer, and have taught me to use it more effectively. Thank you very much for the hard work, effort, and dedication that you put into this series.”
Alex Diaz (Las Vegas, NV)
Credits
Project Editor
Jade L. Williams
Acquisitions Editor
Jody Lefevere
Copy Editor
Kim Heusel
Technical Editor
Namir Shammas
Editorial Manager
Robyn Siesky
Business Manager
Amy Knies
Sr. Marketing Manager
Sandy Smith
Editorial Assistant
Laura Sinise
Manufacturing
Allan Conley
Linda Cook
Paul Gilchrist
Jennifer Guynn
Book Design
Kathie Rickard
Production Coordinator
Lynsey Stanford
Layout
Andrea Hornberger
Jennifer Mayberry
Illustrators
Ronda David-Burroughs
Cheryl Grubbs
Screen Artist
Jill A. Proll
Proofreader
Lynda D’Arcangelo
Quality Control
Jessica Kramer
Indexer
Sherry Massey
Vice President and Executive Group Publisher
Richard Swadley
Vice President and Publisher
Barry Pruett
Composition Director
Debbie Stailey
About the Authors
Mike Wooldridge is a user-interface designer based in the San Francisco Bay Area. He has been building Web sites with HTML since 1995.
Linda Wooldridge is a former senior editor at Macworld. She is the coauthor of Teach Yourself Visually Photoshop Elements 6 and other books in the Visual series.
Authors’ Acknowledgements
Mike and Linda thank Jody Lefevere for assigning them the book, Jade Williams for managing the project, Namir Shammas for his technical editing, Kim Heusel for his copyediting, and Ronda David-Burroughs and Cheryl Grubbs for their artistic creations. Mike and Linda dedicate the book to their eight-year-old son, who enjoys surfing the Web and blogging.
CHAPTER 1Getting Familiar with HTML and Web Page Basics
Are you interested in building your own Web pages? This chapter introduces you to HTML, the language used to create Web pages. It also explains the basics behind HTML editors and Web browsers, which you use to design and view your Web content.
Internet Basics
The Internet is a worldwide collection of interconnected computer networks that enables businesses, organizations, governments, and individuals to communicate in a variety of ways. One of the most popular ways users communicate on the Internet is by publishing and interacting with Web pages. You can also use the Internet to send and receive e-mail, chat with other users, and transfer files between computers.
The Internet began as a military research project in the late 1960s. In 2007, the number of Internet users around the globe topped 1.2 billion.
Types of Connections
Users connect to the Internet through a variety of methods. A relatively inexpensive but slow way to connect is with dialup service, which involves using a modem and a phone line. Faster ways to connect include DSL (digital subscriber line), cable modem, satellite, and ISDN (integrated services digital network). Networks include special wireless transmitters that allow computers to access the Internet wirelessly. Companies that help you connect to the Internet are known as Internet service providers, or ISPs.
Connection Speeds
Connection speeds play an important part in a user’s Internet experience because slower connections result in slower file transfers and Web page viewing. Dialup connections offer the slowest access to the Internet at up to 56 kilobits per second, or Kbps, followed by ISDN connections at 64 to 128 Kbps. DSL usually offers connection speeds of up to 3 megabits per second, or Mbps, while cable modems can achieve speeds of up to 6 Mbps. A Web page that takes about 20 seconds to download via dialup can take less than a second using a cable modem.
Communication Standards
The Internet infrastructure relies on a variety of protocols that dictate how computers and networks talk to each other. For example, Transmission Control Protocol/Internet Protocol, or TCP/IP, is a set of rules that control how Internet messages flow between computers. HyperText Transfer Protocol, or HTTP, is a set of rules that determine how browsers should request Web pages and how server computers should deliver them. Having agreed-upon protocols allows seamless communication among the many different types of computers that connect to the Internet.
The World Wide Web
The World Wide Web is a giant collection of documents, or pages, stored on computers around the globe. Commonly called the Web, this collection of pages represents a wealth of text, images, audio, and video available to anyone with a computer and an Internet connection. Web pages are stored on servers, which are Internet-connected computers running software that allows them to serve up information to other computers. When you place a text file, image, or other document in a special Web directory on a server, that information is available for other Web users to view. Chapter 15 talks about how to transfer information to a Web server.
URLs and Links
Every page on the Web has a unique address called a URL, which is short for Uniform Resource Locator. A URL looks like this:
http://www.example.com/index.html
If you know a page’s URL, you can type it into a Web browser to view that page over the Internet. You can also view pages by way of hyperlinks, or simply links, which are clickable words or images on Web pages. Every link on a Web page is associated with a URL that leads to another page on the Internet. Users can jump from one Web page to another by clicking links. Chapter 6 discusses how to create links with HTML.
Browsers
A Web browser is software that allows you to view and interact with Web pages. When you type a URL or click a link in a Web browser, the browser retrieves the appropriate page from a server on the Internet and displays that page. Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari are the three most popular browsers in use today. Each program has evolved through a number of versions, with newer versions supporting more recent Web features. As you build your pages using HTML code, remember that different browsers may display your pages slightly differently depending on the version.
An Introduction to HTML
You build Web pages using HTML, which is short for HyperText Markup Language. HTML documents are made up of text content and special codes known as tags that tell Web browsers how to display the content. HTML documents are identified by their .html or .htm file extensions.
For the most part, HTML is platform independent, which means you can view Web pages on any computer operating system, including Windows, Mac, and Linux.
HTML Tags
HTML consists of text interspersed with special instructions known as tags. Surrounded by brackets, < >, HTML tags tell a browser how to organize and present text, images, and other Web page content. Many tags are written using an opening tag and a closing tag that surround content that appears on the page. When writing HTML tags, you can use upper- or lowercase letters. To make the coding easy to distinguish from other text in the page, you can type tag names in uppercase. For details, see the section “Understanding HTML Syntax.”
Rendering HTML
When a browser displays a Web page, it retrieves the HTML file for that page from a server, parses the HTML tags to determine how the content should be formatted, and renders the page. The HTML tags tell the browser what images, video, audio, and other content need to be downloaded and integrated into the page. The HTML may also tell the browser to download style sheets and interactive scripts to further enhance the page. To view the HTML underlying a Web page, see the section “View HTML Code in a Browser.”
HTML Standards
The World Wide Web Consortium, or W3C, is the primary group guiding the evolution of the HTML language. The W3C is made up of hundreds of companies and organizations including Web industry leaders such as Microsoft, Apple, and Google. The standards developed by the W3C give developers of Web servers and browsers a set of common guidelines with which to develop their products. You can visit the W3C’s Web site at www.w3.org.
HTML Versions
The most recent version of HTML is 4.01. Version 4.01 includes rules for using more than 90 HTML tags, most of which are covered in this book. It improves on previous versions by adding better support for multimedia, scripting, and style sheets. Support for style sheets is especially important because it allows developers to apply more precise formatting to Web pages. It also allows developers to keep complex styling information separate from the rest of the HTML. Style sheets are covered in Chapters 10, 11, and 12.
XHTML
XHTML, or Extensible HyperText Markup Language, is an alternative language for coding Web pages that conforms to the stricter standards of XML, or Extensible Markup Language. XHTML is tag-based and uses many of the same tags as in HTML. However, in XHTML, all tags must be closed, tag names and attributes must be coded in lowercase, and attribute values for tags must be surrounded by quotes. Most modern browsers can read both HTML and XHTML. Although XHTML is not covered in this book, you can read more about it at the W3C site at www.w3.org.
Next Generation of HTML
As this book is being published, the W3C is developing the specification for HTML 5, the next version of HTML. This version will introduce features to help Web designers more easily create and maintain the dynamic pages seen in many of today’s Web sites. HTML 5 will include tags for defining headers, footers, and navigation sections, along with tags for adding interactive elements such as editable and sortable tables. For more information, see www.whatwg.org/html5.
Explore Web Browsers
A Web browser is software that can retrieve HTML documents from the Web, parse the HTML instructions, and display the resulting Web pages. You can also use a browser to display HTML documents you save locally on your computer. When coding your HTML, you can use a Web browser to test your work.
Finding a Browser
Most computer operating systems come with a Web browser already installed. Microsoft Windows Vista computers include the Internet Explorer browser, while Apple Mac computers include the Safari browser. (The examples in this book use Internet Explorer.) Mozilla Firefox is another Web browser that has become increasingly popular in recent years. You can learn more about Firefox and download it free at www.mozilla.com/firefox. For more information about the Web browsers in use today, see the Wikipedia at http://wikipedia.org/wiki/Web_browser.
Browser Discrepancies
There are many Web browsers in use today, and numerous versions of each. While most of them interpret HTML essentially the same way, slight differences in interpretation mean that not all of them display Web pages exactly the same way. Also, some more recent browser versions recognize newer HTML features that older browsers do not. You can avoid surprises by writing clean, well-formed HTML code and testing your pages in different browsers as you work. The Wikipedia offers a detailed comparison of Web browser features at http://wikipedia.org/wiki/Comparison_of_web_browsers.
Explore HTML Editors
Because HTML documents are plain-text documents, you can use any text-editing program to code HTML and create a Web page. You can also use a variety of Web-specific coding environments that will write your HTML code, validate it, and upload it to a Web server.
Simple Text Editors
Simple text editors, also called plain-text editors, are easy to find. Microsoft Windows Vista comes with Notepad, while Apple Mac computers come with TextEdit. Simple text editors offer no-frills word processing and are often the best choice when you are learning to write HTML. This book uses the Windows WordPad and Notepad text editors in its examples. The Wikipedia has a list of free and commercial text editors at http://wikipedia.org/wiki/List_of_text_editors.
HTML Editors
HTML editors, such as Adobe Dreamweaver and Microsoft Expression, are dedicated programs for writing HTML code and managing Web pages. These programs can shield you from having to write HTML code by offering a graphical environment for building Web pages as well as a text-based environment. Most HTML editors will also color your HTML tags for easier viewing, validate your code, and help you upload finished pages to a server.
Word Processing Programs
You can also use word processing programs, such as Microsoft Word, to write HTML. In Word, you can select HTML as the file type when you save a document, and the program automatically adds the appropriate HTML tags. However, commercial word processors tend to store lots of extra information with your HTML, which can make it a challenge to edit the files in other editors.
Understanding HTML Syntax
HTML is a language for describing Web page content. HTML rules, or syntax, govern the way in which code is written. Learning the right way to write your code can save you time and confusion later.
Writing HTML
In HTML, tags determine how page content is organized and formatted. Tags consist of words or abbreviations surrounded by angle brackets, < >. Tags can be written using upper- or lowercase letters. You can type tag names in uppercase to distinguish the code from other text. This HTML code creates a paragraph in your page:
<P>Hello, world!</P>
Tag Structure
Certain structural HTML tags identify different parts of your HTML document. For example, the <BODY> and </BODY> tags surround the main body content that appears in the browser window. Many tags, such as the paragraph tags (<P> and </P>), are written using an opening tag and a closing tag while others, such as the image tag (<IMG>), stand alone. Closing tags must always include a slash (/) before the tag name.
Attributes and Values
You can assign specific attributes to each HTML tag to customize its behavior. Most attributes work by setting a numeric or descriptive value. For example, you can set a paragraph’s alignment on the page using the ALIGN attribute along with a type of alignment: left, right, or center. The code for creating a centered paragraph looks like this:
<P ALIGN=”center”>My centered text.</P>
Attributes always go inside the opening HTML tag, and it is good form to enclose attribute values in quotation marks.
Entities
You can add special characters to a page, such as a copyright symbol or a fraction, by using special codes called entities. Entities represent characters not readily available on the keyboard. All entities are preceded by an ampersand (&) and followed by a semicolon (;). For example, the following code adds a copyright symbol to your page:
©
For more about entities and special characters, see Chapter 3.
Avoiding Syntax Errors
To avoid HTML errors, always take the time to proofread your code. Most HTML editors have features that highlight bad syntax. Make sure your tags have brackets, your closing tags include a slash, and your attribute values are surrounded by quotation marks. Multiple HTML tags should be properly nested, meaning your closing tags should be in the reverse order of the opening tags. For example: example:
<P ALIGN=”center”><B>My text.</B></P>
To help make your HTML readable, consider using new lines to type code instead of running everything together on one long line. Doing so will not affect how your page is displayed, because Web browsers ignore extra white space.
View HTML Code in a Browser
You can view the HTML code for any Web page that you have loaded into your Web browser. Viewing HTML from different Web sites is a good way to learn how to write your own code and can spawn new ideas for your own pages. You can also save a Web page locally for use as a template or to study later.
In Microsoft Windows Vista, Internet Explorer opens the HTML code in the Notepad text editor. To view an HTML page that you have saved locally, see Chapter 2.
View HTML Code in a Browser
VIEW THE SOURCE CODE
Open a Web page in your browser window.
Click
View
.
Click
Source
.
A Notepad window appears displaying the HTML source code for the page.
Click the Close button when finished.
The window closes.
SAVE THE SOURCE CODE
In the Notepad window that displays the source code, click
File
.
Click
Save As
.
The Save As dialog box appears.
Click here to navigate to the folder where you want to store the page.
Type a name for the page.
HTML pages should have an .html or .htm file extension.
Click
Save
.
Notepad saves the page.
Will the HTML documents that I save to my computer work when I open them in a browser?
Possibly. It depends on how the HTML is coded. In addition to the HTML, you may have to download images, style sheets, scripts, and other external content separately, and then edit the HTML so that the page references them correctly. For more about referencing content, see Chapter 6.
How else can I save a Web page in my browser? my browser?
In Internet Explorer, you can click File and then Save As. The browser gives you several ways to save your page. “Complete” saves the HTML and embedded content, “HTML only” saves just the HTML, and “Web Archive” saves the HTML and other content as a single file.
Plan a Web Site
A Web site is a group of related Web pages, all hyperlinked together and hosted on a server. Before you start writing the HTML to create a site’s pages, it is a good idea to do some planning.
Know Your Audience
It is important to understand the audience that will visit the pages on your Web site. It is important to know their technical ability so that you can use language they are comfortable with. It is also important to know their interests so that you can present imagery and other content that will keep them interested and at your site. You can conduct interviews with potential users early on to get ideas for your site designs. You can also have users test out your site after it launches to get feedback on how to improve it.
Plan a Home Page
The home page is usually the first page a visitor sees when visiting a Web site, so it is important that it concisely communicate the site’s purpose and what information users can expect to find. It should also include prominent links to the other important pages on your site. Optimally, users should be able to see all of this information without having to scroll in their browser window. Clear communication is important on all of your site’s pages, but especially on the home page.
Site Map
A useful tool for planning your site’s overall structure is a site map, which represents your Web pages as boxes and the hyperlinks as arrows. The home page of a site is usually placed at the top of a site map. A site map gives you an overview of the pages you need to build and also shows the navigational structure. You should arrange your pages so that important content is easy to get to from the home page. You can sketch your site map using pencil and paper or using software such as Microsoft Visio, which has tools specifically made for creating site maps.
Linear Structure
A linear site layout moves the user through your content in a step-by-step fashion, like pages in a book. Linear layouts are good for presenting sequential instructions or a narrative story. In a linear layout, each Web page usually links to the next page and the previous page. The site map of a linear site will have the pages arranged one after the other in a line.
Hierarchical Structure
A hierarchical layout resembles a pyramid, with the home page at the top and other pages fanning out from there. A hierarchical site map looks like a company’s organizational chart or a family tree. Hierarchical layouts are appropriate for sites with categorized content, such as online merchants. Each branch in such a site represents a product category with the for-sale items at the end of the branches.
Gathering Content
After you plan the pages and structure of your site, you need to gather the content. For simple sites, this may involve writing text and shooting digital photos. More complex sites may require recording audio and video, creating illustrations, and programming interactive media. You can organize all of this content into your Web pages using HTML.
CHAPTER 2Creating Your First HTML Page
Are you ready to begin creating a Web page? This chapter shows you how to get started with a basic HTML document.
Understanding HTML Document Structure
Although Web pages can differ widely in terms of content and layout, all pages have certain HTML tags that give them the same basic structure. Understanding this structure helps you begin to build your own HTML pages.
HTML Tags
The <HTML> and </HTML>
