HTML and CSS

... Preface ... 25

... Book Resources ... 26

... HTML5 and the "Living Standard" ... 26

... Target Group ... 27

... How Should I Read through the Book? ... 28

... Written for You, the Reader ... 28

... Acknowledgments ... 28

1 ... Introduction to the HTML Universe ... 31

1.1 ... Is This Book Even Intended for Me? ... 31

1.2 ... Different Types of Websites ... 32

1.3 ... Dynamic and Static Websites ... 37

1.4 ... Languages for Designing and Developing on the Web ... 41

1.5 ... What Do I Need to Get Started? ... 44

1.6 ... Conventions Used in This Book ... 53

1.7 ... Summary ... 53

2 ... Basic Structure of HTML and HTML Documents ... 55

2.1 ... Syntax and Structure of HTML and HTML Documents ... 55

2.2 ... A Simple HTML Document Framework ... 65

2.3 ... Summary ... 68

3 ... Head Data of an HTML Document ... 69

3.1 ... Overview of HTML Elements for the Head ... 69

3.2 ... title: Heading of the HTML Page ... 70

3.3 ... Related Topic: Naming Convention and Referencing ... 72

3.4 ... Defining the Base URL of a Web Page Using base ... 76

3.5 ... Referencing an External Document via link ... 78

3.6 ... Writing Document-Wide CSS Styles Using style ... 81

3.7 ... Including Scripts in Web Pages Using script ... 82

3.8 ... Metadata for the Document Using meta ... 85

3.9 ... Summary ... 93

4 ... The Visible Part of an HTML Document ... 95

4.1 ... HTML Elements for Structuring Pages ... 95

4.2 ... HTML Elements for Structuring Text ... 111

4.3 ... Using Semantic HTML ... 130

4.4 ... HTML Elements for Text Markups ... 138

4.5 ... Related Topic: Character Encoding ... 157

4.6 ... Character Entities in HTML ... 160

4.7 ... Summary ... 161

5 ... Tables and Hyperlinks ... 163

5.1 ... Structuring Data in a Table ... 163

5.2 ... Electronic References (Hyperlinks) Using a ... 177

5.3 ... Summary ... 193

6 ... Graphics and Multimedia ... 195

6.1 ... Embedding Images Using img ... 196

6.2 ... Creating Link-Sensitive Graphics (Image Maps) ... 204

6.3 ... Loading the Appropriate Image Using picture ... 210

6.4 ... Adding an Icon for the Website (Favicon) ... 213

6.5 ... Using Vector Graphics in HTML Documents ... 214

6.6 ... Drawing Graphics Using canvas ... 221

6.7 ... Playing Videos Using the HTML Element video ... 222

6.8 ... Playing Audio Files Using the HTML Element audio ... 229

6.9 ... Including Other Active Content ... 231

6.10 ... Summary ... 235

7 ... HTML Forms and Interactive Elements ... 237

7.1 ... Defining a Space for Forms ... 238

7.2 ... HTML Input Fields for Forms ... 239

7.3 ... Special Types of Input Fields ... 250

7.4 ... The HTML Attributes for Input Fields ... 257

7.5 ... Other Useful Helpers for Input Fields ... 263

7.6 ... Sending Form Data Using PHP ... 268

7.7 ... Interactive HTML Elements ... 275

7.8 ... Summary ... 277

8 ... Introduction to Cascading Style Sheets ... 279

8.1 ... The Story of CSS ... 280

8.2 ... The Basic Principle of Using CSS ... 281

8.3 ... Integrating CSS into HTML ... 285

8.4 ... Analyzing CSS in the Web Browser ... 295

8.5 ... Summary ... 296

9 ... The Selectors of CSS ... 297

9.1 ... The Simple Selectors of CSS ... 298

9.2 ... Combinators: Concatenating the Selectors ... 332

9.3 ... Recommendation: How to Use Efficient and Simple CSS ... 340

9.4 ... Summary ... 343

10 ... Inheritance and Cascading ... 345

10.1 ... The Principle of Inheritance in CSS ... 345

10.2 ... Understanding the Control System for Cascading ... 354

10.3 ... Related Topic: Passing Values to CSS Features ... 363

10.4 ... Summary ... 374

11 ... The Box Model of CSS ... 375

11.1 ... Classic Box Model of CSS ... 376

11.2 ... Newer Alternate Box Model of CSS ... 386

11.3 ... Analyzing the Box Model in the Browser ... 392

11.4 ... Box Model for Inline Elements ... 393

11.5 ... Designing Boxes ... 393

11.6 ... Related Topic: Web Browser Prefixes (CSS Vendor Prefixes) ... 413

11.7 ... Summary ... 416

12 ... CSS Positioning ... 417

12.1 ... Positioning via CSS Feature "position" ... 417

12.2 ... Controlling Stacking Using "z-index" ... 431

12.3 ... Floating Boxes for Positioning via "float" ... 434

12.4 ... Flexible Boxes of CSS ... 443

12.5 ... Summary ... 454

13 ... Creating Responsive Layouts with CSS ... 457

13.1 ... Basic Theoretical Knowledge of Responsive Web Design ... 457

13.2 ... Let's Create a Simple Responsive Layout ... 472

13.3 ... Even More Flexible Elements ... 489

13.4 ... CSS Grid Layout ... 501

13.5 ... Changing the Behavior of HTML Elements Using "display" ... 513

13.6 ... Calculations Using CSS and the "calc()" Function ... 516

13.7 ... Summary ... 519

14 ... Styling with CSS ... 521

14.1 ... Designing Texts with CSS ... 521

14.2 ... Designing Lists with CSS ... 557

14.3 ... Designing Appealing Tables with CSS ... 566

14.4 ... Adjusting Images and Graphics Using "width" and "height" ... 571

14.5 ... Transforming Elements with CSS ... 574

14.6 ... Creating Transitions with CSS ... 580

14.7 ... Styling HTML Forms with CSS ... 581

14.8 ... Summary ... 590

15 ... Testing and Organizing ... 591

15.1 ... Web Browser Tests: What's Possible? ... 591

15.2 ... Viewing Websites in Different Sizes ... 596

15.3 ... Setting Up a Central Stylesheet ... 598

15.4 ... CSS Reset or Normalization? ... 600

15.5 ... Summary ... 603

16 ... The CSS Preprocessor Sass and SCSS ... 605

16.1 ... Sass or SCSS Syntax ... 605

16.2 ... From Sass/SCSS to CSS ... 606

16.3 ... Installing and Setting Up Sass ... 607

16.4 ... Using Variables with Sass ... 611

16.5 ... Nesting with Sass ... 613

16.6 ... Mixins ("@mixin", "@include") ... 615

16.7 ... Extend ("@extend") ... 618

16.8 ... Media Queries and "@content" ... 621

16.9 ... Operators ... 624

16.10 ... Adjusting Colors and Brightness ... 625

16.11 ... Sass Control Structures ... 628

16.12 ... Functions "@function" ... 632

16.13 ... "@import" ... 633

16.14 ... Comments ... 634

16.15 ... Summary ... 635

17 ... A Brief Introduction to JavaScript ... 637

17.1 ... JavaScript in Web Development ... 638

17.2 ... Writing and Executing JavaScript Programs ... 640

17.3 ... JavaScript Output ... 646

17.4 ... Using Variables in JavaScript ... 652

17.5 ... Overview of JavaScript Data Types ... 657

17.6 ... Arithmetic Operators for Calculation Tasks in JavaScript ... 663

17.7 ... Conditional Statements in JavaScript ... 665

17.8 ... Multiple Repetitions of Program Statements via Loops ... 672

17.9 ... Summary ... 676

18 ... Arrays, Functions, and Objects in JavaScript ... 677

18.1 ... Functions in JavaScript ... 677

18.2 ... Arrays ... 689

18.3 ... Strings and Regular Expressions ... 700

18.4 ... Object-Oriented Programming in JavaScript ... 702

18.5 ... Other Global Objects ... 709

18.6 ... Summary ... 713

19 ... Changing Web Pages Dynamically ... 715

19.1 ... Introduction to the DOM of an HTML Document ... 715

19.2 ... The "document" Object ... 717

19.3 ... DOM Programming Interface ... 717

19.4 ... Accessing Elements in the DOM ... 718

19.5 ... Changing an HTML Element, an Attribute, or the Style ... 730

19.6 ... Responding to JavaScript Events ... 735

19.7 ... Handling the Events Using the Event Handler ... 736

19.8 ... Overview of Common JavaScript Events ... 740

19.9 ... More Information about Events with the "event" Object ... 745

19.10 ... Suppressing the Default Action of Events ... 748

19.11 ... The Event Flow (Event Propagation) ... 749

19.12 ... Adding, Changing, and Removing HTML Elements ... 754

19.13 ... HTML Forms and JavaScript ... 770

19.14 ... Summary ... 777

20 ... An Introduction to Ajax ... 779

20.1 ... An Introduction to Ajax Programming ... 779

20.2 ... Summary ... 797

... The Author ... 799

... Index ... 801