Beginning HTML5 and CSS3 For Dummies

Introduction 1 About this Book 2 Foolish Assumptions 3 Icons Used in This Book 4 Beyond the Book 4 Where to Go from Here 5 Part I: Getting Started with HTML and CSS on the Web 7 Chapter 1: An Overview of HTML and CSS on the Web 9 How and Where Web Pages Come to Life Online 10 HyperText 10 Content versus presentation 14 Web browsers 14 Getting to know Internet protocols 16 Understanding HTML and Its Versions 17 Different versions of HTML 17 Creating HTML markup 18 Building HTML documents 19 Understanding the Role of CSS 20 Different versions here, too 20 Creating CSS markup 21 Dissecting a Simple Markup Example 22 Where's the HTML? 22 Where's the CSS? 23 A partnership of equals 23 Chapter 2: Meeting the Structure and Components of HTML 25 Like Any Language: Syntax and Rules 25 Color-coding the markup 26 Breaking down the elements 27 Adding Attributes to Your HTML 29 Examining Entities in Markup 30 Non-ASCII characters 30 Character codes 31 (Special) tag characters 32 Organizing Web Pages 32 Organizing HTML text 34 Complementing and enhancing text 36 Chapter 3: Creating and Viewing a Web Page 37 Before You Get Started 37 Creating a Page from Scratch 39 Step 0: Gather your tools 39 Step 1: Planning a simple design 40 Step 2: Writing some HTML 41 Step 3: Saving your page 44 Step 4: Viewing your page 46 Editing an Existing Web Page 47 Posting Your Page Online 49 Part II: Getting the Structure and Text Right 51 Chapter 4: HTML Documents Need Good Structure 53 Establishing a Document Structure 53 HTML Document Organization Revisited 54 HTML DOCTYPE Starts Things Off 55 The Element 56 Anatomy of the 56 Meeting the himself 57 Handling metadata with 57 Redirecting users to another page 58 Naming your page with a 61 The Is a BIG Container 61 Chapter 5: Text and Lists 63 Formatting Text 63 Paragraphs 65 Headings 66 Controlling Text Blocks 68 Block quotes 68 Preformatted text 69 Horizontal rules 71 Organizing Information 73 Numbered lists 73 Bulleted lists 75 Definition lists 77 Nesting lists 79 Chapter 6: Tip-Top Tables in HTML 81 How Got a Bad Name in HTML 81 What's in a Table? LOTS of Markup 82 Setting Up a Table Border 84 The Table Head () and Its Elements 85 Managing Table Layouts 87 Making Good Table Bodies 89 Shaping a solid table 89 Sitting at the Footer of the Table 92 Exploring and Explaining a Table 92 Oh caption, my caption 93 Is the header dead yet? 93 Marching through the table body 94 Finishing with the footer 94 Chapter 7: Working with Forms in HTML 97 Exploring Types of Web Forms 97 Search forms 98 Data collection forms 99 Creating Forms 100 Structure 101 Input tags 102 Input fields 103 Form validation 113 Processing Data 115 Processing forms on your pages 115 Designing User-Friendly Forms 117 Other Noteworthy Forms-Related Markup 118 Form Frameworks 120 Part III: Adding Links, Images, and Other Media 123 Chapter 8: Getting Hyper with Links in HTML 125 Basic Links 101 125 Exploring link options 127 Avoiding common mistakes 129 Customizing Links 130 Opening new windows 130 Specifying locations in web pages 132 Linking to non-HTML resources 134 The Role of Images in a Web Page 139 Chapter 9: Working with Images in HTML 139 Creating Web-Friendly Images 140 Adding an Image to a Web Page 142 Image location 142 Using the element 143 Adding alternative and title text 143 Specifying image size 146 Image borders and alignment 149 Images That Link 149 Triggering links 149 Building image maps 150 Chapter 10: Managing Media and More in HTML 153 The Battle of the Media Formats 154 Meet the major audio formats 155 Meet the major video formats 156 Comparing Traditional and HTML5 Media Handling 157 Mastering HTML5 Media Markup 158 Making beautiful music with audio 158 Moving media with video 159 Undergoing the conversion experience 162 Working with Web Page Controls 163 Displaying a meter bar 163 Tracking progress on activities 165 Tracking and reporting on time 166 Updating HTML5 controls 168 Part IV: Adopting CSS Style 169 Chapter 11: Advantages of Style Sheets 171 Advantages of Style Sheets 172 The four steps to style 173 Understanding the C in CSS 174 What CSS can do for a web page 174 Styling a Document with CSS 175 Using HTML5 Boilerplate 176 Normalize before you stylize 176 What you can do with CSS 180 Putting CSS in Its Place 182 Pixels, points, and dots -- Oh my! 182 Understanding the viewport 183 Property measurement values 184 About the CSS3 Standard 186 Chapter 12: CSS Structure and Syntax 191 Exploring CSS Structure and Syntax 191 Selectors and declarations 194 The selectors 195 Inheriting styles 204 Understanding the Cascade 205 Chapter 13: Using Different Kinds of Style Sheets 207 Applying Inline Styles 208 Getting to Know Internal Style Sheets 210 Understanding the element 210 Figuring out internal style sheet scope 210 Working with External Style Sheets 212 CSS files 212 Link element attributes 213 Importing and when to use @import 214 Part V: Enhancing Your Pages' Look and Feel 215 Chapter 14: Managing Layout and Positioning 217 Managing Layout 217 Tiny boxes 217 Block versus inline elements 219 Normal flow 222 Managing Positioning 225 About coordinates and offsets 226 Relative positioning 226 Absolute positioning 227 Floating 228 Using a Layout Generator 230 Chapter 15: Building with Boxes, Borders, and Buttons 233 Meeting the Box Model 233 Putting the Box Model into Practice 235 Specifying padding and margin widths 239 Adding borders 243 Aligning text 246 Indenting text 247 Creating buttons with CSS 247 Chapter 16: Using Colors and Backgrounds 251 Defining Color Values 251 Color names 251 Color numbers 253 Defining Color Definitions 255 Text 256 Links 256 Backgrounds 258 Advanced backgrounds 259 Chapter 18: CSS Text and Shadow Effects 281 Creating Shadows 282 text-shadow 282 box-shadow 283 Creating Inset Text 284 Creating 3D Text 285 Creating a Letterpress Effect 286 Drop Shadows 287 Text Rotation 289 Chapter 19: Multimedia and Animation with CSS 291 Using CSS with Multimedia 291 Visual media styles 293 Paged media styles 299 Getting Animated 300 Using the animation properties 302 Creating animations with @keyframes 303 Animating color 303 Part VI: The Part of Tens 305 Chapter 20: Ten Keys to Mobile Web Design 307 Design for Different Mobile Devices 307 Design for People 310 Design for Small Screens 310 Design for Low Bandwidth 311 Design for Touch 311 Design for Distracted Surfers 313 Test on Many Mobile Devices 313 Design for Simplicity 314 Set Up Mobile Web Addresses 314 Include a Link to the Desktop Site 315 Chapter 21: Ten HTML Do's and Don'ts 317 Don't Lose Sight of Your Content 317 Do Structure Your Documents and Your Site 318 Do Make the Most from the Least 318 Do Build Attractive Pages 319 Don't Lose Track of Those Tags 319 Do Avoid Browser Dependencies 320 Don't Make It Hard to Navigate Your Wild and Woolly Web 321 Don't Think Revolution, Think Evolution 322 Don't Get Stuck in the Two-Dimensional-Text Trap 323 Don't Let Inertia Overcome You 323 Chapter 22: Ten Ways to Kill Web Bugs Dead 325 Make a List and Check It -- Twice 325 Master Text Mechanics 326 Lack of Live Links -- a Lousy Legacy 327 When Old Links Must Linger 328 Make Your Content Mirror Your World 328 Look for Trouble in All the Right Places 328 Cover All the Bases with Peer Reviews 329 Use the Best Tools of the Testing Trade 330 Schedule Site Reviews 330 Foster User Feedback 331 If You Give to Them, They'll Give to You! 332 Chapter 23: Ten Cool HTML Tools and Technologies 333 WYSIWYG HTML Editors 334 Dreamweaver 334 Other WYSIWYG editors 335 Helper HTML Editors 335 Aptana Studio 335 Other helper editors 336 Inexpensive Graphics Editors 337 Professional Graphics Editors 337 Adobe Photoshop 338 Adobe Fireworks 338 W3C Link Checker 339 Other Link Checkers 339 HTML Validators 340 FTP Clients 341 Miscellaneous Helpful Web Tools 341 Part VII: Appendixes 343 Appendix A: Twitterati 345 Appendix B: About the Dummies HTML Site 349 About WordPress 349 The dashboard 349 Appearance and themes 350 Pages and posts 351 x Beginning HTML5 & CSS3 For Dummies Widgets 351 Responsive Design 352 HTML5 Cafe 352 The home page 352 About Us 354 The Menu 354 Contact Us 354 HTML5 Boilerplate 355 Index 357