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