New Perspectives on HTML 5 and CSS: Comprehensive, 8th Edition
By Patrick Carey
Table of Contents:
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .iii
HTML LEVEL I TUTORIALS
Tutorial 1 Getting Started with HTML 5
Creating a Website for a Food Vendor . . . . . . . . .HTML 1
SESSION 1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 2
Exploring the World Wide Web HTML 4
Networks HTML 4
Locating Information on a Network . HTML 4
Web Pages and Web Servers . HTML 4
Introducing HTML . HTML 5
The History of HTML HTML 5
Tools for Working with HTML HTML 6
Content Management Systems and
Frameworks HTML 7
Testing your Code HTML 7
Exploring an HTML Document . HTML 8
The Document Type Declaration HTML 8
Introducing Element Tags HTML 9
The Element Hierarchy HTML 10
Introducing Element Attributes HTML 11
Handling White Space . HTML 12
Viewing an HTML File in a Browser HTML 12
Creating an HTML File HTML 13
Creating the Document Head HTML 15
Setting the Page Title . HTML 16
Adding Metadata to the Document HTML 16
Adding Comments to Your Document HTML 18
Session 1.1 Quick Check . HTML 21
SESSION 1.2 HTML 22
Writing the Page Body . HTML 24
Using Sectioning Elements HTML 24
Comparing Sections in HTML 4 and HTML 5 HTML 26
Using Grouping Elements . . . . . . . . . . . . . . . . . .HTML 26
Using Text-Level Elements HTML 29
Linking an HTML Document to a Style Sheet . HTML 32
Working with Character Sets and Special
Characters . HTML 33
Character Encoding . HTML 33
Character Entity References HTML 34
Working with Inline Images HTML 36
Line Breaks and Other Empty Elements . HTML 38
Working with Block Quotes and Other Elements . HTML 39
Session 1.2 Quick Check . HTML 45
SESSION 1.3 HTML 46
Working with Lists . HTML 48
Ordered Lists HTML 48
Unordered Lists . . . . . . . . . . . . . . . . . . . . . . . . .HTML 49
Description Lists HTML 51
Navigation Lists HTML 55
Working with Hypertext Links HTML 57
Turning an Inline Image into a Link . HTML 59
Specifying the Folder Path . HTML 60
Absolute Paths HTML 61
Relative Paths . HTML 61
Setting the Base Path . HTML 62
Linking to a Location within a Document HTML 63
Marking Locations with the id Attribute . HTML 63
Linking to an id . HTML 63
Anchors and the name Attribute HTML 63
Linking to the Internet and Other Resources . HTML 64
Linking to a Web Resource HTML 64
Linking to an Email Address HTML 65
Linking to a Phone Number . HTML 67
Working with Hypertext Attributes . HTML 68
Validating Your Website . HTML 69
Session 1.3 Quick Check . HTML 71
Review Assignments . HTML 76
Case Problems . HTML 79
Tutorial 2 Getting Started with CSS
Designing a Website for a Fitness Club . . . . . . .HTML 85
SESSION 2.1 HTML 86
Introducing CSS . HTML 88
Types of Style Sheets HTML 88
Viewing a Page Using Different Style Sheets . HTML 89
Exploring Style Rules . HTML 92
Browser Extensions . HTML 92
Embedded Style Sheets . HTML 93
Inline Styles HTML 93
Style Specificity and Precedence . HTML 94
Style Inheritance . HTML 94
Browser Developer Tools . HTML 95
Creating a Style Sheet . HTML 96
Writing Style Comments HTML 96
Defining the Character Encoding . HTML 97
Importing Style Sheets HTML 98
Working with Color in CSS . HTML 98
Color Names . HTML 98
RGB Color Values HTML 99
HSL Color Values HTML 101
Defining Semi-Opaque Colors HTML 102
Setting Text and Background Colors HTML 102
Employing Progressive Enhancement . HTML 106
Session 2.1 Quick Check . HTML 107
SESSION 2.2 HTML 108
Exploring Selector Patterns . HTML 110
Contextual Selectors . HTML 110
Attribute Selectors HTML 113
Working with Fonts HTML 117
Choosing a Font . HTML 117
Exploring Web Fonts . HTML 119
The @font-face Rule HTML 120
Setting the Font Size HTML 123
Absolute Units . HTML 123
Relative Units HTML 123
Scaling Fonts with ems and rems . HTML 124
Using Viewport Units . . . . . . . . . . . . . . . . . . . .HTML 125
Sizing Keywords HTML 125
Controlling Spacing and Indentation . HTML 127
Working with Font Styles . HTML 129
Aligning Text Horizontally and Vertically . HTML 130
Combining All Text Formatting in a
Single Style . HTML 131
Session 2.2 Quick Check . HTML 133
SESSION 2.3 HTML 136
Formatting Lists . HTML 138
Choosing a List Style Type . HTML 138
Creating an Outline Style . HTML 138
Using Images for List Markers . HTML 141
Setting the List Marker Position HTML 142
Working with Margins and Padding HTML 143
Setting the Padding Space HTML 144
Setting the Margin and the Border Spaces . HTML 146
Using Pseudo-Classes and Pseudo-Elements . HTML 149
Pseudo-Classes . HTML 149
Pseudo-classes for Hypertext HTML 152
Pseudo-Elements HTML 154
Generating Content with CSS . HTML 155
Displaying Attribute Values HTML 156
Inserting Quotation Marks HTML 157
Validating Your Style Sheet HTML 158
Session 2.3 Quick Check . HTML 160
Review Assignments . HTML 166
Case Problems . HTML 169
HTML LEVEL II TUTORIALS
Tutorial 3 Designing a Page Layout
Creating a Website for a Chocolatier . . . . . . . HTML 175
SESSION 3.1 HTML 176
Introducing the display Style HTML 178
Creating a Reset Style Sheet HTML 178
Exploring Page Layout Designs HTML 182
Fixed, Fluid, and Elastic Layouts . HTML 182
Working with Width and Height HTML 184
Setting Maximum and Minimum Dimensions HTML 184
Centering a Block Element HTML 187
Vertical Centering . HTML 188
Floating Page Content HTML 189
Clearing a Float . HTML 193
Refining a Floated Layout . HTML 197
Working with Container Collapse . HTML 201
Session 3.1 Quick Check . HTML 204
SESSION 3.2 HTML 206
Introducing Grid Layouts HTML 208
Overview of Grid-Based Layouts HTML 208
Fixed and Fluid Grids . . . . . . . . . . . . . . . . . . . .HTML 209
CSS Frameworks . HTML 210
Introducing CSS Grids HTML 210
Creating a CSS Grid . HTML 213
Working with Grid Rows and Columns HTML 215
Track Sizes with Fractional Units . HTML 217
Repeating Columns and Rows HTML 218
Applying a Grid Layout HTML 219
Outlining a Grid HTML 221
Placing Items within a Grid HTML 223
Placing Items by Row and Column . HTML 224
Using the span Keyword HTML 226
Placing Grid Items by Area HTML 228
Defining the Grid Gap HTML 232
Managing Space within a Grid HTML 234
Alignment for a Single Grid Cell HTML 235
Aligning the Grid . HTML 235
Session 3.2 Quick Check . HTML 237
SESSION 3.3 HTML 238
Positioning Objects . HTML 240
The CSS Positioning Styles HTML 240
Relative Positioning . HTML 240
Absolute Positioning HTML 241
Fixed and Inherited Positioning . HTML 244
Using the Positioning Styles . HTML 244
Handling Overflow HTML 254
Clipping an Element . HTML 257
Stacking Elements . HTML 258
Session 3.3 Quick Check . HTML 260
Review Assignments . HTML 267
Case Problems . HTML 269
Tutorial 4 Graphic Design with CSS
Creating a Graphic Design for a
Genealogy Website . . . . . . . . . . . . . . . . . . . . . . HTML 273
SESSION 4.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 274
Creating Figure Boxes HTML 276
Exploring Background Styles HTML 280
Tiling a Background Image HTML 281
Attaching the Background Image . HTML 283
Setting the Background Image Position . HTML 283
Defining the Extent of the Background HTML 284
Sizing and Clipping an Image . HTML 285
The background Property HTML 286
Adding Multiple Backgrounds HTML 288
Working with Borders HTML 290
Setting Border Width and Color HTML 290
Setting the Border Design . HTML 291
Creating Rounded Corners . HTML 293
Applying a Border Image . HTML 297
Session 4.1 Quick Check . HTML 301
SESSION 4.2 HTML 302
Creating Drop Shadows HTML 304
Creating a Text Shadow . HTML 304
Creating a Box Shadow . HTML 306
Applying a Color Gradient HTML 312
Creating a Linear Gradient HTML 312
Gradients and Color Stops . HTML 315
Creating a Radial Gradient HTML 316
Repeating a Gradient . HTML 320
Creating Semi-Transparent Objects . HTML 322
Session 4.2 Quick Check . HTML 324
SESSION 4.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 326
Transforming Page Objects . HTML 328
Transformations in Three Dimensions . . . . . . . .HTML 332
Understanding Perspective HTML 333
Exploring CSS Filters . . . . . . . . . . . . . . . . . . . . . .HTML 337
Working with Image Maps HTML 341
Defining a Client-Side Image Map . HTML 341
Applying an Image Map . HTML 345
Session 4.3 Quick Check . HTML 347
Review Assignments . HTML 354
Case Problems . HTML 357
Tutorial 5 Designing for the Mobile Web
Creating a Mobile Website for a Daycare Center . . HTML 361
SESSION 5.1 HTML 362
Introducing Responsive Design . HTML 364
Introducing Media Queries . HTML 365
The @media Rule HTML 366
Media Queries and Device Features . HTML 367
Applying Media Queries to a Style Sheet HTML 369
Exploring Viewports and Device Width . HTML 372
Creating a Mobile Design . HTML 375
Creating a Pulldown Menu with CSS HTML 376
Testing Your Mobile Website . HTML 379
Creating a Tablet Design . HTML 383
Creating a Desktop Design . . . . . . . . . . . . . . . . . .HTML 387
Session 5.1 Quick Check . HTML 391
SESSION 5.2 HTML 392
Introducing Flexible Boxes . HTML 394
Defining a Flexible Box . HTML 394
Cross-Browser Flexboxes . HTML 395
Setting the Flexbox Flow . HTML 395
Working with Flex Items HTML 397
Setting the Flex Basis . HTML 397
Defining the Flex Growth . . . . . . . . . . . . . . . . .HTML 398
Defining the Shrink Rate . HTML 399
The flex Property HTML 401
Applying a Flexbox Layout HTML 402
Reordering Page Content with Flexboxes . HTML 407
Exploring Flexbox Layouts . HTML 409
Aligning Items along the Main Axis HTML 409
Aligning Flex Lines HTML 410
Aligning Items along the Cross Axis . HTML 410
Creating a Navicon Menu . HTML 412
Session 5.2 Quick Check . HTML 417
SESSION 5.3 HTML 418
Designing for Printed Media . HTML 420
Previewing the Print Version . HTML 420
Applying a Media Query for Printed Output HTML 421
Working with the @page Rule HTML 422
Setting the Page Size HTML 423
Using the Page Pseudo-Classes . HTML 423
Page Names and the Page Property HTML 423
Formatting Hypertext Links for Printing HTML 428
Working with Page Breaks . HTML 431
Preventing Page Breaks HTML 432
Working with Widows and Orphans HTML 434
Session 5.3 Quick Check . HTML 437
Review Assignments . HTML 443
Case Problems . HTML 446
HTML LEVEL III TUTORIALS
Tutorial 6 Working with Tables and Columns
Creating a Program Schedule for a Radio Station . . HTML 451
SESSION 6.1 HTML 452
Introducing Web Tables HTML 454
Marking Tables and Table Rows . HTML 454
Marking Table Headings and Table Data HTML 456
Adding Table Borders with CSS HTML 459
Spanning Rows and Columns HTML 464
Creating a Table Caption HTML 471
Session 6.1 Quick Check . HTML 475
SESSION 6.2 HTML 476
Creating Row Groups . HTML 478
Creating Column Groups . HTML 482
Exploring CSS Styles and Web Tables HTML 485
Working with Width and Height . HTML 486
Applying Table Styles to Other
Page Elements HTML 490
Tables and Responsive Design . HTML 492
Designing a Column Layout HTML 496
Setting the Number of Columns . HTML 496
Defining Columns Widths and Gaps HTML 498
Managing Column Breaks HTML 501
Spanning Cell Columns HTML 503
Session 6.2 Quick Check . HTML 505
Review Assignments . HTML 510
Case Problems . HTML 512Tutorial 7 Designing a Web Form
Creating a Survey Form . . . . . . . . . . . . . . . . . . HTML 517
SESSION 7.1 HTML 518
Introducing Web Forms HTML 520
Parts of a Web Form . HTML 520
Forms and Server-Based Programs . HTML 521
Starting a Web Form HTML 522
Interacting with the Web Server HTML 523
Creating a Field Set . HTML 525
Marking a Field Set . HTML 525
Adding a Field Set Legend HTML 526
Creating Input Boxes HTML 528
Input Types . HTML 528
Input Types and Virtual Keyboards HTML 531
Adding Field Labels . HTML 532
Designing a Form Layout HTML 534
Defining Default Values and Placeholders . HTML 539
Session 7.1 Quick Check . HTML 543
SESSION 7.2 HTML 544
Entering Date and Time Values HTML 546
Creating a Selection List HTML 547
Working with select Attributes . . . . . . . . . . . . .HTML 549
Grouping Selection Options HTML 551
Creating Option Buttons . HTML 553
Creating Check Boxes . HTML 556
Creating a Text Area Box . HTML 558
Session 7.2 Quick Check . HTML 561
SESSION 7.3 HTML 562
Entering Numeric Data HTML 564
Creating a Spinner Control HTML 564
Creating a Range Slider . . . . . . . . . . . . . . . . . .HTML 566
Suggesting Options with Data Lists . HTML 569
Working with Form Buttons HTML 572
Creating a Command Button HTML 572
Creating Submit and Reset Buttons HTML 572
Designing a Custom Button HTML 575
Validating a Web Form . HTML 575
Identifying Required Values . HTML 575
Validating Based on Data Type HTML 577
Testing for a Valid Pattern HTML 578
Defining the Length of the Field Value . HTML 580
Applying Inline Validation . . . . . . . . . . . . . . . . . . .HTML 581
Using the focus Pseudo-Class . . . . . . . . . . . . . .HTML 581
Pseudo-Classes for Valid and Invalid Data . HTML 583
Session 7.3 Quick Check . HTML 586
Review Assignments . HTML 592
Case Problems . HTML 595
Tutorial 8 Enhancing a Website with Multimedia
Working with Sound, Video, and Animation . . . HTML 601
SESSION 8.1 HTML 602
Introducing Multimedia on the Web HTML 604
Understanding Codecs and Containers . HTML 604
Understanding Plug-Ins . HTML 605
Working with the audio Element . HTML 607
Browsers and Audio Formats . HTML 607
Applying Styles to the Media Player HTML 610
Providing a Fallback to an Audio Clip . HTML 613
Exploring Embedded Objects HTML 615
Plug-In Attributes . HTML 615
Plug-Ins as Fallback Options HTML 616
Session 8.1 Quick Check . HTML 616
SESSION 8.2 HTML 618
Exploring Digital Video HTML 620
Video Formats and Codecs HTML 620
Using the HTML 5 video Element . HTML 621
Adding a Text Track to Video . HTML 624
Making Tracks with WebVTT HTML 625
Placing the Cue Text . HTML 628
Applying Styles to Track Cues HTML 630
Using Third-Party Video Players HTML 634
Exploring the Flash Player . HTML 635
Embedding Videos from YouTube . HTML 636
HTML 5 Video Players HTML 637
Session 8.2 Quick Check . HTML 639
SESSION 8.3 HTML 640
Creating Transitions with CSS HTML 642
Introducing Transitions HTML 642
Setting the Transition Timing . . . . . . . . . . . . . .HTML 644
Delaying a Transition . HTML 647
Creating a Hover Transition . HTML 647
Animating Objects with CSS . HTML 652
The @keyframes Rule HTML 652
Applying an Animation . HTML 655
Controlling an Animation . HTML 658
Session 8.3 Quick Check . HTML 666
Review Assignments . HTML 673
Case Problems . HTML 676
Tutorial 9 Getting Started with JavaScript
Creating a Countdown Clock . . . . . . . . . . . . . . . HTML 681
SESSION 9.1 HTML 682
Introducing JavaScript . HTML 684
Server-Side and Client-Side Programming . HTML 684
The Development of JavaScript . HTML 685
Working with the script Element HTML 686
Loading the script Element HTML 686
Inserting the script Element HTML 687
Creating a JavaScript Program . . . . . . . . . . . . . . .HTML 689
Adding Comments to your JavaScript Code HTML 689
Writing a JavaScript Command HTML 690
Understanding JavaScript Syntax HTML 691
Debugging Your Code . HTML 692
Opening a Debugger HTML 692
Inserting a Breakpoint . HTML 694
Applying Strict Usage of JavaScript . HTML 695
Session 9.1 Quick Check . HTML 697
SESSION 9.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 698
Introducing Objects HTML 700
Object References . HTML 701
Referencing Object Collections HTML 701
Referencing an Object by ID and Name HTML 703
Changing Properties and Applying Methods HTML 704
Object Properties HTML 704
Applying a Method HTML 704
Writing HTML Code . HTML 705
Working with Variables HTML 709
Declaring a Variable HTML 709
Variables and Data Types HTML 710
Using a Variable HTML 711
Working with Date Objects . HTML 711
Creating a Date Object HTML 712
Applying Date Methods . HTML 713
Setting Date and Time Values . HTML 716
Session 9.2 Quick Check . HTML 717
SESSION 9.3 HTML 718
Working with Operators and Operands HTML 720
Using Assignment Operators HTML 720
Calculating the Days Left in the Year . HTML 721
Working with the Math Object HTML 723
Using Math Methods . HTML 723
Using Math Constants . HTML 728
Working with JavaScript Functions . HTML 730
Calling a Function HTML 732
Creating a Function to Return a Value . HTML 733
Running Timed Commands . HTML 734
Working with Time-Delayed Commands . HTML 734
Running Commands at Specified Intervals HTML 734
Controlling How JavaScript Works with
Numeric Values HTML 736
Handling Illegal Operations HTML 736
Defining a Number Format HTML 737
Converting Between Numbers and Text HTML 737
Session 9.3 Quick Check . HTML 739
Review Assignments . HTML 744
Case Problems . HTML 746
Tutorial 10 Exploring Arrays, Loops, and Conditional Statements
Creating a Monthly Calendar . . . . . . . . . . . . . . HTML 751
SESSION 10.1 . . . . . . . . . . . . . . . . . . . . . . . . . HTML 752
Introducing the Monthly Calendar HTML 754
Reviewing the Calendar Structure HTML 755
Adding the calendar() Function HTML 756
Introducing Arrays . HTML 757
Creating and Populating an Array HTML 758
Working with Array Length . HTML 761
Reversing an Array HTML 763
Sorting an Array HTML 764
Extracting and Inserting Array Items . HTML 765
Using Arrays as Data Stacks HTML 766
Session 10.1 Quick Check . HTML 769
SESSION 10.2 HTML 770
Working with Program Loops . HTML 772
Exploring the for Loop HTML 772
Exploring the while Loop . HTML 774
Exploring the do/while Loop HTML 775
Comparison and Logical Operators . HTML 776
Program Loops and Arrays . HTML 777
Array Methods to Loop Through Arrays . HTML 780
Running a Function for Each Array Item HTML 781
Mapping an Array HTML 781
Filtering an Array HTML 782
Session 10.2 Quick Check . HTML 785
SESSION 10.3 . . . . . . . . . . . . . . . . . . . . . . . . . HTML 786
Introducing Conditional Statements HTML 788
Exploring the if Statement HTML 789
Nesting if Statements HTML 791
Exploring the if else Statement . HTML 793
Using Multiple else if Statements HTML 794
Completing the Calendar App . HTML 796
Setting the First Day of the Month HTML 797
Placing the First Day of the Month HTML 798
Writing the Calendar Days . HTML 799
Highlighting the Current Date HTML 801
Displaying Daily Events HTML 803
Managing Program Loops and Conditional Statements HTML 806
Exploring the break Command . HTML 806
Exploring the continue Command HTML 806
Exploring Statement Labels HTML 807
Session 10.3 Quick Check . HTML 809
Review Assignments . HTML 815
Case Problems . HTML 817
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