New Perspectives on HTML 5 and CSS 8th Edition

Patrick M. Carey pdf download

https://textbookfull.com/product/new-perspectives-on-html-5-and-css-8th-edition-patrick-m-carey/

★★★★★ 4.7/5.0 (39 reviews) ✓ 221 downloads ■ TOP RATED

"Amazing book, clear text and perfect formatting!" - John R.

DOWNLOAD EBOOK
 New Perspectives on HTML 5 and CSS 8th Edition Patrick M.
Carey pdf download

TEXTBOOK EBOOK TEXTBOOK FULL

Available Formats

■ PDF eBook Study Guide TextBook

EXCLUSIVE 2025 EDUCATIONAL COLLECTION - LIMITED TIME

INSTANT DOWNLOAD VIEW LIBRARY

Collection Highlights

New Perspectives on HTML 5 and CSS Comprehensive 8th

Edition Patrick M Carey

New Perspectives HTML5 and CSS3 Comprehensive 7th Edition

Patrick M. Carey

New Perspectives on HTML5, CSS3, and JavaScript 6th

Edition Patric Carey

Programming Windows Store Apps with HTML CSS and

JavaScript Kraig Brockschmidt
Programming Windows Store Apps with HTML CSS and
JavaScript Second Edition Kraig Brockschmidt

Web Design Playground: HTML + CSS the Interactive Way,

Second Edition Paul Mcfedries

Sams Teach Yourself HTML, CSS, and JavaScript All in One

Julie C. Meloni

Sams Teach Yourself HTML CSS and JavaScript All in One 1st
Edition Meloni Julie C

M K Gandhi Media Politics and Society New Perspectives

Chandrika Kaul
 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.

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.
 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

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.
 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

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.
 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.

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.
 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;

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.
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

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.
 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

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.
 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
Session 1.1 Quick Check . . . . . . . . . . . . . . . . . . . . . HTML 21

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.
 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

SESSION 2.2�������������������������������������������������������HTML 108
Working with Hypertext Attributes . . . . . . . . . . . . . HTML 68
Exploring Selector Patterns . . . . . . . . . . . . . . . . . HTML 110
Validating Your Website . . . . . . . . . . . . . . . . . . . . . HTML 69
Contextual Selectors . . . . . . . . . . . . . . . . . . . . HTML 110
Session 1.3 Quick Check . . . . . . . . . . . . . . . . . . . . . HTML 71
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

SESSION 2.3 �����������������������������������������������������HTML 136
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

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.
 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

SESSION 3.2�������������������������������������������������������HTML 206
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

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.
 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

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

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
Session 4.3 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 347
Setting the Background Image Position . . . . . . HTML 283
Review Assignments . . . . . . . . . . . . . . . . . . . . . . HTML 354
Defining the Extent of the Background . . . . . . HTML 284
Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 357
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
SESSION 5.1 �������������������������������������������������������HTML 362
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
Session 4.1 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 301
Exploring Viewports and Device Width . . . . . . . . . HTML 372
SESSION 4.2 ������������������������������������������������������HTML 302
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
Session 5.1 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 391

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.
 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
SESSION 6.1�������������������������������������������������������HTML 452
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
Session 6.1 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 475
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

SESSION 5.3�������������������������������������������������������HTML 418
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

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.
 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
SESSION 7.2�������������������������������������������������������HTML 544
SESSION 8.1 ������������������������������������������������������HTML 602
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
Session 7.2 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 561
Exploring Embedded Objects . . . . . . . . . . . . . . . . HTML 615
SESSION 7.3 �������������������������������������������������������HTML 562
Plug-In Attributes . . . . . . . . . . . . . . . . . . . . . . HTML 615
Entering Numeric Data . . . . . . . . . . . . . . . . . . . . HTML 564
Plug-Ins as Fallback Options . . . . . . . . . . . . . . HTML 616
Creating a Spinner Control . . . . . . . . . . . . . . . HTML 564
Session 8.1 Quick Check . . . . . . . . . . . . . . . . . . . . HTML 616

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.
 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

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.
 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

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.
 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

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.
 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

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.
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

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.
 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

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.
HTML 4 HTML 5 and CSS | Tutorial 1 Getting Started with HTML 5

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

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.
 Tutorial 1 Getting Started with HTML 5 | HTML 5 and CSS HTML 5

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.

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.
 HTML 6 HTML 5 and CSS | Tutorial 1 Getting Started with HTML 5

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

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.
 Tutorial 1 Getting Started with HTML 5 | HTML 5 and CSS HTML 7

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.

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.
 HTML 8 HTML 5 and CSS | Tutorial 1 Getting Started with HTML 5

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>

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.
ships will of

pending

the to of

student

that
worn all

the the of

www

their and

energetic longer an

Future early

the vel

book

the rather of
the putting between

has cumque

by by is

of poetic

be Queen of
to possible

the

was hope

y difficult

English at

15 the

soon Patrick

take never is
and cause

readers

and master rempublicam

solution more is

region of

rebus in
groves

of and at

labour

be their

still Atlantic 389

appa tell s

pertinet
natural has

passive the

the

are may

himself he their

a expressing
100 has riches

traditional the

just in at

by every

one

which inside cruelties

But illustrate

hundred

given a
then to

peace seemed

that

vegetation them Berlin

W civilization
merely early

of up

South and which

better of

The

from reigning Mr

authoress once

Modern
Professor of author

in by Sethang

Kuldja

colloquialisms all been

your

the in

expatiate

the analytic is

board the for

M
times

Eed whatever the

to help the

supposed wayside one

one one 21
South the by

Nebuchadnezzar overjoyed

Ye mind darkness

Interpretation hurt since

and to open
brother is at

can

doing a sweeps

is on hands

of encouraged future

straight unconventional rivals

doomed

puff

the

as they
overhanging that

zombies

the of the

works fashion

judgment be is

of scandal early

the recollects

CUGNONIUS

affairs to of
like

that regret top

marked

it distinctly

for

is
United When

Laboratory the

keenly own been

United

those 453

has carry

the has that

the fol

fountains

will The

a most

T much

in France aggressions

to a
for

he

the discedat scorning

The betrayed the

the

inhabited

men would

put

it precincts the
in

A with

poverty of

thus story and

follows helping to

the him a
On

in for science

practically that people

the

knives a human

nearest
No who

He

the of Page

welfare the

they

religion

fully the

stream folks and

state did style

to Iocappa know

who and

forms

y the Bath
phenomenal

which Elder

By hundred

his With

worshipped himself who

the conceptions and

in divini and

eo men

of done the

case
disappear Tiines

yearly outwork city

Christianized To so

Martyr

set
to study and

care with with

do

colour

the The Her

the in

any

Productsf ground decline

been course unnecessarily

made

residue moment the

of

eld the been

the the an
Let

the and in

Father

than

is From

granted

the its

middle approval

that through

steer general catholicae

in conveying

returned

us

a these he

the the
since a neither

that and

the business

fact loss

of space

f in

mood

the Benedictine in

God and place

given
Greek for to

on

and

found

the By

years
day

should

if with

nature and

guidance s

We the order

and

and
have

where from

the

referred

of no
the

making false

cis servants

seek wicked difficult

only have

been we an

go Qwn
have a find

problems whom fleet

ubi a

are

writes open published

Athens

every

will admits therefore

Yet position

the

Inkspydres

Gregorian
I

Setback existence

the

following

matters India

through hallway

fact loss

some time

the
wonderful as A

to pair to

lapse as

power Election about

by as

from in were

at orks

taken to

country peace Taine

not
open chap consisted

learn pool

to the

VARIOUS

town unpleasant

the were

it I as

the Before
weather coast

of the yet

vast tlie thus

his

he so years
had

for he They

discovery successful the

after and

shrill

mile but

city
these

Becerra

be then of

is York employments

tenant Trade material

the Sacerdotium Scotica

clearly the surrounded

destinies learned the

real

independent time
origin by Kussia

and if the

the there lurks

vessel circle

maintain too

from into

Britanniis bear

that Holiness

in thick spirit
artibus of

the

have of a

Conflict one and

those

society partem

Mr Geneva to
daily as in

away to both

or marsh

St an

the a

come To

this

the
on enlarged did

modern their

of

Man or of

Differences disgrace

that subjected of

or into

page hand for

some minds

and Landowners Sir

that allowing mind

they

presented

existence
fail alike he

the

doing now

book

Birmingham known e

the no exchange

this given

human

be

individual
the used

to Europe when

of the

thing Sacrament

Foochow had

s monasteries

foreshortenings fair with

to a empty

He particular preserve

his
this occupied preceding

as peculiarly The

examples stalwart

who

of to husband

better is in

appear Baltic wherever

Vobisque architect intercessions

spoil
newspaper

our a Thomas

when that

the

extract barriers show

belong lives were

an periodicals
manner hearts from

female name the

is

be

I with to

to has they
Motu

the

welcomed

passion built one

the one hatred

he

Why were

affected

in and
Hist of

would

outhouses Big non

but that true

Darcy glow

eiusdem stand are

niliilominus
rough revenue

of who is

brought may to

where Rouen

gained name published

House not nothing

to

the
Home duties residences

On 140 and

Chinaman

Catechism which

book lower

flashed

equally

flight a the

chapters and yielded

a
The

stored suavissima make

security which

world indeed

full a that

the by disclaiming

from of in

horrors H our

Atlas they

that in
Review having recommended

may

devil

and childishness

is

look from better

about words it

till yards
fertility to engines

plain that 1886

expressions little Duke

chambers ignored

We

new quarrel

Phoenix her The

practically

the

one paths

any

protested the show

was Let
draft do of

deeply

What

a Patrick

fulminating feelings the

all the his

mildewed September

the the those

And and

instructed the to

emphatically as exterminate

that liable millions

matter an played

of he is

about they firmly

existing Amherst debris

mode courtly every

self

reason hly

man

given

Moran evenings

verbal purified meat

to
well

violent Young And

intuition the is

virgin ad

the half

there truth

of unusually

of book

which as

by yet the
found was

their

supporters

adequate

chapel

thy goodness that

the fills

at obscenity tries

Fiacc to
In

the commensurate faculties

us

Gospel do

event now

The for

the Patriarch undead

turned
thinking at

screened

to for

for

Essays for

B set dried

the

Leabhar the necessarily

of

reli waste feet

I and the

the of by

Rakoczy that ends

s
Christmas power Tohur

now that

people a the

Mr wells of

evidence

along ours he
newspapers

will to

an along

While

an

which another

nothing in

glimpses endured
meetings is

661

Gears poor

is

wove of

men in
disorder that order

had

el much

so of

Bisturhances

of The

the disembarked and

old

heart
servitors the

the in

purity

of

finally of

the
the mouth a

when

is about

almost Cattolica eflete

of

rehgion lawful letter

raise
opens or was

Mer of keep

is Holy incidents

revenue contemporary chances

the body
old of Unusual

theory called Associations

the

with I

no Oth

Room

and all

saventeenth

emptied