Table of Contents

Open all
Close all
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.2.1 Web Presence
32
1.2.2 Blog/Online Magazine/Portfolio
33
1.2.3 E-Commerce Websites: Stores without Opening Hours
35
1.2.4 Landing Page/Microsite
36
1.2.5 Web Platform: Building Your Own Social Network
36
1.2.6 Web Apps
37
1.3 Dynamic and Static Websites
37
1.3.1 Static Websites
38
1.3.2 Dynamic Websites
39
1.4 Languages for Designing and Developing on the Web
41
1.4.1 HTML: Text-Based Hypertext Markup Language
41
1.4.2 CSS: Design Language
42
1.4.3 JavaScript: Client-Side Scripting Language of the Web Browser
43
1.4.4 Server-Side Scripting Languages and Databases
43
1.5 What Do I Need to Get Started?
44
1.5.1 HTML Editor for Writing HTML Documents
44
1.5.2 Web Browser for Displaying the Website
46
1.5.3 Step by Step: Creating a Web Page and Viewing It in the Web Browser
47
1.5.4 Checking Written HTML
49
1.5.5 Good Reasons for Validating the HTML Code Anyway
52
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.1.1 How to Structure a Document in HTML
55
2.1.2 Viewing the Tree Structure Using the Document Object Model Inspector
58
2.1.3 HTML Tags and HTML Elements
59
2.1.4 Nesting HTML Elements and the Hierarchical Structure
60
2.1.5 Avoiding Incorrect Nesting of HTML Elements
61
2.1.6 Omitting the End Tag of an HTML Element
62
2.1.7 Standalone HTML Tags without End Tags
63
2.1.8 Additional HTML Attributes for HTML Elements
64
2.1.9 Using Comments in HTML Documents
65
2.2 A Simple HTML Document Framework
65
2.2.1 HTML Document Type: <!doctype>
66
2.2.2 Beginning and Ending an HTML Document: <html>
67
2.2.3 Head of an HTML Document: <head>
67
2.2.4 Visible Part of an HTML Document: <body>
68
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.3.1 Valid and Good File Names for an HTML Document
72
3.3.2 Valid Directory Names and Meaningful Directory Structures
73
3.3.3 Writing a Reference to a Data Source
73
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.8.1 The Most Commonly Used Metadata
85
3.8.2 Setting the Viewport
87
3.8.3 Specifying Useful Metadata for a Web Crawler
88
3.8.4 Useful Metadata for Search Engines
88
3.8.5 Useful Metadata for the Web Browser
90
3.8.6 Using General Metadata
91
3.8.7 My Recommendation: This Metadata Belongs in the Basic HTML Framework
92
3.8.8 HTML Attributes for the <meta> Element
92
3.9 Summary
93
4 The Visible Part of an HTML Document
95
4.1 HTML Elements for Structuring Pages
95
4.1.1 Using <body>: The Displayable Content Section of an HTML Document
96
4.1.2 Introducing the Section Elements of HTML
96
4.1.3 Using Headings with the HTML Elements from <h1> to <h6>
104
4.1.4 Creating a Header Using <header> and a Footer Using <footer>
108
4.1.5 Marking Contact Information Using <address>
110
4.2 HTML Elements for Structuring Text
111
4.2.1 Adding Text Paragraphs Using <p>
112
4.2.2 Forcing Line Breaks Using <br>
113
4.2.3 Adding Optional Line Breaks Using <wbr>
114
4.2.4 Forcing Spaces and Preventing Wrapping Using " "
115
4.2.5 Adding a Topic-Based Separation Using <hr>
116
4.2.6 Adding Paragraphs or Citations Using <blockquote>
117
4.2.7 Defining a General Section Using <div>
118
4.2.8 Using <main>: An HTML Element for the Main Content
120
4.2.9 Labeling Content Separately Using <figure> and <figcaption>
121
4.2.10 Creating Unordered Lists Using <ul> and <li>
122
4.2.11 Creating Ordered Lists Using <ol> and <li>
123
4.2.12 Reversing the Numbering of an Ordered List
124
4.2.13 Changing the Numbering of an Ordered List
124
4.2.14 Nesting Lists within Each Other
125
4.2.15 Creating a Description List Using <dl>, <dt>, and <dd>
128
4.3 Using Semantic HTML
130
4.3.1 HTML without a Precise Structure
130
4.3.2 Generic Structuring Using <div>
132
4.3.3 Semantic Structuring Using the Elements Provided in HTML
135
4.3.4 What’s the Use of Those Semantic HTML Elements?
138
4.4 HTML Elements for Text Markups
138
4.4.1 Marking Up Abbreviations or Acronyms Using <abbr>
140
4.4.2 Marking Up Text as the Source of a Working Title Using <cite>
140
4.4.3 Marking Up Computer Code Representation Using <code> and <pre>
141
4.4.4 Keyboard Input Using <kbd> and Program Output Using <samp>
142
4.4.5 Marking Up Text as a Definition Using <dfn>
143
4.4.6 Marking Up Text as a Variable Using <var>
144
4.4.7 Changing the Text Direction Using <bdo> and <bdi>
144
4.4.8 Emphasizing Text Using <em>, <strong>, <i>, and <b>
145
4.4.9 Highlighting Text Using <mark>
146
4.4.10 Placing Text between Quotes Using <q>
147
4.4.11 Underlining or Crossing Out Text Using <u> and <s>
148
4.4.12 Marking Changes of Text Using <ins> and <del>
150
4.4.13 Displaying Text as Superscript or Subscript Using <sup> and <sub>
151
4.4.14 Marking Dates and Times Using <time>
151
4.4.15 Marking the Small Print Using <small>
155
4.4.16 Using <ruby>, <rp>, and <rt> for Annotations about Pronunciation
155
4.4.17 Grouping Ranges of Individual Text Passages Using <span>
156
4.5 Related Topic: Character Encoding
157
4.5.1 From Bytes to Character Encoding
158
4.5.2 From ASCII to ISO-8859
158
4.5.3 Beyond the Byte Boundary with Unicode
159
4.6 Character Entities in HTML
160
4.6.1 Structure of a Character Entity in HTML
160
4.7 Summary
161
5 Tables and Hyperlinks
163
5.1 Structuring Data in a Table
163
5.1.1 A Simple Table Structure Using <table>, <tr>, <td>, and <th>
164
5.1.2 Combining Columns or Rows Using “colspan” or “rowspan”
166
5.1.3 HTML Attributes for the Table Elements
169
5.1.4 Structuring Tables Using <thead>, <tbody>, and <tfoot>
169
5.1.5 Grouping Columns of a Table Using <colgroup> and <col>
172
5.1.6 Labeling Tables Using <caption> or <figcaption>
174
5.2 Electronic References (Hyperlinks) Using <a>
177
5.2.1 Inserting Links to Other HTML Documents on Your Own Website
178
5.2.2 Inserting Links to Other Websites
181
5.2.3 Opening Links with the “target” Attribute in a New Window
182
5.2.4 Email Links with “href=mailto: . . .”
183
5.2.5 Setting Links to Other Types of Content
185
5.2.6 Adding Download Links Using the “download” Attribute
186
5.2.7 Setting Links to Specific Parts of a Web Page
188
5.2.8 Creating Links to Phone Numbers
191
5.2.9 HTML Attributes for the HTML Element <a>
192
5.3 Summary
193
6 Graphics and Multimedia
195
6.1 Embedding Images Using <img>
196
6.1.1 Adding Images to an HTML Document
196
6.1.2 Specifying the Height and Width of a Graphic
200
6.1.3 Labeling Images Using <figure> and <figcaption>
202
6.1.4 HTML Attributes for the HTML Element <img>
204
6.2 Creating Link-Sensitive Graphics (Image Maps)
204
6.2.1 Use HTML Attributes for the HTML Element <area>
207
6.2.2 Referencing Defined Areas of the HTML Element <area>
208
6.2.3 HTML Attributes of <area>
208
6.3 Loading the Appropriate Image Using <picture>
210
6.3.1 HTML Attributes of <source>
211
6.3.2 Multiple Image Sources with the HTML Attribute “srcset”
212
6.4 Adding an Icon for the Website (Favicon)
213
6.5 Using Vector Graphics in HTML Documents
214
6.5.1 Adding SVG as a Graphic Reference Using <img>
215
6.5.2 Embedding SVG Directly into the Web Page Using <svg>
216
6.5.3 SVG Tags for Vector Graphics
217
6.5.4 Overview of Graphical SVG Elements
217
6.5.5 Further Notes on Using SVG
219
6.5.6 Mathematical Formulas Using MathML
219
6.6 Drawing Graphics Using <canvas>
221
6.7 Playing Videos Using the HTML Element <video>
222
6.7.1 HTML Attributes for the HTML Element <video>
224
6.7.2 Adding Subtitles to a Video Using <track>
225
6.7.3 Playing Videos via YouTube
228
6.8 Playing Audio Files Using the HTML Element <audio>
229
6.8.1 HTML Attributes for the HTML Element <audio>
230
6.9 Including Other Active Content
231
6.9.1 HTML Element <embed>
232
6.9.2 HTML Element <object>
232
6.9.3 HTML Element <iframe>
233
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.2.1 A Single-Line Text Input Field Using <input type="text">
240
7.2.2 A Password Input Field Using <input type="password">
240
7.2.3 A Multiline Text Input Field Using <textarea>
241
7.2.4 A Selection List or Dropdown List Using <select>
242
7.2.5 Creating a Group of Radio Buttons Using <input type="radio">
244
7.2.6 Adding a Text Label Using <label>
245
7.2.7 Using Checkboxes via <input type="checkbox">
245
7.2.8 Using Fields for File Uploads via <input type="file">
246
7.2.9 Overview of Various Buttons
247
7.2.10 Using a Hidden Input Field via <input type="hidden">
248
7.2.11 Writing Form Fields outside of <form>...</form>
248
7.2.12 Multiple Submit Buttons for Different URLs
249
7.3 Special Types of Input Fields
250
7.3.1 An Input Field for Colors Using <input type="color">
251
7.3.2 An Input Field for a Date Using <input type="date">
252
7.3.3 An Input Field for a Time Using <input type="time">
252
7.3.4 Input Fields for Date and Time
253
7.3.5 Input Fields for the Month and the Week
254
7.3.6 An Input Field for Searches Using <input type="search">
254
7.3.7 An Input Field for Email Addresses Using <input type="email">
255
7.3.8 An Input Field for a URL Using <input type="url">
255
7.3.9 An Input Field for Phone Numbers Using <input type="tel">
256
7.3.10 An Input Field for Numbers Using <input type="number">
256
7.3.11 An Input Field for Numbers of a Certain Range
256
7.3.12 Outputting Values and Calculations Using <output>
256
7.4 The HTML Attributes for Input Fields
257
7.4.1 Setting the Input Focus Using the HTML Attribute “autofocus”
258
7.4.2 (De)activating Autocompletion Using the “autocomplete” Attribute
258
7.4.3 A List of Suggestions for Using the HTML Attribute “list” and <datalist>
259
7.4.4 Specifying Minimum and Maximum Values and the Step Size
259
7.4.5 Selecting or Entering Multiple Values Using “multiple”
260
7.4.6 Regular Expressions for Input Fields Using “pattern”
260
7.4.7 A Placeholder for an Input Field Using “placeholder”
260
7.4.8 Defining an Input as Required Using the “required” Attribute
261
7.4.9 Controlling Error Messages for Input Fields
261
7.5 Other Useful Helpers for Input Fields
263
7.5.1 Disabling Form Elements Using the HTML Attribute “disabled”
264
7.5.2 Permitting Read-Only for Input Fields Using the “readonly” Attribute
265
7.5.3 Useful Keyboard Shortcuts and Tab Sequence for Input Fields
265
7.5.4 Grouping Form Elements Using <fieldset> and <legend>
266
7.5.5 Progress Display via <progress>
267
7.5.6 Visualizing Values Using <meter>
268
7.6 Sending Form Data Using PHP
268
7.6.1 Transferring the Data from the Web Browser for Further Processing
269
7.6.2 The “POST” Method
271
7.6.3 The “GET” Method
271
7.6.4 Processing the Data Using a PHP Script
272
7.7 Interactive HTML Elements
275
7.7.1 Expanding/Collapsing Content Using <details> and <summary>
275
7.7.2 A Dialog Box via <dialog>
276
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.2.1 Structure of a CSS Rule
283
8.2.2 Declaring a Selector
283
8.2.3 Using Comments for CSS Code
284
8.2.4 A Few Notes on Formatting CSS Code
285
8.3 Integrating CSS into HTML
285
8.3.1 Style Statements Directly in the HTML Tag Using the HTML Attribute “style”
286
8.3.2 Style Statements in the Document Head Using the HTML Element <style>
287
8.3.3 Integrating Style Statements from an External CSS File Using <link>
288
8.3.4 Combining CSS Rules in the Head Section and in External CSS Files
289
8.3.5 Recommendation: You Should Separate HTML and CSS
291
8.3.6 Testing Alternate Stylesheets during Development
291
8.3.7 Integrating Style Statements from an External CSS File Using “@import”
293
8.3.8 Media-Specific Stylesheets for Specific Output Devices
293
8.3.9 Media-Specific Stylesheets with CSS
295
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.1.1 Addressing HTML Elements Using the Type Selector
299
9.1.2 Addressing HTML Elements Using a Specific Class or ID
301
9.1.3 Universal Selector: Addressing All Elements in a Document
308
9.1.4 Addressing Elements Based on Attributes Using the Attribute Selector
310
9.1.5 An Attribute Selector for Attributes with a Specific Value
312
9.1.6 Attribute Selector for Attributes with a Specific Partial Value
315
9.1.7 CSS Pseudo-Classes: The Selectors for Specific Features
318
9.1.8 The Convenient Structural Pseudo-Classes in CSS
322
9.1.9 Other Useful Pseudo-Classes
329
9.1.10 Pseudo-Elements: The Selectors for Nonexistent Elements
330
9.2 Combinators: Concatenating the Selectors
332
9.2.1 The Descendant Combinator (E1 E2)
334
9.2.2 The Child Combinator (E1 > E2)
335
9.2.3 The Adjacent Sibling Combinator (E1 + E2)
337
9.2.4 The General Sibling Combinator (E1 ~ E2)
338
9.3 Recommendation: How to Use Efficient and Simple CSS
340
9.3.1 How to Write Well Performing CSS
340
9.3.2 Recommendation: Keep the CSS Code as Simple as Possible
342
9.4 Summary
343
10 Inheritance and Cascading
345
10.1 The Principle of Inheritance in CSS
345
10.1.1 Be Cautious When Using Relative Properties
349
10.1.2 Not Everything Gets Inherited
350
10.1.3 Enforcing Inheritance Using “inherit”
350
10.1.4 Restoring the Default Value of a CSS Feature (“initial”)
352
10.1.5 Forcing Inheritance or Restoring a Value ("unset")
352
10.1.6 Forcing Inheritance or Restoring Values for All Properties
353
10.2 Understanding the Control System for Cascading
354
10.2.1 The Origin of a Stylesheet
354
10.2.2 Increasing the Priority of a CSS Feature Using “!important”
355
10.2.3 Sorting by Importance and Origin
356
10.2.4 Sorting by Weighting the Selectors (Specificity)
357
10.2.5 Summary of the Cascading Rules System
361
10.2.6 Analyzing the Cascading in the Browser
362
10.3 Related Topic: Passing Values to CSS Features
363
10.3.1 Different Units of Measurement in CSS
363
10.3.2 Character Strings and Keywords as Values for CSS Features
365
10.3.3 Many Ways of Using a Color in CSS
366
10.3.4 Angular Dimensions in CSS
372
10.3.5 Passing Values via Short Notation to a CSS Feature
373
10.4 Summary
374
11 The Box Model of CSS
375
11.1 Classic Box Model of CSS
376
11.1.1 Specifying the Content Area Using “width” and “height”
376
11.1.2 Specifying the Inner Spacing Using “padding”
378
11.1.3 Creating the Border Using “border”
379
11.1.4 Setting Up the Outer Margin Using “margin”
379
11.1.5 Collapsing Margins
381
11.1.6 Determining the Total Width and Total Height of a Box
385
11.2 Newer Alternate Box Model of CSS
386
11.2.1 Using the “box-sizing” Box Model
388
11.2.2 Using the Alternate Box Model
388
11.3 Analyzing the Box Model in the Browser
392
11.4 Box Model for Inline Elements
393
11.5 Designing Boxes
393
11.5.1 Adding and Designing a Border Using the “border” Property
393
11.5.2 Setting a Background Color Using “background-color”
397
11.5.3 Using Background Images
397
11.5.4 Making Boxes Transparent
405
11.5.5 Adding a Gradient
406
11.5.6 Adding a Shadow Using the “box-shadow” Feature
409
11.5.7 Adding Round Corners Using the CSS Feature “border-radius”
411
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.1.1 Normal Positioning (“position: static”)
418
12.1.2 Positioning Elements Using “top”, “right”, “bottom”, and “left”
420
12.1.3 Relative Positioning (“position: relative”)
421
12.1.4 Absolute Positioning (“position: absolute”)
422
12.1.5 Fixed Positioning (“position: fixed”)
426
12.1.6 Sticky Positioning (“position: sticky”)
429
12.2 Controlling Stacking Using “z-index”
431
12.3 Floating Boxes for Positioning via “float”
434
12.3.1 Terminating the Float
438
12.3.2 Combining Floats into One Entity
440
12.4 Flexible Boxes of CSS
443
12.4.1 Aligning the Flexbox
443
12.4.2 Setting the Flexibility of the Flexbox
451
12.4.3 Determining the Order of the Boxes
454
12.5 Summary
454
13 Creating Responsive Layouts with CSS
457
13.1 Basic Theoretical Knowledge of Responsive Web Design
457
13.1.1 Using Specific Media Types
458
13.1.2 Media Queries for Media Features
461
13.1.3 Integrating and Applying Media Queries for Media Features
461
13.1.4 Basic Structure of a Media Feature Query
462
13.1.5 Which Media Features Can Be Queried?
464
13.1.6 Crucially Important: The Viewport for Mobile Devices
465
13.1.7 Use “em” Instead of Pixels for a Layout Break in Media Queries
469
13.1.8 Layout Breaks (Breakpoints)
471
13.1.9 No More Math Games Thanks to "box-sizing: border-box;"
472
13.1.10 What Happens to Web Browsers That Don’t Understand Media Queries?
472
13.2 Let’s Create a Simple Responsive Layout
472
13.2.1 Let’s Create the Basic Framework Using HTML
473
13.2.2 Setting General CSS Features
474
13.2.3 What Should I Use as a Basic Version without Media Queries: Mobile First?
475
13.2.4 Setting the Layout Break (Breakpoint)
480
13.2.5 Adding More Layout Breaks
482
13.2.6 Customizing the Main Content
487
13.3 Even More Flexible Elements
489
13.3.1 Use Relative Font Sizes instead of Pixels
489
13.3.2 Making Images Responsive
489
13.3.3 Flexible Images in Maximum Possible Width
493
13.3.4 Hiding Images Entirely
495
13.3.5 Loading the Right Image for the Screen Width: <picture>
496
13.3.6 Using Area-Covering Images
498
13.4 CSS Grid Layout
501
13.4.1 Creating a Grid for the Content
501
13.4.2 Placing Elements in the Grid
504
13.4.3 Layout Changes Made Easy
510
13.4.4 Spacing between Grid Lines
511
13.4.5 Checking the Grid in the Web Browser
512
13.5 Changing the Behavior of HTML Elements Using “display”
513
13.5.1 “display: block”, “display: inline”, and “display: inline-block”
513
13.5.2 Hiding Elements Using “display:none”
515
13.5.3 Further Values for “display”
516
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.1.1 Selecting Fonts via “font-family”
522
14.1.2 Providing Fonts via Web Fonts: “@font-face”
526
14.1.3 Using Icons via Icon Fonts
532
14.1.4 Setting the Font Size Using “font-size”
536
14.1.5 Italic and Bold Fonts via “font-style” and “font-weight”
543
14.1.6 Creating Small Caps Using “font-variant”
544
14.1.7 Defining Line Spacing via “line-height”
545
14.1.8 A Short Notation for Font Formatting Using “font”
546
14.1.9 Specifying Letter and Word Spacing via “letter-spacing” and “word-spacing”
547
14.1.10 Setting the Text Alignment Using “text-align”
548
14.1.11 Setting the Vertical Alignment via “vertical-align”
550
14.1.12 Indenting Text Using “text-indent”
551
14.1.13 Underlining Text and Striking Text Through Using “text-decoration”
552
14.1.14 Uppercase and Lowercase Text via “text-transform”
553
14.1.15 Adding Shadow to Text via “text-shadow”
554
14.1.16 Splitting Text into Multiple Columns Using “column-count”
555
14.2 Designing Lists with CSS
557
14.2.1 Customizing Bullet Points Using “list-style-type”
557
14.2.2 Using Images as Bullets via “list-style-image”
559
14.2.3 Positioning Bulleted Lists via “list-style-position”
560
14.2.4 Short Notation “list-style” for Designing Lists
560
14.2.5 Creating Navigation and Menus via Lists
561
14.3 Designing Appealing Tables with CSS
566
14.3.1 Creating Fixed-Width Tables
566
14.3.2 General Recommendation: Designing Appealing Tables with CSS
567
14.3.3 Collapsing Borders for Table Cells Using “border-collapse”
568
14.3.4 Setting the Spacing between Cells via “border-spacing”
569
14.3.5 Displaying Empty Table Cells Using “empty-cells”
570
14.3.6 Positioning Table Captions via “caption-side”
571
14.4 Adjusting Images and Graphics Using “width” and “height”
571
14.5 Transforming Elements with CSS
574
14.5.1 Scaling HTML Elements via “transform: scale()”
575
14.5.2 Rotating HTML Elements Using “transform: rotate()”
576
14.5.3 Skewing HTML Elements Using “transform: skew()”
577
14.5.4 Moving HTML Elements Using “transform: translate()”
577
14.5.5 Combining Different Transformations
578
14.5.6 Other HTML Elements
579
14.6 Creating Transitions with CSS
580
14.7 Styling HTML Forms with CSS
581
14.7.1 Neatly Structuring an HTML Form
582
14.7.2 Aligning Form Elements with CSS
584
14.7.3 Designing Form Elements with CSS
587
14.8 Summary
590
15 Testing and Organizing
591
15.1 Web Browser Tests: What’s Possible?
591
15.1.1 Validating HTML and CSS
592
15.1.2 Which Browsers Are Visitors Currently Using?
592
15.1.3 CSS Web Browser Test
593
15.1.4 HTML5 Web Browser Test
594
15.1.5 Can I Use That?
595
15.1.6 Feature Query Using the “@supports” Rule
596
15.2 Viewing Websites in Different Sizes
596
15.3 Setting Up a Central Stylesheet
598
15.3.1 Combining Everything Back into One File to Shorten the Load Time
600
15.4 CSS Reset or Normalization?
600
15.4.1 Built-In Style Presets of the Web Browser and CSS Reset
600
15.4.2 Normalization: The Alternative to CSS Reset
602
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.3.1 Online CSS Preprocessor without Installation
607
16.3.2 Setting Up Sass Using Visual Studio Code
608
16.3.3 Installing Sass for the Command Line
610
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.2.1 Integrating a JavaScript File in an HTML File
641
17.2.2 Writing JavaScript within HTML
643
17.2.3 Position of JavaScript and Its Execution in the HTML Document
644
17.2.4 Attributes for Manipulating the Load Behavior of JavaScript (“async”, “defer”)
645
17.2.5 The <noscript> Element for No JavaScript
645
17.3 JavaScript Output
646
17.3.1 Standard Dialogs (and Input Dialog)
646
17.3.2 Outputting to the Console
647
17.3.3 Outputting to the Website
649
17.3.4 Running JavaScript without a Web Browser
651
17.3.5 Annotating JavaScript Code with Comments
652
17.4 Using Variables in JavaScript
652
17.4.1 Defining Constants
655
17.4.2 Strict Mode Using “"use strict"”
656
17.5 Overview of JavaScript Data Types
657
17.5.1 Number Data Type (Numbers)
657
17.5.2 String Data Types (Strings)
658
17.5.3 Template Strings
660
17.5.4 Boolean Data Type
660
17.5.5 Undefined and Null Data Types
661
17.5.6 Objects
662
17.5.7 Converting Data Types
662
17.6 Arithmetic Operators for Calculation Tasks in JavaScript
663
17.7 Conditional Statements in JavaScript
665
17.7.1 “true” or “false”: Boolean Truth Value
666
17.7.2 Using the Various Comparison Operators in JavaScript
667
17.7.3 Using the “if” Branch
668
17.7.4 Using the Selection Operator
669
17.7.5 Logical Operators
669
17.7.6 Multiple Branching via “switch”
670
17.8 Multiple Repetitions of Program Statements via Loops
672
17.8.1 Increment and Decrement Operators
672
17.8.2 The Header-Controlled “for” Loop
673
17.8.3 The Header-Controlled “while” Loop
674
17.8.4 The Footer-Controlled “do-while” Loop
674
17.8.5 Ending the Statement Block Using “break”
675
17.8.6 Jumping to the Start of the Loop via “continue”
675
17.9 Summary
676
18 Arrays, Functions, and Objects in JavaScript
677
18.1 Functions in JavaScript
677
18.1.1 Different Ways to Define a Function in JavaScript
678
18.1.2 Calling Functions and Function Parameters
680
18.1.3 Return Value of a Function
683
18.1.4 The Scope of Variables in a Function
683
18.1.5 Defining Functions in Short Notation (Arrow Functions)
686
18.1.6 Using a Function in a Web Page
687
18.2 Arrays
689
18.2.1 Accessing the Individual Elements in the Array
690
18.2.2 Multidimensional Arrays
691
18.2.3 Adding or Removing New Elements in an Array
692
18.2.4 Sorting Arrays
697
18.2.5 Searching within Arrays
698
18.2.6 Additional Methods for Arrays
699
18.3 Strings and Regular Expressions
700
18.3.1 Useful Functions for Strings
700
18.3.2 Applying Regular Expressions to Strings
701
18.4 Object-Oriented Programming in JavaScript
702
18.4.1 What Exactly Are Objects?
702
18.4.2 Creating Objects via Constructor Functions
703
18.4.3 Creating Objects via the Class Syntax
704
18.4.4 Accessing the Object Properties and Methods: Setters and Getters
705
18.4.5 The Keyword “this”
708
18.5 Other Global Objects
709
18.5.1 The Top Object “Object”
709
18.5.2 Objects for the Primitive Data Types: Number, String, and Boolean
709
18.5.3 “Function” Object
711
18.5.4 “Date” Object
711
18.5.5 “Math” Object
711
18.5.6 “Map” Object
712
18.5.7 “Set” Object
712
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.4.1 Finding an HTML Element with a Specific “id” Attribute
719
19.4.2 Finding HTML Elements with a Specific Tag Name
720
19.4.3 Finding HTML Elements with a Specific “class” Attribute
723
19.4.4 Finding HTML Elements with a Specific “name” Attribute
724
19.4.5 Using “querySelector()” and “querySelectorAll()”
725
19.4.6 Other Object and Property Collections
727
19.5 Changing an HTML Element, an Attribute, or the Style
730
19.5.1 Changing the Content of HTML Elements Using “innerHTML”
730
19.5.2 Changing the Value of an HTML Attribute
732
19.5.3 Changing the Style (CSS) of an HTML Element
733
19.6 Responding to JavaScript Events
735
19.7 Handling the Events Using the Event Handler
736
19.7.1 Setting Up an Event Handler as an HTML Attribute in the HTML Element
737
19.7.2 Setting Up Event Handlers as a Property of an Object
737
19.7.3 Setting Up an Event Handler via “addEventListener()”
738
19.8 Overview of Common JavaScript Events
740
19.8.1 The JavaScript Events of the UI (Window Events)
740
19.8.2 JavaScript Events That Can Occur in Connection with the Mouse
742
19.8.3 JavaScript Events for Devices with a Touchscreen
744
19.8.4 JavaScript Events That Occur in Connection with the Keyboard
744
19.8.5 JavaScript Events for HTML Forms
745
19.8.6 JavaScript Events for the Web APIs
745
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.11.1 More about the Bubbling Phase
750
19.11.2 Canceling Bubbling via the “stopPropagation()” Method
751
19.11.3 Intervening in the Event Flow during the Capturing Phase
752
19.11.4 Additional Information on the Capturing and Bubbling Phases
753
19.12 Adding, Changing, and Removing HTML Elements
754
19.12.1 Creating and Adding a New HTML Element and Content
755
19.12.2 Targeting HTML Elements Even More Exactly in the DOM Tree
756
19.12.3 Adding a New HTML Element Even More Targeted to the DOM Tree
760
19.12.4 Deleting an Existing HTML Element from the DOM Tree
762
19.12.5 Replacing an HTML Element in the DOM Tree with Another One
763
19.12.6 Cloning a Node or Entire Fragments of the DOM Tree
764
19.12.7 Different Methods to Manipulate the HTML Attributes
765
19.12.8 The <template> HTML Tag
768
19.13 HTML Forms and JavaScript
770
19.13.1 Reading Text Input Fields with JavaScript
771
19.13.2 Reading Selection Lists with JavaScript
772
19.13.3 Reading Radio Buttons and Checkboxes with JavaScript
773
19.13.4 Intercepting Buttons with JavaScript
775
19.13.5 Controlling the Progress Indicator <progress> with JavaScript
776
19.14 Summary
777
20 An Introduction to Ajax
779
20.1 An Introduction to Ajax Programming
779
20.1.1 A Simple Ajax Example in Execution
781
20.1.2 Creating the “XMLHttpRequest” Object
783
20.1.3 Making a Request to the Server
783
20.1.4 Sending Data
784
20.1.5 Determining the Status of the “XMLHttpRequest” Object
785
20.1.6 Processing the Response from the Server
787
20.1.7 The Ajax Example during Execution
787
20.1.8 A More Complex Ajax Example with XML and DOM
788
20.1.9 The JSON Data Format with Ajax
793
20.2 Summary
797
The Author
799
Index
801