HTML & XML for Beginners ppt

cover
cover next page >
Cover
title : HTML & XML for Beginners
author : Morrison, Michael.
publisher :
isbn10 | asin : 0735611890
print isbn13 : 9780735611894
ebook isbn13 : 9780585486727
language :
subject
publication date :
lcc :
ddc :
subject :
cover next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/cover.html [06.10.2009 2:01:44]
page_i
< previous page page_i next page >
Page i
HTML & XML
for beginners
MICHAEL MORRISON
< previous page page_i next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_i.html [06.10.2009 2:01:45]
page_ii
< previous page page_ii next page >
Page ii
PUBLISHED BY
Microsoft Press
A Division of Microsoft Corporation

One Microsoft Way
Redmond, Washington 98052-6399
Copyright © 2001 by Michael Morrison
All rights reserved. No part of the contents of this book may be reproduced or transmitted in any form or by
any means without the written permission of the publisher.
Library of Congress Cataloging-in-Publication Data
Morrison, Michael, 1970-
HTML and XML for Beginners / Michael Morrison.
p. cm.
Includes index.
ISBN 0-7356-1189-0
1. HTML (Document markup language) 2. XML (Document markup language) I.
Title.

QA76.76.H94 M68 2001
005.7'2 dc21 2001030415
Printed and bound in the United States of America.
1 2 3 4 5 6 7 8 9 QWE 6 5 4 3 2 1
Distributed in Canada by Penguin Books Canada Limited.
A CIP catalogue record for this book is available from the British Library.
Microsoft Press books are available through booksellers and distributors worldwide. For further information
about international editions, contact your local Microsoft Corporation office or contact Microsoft Press
International directly at fax (425) 936-7329. Visit our Web site at mspress.microsoft.com. Send comments to

ClearType, FrontPage, JScript, Microsoft, the Microsoft Internet Explorer logo, Microsoft Press, the Office logo
(puzzle design), Outlook, PhotoDraw, the Reader logo, Visual Basic, Windows, and Windows Media are either
registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.
Other product and company names mentioned herein may be the trademarks of their respective owners.
Some of the example companies, organizations, products, domain names, e-mail addresses, logos, people,
places, and events depicted herein are fictitious. No association with any real company, organization,

product, domain name, e-mail address, logo, person, place, or event is intended or should be inferred.
Acquisitions Editor: Casey Doyle
Project Editor: Aileen Wrothwell
Technical Editor: James Johnson
Body Part No. X08-04475
< previous page page_ii next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_ii.html [06.10.2009 2:01:45]
page_iii
< previous page page_iii next page >
Page iii
To Sonny West, who so generously allowed his son Rick and me
to play and learn on his Apple II computer
back when a mouse was still just a furry little animal.
< previous page page_iii next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_iii.html [06.10.2009 2:01:46]
page_iv
< previous page page_iv next page >
Page iv
This page intentionally left blank.
< previous page page_iv next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_iv.html [06.10.2009 2:01:46]
page_v
< previous page page_v next page >
Page v
Contents
Acknowledgments xvi
Part 1
Getting Started with HTML
Chapter 1
HTML Essentials

2
What Is HTML? 3
Your Pen Pal, the Web Browser 3
Putting on Your HTML X-Ray Glasses 4
Why Do I Need to Know HTML? 5
Inside a Web Page 6
The Brains of a Web Page 8
Jesse "The Body" Ventura and HTML 8
Common HTML Tags and Attributes 9
Writing Your First Web Page in HTML 11
Honor Thyself 12
Adding a Splash of Color 12
Tell Me Something About Yourself 13
Listing Your Activities 14
The Finished Page 15
Publishing Your First Web Page 16
Conclusion 21
Chapter 2
Formatting Text
22
Organizing Text 23
Text and the Head of a Page 23
A Body Full of Text 24
< previous page page_v next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_v.html [06.10.2009 2:01:46]
page_vi
< previous page page_vi next page >
Page vi
Basic Text Formatting: The Look or the Meaning? 26
Content-Based Text Formatting 28

Physical Text Formatting 29
VH-1 and The List 31
Unordered Lists 31
Ordered Lists 32
Definition Lists 34
One Last Comment 35
Conclusion 36
Chapter 3
Dressing Up Pages with Images
37
The Scoop on Images 37
Working with Images 39
Displaying Inline Images 40
Formatting Images 41
Tweaking the Size of Images 42
Giving Images Room to Breathe 43
Building Walls Around Images 44
Aligning Images 44
Linking to External Images 46
Using Background Images 48
Using Animated Images 50
Conclusion 50
Chapter 4
Connecting Pages with Hyperlinks
51
What Is a Hyperlink? 52
Understanding URLs 53
Host Names and URLs 54
Dissecting a URL 54
URLs and Web Resources 55

Working with the <a> Tag 56
Linking to Web Pages 57
< previous page page_vi next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_vi.html [06.10.2009 2:01:47]
page_vii
< previous page page_vii next page >
Page vii
Linking to Other Resources 57
Practical Linking with the <a> Tag 58
Anchor Hyperlinks 59
Conclusion 62
Part 2
Beyond the Basics
Chapter 5
Visual Navigation with Image Maps
64
Image Map Basics 64
Two Approaches to Image Maps 66
Let the Server Do the Work 67
Maybe the Client Needs Some Responsibility 67
Using Image Map Development Tools 69
Coding Image Maps by Hand 71
Creating the Map 71
Associating the Map with an Image 74
Constructing a Practical Image Map 74
Conclusion 77
Chapter 6
Organizing Pages with Tables
78
Table Basics 79

Getting to Know the Table Tags 81
Drawing Borders Around Tables 82
Heading Up Your Tables 83
Spanning Cells 84
Setting the Size of Tables 84
Digging Deeper into Table Formatting 86
Aligning Tables 86
Giving Tables Some Space 88
Dressing Up Tables with Colors and Images 90
Revisiting Borders 93
< previous page page_vii next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_vii.html [06.10.2009 2:01:47]
page_viii
< previous page page_viii next page >
Page viii
Using Tables for Page Layout 94
Working Out the Design 94
Putting the Table Together 95
Adding the Content 96
Conclusion 97
Chapter 7
Gathering Information with Forms
98
Understanding Forms 98
Processing Forms with Scripts 102
Using Scripts 102
Finding Scripts 103
Borrowing Scripts 104
Getting to Know Form Controls 104
The Text Box and Password Box Controls 105

The Text Area Control 106
The Check Box Control 107
The Radio Button Control 108
The Menu Control 109
The Button Controls 111
Creating Forms 112
Establishing the Form's Action 112
Laying Out the Controls 113
The Complete Form 115
Testing the Form 116
Advanced Form Tips and Tricks 118
Creating Read-Only Controls 118
Hiding Controls 119
Organizing Controls into Field Sets 119
Setting the Tab Order of Controls 120
Providing Keyboard Shortcuts 121
Conclusion 122
< previous page page_viii next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_viii.html [06.10.2009 2:01:47]
page_ix
< previous page page_ix next page >
Page ix
Chapter 8
Integrating Multimedia with Your Web Pages
123
Understanding Plug-ins and Helper Applications 124
Working with Sound 126
Creating Your Own Sounds 127
Finding Sounds 128
Adding Sounds to Your Pages 129

Working with Video 135
Creating Your Own Videos 135
Finding Videos 136
Adding Videos to Your Pages 136
Tinkering with Streaming Media 140
Preparing Multimedia Files for Streaming 140
Linking to Streaming Multimedia Files 144
Other Types of Multimedia 145
Conclusion 146
Chapter 9
Graphical Tools and HTML
147
Why Use a Graphical Tool? 148
Getting Acquainted with Graphical Tools 148
Image Editing Tools 149
Image Map Tools 152
Web Page Design Tools 153
HTML Editors 155
Working with HTML in FrontPage 156
Using Different Views 157
Creating Tables 160
Creating Image Maps 162
Publishing Your Pages 162
Conclusion 162
< previous page page_ix next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_ix.html [06.10.2009 2:01:48]
page_x
< previous page page_x next page >
Page x
Chapter 10

Publishing Pages on the Web
163
Web Publishing Basics 163
Finding a Good Home for Your Web Pages 166
Hosting Your Own Web Site 167
Paying for a Web Hosting Service 167
Hosting with Your Internet Account 169
Using a Free Web Hosting Service 169
Foregoing Web Hosting Entirely 170
Obtaining a Domain Name 170
Selecting Web Publishing Software 172
Conclusion 173
Part 3
Adding Style to Your Pages
Chapter 11
Style Sheet Basics
176
What Are Style Sheets? 176
The Essentials of Style 180
Applying Styles to Web Pages 182
Internal Style Sheets 182
External Style Sheets 183
Classes of Styles 184
Styling Individual Tags 185
Local Styles 186
Linking with Style 186
Styles and Custom Style Tags 188
Creating Custom Style Tags 189
Putting Custom Style Tags to Work 190
Conclusion 191

< previous page page_x next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_x.html [06.10.2009 2:01:48]
page_xi
< previous page page_xi next page >
Page xi
Chapter 12
Using Styles to Format Text
192
Assessing Cascading Style Sheets Text Styles 192
Working with Font Styles 193
Setting Individual Font Properties 193
Setting Font Properties as a Group 195
Putting the Font Styles Together 196
Dressing Up Text with Style 197
Altering the Spacing of Text 200
Using Styles for Text Alignment 202
Aligning Text 202
Adjusting the Margins 203
Putting the Text Alignment Styles Together 204
Digging Into the Bag of Style Tricks 205
Conclusion 207
Chapter 13
Using Styles for Web Page Positioning
209
The Basics of Positioning with Style 209
Using Relative and Absolute Positioning 213
Managing Overlapping Elements 214
Tweaking the Appearance of Elements 216
Changing the Size of Elements 216
Showing and Hiding Elements 218

Giving Your Elements a Border 218
Controlling Space on a Page 220
Controlling the Flow of Text 223
Flowing Text Around Other Elements 223
Stopping the Flow of Text 224
Thy Text Overfloweth 225
A Complete Positional Style Example 225
Conclusion 227
< previous page page_xi next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_xi.html [06.10.2009 2:01:48]
page_xii
< previous page page_xii next page >
Page xii
Part 4
Adding Interactivity to Your Pages
Chapter 14
Dynamic HTML
230
DHTML Basics 230
The Least You Need to Know About Scripts 231
Scripting Languages 231
Using Scripts in Web Pages 232
Responding to Events 232
Getting to Know the Document Object Model 233
Working with Dynamic Styles 234
Manipulating Dynamic Content 237
Fun with Dynamic Positioning 240
Getting Practical with DHTML 241
Displaying an Animated Ad Banner 242
Displaying Random Quotes 244

Conclusion 247
Chapter 15
Creating Special Effects
248
The Basics of Special Effects 248
Working with Visual Filters 249
The Shadow and Drop Shadow Filters 250
The Emboss and Engrave Filters 252
The Glow Filter 253
The Blur Filter 254
The Basic Image Filter 255
Animating Content Changes with Transitions 257
The RandomDissolve Transition 259
The Fade Transition 259
The Strips Transition 260
The Wheel Transition 261
< previous page page_xii next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_xii.html [06.10.2009 2:01:49]
page_xiii
< previous page page_xiii next page >
Page xiii
The Barn Transition 261
The Blinds Transition 262
The Checker Board Transition 263
The Gradient Wipe Transition 264
The Radial Wipe Transition 264
Putting on a Slide Show 266
Creating Interpage Transitions 267
Conclusion 270
Chapter 16

Assessing the Capabilities of a Client
271
What are Client Capabilities? 271
Client Capabilities and Internet Explorer 273
Obtaining Client Capabilities 274
Reacting to Client Capabilities 276
Conclusion 280
Part 5
Leveraging XML
Chapter 17
Understanding XML
282
What is XML? 282
XML and HTML 284
Getting to Know XML 285
Understanding Elements and Tags 290
Referencing Entities 290
Using Comments 291
Using Processing Instructions 292
Declaring the Document Type 293
Modeling XML Data 294
Working with DTDs 295
Working with XML Schema 296
< previous page page_xiii next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_xiii.html [06.10.2009 2:01:49]
page_xiv
< previous page page_xiv next page >
Page xiv
The Practical Side of XML 298
Conclusion 299

Chapter 18
Styling XML with XSL
300
Style Sheets and XML 301
Understanding XSL 302
Applying XSL to XML Documents 302
Peeking Inside a Style Sheet 303
Drilling for Data with Patterns 304
Transforming Information with Templates 305
Constructing Your Own XSL Style Sheet 308
Conclusion 313
Chapter 19
XHTML: XML Meets HTML
314
The Significance of XHTML 315
The Problem with HTML 315
The XHTML Solution 315
The Leap from HTML to XHTML 316
The Need to Accept XHTML 317
The Three XHTML DTDs 318
Document Validation Requirements 319
Declaring an XHTML DTD and Namespace 319
Validating an XHTML Document 320
Creating an XHTML Document 321
Converting to XHTML 323
XHTML Conversion Guidelines 323
Converting an HTML Document to XHTML 324
An Alternative HTML Conversion Option 328
Conclusion 328
< previous page page_xiv next page >

file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_xiv.html [06.10.2009 2:01:50]
page_xv
< previous page page_xv next page >
Page xv
Part 6
Appendixes
Appendix A
HTML Quick Reference
332
Structural Tags 332
Text Tags 333
List Tags 333
Table Tags 334
Form Tags 334
Miscellaneous Tags 335
Appendix B
HTML Resources on the Web
336
Microsoft's Web Workshop 336
Webmonkey 336
HTML Goodies 336
HTML Help 337
The HTML Writer's Guild 337
World Wide Web Consortium 337
Network Solutions 337
Electronic Frontier Foundation 337
Appendix C
Using Custom Colors
338
Index 340

< previous page page_xv next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_xv.html [06.10.2009 2:01:50]
page_xvi
< previous page page_xvi next page >
Page xvi
Acknowledgments
Thanks to Casey Doyle, Aileen Wrothwell, Sally Stickney, Jim Johnson, Rita Breedlove, and the rest of the
Microsoft Press gang for trusting me with this project and maintaining such an unbelievable level of quality
with the content of the book. An enormous thanks goes to my literary agent, Chris Van Buren, who keeps me
in business. And finally, a special thanks goes to my wife, Masheed, my parents, and all of my wonderful
friends and family who are responsible for keeping me sane when I'm not staring at a computer screen with
a glazed look on my face.
< previous page page_xvi next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_xvi.html [06.10.2009 2:01:50]
page_1
< previous page page_1 next page >
Page 1
Part 1
Getting Started with HTML
Chapter 1
HTML Essentials
2
Chapter 2
Formatting Text
22
Chapter 3
Dressing Up Pages with Images
37
Chapter 4
Connecting Pages with Hyperlinks

51
< previous page page_1 next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_1.html [06.10.2009 2:01:51]
page_2
< previous page page_2 next page >
Page 2
Chapter 1
HTML Essentials
Web fact for the day
A 1999 study of 25,500 words from a standard English-language dictionary found that 93
percent of them have been registered as dot-com addresses.
Even if you're not dreaming of creating the next big dot-com, you've more than likely realized that Web
pages are in your future. Along with this insight, you've probably come to understand that HTML is an
acronym that has much to do with Web pages. As you may already know, HTML is one of a long string of
acronyms that litter the landscape of the Web. If it's one thing techies love, it's a good acronym—and the
more letters, the better. Although many people would like to believe that HTML really stands for Help
Transmit My Love, it doesn't. The real meaning of those magical letters is HyperText Markup Language,
which is more accurate but has considerably less sizzle than the love version.
As the name implies, HTML is a computer language that is used to describe how information is presented on
a Web page. You can think of HTML as the bare-knuckle approach to creating Web pages. It requires you to
use special words and symbols to create effects such as bold text and bulleted lists.
Knowing this, you might wonder why you shouldn't just buy Microsoft FrontPage or some other Web design
tool that allows you to blissfully create Web pages without learning HTML. The answer is that you certainly
can buy such a tool and create Web pages without ever learning any HTML. There's even a good chance that
you'll use one of these tools after you learn HTML. But creating Web pages without knowing HTML is like
using autopilot and not knowing how to fly—it just isn't safe. Okay, I'm exaggerating a little, but you get the
idea: it's important to understand HTML to be truly creative with Web pages.
The goal of this chapter is to begin to take the mystery out of HTML by showing you how simple it is to
create your first Web page. The idea is to start now doing real things with HTML—whether that's building the
next Amazon.com or simply a Web site to immortalize your salamander.

< previous page page_2 next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_2.html [06.10.2009 2:01:51]
page_3
< previous page page_3 next page >
Page 3
What Is HTML?
As you probably know, the Web is a vast sea of documents—Web pages—that are interconnected so that you
can jump from one page to the next. The official language of Web pages is HTML. This means that Web
pages are written in HTML, just as a letter you might write to a friend in Rome is written in Italian. The
obvious difference is that HTML is a computer language understood by Web browsers, and Italian is a human
language understood by people in Italy. HTML is required on the Web to format text and images, as well as
to add character and personality. It gives you options that help you communicate the precise message you
want to send.
HTML also provides the critical linking mechanism that allows pages to link to one another. Without HTML,
the Web would be nothing more than a bunch of dull text documents with no interconnectivity—no
formatting, no style, no images, and really no fun! The most significant feature of HTML is called
hyperlinking
, which is the ability to link pages together. A hyperlink is simply a reference from one page to
a different page. Click the link, and you immediately jump to that page. Hyperlinks are commonly used in
navigation bars for Web sites. For example, when you see a button or image on a Web page that says
Products, there's a good chance that a hyperlink is being used to link you to the Products page of the Web
site when you click the button or image.
If you think of the Web as a big book, then hyperlinks are the dog-eared pages that make it easier to find
what you're looking for in the book. The Web is not a book, however. It contains tons of incredibly
disorganized pages, making hyperlinks a necessity when it comes to navigating through pages in any
meaningful way. You will learn much more about hyperlinks and how to code them in HTML in Chapter 4. For
now, I just want to make the point that the hyperlink is the one feature of HTML that is responsible for
making the Web possible. If HTML really stood for Help Transmit My Love, as I jokingly asserted earlier, then
hyperlinks would be the love potion that brings people together.
Your Pen Pal, the Web Browser

If HTML is so important in making Web pages pretty and connecting them, why don't you see it when you're
on the Web busily shopping for lava lamps or researching Bigfoot sightings? The answer is that no one but
Web page designers and Web browsers speak the language of HTML. When you design a Web page in
HTML, you are in effect writing a personal letter to a Web browser about what you'd like a page to look like.
It might go something like this:
Dear Browser,

Please place the picture of my pet salamander, Ernest, in the upper left corner of the screen, and write his
name in bold just below the picture. To the right of Ernest, please list his vital statistics including height,
weight, color, and sliminess. Below all of that, please include a link so
< previous page page_3 next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_3.html [06.10.2009 2:01:51]
page_4
< previous page page_4 next page >
Page 4
that my friends can e-mail their best wishes for Ernest's improved health. One more thing – please make the
background of the page pink, Ernest's favorite color.

Yours Truly,
Michael
Although this narrative description of the conversation between Web designer and Web browser is obviously
not valid HTML code, it does convey the information that is typically described using HTML. The problem is
that computers aren't very smart. You must give them detailed instructions to get exactly what you want on
a Web page. HTML is the language used to communicate the detailed instructions.
Putting on Your HTML X-Ray Glasses
You might be struggling to believe that all of the Web pages you've ever seen are constructed using HTML.
To put your mind at ease, I want to teach you a little trick that allows you to view the actual HTML code for
any Web page. Along with showing you that all pages have HTML under the hood, this trick will prove
valuable later on in your HTML career, because it allows you to explore pages to see how other designers
pulled off certain looks. To view the HTML code for a Web page, first visit one of your favorite Web sites.

When the Web page opens in your Web browser, select View on the main menu, and then Source. A new
window will immediately open, showing letters and symbols like you've never seen them before. That is the
HTML code for the page.
Note
This description of how to view the HTML code for a Web page assumes that you're using
Internet Explorer. In Netscape Navigator, the menu command is named Page Source. You'll
find that other browsers also support this feature, although the specific menu commands
vary to some degree.
As you progress through this book, you will come to view HTML code as meaningful information and realize
that it can be your friend. By the way, the Web pages you create while reading this book won't look nearly as
messy as those that you typically see on the Web. The HTML code for complex Web sites has a tendency to
evolve into something far removed from a fast read. You will learn to create HTML code that is much cleaner
and easier to understand.
Note
HTML isn't the only language being used on the Web to create Web pages. Web page
designers are beginning to adopt a new standard for Web pages known as XHTML. XHTML
is a more structured form of HTML. XHTML is based on XML, which you will learn about in
Chapter 16, "Understanding XML." Many people expect the language XHTML to someday
alleviate many of the inconsistencies associated with how browsers display HTML. You'll
learn about XHTML in Chapter 19, "XHTML: XML Meets HTML." I told you techies love
acronyms!
< previous page page_4 next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_4.html [06.10.2009 2:01:52]
page_5
< previous page page_5 next page >
Page 5
Why Do I Need to Know HTML?
As an engineering student, I constantly found myself asking the question "why do I need to know this?" The
piles of information I had to learn were seemingly unrelated to anything I wanted to do in the real world.
Although no one ever answered that question for me, I can help you out about HTML. Why do you need to

know HTML? The answer is that you don't need to know HTML. With so many excellent Web development
tools around, you can create some pretty interesting Web pages without having a clue about HTML. So
what's the deal? Have you bought this book, only to learn in the first chapter that you don't need it? Of
course not.
Although you may not need to know HTML to create Web pages, it's an immeasurable asset to know HTML
when something doesn't work as you expected it to in a Web page, or when you're pushing the limit to do
something unique. Keep in mind that whatever tool you use to create Web pages, the end result is always
HTML. When you don't know HTML, you are at the mercy of the tool. Anyway, you may be the kind of person
who likes complete control over a situation. Knowing HTML guarantees that you will have complete control
over your Web pages.
Note
There are some Web design tools that don't generate HTML. For example, Macromedia
Flash is one such tool. It generates special animation files that must be embedded in HTML
so that they will work properly. Bottom line, Flash doesn't generate HTML code, and you
must know HTML to place Flash animations in your Web pages unless you use an additional
Web page design tool such as Macromedia Dreamweaver.
There is another reason you should know HTML. The Web is a community that is based largely on sharing. It
is common for a technique used to get a desired effect on a Web page to appear later on someone else's
page. I'll let you decide if "imitation is the highest form of flattery." But the reality is that you can learn to do
incredible things by studying the HTML code of Web pages that you like. Understand that I'm not endorsing
or recommending that you make a habit of borrowing ideas and HTML from others. In some cases it may be
illegal, and in others just not cool. What I am saying is that if you see a page you like, take a look at the
code and figure out how to make your own HTML magic.
Note
Similar to books and music, Web pages are considered intellectual property, and therefore
have rights associated with them. What this means is that an author of a Web page
automatically has rights over the original material in the Web page, which prevents others
from using the material without permission. To learn more about intellectual property law as
it applies to Web pages, please take a look at this Web site:
/>CAF/law/ip-primer.

It contains an article titled "An Intellectual Property Law Primer for
Multimedia and Web Developers," which does a great job of explaining the basics of
intellectual property law as it applies to the Web.
< previous page page_5 next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_5.html [06.10.2009 2:01:52]
page_6
< previous page page_6 next page >
Page 6
Inside a Web Page
The medical profession is generally quite good at diagnosing ailments and quickly recommending a course of
action for nursing us back to health. But when doctors reach a consensus that they have no clue what is
wrong, the scariest of all medical procedures, exploratory surgery, may be necessary. This is when a surgeon
opens you up just to have a look around. Although exploratory surgery can be something to dread, it also
can be a life saver. Likewise, making an incision right down the middle of a sample Web page can give new
life to your own project.
If you recall from the previous section, I wrote a hypothetical letter to a Web browser explaining how to lay
out a Web page for a salamander friend named Ernest. If you take a look at Figure 1-1, you'll see a real
Ernest the Salamander Web page that was created based upon this letter.
Figure 1-1.
The Ernest the Salamander Web page is a good example of how to structure a simple page using
HTML code.
Along with giving our friend Ernest a place on the Web, this page serves as a good example of how to write
clean, concise HTML code. Although I don't expect you to understand the code yet, you should at least be
able to pick out some of the elements on the page, such as the text. The following is the code for the Ernest
the Salamander Web page:
<html> <head> <title>Ernest the Salamander</title> </head> <body bgcolor="pink"> <table>
< previous page page_6 next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_6.html [06.10.2009 2:01:54]
page_7
< previous page page_7 next page >

Page 7
<tr> <td align="center"> <p> <img src="Ernest.jpg"> <br> <h2>Ernest the Salamander</h2> </p> </
td> <td> <p> <h3>Ernest's Vitals</h3> <ul> <li>Height - 0.375 inches</li> <li>Weight - 40 grams</li>
<li>Color - Reddish pink</li> <li>Sliminess - 6.5 (on a scale of 1 to 10)</li> </ul> </p> </td> </tr> </
table> <p> This is Ernest the salamander, my pet and close friend. Ernest and I have been friends for quite
some time. Ernest has been feeling a little puny lately, so I'd appreciate it if you could send him some e-mail
at <a href=mailto:></a> to cheer him up. </p> </body>
</html>
That may seem like a lot of code for such a simple Web page, but the amount has to do with how the code is
organized. The first thing you'll probably notice about this HTML code is all the angle brackets (<>). In
HTML, angle brackets enclose special codes, called
tags
, which indicate the structure and format of the
content on the page. HTML consists of many tags that do a variety of different formatting and organizational
tasks. The most important tag in a Web page is the <html> tag, which identifies the page as an HTML
document. Notice that this tag actually consists of two tags:
1. A
start tag
(<html>), which is located at the beginning of the page
2. An
end tag
(</html>), which, not surprisingly, is at the end of the page
All the content in an HTML document must appear within the two <html> tags.
Note
You hear the word
content
often in the Web design community. Content is simply the text
and images that are displayed on a Web page. You use HTML to mark up content so that it
is displayed in a certain way. For example, the words "Ernest the Salamander" are content,
and the HTML tags <h2> and </h2> are used to format those words in a certain font size.

< previous page page_7 next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_7.html [06.10.2009 2:01:54]
page_8
< previous page page_8 next page >
Page 8
The other two tags most relevant to the overall structure of the Web page are the <head> and <body>
tags. These tags are important because they describe the two major sections of all Web pages, the
head

and the
body
. The head of a Web page is placed near the beginning of the page, and describes general
properties of the page such as the title. The body appears below the head, and contains the content of the
Web page. Like the <html> tag, the <head> and <body> tags consist of both start and end tags that
enclose the content appearing in each section. An end tag is simply the start tag plus a forward slash that
immediately follows the opening angle bracket (<).
The Brains of a Web Page
In general, the head of a Web page contains information about the page that isn't displayed by a browser,
and the body contains everything that you see when you view the page. In other words, the head of a Web
page contains information about the page such as the page's title and keywords that are used to help search
engines find the page, but none of the page's content. The most important piece of information stored in the
head of a Web page is the
title
, which is identified by the <title> tag. In the salamander example page, the
third line of HTML code contains the title:
<title>Ernest the Salamander</title>
Although the title of a Web page isn't considered part of the page's content, it is important because it serves
to identify the page. When you bookmark a page or add it to your Favorites list, the browser uses the title of
the page to identify it. If you were to bookmark the Ernest the Salamander page, you would see the page
referred to as "Ernest the Salamander" in your Favorites list.

Jesse "The Body" Ventura and HTML
Along with sharing its name with the outspoken governor of Minnesota, the body of an HTML document
contains the content that is displayed by a Web browser. When you create a Web page later in this chapter,
you will spend the majority of your time in the body of the page because that's where all the content is.
Figure 1-2 shows a diagram of the basic structure of an HTML document, including the head, the body, and
the tags that identify each.
Note
You might have noticed that I use the terms Web page and HTML document
interchangeably. You may not think of a Web page as a document, but strictly speaking it is,
just as your resume is probably a Word document. I've tried hard to interchange the words
only when it makes sense to do so, but don't forget that Web page and HTML document
mean the same thing. In many ways "HTML document" is a more formal description of a
"Web page" because a Web page is a document that is coded in HTML.
< previous page page_8 next page >
file:///Z|/_==%CF%CE%C8%D1%CA==/%20h%20HTML%20&%20XML%20for%20Beginners/files/page_8.html [06.10.2009 2:01:54]