Teach Yourself VISUALLY HTML and CSS. 2 Ed

Cover....1

Title Page....3

Copyright Page....4

About the Author....5

How to Use This Book....7

Table of Contents....8

Chapter 1 Getting Ready to Create Websites....16

Grasp How the Web Works....18

Understanding HTML, CSS, and Responsive Web Design....20

Understanding Static and Dynamic Web Pages....22

What Is a Responsive Website?....23

Understanding Tools for Creating Web Pages....24

Prepare to Create Your Website....26

Install Visual Studio Code....28

Install Visual Studio Code....28

Meet and Configure Visual Studio Code....30

Meet and Configure Visual Studio Code (continued)....32

Install GIMP....34

Install the Major Browsers....36

Create a Folder Structure for Your Website....38

Chapter 2 Creating Your First Web Pages....40

Study the Anatomy of a Web Page....42

Tell Visual Studio Code Which Folder to Use....44

Create a Folder for Your Website....44

Create Your First Web Page....46

Create Your First Web Page....46

Open the Web Page in a Browser....48

Open the Web Page in a Browser....48

Add Headings and Text....50

Add Headings and Text....50

Nest One Element Within Another Element....52

Add Comments....53

Add Comments....53

Apply Direct Formatting....54

Apply Direct Formatting....54

View a Pages Source Code....55

Validate a Web Page....56

Validate a Web Page....56

Create Another Web Page....58

Create Another Web Page....58

Understanding the Essentials of Hyperlinks....59

Create a Hyperlink Between Your Web Pages....60

Create a Hyperlink Between Your Web Pages....60

Interpret HTTP Status Codes....62

Chapter 3 Structuring a Web Page....64

Meet the Elements for Structuring Web Pages....66

Grasp Semantic and Nonsemantic Elements....66

Select Items with span and div Elements....68

Select Items with span and div Elements....68

Select Text with the span Element....68

Select Text with the div Element....69

Create header Elements and footer Elements....70

Create header Elements and footer Elements....70

Add article Elements to a Page....72

Add article Elements to a Page....72

Create Pull Quotes with the aside Element....74

Create Pull Quotes with the aside Element....74

Divide a Page Using section Elements....76

Divide a Page Using section Elements....76

Create Collapsible Sections....78

Create Collapsible Sections....78

Chapter 4 Including Images....80

Grasp the Essentials of Web Image Formats....82

Launch GIMP and Perform Essential Moves....84

Launch GIMP and Perform Essential Moves....84

Launch GIMP and Open an Image File....84

Launch GIMP and Perform Essential Moves (continued)....86

Launch GIMP and Perform Essential Moves (continued)....86

Zoom In or Out on the Image File....86

Save Changes to an Image File and Close It....87

Rotate or Straighten an Image....88

Rotate or Straighten an Image....88

Crop an Image....90

Crop an Image....90

Resize an Image....92

Resize an Image....92

Reduce the Number of Colors in an Image....94

Reduce the Number of Colors in an Image....94

Convert an Image to the Format You Need....96

Convert an Image to the Format You Need....96

Learn the HTML for Images....98

Insert an Image....100

Insert an Image....100

Create a Figure with a Caption....102

Create a Figure with a Caption....102

Chapter 5 Working with Links....104

Grasp the Essentials of Links....106

Create a Link to a Web Page....108

Create a Link to a Web Page....108

Create a Link to Elsewhere on the Same Web Page....110

Create a Link to Elsewhere on the Same Web Page....110

Specify the ScreenTip for a Link....112

Specify the ScreenTip for a Link....112

Redirect the Browser to a Different Page....113

Redirect the Browser to a Different Page....113

Create a Link for Downloading a File....114

Create a Link for Downloading a File....114

Create a Link That Starts an Email Message....115

Create a Link That Starts an Email Message....115

Create a Link from an Image....116

Create a Link from an Image....116

Create Multiple Links from an Image....118

Create Multiple Links from an Image....118

Create Multiple Links from an Image (continued)....120

Create Multiple Links from an Image (continued)....120

Include an Audio File in a Web Page....122

Link an Audio File....122

Include a Video File in a Web Page....124

Include a Video File in a Web Page....124

Embed a YouTube Video in a Web Page....126

Embed a YouTube Video in a Web Page....126

Chapter 6 Creating Lists and Tables....128

Grasp the Different Types of Lists....130

Create a Numbered List....132

Create a Numbered List....132

Create a Bulleted List....134

Create a Bulleted List....134

Create a Definition List....136

Create a Definition List....136

Nest One List Inside Another List....138

Nest One List Inside Another List....138

Learn the HTML for Tables....140

Create a Table....142

Create a Table....142

Add Rows or Columns to a Table....144

Add Rows or Columns to a Table....144

Specify Table Width and Column Width....146

Specify Table Width and Column Width....146

Format Table Borders....148

Format Table Borders....148

Adjust Table Padding and Spacing....150

Adjust Table Padding and Spacing....150

Create Groups of Columns....152

Create Groups of Columns....152

Align Tables, Rows, and Cells....154

Align Tables, Rows, and Cells....154

Create Cells That Span Rows or Columns....156

Set a Background Color or Image for a Table....157

Nest One Table Inside Another Table....158

Nest One Table Inside Another Table....158

Chapter 7 Getting Started with CSS....160

Grasp How CSS Works....162

Format Elements with Inline CSS....164

Format Elements with Inline CSS....164

Format a Page Using Internal CSS....166

Format a Page Using Internal CSS....166

Create an External CSS File....168

Create an External CSS File....168

Link an External CSS File to a Web Page....170

Link an External CSS File to a Web Page....170

Distinguish Element, Class, and ID Selectors....172

Apply Styles Using Element Selectors....173

Apply Styles Using Element Selectors....173

Apply Styles Using Class Selectors....174

Apply Styles Using Class Selectors....174

Create a Class of Items in the HTML File....174

Create the Class Selector in the CSS File....174

Apply Styles Using ID Selectors....176

Apply Styles Using ID Selectors....176

Assign an ID to an Element in the HTML File....176

Create the ID Selector in the CSS File....176

Chapter 8 Formatting Text with CSS....178

Understanding Fonts and How to Use Them....180

Specify the Font Family....182

Specify the Font Family....182

Set the Font Size and Font Weight....184

Set the Font Size and Font Weight....184

Adjust Line Height and Letter Spacing....186

Adjust Line Height and Letter Spacing....186

Create Superscripts and Subscripts....188

Create Superscripts and Subscripts....188

Add Superscripts and Subscripts to an HTML File....188

Configure the Superscript Style and Subscript Style....189

Understanding Ways to Set Color in CSS....190

Set Font Color....191

Set Font Color....191

Apply Text Shadows....192

Apply Text Shadows....192

Display Monospaced Font....193

Display Monospaced Font....193

Apply Text Decoration....194

Apply Text Decoration....194

Understanding HTML Entities....196

Insert Special Characters with HTML Entities....198

Insert Special Characters with HTML Entities....198

Insert Emojis....199

Insert Emojis....199

Using Custom Fonts on Web Pages....200

Chapter 9 Sizing and Positioning with CSS....202

Understanding Pseudo-Classes....204

Apply Contextual Formatting with Pseudo-Classes....206

Apply Contextual Formatting with PseudoClasses....206

Understanding CSS Combinators....208

Target Elements Using CSS Combinators....210

Target Elements Using CSS Combinators....210

Open the CSS File and HTML File....210

Target an Element with a Child Selector....210

Target an Element with an Adjacent Sibling Selector....211

Target an Element with a General Sibling Selector....211

Understanding Pseudo-Elements....212

Apply CSS to Pseudo-Elements....214

Apply CSS to PseudoElements....214

Add the ::firstletter PseudoElement....214

Add the ::firstline PseudoElement....215

Override CSS by Using the !important Declaration....216

Override CSS by Using the !important Declaration....216

Understanding the CSS Box Model....218

Understanding Ways of Sizing Elements....220

Specify the Size for an Element....222

Specify the Size for an Element....222

Specify Padding and Borders for an Element....224

Specify Padding and Borders for an Element....224

Set Margins to Control Element Spacing....226

Set Margins to Control Element Spacing....226

Understanding CSS Positioning Essentials....228

Create Block Quotes....230

Create Block Quotes....230

Fix an Element in Place in the Viewport....232

Fix an Element in Place in the Viewport....232

Float an Element Beside Another Element....234

Float an Element Beside Another Element....234

Understanding the display Property....236

Control the Display of an Element....237

Control the Display of an Element....237

Create a Flexbox Layout....238

Chapter 10 Creating Responsive and Appealing Pages....240

Understanding the Tools for Creating Responsive Pages....242

Apply Relative Sizing....244

Add Media Queries to a Page....246

Set Tap Targets for Touch Screens....248

Set the Viewport Size....250

Check Your Pages on Various Devices and Screens....252

Understanding How CSS Gradients Work....254

Apply a Linear Gradient to an Element....256

Apply a Linear Gradient to an Element....256

Apply a Radial Gradient to an Element....258

Apply a Radial Gradient to an Element....258

Using Sprites....260

Understanding CSS Animations....262

Apply Transitions to HTML Elements....264

Create a Keyframe Animation....266

Create a Keyframe Animation....266

Chapter 11 Creating Forms....268

Grasp Web Form Essentials....270

Create a Form....272

Create a Form....272

Add Text Input Controls to a Form....274

Add Text Input Controls to the Form....274

Add Radio Buttons to a Form....276

Add Radio Buttons to a Form....276

Add Check Boxes to a Form....278

Add Check Boxes to a Form....278

Add a Drop-Down List of Options to a Form....280

Add a DropDown List of Options to a Form....280

Add Command Buttons to a Form....282

Add Command Buttons to a Form....282

Chapter 12 Taking Your Website to the Next Level....284

Understanding How Search Engines Work....286

Optimize Your Website for Search Engines....288

Guide Search Spiders with a robots.txt File....290

Understanding Accessibility Issues for Websites....292

Meet Chromes Live Development Tools....294

Troubleshoot CSS with Chrome DevTools....296

Troubleshoot CSS with Chrome DevTools (continued)....298

Troubleshoot CSS with Chrome DevTools (continued)....300

Using a Staging Server....302

Understanding Front-End Frameworks....304

Index....306

EULA....322

Teach Yourself VISUALLY HTML and CSS is the perfect resource for those of you who prefer to learn visually and would rather be shown how to do something – with crystal-clear screenshots and easy explanations – than suffer through long-winded explanations. You’ll find step-by-step walkthroughs showing you how to tackle over 120 individual tasks involving HTML and CSS. Each task-based spread covers a single technique, ensuring you learn first the basics and then more advanced topics one straightforward piece at a time.

You'll learn to write HTML code in a text editor or an integrated development environment, add and format text, prepare images for the web, insert links to other pages, control layout with style sheets, add JavaScript to a web page, and more. You’ll also discover how to:

• Create websites that look great in 2023 and beyond with classic HTML and skills and the most modern tips and tricks for contemporary web coding
• Optimize your websites for performance and speed, ensuring every visitor gets the best possible experience
• Add modern elements to your code, including , , , and , and make your code accessible to as many people as possible

Teach Yourself VISUALLY HTML and CSS is your personal roadmap to understanding how to get the most out of HTML and CSS to create, format, and troubleshoot websites of all kinds. This book will get you to the next level of web development, quickly and easily.