Ebook New Perspectives On HTML 5 and Css PDF Full Chapter PDF

New Perspectives on HTML 5 and CSS -
eBook PDF
Visit to download the full and correct content document:
https://ebooksecure.com/download/new-perspectives-on-html-5-and-css-ebook-pdf/
HTML 5 and
CSS
Australia • Brazil • Mexico • Singapore • United Kingdom • United States
Copyright 2021 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s).
Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it.
This is an electronic version of the print textbook. Due to electronic rights restrictions,
some third party content may be suppressed. Editorial review has deemed that any suppressed
content does not materially affect the overall learning experience. The publisher reserves the right
to remove content from this title at any time if subsequent rights restrictions require it. For
valuable information on pricing, previous editions, changes to current editions, and alternate
formats, please visit www.cengage.com/highered to search by ISBN#, author, title, or keyword for
materials in your areas of interest.
Important Notice: Media content referenced within the product description or the product
text may not be available in the eBook version.
New Perspectives on HTML 5 and CSS, © 2021, 2017 Cengage Learning, Inc.
8th Edition Comprehensive Unless otherwise noted, all content is © Cengage.
Patrick Carey
WCN: 02-300
SVP, Higher Education Product Management:
ALL RIGHTS RESERVED. No part of this work covered by the copyright herein
Erin Joyner
may be reproduced or distributed in any form or by any means, except as
VP, Product Management: Mike Schenk permitted by U.S. copyright law, without the prior written permission of the
Product Director: Lauren Murphy copyright owner.
Product Team Manager: Kristin McNary
Product Assistant: Tom Benedetto For product information and technology assistance, contact us at
Cengage Customer & Sales Support, 1-800-354-9706 or
Director, Learning Design: Rebecca von Gillern support.cengage.com.
Senior Manager, Learning Design: Leigh Hefferon
For permission to use material from this text or product,
Learning Designer: Kate Mason submit all requests online at www.cengage.com/permissions.
Vice President, Marketing – Science, Technology,
& Math: Jason Sakos
Library of Congress Control Number: 2019940290
Senior Marketing Director: Michele McTighe
Marketing Manager: Cassie L Cloutier ISBN: 978-0-357-10714-0
Marketing Development Manager: Cengage
Samantha Best 200 Pier 4 Boulevard
Director, Content Creation: Juliet Steiner Boston, MA 02210
USA
Senior Manager, Content Creation: Patty Stephan
Content Manager: Christina Nyren Cengage is a leading provider of customized learning solutions with employees
Director, Digital Production Services: residing in nearly 40 different countries and sales in more than 125 countries
Krista Kellman around the world. Find your local representative at www.cengage.com.
Digital Delivery Lead: Justin Maniaci Cengage products are represented in Canada by Nelson Education, Ltd.
Technical Editors: John Freitas and Danielle Shaw
To learn more about Cengage platforms and services, register or access your
Developmental Editors: Deb Kaufmann and online learning solution, or purchase materials for your course, visit
Ann Shaffer www.cengage.com.
Production Service/Composition: Lumina
Datamatics Ltd.
Design Director: Jack Pendleton
Designer: Erin Griffin
Text Designer: Althea Chen
Cover Template Designer: Wing-Ip Ngan,
Ink Design, Inc.
Cover image(s): Mai Phongsook/ShutterStock.com
Notice to the Reader

Publisher does not warrant or guarantee any of the products described herein or perform any independent analysis in connection
with any of the product information contained herein. Publisher does not assume, and expressly disclaims, any obligation to
obtain and include information other than that provided to it by the manufacturer. The reader is expressly warned to consider and
adopt all safety precautions that might be indicated by the activities described herein and to avoid all potential hazards. By
following the instructions contained herein, the reader willingly assumes all risks in connection with such instructions. The
publisher makes no representations or warranties of any kind, including but not limited to, the warranties of fitness for particular
purpose or merchantability, nor are any such representations implied with respect to the material set forth herein, and the
publisher takes no responsibility with respect to such material. The publisher shall not be liable for any special, consequential, or
exemplary damages resulting, in whole or part, from the readers’ use of, or reliance upon, this material.
Printed in the United States of America

Print Number: 01 Print Year: 2019
Preface
The New Perspectives Series’ critical-thinking, problem-solving approach is the ideal way
to prepare students to transcend point-and-click skills and take advantage of all that
HTML 5 and CSS has to offer.
In developing the New Perspectives Series, our goal was to create books that give students
the software concepts and practical skills they need to succeed beyond the classroom. We’ve
updated our proven case-based pedagogy with more practical content to make learning
skills more meaningful to students. With the New Perspectives Series, students understand
why they are learning what they are learning, and are fully prepared to apply their skills to
real-life situations.
“I love this text

because it provides
About This Book
detailed instructions This book provides thorough coverage of HTML 5 and CSS, and includes the following:
and real-world
application examples.
• Up-to-date coverage of using HTML 5 to create structured websites
It is ideal for classroom • Instruction on the most current CSS styles to create visually-interesting pages and
and online instruction. captivating graphical designs
At the end of the term • Working with browser developer tools to aid in the creation and maintenance of
my students comment fully-functioning websites
on how much they’ve
learned and put to use New for this edition!
outside the classroom.” • Coverage of CSS grid styles for creating grid-based layouts.
—Customer at • Exploration of new CSS styles for filters and transformations.
St. Johns River • New hands-on demo pages to interactively explore HTML and CSS concepts.
Community College
• New coding challenges for each tutorial to focus on specific tasks and concepts.
• New debugging challenges for each tutorial to explore how to fix malfunctioning
websites.
System Requirements
This book assumes that students have an Internet connection, a text editor, and a current
browser that supports HTML 5 and CSS. The following is a list of the most recent versions of
the major browsers at the time this text was published: Internet Explorer 11, Microsoft
Edge 44, Firefox 66, Safari 12.1, Opera 60, and Google Chrome 75. More recent versions may
have come out since the publication of this book. Students should go to the web browser home
page to download the most current version. All browsers interpret HTML 5 and CSS code in
slightly different ways. It is highly recommended that students have several different browsers
installed on their systems for comparison and, if possible, access to a mobile browser or a
mobile emulator. Students might also want to run older versions of these browsers to highlight
compatibility issues. The screenshots in this book were produced using Google Chrome 75
running on Windows 10 (64-bit), unless otherwise noted. If students are using different devices,
browsers, or operating systems, their screens might vary from those shown in the book; this
should not present any problems in completing the tutorials.
iii
iv New Perspectives Series
“New Perspectives texts

provide up-to-date,
The New Perspectives Approach
real-world application
of content, making Context
book selection easy. The Each tutorial begins with a problem presented in a “real-world” case that is meaningful to
step-by-step, hands-on students. The case sets the scene to help students understand what they will do in the tutorial.
approach teaches
students concepts they Hands-on Approach
can apply immediately.” Each tutorial is divided into manageable sessions that combine reading and hands-on, step-
—Customer at
Southeastern Technical by-step work. Colorful screenshots help guide students through the steps. Trouble? tips,
College which anticipate common mistakes or problems, help students stay on track and continue
with the tutorial.
VISUAL OVERVIEW
Visual Overviews
Each session begins with a Visual Overview, a two-page spread that includes colorful, enlarged
figures with numerous callouts and key term definitions, giving students a comprehensive
preview of the topics covered in the session, as well as a handy study guide.
PROSK ILL S ProSkills Boxes

ProSkills boxes provide guidance for applying concepts to real-world, professional situations,
involving one or more of the following soft skills: decision making, problem solving, teamwork,
verbal communication, and written communication.
K E Y S TEP Key Steps

Important steps are highlighted in yellow with attached margin notes to help students pay close
attention to completing the steps correctly and avoid time-consuming rework.
INSIGHT InSight Boxes

InSight boxes offer expert advice and best practices to help students achieve a deeper under-
standing of the concepts behind the software features and skills.
Margin Tips
Margin Tips provide helpful hints and shortcuts for more efficient use of the software. The Tips
appear in the margin at key points throughout each tutorial, giving students extra information
when and where they need it.
TRY IT Try It tips point to demo pages provided with the data folder for interactive exploration of key
concepts.
REVIEW Assessment
Retention is a key component to learning. At the end of each session, a series of Quick Check
CODE multiple choice questions helps students test their understanding of the material before mov-
DEBUG ing on. New with this edition are Coding Challenges and debugging exercises that focus on a
few key challenges. Engaging end-of-tutorial Review Assignments and Case Problems have
APPLY
always been a hallmark feature of the New Perspectives Series. Colorful bars and brief descrip-
CHALLENGE tions accompany the exercises, making it easy to understand both the goal and level of chal-
CRE ATE lenge a particular assignment holds.
REFERENCE Reference
Within each tutorial, Reference boxes appear before a set of steps to provide a succinct
GLOSSARY/INDEX
summary or preview of how to perform a task. In addition, each book includes a combination
Glossary/Index to promote easy reference of material.
HTML 5 and CSS, 8th Edition, Comprehensive v
Level Color Scheme
Our Complete System of Instruction

Coverage To Meet Your Needs
Whether you’re looking for just a small amount of coverage or enough to fill a semester-long
class, we can provide you with a textbook that meets your needs.
• Introductory books contain an average of 5 to 8 tutorials and include essential skills
on the books concepts.
• Comprehensive books, which cover additional concepts and skills in depth, are great
for a full-semester class, and contain 9 to 12+ tutorials.
So, if you are looking for just the essential skills or more complete in-depth coverage of a
topic, we have an offering available to meet your needs. Go to our web site or contact your
Cengage sales representative to find out what else we offer.
MindTap
MindTap is a personalized learning experience with relevant assignments that guide students to
analyze, apply, and improve thinking, allowing you to measure skills and outcomes with ease.
For instructors: personalized teaching becomes yours with a Learning Path that is built with
key student objectives. Control what students see and when they see it. Use as-is, or match to
your syllabus exactly: hide, rearrange, add, or create your own content.
For students: a unique Learning Path of relevant readings, multimedia, and activities that guide
you through basic knowledge and comprehension to analysis and application.
Better outcomes: empower instructors and motivate students with analytics and reports that
provide a snapshot of class progress, time in course, engagement, and completion rates.
The MindTap for HTML 5 and CSS includes coding labs, study tools, and interactive quizzing,
all integrated into an eReader that includes the full content of the printed text.
Instructor Resources
We offer more than just a book. We have all the tools you need to enhance your lectures, check
students’ work, and generate exams in a new, easier-to-use and completely revised package. This
book’s Instructor’s Manual, Cognero testbank, PowerPoint presentations, data files, solution files,
figure files, and a sample syllabus are all available at sso.cengage.com.
Acknowledgments
I would like to thank the people who worked so hard to make this book possible. Special thanks
to my developmental editors, Deb Kaufmann and Ann Shaffer, for their hard work, attention
to detail, and valuable insights, and to Content Manager, Christina Nyren, who has worked tire-
lessly in overseeing this project and made my task so much easier with enthusiasm and good
humor. Other people at Cengage who deserve credit are Kristin McNary, Program Team Lead;
vi New Perspectives Series
Kate Mason, Learning Designer; Tom Benedetto, Product Assistant; Erin Griffin, Art Director;
Fola Orekoya, Manufacturing Planner; Lumina Datamatics Ltd., Compositor, as well as John
Freitas and Danielle Shaw, Technical Editors.
This book is dedicated to my wife Joan who is my inspiration and role model for her good
humor, dedication, and tireless support.
– Patrick Carey
HTML 5 and CSS, 8th Edition, Comprehensive vii
BRIEF CONTENTS
HTML Level I Tutorials
Tutorial 1 Getting Started with HTML 5. . . . . . . . . . . . . . . . . . . . . . . . . HTML 1
Creating a Website for a Food Vendor
Tutorial 2 Getting Started with CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 85
Designing a Website for a Fitness Club
Level II Tutorials
Tutorial 3 Designing a Page Layout . . . . . . . . . . . . . . . . . . . . . . . . . HTML 175
Creating a Website for a Chocolatier
Tutorial 4 Graphic Design with CSS . . . . . . . . . . . . . . . . . . . . . . . . . HTML 273
Creating a Graphic Design for a Genealogy Website
Tutorial 5 Designing for the Mobile Web. . . . . . . . . . . . . . . . . . . . . . HTML 361
Creating a Mobile Website for a Daycare Center
Level III Tutorials

Tutorial 6 Working with Tables and Columns. . . . . . . . . . . . . . . . . . . . HTML 451
Creating a Program Schedule for a Radio Station
Tutorial 7 Designing a Web Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 517
Creating a Survey Form
Tutorial 8 Enhancing a Website with Multimedia . . . . . . . . . . . . . . . . HTML 601
Working with Sound, Video, and Animation
Tutorial 9 Getting Started with JavaScript. . . . . . . . . . . . . . . . . . . . . HTML 681
Creating a Countdown Clock
Tutorial 10 Exploring Arrays, Loops, and Conditional Statements. . . . HTML 751
Creating a Monthly Calendar
Appendix A Color Names with Color Values, and HTML Character
Entities. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML A1
Appendix B HTML Elements and Attributes. . . . . . . . . . . . . . . . . . . . . HTML B1
Appendix C Cascading Styles and Selectors . . . . . . . . . . . . . . . . . . . . . HTML C1
Appendix D Making the Web More Accessible . . . . . . . . . . . . . . . . . . . HTML D1
Appendix E Designing for the Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML E1
Appendix F Page Validation with XHTML . . . . . . . . . . . . . . . . . . . . . . HTML F1
Glossary REF 1
Index REF 11
viii New Perspectives Series
TABLE OF CONTENTS
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii SESSION 1.2��HTML 22
Writing the Page Body . . . . . . . . . . . . . . . . . . . . . . HTML 24

HTML LEVEL I TUTORIALS Using Sectioning Elements . . . . . . . . . . . . . . . . HTML 24
Tutorial 1 Getting Started with HTML 5 Comparing Sections in HTML 4 and HTML 5 . . HTML 26
Creating a Website for a Food Vendor . . . . . . . . . HTML 1
Using Grouping Elements . . . . . . . . . . . . . . . . . . HTML 26
SESSION 1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 2
Using Text-Level Elements . . . . . . . . . . . . . . . . HTML 29
Exploring the World Wide Web . . . . . . . . . . . . . . . . HTML 4
Linking an HTML Document to a Style Sheet . . . . . HTML 32
Networks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 4
Working with Character Sets and Special
Locating Information on a Network . . . . . . . . . . . HTML 4 Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 33
Web Pages and Web Servers . . . . . . . . . . . . . . . . HTML 4 Character Encoding . . . . . . . . . . . . . . . . . . . . . . HTML 33
Introducing HTML . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 5 Character Entity References . . . . . . . . . . . . . . . HTML 34
The History of HTML . . . . . . . . . . . . . . . . . . . . . HTML 5 Working with Inline Images . . . . . . . . . . . . . . . . . . HTML 36
Tools for Working with HTML . . . . . . . . . . . . . . . . . HTML 6 Line Breaks and Other Empty Elements . . . . . . . HTML 38
Content Management Systems and Working with Block Quotes and Other Elements . . . HTML 39
Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 7
Session 1.2 Quick Check . . . . . . . . . . . . . . . . . . . . . HTML 45
Testing your Code . . . . . . . . . . . . . . . . . . . . . . . . HTML 7
SESSION 1.3��HTML 46
Exploring an HTML Document . . . . . . . . . . . . . . . . . HTML 8
Working with Lists . . . . . . . . . . . . . . . . . . . . . . . . . HTML 48
The Document Type Declaration . . . . . . . . . . . . . HTML 8
Ordered Lists . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 48
Introducing Element Tags . . . . . . . . . . . . . . . . . . HTML 9
Unordered Lists . . . . . . . . . . . . . . . . . . . . . . . . . HTML 49
The Element Hierarchy . . . . . . . . . . . . . . . . . . . HTML 10
Description Lists . . . . . . . . . . . . . . . . . . . . . . . . HTML 51
Introducing Element Attributes . . . . . . . . . . . . . HTML 11
Navigation Lists . . . . . . . . . . . . . . . . . . . . . . . . HTML 55
Handling White Space . . . . . . . . . . . . . . . . . . . . HTML 12
Working with Hypertext Links . . . . . . . . . . . . . . . . HTML 57
Viewing an HTML File in a Browser . . . . . . . . . HTML 12
Turning an Inline Image into a Link . . . . . . . . . . HTML 59
Creating an HTML File . . . . . . . . . . . . . . . . . . . HTML 13
Specifying the Folder Path . . . . . . . . . . . . . . . . . . . HTML 60
Creating the Document Head . . . . . . . . . . . . . . . . . HTML 15
Absolute Paths . . . . . . . . . . . . . . . . . . . . . . . . . HTML 61
Setting the Page Title . . . . . . . . . . . . . . . . . . . . HTML 16
Relative Paths . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 61
Adding Metadata to the Document . . . . . . . . . . HTML 16
Setting the Base Path . . . . . . . . . . . . . . . . . . . . HTML 62
Adding Comments to Your Document . . . . . . . . . . . HTML 18
Linking to a Location within a Document . . . . . . . . HTML 63
HTML 5 and CSS, 8th Edition, Comprehensive ix
Marking Locations with the id Attribute . . . . . . . HTML 63 RGB Color Values . . . . . . . . . . . . . . . . . . . . . . . HTML 99
Linking to an id . . . . . . . . . . . . . . . . . . . . . . . . . HTML 63 HSL Color Values . . . . . . . . . . . . . . . . . . . . . . HTML 101
Anchors and the name Attribute . . . . . . . . . . . . HTML 63 Defining Semi-Opaque Colors . . . . . . . . . . . . . HTML 102
Linking to the Internet and Other Resources . . . . . . HTML 64 Setting Text and Background Colors . . . . . . . . HTML 102
Linking to a Web Resource . . . . . . . . . . . . . . . . HTML 64 Employing Progressive Enhancement . . . . . . . . . . HTML 106
Linking to an Email Address . . . . . . . . . . . . . . . HTML 65 Session 2.1 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 107
Linking to a Phone Number . . . . . . . . . . . . . . . . HTML 67

Working with Hypertext Attributes . . . . . . . . . . . . . HTML 68
Exploring Selector Patterns . . . . . . . . . . . . . . . . . HTML 110
Validating Your Website . . . . . . . . . . . . . . . . . . . . . HTML 69
Contextual Selectors . . . . . . . . . . . . . . . . . . . . HTML 110
Attribute Selectors . . . . . . . . . . . . . . . . . . . . . HTML 113
Review Assignments . . . . . . . . . . . . . . . . . . . . . . . . HTML 76
Working with Fonts . . . . . . . . . . . . . . . . . . . . . . . HTML 117
Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 79
Choosing a Font . . . . . . . . . . . . . . . . . . . . . . . . HTML 117
Tutorial 2 Getting Started with CSS
Exploring Web Fonts . . . . . . . . . . . . . . . . . . . . . HTML 119
Designing a Website for a Fitness Club . . . . . . . HTML 85
The @font-face Rule . . . . . . . . . . . . . . . . . . . . HTML 120
SESSION 2.1 ��HTML 86
Setting the Font Size . . . . . . . . . . . . . . . . . . . . . . HTML 123
Introducing CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 88
Absolute Units . . . . . . . . . . . . . . . . . . . . . . . . . HTML 123
Types of Style Sheets . . . . . . . . . . . . . . . . . . . . HTML 88
Relative Units . . . . . . . . . . . . . . . . . . . . . . . . . HTML 123
Viewing a Page Using Different Style Sheets . . . HTML 89
Scaling Fonts with ems and rems . . . . . . . . . . . HTML 124
Exploring Style Rules . . . . . . . . . . . . . . . . . . . . . . . HTML 92
Using Viewport Units . . . . . . . . . . . . . . . . . . . . HTML 125
Browser Extensions . . . . . . . . . . . . . . . . . . . . . . HTML 92
Sizing Keywords . . . . . . . . . . . . . . . . . . . . . . . HTML 125
Embedded Style Sheets . . . . . . . . . . . . . . . . . . . HTML 93
Controlling Spacing and Indentation . . . . . . . . . . . HTML 127
Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 93
Working with Font Styles . . . . . . . . . . . . . . . . . . . HTML 129
Style Specificity and Precedence . . . . . . . . . . . . HTML 94
Aligning Text Horizontally and Vertically . . . . . HTML 130
Style Inheritance . . . . . . . . . . . . . . . . . . . . . . . . HTML 94
Combining All Text Formatting in a
Browser Developer Tools . . . . . . . . . . . . . . . . . . HTML 95 Single Style . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 131
Creating a Style Sheet . . . . . . . . . . . . . . . . . . . . . . HTML 96 Session 2.2 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 133
Writing Style Comments . . . . . . . . . . . . . . . . . . HTML 96

Defining the Character Encoding . . . . . . . . . . . . HTML 97
Formatting Lists . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 138
Importing Style Sheets . . . . . . . . . . . . . . . . . . . HTML 98
Choosing a List Style Type . . . . . . . . . . . . . . . . HTML 138
Working with Color in CSS . . . . . . . . . . . . . . . . . . . HTML 98
Creating an Outline Style . . . . . . . . . . . . . . . . . HTML 138
Color Names . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 98
x New Perspectives Series
Using Images for List Markers . . . . . . . . . . . . . . HTML 141 Working with Container Collapse . . . . . . . . . . . HTML 201
Setting the List Marker Position . . . . . . . . . . . HTML 142 Session 3.1 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 204
Working with Margins and Padding . . . . . . . . . . . HTML 143

Setting the Padding Space . . . . . . . . . . . . . . . HTML 144
Introducing Grid Layouts . . . . . . . . . . . . . . . . . . . HTML 208
Setting the Margin and the Border Spaces . . . . HTML 146
Overview of Grid-Based Layouts . . . . . . . . . . . HTML 208
Using Pseudo-Classes and Pseudo-Elements . . . . . HTML 149
Fixed and Fluid Grids . . . . . . . . . . . . . . . . . . . . HTML 209
Pseudo-Classes . . . . . . . . . . . . . . . . . . . . . . . . HTML 149
CSS Frameworks . . . . . . . . . . . . . . . . . . . . . . . HTML 210
Pseudo-classes for Hypertext . . . . . . . . . . . . . HTML 152
Introducing CSS Grids . . . . . . . . . . . . . . . . . . . . . HTML 210
Pseudo-Elements . . . . . . . . . . . . . . . . . . . . . . HTML 154
Creating a CSS Grid . . . . . . . . . . . . . . . . . . . . . . . HTML 213
Generating Content with CSS . . . . . . . . . . . . . . . . HTML 155
Working with Grid Rows and Columns . . . . . . . . . HTML 215
Displaying Attribute Values . . . . . . . . . . . . . . . HTML 156
Track Sizes with Fractional Units . . . . . . . . . . . HTML 217
Inserting Quotation Marks . . . . . . . . . . . . . . . . . . HTML 157
Repeating Columns and Rows . . . . . . . . . . . . . HTML 218
Validating Your Style Sheet . . . . . . . . . . . . . . . . . HTML 158
Applying a Grid Layout . . . . . . . . . . . . . . . . . . . HTML 219
Session 2.3 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 160
Outlining a Grid . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 221
Review Assignments . . . . . . . . . . . . . . . . . . . . . . . HTML 166
Placing Items within a Grid . . . . . . . . . . . . . . . . . HTML 223
Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 169
Placing Items by Row and Column . . . . . . . . . . HTML 224
HTML LEVEL II TUTORIALS Using the span Keyword . . . . . . . . . . . . . . . . . HTML 226
Placing Grid Items by Area . . . . . . . . . . . . . . . HTML 228

Tutorial 3 Designing a Page Layout
Creating a Website for a Chocolatier . . . . . . . HTML 175 Defining the Grid Gap . . . . . . . . . . . . . . . . . . . . . HTML 232
SESSION 3.1 ��HTML 176 Managing Space within a Grid . . . . . . . . . . . . . . . HTML 234
Introducing the display Style . . . . . . . . . . . . . . . . HTML 178 Alignment for a Single Grid Cell . . . . . . . . . . . HTML 235
Creating a Reset Style Sheet . . . . . . . . . . . . . . . . HTML 178 Aligning the Grid . . . . . . . . . . . . . . . . . . . . . . . HTML 235
Exploring Page Layout Designs . . . . . . . . . . . . . . HTML 182 Session 3.2 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 237
Fixed, Fluid, and Elastic Layouts . . . . . . . . . . . HTML 182 SESSION 3.3 ��HTML 238
Working with Width and Height . . . . . . . . . . . . . . HTML 184 Positioning Objects . . . . . . . . . . . . . . . . . . . . . . . . HTML 240
Setting Maximum and Minimum Dimensions . . HTML 184 The CSS Positioning Styles . . . . . . . . . . . . . . . HTML 240
Centering a Block Element . . . . . . . . . . . . . . . HTML 187 Relative Positioning . . . . . . . . . . . . . . . . . . . . . HTML 240
Vertical Centering . . . . . . . . . . . . . . . . . . . . . . HTML 188 Absolute Positioning . . . . . . . . . . . . . . . . . . . . HTML 241
Floating Page Content . . . . . . . . . . . . . . . . . . . . . HTML 189 Fixed and Inherited Positioning . . . . . . . . . . . . HTML 244
Clearing a Float . . . . . . . . . . . . . . . . . . . . . . . . HTML 193 Using the Positioning Styles . . . . . . . . . . . . . . . HTML 244
Refining a Floated Layout . . . . . . . . . . . . . . . . HTML 197
HTML 5 and CSS, 8th Edition, Comprehensive xi
Handling Overflow . . . . . . . . . . . . . . . . . . . . . . . . HTML 254 Gradients and Color Stops . . . . . . . . . . . . . . . . HTML 315
Clipping an Element . . . . . . . . . . . . . . . . . . . . . . . HTML 257 Creating a Radial Gradient . . . . . . . . . . . . . . . HTML 316
Stacking Elements . . . . . . . . . . . . . . . . . . . . . . . . HTML 258 Repeating a Gradient . . . . . . . . . . . . . . . . . . . . HTML 320
Session 3.3 Quick Check . . . . . . . . . . . . . . . . . . . HTML 260 Creating Semi-Transparent Objects . . . . . . . . . . . . HTML 322
Review Assignments . . . . . . . . . . . . . . . . . . . . . . . HTML 267 Session 4.2 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 324

SESSION 4.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 326
Tutorial 4 Graphic Design with CSS
Transforming Page Objects . . . . . . . . . . . . . . . . . . HTML 328
Creating a Graphic Design for a
Genealogy Website . . . . . . . . . . . . . . . . . . . . . . HTML 273 Transformations in Three Dimensions . . . . . . . . HTML 332
Understanding Perspective . . . . . . . . . . . . . . . HTML 333

SESSION 4.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 274
Exploring CSS Filters . . . . . . . . . . . . . . . . . . . . . . HTML 337
Creating Figure Boxes . . . . . . . . . . . . . . . . . . . . . HTML 276
Working with Image Maps . . . . . . . . . . . . . . . . . . HTML 341
Exploring Background Styles . . . . . . . . . . . . . . . . HTML 280
Defining a Client-Side Image Map . . . . . . . . . . HTML 341
Tiling a Background Image . . . . . . . . . . . . . . . HTML 281
Applying an Image Map . . . . . . . . . . . . . . . . . . HTML 345
Attaching the Background Image . . . . . . . . . . . HTML 283
Setting the Background Image Position . . . . . . HTML 283
Review Assignments . . . . . . . . . . . . . . . . . . . . . . HTML 354
Defining the Extent of the Background . . . . . . HTML 284
Sizing and Clipping an Image . . . . . . . . . . . . . . HTML 285
The background Property . . . . . . . . . . . . . . . . HTML 286

Tutorial 5 Designing for the Mobile Web
Creating a Mobile Website for a Daycare Center . . HTML 361
Adding Multiple Backgrounds . . . . . . . . . . . . . HTML 288
Working with Borders . . . . . . . . . . . . . . . . . . . . . HTML 290
Introducing Responsive Design . . . . . . . . . . . . . . . HTML 364
Setting Border Width and Color . . . . . . . . . . . HTML 290
Introducing Media Queries . . . . . . . . . . . . . . . . . . HTML 365
Setting the Border Design . . . . . . . . . . . . . . . . HTML 291
The @media Rule . . . . . . . . . . . . . . . . . . . . . . HTML 366
Creating Rounded Corners . . . . . . . . . . . . . . . . HTML 293
Media Queries and Device Features . . . . . . . . . HTML 367
Applying a Border Image . . . . . . . . . . . . . . . . . HTML 297
Applying Media Queries to a Style Sheet . . . . . HTML 369
Exploring Viewports and Device Width . . . . . . . . . HTML 372
Creating a Mobile Design . . . . . . . . . . . . . . . . . . . HTML 375
Creating Drop Shadows . . . . . . . . . . . . . . . . . . . . HTML 304
Creating a Pulldown Menu with CSS . . . . . . . . HTML 376
Creating a Text Shadow . . . . . . . . . . . . . . . . . . HTML 304
Testing Your Mobile Website . . . . . . . . . . . . . . HTML 379
Creating a Box Shadow . . . . . . . . . . . . . . . . . . HTML 306
Creating a Tablet Design . . . . . . . . . . . . . . . . . . . HTML 383
Applying a Color Gradient . . . . . . . . . . . . . . . . . . HTML 312
Creating a Desktop Design . . . . . . . . . . . . . . . . . . HTML 387
Creating a Linear Gradient . . . . . . . . . . . . . . . HTML 312
xii New Perspectives Series
SESSION 5.2��HTML 392 Session 5.3 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 437
Introducing Flexible Boxes . . . . . . . . . . . . . . . . . . HTML 394 Review Assignments . . . . . . . . . . . . . . . . . . . . . . . HTML 443
Defining a Flexible Box . . . . . . . . . . . . . . . . . . HTML 394 Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 446
Cross-Browser Flexboxes . . . . . . . . . . . . . . . . . HTML 395

HTML LEVEL III TUTORIALS
Setting the Flexbox Flow . . . . . . . . . . . . . . . . . HTML 395
Tutorial 6 Working with Tables and Columns
Working with Flex Items . . . . . . . . . . . . . . . . . . . HTML 397 Creating a Program Schedule for a Radio Station . . HTML 451
Setting the Flex Basis . . . . . . . . . . . . . . . . . . . HTML 397
Defining the Flex Growth . . . . . . . . . . . . . . . . . HTML 398
Introducing Web Tables . . . . . . . . . . . . . . . . . . . . HTML 454
Defining the Shrink Rate . . . . . . . . . . . . . . . . . HTML 399
Marking Tables and Table Rows . . . . . . . . . . . . HTML 454
The flex Property . . . . . . . . . . . . . . . . . . . . . . HTML 401
Marking Table Headings and Table Data . . . . . HTML 456
Applying a Flexbox Layout . . . . . . . . . . . . . . . HTML 402
Adding Table Borders with CSS . . . . . . . . . . . . . . HTML 459
Reordering Page Content with Flexboxes . . . . . . . HTML 407
Spanning Rows and Columns . . . . . . . . . . . . . . . . HTML 464
Exploring Flexbox Layouts . . . . . . . . . . . . . . . . . . HTML 409
Creating a Table Caption . . . . . . . . . . . . . . . . . . . HTML 471
Aligning Items along the Main Axis . . . . . . . . . HTML 409
Aligning Flex Lines . . . . . . . . . . . . . . . . . . . . . HTML 410
Aligning Items along the Cross Axis . . . . . . . . . HTML 410 SESSION 6.2 ��HTML 476
Creating a Navicon Menu . . . . . . . . . . . . . . . . . . . HTML 412 Creating Row Groups . . . . . . . . . . . . . . . . . . . . . . HTML 478
Session 5.2 Quick Check . . . . . . . . . . . . . . . . . . . . . HTML 417 Creating Column Groups . . . . . . . . . . . . . . . . . . . . HTML 482
Exploring CSS Styles and Web Tables . . . . . . . . . HTML 485

Working with Width and Height . . . . . . . . . . . . HTML 486
Designing for Printed Media . . . . . . . . . . . . . . . . . HTML 420
Applying Table Styles to Other
Previewing the Print Version . . . . . . . . . . . . . . HTML 420 Page Elements . . . . . . . . . . . . . . . . . . . . . . . . HTML 490
Applying a Media Query for Printed Output . . . HTML 421 Tables and Responsive Design . . . . . . . . . . . . . . . . HTML 492
Working with the @page Rule . . . . . . . . . . . . . . . HTML 422 Designing a Column Layout . . . . . . . . . . . . . . . . . HTML 496
Setting the Page Size . . . . . . . . . . . . . . . . . . . HTML 423 Setting the Number of Columns . . . . . . . . . . . . HTML 496
Using the Page Pseudo-Classes . . . . . . . . . . . . HTML 423 Defining Columns Widths and Gaps . . . . . . . . . HTML 498
Page Names and the Page Property . . . . . . . . HTML 423 Managing Column Breaks . . . . . . . . . . . . . . . . HTML 501
Formatting Hypertext Links for Printing . . . . . HTML 428 Spanning Cell Columns . . . . . . . . . . . . . . . . . . HTML 503
Working with Page Breaks . . . . . . . . . . . . . . . . . . HTML 431 Session 6.2 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 505
Preventing Page Breaks . . . . . . . . . . . . . . . . . HTML 432 Review Assignments . . . . . . . . . . . . . . . . . . . . . . . HTML 510
Working with Widows and Orphans . . . . . . . . . HTML 434 Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 512
HTML 5 and CSS, 8th Edition, Comprehensive xiii
Tutorial 7 Designing a Web Form Creating a Range Slider . . . . . . . . . . . . . . . . . . HTML 566

Creating a Survey Form . . . . . . . . . . . . . . . . . . HTML 517
Suggesting Options with Data Lists . . . . . . . . . . . . HTML 569
SESSION 7.1 ��HTML 518 Working with Form Buttons . . . . . . . . . . . . . . . . . HTML 572
Introducing Web Forms . . . . . . . . . . . . . . . . . . . . HTML 520 Creating a Command Button . . . . . . . . . . . . . . HTML 572
Parts of a Web Form . . . . . . . . . . . . . . . . . . . . HTML 520 Creating Submit and Reset Buttons . . . . . . . . . HTML 572
Forms and Server-Based Programs . . . . . . . . . HTML 521 Designing a Custom Button . . . . . . . . . . . . . . . HTML 575
Starting a Web Form . . . . . . . . . . . . . . . . . . . . . . HTML 522 Validating a Web Form . . . . . . . . . . . . . . . . . . . . . HTML 575
Interacting with the Web Server . . . . . . . . . . . HTML 523 Identifying Required Values . . . . . . . . . . . . . . . HTML 575
Creating a Field Set . . . . . . . . . . . . . . . . . . . . . . . HTML 525 Validating Based on Data Type . . . . . . . . . . . . HTML 577
Marking a Field Set . . . . . . . . . . . . . . . . . . . . . HTML 525 Testing for a Valid Pattern . . . . . . . . . . . . . . . HTML 578
Adding a Field Set Legend . . . . . . . . . . . . . . . HTML 526 Defining the Length of the Field Value . . . . . . . HTML 580
Creating Input Boxes . . . . . . . . . . . . . . . . . . . . . . HTML 528 Applying Inline Validation . . . . . . . . . . . . . . . . . . . HTML 581
Input Types . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 528 Using the focus Pseudo-Class . . . . . . . . . . . . . . HTML 581
Input Types and Virtual Keyboards . . . . . . . . . HTML 531 Pseudo-Classes for Valid and Invalid Data . . . . HTML 583
Adding Field Labels . . . . . . . . . . . . . . . . . . . . . . . HTML 532 Session 7.3 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 586
Designing a Form Layout . . . . . . . . . . . . . . . . . . . HTML 534 Review Assignments . . . . . . . . . . . . . . . . . . . . . . . HTML 592
Defining Default Values and Placeholders . . . . . . . HTML 539 Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 595
Session 7.1 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 543 Tutorial 8 Enhancing a Website with Multimedia
Working with Sound, Video, and Animation . . . HTML 601
Entering Date and Time Values . . . . . . . . . . . . . . HTML 546
Introducing Multimedia on the Web . . . . . . . . . . . HTML 604
Creating a Selection List . . . . . . . . . . . . . . . . . . . HTML 547
Understanding Codecs and Containers . . . . . . . HTML 604
Working with select Attributes . . . . . . . . . . . . . HTML 549
Understanding Plug-Ins . . . . . . . . . . . . . . . . . . HTML 605
Grouping Selection Options . . . . . . . . . . . . . . . HTML 551
Working with the audio Element . . . . . . . . . . . . . . HTML 607
Creating Option Buttons . . . . . . . . . . . . . . . . . . . . HTML 553
Browsers and Audio Formats . . . . . . . . . . . . . . HTML 607
Creating Check Boxes . . . . . . . . . . . . . . . . . . . . . . HTML 556
Applying Styles to the Media Player . . . . . . . . HTML 610
Creating a Text Area Box . . . . . . . . . . . . . . . . . . . HTML 558
Providing a Fallback to an Audio Clip . . . . . . . . HTML 613
Exploring Embedded Objects . . . . . . . . . . . . . . . . HTML 615
Plug-In Attributes . . . . . . . . . . . . . . . . . . . . . . HTML 615
Entering Numeric Data . . . . . . . . . . . . . . . . . . . . HTML 564
Plug-Ins as Fallback Options . . . . . . . . . . . . . . HTML 616
Creating a Spinner Control . . . . . . . . . . . . . . . HTML 564
xiv New Perspectives Series
SESSION 8.2��HTML 618 The Development of JavaScript . . . . . . . . . . . . HTML 685
Exploring Digital Video . . . . . . . . . . . . . . . . . . . . HTML 620 Working with the script Element . . . . . . . . . . . . . HTML 686
Video Formats and Codecs . . . . . . . . . . . . . . . HTML 620 Loading the script Element . . . . . . . . . . . . . . . HTML 686
Using the HTML 5 video Element . . . . . . . . . . . . . HTML 621 Inserting the script Element . . . . . . . . . . . . . . HTML 687
Adding a Text Track to Video . . . . . . . . . . . . . . . . HTML 624 Creating a JavaScript Program . . . . . . . . . . . . . . . HTML 689
Making Tracks with WebVTT . . . . . . . . . . . . . HTML 625 Adding Comments to your JavaScript Code . . . HTML 689
Placing the Cue Text . . . . . . . . . . . . . . . . . . . . HTML 628 Writing a JavaScript Command . . . . . . . . . . . . HTML 690
Applying Styles to Track Cues . . . . . . . . . . . . . HTML 630 Understanding JavaScript Syntax . . . . . . . . . . HTML 691
Using Third-Party Video Players . . . . . . . . . . . . . HTML 634 Debugging Your Code . . . . . . . . . . . . . . . . . . . . . . HTML 692
Exploring the Flash Player . . . . . . . . . . . . . . . HTML 635 Opening a Debugger . . . . . . . . . . . . . . . . . . . . HTML 692
Embedding Videos from YouTube . . . . . . . . . . . HTML 636 Inserting a Breakpoint . . . . . . . . . . . . . . . . . . . HTML 694
HTML 5 Video Players . . . . . . . . . . . . . . . . . . HTML 637 Applying Strict Usage of JavaScript . . . . . . . . . HTML 695
Session 8.2 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 639 Session 9.1 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 697
SESSION 8.3 ��HTML 640 SESSION 9.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 698
Creating Transitions with CSS . . . . . . . . . . . . . . . HTML 642 Introducing Objects . . . . . . . . . . . . . . . . . . . . . . . HTML 700
Introducing Transitions . . . . . . . . . . . . . . . . . . HTML 642 Object References . . . . . . . . . . . . . . . . . . . . . . HTML 701
Setting the Transition Timing . . . . . . . . . . . . . . HTML 644 Referencing Object Collections . . . . . . . . . . . . HTML 701
Delaying a Transition . . . . . . . . . . . . . . . . . . . . HTML 647 Referencing an Object by ID and Name . . . . . . HTML 703
Creating a Hover Transition . . . . . . . . . . . . . . . HTML 647 Changing Properties and Applying Methods . . . . . HTML 704
Animating Objects with CSS . . . . . . . . . . . . . . . . . HTML 652 Object Properties . . . . . . . . . . . . . . . . . . . . . . HTML 704
The @keyframes Rule . . . . . . . . . . . . . . . . . . . HTML 652 Applying a Method . . . . . . . . . . . . . . . . . . . . . HTML 704
Applying an Animation . . . . . . . . . . . . . . . . . . . HTML 655 Writing HTML Code . . . . . . . . . . . . . . . . . . . . . . . HTML 705
Controlling an Animation . . . . . . . . . . . . . . . . . HTML 658 Working with Variables . . . . . . . . . . . . . . . . . . . . HTML 709
Session 8.3 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 666 Declaring a Variable . . . . . . . . . . . . . . . . . . . . HTML 709
Review Assignments . . . . . . . . . . . . . . . . . . . . . . . HTML 673 Variables and Data Types . . . . . . . . . . . . . . . . HTML 710
Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 676 Using a Variable . . . . . . . . . . . . . . . . . . . . . . . HTML 711
Tutorial 9 Getting Started with JavaScript Working with Date Objects . . . . . . . . . . . . . . . . . . HTML 711
Creating a Countdown Clock . . . . . . . . . . . . . . . HTML 681
Creating a Date Object . . . . . . . . . . . . . . . . . . HTML 712
SESSION 9.1 ��HTML 682 Applying Date Methods . . . . . . . . . . . . . . . . . . HTML 713
Introducing JavaScript . . . . . . . . . . . . . . . . . . . . . HTML 684 Setting Date and Time Values . . . . . . . . . . . . . HTML 716
Server-Side and Client-Side Programming . . . . HTML 684 Session 9.2 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 717
HTML 5 and CSS, 8th Edition, Comprehensive xv
SESSION 9.3 ��HTML 718 Reversing an Array . . . . . . . . . . . . . . . . . . . . . HTML 763
Working with Operators and Operands . . . . . . . . . HTML 720 Sorting an Array . . . . . . . . . . . . . . . . . . . . . . . HTML 764
Using Assignment Operators . . . . . . . . . . . . . . HTML 720 Extracting and Inserting Array Items . . . . . . . . HTML 765
Calculating the Days Left in the Year . . . . . . . . HTML 721 Using Arrays as Data Stacks . . . . . . . . . . . . . . HTML 766
Working with the Math Object . . . . . . . . . . . . . . . HTML 723 Session 10.1 Quick Check . . . . . . . . . . . . . . . . . . . HTML 769
Using Math Methods . . . . . . . . . . . . . . . . . . . . HTML 723

SESSION 10.2 �� HTML 770
Using Math Constants . . . . . . . . . . . . . . . . . . . HTML 728
Working with Program Loops . . . . . . . . . . . . . . . . HTML 772
Working with JavaScript Functions . . . . . . . . . . . . HTML 730
Exploring the for Loop . . . . . . . . . . . . . . . . . . HTML 772
Calling a Function . . . . . . . . . . . . . . . . . . . . . . HTML 732
Exploring the while Loop . . . . . . . . . . . . . . . . . HTML 774
Creating a Function to Return a Value . . . . . . . HTML 733
Exploring the do/while Loop . . . . . . . . . . . . . . HTML 775
Running Timed Commands . . . . . . . . . . . . . . . . . . HTML 734
Comparison and Logical Operators . . . . . . . . . . . . HTML 776
Working with Time-Delayed Commands . . . . . . HTML 734
Program Loops and Arrays . . . . . . . . . . . . . . . . . . HTML 777
Running Commands at Specified Intervals . . . . HTML 734
Array Methods to Loop Through Arrays . . . . . . HTML 780
Controlling How JavaScript Works with
Running a Function for Each Array Item . . . . . HTML 781
Numeric Values . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 736
Mapping an Array . . . . . . . . . . . . . . . . . . . . . . HTML 781
Handling Illegal Operations . . . . . . . . . . . . . . . HTML 736
Filtering an Array . . . . . . . . . . . . . . . . . . . . . . HTML 782
Defining a Number Format . . . . . . . . . . . . . . . HTML 737
Session 10.2 Quick Check . . . . . . . . . . . . . . . . . . . HTML 785
Converting Between Numbers and Text . . . . . HTML 737
Session 9.3 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 739 SESSION 10.3 . . . . . . . . . . . . . . . . . . . . . . . . . HTML 786
Review Assignments . . . . . . . . . . . . . . . . . . . . . . . HTML 744 Introducing Conditional Statements . . . . . . . . . . . HTML 788
Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 746 Exploring the if Statement . . . . . . . . . . . . . . . HTML 789
Tutorial 10 Exploring Arrays, Loops, and Conditional Nesting if Statements . . . . . . . . . . . . . . . . . . . HTML 791
Statements Exploring the if else Statement . . . . . . . . . . . . HTML 793
Creating a Monthly Calendar . . . . . . . . . . . . . . HTML 751
Using Multiple else if Statements . . . . . . . . . . HTML 794
SESSION 10.1 . . . . . . . . . . . . . . . . . . . . . . . . . HTML 752
Completing the Calendar App . . . . . . . . . . . . . . . . HTML 796
Introducing the Monthly Calendar . . . . . . . . . . . . HTML 754
Setting the First Day of the Month . . . . . . . . . HTML 797
Reviewing the Calendar Structure . . . . . . . . . . HTML 755
Placing the First Day of the Month . . . . . . . . . HTML 798
Adding the calendar() Function . . . . . . . . . . . . HTML 756
Writing the Calendar Days . . . . . . . . . . . . . . . . HTML 799
Introducing Arrays . . . . . . . . . . . . . . . . . . . . . . . . HTML 757
Highlighting the Current Date . . . . . . . . . . . . . HTML 801
Creating and Populating an Array . . . . . . . . . . HTML 758
Displaying Daily Events . . . . . . . . . . . . . . . . . . HTML 803
Working with Array Length . . . . . . . . . . . . . . . HTML 761
xvi New Perspectives Series
Managing Program Loops and Conditional Appendix C Cascading Styles and Selectors . . HTML C1
Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 806
Appendix D Making the Web
Exploring the break Command . . . . . . . . . . . . . HTML 806
More Accessible. . . . . . . . . . . . . . . . . . . . . . . . HTML D1
Exploring the continue Command . . . . . . . . . . HTML 806
Appendix E Designing for the Web. . . . . . . . . . HTML E1
Exploring Statement Labels . . . . . . . . . . . . . . HTML 807
Appendix F Page Validation with XHTML. . . . HTML F1
Session 10.3 Quick Check . . . . . . . . . . . . . . . . . . . HTML 809
GLOSSARY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .REF 1
Review Assignments . . . . . . . . . . . . . . . . . . . . . . . HTML 815
Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 817 INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . REF 11
Appendix A Color Names with Color Values,

and HTML Character Entities . . . . . . . . . . . . . HTML A1
Appendix B HTML Elements and Attributes. . . HTML B1
TUTORIAL
1
O B J E C T I VES Getting Started
Session 1.1
• Explore the history of the web
• Create the structure of an
with HTML 5
HTML document Creating a Website for a Food Vendor
• Insert HTML elements and
attributes
• Insert metadata into a document
• Define a page title Case | Curbside Thai
Session 1.2 Sajja Adulet is the owner and master chef of Curbside Thai,
• Mark page structures with a restaurant owner and now food truck vendor in Charlotte,
sectioning elements North Carolina that specializes in Thai dishes. Sajja has hired
• Organize page content with you to develop the company’s website. The website will display
grouping elements information about Curbside Thai, including the truck’s daily
• Mark content with text-level locations, menu, catering opportunities, and contact information.
elements Sajja wants the pages to convey the message that customers will get
• Insert inline images the same great food and service whether they order in the restaurant
• Insert symbols based on
or from the food truck. Some of the materials for these pages have
character codes
already been completed by a former employee and Sajja needs you
Session 1.3 to finish the job by converting that work into a collection of web
• Mark content using lists page documents. To complete this task, you’ll learn how to write
• Create a navigation list and edit HTML 5 code and how to get your HTML files ready for
• Link to files within a website display on the World Wide Web.
with hypertext links
• Link to email addresses and
telephone numbers
STARTING DATA FILES
html01 tutorial review code1
ct_catering_txt.html mp_catering_txt.html code1-1_txt.html

ct_contact_txt.html mp_events_txt.html
ct_locations_txt.html mp_index_txt.html
ct_menu_txt.html mp_menu_txt.html + 5 files
ct_reviews._txt.html + 16 files
code2 code3 code4
code1-2_txt.html code1-3_txt.html + 7 files code1-4_txt.html + 2 files
case1 case2 demo
jtc_index_txt.html dr_faq_txt.html demo_characters.html

jtc_services_txt.html dr_index_txt.html demo_html.html
+ 6 files dr_info_txt.html + 9 files + 3 files
HTML 1
HTML 2 HTML 5 and CSS | Tutorial 1 Getting Started with HTML 5
Session 1.1 Visual Overview:

The document type
declaration is a processing The <html> tag
instruction indicating the marks the
markup language used in beginning of the
the document. HTML document.
The <head> tag marks

the document head
containing information An HTML comment is a
about the document. descriptive note added
to the HTML file.
The <meta> tag marks
metadata containing The <title> tag marks
information about the the page title that
document. appears on the browser
title bar or browser tab.
The <body> tag marks

the document body
containing all of the
content that will
appear in the page.
An opening tag marks

the start of the element
content; this tag marks
the start of page footer.
© Kzenon/Shutterstock.com;
A closing tag marks the © martiapunts/Shutterstock.com;
end of the element © Brian A Jackson/Shutterstock.com;
content; this tag marks the © sayhmog/Shutterstock.com;
end of the page footer. © rangizzz/Shutterstock.com
Tutorial 1 Getting Started with HTML 5 | HTML 5 and CSS HTML 3
The Structure of an HTML Document

Document as it appears
in the browser.
The exact layout of the

document elements is
determined by a style
sheet and not by the
document markup.
Kzenon/Shutterstock.com; © Courtesy Patrick Carey; martiapunts/Shutterstock.

com; Brian A Jackson/Shutterstock.com; A Studios/Shutterstock.com; rangizzz/
Shutterstock.com
Exploring the World Wide Web

It is no exaggeration to say that the World Wide Web has had as profound an effect on
human communication as the printing press. One key difference is that operation of the
printing press was limited to a few select tradesmen but on the web everyone can be a
publisher of a website. Before creating your first website, you’ll examine a short history
of the web because that history impacts the way you write code for your web pages.
You’ll start by exploring the basic terminology of computer networks.
Networks
A network is a structure in which information and services are shared among devices
known as nodes or hosts. A host can be any device that is capable of sending or
receiving data electronically. The most common hosts that you will work with are
desktop computers, laptops, tablets, mobile phones, and printers.
A host that provides information or a service to other devices on the network is
called a server. For example, a print server provides printing services; a file server
provides storage space for saving and retrieving files. The device receiving these
services is called a client. A common network design is the client-server network,
in which the clients access information provided by one or more servers.
Networks are classified based on the range of devices they cover. A network
confined to a small geographic area, such as within a building or department, is
referred to as a local area network or LAN. A network that covers a wider area, such as
several buildings or cities, is called a wide area network or WAN. Wide area networks
typically consist of two or more interconnected local area networks. The largest WAN
in existence is the Internet, which incorporates an almost uncountable number of
networks and hosts involving computers, mobile devices (such as phones, tablets, and
so forth), MP3 players, and gaming systems.
Locating Information on a Network

The biggest obstacle to effectively using the Internet is the network’s sheer scope and
size. Most of the early Internet tools required users to master a bewildering array of
terms, acronyms, and commands. Because network users had to be well versed in
computers and network technology, Internet use was largely limited to programmers
and computer specialists working for universities, large businesses, and the
government.
The solution to this problem was developed in 1989 by Timothy Berners-Lee and
other researchers at the CERN nuclear research facility near Geneva, Switzerland.
They needed an information system that would make it easy for their researchers to
locate and share data on the CERN network, and so developed a system of hypertext
documents. Hypertext is a method of organization in which data sources are
interconnected through a series of links or hyperlinks activated to jump from one data
source to another. Hypertext is ideally suited for the Internet because end users don’t
need to know where a service is located—they only need to know how to activate
the link. The effectiveness of this technique quickly spread beyond Geneva and was
adopted across the Internet. The totality of these interconnected hypertext documents
became known as the World Wide Web. The fact that the Internet and the World
Wide Web are synonymous in many users’ minds is a testament to the success of the
hypertext approach.
Web Pages and Web Servers

Documents on the web are stored on web servers in the form of web pages and
accessed through a software program called a web browser. The browser retrieves the
document from the web server and renders it in a form readable on a client device.
However, because there is a wide selection of client devices ranging from desktop
computers to mobile phones to screen readers that relay data aurally, each web page
must be written in code that is compatible with every device. How does the same
document work with so many different devices? To understand, you need to look at
how web pages are created.
Introducing HTML
A web page is a simple text file written in HTML (Hypertext Markup Language). You’ve
already read about hypertext, but what is a markup language? A markup language is
a language that describes the content and structure of a document by “marking up”
or tagging, different document elements. For example, this tutorial contains several
document elements such as the tutorial title, main headings, subheadings, paragraphs,
figures, figure captions, and so forth. Using a markup language, each of these elements
could be tagged as a distinct item within the “tutorial document.” Thus, a Hypertext
Markup Language is a language that supports tagging distinct document elements and
connecting documents through hypertext links.
The History of HTML

In the early years, no single organization defined the rules or syntax of HTML. Browser
developers were free to define and modify the language in different ways that, of
course, led to problems as different browsers supported different “flavors” of HTML
and a web page that was written based on one browser’s standard might appear totally
different when rendered by another browser. Ultimately, a group of web designers
and programmers called the World Wide Web Consortium, or the W3C, settled on
a set of standards or specifications for all browser manufacturers to follow. The W3C
has no enforcement power, but, because using a uniform language is in everyone’s
best interest, the W3C’s recommendations are usually followed, though not always
immediately. Each new version of HTML goes through years of discussion and testing
before it is formally adopted as the accepted standard. For more information on the
W3C and its services, see its website at www.w3.org.
By 1999, HTML had progressed to the fourth version of the language, HTML 4.01,
which provided support for multimedia, online commerce, and interactive scripts
running within the web page. However, there were still many incompatibilities in
how HTML was implemented across different browsers and how HTML code was
written by web developers. The W3C sought to take control of what had been a
haphazard process and enforce a stricter set of standards in a different version of
the language called XHTML (Extensible Hypertext Markup Language). By 2002, the
W3C had released the specifications for XHTML 1.1. But XHTML 1.1 was intended to
be only a minor upgrade on the way to XHTML 2.0, which would correct many of the
deficiencies found in HTML 4.01 and become the future language of the web. One
problem was that XHTML 2.0 would not be backward compatible with HTML and, as a
result, older websites could not be easily brought into the new standard.
Web designers rebelled at this development and, in response, the Web Hypertext
Application Technology Working Group (WHATWG) was formed in 2004 with the
mission to develop a rival version to XHTML 2.0, called HTML 5. Unlike XHTML 2.0,
HTML 5 would be compatible with earlier versions of HTML and would not apply the
same strict standards that XHTML demanded. For several years, it was unclear which
specification would win out; but by 2006, work on XHTML 2.0 had completely stalled
and the W3C issued a new charter for WHATWG to develop HTML 5 as the de facto
standard for the next generation of HTML. You can learn more about WHATWG and its
current projects at www.whatwg.org. The current version of HTML is HTML 5.2, which
achieved Recommendation status in 2017.
As HTML has evolved, features and code found in earlier versions of the language
are often deprecated, or phased out, and while deprecated features might not be part
You can find out which
browsers support the of HTML 5, that doesn’t mean that you won’t encounter them in your work—indeed, if
features of HTML 5 by you are maintaining older websites, you will often need to interpret code from earlier
going to the website versions of HTML. Moreover, there are still many older browsers and devices in active
caniuse.com. use that do not support HTML 5. Thus, a major challenge for website designers is
writing code that takes advantage of HTML 5 but is still accessible to older technology.
Figure 1–1 summarizes some of the different versions of HTML that have been
implemented over the years. You can read detailed specifications for these versions at
the W3C website.
Figure 1–1 HTML version history
Version Date Description

HTML 1.0 1989 The first public version of HTML
HTML 2.0 1995 HTML version that added interactive elements including web
forms
HTML 3.2 1997 HTML version that provided additional support for web
tables and expanded the options for interactive form
elements and a scripting language
HTML 4.01 1999 HTML version that added support for style sheets to
give web designers greater control over page layout and
appearance, and provided support for multimedia elements
such as audio and video
XHTML 1.0 2001 A reformulation of HTML 4.01 using the XML markup
language in order to provide enforceable standards for
HTML content and to allow HTML to interact with other XML
languages
XHTML 2.0 discontinued in 2009 The follow-up version to XHTML 1.1 designed to fix some of
the problems inherent in HTML 4.01 syntax
HTML 5.0 2012 HTML version providing support for mobile design, semantic
page elements, column layout, form validation, offline
storage, and enhanced multimedia
HTML 5.2 2017 The current version of HTML 5
This book focuses on HTML 5, but you will also review some of the specifications
for HTML 4.01 and XHTML 1.1. Deprecated features from older versions of HTML will
be noted as such in the text.
Tools for Working with HTML

Because HTML documents are simple text files, the first tool you will need is a text
editor. You can use a basic text editor such as Windows Notepad or TextEdit for the
Macintosh, but it is highly recommended that you use one of the many inexpensive
editors that provide built-in support for HTML. These editors include syntax checking
to weed out errors and automatic insertion of HTML code. Some of the more popular
HTML editors are Notepad++ (notepad-plus-plus.org), Eclipse (www.eclipse.org), and
CoffeeCup (www.coffeecup.com).
These enhanced editors are a good way to start learning HTML and they will be all
you need for most basic projects, but professional web developers working on large
websites will quickly gravitate toward using a web IDE (Integrated Development
Environment), which is a software package providing comprehensive coverage of all
phases of the development process from writing HTML code to creating scripts for
programs running on web servers. Some of the popular IDEs for web development
include Adobe Dreamweaver (www.adobe.com), Aptana Studio (www.aptana.com),
NetBeans IDE (netbeans.org), and Komodo IDE (komodoide.com). Web IDEs can be
very expensive, but most software companies will provide a free evaluation period for
you to test their product to see if it meets your needs.
Content Management Systems and Frameworks

You can also invest in a web content management system (wcms) which provides
authoring tools for website content and administration. Management systems provide
prepackaged templates so that users can get websites up and running with only a
minimal knowledge of HTML. Popular content management systems include WordPress
(www.wordpress.org), Joomla (www.joomla.org), and Drupal (www.drupal.org).
Content management systems are not without drawbacks. A wcms can be expensive
to maintain and put extra load on server resources. In addition, the templates and
authoring tools can be difficult to modify if they don’t exactly meet your needs.
A website usually involves the integration of many technologies and languages
beyond HTML, including databases for storing and retrieving data and programs
running on the web server for managing electronic commerce and communication.
Managing all those technologies is the job of a web framework that provides the
foundation of the design and deployment of web applications. Popular frameworks
include Ruby on Rails (rubyonrails.org), ASP.NET (www.asp.net), AngularJS (angularjs.org),
and Django (www.djangoproject.com).
Choosing among all these tools might seem intimidating to you. The bottom line is
that no matter what tools you use, the final code for the website is written in HTML. So,
even if that code is generated by a framework or content management system, you still
need to understand HTML to effectively manage your website. In this book, we’ll try to
keep things as simple as possible: just you, a text editor, and a web browser creating a
foundation for future study.
Testing your Code

Once you’ve written your code, you can test whether your HTML code employs proper
You can analyze syntax and structure by validating it at the W3C validation website (validator.w3.org).
each browser for its Validators, like the one available through the W3C website, are programs that test code
compatibility with to ensure that it contains no syntax errors. The W3C validator will highlight all of the
HTML 5 at the website syntax errors in your document with suggestions about how to fix those errors.
www.html5test.com.
Finally, you’ll need to test it to ensure that your content is rendered correctly.
You should test your code under a variety of screen resolutions, on several different
browsers and, if possible, on different versions of the same browser because users are
not always quick to upgrade their browsers. What may look good on a widescreen
monitor might look horrible on a mobile phone. At a minimum you should test your
website using the following popular browsers: Google Chrome, Internet Explorer, Apple
Safari, Mozilla Firefox, and Opera.
It is not always possible to load multiple versions of the same browser on
one computer, so, in order to test a website against multiple browser versions,
professional designers will upload their code to online testing services that report
on the website’s compatibility across a wide range of browsers, screen resolutions,
and devices, including both desktop and mobile devices. Among the popular
testing services are BrowserStack (www.browserstack.com), CrossBrowserTesting
(www.crossbrowsertesting.com), and Browsera (www.browsera.com). Most of these
sites charge a monthly connection fee with a limited number of testing minutes, so you
should not upload your code until you are past the initial stages of development.
Exploring an HTML Document

Now that you have reviewed the history of the web and some of the challenges in
developing your own website, you will look at the code of an actual HTML file. To get
you started, Sajja Adulet has provided you with the ct_start.html file containing the
code for the initial page users see when they access the Curbside Thai website. Open
Sajja’s file now.
To open the ct_start.html file:

w 1. Use the editor of your choice to open the ct_start.html file from the html01 c
All HTML files have the file tutorial folder.
extension .html or .htm.
Figure 1–2 shows the complete contents of the file as viewed in the
Notepad++ editor.
Figure 1–2 Elements and attributes from an HTML document
two-sided tag
enclosing element
content
empty elements,
which do not
contain content
an element attribute
several elements
nested within
another element
Trouble? Depending on your editor and its configuration, the text style
applied to your code might not match that shown in Figure 1–2. This is not a
problem. Because HTML documents are simple text files, any text styles are
a feature of the editor and have no impact on how the document is rendered
by the browser.
w 2. Scroll through the document to become familiar with its content but do not
make any changes to the text.
The Document Type Declaration

The first line in an HTML file is the document type declaration or doctype, which
is a processing instruction indicating the markup language used in the document.
The browser uses the document type declaration to know which standard to use for
displaying the content. For HTML 5, the doctype is entered as
<!DOCTYPE html>
You might also see the doctype entered in lowercase letters as

<!doctype html>
Both are accepted by all browsers. Older versions of HTML had more complicated
doctypes. For example, the doctype for HTML 4.01 is the rather foreboding
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
You might even come across older HTML files that do not have a doctype. Because
early versions of HTML did not require a doctype, many browsers interpret the
absence of the doctype as a signal that the page should be rendered in quirks mode,
based on styles and practices from the 1990s and early 2000s. When the doctype is
present, browsers will render the page in standards mode, employing the most current
specifications of HTML. The difference between quirks mode and standards mode can
mean the difference between a nicely laid-out page and a confusing mess, so always
put your HTML 5 file in standards mode by including the doctype.
Introducing Element Tags

The fundamental building block in every HTML document is the element tag, which
marks an element in the document. A starting tag indicates the beginning of that
element, while an ending tag indicates the ending. The general syntax of a two-sided
element tag is
<element>content</element>
where element is the name of the element, content is the element’s content,
<element> is the starting tag, and </element> is the ending tag. The following code
marks a paragraph element enclosed within the <p> and </p> tags:
<p>Welcome to Curbside Thai.</p>
The <p></p> tags indicate the presence of a paragraph and the text Welcome to
Curbside Thai. comprises the paragraph text.
Not every element tag encloses document content. Empty elements are elements
that are either nontextual (such as images) or contain directives to the browser about
how the page should be treated. An empty element is entered using one of the
following forms of the one-sided element tag:
<element />
or
<element>
The following br element indicates the presence of a line break in the text, and thus
does not contain any content:
<br />
Note that, while this code could also be entered as <br>, the ending slash /> form is
required in XHTML documents as well as other markup languages. While HTML 5
allows for either form, it’s a good idea to get accustomed to using the ending slash
/> form if you intend to work with other markup languages. We’ll follow the />
convention in the code in this book.
Elements can contain other elements, which are called nested elements. In the
following code, the em element (used to mark emphasized text) is nested within the
paragraph element by placing the <em> tag completely within the <p> tag.
Proper syntax:
<p>Welcome to <em>Curbside Thai</em>.</p>
When nesting one element inside of another, the entire code of the inner element
must be contained within the outer element, including opening and closing tags. Thus,
it would not be correct to place the closing tag for the em element outside of the p
element as in the following code:
Improper syntax:
<p>Welcome to <em>Curbside Thai</p>.</em>
Now that you’ve examined the basics of tags, you’ll examine at how they’re organized
within an HTML file.
The Element Hierarchy

The entire structure of an HTML document can be thought of as a set of nested
elements in a hierarchical tree. At the top of the tree is the html element marking the
entire document. Within the html element is the head element enclosing information
about the document itself and the body element enclosing the content of the web page.
Thus, the general structure of an HTML file, like the one shown in Figure 1–2, is
<!DOCTYPE html>
<html>
<head>
head content
</head>
<body>
body content
</body>
</html>
where head content and body content are nested elements placed within the
document head and body. Note that the body element is always placed after the head
element.
Creating the Basic Structure of an HTML File

REFERENCE
• To create the basic structure of an HTML file, enter the tags

<!DOCTYPE html>
<html>
<head>
head content
</head>
<body>
body content
</body>
</html>
where head, content, and body content contain nested elements that mark the
content of the head and body sections.
Introducing Element Attributes

Elements often contain one or more element attributes providing additional
Attributes can be listed in information about the purpose of the element or how the element should be handled
any order but they must by the browser. The general syntax of an element attribute within a two-sided tag is
come after the element
name and be separated <element attr1="value1" attr2="value2" …>
from each other by a blank content
space; each attribute value </element>
must be enclosed within
single or double quotation Or, for a one-sided tag
marks.
<element attr1="value1" attr2="value2" … />
where attr1, attr2, and so forth are attributes associated with element and value1,
value2, and so forth are the corresponding attribute values. For example, the following
code adds the id attribute with the value "intro" to the <p> tag in order to identify the
paragraph as an introductory paragraph.
<p id="intro">Welcome to Curbside Thai.</p>
Each element has its own set of attributes but, in addition to these element-specific
attributes, there is a core set of attributes that can be applied to almost every HTML
element. Figure 1–3 lists some of the most commonly used core attributes; others are
listed in Appendix B.
Figure 1–3 Commonly used core HTML attributes
Attribute Description
class="text" Defines the general classification of the element
dir="ltr|rtl|auto" Defines the text direction of the element content as left-to-right,
right-to-left, or determined by the browser
hidden Indicates that the element should be hidden or is no longer
relevant
id="text" Provides a unique identifier for the element
lang="text" Specifies the language of the element content
style="definition" Defines the style or appearance of the element content
tabindex="integer" Specifies the tab order of the element (when the tab button is
used to navigate the page)
title="text" Assigns a title to the element content
For attributes that do not require a value, HTML supports attribute minimization by
removing the attribute value completely. For example, the hidden attribute used in the
following code does not require a value; its mere presence indicates that the marked
paragraph should be hidden in the rendered page.
<p hidden>Placeholder Text</p>
Attribute minimization is another example of how HTML 5 differs from other

markup languages such as XHTML in which minimization is not allowed and all
attributes must have attribute values.
Adding an Attribute to an Element
REFERENCE
• To add an attribute to an element, enter
<element attr1="value1" attr2="value2" …>
content
</element>
where attr1, attr2, and so forth are HTML attributes associated with element and
value1, value2, and so forth are the corresponding attribute values.
Handling White Space

An HTML file is composed only of text characters and white-space characters. A white-
space character is any empty or blank character such as a space, tab, or line break.
The browser reading the HTML code ignores the presence of white-space characters
between element tags and makes no distinction between spaces, tabs, or line breaks.
Thus, a browser will treat the following two pieces of code the same:
<p>Welcome to <em>Curbside Thai</em>.</p>
and
<p>
Welcome to <em>Curbside Thai</em>.
</p>
The browser also collapses consecutive occurrences of white-space characters into a

single occurrence, so that the text of the paragraph in the following code is still treated
as “Welcome to Curbside Thai”, ignoring the extra white spaces between “Curbside”
and “Thai”.
<p>
Welcome to <em>Curbside Thai</em>.
</p>
The bottom line is that it doesn’t matter how you lay out your HTML code because
the browser is only interested in the text content and not how that text is entered. This
means you can make your file easier to read by indenting lines and by adding extra
white-space characters to separate one code block from another. However, this also
means that any formatting you do for the page text to make the code more readable,
such as tabs or extra white spaces, is not transferred to the web page.
Viewing an HTML File in a Browser

The structure of the HTML file shown in Figure 1–2 should now be a little clearer, even
if you don’t yet know how to interpret the meaning and purpose of each of element and
attribute. To see what this page looks like, open it within a web browser.
To open the ct_start.html file in a web browser:

w 1. Open your web browser. You do not need to be connected to the Internet to
view local files stored on your computer.
w 2. After your browser loads its home page, open the ct_start.html file from the
html01 c tutorial folder. Figure 1–4 shows the page as it appears on a mobile
phone and on a tablet device. The two devices have different screen widths,
which affects how the page is rendered.
Figure 1–4 The Curbside Thai starting page as rendered by a mobile and tablet device
© Brian A Jackson/Shutterstock.com; © sayhmog/Shutterstock.com;

© Kzenon/Shutterstock.com; © martiapunts/Shutterstock.com;
© rangizzz/Shutterstock.com; BenBois/openclipart;
Jmlevick/openclipart
mobile device tablet device
Trouble? If you’re not sure how to open a local file with your browser, check
for an Open or Open File command under the browser’s File menu. You
can also open a file by double-clicking the file name from within Windows
Explorer or Apple Finder.
w 3. Reduce the width of your browser window and note that when the width
falls below a certain value (in this case 480 pixels), the layout automatically
changes to a stacked row of images (as shown in the mobile device image in
Figure 1–4) that are better suited to the narrower layout.
w 4. Increase the width of the browser window and confirm that the layout
changes to a 2×3 grid of images (as shown in the tablet device image in
Figure 1–4), which is a design more appropriate for the wider window.
Figure 1–4 illustrates an important principle: HTML does not describe the
document’s appearance, it only describes the document’s content and structure. The
same HTML document can be rendered differently on different devices or screen sizes.
The actual appearance of the document is determined by style sheets—a topic you’ll
explore later in this tutorial.
Creating an HTML File

Now that you’ve studied the structure of an HTML file, you’ll start creating your
own documents for the Curbside Thai website. Sajja wants you to create a web page
containing information about the restaurant. Start by inserting the doctype and the
markup tags for the html, head, and body elements. You will also specify English (en)
as the language of the web page by adding the lang attribute to the <html> tag.
To begin writing the HTML file:

w 1. Using the editor of your choice, create a new blank HTML file in the html01 c
HTML filenames should tutorial folder, saving the file as ct_about.html.
be entered in lowercase
letters and have no blank
w 2. Enter the following code into the file:
spaces. <!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
Figure 1–5 shows the initial elements in the document.
Figure 1–5 Initial structure of the ct_about.html file
document type declaration

identifies the markup
language as html
opening <html> tag

marks the start of
the document and
specifies the
head element will
language
contain information
about the document
body element will
contain the content
displayed by the
closing </html> tag
browser
marks the end of
the document
w 3. Save your changes to the file.
Next, you’ll add elements to the document head.
Written Communication: Writing Effective HTML Code
PROSKILLS
Part of writing good HTML code is being aware of the requirements of various
browsers and devices, as well as understanding the different versions of the language.
Here are a few guidelines for writing good HTML code:
• Become well versed in the history of HTML and the various versions of HTML and
XHTML. Unlike other languages, HTML’s history does impact how you write your
code.
• Know your market. Do you have to support older browsers, or have your clients
standardized on one particular browser or browser version? Will your web pages be
viewed on a single device such as a computer, or do you have to support a variety
of devices?
• Test your code on several different browsers and browser versions. Don’t assume
that if your page works in one browser, it will work in other browsers or even in
earlier versions of the same browser. Also check on the speed of the connection. A
large file that performs well with a high-speed connection might be unusable with a
slower connection.
• Read the documentation on the different versions of HTML and XHTML at the W3C
website and keep up to date with the latest developments in the language.
To effectively communicate with customers and users, you need to make sure your
website content is always readable. Writing good HTML code is a great place to start.
Creating the Document Head

The document head contains metadata, which is content that describes the document
or provides information about how the document should be processed by the browser.
Figure 1–6 describes the different metadata elements found in the document head.
Figure 1–6 HTML metadata elements
Element Description
head Contains a collection of metadata elements that describe the document or
provide instructions to the browser
base Specifies the document’s location for use with resolving relative hypertext
links
link Specifies an external resource that the document is connected to
meta Provides a generic list of metadata values such as search keywords, viewport
properties, and the file’s character encoding
script Provides programming code for programs to be run within the document
style Defines the display styles used to render the document content
title Stores the document’s title or name, usually displayed in the browser title bar
or on a browser tab
The first metadata you’ll add to the About Curbside Thai web page is the title element.
Setting the Page Title

The title element is part of the document head because it’s not displayed within the
web page, but rather in the browser title bar or browser tab. Page titles are defined
using the following title element
<title>document title</title>
where document title is the text of the title. Add a page title to the Curbside Thai
page now.
Adding a Document Title

REFERENCE
• To define the document title, enter the following tag into the document head:
<title>document title</title>
where document title is the text that will appear on the browser title bar or a
browser tab.
To insert the document title:

w 1. Directly after the opening <head> tag, insert the following title element,
Document titles should be indented to make the code easier to read.
no more than 64 characters
in length to ensure that the
<title>About Curbside Thai</title>
text fits on the browser title
bar or a browser tab. Figure 1–7 highlights the code for the page title.
Figure 1–7 Entering the document title
title text that appears

in the browser title bar
or on a browser tab
Adding Metadata to the Document

Another metadata is the meta element, which is used for general lists of metadata
values. The meta element structure is
<meta attributes />
where attributes define the type of metadata that is to be added to a document.

Figure 1–8 lists the attributes of the meta element.
Figure 1–8 Attributes of the meta element
Attribute Description
charset="encoding" Specifies the character encoding used in the
HTML document
content="text" Provides the value associated with the
http-equiv or name attributes
http-equiv="content-type|default- Provides an HTTP header for the document’s
style|refresh" content, default style, or refresh interval (in
seconds)
name="text" Sets the name associated with the metadata
For example, you can use the following meta element to provide a collection of
keywords for the Curbside Thai website that would aid web search engines, such as
Google or Bing search tools, to locate the page for potential customers:
<meta name="keywords" content="Thai, restaurant, Charlotte, food" />
The name attribute defines the type of metadata and the content attribute provides the
data values. HTML does not specify a set of values for the name attribute, but commonly
used names include keywords, description, author, and viewport.
Another use of the meta element is to define the character encoding used in the
The title element and the HTML file. Character encoding is the process by which the computer converts text
charset meta element are into a sequence of bytes when it stores the text and then converts those bytes back into
both required in a valid characters when the text is read. The most common character encoding is UTF-8, which
HTML 5 document. supports almost all of the characters you will need. To indicate that the document is
written using UTF-8, add the following meta element to the document head:
<meta charset="utf-8" />
The charset attribute was introduced in HTML 5 and replaces the following more
complicated expression used in earlier versions of HTML:
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
Adding Metadata to the Document

REFERENCE
• To define the character encoding used in the document, enter

<meta charset="encoding" />
where encoding is the character encoding used in the document.

• To define search keywords associated with the document, enter
<meta name="keywords" content="terms" />
where terms is a comma-separated list of keyword terms.
Add meta elements to the document head now, providing the character set and a list
of keywords describing the page.
To insert metadata:
w 1. Directly after the opening <head> tag, insert the following meta elements,
The <meta> tag that indented to make the code easier to read:
defines the character
<meta charset="utf-8" />
encoding should always be
the first meta element in <meta name="keywords"
the document head. content="Thai, restaurant, Charlotte, food" />
Figure 1–9 highlights the newly added meta elements used in the document
head.
Figure 1–9 Adding metadata to a document
character encoding keywords used for

used in the document search engines

w 3. Open the ct_about.html file in your browser. Confirm that the browser tab or
browser title bar contains the text “About Curbside Thai”. There should be
no text displayed in the browser window because you have not added any
content to the page body yet.
Before continuing with your edits to the ct_about.html file, you should document
your work. You can do this with HTML comments.
Adding Comments to Your Document

An HTML comment is descriptive text that is added to the HTML file but that does not
appear in the page. Comments can include the name of the document’s author, the
date the document was created, and the purpose for which the document was created.
Comments are added with the following markup:

where comment is the text of the comment or note. For example, the following code
inserts a comment describing the Curbside Thai page:

A comment can be spread across several lines as long as the comment begins
Always include comments with . Because comments are ignored by the browser, they can
when working with a team be added anywhere within a document, though it’s good practice to always include
so that you can document a comment in the document head in order to describe the document content that
the development process follows.
for other team members.
Adding a Comment to an HTML Document
REFERENCE
• To insert a comment anywhere within your HTML document, enter

where comment is the text of the HTML comment.
Add comments to the ct_about.html file indicating the document’s author, date of
creation, and purpose.
To add a comment to the document:

w 1. Return to the ct_about.html file in your HTML editor.
HTML comments must w 2. Directly after the opening <head> tag, insert the following comment text,
be closed with the --> indented to make the code easier to read:
characters.

where your name is your name and the date is the current date. Figure 1–10
highlights the newly added comment in the file.
Figure 1–10 Adding a comment to the document
Comment added
to the document
Conditional Comments and Internet Explorer
INSIGHT
Another type of comment you will encounter in many HTML files is a conditional
comment, which encloses content that should only be run by particular versions of the
Internet Explorer browser. The general form of the conditional comment is

where operator is a logical operator (such as less than or greater than), version is
the version number of an Internet Explorer browser, and content is the HTML code
that will be run only if the conditional expression is true. The following code uses the
lt (less than) logical operator to warn users that they need to upgrade their browser if
they are running Internet Explorer prior to version 8.

Other logical operators include lte (less than or equal to), gt (greater than), gte
(greater than or equal to), and ! (not). For example, the following code uses the logical
operator ! to display the paragraph text only when the browser is not Internet Explorer:

Note that if you omit the version number, the conditional comment is applied to all
Internet Explorer versions.
The need for conditional comments arose because Internet Explorer significantly
differed from other browsers in how it implemented HTML and there was a need to
separate the code meant for the IE browser from code meant for other browsers. This
is not as much of a problem with Microsoft ending development of Internet Explorer
in favor of the Edge browser, but you may still encounter legacy websites that use
conditional comments in their code.
In the next session, you’ll continue your work on the ct_about.html file by adding
content to the page body.
Session 1.1 Quick Check
REVIEW
1. What is a markup language?
a. A language used for e-commerce websites
b. A language describing the content and structure of a document by tagging
document elements
c. A language introduced by Microsoft for use in web browsers
d. A language that defines the appearance of web pages for computers and
cell phones
2. WordPress is a:
a. web browser
b. text editor
c. web content management system
d. web framework
3. What does W3C stand for?
a. World Wide Web Computing
b. World Wide Web Corporation
c. World Wide Web Creators
d. World Wide Web Consortium
4. Which of the following is the proper form of an HTML 5 doctype?
a. <doctype html>
b. <DOCTYPE html>
c. <doctype>html</doctype>
d. <!DOCTYPE html>
5. Which of the following defines the page title for an HTML document?
a. <title>My Web Page</title>
b. <pageTitle>My Web Page</title>
c. <head id="title">My Web Page</title>
d. <titleStart>My Web Page</titleEnd>
6. Which of the following is not proper HTML syntax?
a. <p>Welcome to my <em>web page</em></p>
b. <em><p>Welcome to my web page</em></p>
c. <p><em>
Welcome to my
web page
</em></p>
d. <p>Welcome to my
<em>web page</em>
</p>
7. Which of the following defines “restaurant” as a search keyword for a web
page?
a. <keyword>restaurant</keyword>
b. <meta>restaurant</meta>
c. <meta name="keywords" content="restaurant" />
d. <meta keyword="restaurant" type="search" />
8. Which of the following uses the proper syntax for creating an HTML comment?
a. <! Home page for my personal website>
b. <comment>Home page for my personal website</comment>
c. // Home page for my personal website
d. 
9. True or false: HTML describes how content should be rendered by the browser.
Session 1.2 Visual Overview:

The <img> tag marks an
image using the file specified
in the src attribute.
The <h1> tag marks

a major heading. The <strong> tag marks
text of major importance
or seriousness.
The <p> tag marks

a paragraph.
The <em> tag marks

emphasized text.
A character entity
reference inserts a
character based on a
defined name.
The <cite> tag A numeric character

marks a citation. reference inserts a character
based on its code value.
© Kzenon/Shutterstock.com
HTML Page Elements

The opening paragraph
of the article is marked Images are added
with the <p> tag. to the web page.
The main heading of

the article is marked
The restaurant name is marked with the <h1> tag.
with the <strong> tag to
indicate its importance.
Kzenon/Shutterstock.com
Nonbreaking space is
inserted with the
character entity reference.
A citation to a magazine is
marked with the <cite> tag.
An example of emphasized text Bullet characters are inserted

is marked with the <em> tag. with the • numeric
character reference.
Writing the Page Body

Now that you have created the document head of the About Curbside Thai web page,
you’ll begin writing the document body, starting with general markup tags identifying
the major sections of the page body, and working inward to more specific content
within those sections.
Using Sectioning Elements

The first task in designing the page body is identifying the page’s major topics. A page
typically has a header, one or more articles that are the chief focus of the page, and a
footer that provides contact information for the author or company. HTML marks these
major topical areas using the sectioning elements described in Figure 1–11.
Figure 1–11 HTML sectioning elements
Element Description
address Marks contact information for an individual or group
article Marks a self-contained composition in the document such as a newspaper story
aside Marks content that is related to a main article
body Contains the entire content of the document
footer Contains closing content that concludes an article or section
h1, h2, h3, Marks major to minor headings with h1 representing the heading with the highest
h4, h5, h6 rank, h2 representing next highest-ranked heading, and so forth
header Contains opening content that introduces an article or section
nav Marks a list of hypertext or navigation links
section Marks content that shares a common theme or purpose on the page
For example, a news blog page might contain several major topics. To identify these
areas, the HTML code for the blog might include the following elements marking off
the page’s header, navigation list, article, aside, and footer.
<body>
<header>
</header>
<nav>
</nav>
<article>
</article>
<aside>
</aside>
<footer>
</footer>
</body>
These sectioning elements are also referred to as semantic elements because the tag
Sectioning elements can
name describes the purpose of the element and the type of content it contains. Even
be nested within each without knowing much about HTML, the page structure defined in the above code is
other; an article might easily understood from the tag names.
contain its own header,
footer, and collection of
navigation links.
Defining Page Sections
REFERENCE
• To mark the page header, use the header element.
• To mark self-contained content, use the article element.
• To mark a navigation list of hypertext links, use the nav element.
• To mark a sidebar, use the aside element.
• To mark the page footer, use the footer element.
• To group general content, use the section element.
The About Curbside Thai page will have a simple structure containing a header, a
single article, and a footer. Within the header, there will be an h1 element providing a
main topic heading (not to be confused with the document title, which is displayed on
the browser title bar or a browser tab). Add this structure to the document body.
To define the sections in the page body:

w 1. If you took a break after the previous session, return to the ct_about.html file
in your HTML editor.
w 2. Directly after the opening <body> tag, insert the following HTML code,
indented to make the code easier to read:
<header>
<h1>Curbside Thai</h1>
</header>
<article>
<h1>About Us</h1>
</article>
<footer>
Curbside Thai 411 Belde Drive, Charlotte NC 28201 704-555-1151
</footer>
Figure 1–12 highlights the sectioning elements used in the page body.
Figure 1–12 Adding sectioning elements to the page body
document header page heading
main article in the article heading

document
document footer
Comparing Sections in HTML 4 and HTML 5

Many of the sectioning elements described in Figure 1–11 were introduced in HTML 5.
Prior to HTML 5, sections were defined as divisions created using the following div
element:
<div id="id">
content
</div>
where id uniquely identifies the division. Figure 1–13 shows how the same page layout
marked up using sectioning elements in HTML 5 would have been defined in HTML
4.01 using div elements.
Figure 1–13 Sections in HTML 5.0 vs. divisions in HTML 4.01
HTML 5.0
<header></header>
<nav></nav> <section></section> <aside></aside>
<article></article>
<footer></footer>
HTML 4.01
<div id="header"></div>
<div id="nav"> <div id="section"></div> <div id="aside">

</div> </div>
<div id="article">
</div>
<div id="footer"></div>
One problem with div elements is that there are no rules for ids. One web designer
might identify the page heading with the id header, while another designer might use
heading or top. The lack of consistency makes it harder for search engines to identify
the page’s main topics. The advantage of the HTML 5 sectioning elements is that their
tag name indicates their purpose in the document, leading to greater uniformity in how
pages are designed and interpreted. However, you might still encounter use of the div
element in older websites and within the code generated by web frameworks.
Using Grouping Elements

Within sectioning elements are grouping elements. Each grouping element organizes
similar content into a distinct group, much like a paragraph groups sentences that share
a common theme. Figure 1–14 describes the HTML grouping elements.
Figure 1–14 HTML grouping elements
Element Description
blockquote Contains content that is quoted from another source, often with a citation and
often indented on the page
div Contains a generic grouping of elements within the document
dl Marks a description list containing one or more dt elements with each followed by
one or more dd elements
dt Contains a single term from a description list
dd Contains the description or definition associated with a term from a description list
figure Contains an illustration, photo, diagram, or similar object that is cross-referenced
elsewhere in the document
figcaption Contains the caption associated with a figure
hr Marks a thematic break such as a scene change or a transition to a new topic
(often displayed as a horizontal rule)
main Marks the main content of the document or application; only one main element
should be used in the document
ol Contains an ordered list of items
ul Contains an unordered list of items
li Contains a single item from an ordered or unordered list
p Contains the text of a paragraph
pre Contains a block of preformatted text in which line breaks and extra spaces in the
code are retained (often displayed in a monospace font)
The following code shows three paragraphs nested within a page article with each
paragraph representing a group of similar content:
<article>
<p>Content of 1st paragraph.</p>
<p>Content of 2nd paragraph.</p>
<p>Content of 3rd paragraph.</p>
</article>
The default style for browsers is to start sectioning or grouping elements on a new
line, separating them from any content that appears before it. Thus, each of these
paragraphs will appear in the web page on a new line as will the article itself. Note that
the exact appearance of the paragraphs and the space between them depends on the
styles applied by the browser to those elements. You’ll learn more about styles later in
this tutorial.
Defining Page Groups

REFERENCE
• To mark a paragraph, use the p element.

• To mark an extended quote, use the blockquote element.
• To mark the main content of a page or section, use the main element.
• To mark a figure box, use the figure element.
• To mark a generic division of page content, use the div element.
Another random document with
no related content on Scribd:
necessary to cover it with some well-warmed and non-conducting
material and to have the room well warmed. If bed-sores are already
formed, they are to be treated according to ordinary surgical
principles. Antiseptic means should be in the foreground in the case
of the malignant bed-sore. It is to be remembered that the latter is a
gangrenous process, and, in so far as the formation of a line of
demarcation between the necrotic and the conserved tissue is
concerned, the ordinary expectant rules of surgery govern the case:
the water-bath appears to yield the best results. Ordinary bed-sores
yield readily to mechanical protection and stimulating ointments or
the balsam of Peru. Iodoform is recommended, but it produces
granulations of an indolent character as compared with those
obtained through the use of resinous ointments.
The warm bath is probably the most useful measure in acute

myelitis. In cases due to exposure I do not believe it can be applied
too soon. Its temperature should, in the beginning at least, not be
higher than about 88° F., and the duration about seven minutes. The
continued administration will depend on the immediate effect on the
patient, and the sittings can be ultimately prolonged to half an hour
or even longer. It should be administered once daily, and, when the
patient is not disturbed by the manipulation connected with its use,
even oftener. Cold baths are recommended by the Germans, but it
seems rather in the passive period of the disease than during its
active phase.
The management of the bladder trouble is one of the most critical

points in the treatment of most cases. The results of retention of
urine are more frequently the cause of a fatal issue than any other
single complication. Where there is complete retention continuous
catheterization is to be employed, as recommended by Strümpell.106
In other cases the bladder should be emptied thrice in the twenty-
four hours. The catheter is to be thoroughly disinfected, and if the
slightest sign of cystitis is noted the bladder should be washed out
with astringent and disinfectant solutions. The continuous irrigation
with a solution of corrosive sublimate, 1:2000, appears to give the
best results.
106 A. Nelaton's catheter is introduced into the bladder, and kept in place by strips of
adhesive plaster fixed to the inner aspect of the thighs. A perforated condom fixed to
the catheter, and then fastened to the inguinal region, is in my opinion a better
measure, especially in patients who have some motor power left. The catheter is
connected with a rubber tube, which should run on a decline in order to effect
complete drainage.
If there be a syphilitic taint present—and more particularly is this true

of cases where no other cause can be assigned—large doses of
iodide of potassium107 should be administered, and mercurial
ointment energetically applied, even to the point of salivation.
107 Here, if anywhere, the so-called heroic doses are applicable.
I am unable to say anything with regard to the local use of electricity

in the active period of the disease. Ascending currents are
recommended by Erb, weak currents of about five minutes' duration
being employed over the part supposed to be affected. In order to
secure sufficiently deep deflection of the current large electrodes are
applied. The use of galvanism and faradism on the affected
periphery, the former being preferred where atrophic, the latter
where anæsthetic conditions preponderate, is to be instituted early
and continued through the duration of the disease. The rules stated
in the section devoted to electro-therapeutics are to be followed. In
cases where the bladder or rectum are paralytic, these organs
should have galvanism applied to them by means of electrodes
shaped like catheters or sounds.
After the acute phase of myelitis is passed, the secondary period is

to be managed according to the principles laid down in the section
on the Treatment of the Sclerotic Processes.
THE CHRONIC INFLAMMATORY AND
DEGENERATIVE AFFECTIONS OF THE SPINAL
CORD.
BY E. C. SPITZKA, M.D.
The intimate dovetailing of parenchymatous and connective

substance in the spinal cord renders the determination of the precise
origin of a morbid process often difficult if not impossible. Whatever
the mode of origin, the typical termination of inflammatory and
degenerative spinal disorders is sclerosis—a condition in which the
essential nervous elements suffer diminution or destruction, while
the connective substance is either absolutely or relatively in
preponderance. The clinical result is nearly the same in all cases,
and with few exceptions depends less upon the histological
character than on the topographical distribution of the lesion. It is for
this reason that we shall follow rather the topographical than the
morbid histological principle in classification.
The chronic disorders of the spinal cord here considered have as a

common character the slow and progressive displacement of the
normal conducting nerve-tubes by a grayish, reddish, or otherwise
discolored tissue, which is firmer in texture than normal nerve-
substance. Minute examination shows that it is above all the myelin
of the nerve-tubes that is wasted or destroyed, while the axis-
cylinders may share in this dissolution, or, as in one form of
sclerosis, they may persist and even continue in their conducting
function. This increased consistency is found to be due to the
increase of connective-tissue trabeculæ and of the neuroglia. In
some cases this increase is active and absolute, like the increase in
certain phases of hepatic cirrhosis; in others it is rather relative and
passive, being merely a condensation of the connective framework
after the intervening elements have wasted away, just as the texture
of a compressed sponge is more compact than that of an expanded
one.
Crudely, the affections of the cord characterized by this change may

be divided into two great groups—the regular and the irregular. The
former are characterized by their limitation to special nerve-tracts.
Thus, in primary lateral sclerosis we find a special tract in the
posterior part of the lateral columns occupied by the lesion. A
number of spinal diseases with well-defined symptoms are due to
active morbid processes which similarly follow the normal distribution
of the great nerve-tracts of the cord, with the same, almost
mathematical, regularity with which the medullary white develops in
the fœtal and infantile cord. In another class of cases we find that the
same tracts are involved in like manner—not in the way of primary
disease, but through the interruption of the physiological continuity of
the nerve-tract by some other disease, to which the sclerosis is
therefore secondary. These are the so-called secondary
degenerations.
The irregular affections of the cord comprise cases in which the

sclerotic foci are either disseminated through the cerebro-spinal axis
in numerous foci, or diffusely involve a greater or lesser length and
thickness of the medullary cylinder, or, finally, extend in the
transverse plane completely or nearly so across the section area of
the cord at a definite level.
As the symptoms of the regular affections of the cord are by far the
most readily recognizable, and a preliminary knowledge of them will
facilitate the better understanding of the irregular forms, we shall
consider the former first. They may be subdivided into two groups.
The largest, longest known, and best studied consists of acquired,
the other, containing less numerous cases and varieties, and
rendered familiar to the profession only within the last decade,
comprises the spinal disorders due to defective development of the
cerebro-spinal and spinal-fibro systems.
Tabes Dorsalis.
SYNONYMS.—Locomotor ataxia and ataxy, Posterior spinal sclerosis;

Graue degeneration der Hinterstränge (Leyden), Rückenmarksdarre
(popular), Rückenmarksschwindsucht; Tabes dorsualis (Romberg);
Ataxie locomotrice progressive (Duchenne).
HISTORY.—Undoubtedly, this disease must have been observed by

the ancient masters of medicine, but their descriptions group
together so many symptoms of other organic as well as functional
diseases of the cord that it is impossible to obtain a clear idea as to
what special form they had in view when they spoke of tabes
dorsualis. This term was adopted by the German writers of the last
and the earlier part of this century as designating all wasting
affections of the cord; and it was not till Romberg in 1853 and
Duchenne in 1858 differentiated the characteristic clinical signs, and
Cruveilhier and Todd (1847) determined the distribution of the lesion
in the posterior columns, that the medical profession began to
recognize the distinctness of this the most common form of organic
spinal ailment.
At this time, when tabes dorsalis became recognized as a clinical

entity depending on sclerotic degeneration of the posterior segment
of the cord, the inco-ordination or ataxia manifested in the peculiar
gait of the patient was regarded as the most characteristic, essential,
and constant symptom of the disease. It was regarded as an axiom
in physiology that the posterior segment of the cord was subservient
to centripetal and sensory conduction, and nothing appeared to
follow more naturally than the conclusion that the patient exhibited
inco-ordination because, his sensory conduction being interrupted or
destroyed, he had lost the necessary gauge for judging of the
required extent and force of a given movement. Since then both
spinal physiology and pathology have undergone a profound
revolution. So far are we to-day from regarding anterior and motor or
posterior and sensory as convertible terms that we locate the most
important centrifugal tract of the cord behind the plane which divides
it into anterior and posterior halves, while the most recently
differentiated centripetal tract is represented by Gowers as lying in
front of it. It has been determined, through Türck, Bouchard, and
Flechsig and his pupils, that the posterior white columns of the cord
contain several systems of fibres, whose functions—where
determinable—are of an exceedingly complex nature. The elaborate
investigations of Charcot, Schultze, and Strümpell, made during the
past decade, have shown that the distribution of the diseased field in
the posterior segment is not uniform, but is most intense in special
areas. These were found to be affected with a remarkable constancy
and regularity. Almost coeval with this discovery came the
recognition of symptoms found in the earliest phases of the disorder
by Westphal, which, attributable as they were found to be to the
involvement of the special reflex mechanisms of the cord, enable us
to demonstrate the existence and extent of the disease at periods
which previously were not within the ken of the clinician. The
reproach which Leyden was justified in making, that most tabic
patients pass through the pre-ataxic phase of their disorder under
the diagnosis of rheumatism or some similar affection, can now no
longer be made. Our ability to recognize the advent of this disease
has reached such a degree of refinement that the question arises
whether we are always justified in alarming a patient who has a
prospect of remaining free from invalidating complications for many
years with the announcement of a disease which, above all other
spinal affections, is looked upon with dread as equally hopeless,
insidious, and distressing.
CLINICAL HISTORY.—The development of tabes dorsalis is typically

slow and its precise commencement usually not determinable. In
some cases this or that one of the characteristic symptoms of the
disease preponderates from the beginning, and continues
throughout the illness as a prominent feature; in others distinct
stages can be recognized, each marked by one or several symptoms
which were absent or slight in the other stages. In some cases the
progress of the affection is marked by episodes which are absent or
rare in other cases. As a rule, however, it may be stated that tabes is
a progressive affection, marked by pronounced temporary changes
for better or worse, which are often developed with astonishing
rapidity, and subside as quickly, terminating fatally unless its
progress be arrested by treatment or interrupted by some other fatal
affection. The latter is by far the more frequent termination in the
well-to-do class of sufferers.
For purposes of convenience we may consider the symptoms of the

earlier period of the illness as pre-ataxic, and those of the later as
the ataxic. It is to be remembered, however, that in the strictest
sense of the term there is usually some disturbance of co-ordination
even in the early period, while the symptoms of the pre-ataxic period
continue over the ataxic period, and may even become aggravated
with it. Often the patient does not himself suspect a spinal, or indeed
any nervous, disorder, and consults the physician either on account
of rheumatic pains, double sciatic neuralgia, bladder disturbance,
diminished sexual power, amaurosis, diplopia, or even gastric
symptoms, which on closer examination are revealed to be
evidences of tabes. The determination of the initial symptoms is
retrospective as a rule.
Of the subjective signs, one of the commonest, if indeed it be ever

entirely absent, is a tired feeling, particularly noted in the knees and
ankles. This sensation is compared to ordinary muscle-tire, but is
provoked by slight exertion, and not as easily remedied by rest.
Often a numb feeling is associated with it, although no objective
diminution of cutaneous sensation be determinable. This combined
feeling of tire and numbness, described as a going-to-sleep feeling in
the ankle, has indeed been claimed by one observer1 to be
pathognomonic of early tabes. Next in frequency, and almost as
universal, are peculiar pains: these are manifold in character and
distribution, but so distinctive as to alone suggest the existence of
the disease from the manner in which the patient describes them.
One variety, the lightning-like, is compared to a sudden twinge of
great intensity shooting through the limb. The sciatic and anterior
crural branches are the lines usually followed by this pain, but there
are cases where perineal and abdominal regions are affected. Often
the pain is so severe that the patient cries out or the limb is violently
contracted under its influence. It differs from rheumatic pain in the
fact that it is distinctly paroxysmal and that the intermissions are
complete; that it is not greatly aggravated by motion nor relieved by
rest, while the rheumatic pain is; that tabic pain is usually relieved,
and rheumatic pain aggravated, by pressure, while hyperæsthesia is
present with the former, and either absent or barely indicated with
the latter. The lightning-like pains are sometimes combined with
another form, which is even more distinctive in character. This form
does not affect the distribution of special nerves, but is found limited
to a small area which the patient is able to localize definitely: it may
not exceed a centimeter or two in diameter, and within this area the
pain is excruciating. It is either of a burning character or compared to
the firm pressure of a vise or heavy weight, or to the tearing, boring,
and jumping of a violent toothache.
1 Canfield, Lancet, 1885, vol. ii. p. 110.
While some patients escape these pains almost entirely,2 others are
tormented with them at intervals for years, their intensity usually
diminishing when the ataxic period is reached. There is little question
among those who have watched patients in this condition that their
pains are probably the most agonizing which the human frame is
ever compelled to endure. That some of the greatest sufferers
survive their martyrdom appears almost miraculous to themselves.
Thus, in one case the patient, who had experienced initial symptoms
for a year, woke up at night with a fulminating pain in the heels which
recurred with the intensity of a hot spear-thrust and the rapidity of a
flash every seven minutes; then it jumped to other spots, none of
which seemed larger than a pin's head, till the patient, driven to the
verge of despair and utterly beside himself with agony, was in one
continued convulsion of pain, and repeatedly—against his conviction
—felt for the heated needles that were piercing him. In another case
the patient, with the pathetic picturesqueness of invalid misery,
compared his fulminating pains to strokes of lightning, “but not,” he
added, “as they used to appear, like lightning out of a clear sky, but
with the background of a general electrical storm flashing and
playing through the limbs.”
2 I have at present under observation two intelligent patients (one of whom had been
hypochondriacally observant of himself for years) who experienced not a single pain,
as far as they could remember, and who have developed none while under
observation. Seguin mentioned a case at a meeting of the Neurological Society with a
record of but a single paroxysm of the fulgurating variety. Bramwell (Brit. Med. Journ.,
Jan. 2, 1886) relates another in which the pains were entirely absent.
Either while the pains are first noticed or somewhat later other signs
of disturbed sensation are noted. Certain parts of the extremities feel
numb or are the site of perverted feelings. The soles of the feet, the
extremities of the toes, the region about the knee-pan, and the
peroneal distribution, and, more rarely, the perineum and gluteal
region, are the localities usually affected.3 In a considerable
percentage of cases the numbness and tingling are noted in the little
finger and the ulnar side of the ring finger; that is, in the digital
distribution of the ulnar nerve. The early appearance of this symptom
indicates an early involvement of the cord at a high level. Some
parallelism is usually observable between the distribution of the
lightning-like pains when present and the anæsthesia and
paræsthesia if they follow them. With these signs there is almost
invariably found a form of illusive sensation known as the belt
sensation. The patient feels as if a tight band were drawn around his
body or as if a pressure were exerted on it at a definite point. This
sensation is found in various situations, according as the level of the
diseased part of the cord be a low or high one. Thus, when the lower
limbs are exclusively affected or nearly so the belt will be in the
hypogastric or umbilical region; if the upper limbs be much involved,
in the thoracic region; and if occipital pain, anæsthesia of the
trigeminus, and laryngeal crises are present, it may even be in the
neck. Correspondingly, it is found in the history of one and the same
patient: if there be a marked ascent—that is, a successive
involvement of higher levels in the cord—the belt will move up with
the progressing disease. This occurrence, however, is less
frequently witnessed than described. In the majority of cases of
tabes disturbances of the bladder function occur very early in the
disease. Hammond indeed claims that in the shape of incontinence it
may be the only prodromal symptom for a long period.4
3 In the exceptional cases where the initial sensory disturbance is marked in the
perineal and scrotal region I have found that the antecedent fulminating pains had
been attributed to the penis, rectum, and anal region; and in one case the subjective
sense of a large body being forcibly pressed through the rectum was a marked early
sign.
4 New England Medical Monthly, 1883.
I have under observation a patient who has been compelled to use

the catheter daily for years, who has gradual disappearance of the
knee-jerk and reflex iridoplegia, but who has presented no other
evidence of tabes during the year and a half he has been watched.
Among the exact signs of tabes, reflex iridoplegia and abolition of the
knee-jerk are probably the earliest to appear. It may be assumed
with safety that in ninety-nine out of a hundred cases both the
inability of the pupil to respond to light and the absence of the knee-
jerk will be found long before ataxia is developed. Cases are
recorded where no other positive signs were found, and no other
signs of the disease developed for a number of years,5 and others
where disappearance of the knee-jerk was the very first indication.
5 Westphal, also Tuczek, Archiv für Psychiatrie, xiii. p. 144.
The opinion of observers as to the frequency of double vision as an

early symptom of tabes is far from being unanimous. The majority of
writers speak of it as rare, but it is probable that this usually transient
symptom is forgotten by the patient, or because of its apparent
triviality escapes notice. The patient while looking at an object sees a
double image of the latter. This may last for a few seconds, minutes,
or hours, and rarely for a day or week.6 A distinct history of this
symptom was given by 58 out of 81 patients in whom I recorded the
oculo-motor signs. By far the most important of the exact prodromal
signs of tabes are two symptoms—one involving a special faculty of
co-ordination, the other the reflex movements of the pupil. One or
both of these must be present to justify the diagnosis of incipient
tabes.7 The disturbance of co-ordination consists in an inability of the
patient to stand steadily when his eyes are closed. The majority of
healthy persons when tested in this way may show a little swaying in
the beginning, but eventually they stand as steadily as they do with
open eyes, and there is no subjective feeling of uncertainty as to
falling. But the tabic patient exhibits oscillations, and makes efforts to
overcome them which, instead of neutralizing, usually aggravate
them and betray the great disturbance of his equilibrium. It is not as
if he swayed merely because he is uncertain of his upright position,
but as if some perverted force were active in throwing him out of it. It
is found to be a pronounced feature even in cases where the patient
with open eyes is able to walk nearly as well as normal persons, and
experiences no trouble in performing intricate evolutions, such as
dancing, walking a line, or even walking in the dark—faculties which
the patient is destined to lose as his disease progresses.8
6 It has been asserted that the severer and more persistent diplopias are found with
tabes dependent on syphilis.
7 Not even the absence of the knee-jerk ranks as high as these two signs. Aside from
the fact that this is a negative symptom, it is not even a constant feature in advanced
tabes.
8 It does not seem as if the disturbance of static equilibrium were due merely to the
removal of the guide afforded by the eyes, for it is noted not alone in patients who are
able to carry out the average amount of locomotion in the dark, but also in those who
have complete amaurosis. Leyden (loc. cit., p. 334) and Westphal (Archiv für
Psychiatrie, xv. p. 733) describe such cases. The act of shutting the eyes alone,
whether through a psychical or some occult automatic influence, seems to be the
main factor.
In most cases of early tabes it is found that the pupil does not
respond to light; it may be contracted or dilated, but it does not
become wider in the dark nor narrower under the influence of light.
At the same time, it does contract under the influence of the
accommodative as well as the converging efforts controlled by the
third pair, and in these respects acts like the normal pupil. It is
paralyzed only in one sense—namely, in regard to the reflex to light;
just as the muscles which extend the leg upon the thigh may be as
powerful as in health, but fail to contract in response to the reflex
stimulus applied when the ligamentum patellæ is struck. For this
reason it is termed reflex iridoplegia.9 It is, when once established,
the most permanent and unvarying evidence of the disease, and is
of great differential diagnostic value, because it is found in
comparatively few other conditions.
9 It is also known as the Argyll-Robertson pupil. Most of the important symptoms of
tabes are known by the names of their discoverers and interpreters. Thus, the
swaying with the eyes closed is the Romberg or Brach-Romberg symptom; the
absence of the knee-phenomenon, Westphal's or the Westphal-Erb symptom; and the
arthropathies are collectively spoken of as Charcot's joint disease.
In a number of cases ptosis of one or both eyelids is noted at an

early stage of the disease. It is usually temporary, and coincides as
to time with the diplopia, if present.
Patients presenting some or all of the subjective and objective

manifestations of tabes mentioned may continue in a condition of
otherwise comparative health, enabling them to attend to their
vocation for from one to twenty years, and it is not improbable that
the pre-ataxic period may extend over nearly a lifetime. In a less
fortunate minority of cases some of the most distressing evidences
usually marking the last stages of the disease are found developed
at the onset. Thus, cases are known where optic nerve-atrophy
preceded the true tabic period by ten or more years; others in which
trophic disturbances, manifested in spontaneous fractures of bones10
or violent gastric crises, or even mental disturbance, inaugurated
tabes dorsalis, instead of closing or accompanying the last chapter
of its history, which is the rule.
10 Berger, Deutsche medizinische Wochenschrift, 1885, 1 and 2.
The disturbance of co-ordination above spoken of as manifested in
the inability of the patient to stand well with his eyes closed is the
first step in the development of the characteristic ataxia which marks
the full-blown affection. The patient finds that he tires more and more
on slight exertion—not because his muscles are weak, but because
he has to make more voluntary effort than a person in health. He
finds that he stumbles easily—is unable to ascend and descend at
the curbstone or to walk over an irregular surface with ease. Going
down stairs is peculiarly irksome. “I would rather,” aptly said one
patient, “troubled as I am in walking, go a mile in the street than walk
up three flights of stairs; but I would rather go up six flights of stairs
than walk down one.” Soon the patient notices that walking in the
dark becomes more a feat of relative skill than the easy, almost
automatic, act it was in health. His vocation, if it was one involving
the use of the feet, becomes irksome, difficult, and finally impossible,
and in a number of cases the upper extremities are also involved.11
Delicate motions, such as those required in needlework, in writing,
and by watchmakers, musicians, opticians, and lapidaries, are
clumsily performed; even coarser movements, such as buttoning the
clothes and carrying a glass filled with water to the mouth, are
performed in an uncertain and clumsy manner. Meanwhile, the
disturbance of motion in the lower limbs progresses. Difficult as it
formerly was for the patient to stand on one foot or with both feet
together while the eyes were closed, he is now unable to do either
with the eyes open. He straddles in his walk, or, in order to overcome
the element of uncertainty involved in moving the knee-joint, keeps
this joint fixed and walks with short, stiff steps. If ordered to halt
suddenly while thus walking, the patient sways violently, and makes
movements with his hands or arms to recover his balance, in some
cases staggering and even falling down. He shows a similar
unsteadiness when told to rise suddenly from a chair or to mount
one, and it becomes impossible for him to walk backward. Later on,
it will be found that his feet interfere in walking. He has lost the
power of gauging the extent and power of his motions to such a
degree that he may actually trip himself up. To neutralize in some
way this element of uncertainty of his steps, the patient is compelled
to exaggerate all his ambulatory movements, and there results that
peculiar gait which was the first symptom directing attention to the
disease to which it is due. The feet are thrown outward, and violently
strike the ground; the heel touches the latter first, and the patient
appears as if he were punishing the ground and stamping along
instead of walking. The reason for his adopting these tactics are
twofold. In the first place, he has a subjective sense of walking in a
yielding substance, as if on a feather bed, air-bladders, cushions, or
innumerable layers of carpet, and he therefore makes efforts to
touch firm bottom. In the second place, his motor inco-ordination, in
so far as it is not the result of anæsthesias, is greatest in those
segments of his limbs which are farthest removed from the trunk,
and which, enjoying the greatest freedom of combined motion, are
also most readily disturbed. His uncertainty is therefore greater in the
toes than in the ankle, greater in the ankle than in the knee, and
greater in the knee than in the thigh: he prefers to touch the ground
with the heel to touching it with the toes, and to move his limb in the
hip than in the knee-joint. As the patient advances in life even this
limited and clumsy form of locomotion becomes impossible: he takes
to his bed, and it is found that he loses all sense of the position of his
lower and occasionally of his upper limbs. He is unable to tell which
limb overlies the other when his leg is crossed—unable to bring one
limb in parallel position with another without the aid of his eyes. If
told to touch one knee or ankle with the toes of the other side, his
limb oscillates around uncertainly, and makes repeated unskilful
dashes at the wrong point, and ultimately all but the very coarsest
muscular co-ordination appears to be lost, even when the
supplementary aid of the eyes is invoked.
11 Cases in which the upper extremities are intensely involved in the beginning are
uncommon, and those in which they are more intensely involved than the lower, or
exclusively involved, may be regarded as pathological curiosities.
Together with this gradual impairment and abolition of co-ordination,

which has given the name of locomotor ataxia to the disease, but not
always in that strict parallelism with it on which Leyden12 based his
theory of inco-ordination, the sensory functions proper become
perverted and impaired. Usually the determinable anæsthesias are
preceded by subjectively perverted sensations, such as the
numbness already referred to, or even by hyperæsthesia. Usually, all
categories of cutaneous sensation, whether special or pathic, are
impaired in advanced tabes; the points of the æsthesiometer are not
readily differentiated; the patient is unable to correctly designate the
locality which is touched or pinched; the pain-sense is occasionally
so much blunted that a needle may be run through the calf of the leg
without producing pain, and in some cases without being
appreciated in any form. Even if the pain-sense be preserved, it will
be found that its appreciation by the patient is delayed as to time.
Not infrequently bizarre misinterpretations are made of the
impressions acting on the skin. One of these, the feeling as if the
patient were standing on carpet, cushions, or furs, whereas he may
be standing on stone flagging, has already been mentioned as a
factor in the disturbed locomotion of the patient. In the later period,
numerous perversions of this kind are noted: to one of these, already
mentioned by Leyden, Obersteiner has called renewed attention. It
consists in a confusion of sides; the patient when pricked or touched
on one foot or leg correctly indicates the spot touched, but attributes
it to the wrong side.13
12 Klinik der Rückenmarkskrankheiten, Band ii.
13 Allochiria is the term applied by Obersteiner. Hammond has offered an explanation,

which, as it is based on the assumption of altogether hypothetical nerve-tracts, and
not in any sense accords with positively established facts, is more properly a subject
for consideration in a theoretical treatise.
While it may be affirmed, as a general proposition, that the tendency

of the tabic process is to abolish sensation below the level of the
disease, there are noteworthy exceptions, not only in individual
cases, but with regard to certain kinds of sensation; nor do the
different kinds of sensation always suffer together. Thus, the pain-
sense may be blunted and the contact-sense preserved, or, more
commonly, the latter blunted and the former exaggerated, so that the
unfortunate patient, in addition to being debarred of the useful
varieties of sensation, those of pressure and space, has the painful
ones exaggerated, as a hyperalgesia. According to Donath,14 the
temperature-sense is usually blunted in tabes, and a greater degree
of heat or cold can be borne without discomfort than in health; but in
about two-sevenths of the cases studied there was increased
sensitiveness to heat, and in one-seventh to cold. One of the
commonest manifestations is delayed conduction. This interesting
phenomenon has been especially observed in that phase of the
disease where tactile perception is beginning to be blunted. If the
patient be pricked with a pin, he feels the contact of the latter at the
proper moment as a tactile perception, and then after a distinct
interval, varying from one to four seconds, his limb is suddenly
drawn up and his face contorted under the influence of an
exaggerated pain. This fact furnishes one of the chief grounds for the
assumption that there are distinct channels for the transmission of
pain and tactile perception in the cord, and that they may be involved
separately or with different intensity in the disease under
consideration. In some advanced cases it is found that not only the
transmission of pain-appreciation is delayed, but that there are after-
sensations recurring at nearly regular intervals of several seconds,
and accurately imitating the first pain-impression.
14 Archiv für Psychiatrie, xv. p. 707.
To what extent the muscular sense is affected in tabes at various

stages of the disorder is somewhat in doubt. Strümpell15 by
implication, and other writers directly, attribute the inco-ordination
observed on closing the eyes to the loss of the muscular sense. As
this symptom is also observed in patients who when they lie on their
backs are able to execute intricate movements notwithstanding the
exclusion of the visual sense, and as their uncertainty in an early
stage is not always with regard to the position of their limbs nor the
innervation of individual or grouped muscles, it seems inadmissible
to refer the Romberg symptom16 to the loss of muscular sense alone.
15 Lehrbuch der Speciellen Pathologie und Therapie, p. 193, vol. ii.
16 It should be designated as static ataxia, in distinction from locomotor or motor

ataxia, which is manifested in unskilled movements.
The important part played by eye symptoms in the early stages of
tabes has been already referred to. Reflex iridoplegia is one of these
early and persisting features; it is sometimes complicated with
mydriasis, and occasionally with paralysis of accommodation of one
eye. In the majority of my cases there was spinal myosis, often of
maximum intensity; in a large number there was in addition
irregularity of the outline of the pupil; and where there was mydriasis
I found it to be quite symmetrical, in this respect differing from the
experience of Müller17 and Schmeichler.18
17 Centralblatt für die Gesammte Therapie.
18 Loc. cit.
Atrophy of the optic nerve is a common and sometimes, as stated,

the initial symptom of tabes. It is rarely found in its incipient phase in
advanced stages. The patient who escapes involvement of the optic
nerve in the pre-ataxic stage is very apt to escape it altogether. It is
more frequently found either to precede the pre-ataxic period by
months and even years, or to develop during this period, leading to
complete atrophy in the ataxic period, and sometimes before. Erb
calculates that 12 per cent. of tabic patients have optic-nerve
atrophy; he probably includes only such cases in which the atrophy
was marked or led to amblyopia. Including the lesser degrees of
atrophy, it is found in a larger number of patients. Schmeichler
claims as high as 40 per cent.19 If we regard those cases in which
there is noted progressing limitation of the color-field of the retina as
beginning optic-nerve atrophy, the majority of tabic patients may be
said to have some grade of this disorder. The ophthalmoscopic
changes are quite distinctive: at first there is noted a discoloration of
the papilla and apparent diminution of the number of arterial vessels;
the veins then become dilated; and finally the papilla becomes
atrophied, the vessels usually undergoing a narrowing after their
previous dilatation. In the first stages of this process visual power is
not gravely impaired, but as soon as shrinkage has set in visual
power sinks rapidly to a minimum, decreasing till only quantitative
light-perception remains. This limited function usually remains
throughout, but in a few cases complete amaurosis ensues. As the
field of vision becomes diminished, the concentric extinction of
quantitative perception is preceded by concentric extinction of color-
perception, the color-field for green being the first to suffer; red
follows, and blue remains last.
19 Archives of Ophthalmology and Otology, 1883.
In a large number of cases the only symptoms attributable to a

disturbance of the cerebral functions are those connected with the
motor relations of the eyeball and pupil, and the function and
appearance of the optic nerve. The special senses other than those
of sight and touch are rarely affected. Sometimes there is obstinate
tinnitus, exceptionaly followed by deafness, attributed to atrophy of
the auditory nerve. The development of symptoms resembling those
named after Ménière is not referable with certainty to a disturbance
of the same nerve.
The sexual functions become involved in all cases of tabes sooner or

later. In the majority of cases there is a slow, gradual extinction of
virile power; in a large minority this extinction is preceded by irritative
phenomena on the part of the genital apparatus. Some patients
display increased sexual desire and corresponding performing
powers, but mostly they suffer from erections of long duration which
may be painful, and loss of the normal sensations attending the
sexual orgasm. There is no constant relationship between the
intensity of the general affection and the diminution of sexual power.
It is retained to a limited degree by patients who are barely able to
walk, and it may be entirely destroyed in those who have but entered
the initial period.
The bladder disturbance,20 which in some forms is usually found

among the initial symptoms, is always a marked feature in the ataxic
period. Usually, there is a frequent desire for micturition, with more or
less after-dribbling; sometimes there is retention, alternating with
involuntary discharge; complete incontinence may close the scene
through the channel of an ensuing cystitis and pyelitis. With the
incontinence of urine there is usually found obstinate constipation,
which may be varied by occasional spells of incontinence of feces.
The crises of tabes often complicate these visceral symptoms.
20 Contrary to what might be anticipated from the topographical nearness of the
vesical and genital centres in the cord, the disturbances of bladder function and virile
power do not go hand in hand.
The reflex disturbances are among the most continuous evidences

of the disease. Of two of these, the disappearance of the patellar jerk
or knee-phenomenon and the inability of the pupil to react to light,
we have already spoken when discussing the initial period.
Practically, it may be claimed that both are always found in typical
tabes. It has been claimed that the patellar jerk may be exaggerated,
or even that its disappearance is preceded by exaggeration. As this
disappearance usually occurs extremely early in the pre-ataxic
period, it is difficult to follow the deductions of those who claim to
have watched an alleged earlier phase of exaggeration. It is more
than probable that cases of combined sclerosis, in which the lateral
columns were affected together with or earlier than the anterior, have
been mistaken for typical tabes. Here, it is true, the jerk is first
exaggerated through the disease of the lateral column, and later
abolished as the lesion in the posterior reflex arch progresses and
becomes absolute.
Other tendinous reflexes21 suffer with the knee-jerk in the peripheries

corresponding to and below the involved level of the cord. The
cutaneous reflexes are usually abolished, but may be retained in
advanced stages of the disease. The same is true of the cremaster
reflex.
21 Whether the tendon phenomena are true reflexes or not is a question still agitating
physiologists. Opinion inclines in favor of their reflex nature, and, pathologically
considered, it is difficult to regard them in any other light.
Opinion is divided as to the electrical reactions in tabes dorsalis.

That qualitative changes never occur in uncomplicated cases all
authorities are agreed, but while Strümpell and other modern writers
claim there is no change of any kind, a number of careful
investigators have found an increased irritability in the initial period,
particularly marked in the peroneal group of muscles (Erb). In my
own experience this is frequently the case, where lightning-like pains
are the only subjectively distressing symptoms complained of.
While the symptoms thus far considered as marking the origin and
progress of tabes dorsalis are more or less constant, and although
some of them show remarkable remissions and exacerbations, yet
may in their entity be regarded as a continuous condition slowly and
surely increasing in severity, there are others which constitute
episodes of the disease, appearing only to disappear after a brief
duration varying from a few hours to a few days: they have been
termed the crises of tabes dorsalis. These crises consist in
disturbances of the functions of one or several viscera, and are
undoubtedly due to an error in innervation provoked by the
progressing affection of the spinal marrow and oblongata. The most
frequent and important are the gastric crises. In the midst of
apparent somatic health, without any assignable cause, the patient is
seized with a terrible distress in the epigastric region, accompanied
by pain which may rival in severity the fulgurating pains of another
phase of the disease, and by uncontrollable vomiting. Usually, these
symptoms are accompanied by disturbances of some other of the
organs under the influence of the pneumogastric and sympathetic
nerves. The heart is agitated by violent palpitations, a cold sweat
breaks out, and a vertigo may accompany it, which, but for the fact
that it is not relieved by the vomiting and from its other associations,
might mislead the physician into regarding it as a reflex symptom. In
other cases the symptoms of disturbed cardiac innervation or those
of respiration are in the foreground, constituting respectively the
cardiac and bronchial crises. Laryngeal crises are marked by a
tickling and strangling sensation in the throat, and in their severer
form, which is associated with spasm of the glottis, a crowing cough
is added.22 Enteric crises, which sometimes coexist with gastric
crises, at others follow them, and occasionally occur independently,
consist in sudden diarrhœal movements, with or without pain, and
may continue for several days. Renal or nephritic crises are
described23 as resembling an attack of renal colic. The sudden

Ebook New Perspectives On HTML 5 and Css PDF Full Chapter PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ebook New Perspectives On HTML 5 and Css PDF Full Chapter PDF

Uploaded by

Copyright:

Available Formats

New Perspectives on HTML 5 and CSS -

Australia • Brazil • Mexico • Singapore • United Kingdom • United States

Notice to the Reader

Printed in the United States of America

“I love this text

“New Perspectives texts

PROSK ILL S ProSkills Boxes

K E Y S TEP Key Steps

INSIGHT InSight Boxes

Level Color Scheme

Our Complete System of Instruction

Level III Tutorials

Writing the Page Body . . . . . . . . . . . . . . . . . . . . . . HTML 24

Web Pages and Web Servers . . . . . . . . . . . . . . . . HTML 4 Character Encoding . . . . . . . . . . . . . . . . . . . . . . HTML 33

Introducing HTML . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 5 Character Entity References . . . . . . . . . . . . . . . HTML 34

The History of HTML . . . . . . . . . . . . . . . . . . . . . HTML 5 Working with Inline Images . . . . . . . . . . . . . . . . . . HTML 36

Linking to an id . . . . . . . . . . . . . . . . . . . . . . . . . HTML 63 HSL Color Values . . . . . . . . . . . . . . . . . . . . . . HTML 101

Linking to a Web Resource . . . . . . . . . . . . . . . . HTML 64 Employing Progressive Enhancement . . . . . . . . . . HTML 106

Linking to a Phone Number . . . . . . . . . . . . . . . . HTML 67

Writing Style Comments . . . . . . . . . . . . . . . . . . HTML 96

Working with Margins and Padding . . . . . . . . . . . HTML 143

HTML LEVEL II TUTORIALS Using the span Keyword . . . . . . . . . . . . . . . . . HTML 226

Placing Grid Items by Area . . . . . . . . . . . . . . . HTML 228

Clipping an Element . . . . . . . . . . . . . . . . . . . . . . . HTML 257 Creating a Radial Gradient . . . . . . . . . . . . . . . HTML 316

Stacking Elements . . . . . . . . . . . . . . . . . . . . . . . . HTML 258 Repeating a Gradient . . . . . . . . . . . . . . . . . . . . HTML 320

Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 269

Understanding Perspective . . . . . . . . . . . . . . . HTML 333

The background Property . . . . . . . . . . . . . . . . HTML 286

SESSION 5.2�������������������������������������������������������HTML 392 Session 5.3 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 437

Introducing Flexible Boxes . . . . . . . . . . . . . . . . . . HTML 394 Review Assignments . . . . . . . . . . . . . . . . . . . . . . . HTML 443

Defining a Flexible Box . . . . . . . . . . . . . . . . . . HTML 394 Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 446

Cross-Browser Flexboxes . . . . . . . . . . . . . . . . . HTML 395

Exploring CSS Styles and Web Tables . . . . . . . . . HTML 485

Tutorial 7 Designing a Web Form Creating a Range Slider . . . . . . . . . . . . . . . . . . HTML 566

SESSION 8.2�������������������������������������������������������HTML 618 The Development of JavaScript . . . . . . . . . . . . HTML 685

SESSION 8.3 �����������������������������������������������������HTML 640 SESSION 9.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 698

Introducing Transitions . . . . . . . . . . . . . . . . . . HTML 642 Object References . . . . . . . . . . . . . . . . . . . . . . HTML 701

The @keyframes Rule . . . . . . . . . . . . . . . . . . . HTML 652 Applying a Method . . . . . . . . . . . . . . . . . . . . . HTML 704

Applying an Animation . . . . . . . . . . . . . . . . . . . HTML 655 Writing HTML Code . . . . . . . . . . . . . . . . . . . . . . . HTML 705

Controlling an Animation . . . . . . . . . . . . . . . . . HTML 658 Working with Variables . . . . . . . . . . . . . . . . . . . . HTML 709

Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 676 Using a Variable . . . . . . . . . . . . . . . . . . . . . . . HTML 711

SESSION 9.3 �������������������������������������������������������HTML 718 Reversing an Array . . . . . . . . . . . . . . . . . . . . . HTML 763

Using Math Methods . . . . . . . . . . . . . . . . . . . . HTML 723

Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 817 INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . REF 11

Appendix A Color Names with Color Values,

Appendix B HTML Elements and Attributes. . . HTML B1

STARTING DATA FILES

html01 tutorial review code1

ct_catering_txt.html mp_catering_txt.html code1-1_txt.html

code2 code3 code4

code1-2_txt.html code1-3_txt.html + 7 files code1-4_txt.html + 2 files

case1 case2 demo

jtc_index_txt.html dr_faq_txt.html demo_characters.html

Session 1.1 Visual Overview:

The <head> tag marks

The <body> tag marks

An opening tag marks

The Structure of an HTML Document

The exact layout of the

Kzenon/Shutterstock.com; © Courtesy Patrick Carey; martiapunts/Shutterstock.

Exploring the World Wide Web

Locating Information on a Network

Web Pages and Web Servers

SESSION 5.2��HTML 392 Session 5.3 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 437

SESSION 8.2��HTML 618 The Development of JavaScript . . . . . . . . . . . . HTML 685

SESSION 8.3 ��HTML 640 SESSION 9.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 698

SESSION 9.3 ��HTML 718 Reversing an Array . . . . . . . . . . . . . . . . . . . . . HTML 763