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.
Table of Contents
Chapter 1 Getting Ready to Create Websites
Grasp How the Web Works 4
Understanding HTML, CSS, and Responsive Web Design 6
Understanding Static and Dynamic Web Pages 8
What Is a Responsive Website? 9
Understanding Tools for Creating Web Pages 10
Prepare to Create Your Website 12
Install Visual Studio Code 14
Meet and Configure Visual Studio Code 16
Install GIMP 20
Install the Major Browsers 22
Create a Folder Structure for Your Website 24
Chapter 2 Creating Your First Web Pages Study the Anatomy of a Web Page 28
Tell Visual Studio Code Which Folder to Use 30
Create Your First Web Page 32
Open the Web Page in a Browser 34
Add Headings and Text 36
Nest One Element Within Another Element 38
Add Comments 39
Apply Direct Formatting 40
View a Page’s Source Code 41
Validate a Web Page 42
Create Another Web Page 44
Understanding the Essentials of Hyperlinks 45
Create a Hyperlink Between Your Web Pages 46
Interpret HTTP Status Codes 48
Chapter 3 Structuring a Web Page Meet the Elements for Structuring Web Pages 52
Select Items with span and div Elements 54
Create header Elements and footer Elements 56
Add article Elements to a Page 58
Create Pull Quotes with the aside Element 60
Divide a Page Using section Elements 62
Create Collapsible Sections 64
Chapter 4 Including Images Grasp the Essentials of Web Image Formats 68
Launch GIMP and Perform Essential Moves 70
Rotate or Straighten an Image 74
Crop an Image 76
Resize an Image 78
Reduce the Number of Colors in an Image 80
Convert an Image to the Format You Need 82
Learn the HTML for Images 84
Insert an Image 86
Create a Figure with a Caption 88
Chapter 5 Working with Links Grasp the Essentials of Links 92
Create a Link to a Web Page 94
Create a Link to Elsewhere on the Same Web Page 96
Specify the ScreenTip for a Link 98
Redirect the Browser to a Different Page 99
Create a Link for Downloading a File 100
Create a Link That Starts an Email Message 101
Create a Link from an Image 102
Create Multiple Links from an Image 104
Include an Audio File in a Web Page 108
Include a Video File in a Web Page 110
Embed a YouTube Video in a Web Page 112
Chapter 6 Creating Lists and Tables Grasp the Different Types of Lists 116
Create a Numbered List 118
Create a Bulleted List 120
Create a Definition List 122
Nest One List Inside Another List 124
Learn the HTML for Tables 126
Create a Table 128
Add Rows or Columns to a Table 130
Specify Table Width and Column Width 132
Format Table Borders 134
Adjust Table Padding and Spacing 136
Create Groups of Columns 138
Align Tables, Rows, and Cells 140
Create Cells That Span Rows or Columns 142
Set a Background Color or Image for a Table 143
Nest One Table Inside Another Table 144
Chapter 7 Getting Started with CSS Grasp How CSS Works 148
Format Elements with Inline CSS 150
Format a Page Using Internal CSS 152
Create an External CSS File 154
Link an External CSS File to a Web Page 156
Distinguish Element, Class, and ID Selectors 158
Apply Styles Using Element Selectors 159
Apply Styles Using Class Selectors 160
Apply Styles Using ID Selectors 162
Chapter 8 Formatting Text with CSS Understanding Fonts and How to Use Them 166
Specify the Font Family 168
Set the Font Size and Font Weight 170
Adjust Line Height and Letter Spacing 172
Create Superscripts and Subscripts 174
Understanding Ways to Set Color in CSS 176
Set Font Color 177
Apply Text Shadows 178
Display Monospaced Font 179
Apply Text Decoration 180
Understanding HTML Entities 182
Insert Special Characters with HTML Entities 184
Insert Emojis 185
Using Custom Fonts on Web Pages 186
Chapter 9 Sizing and Positioning with CSS Understanding Pseudo-Classes 190
Apply Contextual Formatting with Pseudo-Classes 192
Understanding CSS Combinators 194
Target Elements Using CSS Combinators 196
Understanding Pseudo-Elements 198
Apply CSS to Pseudo-Elements 200
Override CSS by Using the ! important Declaration 202
Understanding the CSS Box Model 204
Understanding Ways of Sizing Elements 206
Specify the Size for an Element 208
Specify Padding and Borders for an Element 210
Set Margins to Control Element Spacing 212
Understanding CSS Positioning Essentials 214
Create Block Quotes 216
Fix an Element in Place in the Viewport 218
Float an Element Beside Another Element 220
Understanding the display Property 222
Control the Display of an Element 223
Create a Flexbox Layout 224
Chapter 10 Creating Responsive and Appealing Pages Understanding the Tools for Creating Responsive Pages 228
Apply Relative Sizing 230
Add Media Queries to a Page 232
Set Tap Targets for Touch Screens 234
Set the Viewport Size 236
Check Your Pages on Various Devices and Screens 238
Understanding How CSS Gradients Work 240
Apply a Linear Gradient to an Element 242
Apply a Radial Gradient to an Element 244
Using Sprites 246
Understanding CSS Animations 248
Apply Transitions to HTML Elements 250
Create a Keyframe Animation 252
Chapter 11 Creating Forms Grasp Web Form Essentials 256
Create a Form 258
Add Text Input Controls to a Form 260
Add Radio Buttons to a Form 262
Add Check Boxes to a Form 264
Add a Drop-Down List of Options to a Form 266
Add Command Buttons to a Form 268
Chapter 12 Taking Your Website to the Next Level Understanding How Search Engines Work 272
Optimize Your Website for Search Engines 274
Guide Search Spiders with a robots.txt File 276
Understanding Accessibility Issues for Websites 278
Meet Chrome’s Live Development Tools 280
Troubleshoot CSS with Chrome DevTools 282
Using a Staging Server 288
Understanding Front-End Frameworks 290
Index 292
