New Perspectives On HTML CSS and XML Comprehensive 4th Edition Edition Patrick Carey - The Ebook Is Ready For Instant Download and Access
New Perspectives On HTML CSS and XML Comprehensive 4th Edition Edition Patrick Carey - The Ebook Is Ready For Instant Download and Access
com
https://ebookgate.com/product/new-perspectives-on-html-css-
and-xml-comprehensive-4th-edition-edition-patrick-carey/
OR CLICK HERE
DOWLOAD NOW
https://ebookgate.com/product/html-and-css-the-comprehensive-guide-
first-edition-jurgen-wolf/
ebookgate.com
https://ebookgate.com/product/new-perspectives-on-microsoft-
excel-2010-comprehensive-new-perspectives-series-1st-edition-june-
jamrich-parsons/
ebookgate.com
https://ebookgate.com/product/mastering-integrated-html-and-css-1st-
edition-virginia-debolt/
ebookgate.com
HTML XHTML and CSS Bible 3rd Edition Pfaffenberger B.
https://ebookgate.com/product/html-xhtml-and-css-bible-3rd-edition-
pfaffenberger-b/
ebookgate.com
https://ebookgate.com/product/head-first-html-and-css-2nd-edition-
elisabeth-robson/
ebookgate.com
https://ebookgate.com/product/html-xhtml-and-css-for-dummies-7th-
edition-ed-tittel/
ebookgate.com
https://ebookgate.com/product/teach-yourself-visually-html-and-
css-1st-edition-mike-wooldridge/
ebookgate.com
https://ebookgate.com/product/new-perspectives-on-computer-
concepts-2014-comprehensive-16th-edition-june-jamrich-parsons/
ebookgate.com
New Perspectives on HTML, CSS, and XML, 4th Edition
Textbook Reviewers
We are extremely grateful to the New Perspectives on HTML, CSS, and XML, 4th Edition textbook reviewers
listed below, and would like to take this opportunity to acknowledge them for their contributions in
the development of this text. Their timely reviews, informed feedback, and excellent suggestions were
tremendously valuable and helped us to produce an outstanding text that will meet the needs of all our New
Perspectives instructors and students. Our sincere thanks to all!
Textbook Reviewers
David Doering, St. Louis Community College
Bernice Howard, St. Johns River Community College
Ravinder Kang, Highline Community College
Diana Kokoska, University of Maine at Augusta
Lisa Macon, Valencia Community College
Dave Sciuto, University of Massachusetts—Lowell
Sharon Scollard, Mohawk College
Luke Sui, Daytona State College
John Taylor, Southeastern Technical College
“The New Perspectives on HTML, CSS, and XML, 4th Edition text follows in the tradition of earlier editions with its
hands-on, case-based approach, which has helped thousands of my students succeed in their pursuit of a career in
Web Development. The new pedagogical features, especially the Visual Overviews at the start of each new session, will
appeal to students with a variety of learning styles. The prior edition is a student favorite among text books. I predict
that this new edition will accomplish that which I thought was impossible: to top its predecessor in popularity. Add the
fun students have working through the real-world tutorials to the deep learning that occurs as a result, and we end up
with a student prepared for a high-paying industry career.”
—Lisa Macon,
Valencia Community College
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
New Perspecti ves on
COMPREHENSIVE
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
New Perspecti ves on
COMPREHENSIVE
Patrick Carey
Sasha Vodnik
Australia • Brazil • Japan • Korea • Mexico • Singapore • Spain • United Kingdom • United States
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
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.
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
New Perspectives on HTML, CSS, and XML © 2014 Cengage Learning
4th Edition, Comprehensive ALL RIGHTS RESERVED. No part of this work covered by the copyright herein may be
Director of Development: Marah Bellegarde reproduced, transmitted, stored or used in any form or by any means graphic, electronic,
Executive Editor: Donna Gridley or mechanical, including but not limited to photocopying, recording, scanning, digitiz-
ing, taping, Web distribution, information networks, or information storage and retrieval
Associate Acquisitions Editor: Amanda Lyons
systems, except as permitted under Section 107 or 108 of the 1976 United States
Product Development Manager: Leigh Hefferon Copyright Act, without the prior written permission of the publisher.
Senior Product Manager: Kathy Finnegan
Product Manager: Julia Leroux-Lindsey For product information and technology assistance, contact us at
Editorial Assistant: Melissa Stehler Cengage Learning Customer & Sales Support, 1-800-354-9706
Brand Manager: Elinor Gregory For permission to use material from this text or product, submit all
requests online at www.cengage.com/permissions
Market Development Managers: Kristie Clark, Further permissions questions can be emailed to
Gretchen Swann [email protected]
Developmental Editor: Pam Conrad
Senior Content Project Manager: Some of the product names and company names used in this book have been used for
Jennifer Goguen McGrail identification purposes only and may be trademarks or registered trademarks of their
Composition: GEX Publishing Services respective manufacturers and sellers.
Art Director: Marissa Falco Microsoft and the Office logo are either registered trademarks or trademarks of
Microsoft Corporation in the United States and/or other countries. Cengage Learning is
Text Designer: Althea Chen
an independent entity from the Microsoft Corporation, and not affiliated with Microsoft
Cover Designer: GEX Publishing Services in any manner.
Cover Art: ©altrendo nature/Stockbyte/Getty Disclaimer: Any fictional data related to persons or companies or URLs used throughout
Images this book is intended for instructional purposes only. At the time this book was printed,
Copyeditor: Suzanne Huizenga any such data was fictional and not belonging to any real persons or companies.
Proofreader: Kathy Orrino Library of Congress Control Number: 2013942735
Indexer: Alexandra Nickerson ISBN-13: 978-1-285-05909-9
ISBN-10: 1-285-05909-3
Cengage Learning
200 First Stamford Place, 4th Floor
Stamford, CT 06902
USA
Cengage Learning is a leading provider of customized learning solutions with office loca-
tions around the globe, including Singapore, the United Kingdom, Australia, Mexico,
Brazil, and Japan. Locate your local office at:
www.cengage.com/global
Purchase any of our products at your local college store or at our preferred online store
www.cengagebrain.com
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
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, CSS, and XML have 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.
System Requirements
This book assumes that students have an Internet connection, a text editor, and a current browser
that supports HTML5 and CSS3. The following is a list of the most recent versions of the major
browsers at the time this text was published: Internet Explorer 10, Firefox 21, Safari 6.0.5, Opera
12.15, and Chrome 27. 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 and CSS code in slightly different ways. It is highly recommended
that students have several different browsers installed on their systems for comparison. Students
might also want to run older versions of these browsers to highlight compatibility issues. Students
who intend to validate their XML documents in Tutorials 12-14 should have access to an XML
validating parser such as Exchanger XML Editor or to an online validation service. The screen-
shots in this book were produced using Internet Explorer 9.0 (Tutorials 1-10) or Internet Explorer
10.0 (Tutorials 11-14) running on Windows 7 Professional (64-bit), unless otherwise noted.
If students are using different browsers or operating systems, their screens will vary slightly from
those shown in the book; this should not present any problems in completing the tutorials.
www.cengage.com/series/newperspectives
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
vi New Perspectives Series
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.
reference Reference
Within each tutorial, Reference boxes appear before a set of steps to provide a succinct sum-
Glossary/Index mary and preview of how to perform a task. In addition, each book includes a combination
Glossary/Index to promote easy reference of material.
www.cengage.com/series/newperspectives
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML, CSS, and XML 4th Edition, Comprehensive vii
Ken Baldauf, host of CourseCasts, is a faculty member of the Florida State University Computer
Science Department where he is responsible for teaching technology classes to thousands of
FSU students each year. Ken is an expert in the latest technology trends; he gathers and sorts
through the most pertinent news and information for CourseCasts so your students can spend
their time enjoying technology, rather than trying to figure it out. Open or close your lecture
with a discussion based on the latest CourseCast.
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, ExamView testbank, PowerPoint presentations, data files, solution
files, figure files, and a sample syllabus are all available on a single CD-ROM or for downloading
at http://www.cengage.com.
www.cengage.com/series/newperspectives
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
viii New Perspectives Series
Acknowledgments
I would like to thank the people who worked so hard to make this book possible. Special
thanks to my developmental editor, Sasha Vodnik, for his hard work and valuable insights, and
to my Product Manager, Kathy Finnegan, who has worked tirelessly in overseeing this project
and made my task so much easier with her enthusiasm and good humor. Other people at
Course Technology who deserve credit are Marie Lee, Executive Editor; Julia Leroux-Lindsey,
Associate Product Manager; Jacqueline Lacaire, Editorial Assistant; Jennifer Goguen McGrail,
Senior Content Project Manager; Christian Kunciw, Manuscript Quality Assurance (MQA)
Supervisor; and John Freitas, Serge Palladino, Susan Pedicini, Danielle Shaw, Marianne Snow,
Ashlee Welz Smith, and Susan Whalen, MQA testers.
Feedback is an important part of writing any book, and thanks go to the following reviewers
for their helpful ideas and comments: Bernice Howard, St. Johns River Community College;
Lisa Macon, Valencia Community College; Sharon Scollard, Mohawk College; Luke Sui,
Daytona State College; and John Taylor, Southeastern Technical College.
I want to thank my wife Joan and my six children for their love, encouragement and patience
in putting up with a sometimes distracted husband and father. This book is dedicated to the
memory of Mac Mendelsohn, who generously gave me my chance in this business and whose
constant encouragement in the early years inspired me and taught me so much.
– Patrick Carey
Many thanks to everyone who helped in this revision. Pam Conrad, my sharp-eyed develop-
mental editor, suggested improvements and asked a lot of important questions that helped me
immeasurably in tightening up the material. The good advice of Kathy Finnegan, my product
manager, kept me focused on the important aspects of the revision process, and she sweated
a lot of the small stuff so I didn’t have to. I’m also grateful to Donna Gridley, the series
executive editor, for keeping the faith during the evolution of this revision. Jen Goguen
McGrail, Kelly Morrison, and the staff at GEX Publishing Services made it all look amazing.
And MQA testers Serge Palladino, Danielle Shaw, and Susan Whalen read everything through,
completed all the steps, and gave smart feedback that removed many roadblocks for future
users. Finally, thanks to my husband, Jason Bucy, for encouraging me to balance diving deep
into XML with stepping away from the computer, getting outside, and enjoying the world
with him.
– Sasha Vodnik
www.cengage.com/series/newperspectives
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML, CSS, and XML 4th Edition, Comprehensive ix
BRIEF Contents
HTML Level I Tutorials
Tutorial 1 Getting Started with HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 1
Creating a Product Page for a Small Business
Tutorial 2 Developing a Web Site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 71
Creating a Web Site for Amateur Photographers
Level II Tutorials
Tutorial 3 Designing a Web Page with CSS . . . . . . . . . . . . . . . . . . . . . . HTML 137
Creating a Web Site for a Rural Farm
Tutorial 4 Creating Page Layouts with CSS . . . . . . . . . . . . . . . . . . . . . . HTML 221
Designing a Web Site for a Cycling Club
Tutorial 5 Working with Tables and Columns. . . . . . . . . . . . . . . . . . . . . HTML 317
Creating a Radio Program Schedule
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
x New Perspectives Series
Glossary/Index REF 1
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML, CSS, and XML 4th Edition, Comprehensive xi
Table of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v Marking the Head Element . . . . . . . . . . . . . . . . . . . . . HTML 13
Tools for Creating HTML Documents . . . . . . . . . . . . HTML 8 Marking a Block Quote . . . . . . . . . . . . . . . . . . . . . HTML 32
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
xii New Perspectives Series
Using the Generic Elements div and span . . . . . . . HTML 48 Attributes of the a Element . . . . . . . . . . . . . . . . . . HTML 84
Figures and Figure Captions . . . . . . . . . . . . . . . . . HTML 53 Setting the Base Path . . . . . . . . . . . . . . . . . . . . . . HTML 88
Working with Character Sets and Special Linking to Locations within a Document . . . . . . . . . . HTML 89
Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 54
Marking Locations with the id Attribute . . . . . . . HTML 91
Character Sets . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 54
Linking to an id . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 93
Character Encoding . . . . . . . . . . . . . . . . . . . . . . . . HTML 55
Creating Links to ids in Other Documents . . . . . . HTML 95
Character Entity References . . . . . . . . . . . . . . . . . HTML 55
Session 2.1 Quick Check . . . . . . . . . . . . . . . . . . . . . . . HTML 99
Specifying the Character Set . . . . . . . . . . . . . . . . HTML 58
Session 2.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 100
Session 1.2 Quick Check . . . . . . . . . . . . . . . . . . . . . . . HTML 60
Working with Linked Images and Image Maps . . . . HTML 102
Review Assignments . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 61
Introducing Image Maps . . . . . . . . . . . . . . . . . . . HTML 103
Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 63
Client-Side Image Maps . . . . . . . . . . . . . . . . . . . HTML 104
Tutorial 2 Developing a Web Site
Creating a Web Site for Amateur Photographers . . . . HTML 71 Defining Hotspots . . . . . . . . . . . . . . . . . . . . . . . . HTML 104
Exploring Web Site Structures . . . . . . . . . . . . . . . . . . HTML 73 Linking to Resources on the Internet . . . . . . . . . . . . HTML 109
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML, CSS, and XML 4th Edition, Comprehensive xiii
Linking to FTP Servers . . . . . . . . . . . . . . . . . . . . . . HTML 114 Applying a Style Sheet . . . . . . . . . . . . . . . . . . . . . . . HTML 144
Linking to an E-Mail Address . . . . . . . . . . . . . . . . . HTML 115 External Style Sheets . . . . . . . . . . . . . . . . . . . . . HTML 146
Working with Hypertext Attributes . . . . . . . . . . . . . . HTML 117 Embedded Style Sheets . . . . . . . . . . . . . . . . . . . HTML 148
Opening a Secondary Window or Tab . . . . . . . . . . HTML 117 Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 149
Creating a Tooltip . . . . . . . . . . . . . . . . . . . . . . . . . HTML 119 Exploring the Style Cascade . . . . . . . . . . . . . . . . . . HTML 149
Creating a Semantic Link . . . . . . . . . . . . . . . . . . HTML 120 Style Precedence and Specificity . . . . . . . . . . . . HTML 150
Using the link Element . . . . . . . . . . . . . . . . . . . . HTML 121 Style Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . HTML 150
Working with Metadata . . . . . . . . . . . . . . . . . . . . . . . HTML 121 Defining Important Styles . . . . . . . . . . . . . . . . . . . HTML 151
Using the meta Element . . . . . . . . . . . . . . . . . . . . HTML 121 Writing Style Comments . . . . . . . . . . . . . . . . . . . . . . HTML 151
Using the meta Element to Reload a Defining Color in CSS . . . . . . . . . . . . . . . . . . . . . . . . HTML 152
Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 124
RGB Color Values . . . . . . . . . . . . . . . . . . . . . . . . . HTML 152
Session 2.2 Quick Check . . . . . . . . . . . . . . . . . . . . . . HTML 124
Using Color Names . . . . . . . . . . . . . . . . . . . . . . . HTML 154
Review Assignments . . . . . . . . . . . . . . . . . . . . . . . . . HTML 125
Defining Text and Background Colors . . . . . . . . . HTML 156
Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 127
Enhancements to Color in CSS3 . . . . . . . . . . . . . . . . HTML 158
ProSkills Exercise: Written Communication . . . . . . . HTML 135
HSL Color Values . . . . . . . . . . . . . . . . . . . . . . . . . HTML 158
Tutorial 3 Designing a Web Page with CSS Styles Using Progressive Enhancement . . . . . . . . HTML 160
Creating a Web Site for a Rural Farm . . . . . . . . . . . . . HTML137
Session 3.1 Quick Check . . . . . . . . . . . . . . . . . . . . . . . HTML 161
Session 3.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 138
Session 3.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 162
Introducing CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 140
Exploring Selector Patterns . . . . . . . . . . . . . . . . . . . HTML 164
The History of CSS . . . . . . . . . . . . . . . . . . . . . . . . HTML 142
Contextual Selectors . . . . . . . . . . . . . . . . . . . . . . HTML 165
Browser Extensions . . . . . . . . . . . . . . . . . . . . . . . HTML 143
Attribute Selectors . . . . . . . . . . . . . . . . . . . . . . . HTML 168
Defining a Style Rule . . . . . . . . . . . . . . . . . . . . . . . . HTML 144
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
xiv New Perspectives Series
Styling Web Page Text . . . . . . . . . . . . . . . . . . . . . . . . HTML 171 Review Assignments . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 211
Choosing the Text Font . . . . . . . . . . . . . . . . . . . . . HTML 171 Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 214
Setting the Font Size . . . . . . . . . . . . . . . . . . . . . . HTML 174 Tutorial 4 Creating Page Layouts with CSS
Designing a Web Site for a Cycling Club . . . . . . . . . . . HTML 221
Controlling Spacing and Indentation . . . . . . . . . HTML 176
Session 4.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 222
Working with Font Styles . . . . . . . . . . . . . . . . . . . HTML 180
Exploring Display Styles . . . . . . . . . . . . . . . . . . . . . . HTML 224
Aligning Text Horizontally and Vertically . . . . . . HTML 182
The display style . . . . . . . . . . . . . . . . . . . . . . HTML 225
Combining All Text Formatting in a
Single Style . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 183 The Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 226
Working with Web Fonts . . . . . . . . . . . . . . . . . . . . . HTML 185 Creating a Reset Style Sheet . . . . . . . . . . . . . . . . . . HTML 227
The @font-face Rule . . . . . . . . . . . . . . . . . . . . HTML 186 Designing the Background . . . . . . . . . . . . . . . . . . . . HTML 229
Installing a Cross-Browser Web Font . . . . . . . . . HTML 187 Background Image Options . . . . . . . . . . . . . . . . HTML 230
Understanding the CSS @rules . . . . . . . . . . . . . HTML 189 CSS3 Background Styles . . . . . . . . . . . . . . . . . . . HTML 231
Session 3.2 Quick Check . . . . . . . . . . . . . . . . . . . . . . . HTML 191 The background Shorthand Property . . . . . HTML 233
Designing Styles for Lists . . . . . . . . . . . . . . . . . . . . . HTML 194 Adding a Page Background . . . . . . . . . . . . . . . . . HTML 235
Choosing a List Style Type . . . . . . . . . . . . . . . . . . HTML 194 Exploring Browser Extensions . . . . . . . . . . . . . . . . . HTML 236
Using Images for List Markers . . . . . . . . . . . . . . HTML 196 Exploring Layout Designs . . . . . . . . . . . . . . . . . . . . . HTML 237
Changing the List Layout . . . . . . . . . . . . . . . . . . HTML 198 Fixed, Fluid, and Elastic Layouts . . . . . . . . . . . . . HTML 239
Using Pseudo-Classes and Pseudo-Elements . . . . . . HTML 200 Setting the Page Width and Height . . . . . . . . . . HTML 240
Session 3.3 Quick Check . . . . . . . . . . . . . . . . . . . . . . HTML 210 Clearing a Float . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 246
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML, CSS, and XML 4th Edition, Comprehensive xv
Setting Margins and Padding . . . . . . . . . . . . . . . . . HTML 252 Session 4.3 Quick Check . . . . . . . . . . . . . . . . . . . . . . HTML 303
Working with Borders . . . . . . . . . . . . . . . . . . . . . . . . HTML 262 Tutorial 5 Working with Tables and Columns
Creating a Radio Program Schedule . . . . . . . . . . . . . . HTML 317
Setting Border Width and Color . . . . . . . . . . . . . HTML 263
Session 5.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 318
Setting the Border Design . . . . . . . . . . . . . . . . . . HTML 264
Introducing Web Tables . . . . . . . . . . . . . . . . . . . . . . HTML 320
Creating Rounded Corners . . . . . . . . . . . . . . . . . . . . HTML 266
Marking Tables and Table Rows . . . . . . . . . . . . . HTML 321
Elongated Corners . . . . . . . . . . . . . . . . . . . . . . . . HTML 267
Marking Table Headings and Table Data . . . . . . .HTML 323
Browser Extensions to Rounded Corners . . . . . . HTML 268
Adding a Table Border . . . . . . . . . . . . . . . . . . . . HTML 325
Managing Your Layout . . . . . . . . . . . . . . . . . . . . . . . HTML 270
Spanning Rows and Columns . . . . . . . . . . . . . . . . . . HTML 327
Using the Outline Style . . . . . . . . . . . . . . . . . . . . HTML 271
Creating a Table Caption . . . . . . . . . . . . . . . . . . . . . HTML 333
Putting It All Together . . . . . . . . . . . . . . . . . . . . HTML 273
Marking Row Groups . . . . . . . . . . . . . . . . . . . . . . . . HTML 336
Session 4.2 Quick Check . . . . . . . . . . . . . . . . . . . . . . HTML 281
Marking Column Groups . . . . . . . . . . . . . . . . . . . . . HTML 338
Session 4.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 282
Adding a Table Summary . . . . . . . . . . . . . . . . . . . . . HTML 342
Positioning Objects . . . . . . . . . . . . . . . . . . . . . . . . . HTML 284
Session 5.1 Quick Check . . . . . . . . . . . . . . . . . . . . . . HTML 343
Absolute Positioning . . . . . . . . . . . . . . . . . . . . . . HTML 284
Session 5.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 344
Relative Positioning . . . . . . . . . . . . . . . . . . . . . . . HTML 287
Formatting Tables with HTML Attributes . . . . . . . . . HTML 346
Fixed and Inherited Positioning . . . . . . . . . . . . . HTML 290
Setting Cell Spacing with HTML . . . . . . . . . . . . . HTML 346
Absolute Positioning and Element Widths . . . . . HTML 295
Setting Cell Padding with HTML . . . . . . . . . . . . . HTML 346
Working with Overflow and Clipping . . . . . . . . . . . . HTML 296
Setting Table Widths and Heights in HTML . . . . HTML 348
Horizontal Overflow and White Space . . . . . . . . HTML 299
Setting Row Heights with HTML . . . . . . . . . . . . . HTML 349
Clipping an Element . . . . . . . . . . . . . . . . . . . . . . HTML 299
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
xvi New Perspectives Series
Formatting Table Borders with HTML . . . . . . . . . HTML 349 Creating a Web Form . . . . . . . . . . . . . . . . . . . . . . . . HTML 399
Aligning Cell Contents with HTML . . . . . . . . . . . HTML 351 Interacting with a Web Server . . . . . . . . . . . . . . HTML 400
Vertical Alignment in HTML . . . . . . . . . . . . . . . . HTML 351 Creating a Field Set . . . . . . . . . . . . . . . . . . . . . . . . . HTML 402
Formatting Tables with CSS . . . . . . . . . . . . . . . . . . . HTML 353 Creating Input Boxes . . . . . . . . . . . . . . . . . . . . . . . . HTML 404
Table Border Styles . . . . . . . . . . . . . . . . . . . . . . . HTML 353 Adding Field Labels . . . . . . . . . . . . . . . . . . . . . . . . . HTML 408
Applying Styles to Rows and Columns . . . . . . . . HTML 358 Applying a Style Sheet to a Web Form . . . . . . . . . . . HTML 411
Using the Width and Height Styles . . . . . . . . . . . HTML 362 Defining Default Values and Placeholders . . . . . . . . HTML 415
Caption Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 367 Session 6.1 Quick Check . . . . . . . . . . . . . . . . . . . . . . HTML 419
Applying Table Styles to Other Page Elements . . . . HTML 369 Session 6.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . .HTML 420
Creating Columnar Layouts . . . . . . . . . . . . . . . . . . . HTML 371 Creating a Selection List . . . . . . . . . . . . . . . . . . . . . HTML 422
CSS3 Column Styles . . . . . . . . . . . . . . . . . . . . . . HTML 372 Setting the Size of the Selection List . . . . . . . . . HTML 425
Browser Extensions to Columns . . . . . . . . . . . . . HTML 373 Allowing for Multiple Selections . . . . . . . . . . . . . HTML 427
Session 5.2 Quick Check . . . . . . . . . . . . . . . . . . . . . . HTML 377 Grouping Selection Options . . . . . . . . . . . . . . . . HTML 428
Review Assignments . . . . . . . . . . . . . . . . . . . . . . . . . HTML 378 Creating Option Buttons . . . . . . . . . . . . . . . . . . . . . HTML 429
Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 380 Creating a Text Area Box . . . . . . . . . . . . . . . . . . . . . HTML 434
ProSkills Exercise: Problem Solving . . . . . . . . . . . . . HTML 391 Creating Check Boxes . . . . . . . . . . . . . . . . . . . . . . . . HTML 437
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML, CSS, and XML 4th Edition, Comprehensive xvii
Suggesting Options with Data Lists . . . . . . . . . . . . . HTML 454 Using the HTML5 audio Element . . . . . . . . . . . . . HTML 492
Creating Form Buttons . . . . . . . . . . . . . . . . . . . . . . . HTML 456 Understanding the source Element . . . . . . . . HTML 492
Creating a Command Button . . . . . . . . . . . . . . . HTML 456 Attributes of the audio Element . . . . . . . . . . . HTML 493
Creating Submit and Reset Buttons . . . . . . . . . . HTML 457 Working with Embedded Objects . . . . . . . . . . . . . . HTML 496
Indicating Required Values . . . . . . . . . . . . . . . . . HTML 461 Session 7.1 Quick Check . . . . . . . . . . . . . . . . . . . . . . HTML 501
Validating Based on Data Type . . . . . . . . . . . . . . HTML 463 Session 7.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 502
Testing for a Valid Pattern . . . . . . . . . . . . . . . . . . HTML 464 Exploring Digital Video . . . . . . . . . . . . . . . . . . . . . . HTML 504
Applying Inline Validation . . . . . . . . . . . . . . . . . . . . HTML 466 Bit Rates and Video Quality . . . . . . . . . . . . . . . . . HTML 504
Using the focus Pseudo-Class . . . . . . . . . . . . . HTML 466 File Formats and Codecs . . . . . . . . . . . . . . . . . . . HTML 504
Pseudo-Classes for Valid and Invalid Data . . . . . HTML 468 Video Formats under HTML5 . . . . . . . . . . . . . . . . HTML 505
Session 6.3 Quick Check . . . . . . . . . . . . . . . . . . . . . . HTML 470 Using the HTML5 video Element . . . . . . . . . . . . . HTML 506
Review Assignments . . . . . . . . . . . . . . . . . . . . . . . . . HTML 471 Adding Video Captions with Web Tracks . . . . . . HTML 509
Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 474 Introducing the object Element . . . . . . . . . . . . . HTML 509
Tutorial 7 Designing a Multimedia Web Site
Working with Flash . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 510
Enhancing a Document with Sound, Video,
and Applets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 483 Flash and Apple . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 511
Introducing Multimedia on the Web . . . . . . . . . . . . HTML 486 Working with Flash Parameters . . . . . . . . . . . . . . HTML 512
Multimedia Sites and Bandwidth . . . . . . . . . . . . HTML 487 Nesting a Hypertext Link . . . . . . . . . . . . . . . . . . HTML 515
Understanding Plug-Ins . . . . . . . . . . . . . . . . . . . HTML 487 Embedding Videos from YouTube . . . . . . . . . . . . . . . HTML 516
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
xviii New Perspectives Series
The object Element and ActiveX . . . . . . . . . . . . HTML 518 Introducing Internet Explorer Filters . . . . . . . . . . . . HTML 558
The classid Attribute . . . . . . . . . . . . . . . . . . HTML 518 The Shadow and DropShadow Filters . . . . . HTML 559
The codebase Attribute . . . . . . . . . . . . . . . . . HTML 519 Combining Several Filters . . . . . . . . . . . . . . . . . . HTML 561
Session 7.2 Quick Check . . . . . . . . . . . . . . . . . . . . . . HTML 521 Rotating an Object . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 561
Working with Java Applets . . . . . . . . . . . . . . . . . . . HTML 525 Applying a Color Gradient . . . . . . . . . . . . . . . . . . . . HTML 567
Embedding a Java Applet . . . . . . . . . . . . . . . . . . HTML 525 Creating Linear Gradients with CSS3 . . . . . . . . . HTML 567
Inserting Java Parameters . . . . . . . . . . . . . . . . . HTML 526 Creating Radial Gradients with CSS3 . . . . . . . . . HTML 570
Embedding Java with the applet Element . . . HTML 532 Defining Gradients with Browser Extensions . . . HTML 571
Inserting Inline Images . . . . . . . . . . . . . . . . . . . . HTML 534 Session 8.1 Quick Check . . . . . . . . . . . . . . . . . . . . . . HTML 579
Session 7.3 Quick Check . . . . . . . . . . . . . . . . . . . . . . HTML 536 Applying a Border Image . . . . . . . . . . . . . . . . . . . . . HTML 582
Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 540 Working with Different Media Devices . . . . . . . . . . HTML 588
Tutorial 8 Enhancing a Web Site with Advanced CSS Media Devices . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 588
Designing for Special Effects, Print Media, and the
Mobile Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 547 The @media and @import Rules . . . . . . . . . HTML 589
Creating Drop Shadows with CSS3 . . . . . . . . . . . . . HTML 550 Using Print Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 595
Creating a Box Shadow . . . . . . . . . . . . . . . . . . . . HTML 554 Page Names and the Page Property . . . . . . . . . . HTML 596
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML, CSS, and XML 4th Edition, Comprehensive xix
Working with Page Breaks . . . . . . . . . . . . . . . . . . . . HTML 598 HTML as an SGML Application . . . . . . . . . . . . . . HTML 646
Preventing a Page Break . . . . . . . . . . . . . . . . . . . HTML 599 XML and XHTML . . . . . . . . . . . . . . . . . . . . . . . . . HTML 647
Working with Widows and Orphans . . . . . . . . . . HTML 599 Creating an XHTML Document . . . . . . . . . . . . . . HTML 648
Session 8.2 Quick Check . . . . . . . . . . . . . . . . . . . . . . HTML 605 Creating Well-Formed Documents . . . . . . . . . . . . . . HTML 650
Session 8.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 606 Creating Valid XHTML Documents . . . . . . . . . . . . . . HTML 652
Designing for the Mobile Web . . . . . . . . . . . . . . . . . HTML 608 Transitional, Frameset, and Strict DTDs . . . . . . . HTML 653
Testing a Mobile Design . . . . . . . . . . . . . . . . . . . . . . HTML 609 The Valid Use of Attributes . . . . . . . . . . . . . . . . . HTML 654
Configuring the Viewport . . . . . . . . . . . . . . . . . . . . HTML 610 Inserting the DOCTYPE Declaration . . . . . . . . . . HTML 656
The Viewport meta Element . . . . . . . . . . . . . . . HTML 612 Setting the XHTML Namespace . . . . . . . . . . . . . . . . HTML 658
Introducing Media Queries . . . . . . . . . . . . . . . . . . . HTML 613 HTML5 and XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 660
The media Attribute in CSS3 . . . . . . . . . . . . . . HTML 613 Session 9.1 Quick Check . . . . . . . . . . . . . . . . . . . . . . HTML 663
Choosing a Media Query for the Mobile Web . . . HTML 616 Validating Under XHTML Transitional . . . . . . . . . . . HTML 666
Creating a Mobile Style Sheet . . . . . . . . . . . . . . . . . HTML 619 Testing Under XHTML Strict . . . . . . . . . . . . . . . . . . . HTML 670
Designing for Portrait Orientation . . . . . . . . . . . HTML 621 Using Embedded Style Sheets in XHTML . . . . . . . . . HTML 675
Designing for Landscape Orientation . . . . . . . . . HTML 624 Session 9.2 Quick Check . . . . . . . . . . . . . . . . . . . . . . HTML 677
Session 8.3 Quick Check . . . . . . . . . . . . . . . . . . . . . . HTML 627 Review Assignments . . . . . . . . . . . . . . . . . . . . . . . . . HTML 678
Introducing XHTML . . . . . . . . . . . . . . . . . . . . . . . . . HTML 646 Server-Side and Client-Side Programming . . . . . HTML 690
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
xx New Perspectives Series
Working with the script Element . . . . . . . . . . . . HTML 693 Review Assignments . . . . . . . . . . . . . . . . . . . . . . . . . HTML 731
Placing the script Element . . . . . . . . . . . . . . HTML 694 ProSkills Exercise: Teamwork . . . . . . . . . . . . . . . . . HTML 740
Writing a JavaScript Statement . . . . . . . . . . . . . HTML 694 Additional Case 1 Creating a Music School
Web Site. . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML ADD1
Writing Output to a Web Document . . . . . . . . . . . . HTML 695
Additional Case 2 Creating a Culinary
The document.write() Method . . . . . . . HTML 696
Web Site. . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML ADD9
Understanding JavaScript Syntax . . . . . . . . . . . . . . HTML 699 Additional Case 3 Creating a Web
Working with Variables . . . . . . . . . . . . . . . . . . . . . . HTML 700 Site for a Climbing School. . . . . . . . . . . . . . HTML ADD16
Session 10.1 Quick Check . . . . . . . . . . . . . . . . . . . . . HTML 707 Session 11.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 744
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML, CSS, and XML 4th Edition, Comprehensive xxi
Creating an XML Document . . . . . . . . . . . . . . . . . . . HTML 753 Inserting a Processing Instruction . . . . . . . . . . . . . . HTML 790
The Structure of an XML Document . . . . . . . . . . HTML 754 Working with Namespaces . . . . . . . . . . . . . . . . . . . . HTML 793
Processing an XML Document . . . . . . . . . . . . . . . . . HTML 759 Session 11.2 Quick Check . . . . . . . . . . . . . . . . . . . . . HTML 795
Session 11.1 Quick Check . . . . . . . . . . . . . . . . . . . . . HTML 765 Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 798
Charting the Element Hierarchy . . . . . . . . . . . . . HTML 772 Writing the Document Type Declaration . . . . . . . HTML 818
Writing the Document Body . . . . . . . . . . . . . . . . HTML 774 Declaring Document Elements . . . . . . . . . . . . . . . . . HTML 819
Working with Attributes . . . . . . . . . . . . . . . . . . . . . . HTML 776 Elements Containing Any Type of Content . . . . . HTML 820
Using Character and Entity References . . . . . . . . . . HTML 779 Empty Elements . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 820
Understanding Text Characters and White Space . . . HTML 783 Elements Containing Parsed Character Data . . . HTML 821
Parsed Character Data . . . . . . . . . . . . . . . . . . . . HTML 783 Working with Child Elements . . . . . . . . . . . . . . . . . . HTML 822
Formatting XML Data with CSS . . . . . . . . . . . . . . . . HTML 788 Session 12.1 Quick Check . . . . . . . . . . . . . . . . . . . . . HTML 827
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
xxii New Perspectives Series
Session 12.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 848 Defining a Simple Type Element . . . . . . . . . . . . . . . HTML 884
Working with General Entities . . . . . . . . . . . . . . . . . HTML 850 Defining a Complex Type Element . . . . . . . . . . . . . . HTML 887
Working with Unparsed Data . . . . . . . . . . . . . . . . . . HTML 861 Defining an Element with Nested Children . . . . . HTML 891
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML, CSS, and XML 4th Edition, Comprehensive xxiii
Validating a Schema Document . . . . . . . . . . . . . . . . HTML 899 Russian Doll Design . . . . . . . . . . . . . . . . . . . . . . . HTML 946
Applying a Schema to an Instance Document . . . . . HTML 901 Venetian Blind Design . . . . . . . . . . . . . . . . . . . . . HTML 948
Session 13.1 Quick Check . . . . . . . . . . . . . . . . . . . . . HTML 905 Session 14.1 Quick Check . . . . . . . . . . . . . . . . . . . . . HTML 951
Validating with Built-In Data Types . . . . . . . . . . . . . HTML 908 Combining XML Vocabularies . . . . . . . . . . . . . . . . . HTML 954
String Data Types . . . . . . . . . . . . . . . . . . . . . . . . HTML 909 Creating a Compound Document . . . . . . . . . . . . HTML 956
Numeric Data Types . . . . . . . . . . . . . . . . . . . . . . HTML 910 Understanding Name Collision . . . . . . . . . . . . . . HTML 958
Data Types for Dates and Times . . . . . . . . . . . . . . HTML 911 Working with Namespaces in an Instance
Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 959
Deriving Customized Data Types . . . . . . . . . . . . . . . HTML 914
Declaring and Applying a Namespace
Deriving a List Data Type . . . . . . . . . . . . . . . . . . HTML 916
to a Document . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 959
Deriving a Union Data Type . . . . . . . . . . . . . . . . HTML 916
Applying a Namespace to an Element . . . . . . . . HTML 961
Deriving a Restricted Data Type . . . . . . . . . . . . . HTML 917
Working with Attributes . . . . . . . . . . . . . . . . . . . HTML 963
Deriving Data Types Using Regular Expressions . . . HTML 923
Associating a Schema with a Namespace . . . . . . . . HTML 965
Introducing Regular Expressions . . . . . . . . . . . . HTML 924
Targeting a Namespace . . . . . . . . . . . . . . . . . . . HTML 965
Applying a Regular Expression . . . . . . . . . . . . . . HTML 926
Including and Importing Schemas . . . . . . . . . . . HTML 968
Session 13.2 Quick Check . . . . . . . . . . . . . . . . . . . . . HTML 929
Referencing Objects from Other Schemas . . . . . HTML 969
Review Assignments . . . . . . . . . . . . . . . . . . . . . . . . . HTML 930
Combining Standard Vocabularies . . . . . . . . . . . . . . HTML 971
Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 931
Session 14.2 Quick Check . . . . . . . . . . . . . . . . . . . . . HTML 973
Tutorial 14 Working with Advanced Schemas
Creating Advanced Schemas for Higher Ed Session 14.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 974
Test Prep . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 941
Adding a Namespace to a Style Sheet . . . . . . . . . . . HTML 976
Session 14.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 942
Declaring a Namespace in a Style Sheet . . . . . . HTML 978
Designing a Schema . . . . . . . . . . . . . . . . . . . . . . . . . HTML 944
Qualifying Elements and Attributes by
Flat Catalog Design . . . . . . . . . . . . . . . . . . . . . . . HTML 944 Default . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 980
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
xxiv New Perspectives Series
Session 14.3 Quick Check . . . . . . . . . . . . . . . . . . . . . HTML 985 Appendix B Making the Web More Accessible. . HTML B1
Review Assignments . . . . . . . . . . . . . . . . . . . . . . . . . HTML 986 Appendix C HTML Elements and Attributes. . . HTML C1
Case Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 987 Appendix D Cascading Styles and Selectors. . . HTML D1
ProSkills Exercise: Decision Making . . . . . . . . . . . . . HTML 995 Appendix E Frames and Framesets. . . . . . . . . . HTML E1
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
TUTORIAL
1
O B J E C TIV ES Getting Started
Session 1.1
• Explore the history of the
Internet, the Web, and HTML
with HTML5
• Compare the different versions Creating a Product Page for a Small
of HTML
• Study the syntax of HTML tags Business
and attributes
• Define a Web page head,
body, and title Case | The J-Prop Shop
• Work with the HTML5
structural elements Dave Vinet owns a small business called the J-Prop Shop that builds
and sells circus props and equipment. Dave is looking to expand
Session 1.2
• Mark page headings, his business and his visibility by upgrading his Web site. Dave has
paragraphs, block quotes, and already written the text for the Web site’s home page and has gener-
addresses ated some of the graphic images for it. He has come to you for help
• Create unordered and in designing a Web page and writing the code. Dave hopes to build
ordered lists on his Web page in the future as his business expands, so he would
• Apply an external style sheet to like you to write code that takes advantage of the latest Web stan-
a Web page dards, including HTML5. Your job will be to create a sample home
• Run a JavaScript program page that Dave can use as a foundation for his new Web site.
• Mark text-level elements
including strong and
emphasized text
• Insert inline images and
line breaks
• Insert special characters from
extended character sets
HTML 1
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML 2 HTML and CSS | Tutorial 1 Getting Started with HTML5
HTML structural
The contents of elements define
the title element the basic
appear in the structure of the
browser title bar. contents of the
Web page.
The body
element contains
the content of
the page body.
The section
element marks a
major section of
the Web page.
The article element
contains content about a
specific area of interest.
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
Tutorial 1 Getting Started with HTML5 | HTML and CSS HTML 3
Markup Tags
Document
elements are
marked
using tags.
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML 4 HTML and CSS | Tutorial 1 Getting Started with HTML5
Networks
A network is a structure that allows devices known as nodes or hosts to be linked
together to share information and services. Hosts can include devices such as comput-
ers, printers, and scanners because they are all capable of sending and receiving data
electronically over a network.
A host that provides information or a service is called a server. For example, a print
server is a network host that provides printing services to the network; a file server is
a host that provides storage space for saving and retrieving files. A computer or other
device that receives a service is called a client. Networks can follow several different
designs based on the relationship between the servers and the clients. One of the most
commonly used designs is the client-server network in which several clients access
information provided by one or more servers. You might be using such a network to
access your data files for this tutorial.
Networks can also be classified based on the range 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 uncount-
able number of networks and hosts involving computers, mobile phones, PDAs, MP3
players, gaming systems, and television stations. Like many business owners, Dave uses
the Internet to advertise his business to potential customers.
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
Tutorial 1 Getting Started with HTML5 | HTML and CSS HTML 5
Introducing HTML
Web pages are text files written in Hypertext Markup Language (HTML). We’ve already
discussed hypertext, but what is a markup language? A markup language is a language
that describes the content and structure of a document by identifying, or tagging, dif-
ferent elements in the document. For example, this tutorial contains paragraphs, figure
captions, page headings, and so forth; each of these items could be tagged as a distinct
element using a markup language. Thus, HTML is a markup language that supports both
hypertext and the tagging of distinct document elements.
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML 6 HTML and CSS | Tutorial 1 Getting Started with HTML5
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
Tutorial 1 Getting Started with HTML5 | HTML and CSS HTML 7
Figure 1-1 summarizes the various versions of HTML that have been developed over
the past 20 years. You may be wondering how on Earth anything can be written with so
many versions of HTML to consider. At the time of this writing, you can write your code
following the standards of HTML 4.01 or XHTML 1.1 and be assured that it will be sup-
ported by all major browsers. Many features of HTML5 are also being rapidly adopted
by the market even as work continues on developing the language. HTML5 is the future,
but the challenges for Web designers today lie in knowing which parts of HTML5 are
supported by which browsers, and in developing strategies for supporting older browsers
even as HTML5 is being implemented.
In this book you’ll use HTML5 code for those features that have already achieved sup-
port among current browsers, but you’ll also learn the standards used for HTML 4.01 and
XHTML 1.1 and practice writing code that will support both current and older browsers.
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML 8 HTML and CSS | Tutorial 1 Getting Started with HTML5
A Web page author can also create a style sheet that takes precedence over the
internal style sheets of browsers. In addition, an author can create multiple style sheets
for different output devices: one for rendering a page on a computer screen, another for
printed output, and another for rendering the page aurally. In each case, the markup of
the document content is the same, but the presentation is determined by the style sheet.
where element is the name of the element and content is the content of the element.
For example, the following code marks a paragraph using a two-sided tag set:
<p>Welcome to the J-Prop Shop.</p>
In this example, the <p> tag marks the beginning of the paragraph, the text Welcome
to the J-Prop Shop. is the content of the paragraph element, and the </p> tag marks the
end of the paragraph. Elements can also contain other elements. For example, in the
code
<p>Welcome to <em>Dave's Devil Sticks</em>.</p>
the paragraph tags enclose both the text of the paragraph and the tag set
<em> ... </em>, which is used to mark content that should be treated by the browser
as emphasized text. Note that the <em> tag set must be completely enclosed, or nested,
within the <p> tags. It’s improper to have tags overlap as in the following code sample:
<p>Welcome to <em>Dave's Devil Sticks.</p></em>
In this example, the closing </em> tag is placed after the closing </p> tag, which is
improper because one element must be completely contained within another.
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
Tutorial 1 Getting Started with HTML5 | HTML and CSS HTML 9
An element that does not enclose content is an empty element and it is marked with a
one-sided tag using the syntax
<element />
where element is the name of the element. For example, you can mark a line break
using the br element, which has the following syntax:
<br />
Since empty elements don’t contain content, they’re often employed to send directives
to browsers regarding how a page should be rendered. A browser encountering the br
element would insert a line break, causing the text of the next element in the document
to be placed on a new line.
In these examples, attribute1, attribute2, etc. are the names of attributes associ-
Attributes can be listed in ated with the element, and value1, value2, etc. are the values of those attributes. For
any order, but they must instance, the following code adds the id attribute to a paragraph marked with the p
be separated from one element:
another by a blank space
and enclosed within <p id=”opening”>Welcome to the J-Prop Shop.</p>
single or double
quotation marks.
A browser interpreting this code would recognize that the text Welcome to the J-Prop
Shop. should be treated as a paragraph and given the id value opening.
where attribute1, attribute2, etc. are the names of attributes associated with the
element, and value1, value2, etc. are the values of those attributes.
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML 10 HTML and CSS | Tutorial 1 Getting Started with HTML5
white space characters into a single blank space. Thus, browsers treat the following para-
graph elements in the same way:
<p>Welcome to the J-Prop Shop.</p>
<p>
Welcome to the J-Prop Shop.
</p>
<p>Welcome
to the J-Prop Shop.</p>
The rules that govern how code should be entered are called syntax. The way that HTML
has been implemented by most browsers through the Web’s history has allowed for
minor variations in syntax. One reason for the success of the Web is that HTML has made
it easy for non-programmers to write and edit code without being ensnarled by syntax
violations.
On the other hand, XHTML forces strict syntax on page authors. If an author’s code
does not follow the rules, browsers do not render the page. One advantage of this
approach is that it forces authors to write clear and more concise code; indeed, one of
the driving forces behind the development of XHTML was the desire to clean up some of
the messy and inconsistent code found on the Web.
For example, XHTML requires that all tag names be placed in lowercase letters and
that all attribute values be enclosed within quotation marks. HTML allows either upper-
case or lowercase tag names and does not require attribute values to be quoted. In
addition, XHTML requires that every one-sided tag be entered with a closing slash: for
instance, the br element must be entered as <br /> for XHTML compatibility. Most
browsers, however, accept HTML code in which one-sided tags are entered without clos-
ing slashes; thus, the br element could be entered either as <br> or as <br />.
HTML5 supports the informal standards accepted by most browsers and will continue
to allow for minor variations in syntax. However, it is still good practice to write all code
to be XHTML compliant whenever possible, since it will allow that code to be easily
transferred to XHTML environments if necessary.
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
Tutorial 1 Getting Started with HTML5 | HTML and CSS HTML 11
keywords that would aid search engines in directing interested users to the page. The
body element contains all of the content that appears in the rendered Web page. Thus,
the general structure of an HTML file is
<html>
<head>
head content
</head>
<body>
body content
</body>
</html>
where head content and body content are the content you want to place within the
document’s head and body. Note that the body element is always placed after the head
element.
Figure 1-2 A Web page rendered in standards mode and quirks mode
Different HTML versions have different doctypes. The doctype for HTML 4.01 is:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01/EN”
ƒƒ“http://www.w3.org/TR/html4/strict.dtd”>
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML 12 HTML and CSS | Tutorial 1 Getting Started with HTML5
Finally, the doctype for HTML5 is much simpler than what was required for
HTML 4.01 or XHTML:
<!DOCTYPE html>
HTML5 documents should always be opened in standards mode because they are
Unless you are work- based on the latest specifications for the HTML language.
ing with a legacy page You can learn more about standards mode and quirks mode by searching the Web for
that absolutely needs to examples of the differences between the two modes.
be compatible with old
browsers from the 1990s,
you should always Creating the Initial Document
include a doctype and
put your browser in Now that you’ve seen the basic structure of an HTML document, you are ready to begin
standards mode. creating the sample Web page for Dave’s Web site.
where doctype is the Document Type Declaration, and head content and body
content are the content of the document’s head and body.
You can start creating Dave’s Web page using a basic editor such as Windows
Notepad. Since Dave wants his document to be based on HTML5, you’ll use the HTML5
doctype in your file.
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
Tutorial 1 Getting Started with HTML5 | HTML and CSS HTML 13
Make sure you include ◗ 2. Type the following lines of code in your document. Press the Enter key after each
the exclamation point (!) line. Press the Enter key twice for a blank line between lines of code. See Figure 1-3.
within the doctype; oth-
erwise, browsers will not <!DOCTYPE html>
recognize the doctype. <html>
<head>
</head>
<body>
</body>
</html>
◗ 3. Save the file as jprop.htm in the tutorial.01\tutorial folder included with your
To make it easier to link Data Files.
to your Web pages, follow
Trouble? If you are using the Windows Notepad text editor to create your HTML
the Internet convention
of naming HTML files file, make sure you don’t save the file with the extension .txt, which is the default
and folders using only file extension for Notepad. Instead, save the file with the file extension .htm or
lowercase letters with no .html. Using the incorrect file extension might make the file unreadable to Web
spaces. browsers, which require file extensions of .htm or .html.
Now that you’ve entered the basic structure of your HTML file, you can start entering
the content of the head element.
where document title is the text of the document title. The document title is not dis-
played within the page, but is usually displayed in a browser’s title bar or on a browser
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML 14 HTML and CSS | Tutorial 1 Getting Started with HTML5
tab. The document title is also used by search engines like Google or Yahoo! when com-
piling an index of search results.
Adding Comments
As you write your HTML file, you can add notes or comments about your code. These
comments might include the name of the document’s author and the date the document
was created. Such notes are not intended to be displayed by browsers, but are instead
used to help explain your code to yourself and others. To add notes or comments, insert
a comment tag using the syntax
<!-- comment -->
where comment is the text of the comment or note. For example, the following code
inserts a comment describing the page you’ll create for Dave’s business:
<!-- Sample page for the J-Prop Shop -->
Because they are ignored by the browser, comments can be added anywhere within
the html element.
You’ll add a comment to the jprop.htm file, identifying the author and purpose of this
document.
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
Tutorial 1 Getting Started with HTML5 | HTML and CSS HTML 15
where your name is your name and the date is the current date.
multi-line comment
describing the
document
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML 16 HTML and CSS | Tutorial 1 Getting Started with HTML5
Your browser displays the Web page shown in Figure 1-6. Note that in this case,
the page title appears in the browser tab; in other cases, it will appear in the
browser’s title bar. The page itself is empty because you have not yet added any
content to the body element.
document title
appears in the
browser tab
no content appears
in the page body
There is considerable overlap between HTML and XHTML. You can quickly change
an HTML document into an XHTML document just by altering the first three lines of
code. To convert an HTML file into an XHTML file, replace the doctype and the opening
<html> tag with the following:
<?xml version=”1.0” encoding=”UTF-8” standalone=”no” ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
Since XHTML is an XML vocabulary, the first line notifies browsers that the document
is an XML file. The version number—1.0—tells the browser that the file is written in
XML 1.0. The second line provides the doctype for an XHTML document written under
a strict interpretation of XHTML syntax. The third line of the file contains the opening
<html> tag. In XHTML, the <html> tag must include what is known as a namespace
declaration indicating that any markup tags in the document should, by default, be
considered part of the XHTML language. Because XML documents can contain a mixture
of several different vocabularies, the namespace declaration is necessary to specify the
default language of the document. With these three lines in place, browsers will recog-
nize the file as an XHTML document.
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
Tutorial 1 Getting Started with HTML5 | HTML and CSS HTML 17
Dave’s flyer contains several elements that are common to many Web pages, as
shown in Figure 1-8. A header displays the company’s logo and a footer displays contact
information for the J-Prop Shop. The main section, which describes Dave’s business,
includes several subsections, also known as articles. A second section that appears as a
sidebar displays quotes from some J-Prop customers.
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML 18 HTML and CSS | Tutorial 1 Getting Started with HTML5
header
article
section
article
article
aside footer
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
Tutorial 1 Getting Started with HTML5 | HTML and CSS HTML 19
For example, to mark the header of your Web page, you would enter a header ele-
ment within the page body, using the syntax
<header>
header content
</header>
where header content is the page content that you want displayed within the page
header. One of the reasons we want to define these structural elements is that we can
write styles for them and define the layout of the Web page content.
Based on Dave’s sample document shown in Figure 1-8, you’ll add the header,
section, aside, and footer structural elements to your HTML file.
<section>
</section>
<aside>
</aside>
<footer>
</footer>
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML 20 HTML and CSS | Tutorial 1 Getting Started with HTML5
marks a section
within the page
marks a sidebar
within the page
Structural elements can also be nested within one another. In the structure of Dave’s
page from Figure 1-8, notice that the section element contains three article elements. Add
this content to your HTML file by nesting three article elements within the section
element.
<article>
</article>
<article>
</article>
article elements
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
Tutorial 1 Getting Started with HTML5 | HTML and CSS HTML 21
where id is a unique name assigned to the division and content is page content con-
tained within the division. While not required, the id attribute is useful to distinguish
one div element from another. This becomes particularly important if you apply different
styles to different page divisions.
Figure 1-12 shows how the same page layout marked up using structural elements
under HTML5 would be marked up in HTML 4.01 using the div element.
<header>
HTML5
<article>
<footer>
<div id="header">
HTML 4.01
<div id="article">
<div id="footer">
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
HTML 22 HTML and CSS | Tutorial 1 Getting Started with HTML5
You can use either HTML5’s structural elements or HTML 4.01’s div elements to
identify the major sections of your document. The HTML5 approach is preferred because
it represents the future standard of the Web, and structural elements are more descriptive
than the generic div element. One problem with the div element is that there are no
rules for id names. One Web designer might identify the page heading with the id name
header while another designer might use heading or top. This makes it harder for Web
search engines to identify the main topics of interest in each Web page.
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 standard-
ized 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 per-
forms well with a high-speed connection might be unusable with a dial-up connection.
• Read the documentation on the different versions of HTML and XHTML at the W3C Web
site and keep up to date with the latest developments in the language.
In general, any HTML code that you write should be compatible with the current versions
of the following browsers: Internet Explorer (Windows), Firefox (Windows and Macintosh),
Safari (Windows and Macintosh), Chrome (Windows and Macintosh), and Opera (Windows
and Macintosh). In addition, you should also view your pages on a variety of devices includ-
ing laptops, mobile phones, and tablets. To effectively communicate with customers and
users, you need to make sure your Web site is always readable.
At this point, you’ve created the basic framework of Dave’s Web page. In the next ses-
sion, you’ll insert the page content and learn how to apply a visual style to that content
to create a nicely formatted Web page. If you want to take a break before starting the
next session, you can close any open files or applications.
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
Tutorial 1 Getting Started with HTML5 | HTML and CSS HTML 23
REVIEW
1. What is a markup language?
2. What is XHTML? How does XHTML differ from HTML?
3. What is the W3C? What is the WHATWG?
4. What is a doctype? What are two uses of the doctype?
5. What is incorrect about the syntax of the following code?
<p>Welcome to the <em>J-Prop Shop</p></em>
Copyright 2013 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
Other documents randomly have
different content
The Project Gutenberg eBook of The Natural
History of Pliny, Volume 2 (of 6)
This ebook is for the use of anyone anywhere in the United
States and most other parts of the world at no cost and with
almost no restrictions whatsoever. You may copy it, give it away
or re-use it under the terms of the Project Gutenberg License
included with this ebook or online at www.gutenberg.org. If you
are not located in the United States, you will have to check the
laws of the country where you are located before using this
eBook.
Language: English
PLINY.
TRANSLATED,
AND
VOL. II.
LONDON:
HENRY G. BOHN, YORK STREET, COVENT GARDEN.
MDCCCLV.
J. BILLING,
PRINTER AND STEREOTYPER,
WOKING, SURREY.
CONTENTS.
BOOK VI.
BOOK VII.
BOOK VIII.
BOOK IX.
BOOK X.
THE Euxine1 Sea, which in former times had the name of Axenus,2
from the savage and inhospitable character of the nations living on
its borders, by a peculiar whim of nature, which is continually giving
way before the greedy inroads of the sea, lies between Europe and
Asia. It was not enough for the ocean to have surrounded the earth,
and then deprived us of a considerable portion of it, thus rendering
still greater its uninhabitable proportion; it was not enough for it to
have forced a passage through the mountains, to have torn away
Calpe from Africa, and to have swallowed up a much larger space
than it left untouched; it was not enough for it to have poured its
tide into the Propontis through the Hellespont, after swallowing up
still more of the dry land—for beyond the Bosporus, as well, it opens
with its insatiate appetite upon another space of immense extent,
until the Mæotian lakes3 unite their ravening waters with it as it
ranges far and wide.
That all this has taken place in spite, as it were, of the earth, is
manifested by the existence of so many straits and such numbers of
narrow passages formed against the will of nature—that of the
Hellespont,4 being only eight hundred and seventy-five paces in
width, while at the two Bospori5 the passage across may be effected
by oxen6 swimming, a fact from which they have both derived their
name. And then besides,7 although they are thus severed, there are
certain points on which these coasts stand in the relation of
brotherhood towards each other—the singing of birds and the
barking of dogs on the one side can be heard on the other, and an
intercourse can be maintained between these two worlds by the
medium even of the human voice,8 if the winds should not happen
to carry away the sound thereof.
The length of the borders of the Euxine from the Bosporus to the
Lake Mæotis has been reckoned by some writers at fourteen
hundred and thirty-eight miles; Eratosthenes, however, says that it is
one hundred less. According to Agrippa, the distance from
Chalcedon to the Phasis is one thousand miles, and from that river
to the Cimmerian Bosporus three hundred and sixty. We will here
give in a general form the distances as they have been ascertained
in our own times; for our arms have even penetrated to the very
mouth of the Cimmerian Straits.
After passing the mouth of the Bosporus we come to the river
Rhebas,9 by some writers called the Rhesus. We next come to
Psillis,10 the port of Calpas,11 and the Sagaris,12 a famous river,
which rises in Phrygia and receives the waters of other rivers of vast
magnitude, among which are the Tembrogius13 and the Gallus,14 the
last of which is by many called the Sangarius. After leaving the
Sagaris the Gulf of the Mariandyni15 begins, and we come to the
town of Heraclea,16 on the river Lycus;17 this place is distant from
the mouth of the Euxine two hundred miles. The sea-port of Acone18
comes next, which has a fearful notoriety for its aconite or wolf’s-
bane, a deadly poison, and then the cavern of Acherusia,19 the
rivers Pædopides, Callichorus, and Sonautes, the town of Tium,20
distant from Heraclea thirty-eight miles, and the river Billis.
CHAP. 2. (2.)—PAPHLAGONIA.
ebookgate.com