1

Психотерапия: Учебник для вузов. Питер Бурлачук Л. Ф., Кочарян А. С, Жидко М. Е. Year: 2007 Language: russian File: PDF, 4.39 MB Your tags: 0 / 0

2

Београд без сна Beograd bez sna Laguna Владимир Ђурић Ђура Vladimir Đurić Đura Year: 2017 Language: serbian File: PDF, 5.40 MB Your tags: 0 / 0

WEB
PROGRAMMING

John Dean, PhD 
Associate Professor of Computer Science
Park University
Parkville, Missouri

with HTML5, CSS, 
and JavaScript 



World Headquarters
Jones & Bartlett Learning
5 Wall Street
Burlington, MA 01803
978-443-5000
info@jblearning.com
www.jblearning.com

Jones & Bartlett Learning books and products are available through most bookstores and online booksellers. To contact Jones & Bartlett 
Learning directly, call 800-832-0034, fax 978-443-8000, or visit our website, www.jblearning.com.

Substantial discounts on bulk quantities of Jones & Bartlett Learning publications are available to corporations,  professional 
 associations, and other qualified organizations. For details and specific discount information, contact the special sales 
 department at Jones & Bartlett Learning via the above contact information or send an email to specialsales@jblearning.com.

Copyright © 2019 by Jones & Bartlett Learning, LLC, an Ascend Learning Company

All rights reserved. No part of the material protected by this copyright may be reproduced or utilized in any form, electronic or mechanical, 
including photocopying, recording, or by any information storage and retrieval system, without written permission from the copyright owner.

The content, statements, views, and opinions herein are the sole expression of the respective authors and not that of Jones & Bartlett Learning, 
LLC. Reference herein to any specific commercial product, process, or service by trade name, trademark, manufacturer, or otherwise does not 
constitute or imply its endorsement or recommendation by Jones & Bartlett Learning, LLC and such reference shall not be used for advertising 
or product endorsement purposes. All trademarks displayed are the trademarks of the parties noted herein. Web Programming with HTML5, 
CSS, and JavaScript is an independent publication and has not been authorized, sponsored, or otherwise approved by the owners of the 
trademarks or service marks referenced in this produ; ct.

There may be images in this book that feature models; these models do not necessarily endorse, represent, or participate in the activities 
represented in the images. Any screenshots in this product are for educational and instructive purposes only. Any individuals and scenarios 
featured in the case studies throughout this product may be real or fictitious, but are used for instructional purposes only.

09369-8

Production Credits
VP, Product Management: David D. Cella
Director of Product Management: Matthew Kane
Product Manager: Laura Pagluica
Product Assistant: Mary Menzemer
Production Editor: Vanessa Richards
Director of Marketing: Andrea DeFronzo
Product Fulfillment Manager: Wendy Kilborn
Composition: codeMantra U.S. LLC

Cover Design: Kristin E. Parker
Rights & Media Specialist: Thais Miller
Media Development Editor: Shannon Sheehan
Cover Image (Title Page, Chapter Opener): Blue abstract: 
© StationaryTraveller/Getty Images; Web: © Supanat Chantra/EyeEm/
Getty Images
Printing and Binding: LSC Communications
Cover Printing: LSC Communications

Library of Congress Cataloging-in-Publication Data
Names: Dean, John, 1962- author.
Title: Web programming with HTML5, CSS, and JavaScript / John Dean, PhD,
 associate professor of computer science, Park University-Parkville Campus,
 Department of Computer Science and Information Systems.
Description: Burlington, Massachusetts: Jones & Bartlett Learning, 2017. |
 Includes bibliographical references and index.
Identifiers: LCCN 2017023256 | ISBN 9781284091793 (pbk.)
Subjects: LCSH: Internet programming. | HTML (Document markup language) |
 Cascading style sheets. | JavaScript (Computer program language)
Classification: LCC QA76.625 .D43 2017 | DDC 006.7/4—dc23 
LC record available at https://lccn.loc.gov/2017023256

6048

Printed in the United States of America
22  21  20  19  18     10  9  8  7  6  5  4  3  2  1

mailto:info@jblearning.com
http://www.jblearning.com
http://www.jblearning.com
mailto:specialsales@jblearning.com
https://lccn.loc.gov/2017023256


DEDICATION
To my father, Ray Dean.



iv

1 Introduction to Web Programming 1

2 Coding Standards, Block Elements, Text Elements, 
and Character References 33

3 Cascading Style Sheets (CSS) 73

4 Organizing a Page’s Content with Lists, Figures, and 
Various Organizational Elements 131

5 Tables and CSS Layout 167

6 Links and Images 217

7 Image Manipulations, Audio, and Video 269

8 Introduction to JavaScript: Functions, DOM, Forms, 
and Event Handlers 311

9 Additional JavaScript Basics: window Object, if 
Statement, Strings, Numbers, and Input Validation 351

10 Loops, Additional Controls, Manipulating CSS with  
JavaScript 425

11 Object-Oriented Programming and Arrays 499

12 Canvas 569

Appendix A HTML5 and CSS Coding-Style Conventions 633

Appendix B JavaScript Coding-Style Conventions 645

Review Question Solutions 655

Index 671

BRIEF TABLE OF CONTENTS



v

TABLE OF CONTENTS 
Preface  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .xi

Acknowledgments   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  xviii

About the Author  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . xx

1 Introduction to Web Programming 1
1 .1 Introduction   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 2
1 .2 Creating a Website .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 3
1 .3 Web Page Example  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 5
1 .4 HTML Tags   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 7
1 .5 Structural Elements   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 8
1 .6 title Element  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 10
1 .7 meta Element  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 11
1 .8 HTML Attributes  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 11
1 .9 body Elements: hr, p, br, div  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 13
1 .10 Cascading Style Sheets Preview  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 15
1 .11 History of HTML  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 16
1 .12 HTML Governing Bodies  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 18
1 .13 Differences Between Old HTML and HTML5   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 19
1 .14 How to Check Your HTML Code  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 20
1 .15 Case Study: History of Electric Power  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 23

2 Coding Standards, Block Elements, Text Elements, 
and  Character References 33
2 .1 Introduction   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 34
2 .2 HTML Coding Conventions  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 35
2 .3 Comments  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 36
2 .4 HTML Elements Should Describe Web Page Content Accurately   .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 37
2 .5 Content Model Categories  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 38
2 .6 Block Elements  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 40
2 .7 blockquote Element  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 41
2 .8 Whitespace Collapsing  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 44
2 .9 pre Element  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 46
2 .10 Phrasing Elements  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 46
2 .11 Editing Elements   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 47
2 .12 q and cite Elements   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 48



vi TABLE OF CONTENTS 

2 .13 dfn, abbr, and time Elements  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 49
2 .14 Code-Related Elements  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 52
2 .15 br and wbr Elements   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 55
2 .16 sub, sup, s, mark, and small Elements   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 56
2 .17 strong, em, b, u, and i Elements  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 58
2 .18 span Element  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 59
2 .19 Character References  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 60
2 .20 Web Page with Character References and Phrasing Elements   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 63
2 .21 Case Study: A Local Hydroelectric Power Plant  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 66

3 Cascading Style Sheets (CSS) 73
3 .1 Introduction   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 74
3 .2 CSS Overview  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 74
3 .3 CSS Rules   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 75
3 .4 Example with Type Selectors and the Universal Selector  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 76
3 .5 CSS Syntax and Style  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 77
3 .6 Class Selectors  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 79
3 .7 ID Selectors  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 83
3 .8 span and div Elements  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 84
3 .9 Cascading  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 86
3 .10 style Attribute, style Container   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 87
3 .11 External CSS Files  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 88
3 .12 CSS Properties  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 91
3 .13 Color Properties  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 92
3 .14 RGB Values for Color  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 93
3 .15 Opacity Values for Color  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 96
3 .16 HSL and HSLA Values for Color   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 98
3 .17 Font Properties  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 100
3 .18 line-height Property   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 107
3 .19 Text Properties  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 108
3 .20 Border Properties  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 110
3 .21 Element Box, padding Property, margin Property  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 113
3 .22 Case Study: Description of a Small City’s Core Area  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 118

4 Organizing a Page’s Content with Lists, Figures, and  
Various Organizational Elements 131
4 .1 Introduction   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 132
4 .2 Unordered Lists   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 132
4 .3 Descendant Selectors   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 137
4 .4 Ordered Lists   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 138
4 .5 Figures  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 141
4 .6 Organizational Elements  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 145
4 .7 section, article, and aside Elements  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 147
4 .8 nav and a Elements  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 150



viiTABLE OF CONTENTS 

4 .9 header and footer Elements   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 150
4 .10 Child Selectors  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 152
4 .11 CSS Inheritance   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 154
4 .12 Case Study: Microgrid Possibilities in a Small City  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 155

5 Tables and CSS Layout 167
5 .1 Introduction   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 168
5 .2 Table Elements  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 170
5 .3 Formatting a Data Table: Borders, Alignment, and Padding  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 172
5 .4 CSS Structural Pseudo-Class Selectors   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 174
5 .5 thead and tbody Elements  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 178
5 .6 Cell Spanning  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 182
5 .7 Web Accessibility  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 185
5 .8 CSS display Property with Table Values  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 188
5 .9 Absolute Positioning with CSS Position Properties  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 194
5 .10 Relative Positioning  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 199
5 .11 Case Study: A Downtown Store’s Electrical Generation and Consumption  .  .  .  .  .  .  . 203

6 Links and Images 217
6 .1 Introduction   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 218
6 .2 a Element  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 218
6 .3 Relative URLs   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 221
6 .4 index.html File  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 224
6 .5 Web Design   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 225
6 .6 Navigation Within a Web Page  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 228
6 .7 CSS for Links  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 235
6 .8 a Element Additional Details   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 237
6 .9 Bitmap Image Formats: GIF, JPEG, PNG  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 239
6 .10 img Element  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 244
6 .11 Vector Graphics   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 245
6 .12 Responsive Images  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 250
6 .13 Case Study: Local Energy and Home Page with Website Navigation  .  .  .  .  .  .  .  .  .  .  .  . 255

7 Image Manipulations, Audio, and Video 269
7 .1 Introduction   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 270
7 .2 Positioning Images  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 270
7 .3 Shortcut Icon  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 272
7 .4 iframe Element   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 274
7 .5 CSS Image Sprites  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 279
7 .6 Audio  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 282
7 .7 Background Images  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 286
7 .8 Web Fonts  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 290
7 .9 Video  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 291
7 .10 Centering Content Within the Viewport, Color Gradients  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 294



viii TABLE OF CONTENTS 

7 .11 Case Study: Using an Image Map for a Small City’s Core Area and Website 
Navigation with a Generic Home Page  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 297

8 Introduction to JavaScript: Functions, DOM, Forms, and 
Event Handlers 311
8 .1 Introduction   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 312
8 .2 History of JavaScript   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 313
8 .3 Hello World Web Page   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 314
8 .4 Buttons   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 315
8 .5 Functions  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 316
8 .6 Variables   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 318
8 .7 Identifiers   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 319
8 .8 Assignment Statements and Objects  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 319
8 .9 Document Object Model   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 322
8 .10 Forms and How They’re Processed: Client-Side Versus Server-Side  .  .  .  .  .  .  .  .  .  .  .  .  . 323
8 .11 form Element  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 326
8 .12 Controls  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 327
8 .13 Text Control   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 329
8 .14 Email Address Generator Web Page  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 330
8 .15 Accessing a Form’s Control Values  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 332
8 .16 reset and focus Methods  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 335
8 .17 Comments and Coding Conventions  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 335
8 .18 Event-Handler Attributes  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 338
8 .19 onchange, onmouseover, onmouseout   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 339
8 .20 Using noscript to Accommodate Disabled JavaScript  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 342

9 Additional JavaScript Basics: window Object, if Statement, 
Strings, Numbers, and Input Validation 351
9 .1 Introduction   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 352
9 .2 window Object  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 353
9 .3 alert and confirm Methods  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 358
9 .4 if Statement: if by itself  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 361
9 .5 Game Night Web Page  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 363
9 .6 prompt Method  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 365
9 .7 Game Night Web Page Revisited  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 366
9 .8 if Statement: else and else if Clauses   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 367
9 .9 Strings  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 369
9 .10 Word Ordering Web Page  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 375
9 .11 More String Details   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 379
9 .12 Arithmetic Operators  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 381
9 .13 Math Object Methods  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 387
9 .14 Parsing Numbers: parseInt, parseFloat   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 388
9 .15 Water Balloons Web Page  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 389
9 .16 Constraint Validation for Form Controls  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 396



ixTABLE OF CONTENTS 

9 .17 Constraint Validation Using the Number Control’s Attributes  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 397
9 .18 Constraint Validation Using CSS Pseudo-Classes  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 400
9 .19 Comparison Operators and Logical Operators  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 401
9 .20 JavaScript for the Improved Water Balloons Web Page  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 406
9 .21 Case Study: Dynamic Positioning and Collector Performance Web Page  .  .  .  .  .  .  .  . 410

10 Loops, Additional Controls, Manipulating CSS with 
JavaScript 425
10 .1 Introduction   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 426
10 .2 while Loop  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 426
10 .3 External JavaScript Files   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 429
10 .4 Compound Interest Web Page  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 430
10 .5 do Loop  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 437
10 .6 Radio Buttons  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 442
10 .7 Checkboxes   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 446
10 .8 Job Skills Web Page  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 449
10 .9 for Loop  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 452
10 .10 fieldset and legend Elements  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 455
10 .11 Manipulating CSS with JavaScript   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 456
10 .12 Using z-index to Stack Elements on Top of Each Other  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 461
10 .13 Textarea Controls  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 466
10 .14 Dormitory Blog Web Page   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 469
10 .15 Pull-Down Menus  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 476
10 .16 List Boxes   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 479
10 .17 Case Study: Collector Performance Details and Nonredundant  

Website Navigation  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 483

11 Object-Oriented Programming and Arrays 499
11 .1 Introduction   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 500
11 .2 Object-Oriented Programming Overview  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 500
11 .3 Classes, Constructors, Properties, new Operator, Methods  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 502
11 .4 Point Tracker Web Page   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 505
11 .5 static Methods  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 509
11 .6 Event Handlers  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 513
11 .7 Primitive Values Versus Objects   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 517
11 .8 Using addEventListener to Add Event Listeners   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 518
11 .9 Using Prototypes to Emulate a Class  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 520
11 .10 Inheritance Between Classes  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 524
11 .11 Pet Registry Web Page   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 527
11 .12 switch Statement  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 536
11 .13 Arrays  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 538
11 .14 Arrays of Objects  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 542
11 .15 Book Club Web Page  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 545
11 .16  Case Study: Downtown Properties Data Processing  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 554



x TABLE OF CONTENTS 

12 Canvas 569
12 .1 Introduction   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 570
12 .2 Canvas Syntax Basics  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 571
12 .3 Rectangles Web Page  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 572
12 .4 Drawing Text with fillText and strokeText   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 577
12 .5 Formatting Text   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 579
12 .6 Drawing Arcs and Circles  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 582
12 .7 Drawing Lines and Paths  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 585
12 .8 Umbrella Web Page  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 590
12 .9 Face Web Page   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 595
12 .10 Using Canvas for Transformations .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 597
12 .11 Moving Face Web Page  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 605
12 .12 Case Study: Solar Shadowing Dynamics   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 610

Appendix A HTML5 and CSS Coding-Style Conventions   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 633

Appendix B JavaScript Coding-Style Conventions  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 645

Review Question Solutions   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 655

Index  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 671



xi

Since HTML’s introduction in 1993, web-programming technologies have been in flux, with web 
programmers using different versions of HTML for different browsers. The constant change made 
it difficult for authors to write quality textbooks about the subject. Consequently, most of the 
books were trade books, not textbooks. With HTML5’s approval as a “stable recommendation” in 
2014, web programmers and browsers appear to have embraced it fully. With the huge demand for 
web programmers in the workforce, there has been a significant demand for web-programming 
courses for quite a while. Now that web programming has coalesced around HTML5, there is a 
need for better textbooks about web programming.

Web programming is a large field, with different types of web programming implemented by 
different tools. All the tools work with the core language, HTML, so almost all the web- programming 
books describe HTML to some extent. This textbook covers HTML5, CSS, and JavaScript, all in 
depth. Those three technologies are known to be the pillars of client-side web programming. With 
client-side web programming, all web page calculations are performed on end users’ computers 
(the client computers). There’s also server-side web programming, which uses technologies such 
as ASP.NET, JSP, and PHP. With server-side web programming, most of the web page calculations 
are performed on the computers that host the web pages permanently (the server computers). 
Many books attempt to cover one of the server-side technologies; in doing so, they necessarily have 
to cover some HTML and CSS as well, because all web pages need those technologies to display 
results on the client computer. Typically, such books try to cram in too much for beginning web 
programmers to digest. Many books go to the opposite extreme and cover only HTML and CSS, 
leaving out JavaScript, which is essential for calculations. This book hits a sweet spot—covering 
all three client-side technologies in depth (HTML, CSS, and JavaScript), with no dependence on 
server-side technologies. After finishing this book, you should be prepared to write nicely format-
ted, interactive web pages that are able to perform calculations and show the results. And down the 
road if you decide that you want to write server-side web pages, your solid client-side foundation 
should properly prepare you to go forth and learn a server-side technology(ies).

Target Audience
Unlike many client-side web programming books, this book presents not only HTML and CSS, 
but also JavaScript, the document object model (DOM), and canvas. With that programming 
depth, the book works well for sophomore and junior Computer Science majors who have pro-
gramming experience. With the first seven chapters devoted to HTML and CSS and a gentle intro-
duction to programming concepts in the JavaScript chapters, the textbook can also work well for 
non-Computer Science majors with no prerequisite programming knowledge.

PREFACE

http://ASP.NET


xii PREFACE

In addition to targeting students in a college setting, this textbook targets high school stu-
dents with or without programming experience. Most likely, in a high school setting, this book’s 
content would be covered in a year-long course. Finally, this book targets industry practitioners 
who want to learn client-side web programming. Industry practitioners should read the entire 
textbook at a pace determined on a case-by-case basis.

Approach
Some web-programming books try to present exhaustive content without trying to explain it fully. 
That can lead to readers with poor understanding and weak retention of the content. In this book, 
we carefully consider the proper amount of content to present in each chapter, so that there is 
ample opportunity for explanations and learning. We try to engage readers by using a fun, con-
versational tone. Readers who are engaged are more likely to retain what they’re reading. Readers 
who are having fun are more likely to dig deep and yearn to learn more.

Although we take the time to carefully explain HTML, CSS, and JavaScript syntax, we real-
ize how important it is to develop the creativity and problem-solving skills necessary to become 
adept at web programming. With that in mind, we present the content in a manner that supports 
such development. Several of the leading web-programming textbooks embed much of their con-
tent within tutorials. Each tutorial provides step-by-step instructions that explain how to paste 
together code fragments to form a web page. That technique helps readers feel good about pro-
ducing results, but when that’s all there is, not much actual learning takes place. Because there’s 
not much of a framework for organizing the content, that presentation strategy makes it difficult 
for readers to integrate new material into what they already know and to remember what they’ve 
learned. On the other hand, this book presents content with an optimal organization for learning. 
Within each chapter, we explain concepts, present problems, and solve those problems with short 
code fragments and also complete web pages.

At the end of each chapter, we present optional case study sections that build upon each other 
to create an increasingly sophisticated website. In the case studies, we provide guidance and a 
discussion of design decisions, rather than step-by-step instructions. This forces readers to apply 
what they’ve learned earlier in the chapter, and it gives readers a feel for the real-world design 
process. Perhaps most importantly, the case studies provide practice for readers in fostering their 
creativity and problem-solving skills.

Proper Flow
In conjunction with our careful consideration of what’s covered in each chapter, we carefully 
consider the flow between content topics. We make sure that the order in which we present 
content and the transitions between concepts follow a natural progression that is conducive 
to learning and retention. For example, in the first three chapters, we present basic HTML 
concepts and then a thorough, but not exhaustive, explanation of CSS. This gives the reader 
an opportunity to appreciate the richness of HTML and CSS without feeling overwhelmed 
by details.



xiiiPREFACE

Other web programming textbooks present form controls (e.g., text boxes, pull-down 
menus, and buttons) without showing how to process the controls’ input data. Without pro-
cessing, the forms are impractical and readers are left to wonder, “What’s the point?” The 
reason they don’t show how to process the controls’ input data is because such processing 
requires JavaScript, and they don’t cover JavaScript until later or don’t cover it at all. The solu-
tion is a no-brainer—cover JavaScript before form controls. That’s what we do in this book, 
so when we introduce form controls, we’re able to use JavaScript to process the input data. 
Processing the input data means we can calculate and display results, and that leads to more 
satisfied readers.

Real-World Context
More often than not, today’s classroom students and industry practitioners prefer to learn with a 
hands-on, real-world approach. The following subsections illustrate that approach.

Complete Web Page Examples
Different books have different strategies for using code to illustrate new concepts. Most books 
provide short code fragments to illustrate new concepts, and that can be very helpful. But when 
books rely almost exclusively on code fragments and provide few complete web pages, readers 
tend to complain about their inability to run the code and their inability to get a feel for the big 
picture. In this book, we strike an appropriate balance between short code fragments and com-
plete web pages so readers are able to grasp new concepts quickly (with short code fragments) and 
apply those concepts in the context of complete web pages.

Industry-Standard Web-Programming Software
The term “HTML5 standard” is a loose term in that it can refer to any of the different HTML5 
versions. At the time of this book’s writing, HTML 5.1 was the latest official “recommendation,” 
so we present syntax and semantics from HTML 5.1.1 For CSS and JavaScript, we present syntax 
and semantics for their latest versions as well.

In choosing to describe the latest versions of client-side web-programming software, we are 
cognizant of the risk of presenting content that industry hasn’t caught up with yet. Thus, we pres-
ent constructs only if they are supported by at least two of the three most popular web browsers—
Google Chrome, Mozilla Firefox, and Microsoft Edge. But even more importantly, we present 
constructs only if they are part of the standards put forth by the World Wide Web Consortium 
(W3C), the Web Hypertext Application Technology Working Group (WHATWG), and Ecma 
International. The W3C and the WHATWG are the standards organizations for HTML5, CSS, 
and the DOM. Ecma International is the standards organization for JavaScript.

1 At the time of this book’s writing, HTML 5.2 was a “working draft.” It’s a superset of HTML 5.1, and it 
doesn’t appear to add all that many new constructs.



xiv PREFACE

Industry-Standard Coding-Style Conventions
We follow Google’s recommended coding-style conventions consistently throughout the book. In 
the book’s appendices, we provide complete references for the book’s HTML, CSS, and JavaScript 
coding-style conventions, which are based on Google’s coding conventions. To supplement those 
references and to emphasize how important good style is, we include coding-style tips whenever 
we use new coding conventions for code that we’re explaining.

Tutorials for Software Tools
We do not tie the textbook to any particular software tools. To develop and publish web pages, 
readers are free to use any tools they like. But to make learning easier, on the book’s website, we 
provide tutorials for several popular tools: Visual Studio integrated development environment 
(IDE) for entering and testing web page code, WinSCP for uploading web pages to a web server, 
and Chrome’s debugger for JavaScript debugging. Please visit go.jblearning.com/webprogramming 
to access these tutorials.

Homework Problems
At the end of each chapter, we provide three types of homework problems—review questions, 
exercises, and projects. Review questions serve as a review of what was covered earlier in the 
chapter. Most review questions use a short-answer format, but there are multiple-choice, true/
false, and fill-in-the-blank questions as well. You can find solutions for the review questions at the 
end of the book.

Exercises are a bit more challenging than the review questions. They require readers to do 
more than just recall what they’ve read; they require readers to apply what they’ve learned. The 
exercises use short-answer, debugging, and write-a-code-fragment formats. Qualified instructors 
can access the exercise solutions by visiting go.jblearning.com/webprogramming.

Projects consist of problem descriptions whose solutions are complete web pages. Like the 
exercises, the projects require students to apply what they’ve learned in the chapter. But addition-
ally, they require readers to employ design, creativity, and problem-solving skills in order to go 
from a description to a complete web page. Qualified instructors can access the project solutions 
by visiting go.jblearning.com/webprogramming.

Organization
There are three conceptual components of a web page: content, presentation, and behavior. We 
introduce content code, in the form of HTML elements, throughout the book, but the majority 
of such content code appears in the first 60% of the book. We introduce most of the presentation 
code, in the form of CSS, near the beginning of the book, but we sprinkle in additional CSS code 
as necessary later on. We introduce the behavior code, in the form of JavaScript, in the last 40% 
of the book. Throughout the entire book, while describing content, presentation, and behavior 

http://go.jblearning.com/webprogramming
http://go.jblearning.com/webprogramming
http://go.jblearning.com/webprogramming


xvPREFACE

details, we put those details into practice by building web pages that nurture the development of 
problem-solving skills and web-design skills.

We start with two chapters that are introductory in nature. They discuss general concepts 
involving the Web and basic HTML elements that enable readers to get a taste of what’s possible. 
The book then devotes a whole chapter to CSS. Although the chapter describes CSS extensively, it 
does not attempt to cover CSS exhaustively. Later chapters introduce additional CSS details when 
appropriate. After the CSS chapter, the next four chapters present HTML element details and 
web-programming design principles. The last five chapters describe JavaScript basics, plus some 
advanced JavaScript constructs that unleash the power of dynamic HTML.

Chapters 1 and 2
In Chapters 1 and 2, we first explain basic concepts needed for building a website. For example, we 
describe text editors, web-hosting services, and browsers. We then narrow the focus and describe 
the basic components of a web page: HTML elements, tags, and attributes. We put those compo-
nents into practice by examining a simple, but complete, web page. Chapter 1 concludes with a 
brief history of HTML.

Chapter 2 continues the theme of introducing material that is somewhat general in nature. 
For example, we describe the W3C, coding conventions, and comments. After that, the chapter 
provides details on quite a few HTML elements: block elements, editing elements, phrasing ele-
ments, and so on. The chapter concludes with a discussion of character references.

Chapter 3
In Chapter 3, we first present an overview of CSS concepts such as syntax, the different types of 
CSS rules, the different places where CSS rules can be applied, and how cascading determines the 
rules’ priorities. The rest of the chapter provides details about many CSS properties and values.

Chapters 4 and 5
In these two chapters, we return to HTML elements, with an in-depth look at elements in charge 
of organizing a page’s content (Chapter 4) and a comprehensive treatment of data tables and 
 layout tables (Chapter 5). Chapter 4 focuses on lists, figures, and section-oriented elements, 
and it weaves in a few CSS details, such as descendent and child selectors, that were not part 
of Chapter 3’s CSS coverage. Chapter 5 focuses on the table element and all of its associated 
elements: caption, tr, td, and so on. As an alternative to using the table element, Chapter 5 
describes how to achieve table layout with CSS. Specifically, Chapter 5 describes CSS table values, 
absolute  positioning, and relative positioning.

Chapters 6 and 7
In Chapters 6 and 7, we present what might be considered the seminal features of HTML—
links and the ability to embed nontext objects (images, audio, and video) into a web page. 



xvi PREFACE

Chapter 6 describes how to implement a link and then discusses navigation techniques that 
rely on links. Chapter 6 then describes how to navigate to pictures, and presents various 
details about the img element, bitmap image formats, the SVG image format, and vector 
graphics.

Chapter 7 continues the discussion of images by describing how to manipulate them with 
positioning, image sprites, image maps, and so on. Chapter 7 then moves on to a discussion of 
other embedded objects—audio files and video files.

Chapters 8 and 9
In Chapters 8 and 9, we present the basics of JavaScript. In building a JavaScript web page, 
there’s a lot to learn. Some books present a huge amount of syntax up front, leaving readers 
feeling overwhelmed and unable to create JavaScript web pages on their own. Other books 
introduce a little JavaScript syntax and illustrate what’s going on with small, gimmicky web 
pages that do not comport with standard industry practices. This book strikes a balance 
between those two strategies. In Chapters 8 and 9, we present enough syntax to build stan-
dard-practice JavaScript web pages, but not so much syntax that readers feel overwhelmed. 
Here’s a sample of the key JavaScript constructs introduced in Chapters 8 and 9: functions, 
variables, the Document Object Model (DOM), event handlers, if statement, strings, oper-
ators, and input validation.

In addition to introducing JavaScript constructs, we introduce HTML elements for forms, 
buttons, and text boxes. Those elements implement input/output functionality, and they enable 
the web pages to be more “real world.”

Chapters 10, 11, and 12
In Chapters 10 through 12, we introduce JavaScript constructs that are slightly more advanced. 
Chapter 10 presents while loops and for loops and puts them into practice by looping through 
form controls like radio buttons, checkboxes, and pull-down menu selections. These form con-
trols could have been introduced earlier with the button and text box form controls, but they fit 
better in Chapter 10, when loops are introduced. Toward the end of Chapter 10, we describe how 
to manipulate CSS by using JavaScript and various properties in the DOM.

In Chapter 11, we introduce the concept of object-oriented programming (OOP) and describe 
how to work with objects in JavaScript. This includes how to implement classes with constructors, 
properties, and methods; how to instantiate objects; and how to implement inheritance between 
classes. In JavaScript, arrays are objects, so we wait until after the introduction of OOP to discuss 
arrays. In our description of arrays, we explain how to instantiate them, how to loop through an 
array’s elements, and how to use an array’s methods.

In Chapter 12, we introduce canvas, which is considered to be one of the most important 
new features of HTML5. We describe how to use the canvas element and JavaScript to draw 
rectangles, circles, arcs, lines, paths, and text, all within a graphical “canvas” drawing area. After 
discussing how to draw those graphics objects, the chapter describes how to translate, rotate, 
and scale them.



xviiPREFACE

Student Resources
At the book’s website, go.jblearning.com/webprogramming, students can view and download 
these resources: 

 ▸ Student-version lecture slides in PowerPoint format without hidden notes. 
• The student-version slides are identical to the teacher-version slides except that the 

 hidden notes and hidden slides are omitted.
• Omitting the hidden slides incentivizes students to attend class, where the teacher 

 provides additional content.
 ▸ Source code and resource files for all the textbook example web pages
 ▸ Tutorials for web-developer software tools

Instructor Resources
At the book’s website, go.jblearning.com/webprogramming, instructors can view and download 
these resources:

 ▸ Teacher-version lecture slides in PowerPoint format with hidden notes
• Hidden notes provide comments that supplement the displayed text in the lecture slides.
• For example, if the displayed text asks a question, the hidden notes provide the answer.

 ▸ Exercise solutions
 ▸ Project solutions
 ▸ Test bank questions
 ▸ Additional projects

http://go.jblearning.com/webprogramming
http://go.jblearning.com/webprogramming


xviii

Writing this textbook has been a labor of love, albeit an arduous 3-years-plus labor of love.  
I am indebted to my team at Jones & Bartlett Learning for their generous commitment to this 
project. Without them, the content may have been awesome, but no one would have known 
about it because there would be no book. Our fearless leader, Product Manager Laura Pagluica, 
kept everyone on track, especially me. She provided sagacious advice in lots of different areas, 
and on occasion, she (rightfully) reigned in my (sometimes excessive) exuberance. Taylor 
 Maurice gathered and compiled the early-chapter reviews, and Mary Menzemer did the same 
for the later-chapter reviews. Their work helped greatly in my effort to incorporate reviewer 
feedback into the book. I’d also like to thank Thais Miller and Vanessa Richards, who did a great 
job during the production phase.

I’d like to acknowledge the many teachers who provided feedback during the writing phase. 
Their comments showed attention to detail and tremendous insight, and they led to many 
improvements in wording and content. So thank you to:

Simon Baev
Georgia Southwestern State University

John Beatty
La Salle University

Bill Bennett
Mt. San Jacinto College

Noni McCullough Bohonak
University of South Carolina Lancaster

Dan Brandon
Christian Brothers University

Blase B. Cindric
University of Mount Union

Stephen Crandall
Notre Dame College

Julius Dichter
University of Bridgeport

Zarreen Farooqi
University of Akron

Kelly Furnas
Kansas State University

Steven Gutierrez
Lake Erie College

William J. Hitchcock
Loras College

Nanette Hogg
University of Nebraska at Kearney

Brian W. Horton
The University of Texas at Arlington

Zhenyu Huang
Central Michigan University

Deborah J. Hwang
University of Evansville

ACKNOWLEDGMENTS



xixACKNOWLEDGMENTS

Clara James
Minneapolis Community & Technical College

Ravinder Kang
Highline Community College

Amitava Karmaker
University of Wisconsin–Stout

Gilliean Lee
Lander University

Haim Levkowitz
University of Massachusetts Lowell

Ted Markowitz
University of New Haven

François Neville
Bemidji State University

Ralph Phillips
Central Oregon Community College

Susan Reeder
Seattle University

Jamil Saquer
Missouri State University

Ethel Schuster
Northern Essex Community College

Derrf Seitz
Georgia Military College

Robert Sfarzo
Cuesta College

R. Duane Skaggs
Morehead State University

Bob Sweeney
University of South Alabama

Joo Tan
Kutztown University of Pennsylvania

Visa Thiangarajan
Magnolia Science Academy

Joe Triplett
Ohio University

Marilyn Turmelle
School for the Talented and Gifted

Michael Van Hilst
Nova Southeastern University

Christopher T. VanOosterhout
Muskegon Community College

Sam Vegter
Western Piedmont Community College

Jerry Westfall
Liberty University

My web-programming students have not been shy about making suggestions and finding 
errors. In particular, thank you Olivia Leung, Matthew Prybyszczuk, Jessica Detweiler, Alexis 
Fry, Chrisman Miller, and Yves Akanza.



xx

John Dean is an Associate Professor and the Department Chair of the Department of Computer 
Science and Information Systems at Park University. He earned a PhD degree in computer science 
from Nova Southeastern University and an MS degree in computer science from the University 
of Kansas. Dean has worked in industry as a software engineer and project manager, specializ-
ing in Java and various web technologies—HTML, CSS, JavaScript, JavaServer Pages, and serv-
lets. He has taught a full range of computer science courses, including client-side and server-side 
web-programming courses.

ABOUT THE AUTHOR



© StationaryTraveller/Getty Images

CHAPTER OBJECTIVES

 ▸ Learn the basics of creating a website.
 ▸ Learn the basics of HTML—elements, tags, 

attributes.

 ▸ Use structural elements (html, head, body) 
to form the framework of a web page.

 ▸ Fill in a head container with title and meta 
elements.

 ▸ Fill in a body container with h1, hr, p, br, 
and div elements.

 ▸ Learn the basics of Cascading Style Sheets.
 ▸ Learn how HTML, the Web, and web 

browsers originated.

 ▸ Use the W3C’s Markup Validation Service.

Introduction to Web 
Programming

1

CHAPTER 1



CHAPTER OUTLINE

1.1 Introduction

1.2 Creating a Website

1.3 Web Page Example

1.4 HTML Tags

1.5 Structural Elements

1.6 title Element

1.7 meta Element

1.8 HTML Attributes

1.9 body Elements: hr, p, br, div

1.10 Cascading Style Sheets Preview

1.11 History of HTML

1.12 HTML Governing Bodies

1.13 Differences Between Old HTML and 
HTML5

1.14 How to Check Your HTML Code

1.15 Case Study: History of Electric Power

1.1 Introduction
Have you ever perused the Web and wondered how its web pages are made? If so, this book is for 
you. Actually, even if you haven’t thought about how web pages are made, this book can still be 
for you. All you need is a logical mind and an interest in creating things. This book takes you on a 
journey where you learn to create informative, attractive, and interactive web pages. So climb on 
board and enjoy the ride!

To make this book accessible to readers with little background in computers, we start slowly 
and build upon what comes earlier in the book. If you come to something that you already know, 
feel free to skip it. If you already know how to program, you’ll probably want to skip some of the 
programming basics when we get to JavaScript. But rest assured that unless you already know 
HTML, CSS, and JavaScript, the vast majority of this book’s content should be new to you. After 
all, we want you to get your money’s worth from this book.

Let’s start with a brief description of the Web, which is short for World Wide Web. Most people 
say “Web” instead of “World Wide Web,” and we’ll follow that convention. The Web is a collection 
of documents, called web pages, that are shared (for the most part) by computer users throughout 
the world. Different types of web pages do different things, but at a minimum, they all display 
content on computer screens. By “content,” we mean text, pictures, and user input mechanisms 
like text boxes and buttons. FIGURE 1.1 shows a typical web page. Note the web page’s text, pic-
tures, text boxes, and buttons. Also note the web page’s address shown in the figure’s address bar. 
The web page address is the location where the web page resides on the Internet. Speaking of the 
Internet, what is it? It’s a collection of several billion computers connected throughout the world. 
Each web page is stored on one of those computers.

Figure 1.1 shows the “TED Talks” website. To visit it, open a browser (e.g., Google Chrome, 
Microsoft Edge, and FireFox) and enter the web page address shown in the figure’s address bar.

At the start of this book, we’ll focus on displaying text, like the “2400+ talks to stir your 
curiosity” at the top of Figure 1.1. Next, we’ll focus on the appearance of displayed content. Then 
on to organizational constructs, pictures, sound clips, and video clips. Finally, we will focus 
on implementing user input controls. For example, in Figure 1.1, note the text boxes and the 

2 ChaptER 1 Introduction to Web Programming



©
 Te

d C
on

fer
en

ce
s, 

LL
C

buttons. Those are controls. You’ll learn about those controls, plus more controls, in the last 
several chapters.

In this first chapter, we stick with the basics, so you can get up and running quickly. Specifi-
cally, we start with some overarching concepts that explain the process of web page development 
and dissemination. Then, we introduce the basic constructs that you’ll use to describe and display 
a web page’s content. Next, we provide a cursory overview of Cascading Style Sheets (CSS), which 
you’ll use to display a web page’s content in a pleasing, formatted manner. Finally, we present a 
brief history of the primary language used to write all web pages—HTML.

1.2 Creating a Website
A website is a collection of related web pages that are normally stored on a single web server com-
puter. A web server is a computer system that enables users to access web pages stored on the web 
server’s computer. The term “web server” can refer to the web page-accessing software that runs 
on the computer, or it can refer to the computer itself.

To create a website, you’ll need these things: (1) a text editor, (2) an upload/publishing tool, 
(3) a web hosting service, and (4) a browser. We’ll describe them in the upcoming paragraphs.

text Editors
There are many different text editors, with varying degrees of functionality. Microsoft’s Notepad 
is free and provides no special web functionality. To use it, the web developer simply enters text, 

FIGURE 1.1 a typical web page

button
text box

website address

31.2 Creating a Website



and the text appears as is. Although it’s possible to use a plain text editor such as Notepad, most 
web developers use a fancier type of text editor—a web authoring tool. Different web authoring 
tools have different features that are intended to make the web development process easier. At 
a minimum, web authoring tools are able to suggest valid code after the user has typed part of 
a command. This is done by showing a pop-up to the user that suggests valid code that could 
complete the command currently being entered. This auto-complete mechanism is often called 
intellisense and sometimes called picklist. Another feature common to all web authoring tools 
is WYSIWYG, pronounced “wizeewig.” It stands for “what you see is what you get.” WYSIWYG 
means that as you’re editing your text, you can see what your text will look like after it’s eventually 
uploaded to a website.

On this book’s website, we provide a tutorial for learning how to use the Visual Studio web 
authoring tool. Visual Studio is from Microsoft, so it’s not free. But fear not, Microsoftophiles. If 
you plan to use Visual Studio for nonbusiness purposes, you can download Microsoft Visual Studio 
Community for free (that means you—students, faculty, and open-source project contributors). 
Visual Studio Community includes all the functionality of Visual Studio’s professional version.1

There are a lot of other web authoring tools that you are welcome to learn on your own. 
Visual Studio and its offshoots run on Windows, but if you have a Mac(intosh) computer, check 
out Adobe’s Dreamweaver web authoring tool. It works on both Windows and Mac. Or, do a 
 Google search for other web authoring tools—most are free and some are quite good!

Normally, web authoring tools enable developers to create not just web pages, but other soft-
ware as well. Such general-purpose web authoring tools are normally referred to as integrated 
development environments, or IDEs for short.

Web page Uploads
After you enter your web page text on your local computer with your favorite IDE, you’ll probably 
want to publish it. Publishing means that you upload your web page to a web server computer so 
other users can access it on the Web. Some IDEs, like Dreamweaver, provide built-in uploading 
capabilities, but other IDEs, like Visual Studio, do not. For IDEs that do not provide built-in 
uploading capabilities, you’ll need to use a separate file upload tool. There are lots of file upload 
tools. On this book’s website, we provide a tutorial for learning how to install and use a free and 
intuitive file upload tool called WinSCP.

Web hosting Service
For a file upload tool such as WinSCP to work, you need to have a web server computer on 
which to store the uploaded files. For the uploaded files to be accessible as web pages on the 
Web, your web server computer needs to have a web hosting service in place. The web developer 
usually doesn’t have to worry about the web hosting service software. If the web developer is part 
of a medium- to large-sized organization, then the organization’s information technology (IT) 

1 “Visual Studio Community,” Microsoft, https://www.visualstudio.com/vs/community/.

4 ChaptER 1 Introduction to Web Programming

https://www.visualstudio.com/vs/community/


department will install and maintain the web hosting service. On the other hand, if the web devel-
oper is part of a very small organization or not part of an organization at all, the developer will 
need to set up the web hosting service or rely on a generic web-hosting company (e.g., GoDaddy 
.com) to do so. Regardless of who’s in charge of the web hosting service, all web hosting services 
need to have a mechanism for receiving uploaded files from a file upload tool. Typically, that 
mechanism is an FTP (file transfer protocol) server, which is a program that runs on the web 
server computer. FIGURE 1.2 is a pictorial description of how the FTP server fits in with the rest 
of the website creation process.

Browsers
The top of Figure 1.2 shows the final part of the website experience: browser access. A browser 
is a piece of software that enables a user to retrieve and view a web page. According to http://
gs. statcounter.com, the most popular browsers for computers are Google Chrome, Microsoft’s 
browsers (Microsoft Edge and Internet Explorer), and Mozilla2 Firefox, with Google Chrome at 
#1. Other browsers are Safari (for Mac devices), Opera, and Android’s default browser. Safari and 
Android are particularly popular with mobile devices.

1.3 Web Page Example
Note FIGURE 1.3, which shows a simple Kansas City Weather web page. Before showing you the 
behind-the-scenes code for the Kansas City Weather page, we first need to go over some prelimi-
nary concepts. We’ll start with the website address. Formally, the website address value is known 

2 The name “Mozilla” comes from a combination of the words Mosaic (the first popular graphical browser) 
and Godzilla (the first known sea monster formed by nuclear radiation).

FIGURE 1.2 Website file processing

web page
storage and

retrieval

browser browser

web hosting service

file upload

web page file

web page file

FTP server

web
authoring

tool

user
computers

web server
computer

developer’s
computer

file
upload

tool

...

51.3 Web Page Example

http://GoDaddy.com
http://GoDaddy.com
http://gs
http://gs
http://statcounter.com


as a URL, which stands for Uniform Resource Locator. That name is not all that intuitive, so just 
remember that a URL is a website address. Here’s the URL for the Kansas City Weather page in 
Figure 1.3:

http://teach.park.edu/~jdean240/lecture/weather.html

The http refers to the hypertext transfer protocol, where a protocol is a set of rules and formats  
for exchanging messages between computers. After http comes a delimiter, ://, and then the 
name of the web server computer that stores the web page. For this example, the web server com-
puter is teach. Next comes the domain that describes how the web server can be found on the 
Internet. For this example, the domain is park.edu. Next, there’s a sequence of directories and 
subdirectories (also called folders and subfolders) that indicate where the web page is stored on the 
web server computer. That’s called the path. For this example, the path is ~jdean240/ lecture. 
The ~ (tilde) at the left indicates that the directory is a home directory for a user’s account. There’s 
no requirement that you use a ~ for a user’s home directory. It’s a standard convention at univer-
sities, where users (students and teachers) like to do their own thing, but most businesses do not 
use ~’s. In the example, after the ~jdean240 home directory, there’s a / and then lecture. The 
term lecture is a subdirectory of the home directory, and the / is a delimiter that separates the 
home directory from the subdirectory.

In the example, after the lecture subdirectory, there’s a / and then weather.html. The 
phrase weather.html is the web page’s filename, and the / is another delimiter. This time, the /  
separates the subdirectory from the web page filename.

In Figure 1.3, all the things you see below the address bar are web page elements—h1, hr, p, and 
div. We’ll have more to say about those elements later, but here’s just a brief introduction for now.

The h1 element is used to implement a web page heading, with the “h” in h1 standing for 
“heading.” The hr element is used to implement a horizontal line, with the “h” and “r” standing 

FIGURE 1.3 Kansas City Weather web page

h1 element

hr element

p element

To load the web
page, enter the
web page’s URL
in the address bar.

div element

6 ChaptER 1 Introduction to Web Programming

http://teach.park.edu/~jdean240/lecture/weather.html
http://park.edu
http://weather.html
http://weather.html


for “horizontal” and “rule,” respectively. The p element is used to implement a paragraph. Finally, 
a div element is used to group words together as part of a division within a web page.

There are additional elements used to implement the Kansas City Weather page, but they’re 
not as intuitive as the elements we’ve described. For example, there’s a body element that forms 
the entire white area under the address bar. Coming up, we’ll show how to implement that ele-
ment, plus all the other elements in the Kansas City Weather page. But first a tribute to the central 
role of elements to a web page.

A web page’s elements hold the web page’s content, which is the most important part of a web 
page. After deciding on which elements to use and implementing those elements, you’ll want to 
focus on formatting the content. In Chapter 3, we’ll describe how to format the content using CSS. 
Optionally, you can add behaviors for some or all the elements. Later in the book, we’ll describe 
how to add behaviors using JavaScript. For example, in the Kansas City Weather page, you could 
add a behavior to the h1 element, so that when you click it, the subsequent paragraph turns blue. 
A rather odd scenario, but you get the idea.

1.4 HTML Tags
Now we’re going to describe how to implement elements for a web page. To implement an ele-
ment for a web page, you’ll need to use tags. For example, if you want to implement a strong 
element (in order to put emphasis on the element’s content and display using boldface), sur-
round the content with <strong> tags. Here’s how to implement a strong element for the 
word “very”:

Caiden was <strong>very</strong> happy when her tooth finally came out.

The use of tags is the key characteristic of a markup language. Why is it called “markup”? 
A markup language “marks up” a document by surrounding parts of its content with tags. Web 
pages are implemented with HTML, which stands for Hypertext Markup Language. You already 
know what “markup” means. The “hyper” in “Hypertext” refers to HTML’s ability to implement 
hyperlinks. A hyperlink (or link for short) is where you click on text or an image in order to jump 
to another web page. So HTML is a language that supports markup tags for formatting and the 
ability to jump to other web pages.

To simplify the web page creation process, the WYSIWYG option (for web authoring tools) 
lets you hide the HTML tags. Unfortunately, in hiding the HTML tags, the developer loses some 
control, and the resulting web pages tend to be sloppy. Even if your web authoring tool generates 
clean HTML code when in WYSIWIG mode, we strongly recommend that you enter all your tags 
explicitly, at least for now. That will help you learn HTML details so you’ll be able to understand 
and debug subtle code issues.

Most, but not all, HTML tags come in pairs with a start tag and an end tag. For example, the 
following code uses an <h1> start tag and an </h1> end tag:

<h1>Today's Weather</h1>

71.4 HTML Tags



Note that each tag is surrounded by angled brackets, and the end tag starts with “</”. The h1 head-
ing tags cause the enclosed text (“Today’s Weather”) to display like a heading. That usually means 
that the enclosed text will be boldfaced, large, and surrounded by blank lines. Note the use of 
the term “usually.” The official HTML standard/specification often doesn’t specify precise display 
characteristics. Consequently, not all browsers display tags in the exact same way.

Besides h1, there are other heading elements—h2 through h6. The element h1 generates the 
largest heading, and h6 generates the smallest. Use a heading tag whenever you want to display a 
heading above other text. Headings are usually at the top of the page, but they can be in the middle 
of the page as well.

The first entity inside a tag is the tag’s type. In the previous example, the tag’s type is h1. In 
this simple example, there’s only one entity inside the tags—the tag’s type. Later, we’ll see examples 
where there are additional entities inside the tags.

When a tag is discussed in general, without reference to a particular tag instance, it is called 
an element and it is written without the angled brackets. For example, when discussing the <h1> 
tag in general, refer to it as the h1 element.

There are two types of elements—container elements and void elements. A container element 
(usually called simply a “container”) has a start tag and an end tag, and it contains content between 
its two tags. For example, the h1 element is a container. On the other hand, a void element has just 
one tag, and its content is stored within the tag. We’ll see an example of that when we get to the 
meta element.

1.5 Structural Elements
Take a look at FIGURE 1.4. It shows the HTML source code that was used to generate the Kansas 
City Weather web page shown earlier. What’s source code, you ask? With many programming lan-
guages, two types of code are associated with a single program. There’s source code, which the pro-
grammer enters, and there’s executable code, which is low-level code that the computer hardware 
understands and executes (runs). Executable code is generated from the source code with the help 
of something called a compiler. As you learn HTML, there’s no need to worry about executable 
code because it is generated automatically behind the scenes and you never see it. So, why did we 
bring it up? So you can mention executable code in conversation and impress your techie friends? 
Yes, there’s always that, but also, HTML has source code, and to understand the term source code, 
it’s helpful to understand the term executable code. HTML code is source code because HTML 
code comes directly from the programming source—the programmer.

Next, we’ll describe the different sections of code in Figure 1.4. Let’s start with the really 
important HTML constructs that you’ll use as the basic framework for all your web pages— 
doctype, html, head, and body. The doctype construct is considered to be an instruction, not 
an element, and it goes at the top of every web page. The html, head, and body elements form 
the basic structure of a web page, so we’ll refer to those elements as structural elements. Be aware 
that that’s not a standard term. We made it up because it will make future explanations easier. The 
doctype instruction plus the structural elements form the skeleton code shown in FIGURE 1.5. 
You can use that skeleton code for all your web pages.

8 ChaptER 1 Introduction to Web Programming



FIGURE 1.4 Source code for Kansas City Weather web page

FIGURE 1.5 Skeleton code using just doctype and the structural elements

The first construct, <!DOCTYPE html>, tells the browser what type of document the web 
page is. Its html value (in <!DOCTYPE html>) indicates that the document is an HTML docu-
ment, and more specifically that the document uses the HTML5 standard for its syntax. Syntax 
refers to the words, grammar, and punctuation that make up a language.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="John Dean">
<meta name="description" content="Kansas City weather conditions">
<title>K.C. Weather</title>
<style>
  h1 {text-align: center;}
  hr {width: 75%;}
</style>
</head>

<body>
<h1>Kansas City Weather</h1>
<hr>
<p>
  It should be pleasant today with a high of 95 degrees.<br>
  With a humidity reading of 30%, it should feel like 102 degrees.
</p>
<div>
  Tomorrow's temperatures:<br>
  high 96, low 65
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  .
  .
  .
</head>

<body> 
  .  .  .
</body>
</html> 

91.5 Structural Elements



After the doctype instruction comes the html element. It’s a container, and it contains/
surrounds the rest of the web page. Its start tag includes lang="en", which tells the browser 
that the web page is written in English. The head and body elements are also containers. The 
head element surrounds elements that provide information associated with the web page as a 
whole. The body element surrounds elements that display content in the web page. Container 
elements must be properly nested, meaning that if you start a container inside another con-
tainer, you must end the inner container before you end the outer container. Because the body 
element starts inside the html element, the </body> end tag must come before the </html> 
end tag. In Figure 1.5, note how the head and body elements are properly nested within the 
html element.

1.6 title Element
Let’s now dig a little deeper into the head element. The head code in FIGURE 1.6 comes from the 
weather page, but in the interest of keeping things simple, we’ve omitted its style element. The 
style element is more complicated, and we’ll discuss it later in this chapter.

The head element contains two types of elements—meta and title. In your web pages, you 
should position them in the order shown in Figure 1.6, meta and then title. But in the interest 
of clarity, we’ll discuss the title element first.

Remember that the head element surrounds elements associated with the web page as a 
whole. The web page’s title pertains to the entire web page, so its title element goes within the 
head container. The title element’s contained data (e.g., “K.C. Weather”) specifies the label that 
appears in the browser window’s title bar. Go back to Figure 1.3 and verify that “K.C. Weather” 
appears in the tab near the top of the window. With browsers that support tabbed windows, that 
tab is considered to be the browser’s title bar.

The official HTML standard requires that every head container contains a title element. 
Besides providing a label for your browser window’s title bar, what’s the purpose of the title 
element? (1) It provides documentation for someone trying to maintain your web page, and (2) it 
helps web search engines find your web page. In case you haven’t heard of a web search engine, 
it’s software that searches the Internet for user-specified information and returns a list of links to 
web pages that are likely to contain the requested information. Google is the preeminent search 

FIGURE 1.6 head container for Kansas City Weather web page

<head>
<meta charset="utf-8">
<meta name="author" content="John Dean">
<meta name="description" content="Kansas city weather conditions">
<title>K.C. Weather</title>
</head>

10 ChaptER 1 Introduction to Web Programming



engine, as evidenced by the use of “google” as a verb. For example, “Did the CIA make up dino-
saurs?” “Not sure. I’ll google it.”

1.7 meta Element
In Figure 1.6, note the meta elements within the head container. The meta elements provide 
information about the web page. If you look up “meta” in a standard dictionary, you’ll probably 
see a confusing definition. In everyday speech and in HTML, “meta” means “about itself.” As in 
“Check out this video of two guys watching a how-to video about appreciating videos.” “Dude, 
stop now. You’re hurting my brain. That’s so meta!”

There are many different types of meta elements—some you should always include, but most 
are just optional. We’ll present a few of the more important ones soon, but first some details about 
the meta element’s syntax.

The meta element is a void element (not a container), so it does not have an end tag. Note 
how there are no end tags for the three meta elements in Figure 1.6. Many web programmers end 
their void elements with a space and a slash. For example:

<meta charset="utf-8" />

The space and slash are a bit outdated, and we recommend omitting them. If you decide to include 
them, be consistent. Don’t worry about the meaning of charset and utf-8 for now; we’ll discuss 
them shortly.

1.8 HTML Attributes
Before we formally introduce a few of the different types of meta elements, we first need to dis-
cuss attributes, which are used in all meta elements. Container elements provide information 
between their start and end tags. Void elements (including the meta element) have no end tags, 
so they can’t provide information that way. Instead, they provide information using attributes. In 
the following example, charset is an attribute for a meta element:

<meta charset="utf-8">

Most attributes have a value assigned to them. In this example, charset is assigned the 
value "utf-8". Although most attributes have a value assigned to them, some do not. Later 
on, we’ll see some attributes that appear by themselves, without a value. You should always 
surround attribute values with quotes, thus forming a string. A string is a group of zero or more 
characters surrounded by a pair of double quotes (“) or a pair of single quotes (‘), with double 
quotes preferred.

111.8 HTML Attributes



Attributes are more common with void elements, but they can be used with container ele-
ments as well. Here’s an example of a container element that uses an attribute:

<html lang="fr">
  •
  •
  •
</html>

The lang attribute tells the browser that the element is using a particular language for its content. 
You can use the lang attribute for any element. Here we’re using it for the html element, so it 
means that the entire web page uses French. You’re not required to use the lang attribute, but we 
recommend that you do include it for the html element. For web pages written in English, use 
<html lang="en">.

Why would you want to specify an element’s language? The W3C’s Internationalization 
Activity group (https://www.w3.org/International/questions/qa-lang-why.en) provides quite a 
few good reasons, and here are a few of them:

 ▸ Help search engines find web pages that use a particular language.
 ▸ Help spell-checker and grammar-checker tools work more effectively.
 ▸ Help browsers use appropriate fonts.
 ▸ Help speech synthesizers pronounce words correctly (we’ll discuss speech synthesizers in 

Chapter 5).

If these benefits haven’t convinced you to use the lang attribute, consider the fact that as 
technology has improved, the lang attribute’s usefulness has grown over the years. That trend will 
undoubtedly continue. It’s hard to know what cool things the lang attribute might help with in the 
future, and you should plan for those cool things by including the lang attribute now.

meta charset Element
Now that you’ve learned syntax details for element attributes, it’s time to focus on semantic details. 
Syntax refers to the punctuation rules for code. Semantics refers to the meaning of the code. First 
up—the semantics for the meta charset element.

When a web server transmits a web page’s source code to an end-user’s computer, the web 
server doesn’t transmit the source code’s characters the way you see them in this book or on a 
keyboard. Instead, it transmits coded representations of the source code’s characters. The coded 
representations are in binary, which means a sequence of 0’s and 1’s, where each 0 and 1 is a bit (so 
10110011 is a binary sequence of 8 bits). There are different encoding schemes, and in order for 
the receiving end of a transmission to understand the transmitted binary data, the receiver has to 
know the encoding scheme used by the sender. For web page transmissions, the meta  charset 
element specifies the encoding scheme. Normally, you should use a charset value of “utf-8” 
because all modern browsers understand that value.3 The encoding scheme is sometimes referred 

3 UTF-8 (UCS Transformation Format—8-bit) is a variable-width encoding that can represent every character 
in the Unicode character set. It encodes each Unicode value using one to four 8-bit bytes.

12 ChaptER 1 Introduction to Web Programming

https://www.w3.org/International/questions/qa-lang-why.en


to as a character set, and that’s what charset stands for. If you omit the meta charset element, 
your web page will usually work because most browsers assume UTF-8 encoding by default. But 
don’t count on the default. In omitting the meta charset element, you run the risk of characters 
being interpreted incorrectly.

meta name Element
Most of the meta elements use the name attribute to specify the type of information that’s 
being provided. Common values for the meta name attribute are author, description, and 
 keywords. Here’s an example with an author value for a name attribute:

<meta name="author" content="John Dean">

The name and content attributes go together. The name attribute’s value specifies the type of 
thing that the content attribute’s value specifies. So in this example, with the name attribute 
specifying “author,” the content attribute specifies the author’s name (“John Dean”). Why is 
knowing the author’s name important? Often, the person who fixes or enhances a web page is 
different from the person who originally wrote the web page. By specifying the author, the fixer/
enhancer knows whom to ask for help.

In the following examples, the name attribute uses the values “description” and “keywords”:

<meta name="description" content="Kansas City weather conditions"
<meta name="keywords" content="KC, weather, meteorology, forecast"

The meta description element and also the meta keywords element help web search engines 
find your web page. In addition, the meta description element helps the person reading the 
code learn the purpose of the web page.

The meta description element isn’t as important as the meta author and meta  charset 
elements. Typically, HTML code is straightforward, so unless you’ve got tricky code, it’s OK to 
omit the meta description tag. Feel free to include it if you feel that it’s beneficial. Likewise, 
the meta keywords element can go either way—include it or omit it.

1.9 body Elements: hr, p, br, div
In the prior sections, we covered the elements that appear inside the weather page’s head con-
tainer. Now let’s cover the elements that appear inside the weather page’s body container. In 
 FIGURE 1.7, which shows the body container code, note the h1, hr, p, br, and div elements. 
We’ve already talked about the h1 heading element, so now let’s focus on the other elements.

The hr element is used to render a horizontal line. When a browser renders an element, it 
figures out how the element’s code should be displayed. To keep things simple, you can think of 
“render” as a synonym for “display.” Go back to Figure 1.3 and note the horizontal line on the 
weather page browser window. The “h” in hr stands for horizontal. The “r” in hr stands for rule, 
presumably because a rule is another name for a ruler, which can be used to make a straight line. 
The hr element is a void element, so it uses just one tag, <hr>.

131.9 body Elements: hr, p, br, div



The p element is a container for a group of words that form a paragraph. Normally, browsers 
will render a p element’s enclosed text with a blank line above the text and a blank line below it. Go 
back to Figure 1.3 and note the blank lines above and below the two-sentence paragraph.

In Figure 1.7, note how we indented the text between the <p> start tag and the </p> 
end tag. Whenever you’ve got a p element whose enclosed text is greater than one line, you 
should put the start and end tags on separate lines and indent the enclosed text. That rule is 
an example of a  coding-style convention rule (or style rule for short). Whenever you write a 
program, including an HTML program, it’s important to follow standard coding-style con-
ventions, so your program is easy to read by you and also by future programmers who need to 
understand your program. Programmers get used to certain conventions, such as when to use 
uppercase versus lowercase, when to insert blank lines, and when to indent. You don’t want to 
jar someone reading your program by using nonstandard conventions. For a complete list of 
 coding-style conventions used in this book, see the two appendices: Appendix 1, HTML5 and 
CSS  Coding-Style Conventions, and Appendix 2, JavaScript Coding-Style Conventions. You 
might want to skim the appendices now, but don’t worry about the details. We’ll cover those 
details as we proceed through the book.

Even though it’s a container, the HTML standard allows p’s start tag to appear without its end 
tag. However, that’s considered to be bad style, so don’t do it. You should never omit end tags for 
container elements because then it’s more difficult for the browser and for people reading your 
source code to figure out where the container element ends.

A div element is also a container for a group of words, but it’s more generic, so the words 
don’t have to form sentences in a paragraph. div stands for division because a division can refer 
to a part of something that has been divided, and a div element is indeed a part of a web page. 
Normally, the div element causes its enclosed text to have single line breaks above and below it. 
If a div element’s enclosed text is greater than one line, then proper style suggests putting the 
<div> tags on separate lines and indenting the enclosed text.

Except for single line breaks instead of blank lines, the characteristics for a div element are 
the same as for a p element. So when should you use a p element versus a div element? Use a p 
element if the enclosed text forms something that would normally be considered a paragraph. On 
the other hand, use a div element if the enclosed text is related in some way, but the text would 

FIGURE 1.7 body container for Kansas City Weather web page

<body>
<h1>Kansas City Weather</h1>
<hr>
<p>
  It should be pleasant today with a high of 95 degrees.<br>
  With a humidity reading of 30%, it should feel like 102 degrees.
</p>
<div>
  Tomorrow's temperatures:<br>
  high 96, low 65
</div>
</body>

14 ChaptER 1 Introduction to Web Programming



not normally be considered a paragraph. If you use the p element only for bona fide paragraphs, 
then the rest of the web page can process p elements as paragraphs, and you avoid including non-
paragraphs in that processing. For example, you could use Cascading Style Sheets (described in 
the next section) to indent each paragraph’s first line.

Finally, there’s the br element, which is used to render a new line. In Figure 1.7, note this line:

It should be pleasant today with a high of 95 degrees.<br>

You can see the br element’s new line in Figure 1.3’s browser window. Specifically, the line “With 
a humidity reading of 30%, …” starts on a new line even though there is room for it to start 
at the end of the previous line.

1.10 Cascading Style Sheets Preview
We’ll wait until Chapter 3 for a robust presentation of Cascading Style Sheets (CSS), but for now 
it’s appropriate to give you a preview so you’re aware of the basic concepts. As you may recall, CSS 
allows you to add formatting to your web pages. The formatting rules go inside a style container. 
In the skeleton code for the weather web page in FIGURE 1.8, note the style container within 
the head container. Within the style container, note the two lines that begin with h1 and hr. 
Those lines are the rules that apply to the h1 and hr elements in the body container. Each rule 
has a CSS property and a CSS value, separated by a colon. The first rule, for h1, uses a text-
align property with a value of center. Other text-align values are left and right. The 
second rule, for hr, uses a width property with a value of 75%.

FIGURE 1.8 style container for Kansas City Weather web page

CSS property CSS value

CSS property CSS value

<style>

  h1 {text-align: center;}

  hr {width: 75%;}

</style>

</head>

<body>

<h1>Kansas City Weather</h1>

<hr>

<head>

151.10 Cascading Style Sheets Preview



Go back to the web page display in Figure 1.3 and note how h1 and hr are centered. Note how 
the hr element spans 75% of the width of the page. By default, h1 would be left aligned and the hr 
element would span 100% of the page. Thus, the CSS rules changed the default. If you reduce the 
hr element’s width, as in this weather page example, then alignment becomes apparent, and the 
hr element gets center alignment by default. To change its alignment, use  margin-right: 0% 
for right alignment or margin-left: 0% for left alignment.

1.11 History of HTML
In 1989, to help with collaborative research at CERN (the European Laboratory for Particle Phys-
ics in Geneva, Switzerland), Tim Berners-Lee came up with the idea of adding “hypertext links” 
to research papers, so when one paper referred to another, the reader could click the link and 
quickly go to the other paper. From 1989–1991, Berners-Lee was quite prolific: (1) He designed 
HTML, with hypertext links as the key feature, (2) he designed the concepts behind the World 
Wide Web, including the HTTP protocol, and (3) he created a prototype browser for surfing the 
Internet with HTML web pages. In 1993, Tim Berners-Lee and Dan Connolly submitted the first 
formal proposal for HTML to the Internet Engineering Task Force (IETF). In 1994, Berners-Lee 
founded the World Wide Web Consortium (W3C) at the Massachusetts Institute of Technology, 
with the W3C taking over the stewardship of the HTML standard.

By 1997, the HTML standard evolved to HTML4, with HTML4’s last revision appearing in 
2000 as HTML 4.01. Bothered by all the poorly formed web pages, the W3C decided to try to force 
web programmers to conform to stricter syntax rules by introducing XHTML 1.0 Strict in 2000. 
The “stricter syntax rules” were borrowed from the extensible markup language (XML), and that’s 
what the X in XHTML stands for—XML. XML is not so much a language as a set of rules for how 
you can define your own language. XHTML 1.0 Strict enforced XML rules such as (1) requiring 
quoted values for all attributes, (2) requiring a / for all void elements, and (3) requiring an end