Preface |
|
iii | |
HTML Level I Tutorials |
|
|
Tutorial 1 Getting Started with HTML 5: Creating a Website for a Food Vendor |
|
|
HTML 1 | |
|
|
HTML 2 | |
|
Exploring the World Wide Web |
|
|
HTML 4 | |
|
|
HTML 4 | |
|
Locating Information on a Network |
|
|
HTML 4 | |
|
Web Pages and Web Servers |
|
|
HTML 4 | |
|
|
HTML 5 | |
|
|
HTML 5 | |
|
Tools for Working with HTML |
|
|
HTML 6 | |
|
Content Management Systems and Frameworks |
|
|
HTML 7 | |
|
|
HTML 7 | |
|
Exploring an HTML Document |
|
|
HTML 8 | |
|
The Document Type Declaration |
|
|
HTML 8 | |
|
|
HTML 9 | |
|
|
HTML 10 | |
|
Introducing Element Attributes |
|
|
HTML 11 | |
|
|
HTML 12 | |
|
Viewing an HTML File in a Browser |
|
|
HTML 12 | |
|
|
HTML 13 | |
|
Creating the Document Head |
|
|
HTML 15 | |
|
|
HTML 16 | |
|
Adding Metadata to the Document |
|
|
HTML 16 | |
|
Adding Comments to Your Document |
|
|
HTML 18 | |
|
|
HTML 21 | |
|
|
HTML 22 | |
|
|
HTML 24 | |
|
Using Sectioning Elements |
|
|
HTML 24 | |
|
Comparing Sections in HTML 4 and HTML 5 HTML 26 |
|
|
|
|
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 | |
|
|
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 | |
|
|
HTML 45 | |
|
|
HTML 46 | |
|
|
HTML 48 | |
|
|
HTML 48 | |
|
|
HTML 49 | |
|
|
HTML 51 | |
|
|
HTML 55 | |
|
Working with Hypertext Links |
|
|
HTML 57 | |
|
Turning an Inline Image into a Link |
|
|
HTML 59 | |
|
Specifying the Folder Path |
|
|
HTML 60 | |
|
|
HTML 61 | |
|
|
HTML 61 | |
|
|
HTML 62 | |
|
Linking to a Location within a Document |
|
|
HTML 63 | |
|
Marking Locations with the id Attribute |
|
|
HTML 63 | |
|
|
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 | |
|
|
HTML 69 | |
|
|
HTML 71 | |
|
|
HTML 76 | |
|
|
HTML 79 | |
|
Tutorial 2 Getting Started with CSS: Designing a Website for a Fitness Club |
|
|
HTML 85 | |
|
|
HTML 86 | |
|
|
HTML 88 | |
|
|
HTML 88 | |
|
Viewing a Page Using Different Style Sheets |
|
|
HTML 89 | |
|
|
HTML 92 | |
|
|
HTML 92 | |
|
|
HTML 93 | |
|
|
HTML 93 | |
|
Style Specificity and Precedence |
|
|
HTML 94 | |
|
|
HTML 94 | |
|
|
HTML 95 | |
|
|
HTML 96 | |
|
|
HTML 96 | |
|
Defining the Character Encoding |
|
|
HTML 97 | |
|
|
HTML 98 | |
|
Working with Color in CSS |
|
|
HTML 98 | |
|
Color Name HTML 98 RGB Color Values |
|
|
HTML 99 | |
|
|
HTML 101 | |
|
Defining Semi-Opaque Colors |
|
|
HTML 102 | |
|
Setting Text and Background Colors |
|
|
HTML 102 | |
|
Employing Progressive Enhancement |
|
|
HTML 106 | |
|
|
HTML 107 | |
|
|
HTML 108 | |
|
Exploring Selector Patterns |
|
|
HTML 110 | |
|
|
HTML 110 | |
|
|
HTML 113 | |
|
|
HTML 117 | |
|
|
HTML 117 | |
|
|
HTML 119 | |
|
|
HTML 120 | |
|
|
HTML 123 | |
|
|
HTML 123 | |
|
|
HTML 123 | |
|
Scaling Fonts with ems and rems |
|
|
HTML 124 | |
|
|
HTML 125 | |
|
|
HTML 125 | |
|
Controlling Spacing and Indentation |
|
|
HTML 127 | |
|
|
HTML 129 | |
|
Aligning Text Horizontally and Vertically |
|
|
HTML 130 | |
|
Combining All Text Formatting in a Single Style |
|
|
HTML 131 | |
|
|
HTML 133 | |
|
|
HTML 136 | |
|
|
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 | |
|
|
HTML 149 | |
|
Pseudo-classes for Hypertext |
|
|
HTML 152 | |
|
|
HTML 154 | |
|
Generating Content with CSS |
|
|
HTML 155 | |
|
Displaying Attribute Values |
|
|
HTML 156 | |
|
Inserting Quotation Marks |
|
|
HTML 157 | |
|
Validating Your Style Sheet |
|
|
HTML 158 | |
|
|
HTML 160 | |
|
|
HTML 166 | |
|
|
HTML 169 | |
HTML Level II Tutorials |
|
|
Tutorial 3 Designing a Page Layout: Creating a Website for a Chocolatier |
|
|
HTML 175 | |
|
|
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 | |
|
|
HTML 188 | |
|
|
HTML 189 | |
|
|
HTML 193 | |
|
Refining a Floated Layout |
|
|
HTML 197 | |
|
Working with Container Collapse |
|
|
HTML 201 | |
|
|
HTML 204 | |
|
|
HTML 206 | |
|
|
HTML 208 | |
|
Overview of Grid-Based Layouts |
|
|
HTML 208 | |
|
|
HTML 209 | |
|
|
HTML 210 | |
|
|
HTML 210 | |
|
|
HTML 213 | |
|
Working with Grid Rows and Columns |
|
|
HTML 215 | |
|
Track Sizes with Fractional Units |
|
|
HTML 217 | |
|
Repeating Columns and Rows |
|
|
HTML 218 | |
|
|
HTML 219 | |
|
|
HTML 221 | |
|
Placing Items within a Grid |
|
|
HTML 223 | |
|
Placing Items by Row and Column |
|
|
HTML 224 | |
|
|
HTML 226 | |
|
Placing Grid Items by Area |
|
|
HTML 228 | |
|
|
HTML 232 | |
|
Managing Space within a Grid |
|
|
HTML 234 | |
|
Alignment for a Single Grid Cell |
|
|
HTML 235 | |
|
|
HTML 235 | |
|
|
HTML 237 | |
|
|
HTML 238 | |
|
|
HTML 240 | |
|
The CSS Positioning Styles |
|
|
HTML 240 | |
|
|
HTML 240 | |
|
|
HTML 241 | |
|
Fixed and Inherited Positioning |
|
|
HTML 244 | |
|
Using the Positioning Styles |
|
|
HTML 244 | |
|
|
HTML 254 | |
|
|
HTML 257 | |
|
|
HTML 258 | |
|
|
HTML 260 | |
|
|
HTML 267 | |
|
|
HTML 269 | |
|
Tutorial 4 Graphic Design with CSS Creating a Graphic Design for a Genealogy Website |
|
|
HTML 273 | |
|
|
HTML 274 | |
|
|
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 | |
|
|
HTML 286 | |
|
Adding Multiple Backgrounds |
|
|
HTML 288 | |
|
|
HTML 290 | |
|
Setting Border Width and Color |
|
|
HTML 290 | |
|
Setting the Border Design |
|
|
HTML 291 | |
|
|
HTML 293 | |
|
|
HTML 297 | |
|
|
HTML 301 | |
|
|
HTML 302 | |
|
|
HTML 304 | |
|
|
HTML 304 | |
|
|
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 | |
|
|
HTML 320 | |
|
Creating Semi-Transparent Objects |
|
|
HTML 322 | |
|
|
HTML 324 | |
|
|
HTML 326 | |
|
Transforming Page Objects |
|
|
HTML 328 | |
|
Transformations in Three Dimensions |
|
|
HTML 332 | |
|
Understanding Perspective |
|
|
HTML 333 | |
|
|
HTML 337 | |
|
|
HTML 341 | |
|
Defining a Client-Side Image Map |
|
|
HTML 341 | |
|
|
HTML 345 | |
|
|
HTML 347 | |
|
|
HTML 354 | |
|
|
HTML 357 | |
|
Tutorial 5 Designing for the Mobile Web: Creating a Mobile Website for a Daycare Center |
|
|
HTML 361 | |
|
|
HTML 362 | |
|
Introducing Responsive Design |
|
|
HTML 364 | |
|
Introducing Media Queries |
|
|
HTML 365 | |
|
|
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 | |
|
|
HTML 375 | |
|
Creating a Pulldown Menu with CSS |
|
|
HTML 376 | |
|
Testing Your Mobile Website |
|
|
HTML 379 | |
|
|
HTML 383 | |
|
Creating a Desktop Design |
|
|
HTML 387 | |
|
|
HTML 391 | |
|
|
HTML 392 | |
|
Introducing Flexible Boxes |
|
|
HTML 394 | |
|
|
HTML 394 | |
|
|
HTML 395 | |
|
|
HTML 395 | |
|
|
HTML 397 | |
|
|
HTML 397 | |
|
|
HTML 398 | |
|
|
HTML 399 | |
|
|
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 | |
|
|
HTML 410 | |
|
Aligning Items along the Cross Axis |
|
|
HTML 410 | |
|
|
HTML 412 | |
|
|
HTML 417 | |
|
|
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 | |
|
|
HTML 423 | |
|
Using the Page Pseudo-Classes |
|
|
HTML 423 | |
|
Page Names and the Page Property |
|
|
HTML 423 | |
|
Formatting Hypertext Links for Printing |
|
|
HTML 428 | |
|
|
HTML 431 | |
|
|
HTML 432 | |
|
Working with Widows and Orphans |
|
|
HTML 43 | |
|
|
HTML 437 | |
|
|
HTML 443 | |
|
|
HTML 446 | |
HTML Level III Tutorials |
|
|
Tutorial 6 Working with Tables and Columns: Creating a Program Schedule for a Radio Station |
|
|
HTML 451 | |
|
|
HTML 452 | |
|
|
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 | |
|
|
HTML 471 | |
|
|
HTML 475 | |
|
|
HTML 476 | |
|
|
HTML 478 | |
|
|
HTML 482 | |
|
Exploring CSS Styles and Web Tables |
|
|
HTML 485 | |
|
Working with Width and Height |
|
|
HTML 486 | |
|
Applying Table Styles to Other |
|
|
|
|
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 | |
|
|
HTML 501 | |
|
|
HTML 503 | |
|
|
HTML 505 | |
|
|
HTML 510 | |
|
|
HTML 512 | |
|
Tutorial 7 Designing a Web Form: Creating a Survey Form |
|
|
HTML 517 | |
|
|
HTML 518 | |
|
|
HTML 520 | |
|
|
HTML 520 | |
|
Forms and Server-Based Programs |
|
|
HTML 521 | |
|
|
HTML 522 | |
|
Interacting with the Web Server |
|
|
HTML 523 | |
|
|
HTML 525 | |
|
|
HTML 525 | |
|
Adding a Field Set Legend |
|
|
HTML 526 | |
|
|
HTML 528 | |
|
|
HTML 528 | |
|
Input Types and Virtual Keyboards |
|
|
HTML 531 | |
|
|
HTML 532 | |
|
|
HTML 534 | |
|
Defining Default Values and Placeholders |
|
|
HTML 539 | |
|
|
HTML 543 | |
|
|
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 | |
|
|
HTML 553 | |
|
|
HTML 556 | |
|
|
HTML 558 | |
|
|
HTML 561 | |
|
|
HTML 562 | |
|
|
HTML 564 | |
|
Creating a Spinner Control |
|
|
HTML 564 | |
|
|
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 | |
|
|
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 | |
|
|
HTML 586 | |
|
|
HTML 592 | |
|
|
HTML 595 | |
|
Tutorial 8 Enhancing a Website with Multimedia: Working with Sound, Video, and Animation |
|
|
HTML 601 | |
|
|
HTML 602 | |
|
Introducing Multimedia on the Web |
|
|
HTML 604 | |
|
Understanding Codecs and Containers |
|
|
HTML 604 | |
|
|
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 | |
|
|
HTML 615 | |
|
Plug-Ins as Fallback Options |
|
|
HTML 616 | |
|
|
HTML 616 | |
|
|
HTML 618 | |
|
|
HTML 620 | |
|
|
HTML 620 | |
|
Using the HTML 5 video Element |
|
|
HTML 621 | |
|
Adding a Text Track to Video |
|
|
HTML 624 | |
|
Making Tracks with WebVTT |
|
|
HTML 625 | |
|
|
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 637 | |
|
|
HTML 639 | |
|
|
HTML 640 | |
|
Creating Transitions with CSS |
|
|
HTML 642 | |
|
|
HTML 642 | |
|
Setting the Transition Timing |
|
|
HTML 644 | |
|
|
HTML 647 | |
|
Creating a Hover Transition |
|
|
HTML 647 | |
|
Animating Objects with CSS |
|
|
HTML 652 | |
|
|
HTML 652 | |
|
|
HTML 655 | |
|
|
HTML 658 | |
|
|
HTML 666 | |
|
|
HTML 673 | |
|
|
HTML 676 | |
|
Tutorial 9 Getting Started with JavaScript: Creating a Countdown Clock |
|
|
HTML 681 | |
|
|
HTML 682 | |
|
|
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 | |
|
|
HTML 692 | |
|
|
HTML 692 | |
|
|
HTML 694 | |
|
Applying Strict Usage of JavaScript |
|
|
HTML 695 | |
|
|
HTML 697 | |
|
|
HTML 698 | |
|
|
HTML 700 | |
|
|
HTML 701 | |
|
Referencing Object Collections |
|
|
HTML 701 | |
|
Referencing an Object by ID and Name |
|
|
HTML 703 | |
|
Changing Properties and Applying Methods |
|
|
HTML 704 | |
|
|
HTML 704 | |
|
|
HTML 704 | |
|
|
HTML Code HTML 705 | |
|
|
HTML 709 | |
|
|
HTML 709 | |
|
|
HTML 710 | |
|
|
HTML 711 | |
|
Working with Date Objects |
|
|
HTML 711 | |
|
|
HTML 712 | |
|
|
HTML 713 | |
|
Setting Date and Time Values |
|
|
HTML 716 | |
|
|
HTML 717 | |
|
|
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 | |
|
|
HTML 723 | |
|
|
HTML 728 | |
|
Working with JavaScript Functions |
|
|
HTML 730 | |
|
|
HTML 732 | |
|
Creating a Function to Return a Value |
|
|
HTML 733 | |
|
|
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 | |
|
|
HTML 737 | |
|
Converting Between Numbers and Text |
|
|
HTML 737 | |
|
|
HTML 739 | |
|
|
HTML 744 | |
|
|
HTML 746 | |
|
Tutorial 10 Exploring Arrays, Loops, and Conditional Statements: Creating a Monthly Calendar |
|
|
HTML 751 | |
|
|
HTML 752 | |
|
Introducing the Monthly Calendar |
|
|
HTML 754 | |
|
Reviewing the Calendar Structure |
|
|
HTML 755 | |
|
Adding the calendar() Function |
|
|
HTML 756 | |
|
|
HTML 757 | |
|
Creating and Populating an Array |
|
|
HTML 758 | |
|
Working with Array Length |
|
|
HTML 761 | |
|
|
HTML 763 | |
|
|
HTML 764 | |
|
Extracting and Inserting Array Items |
|
|
HTML 765 | |
|
Using Arrays as Data Stacks |
|
|
HTML 766 | |
|
|
HTML 769 | |
|
|
HTML 770 | |
|
Working with Program Loops |
|
|
HTML 772 | |
|
|
HTML 772 | |
|
|
HTML 774 | |
|
Exploring the do/while Loop |
|
|
HTML 775 | |
|
Comparison and Logical Operators |
|
|
HTML 776 | |
|
|
HTML 777 | |
|
Array Methods to Loop Through Arrays |
|
|
HTML 780 | |
|
Running a Function for Each Array Item |
|
|
HTML 781 | |
|
|
HTML 781 | |
|
|
HTML 782 | |
|
|
HTML 785 | |
|
|
HTML 786 | |
|
Introducing Conditional Statements |
|
|
HTML 788 | |
|
Exploring the if Statement |
|
|
HTML 789 | |
|
|
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 | |
|
|
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 | |
|
|
HTML 809 | |
|
|
HTML 815 | |
|
|
HTML 817 | |
Appendix A Color Names with Color Values, and HTML Character Entities |
|
HTML A1 | |
Appendix B HTML Elements and Attributes |
|
TML 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 | |