HTML, CSS, and jаvascript All-in-One For Dummies 9781394164684, 9781394164974, 9781394164721

Table of contents :
Title Page
Copyright Page
Table of Contents
Introduction
About This Book
Getting started with the book
My “No AI” guarantee
Foolish Assumptions
Icons Used in This Book
Beyond the Book
Book 1 Getting Started
Chapter 1 Getting Acquainted with HTML, CSS, and JavaScript
What Do HTML, CSS, and JavaScript Do, Exactly?
Why Learn HTML, CSS, and JavaScript?
Seeing How It All Works
To get started, launch a new text file
Notes about saving HTML files
This book in four words: Edit. Save. Reload. Repeat.
Adding Structure with HTML
What is HTML?
Getting the hang of HTML elements and tags
Understanding tag attributes
A barebones HTML page
Giving your page a title
Adding some text
Some notes on structure versus style
Adding Style with CSS
Figuring out cascading style sheets
Styles: Bundles of formatting options
Sheets: Collections of styles
Cascading: How styles propagate
Getting the hang of CSS rules and declarations
Adding styles to a page
Inserting inline styles
Embedding an internal style sheet
Linking to an external style sheet
Adding Dynamism with JavaScript
What is JavaScript?
Adding a script to a page
The tag
Where do you put the tag?
Example #1: Displaying a message to the user
Example #2: Writing text to the page
Chapter 2 Getting Ready to Code
Setting Up Your Test Browsers
Creating Your Local Folders
First, create the local root folder
Now create the local subfolders, if any
Choosing Your Text Editor
What Else Do You Need?
Using the WebDev Workbench
Chapter 3 Finding and Setting Up a Web Host
Understanding Web Hosting Providers
Using your existing internet provider
Finding a free hosting provider
Signing up with a commercial hosting provider
A Buyer’s Guide to Web Hosting
Finding a Web Host
Finding Your Way around Your New Web Home
Your directory and your web address
Making your hard disk mirror your web home
Uploading your site files
Making changes to your web files
Chapter 4 Testing and Validating Your Code
Cross-Browser Testing Your Code
Taking a look at browser market share
Your cross-browser testing suite
Cross-browser testing online
Understanding Validation
Don’t Skip Validation!
Validating Your HTML Code
Validating HTML online
Validating HTML in your text editor
Validating Your CSS Code
Validating CSS online
Validating CSS in your text editor
Validating Your JavaScript Code
Validating JavaScript online
Validating JavaScript in your text editor
Book 2 Learning HTML Basics
Chapter 1 Building Good Bones: Structuring the Page
Getting to Know HTML’s Basic Structure Tags
Creating paragraphs
Dividing your text with headings
Adding line breaks
Separating stuff with a horizontal rule
Carving Up the Page
The tag
The tag
The tag
The tag
The tag
The tag
The tag
Handling nonsemantic content with
Handling words and characters with
Commenting Your Code
Chapter 2 Adding Links, Lists, and Other Text Tidbits
Applying the Basic Text Tags
Emphasizing text
Marking important text
Nesting tags
Adding quotations
Creating Links
Linking basics
Anchors aweigh: Internal links
Building Bulleted and Numbered Lists
Making your point with bulleted lists
Numbered lists: Easy as one, two, three
Inserting Special Characters
A Few More HTML Text Tags to Know
: The abbreviation text tag
: The address text tag
: The citation text tag
: The code text tag
: The definition text tag
: The description list text tag
: The keyboard input text tag
: The mark text tag
: The preformatted text tag
: The strikethrough text tag
: The subscript text tag
: The superscript text tag
Chapter 3 Working with Images, Video, and other Media
Inserting Images
First, a mercifully brief look at image formats
Inserting an image
Inserting a figure with a caption
Turning an image into a link
Controlling an image’s vertical alignment
Embedding Videos
Embedding a third-party video
Embedding your own videos
Some notes about web media file formats
The bad news: Web video formats
The good news: The tag
Embedding Audio Snippets
Embedding third-party audio
Embedding your own audio
Web audio formats
The tag
Chapter 4 Building Tables with Your Bare Hands
What Is a Table?
Web Woodworking: How to Build a Table
The simplest case: a one-row table
Adding more rows
Adding More Table Elements
Creating a header row
Including a caption
Creating a header column
Creating a table footer
Table Refinishing: Styling Your Tables
Aligning text within cells
Aligning cell text horizontally
Aligning cell text vertically
Bring on the borders
Putting your data in a padded cell
Changing the location of the caption
Chapter 5 Using Forms to Make a Page Interactive
What Is a Web Form?
Cruising along Server Street
Taking a walk down Local Lane
Building a Web Form
Setting up the form
Adding a form button
Working with text fields
Adding checkboxes
Working with radio buttons
Adding selection lists
Bringing in pickers
Chapter 6 Making Your Web Pages Accessible
Why to Make Your Pages Accessible
Accessibility is a right
Accessibility brings other benefits
Understanding Web Accessibility
Understanding who needs accessibility
Learning about assistive technologies for web surfing
Assistive technologies for visual disabilities
Assistive technologies for auditory disabilities
Assistive technologies for motor disabilities
Assistive technologies for cognitive disabilities
Making Your Page Structure Accessible
Using headings hierarchically
Using semantic sectioning elements
Making Text Accessible
Making Media Accessible
Specifying alt text for images
Making other media accessible
Buffing Up Your Page Accessibility Semantics
Adding form field labels
Understanding ARIA roles, states, and properties
Landmark ARIA roles
Section structure ARIA roles
Widget ARIA roles
Differentiating semantic page elements of the same type
Making Your Pages Keyboard-Friendly
Adding an element to the tab order
Removing an element from the tab order
Ensuring Sufficient Color Contrast
Validating the Accessibility of a Page
Book 3 Learning CSS Basics
Chapter 1 Figuring Out the CSS Box Model
Thinking Outside (but Also Inside) the Box Model
Understanding the components of the box model
Understanding block and inline boxes
Changing the display type for a box
Eyeballing an element’s box
A Brief Digression on Whitespace
Adding Padding
Putting a Border on It
Applying a border
Rounding your borders
Rounding borders based on the arc of a circle
Rounding borders based on the arc of an ellipse
Manipulating Element Margins
Taking advantage of negative margins
Collapsing margins ahead!
Dealing with negative margins
Other margin collapsing scenarios
Styling Element Sizes
Setting a minimum or maximum height or width
Making width and height make sense
Magically converting an inline element to a block-level element
Chapter 2 Getting to Know the CSS Selectors
Introducing Yourself to the Web Page Family
What’s All This About a Selector?
Seeing some examples of selectors
Working with selector lists
Learning the Standard Selectors
The type selector
The class selector (.)
Combining type and class selectors
Matching multiple classes
The id selector (#)
The universal selector (*)
Selecting Descendants, Children, and Siblings
The descendant combinator ( )
The child combinator (>)
The subsequent-sibling combinator (~)
The next-sibling combinator (+)
Selecting Elements by Attribute
Chapter 3 Pseudo School: Learning Pseudo-Classes and Pseudo-Elements
Scratching Your Head Over Pseudo-Classes
Introducing the pseudo-class
Styling elements with pseudo-classes
Matching child elements
:first-child
:last-child
:nth-child()
:nth-last-child()
:only-child
Matching child elements by type
:first-of-type
:last-of-type
:nth-of-type()
:nth-last-of-type()
:only-of-type
Matching form elements by state
Matching elements by user action
:active
:focus
:hover
Matching links
Working with functional pseudo-classes
A quick look at selector lists
:is()
:not()
:where()
:has()
Getting Up to Speed with Pseudo-Elements
Working with pseudo-elements
Generating a last child with ::after
Generating a first child with ::before
Styling the opening letter with ::first-letter
Styling the opening line with ::first-line
Chapter 4 Making CSS Make Sense
Commenting Your CSS Code
Commenting non-obvious code
Marking stylesheet sections with comments
Using a CSS Reset
Debugging CSS
Displaying the web development tools
Inspecting an element
Inspecting an element’s styles
Inspecting an element’s box model
Inspecting an element’s computed styles
Inspecting an element’s layout
Editing a property value
Disabling a declaration
Adding an inline declaration to an element
Adding an element declaration to the inspector stylesheet
Adding a class to an element
Simulating a pseudo-class state
Popping the Hood: How Styles Get Applied
Unravelling inheritance
Why some properties don’t inherit
Forcing inheritance
Flowing along with the cascade
How the cascade works
Understanding declaration types
Understanding origin types
Declaration type, origin type, and weight
Figuring out specificity
Specificity and :is(), :where(), :not(), and :has()
The ultimate tiebreaker: source code order
Putting it all together: the cascade algorithm
Chapter 5 Taking the Measure of CSS
Getting Comfy with CSS Measurement Units
Checking Out the Absolute Measurement Units
Getting to Know the Relative Measurement Units
Using percentages
Getting a handle on the em unit
Meeting your CSS measurement best friend: the rem unit
Here’s Looking at View(port Measurement Units)
Calculating with CSS
Calculating with calc()
Finding the smallest value with min()
Finding the largest value with max()
Setting bounds with clamp()
Chapter 6 Fancifying Pages with Colors and Backgrounds
Specifying Colors in CSS
Papayawhip, peachpuff, and more: color keywords
Rolling your own colors with the rgb() function
Specifying colors nerd-style: RGB codes
Going pro with the hsl() function
Using Color to Spruce Up Your Text
Applying a text color
Setting the text decoration color
Creating a text shadow
Styling an Element’s Background
Applying a coat of background color
Wallpapering an element with a background image
Taking advantage of the background shorthand property
Impressing Your Friends with Color Gradients
Applying a linear gradient
Applying a radial gradient
Applying a conic gradient
Setting Border Colors
Playing with Colors in the Dev Tools
Changing the color
Choosing accessible colors
Chapter 7 Taking Your Text Up a Notch with Web Typography
Taking Care of Your Text
Getting to know typefaces (and fonts, too)
All in the font family: Applying a typeface
Introducing the font stack
Generic font families
System font families
Web font families
Linking to a web font family
Self-hosting a web font family
The Typographic Trinity: Setting Type Size, Line Height, and Line Length
Setting the type size
Setting the line height
Setting the line length
How the typographical trinity are related
Applying Text Styles
Styling the text weight
Styling text with italics
Getting more styles with variable fonts
More Typographical Trickery
Controlling capitalization
Setting the spacing between letters
Displaying text as small caps
Using alternative numeric glyphs
The font shorthand property
Giving Your Links a Makeover
Messing with Alignment
Aligning text
Hyphenating text
Indenting a paragraph’s first line
Book 4 Building Dynamic Pages with JavaScript
Chapter 1 JavaScript: The Bird’s-Eye View
What Is Web Coding?
What Is a Programming Language?
Is JavaScript Hard to Learn?
What You Can Do with JavaScript
What You Can’t Do with JavaScript
What Do You Need to Get Started?
Dealing with a Couple of Exceptional Cases
Handling browsers with JavaScript turned off
Handling very old browsers
Adding Comments to Your Code
Creating External JavaScript Files
Chapter 2 Understanding Variables
Understanding Variables
Declaring a variable with let
Storing a value in a variable
Checking out another way to declare a variable: const
Using variables in statements
Naming Variables: Rules and Best Practices
Rules for naming variables
Ideas for good variable names
Understanding Literal Data Types
Working with numeric literals
Exponential notation
Hexadecimal integer values
Working with string literals
Using quotation marks within strings
Understanding escape sequences
Working with Boolean literals
JavaScript Reserved Words
JavaScript and HTML Keywords
Chapter 3 Building Expressions
Understanding Expression Structure
Building Numeric Expressions
A quick look at the arithmetic operators
Using the addition (+) operator
Using the increment (++) operator
Using the subtraction and negation (-) operators
Using the decrement (--) operator
Using the multiplication (*) operator
Using the division (/) operator
Using the modulus (%) operator
Using the arithmetic assignment operators
Building String Expressions
Building Comparison Expressions
The comparison operators
Using the equality (==) operator
Using the inequality (!=) operator
Using the greater than (>) operator
Using the less than (=) operator
Using the less than or equal (