Theres no faster, easier way
to learn HTML and CSS
If you want to start creating Web pages right away, theres no better
way to get started than by learning HTML and CSS. w3schools has
perfected a straightforward tutorial approach that gives you what
you need to know in manageable lessons, liberally supported with
examples. Youll nd that tried-and-true format in this book, along
with a detailed reference section that you will use again and again.
You will learn:
" Basics of HTML tags and how to get started
" How to format text
" HTML links, lists, tables, styles, and images
" Layout, frames, and fonts
" The advantages of HTML 4.0
" HTML CSS styles
" Meta elements, URLs, scripts, and attributes
w3schools is a leading Web destination for learning key Web
technologies online. Founded in 1999, it receives more than
10 million unique visitors each month. w3schools tutorials are
required reading in more than 100 high schools and universities.
$29.99 US/$35.99 CAN
Programming Languages/
HTML, SGML
L
e
a
r
n
H
T
M
L
a
n
d
C
S
S
w
i
t
h
w
3
s
c
h
o
o
s
l
Learn HTML the quick and easy way,
from the experts at w3schools
Learn
HTML
and CSS
with w3schools
Create Web
pages
Format text
Apply styles
Add tables & lists
Format with CSS
Link pages
Build forms
Learn
HTML
and CSS
with w3schools
Hege Refsnes, St le Refsnes, Kai Jim Refsnes,
Jan Egil Refsnes with C. Michael Woodward
Wiley Publishing, Inc.
Learn HTML and CSS with w3schools
Published by
Wiley Publishing, Inc.
111 River Street
Hoboken, NJ 07030-5774
www.wiley.com
Copyright 2010 by Wiley Publishing, Inc., Indianapolis, Indiana
Published simultaneously in Canada
ISBN: 978-0-470-61195-1
LOC/CIP: 2010924594
Manufactured in the United States of America
10 9 8 7 6 5 4 3 2 1
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,
Permission Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-
6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions.
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 con-
tained 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 general information on our other products and services please contact our Customer Care Depart-
ment within the United States at (877) 762-2974, outside the United States at (317) 572-3993 or fax
(317) 572-4002.
Trademarks: Wiley, the Wiley logo, and related trade dress are trademarks or registered trademarks
of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not
be used without written permission. w3schools and the w3schools logo are registered trademarks of
w3schools. 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.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may
not be available in electronic books.
Library of Congress CIP Data is available from the publisher.
w3schools Authors/Editors
w3schools mission is to publish well-organized and easy-to-understand online
tutorials based on the W3C Web standards.
Hege Refsnes
Hege is a writer and editor for w3schools. She works to improve the usability and
accessibility of the Web.
Hege has been writing tutorials for w3schools since 1998.
St le Refsnes
St le has ten years of Internet development experience, developing all the Web-
based solutions for The Norwegian Handball Federation.
Publicité
St le has been writing tutorials for w3schools since 1999.
Kai Jim Refsnes
Kai Jim has been around computers since childhood, working with them since the
age of 14.
He has been writing tutorials for w3schools since completing a bachelors degree in
information technology in 2005.
Jan Egil Refsnes
Jan Egil is the president and founder of w3schools.
He is a senior system developer with a masters degree in information technology
and more than 30 years of computing experience.
Jani has supervised a large number of company-critical development projects
for oil companies like Amoco, British Petroleum, ELF, Halliburton, and Brown &
Root. He has also developed computer-based solutions for more than 20 govern-
mental institutions like The National Library, Norwegian High Schools, The State
Hospital, and many others.
Jani started w3schools in 1998.
Credits
Acquisitions Editor
Scott Meyers
Production
Abshier House
Copy Editor
Abshier House
Associate Director of Marketing
David Mayhew
Production Manager
Tim Tate
Proofreading and Indexing
Abshier House
Vice President and Executive
Group Publisher
Richard Swadley
Vice President and Executive
Publisher
Barry Pruett
Associate Publisher
Jim Minatel
Project Coordinator, Cover
Lynsey Stanford
Cover Designer
Michael Trent
TAblE of ConTEnTS
Section I: HTMl basic ..........................5
Chapter 1: HTML Getting Started .................................................................7
What You Need ....................................................................................................7
HTML Editors .....................................................................................................7
Create Your Own Test Web ...................................................................................8
.HTM or .HTML Extension? ...............................................................................8
Chapter 2: HTML Fundamentals ...................................................................9
HTML Headings ..................................................................................................9
HTML Paragraphs ..............................................................................................10
HTML Links ......................................................................................................11
HTML Images ....................................................................................................11
Chapter 3: HTML Elements.........................................................................13
HTML Elements ................................................................................................13
HTML Element Syntax ......................................................................................13
Nested Elements .................................................................................................14
Don't Forget the End Tag ...................................................................................15
Empty HTML Elements .....................................................................................16
Use Lowercase Tags .............................................................................................16
Chapter 4: HTML Attributes ........................................................................17
Standard HTML Attributes ................................................................................17
Defining Attribute Values ...................................................................................17
HTML Attributes Reference ...............................................................................18
Chapter 5: HTML Headings, Rules, & Comments .......................................19
HTML Headings ................................................................................................19
HTML Rules (Lines) ..........................................................................................20
HTML Comments .............................................................................................21
Viewing HTML Source Code .............................................................................22
HTML Tag reference ..........................................................................................22
V
Table of Contents
Chapter 6: HTML Paragraphs ......................................................................23
HTML Paragraphs ..............................................................................................23
HTML Line Breaks ............................................................................................24
HTML Output Tips ...........................................................................................24
Complete Tag reference .......................................................................................26
Chapter 7: HTML Text Formatting ..............................................................27
HTML Formatting Tags .....................................................................................27
Text Formatting .................................................................................................28
Preformatted Text ...............................................................................................29
"Computer Output" Tags ...................................................................................30
Address ...............................................................................................................31
Abbreviations and Acronyms...............................................................................32
Text Direction .....................................................................................................33
Quotations ..........................................................................................................34
Deleted and Inserted Text ...................................................................................35
Text Formatting Tags ..........................................................................................36
Chapter 8: HTML Styles ..............................................................................39
The HTML Style Attribute .................................................................................39
Deprecated Tags and Attributes ...........................................................................40
Common HTML Styles ......................................................................................41
Complete Tag reference .......................................................................................44
Chapter 9: HTML Links ..............................................................................45
HTML Links ......................................................................................................45
Open a Link in a New Browser Window.............................................................46
Hyperlinks, Anchors, and Links ..........................................................................47
HTML Link Syntax ............................................................................................47
Links on the Same Page ......................................................................................50
Creating a mail to: Link ......................................................................................52
Creating an Image Link ......................................................................................54
Chapter 10: HTML Images .........................................................................55
img Tag and the src Attribute ..............................................................................55
Insert Images from Different Locations ...............................................................57
Background Images ........................................................................................58
Aligning Images ..................................................................................................59
Floating Images ...................................................................................................61
VI
Table of Contents
Adjusting Image Sizes .........................................................................................62
alt Attribute ........................................................................................................63
Creating an Image Map ......................................................................................63
Chapter 11: HTML Tables ..........................................................................65
Creating HTML Tables.......................................................................................65
Table Borders ......................................................................................................68
Table with No Border .........................................................................................70
Headings in a Table .............................................................................................71
Table with a Caption ..........................................................................................74
Cells Spanning Multiple Columns ......................................................................75
Tags Inside a Table ..............................................................................................76
Cell Padding .......................................................................................................78
Cell Spacing ........................................................................................................79
Table Background Colors and Images .................................................................80
Cell Background Colors and Images ...................................................................82
Frame Attribute ..................................................................................................84
Publicité
Using frame and border to Control Table Borders ...............................................88
Chapter 12: HTML Lists .............................................................................90
Unordered Lists ..................................................................................................90
Ordered Lists ......................................................................................................93
Definition Lists ...................................................................................................95
Nested Lists ........................................................................................................96
Chapter 13: HTML Forms & Input ............................................................99
Forms .................................................................................................................99
Input Tag and Attributes ...................................................................................100
Action Attribute ................................................................................................106
Form Examples ................................................................................................106
Chapter 14: HTML Color .........................................................................111
Color Values .....................................................................................................111
16 Million Different Colors ..............................................................................112
Web Standard Color Names ..............................................................................113
Color Names Supported by All Browsers ..........................................................113
Web Safe Colors? ..............................................................................................114
Shades of Gray ..................................................................................................114
VII
Table of Contents
Chapter 15: HTML 4.01 Quick List..........................................................116
HTML Basic Document ...................................................................................116
Heading Elements .............................................................................................116
Text Elements ...................................................................................................116
Logical Styles ....................................................................................................117
Physical Styles ...................................................................................................117
Links, Anchors, and Image Elements ................................................................117
Unordered (Bulleted) List .................................................................................117
Ordered (Numbered) List .................................................................................117
Definition list ...................................................................................................118
Tables ...............................................................................................................118
Frames ..............................................................................................................118
Forms ...............................................................................................................118
Entities .............................................................................................................119
Other Elements .................................................................................................119
Section II: HTMl/CSS Advanced .....121
Chapter 16: HTML Layout .......................................................................123
HTML Layout Using Tables .............................................................................123
Chapter 17: HTML Frames .......................................................................125
frameset Tag ......................................................................................................125
frame Tag ..........................................................................................................127
Designing with Frames .....................................................................................128
Chapter 18: HTML Fonts .........................................................................136
font Tag ............................................................................................................136
Font Attributes .................................................................................................137
Controlling Fonts with Styles ............................................................................137
Chapter 19: Why Use HTML 4.0? ............................................................140
HTML 3.2 Was Very Wrong! ............................................................................140
Enter HTML 4.0 ..............................................................................................140
VIII
Table of Contents
Chapter 20: HTML CSS Styles ..................................................................142
Styles in HTML ................................................................................................142
How to Use Styles .............................................................................................144
Style Tags ..........................................................................................................146
Chapter 21: HTML Character Entities ......................................................147
Character Entities .............................................................................................147
Nonbreaking Space ...........................................................................................148
Commonly Used Character Entities ..................................................................149
Chapter 22: HTML Head & Meta Elements .............................................150
Head Element ...................................................................................................150
Meta Element ...................................................................................................153
Chapter 23: HTML Uniform Resource Locators .......................................157
Uniform Resource Locator (URL) ....................................................................157
URL Schemes ...................................................................................................158
Using Links.......................................................................................................159
Chapter 24: HTML Scripts .......................................................................160
Insert a Script into a Page ..................................................................................160
How to Handle Older Browsers ........................................................................161
noscript Tag ......................................................................................................162
Script Tags ........................................................................................................162
Chapter 25: HTML Standard Attributes ....................................................163
Core Attributes .................................................................................................163
Language Attributes ..........................................................................................163
Keyboard Attributes ..........................................................................................164
Chapter 26: HTML Event Attributes ........................................................165
Window Events.................................................................................................165
Form Element Events ........................................................................................166
Keyboard Events ...............................................................................................166
Mouse Events ....................................................................................................166
Chapter 27: HTML URL Encoding ..........................................................167
URL Encoding .................................................................................................167
Common URL Encoding Characters ................................................................168
IX
Table of Contents
Chapter 28: Turn Your PC Into a Web Server ............................................169
Your Windows PC as a Web Server ...................................................................169
Installing IIS on Windows Vista and Windows 7 ..............................................170
Installing IIS on Windows XP and Windows 2000 ...........................................171
Testing your Web ..............................................................................................171
Your Next Step: A Professional Web Server .......................................................172
Chapter 29: HTML and CSS Summary ....................................................173
Section III: Appendixes ...................175
appendix a: HTML 4.01 1.0 Reference ............................................177
appendix B: HTML Standard Attributes ...........................................185
appendix C: HTML Standard Event Attributes .................................187
appendix d: HTML Elements and Valid Doctypes ...........................189
appendix e: HTML Character Sets ...................................................193
appendix F: HTML ASCII Reference ................................................196
appendix G: HTML ISO-8859-1 Reference ......................................201
appendix h: Symbol Entities Reference .............................................207
appendix i: HTML URL Encoding Reference ...................................213
X
InTRoDuCTIon
Welcome to Learn HTML and CSS with w3schools. This book is for Web users learn-
ing to create their own Web pages using HTML, the standard tagging language for
the World Wide Web.
w3schools (www.w3schools.com) is one of the top Web destinations to learn HMTL and
many other key Web languages. w3schools tutorials are recommended reading in more
than 100 universities and high schools all over the world. This book is a great companion
to the HTML and CSS tutorials on the w3schools site, which were written by Hege Ref-
snes, St le Refsnes, Kai Jim Refsnes, and Jan Egil Refsnes.
Like the w3schools online tutorials, this book features a brief presentation of each topic,
trading lengthy explanations for abundant examples showcasing each key feature. This
book, as well as other w3schools books published by Wiley, features straightforward and
concise tutorials on each topic from which the beginning Web developer can easily learn.
All of the books content is derived from w3schools accurate, user-tested content used by
millions of learners every month.
HTMl
With HTML, you can create your own Web site. HTML is the core technology in which
all Web pages are written. This tutorial teaches you everything about HTML. HTML is
easy to learnyou will enjoy it.
What You Should Already Know
Before you continue, you should have a basic understanding of how to use a browser to
view pages on the Web.
Publicité
If you want to study these subjects first, please read The Internet For Dummies, 12th Edi-
tion, also from Wiley Publishing.
What is HTMl?
HTML is a language for describing Web pages.
8 HTML stands for HyperText Markup Language.
8 HTML is not a programming language, it is a markup language.
8 A markup language is a collection of markup tags.
8 HTML uses markup tags to describe Web pages.
1
learn HTMl and CSS with w3schools
What are Tags?
8 HTML markup tags are usually called HTML tags or just tags.
8 HTML tags are keywords surrounded by angle brackets like <html>.
8 HTML tags normally come in pairs, like <b> and </b>.
8 The first tag in a pair is the start tag; the second tag is the end tag.
8 Start and end tags are also called opening tags and closing tags.
HTMl Documents = Web Pages
8 HTML documents describe Web pages.
8 HTML documents contain HTML tags and plain text.
8 HTML documents are also called Web pages.
The purpose of a Web browser (like Internet Explorer or Mozilla Firefox) is to read
HTML documents and display them as Web pages. The browser does not display
the HTML tags, but uses the tags to interpret the content of the page. In your
browser, it looks like figure I.1.
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
In the previous code example,
8 The text between <html> and </html> describes the Web page.
8 The text between <body> and </body> is the visible page content.
8 The text between <h1> and </h1> is displayed as a heading.
8 The text between <p> and </p> is displayed as a paragraph.
figure I.1
2
Introduction
How to use This book
Throughout this book, you will see several icons:
try it yourself >>
The Try It Yourself icon indicates an opportunity for you to practice what youve just
learned. The code and examples under this icon come from examples on the w3schools
site, which allow you to make changes to the code and see the results immediately. You do
not have to type the code examples in this book; you can find them all on the w3schools
site.
The w3schools icon indicates that more information is available on the
w3schools site.
This icon indicates where you will find further information about a topic that
is covered more thoroughly elsewhere within the book.
n o T E
Notes call your attention to important information you need to know
before proceeding.
T I P
more productive.
Tips provide you with suggested shortcuts and information to help you be
This book is divided into three sections:
8 Section I: HTML Basic
8 Section II: HTML/CSS Advanced
8 Section III: Appendixes
If youre eager to improve your Web pages and to add some interactivity, jump right
in with HTML basics. Plenty of examples and opportunities to try things await, and
w3schools will be right there when you need them!
3
Section I
HTML Basic
Q
Q
Q
Q
Q
Q
Q
Q
Q
Q
Q
Q
Q
Q
Q
Chapter 1: HTML Getting Started
Chapter 2: HTML Fundamentals
Chapter 3: HTML Elements
Chapter 4: HTML Attributes
Chapter 5: HTML Headings, Rules, & Comments
Chapter 6: HTML Paragraphs
Chapter 7: HTML Text Formatting
Chapter 8: HTML Styles
Chapter 9: HTML Links
Chapter 10: HTML Images
Chapter 11: HTML Tables
Chapter 12: HTML Lists
Chapter 13: HTML Forms & Input
Chapter 14: HTML Colors
Chapter 15: HTML 4.01 Quick List
5
CHAPTER 1
HTML
GETTInG STARTEd
In This Chapter
Q What You Need
Q HTML Editors
Q Create Your Own Test Web
Q .HTM or .HTML Extension?
What You need
Its simple to get started writing HTML.
8 You dont need any tools to learn HTML with w3schools.
8 You dont need an HTML editor.
8 You dont need a Web server.
8 You dont need a Web site.
HTML Editors
In this tutorial, we use a plain text editor (like Notepad) to edit HTML. We believe
this is the best way to learn HTML.
Instead of writing plain text, however, professional Web developers often prefer using
HTML editors like FrontPage or Dreamweaver because they offer code-writing
shortcuts and helpful features.
7
Learn HTML and CSS with w3schools
Create Your Own Test Web
We suggest you experiment with everything you learn in this book by editing your
Web files with a text editor (like Notepad) and opening them in Internet Explorer
to view the results.
To create a test Web on your own computer, just copy the following three files from
the w3schools Web site to your desktop.
Publicité
http://www.w3schools.com/html/mainpage.htm
http://www.w3schools.com/html/page1.htm
http://www.w3schools.com/html/page2.htm
After you have copied the files, double-click on the file called mainpage.htm and see
your first Web site in action.
If your test Web contains HTML markup tags you have not learned, dont
panic.
You will learn all about markup tags in the next chapters.
.HTM or .HTML Extension?
When you save an HTML file, you can use either the .htm or the .html extension.
We use .htm in our examples. It is a habit from the past, when the software only
allowed three letters in file extensions.
In most cases, it is perfectly safe to use .html.
The w3schools Web site contains a wealth of helpful tools to help you
learn HTML, including hundreds of cut-and-paste examples, an online
text editor, an HTML Color Picker, quizzes to test your knowledge, and
an abundance of Web-building reference tables. We recommend you
refer to the Web site often as you work through this book. http://www.
w3schools.com/html
8
Chapter 2
htML
FundaMentaLs
In this Chapter
Q HTML Headings
Q HTML Paragraphs
Q HTML Links
Q HTML Images
htML headings
HTML headings are defined with the <h1> to <h6> tags. The lower the number,
the larger the heading size, as shown in Figure 2.1.
Dont worry if the examples use tags you have not learned. You will learn
more about tags in the next chapters.
Try it yourself >>
<html>
<body>
<h1>This is Heading 1</h1>
<h2>Heading 2 is Smaller</h2>
<h3>Heading 3 is Smaller Still</h3>
</body>
</html>
(continued)
9
Learn htML and Css with w3schools
(continued)
Figure 2.1
htML paragraphs
HTML paragraphs are defined with the <p> tag. Most browsers automatically put
a line break and space after a </p> tag, as shown in Figure 2.2.
Try it yourself >>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Figure 2.2
10
Chapter 2: htML Fundamentals
htML Links
HTML links are defined with the <a> tag, as shown in Figure 2.3.
Try it yourself >>
<html>
<body>
<a href="http://www.w3schools.com">This is a link to the
w3schools Web site.</a>
</body>
</html>
Figure 2.3
The URL address is an attribute of the link element. You will learn about
attributes in Chapter 4, HTML Attributes.
htML Images
HTML images are defined with the <img> tag. It tells the browser where to find the
image file and what size to display it, among other things. The results of this code
example are shown in Figure 2.4.
Try it yourself >>
<html>
<body>
<img src="w3schools.jpg" width="104" height="142" />
</body>
</html>
11
Learn htML and Css with w3schools
Figure 2.4
The source name and size of the image are attributes of the image element.
You will learn about attributes in Chapter 4, "HTML Attributes."
12
Chapter 3
htML eLeMents
In this Chapter
Q HTML Elements
Q HTML Element Syntax
Q Nested Elements
Q Dont Forget the End Tag
Q Empty HTML Elements
Q Use Lowercase Tags
htML elements
HTML documents are defined by HTML elements. An HTML element is every-
thing between the start tag and the end tag. The start tag is often called the opening
tag. The end tag is often called the closing tag.
OPENING TAG
ELEMENT CONTENT
CLOSING TAG
<p>
This is a paragraph.
<a href=default.htm >
This is a link.
</p>
</a>
<br />
htML element syntax
HTML elements follow a certain format regardless of how the element is used.
8 An HTML element starts with a start tag/opening tag.
8 An HTML element ends with an end tag/closing tag.
8 The element content is everything between the start and the end tag.
8 Some HTML elements have empty content.
8 Empty elements are closed in the start tag.
8 Most HTML elements can have attributes.
You will learn more about attributes in Chapter 4, HTML Attributes.
13
Learn htML and Css with w3schools
nested elements
Most HTML elements can be nested (contain or be contained within other HTML
elements). HTML documents consist of nested HTML...