New Perspectives on HTML 5 and CSS: Comprehensive, 8th Edition PDF by Patrick Carey

By

New Perspectives on HTML 5 and CSS: Comprehensive, 8th Edition

By Patrick Carey

New Perspectives on HTML 5 and CSS: Comprehensive, 8th Edition

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

This book is US$10
To get free sample pages OR Buy this book


Share this Book!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.