Beginning HTML5 and CSS3 For Dummies

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