HTML and CSS
Web developers—this is your all-in-one guide to HTML and CSS! Learn to use HTML to format text and structure web pages. Understand the HTML document skeleton before creating forms, referencing hyperlinks, embedding active content, and more. Then style your pages with CSS: Create consistent designs with selectors, the box model, the cascade algorithm, and inheritance. Round out your client-side development experience by getting to know JavaScript. With detailed code examples, you’ll master HTML and CSS in no time!
- Your complete guide to HTML5 and CSS3
- Build HTML documents, design with CSS, and get a hands-on introduction to JavaScript basics
- Create responsive layouts, work with graphics and video, and more
You'll learn about:
- HTML for Formatting and Structure:
Master HTML syntax and document structure. Work with tags, elements, and attributes to build HTML documents. Create tables and forms, embed images, configure links, and develop interactive HTML elements.
- CSS for Style and Design:
Develop simple and complex web layouts with CSS rules, selectors, declarations, combinators, pseudoclasses, and pseudoelements. Understand the principles of cascading, specificity, and inheritance. Learn to use the CSS box model, the position property, and more.
- JavaScript Fundamentals:
Expand your knowledge with an introduction to JavaScript. See how to use variables, statements, functions, arrays, and objects to write and run simple programs. Explore the basics of Ajax for interactive web application design.
Key Highlights:
- HTML syntax and structure
- HTML elements
- Tables, links, and images
- HTML forms
- CSS selectors
- Cascade and inheritance
- CSS box model
- CSS preprocessors
- Responsive layout design
- Testing
- JavaScript
- Ajax
View Full Table of Contents
- Preface
- Book Resources
- HTML5 and the “Living Standard”
- Target Group
- How Should I Read through the Book?
- Written for You, the Reader
- Acknowledgments
- 1 Introduction to the HTML Universe
- 1.1 Is This Book Even Intended for Me?
- 1.2 Different Types of Websites
- 1.2.1 Web Presence
- 1.2.2 Blog/Online Magazine/Portfolio
- 1.2.3 E-Commerce Websites: Stores without Opening Hours
- 1.2.4 Landing Page/Microsite
- 1.2.5 Web Platform: Building Your Own Social Network
- 1.2.6 Web Apps
- 1.3 Dynamic and Static Websites
- 1.3.1 Static Websites
- 1.3.2 Dynamic Websites
- 1.4 Languages for Designing and Developing on the Web
- 1.4.1 HTML: Text-Based Hypertext Markup Language
- 1.4.2 CSS: Design Language
- 1.4.3 JavaScript: Client-Side Scripting Language of the Web Browser
- 1.4.4 Server-Side Scripting Languages and Databases
- 1.5 What Do I Need to Get Started?
- 1.5.1 HTML Editor for Writing HTML Documents
- 1.5.2 Web Browser for Displaying the Website
- 1.5.3 Step by Step: Creating a Web Page and Viewing It in the Web Browser
- 1.5.4 Checking Written HTML
- 1.5.5 Good Reasons for Validating the HTML Code Anyway
- 1.6 Conventions Used in This Book
- 1.7 Summary
- 2 Basic Structure of HTML and HTML Documents
- 2.1 Syntax and Structure of HTML and HTML Documents
- 2.1.1 How to Structure a Document in HTML
- 2.1.2 Viewing the Tree Structure Using the Document Object Model Inspector
- 2.1.3 HTML Tags and HTML Elements
- 2.1.4 Nesting HTML Elements and the Hierarchical Structure
- 2.1.5 Avoiding Incorrect Nesting of HTML Elements
- 2.1.6 Omitting the End Tag of an HTML Element
- 2.1.7 Standalone HTML Tags without End Tags
- 2.1.8 Additional HTML Attributes for HTML Elements
- 2.1.9 Using Comments in HTML Documents
- 2.2 A Simple HTML Document Framework
- 2.2.1 HTML Document Type: <!doctype>
- 2.2.2 Beginning and Ending an HTML Document: <html>
- 2.2.3 Head of an HTML Document: <head>
- 2.2.4 Visible Part of an HTML Document: <body>
- 2.3 Summary
- 3 Head Data of an HTML Document
- 3.1 Overview of HTML Elements for the Head
- 3.2 <title>: Heading of the HTML Page
- 3.3 Related Topic: Naming Convention and Referencing
- 3.3.1 Valid and Good File Names for an HTML Document
- 3.3.2 Valid Directory Names and Meaningful Directory Structures
- 3.3.3 Writing a Reference to a Data Source
- 3.4 Defining the Base URL of a Web Page Using <base>
- 3.5 Referencing an External Document via <link>
- 3.6 Writing Document-Wide CSS Styles Using <style>
- 3.7 Including Scripts in Web Pages Using <script>
- 3.8 Metadata for the Document Using <meta>
- 3.8.1 The Most Commonly Used Metadata
- 3.8.2 Setting the Viewport
- 3.8.3 Specifying Useful Metadata for a Web Crawler
- 3.8.4 Useful Metadata for Search Engines
- 3.8.5 Useful Metadata for the Web Browser
- 3.8.6 Using General Metadata
- 3.8.7 My Recommendation: This Metadata Belongs in the Basic HTML Framework
- 3.8.8 HTML Attributes for the <meta> Element
- 3.9 Summary
- 4 The Visible Part of an HTML Document
- 4.1 HTML Elements for Structuring Pages
- 4.1.1 Using <body>: The Displayable Content Section of an HTML Document
- 4.1.2 Introducing the Section Elements of HTML
- 4.1.3 Using Headings with the HTML Elements from <h1> to <h6>
- 4.1.4 Creating a Header Using <header> and a Footer Using <footer>
- 4.1.5 Marking Contact Information Using <address>
- 4.2 HTML Elements for Structuring Text
- 4.2.1 Adding Text Paragraphs Using <p>
- 4.2.2 Forcing Line Breaks Using <br>
- 4.2.3 Adding Optional Line Breaks Using <wbr>
- 4.2.4 Forcing Spaces and Preventing Wrapping Using "" ""
- 4.2.5 Adding a Topic-Based Separation Using <hr>
- 4.2.6 Adding Paragraphs or Citations Using <blockquote>
- 4.2.7 Defining a General Section Using <div>
- 4.2.8 Using <main>: An HTML Element for the Main Content
- 4.2.9 Labeling Content Separately Using <figure> and <figcaption>
- 4.2.10 Creating Unordered Lists Using <ul> and <li>
- 4.2.11 Creating Ordered Lists Using <ol> and <li>
- 4.2.12 Reversing the Numbering of an Ordered List
- 4.2.13 Changing the Numbering of an Ordered List
- 4.2.14 Nesting Lists within Each Other
- 4.2.15 Creating a Description List Using <dl>, <dt>, and <dd>
- 4.3 Using Semantic HTML
- 4.3.1 HTML without a Precise Structure
- 4.3.2 Generic Structuring Using <div>
- 4.3.3 Semantic Structuring Using the Elements Provided in HTML
- 4.3.4 What’s the Use of Those Semantic HTML Elements?
- 4.4 HTML Elements for Text Markups
- 4.4.1 Marking Up Abbreviations or Acronyms Using <abbr>
- 4.4.2 Marking Up Text as the Source of a Working Title Using <cite>
- 4.4.3 Marking Up Computer Code Representation Using <code> and <pre>
- 4.4.4 Keyboard Input Using <kbd> and Program Output Using <samp>
- 4.4.5 Marking Up Text as a Definition Using <dfn>
- 4.4.6 Marking Up Text as a Variable Using <var>
- 4.4.7 Changing the Text Direction Using <bdo> and <bdi>
- 4.4.8 Emphasizing Text Using <em>, <strong>, <i>, and <b>
- 4.4.9 Highlighting Text Using <mark>
- 4.4.10 Placing Text between Quotes Using <q>
- 4.4.11 Underlining or Crossing Out Text Using <u> and <s>
- 4.4.12 Marking Changes of Text Using <ins> and <del>
- 4.4.13 Displaying Text as Superscript or Subscript Using <sup> and <sub>
- 4.4.14 Marking Dates and Times Using <time>
- 4.4.15 Marking the Small Print Using <small>
- 4.4.16 Using <ruby>, <rp>, and <rt> for Annotations about Pronunciation
- 4.4.17 Grouping Ranges of Individual Text Passages Using <span>
- 4.5 Related Topic: Character Encoding
- 4.5.1 From Bytes to Character Encoding
- 4.5.2 From ASCII to ISO-8859
- 4.5.3 Beyond the Byte Boundary with Unicode
- 4.6 Character Entities in HTML
- 4.6.1 Structure of a Character Entity in HTML
- 4.7 Summary
- 5 Tables and Hyperlinks
- 5.1 Structuring Data in a Table
- 5.1.1 A Simple Table Structure Using <table>, <tr>, <td>, and <th>
- 5.1.2 Combining Columns or Rows Using “colspan” or “rowspan”
- 5.1.3 HTML Attributes for the Table Elements
- 5.1.4 Structuring Tables Using <thead>, <tbody>, and <tfoot>
- 5.1.5 Grouping Columns of a Table Using <colgroup> and <col>
- 5.1.6 Labeling Tables Using <caption> or <figcaption>
- 5.2 Electronic References (Hyperlinks) Using <a>
- 5.2.1 Inserting Links to Other HTML Documents on Your Own Website
- 5.2.2 Inserting Links to Other Websites
- 5.2.3 Opening Links with the “target” Attribute in a New Window
- 5.2.4 Email Links with “href=mailto: . . .”
- 5.2.5 Setting Links to Other Types of Content
- 5.2.6 Adding Download Links Using the “download” Attribute
- 5.2.7 Setting Links to Specific Parts of a Web Page
- 5.2.8 Creating Links to Phone Numbers
- 5.2.9 HTML Attributes for the HTML Element <a>
- 5.3 Summary
- 6 Graphics and Multimedia
- 6.1 Embedding Images Using <img>
- 6.1.1 Adding Images to an HTML Document
- 6.1.2 Specifying the Height and Width of a Graphic
- 6.1.3 Labeling Images Using <figure> and <figcaption>
- 6.1.4 HTML Attributes for the HTML Element <img>
- 6.2 Creating Link-Sensitive Graphics (Image Maps)
- 6.2.1 Use HTML Attributes for the HTML Element <area>
- 6.2.2 Referencing Defined Areas of the HTML Element <area>
- 6.2.3 HTML Attributes of <area>
- 6.3 Loading the Appropriate Image Using <picture>
- 6.3.1 HTML Attributes of <source>
- 6.3.2 Multiple Image Sources with the HTML Attribute “srcset”
- 6.4 Adding an Icon for the Website (Favicon)
- 6.5 Using Vector Graphics in HTML Documents
- 6.5.1 Adding SVG as a Graphic Reference Using <img>
- 6.5.2 Embedding SVG Directly into the Web Page Using <svg>
- 6.5.3 SVG Tags for Vector Graphics
- 6.5.4 Overview of Graphical SVG Elements
- 6.5.5 Further Notes on Using SVG
- 6.5.6 Mathematical Formulas Using MathML
- 6.6 Drawing Graphics Using <canvas>
- 6.7 Playing Videos Using the HTML Element <video>
- 6.7.1 HTML Attributes for the HTML Element <video>
- 6.7.2 Adding Subtitles to a Video Using <track>
- 6.7.3 Playing Videos via YouTube
- 6.8 Playing Audio Files Using the HTML Element <audio>
- 6.8.1 HTML Attributes for the HTML Element <audio>
- 6.9 Including Other Active Content
- 6.9.1 HTML Element <embed>
- 6.9.2 HTML Element <object>
- 6.9.3 HTML Element <iframe>
- 6.10 Summary
- 7 HTML Forms and Interactive Elements
- 7.1 Defining a Space for Forms
- 7.2 HTML Input Fields for Forms
- 7.2.1 A Single-Line Text Input Field Using <input type=""text"">
- 7.2.2 A Password Input Field Using <input type=""password"">
- 7.2.3 A Multiline Text Input Field Using <textarea>
- 7.2.4 A Selection List or Dropdown List Using <select>
- 7.2.5 Creating a Group of Radio Buttons Using <input type=""radio"">
- 7.2.6 Adding a Text Label Using <label>
- 7.2.7 Using Checkboxes via <input type=""checkbox"">
- 7.2.8 Using Fields for File Uploads via <input type=""file"">
- 7.2.9 Overview of Various Buttons
- 7.2.10 Using a Hidden Input Field via <input type=""hidden"">
- 7.2.11 Writing Form Fields outside of <form>...</form>
- 7.2.12 Multiple Submit Buttons for Different URLs
- 7.3 Special Types of Input Fields
- 7.3.1 An Input Field for Colors Using <input type=""color"">
- 7.3.2 An Input Field for a Date Using <input type=""date"">
- 7.3.3 An Input Field for a Time Using <input type=""time"">
- 7.3.4 Input Fields for Date and Time
- 7.3.5 Input Fields for the Month and the Week
- 7.3.6 An Input Field for Searches Using <input type=""search"">
- 7.3.7 An Input Field for Email Addresses Using <input type=""email"">
- 7.3.8 An Input Field for a URL Using <input type=""url"">
- 7.3.9 An Input Field for Phone Numbers Using <input type=""tel"">
- 7.3.10 An Input Field for Numbers Using <input type=""number"">
- 7.3.11 An Input Field for Numbers of a Certain Range
- 7.3.12 Outputting Values and Calculations Using <output>
- 7.4 The HTML Attributes for Input Fields
- 7.4.1 Setting the Input Focus Using the HTML Attribute “autofocus”
- 7.4.2 (De)activating Autocompletion Using the “autocomplete” Attribute
- 7.4.3 A List of Suggestions for Using the HTML Attribute “list” and <datalist>
- 7.4.4 Specifying Minimum and Maximum Values and the Step Size
- 7.4.5 Selecting or Entering Multiple Values Using “multiple”
- 7.4.6 Regular Expressions for Input Fields Using “pattern”
- 7.4.7 A Placeholder for an Input Field Using “placeholder”
- 7.4.8 Defining an Input as Required Using the “required” Attribute
- 7.4.9 Controlling Error Messages for Input Fields
- 7.5 Other Useful Helpers for Input Fields
- 7.5.1 Disabling Form Elements Using the HTML Attribute “disabled”
- 7.5.2 Permitting Read-Only for Input Fields Using the “readonly” Attribute
- 7.5.3 Useful Keyboard Shortcuts and Tab Sequence for Input Fields
- 7.5.4 Grouping Form Elements Using <fieldset> and <legend>
- 7.5.5 Progress Display via <progress>
- 7.5.6 Visualizing Values Using <meter>
- 7.6 Sending Form Data Using PHP
- 7.6.1 Transferring the Data from the Web Browser for Further Processing
- 7.6.2 The “POST” Method
- 7.6.3 The “GET” Method
- 7.6.4 Processing the Data Using a PHP Script
- 7.7 Interactive HTML Elements
- 7.7.1 Expanding/Collapsing Content Using <details> and <summary>
- 7.7.2 A Dialog Box via <dialog>
- 7.8 Summary
- 8 Introduction to Cascading Style Sheets
- 8.1 The Story of CSS
- 8.2 The Basic Principle of Using CSS
- 8.2.1 Structure of a CSS Rule
- 8.2.2 Declaring a Selector
- 8.2.3 Using Comments for CSS Code
- 8.2.4 A Few Notes on Formatting CSS Code
- 8.3 Integrating CSS into HTML
- 8.3.1 Style Statements Directly in the HTML Tag Using the HTML Attribute “style”
- 8.3.2 Style Statements in the Document Head Using the HTML Element <style>
- 8.3.3 Integrating Style Statements from an External CSS File Using <link>
- 8.3.4 Combining CSS Rules in the Head Section and in External CSS Files
- 8.3.5 Recommendation: You Should Separate HTML and CSS
- 8.3.6 Testing Alternate Stylesheets during Development
- 8.3.7 Integrating Style Statements from an External CSS File Using “@import”
- 8.3.8 Media-Specific Stylesheets for Specific Output Devices
- 8.3.9 Media-Specific Stylesheets with CSS
- 8.4 Analyzing CSS in the Web Browser
- 8.5 Summary
- 9 The Selectors of CSS
- 9.1 The Simple Selectors of CSS
- 9.1.1 Addressing HTML Elements Using the Type Selector
- 9.1.2 Addressing HTML Elements Using a Specific Class or ID
- 9.1.3 Universal Selector: Addressing All Elements in a Document
- 9.1.4 Addressing Elements Based on Attributes Using the Attribute Selector
- 9.1.5 An Attribute Selector for Attributes with a Specific Value
- 9.1.6 Attribute Selector for Attributes with a Specific Partial Value
- 9.1.7 CSS Pseudo-Classes: The Selectors for Specific Features
- 9.1.8 The Convenient Structural Pseudo-Classes in CSS
- 9.1.9 Other Useful Pseudo-Classes
- 9.1.10 Pseudo-Elements: The Selectors for Nonexistent Elements
- 9.2 Combinators: Concatenating the Selectors
- 9.2.1 The Descendant Combinator (E1 E2)
- 9.2.2 The Child Combinator (E1 > E2)
- 9.2.3 The Adjacent Sibling Combinator (E1 + E2)
- 9.2.4 The General Sibling Combinator (E1 ~ E2)
- 9.3 Recommendation: How to Use Efficient and Simple CSS
- 9.3.1 How to Write Well Performing CSS
- 9.3.2 Recommendation: Keep the CSS Code as Simple as Possible
- 9.4 Summary
- 10 Inheritance and Cascading
- 10.1 The Principle of Inheritance in CSS
- 10.1.1 Be Cautious When Using Relative Properties
- 10.1.2 Not Everything Gets Inherited
- 10.1.3 Enforcing Inheritance Using “inherit”
- 10.1.4 Restoring the Default Value of a CSS Feature (“initial”)
- 10.1.5 Forcing Inheritance or Restoring a Value (""unset"")
- 10.1.6 Forcing Inheritance or Restoring Values for All Properties
- 10.2 Understanding the Control System for Cascading
- 10.2.1 The Origin of a Stylesheet
- 10.2.2 Increasing the Priority of a CSS Feature Using “!important”
- 10.2.3 Sorting by Importance and Origin
- 10.2.4 Sorting by Weighting the Selectors (Specificity)
- 10.2.5 Summary of the Cascading Rules System
- 10.2.6 Analyzing the Cascading in the Browser
- 10.3 Related Topic: Passing Values to CSS Features
- 10.3.1 Different Units of Measurement in CSS
- 10.3.2 Character Strings and Keywords as Values for CSS Features
- 10.3.3 Many Ways of Using a Color in CSS
- 10.3.4 Angular Dimensions in CSS
- 10.3.5 Passing Values via Short Notation to a CSS Feature
- 10.4 Summary
- 11 The Box Model of CSS
- 11.1 Classic Box Model of CSS
- 11.1.1 Specifying the Content Area Using “width” and “height”
- 11.1.2 Specifying the Inner Spacing Using “padding”
- 11.1.3 Creating the Border Using “border”
- 11.1.4 Setting Up the Outer Margin Using “margin”
- 11.1.5 Collapsing Margins
- 11.1.6 Determining the Total Width and Total Height of a Box
- 11.2 Newer Alternate Box Model of CSS
- 11.2.1 Using the “box-sizing” Box Model
- 11.2.2 Using the Alternate Box Model
- 11.3 Analyzing the Box Model in the Browser
- 11.4 Box Model for Inline Elements
- 11.5 Designing Boxes
- 11.5.1 Adding and Designing a Border Using the “border” Property
- 11.5.2 Setting a Background Color Using “background-color”
- 11.5.3 Using Background Images
- 11.5.4 Making Boxes Transparent
- 11.5.5 Adding a Gradient
- 11.5.6 Adding a Shadow Using the “box-shadow” Feature
- 11.5.7 Adding Round Corners Using the CSS Feature “border-radius”
- 11.6 Related Topic: Web Browser Prefixes (CSS Vendor Prefixes)
- 11.7 Summary
- 12 CSS Positioning
- 12.1 Positioning via CSS Feature “position”
- 12.1.1 Normal Positioning (“position: static”)
- 12.1.2 Positioning Elements Using “top”, “right”, “bottom”, and “left”
- 12.1.3 Relative Positioning (“position: relative”)
- 12.1.4 Absolute Positioning (“position: absolute”)
- 12.1.5 Fixed Positioning (“position: fixed”)
- 12.1.6 Sticky Positioning (“position: sticky”)
- 12.2 Controlling Stacking Using “z-index”
- 12.3 Floating Boxes for Positioning via “float”
- 12.3.1 Terminating the Float
- 12.3.2 Combining Floats into One Entity
- 12.4 Flexible Boxes of CSS
- 12.4.1 Aligning the Flexbox
- 12.4.2 Setting the Flexibility of the Flexbox
- 12.4.3 Determining the Order of the Boxes
- 12.5 Summary
- 13 Creating Responsive Layouts with CSS
- 13.1 Basic Theoretical Knowledge of Responsive Web Design
- 13.1.1 Using Specific Media Types
- 13.1.2 Media Queries for Media Features
- 13.1.3 Integrating and Applying Media Queries for Media Features
- 13.1.4 Basic Structure of a Media Feature Query
- 13.1.5 Which Media Features Can Be Queried?
- 13.1.6 Crucially Important: The Viewport for Mobile Devices
- 13.1.7 Use “em” Instead of Pixels for a Layout Break in Media Queries
- 13.1.8 Layout Breaks (Breakpoints)
- 13.1.9 No More Math Games Thanks to ""box-sizing: border-box;""
- 13.1.10 What Happens to Web Browsers That Don’t Understand Media Queries?
- 13.2 Let’s Create a Simple Responsive Layout
- 13.2.1 Let’s Create the Basic Framework Using HTML
- 13.2.2 Setting General CSS Features
- 13.2.3 What Should I Use as a Basic Version without Media Queries: Mobile First?
- 13.2.4 Setting the Layout Break (Breakpoint)
- 13.2.5 Adding More Layout Breaks
- 13.2.6 Customizing the Main Content
- 13.3 Even More Flexible Elements
- 13.3.1 Use Relative Font Sizes instead of Pixels
- 13.3.2 Making Images Responsive
- 13.3.3 Flexible Images in Maximum Possible Width
- 13.3.4 Hiding Images Entirely
- 13.3.5 Loading the Right Image for the Screen Width: <picture>
- 13.3.6 Using Area-Covering Images
- 13.4 CSS Grid Layout
- 13.4.1 Creating a Grid for the Content
- 13.4.2 Placing Elements in the Grid
- 13.4.3 Layout Changes Made Easy
- 13.4.4 Spacing between Grid Lines
- 13.4.5 Checking the Grid in the Web Browser
- 13.5 Changing the Behavior of HTML Elements Using “display”
- 13.5.1 “display: block”, “display: inline”, and “display: inline-block”
- 13.5.2 Hiding Elements Using “display:none”
- 13.5.3 Further Values for “display”
- 13.6 Calculations Using CSS and the “calc()” Function
- 13.7 Summary
- 14 Styling with CSS
- 14.1 Designing Texts with CSS
- 14.1.1 Selecting Fonts via “font-family”
- 14.1.2 Providing Fonts via Web Fonts: “@font-face”
- 14.1.3 Using Icons via Icon Fonts
- 14.1.4 Setting the Font Size Using “font-size”
- 14.1.5 Italic and Bold Fonts via “font-style” and “font-weight”
- 14.1.6 Creating Small Caps Using “font-variant”
- 14.1.7 Defining Line Spacing via “line-height”
- 14.1.8 A Short Notation for Font Formatting Using “font”
- 14.1.9 Specifying Letter and Word Spacing via “letter-spacing” and “word-spacing”
- 14.1.10 Setting the Text Alignment Using “text-align”
- 14.1.11 Setting the Vertical Alignment via “vertical-align”
- 14.1.12 Indenting Text Using “text-indent”
- 14.1.13 Underlining Text and Striking Text Through Using “text-decoration”
- 14.1.14 Uppercase and Lowercase Text via “text-transform”
- 14.1.15 Adding Shadow to Text via “text-shadow”
- 14.1.16 Splitting Text into Multiple Columns Using “column-count”
- 14.2 Designing Lists with CSS
- 14.2.1 Customizing Bullet Points Using “list-style-type”
- 14.2.2 Using Images as Bullets via “list-style-image”
- 14.2.3 Positioning Bulleted Lists via “list-style-position”
- 14.2.4 Short Notation “list-style” for Designing Lists
- 14.2.5 Creating Navigation and Menus via Lists
- 14.3 Designing Appealing Tables with CSS
- 14.3.1 Creating Fixed-Width Tables
- 14.3.2 General Recommendation: Designing Appealing Tables with CSS
- 14.3.3 Collapsing Borders for Table Cells Using “border-collapse”
- 14.3.4 Setting the Spacing between Cells via “border-spacing”
- 14.3.5 Displaying Empty Table Cells Using “empty-cells”
- 14.3.6 Positioning Table Captions via “caption-side”
- 14.4 Adjusting Images and Graphics Using “width” and “height”
- 14.5 Transforming Elements with CSS
- 14.5.1 Scaling HTML Elements via “transform: scale()”
- 14.5.2 Rotating HTML Elements Using “transform: rotate()”
- 14.5.3 Skewing HTML Elements Using “transform: skew()”
- 14.5.4 Moving HTML Elements Using “transform: translate()”
- 14.5.5 Combining Different Transformations
- 14.5.6 Other HTML Elements
- 14.6 Creating Transitions with CSS
- 14.7 Styling HTML Forms with CSS
- 14.7.1 Neatly Structuring an HTML Form
- 14.7.2 Aligning Form Elements with CSS
- 14.7.3 Designing Form Elements with CSS
- 14.8 Summary
- 15 Testing and Organizing
- 15.1 Web Browser Tests: What’s Possible?
- 15.1.1 Validating HTML and CSS
- 15.1.2 Which Browsers Are Visitors Currently Using?
- 15.1.3 CSS Web Browser Test
- 15.1.4 HTML5 Web Browser Test
- 15.1.5 Can I Use That?
- 15.1.6 Feature Query Using the “@supports” Rule
- 15.2 Viewing Websites in Different Sizes
- 15.3 Setting Up a Central Stylesheet
- 15.3.1 Combining Everything Back into One File to Shorten the Load Time
- 15.4 CSS Reset or Normalization?
- 15.4.1 Built-In Style Presets of the Web Browser and CSS Reset
- 15.4.2 Normalization: The Alternative to CSS Reset
- 15.5 Summary
- 16 The CSS Preprocessor Sass and SCSS
- 16.1 Sass or SCSS Syntax
- 16.2 From Sass/SCSS to CSS
- 16.3 Installing and Setting Up Sass
- 16.3.1 Online CSS Preprocessor without Installation
- 16.3.2 Setting Up Sass Using Visual Studio Code
- 16.3.3 Installing Sass for the Command Line
- 16.4 Using Variables with Sass
- 16.5 Nesting with Sass
- 16.6 Mixins (“@mixin”, “@include”)
- 16.7 Extend (“@extend”)
- 16.8 Media Queries and “@content”
- 16.9 Operators
- 16.10 Adjusting Colors and Brightness
- 16.11 Sass Control Structures
- 16.12 Functions “@function”
- 16.13 “@import”
- 16.14 Comments
- 16.15 Summary
- 17 A Brief Introduction to JavaScript
- 17.1 JavaScript in Web Development
- 17.2 Writing and Executing JavaScript Programs
- 17.2.1 Integrating a JavaScript File in an HTML File
- 17.2.2 Writing JavaScript within HTML
- 17.2.3 Position of JavaScript and Its Execution in the HTML Document
- 17.2.4 Attributes for Manipulating the Load Behavior of JavaScript (“async”, “defer”)
- 17.2.5 The <noscript> Element for No JavaScript
- 17.3 JavaScript Output
- 17.3.1 Standard Dialogs (and Input Dialog)
- 17.3.2 Outputting to the Console
- 17.3.3 Outputting to the Website
- 17.3.4 Running JavaScript without a Web Browser
- 17.3.5 Annotating JavaScript Code with Comments
- 17.4 Using Variables in JavaScript
- 17.4.1 Defining Constants
- 17.4.2 Strict Mode Using “""use strict""”
- 17.5 Overview of JavaScript Data Types
- 17.5.1 Number Data Type (Numbers)
- 17.5.2 String Data Types (Strings)
- 17.5.3 Template Strings
- 17.5.4 Boolean Data Type
- 17.5.5 Undefined and Null Data Types
- 17.5.6 Objects
- 17.5.7 Converting Data Types
- 17.6 Arithmetic Operators for Calculation Tasks in JavaScript
- 17.7 Conditional Statements in JavaScript
- 17.7.1 “true” or “false”: Boolean Truth Value
- 17.7.2 Using the Various Comparison Operators in JavaScript
- 17.7.3 Using the “if” Branch
- 17.7.4 Using the Selection Operator
- 17.7.5 Logical Operators
- 17.7.6 Multiple Branching via “switch”
- 17.8 Multiple Repetitions of Program Statements via Loops
- 17.8.1 Increment and Decrement Operators
- 17.8.2 The Header-Controlled “for” Loop
- 17.8.3 The Header-Controlled “while” Loop
- 17.8.4 The Footer-Controlled “do-while” Loop
- 17.8.5 Ending the Statement Block Using “break”
- 17.8.6 Jumping to the Start of the Loop via “continue”
- 17.9 Summary
- 18 Arrays, Functions, and Objects in JavaScript
- 18.1 Functions in JavaScript
- 18.1.1 Different Ways to Define a Function in JavaScript
- 18.1.2 Calling Functions and Function Parameters
- 18.1.3 Return Value of a Function
- 18.1.4 The Scope of Variables in a Function
- 18.1.5 Defining Functions in Short Notation (Arrow Functions)
- 18.1.6 Using a Function in a Web Page
- 18.2 Arrays
- 18.2.1 Accessing the Individual Elements in the Array
- 18.2.2 Multidimensional Arrays
- 18.2.3 Adding or Removing New Elements in an Array
- 18.2.4 Sorting Arrays
- 18.2.5 Searching within Arrays
- 18.2.6 Additional Methods for Arrays
- 18.3 Strings and Regular Expressions
- 18.3.1 Useful Functions for Strings
- 18.3.2 Applying Regular Expressions to Strings
- 18.4 Object-Oriented Programming in JavaScript
- 18.4.1 What Exactly Are Objects?
- 18.4.2 Creating Objects via Constructor Functions
- 18.4.3 Creating Objects via the Class Syntax
- 18.4.4 Accessing the Object Properties and Methods: Setters and Getters
- 18.4.5 The Keyword “this”
- 18.5 Other Global Objects
- 18.5.1 The Top Object “Object”
- 18.5.2 Objects for the Primitive Data Types: Number, String, and Boolean
- 18.5.3 “Function” Object
- 18.5.4 “Date” Object
- 18.5.5 “Math” Object
- 18.5.6 “Map” Object
- 18.5.7 “Set” Object
- 18.6 Summary
- 19 Changing Web Pages Dynamically
- 19.1 Introduction to the DOM of an HTML Document
- 19.2 The “document” Object
- 19.3 DOM Programming Interface
- 19.4 Accessing Elements in the DOM
- 19.4.1 Finding an HTML Element with a Specific “id” Attribute
- 19.4.2 Finding HTML Elements with a Specific Tag Name
- 19.4.3 Finding HTML Elements with a Specific “class” Attribute
- 19.4.4 Finding HTML Elements with a Specific “name” Attribute
- 19.4.5 Using “querySelector()” and “querySelectorAll()”
- 19.4.6 Other Object and Property Collections
- 19.5 Changing an HTML Element, an Attribute, or the Style
- 19.5.1 Changing the Content of HTML Elements Using “innerHTML”
- 19.5.2 Changing the Value of an HTML Attribute
- 19.5.3 Changing the Style (CSS) of an HTML Element
- 19.6 Responding to JavaScript Events
- 19.7 Handling the Events Using the Event Handler
- 19.7.1 Setting Up an Event Handler as an HTML Attribute in the HTML Element
- 19.7.2 Setting Up Event Handlers as a Property of an Object
- 19.7.3 Setting Up an Event Handler via “addEventListener()”
- 19.8 Overview of Common JavaScript Events
- 19.8.1 The JavaScript Events of the UI (Window Events)
- 19.8.2 JavaScript Events That Can Occur in Connection with the Mouse
- 19.8.3 JavaScript Events for Devices with a Touchscreen
- 19.8.4 JavaScript Events That Occur in Connection with the Keyboard
- 19.8.5 JavaScript Events for HTML Forms
- 19.8.6 JavaScript Events for the Web APIs
- 19.9 More Information about Events with the “event” Object
- 19.10 Suppressing the Default Action of Events
- 19.11 The Event Flow (Event Propagation)
- 19.11.1 More about the Bubbling Phase
- 19.11.2 Canceling Bubbling via the “stopPropagation()” Method
- 19.11.3 Intervening in the Event Flow during the Capturing Phase
- 19.11.4 Additional Information on the Capturing and Bubbling Phases
- 19.12 Adding, Changing, and Removing HTML Elements
- 19.12.1 Creating and Adding a New HTML Element and Content
- 19.12.2 Targeting HTML Elements Even More Exactly in the DOM Tree
- 19.12.3 Adding a New HTML Element Even More Targeted to the DOM Tree
- 19.12.4 Deleting an Existing HTML Element from the DOM Tree
- 19.12.5 Replacing an HTML Element in the DOM Tree with Another One
- 19.12.6 Cloning a Node or Entire Fragments of the DOM Tree
- 19.12.7 Different Methods to Manipulate the HTML Attributes
- 19.12.8 The <template> HTML Tag
- 19.13 HTML Forms and JavaScript
- 19.13.1 Reading Text Input Fields with JavaScript
- 19.13.2 Reading Selection Lists with JavaScript
- 19.13.3 Reading Radio Buttons and Checkboxes with JavaScript
- 19.13.4 Intercepting Buttons with JavaScript
- 19.13.5 Controlling the Progress Indicator <progress> with JavaScript
- 19.14 Summary
- 20 An Introduction to Ajax
- 20.1 An Introduction to Ajax Programming
- 20.1.1 A Simple Ajax Example in Execution
- 20.1.2 Creating the “XMLHttpRequest” Object
- 20.1.3 Making a Request to the Server
- 20.1.4 Sending Data
- 20.1.5 Determining the Status of the “XMLHttpRequest” Object
- 20.1.6 Processing the Response from the Server
- 20.1.7 The Ajax Example during Execution
- 20.1.8 A More Complex Ajax Example with XML and DOM
- 20.1.9 The JSON Data Format with Ajax
- 20.2 Summary
- The Author
- Index
