Learning Web Design - A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics

Do you want to build web pages, but have no previous experience? This friendly guide is the perfect place to start. You’ll begin at square one, learning how the Web and web pages work, and then steadily build from there. By the end of the book, you’ll have the skills to create a simple site with multi-column pages that adapt for mobile devices. Learn how to use the latest techniques, best practices, and current web standards—including HTML5 and CSS3. Each chapter provides exercises to help you to learn various techniques, and short quizzes to make sure you understand key concepts. This thoroughly revised edition is ideal for students and professionals of all backgrounds and skill levels, whether you’re a beginner or brushing up on existing skills. * Build HTML pages with text, links, images, tables, and forms * Use style sheets (CSS) for colors, backgrounds, formatting text, page layout, and even simple animation effects * Learn about the new HTML5 elements, APIs, and CSS3 properties that are changing what you can do with web pages * Make your pages display well on mobile devices by creating a responsive web design * Learn how JavaScript works—and why the language is so important in web design * Create and optimize web graphics so they’ll download as quickly as possible Preface 13 Part I: Getting Started 19 Chapter 1: Where Do I Start? 21 Where Do I Start? 22 What Does a Web Designer Do? 22 What Languages Do I Need to Learn? 29 What Do I Need to Buy? 32 What You’ve Learned 37 Test Yourself 38 Chapter 2: How the Web Works 39 The Internet Versus the Web 39 Serving Up Your Information 39 A Word About Browsers 41 Web Page Addresses (URLs) 42 The Anatomy of a Web Page 44 Putting It All Together 48 Test Yourself 50 Chapter 3: Some Big Concepts You Need to Know 51 A Dizzying Multitude of Devices 52 Sticking with the Standards 54 Progressive Enhancement 54 Responsive Web Design 56 One Web for All (Accessibility) 59 The Need for Speed (Site Performance) 61 Test Yourself 63 Part II: HTML Markup for Structure 65 HTML Markup for Structure 65 Chapter 4: Creating a Simple Page 67 A Web Page, Step by Step 67 Before We Begin, Launch a Text Editor 68 Step 1: Start with Content 71 Step 2: Give the Document Structure 73 Step 3: Identify Text Elements 76 Step 4: Add an Image 79 Step 5: Change the Look with a Style Sheet 82 When Good Pages Go Bad 83 Validating Your Documents 84 Test Yourself 85 Element Review: Document Structure 86 Chapter 5: Marking Up Text 87 Paragraphs 88 Headings 88 Lists 91 More Content Elements 94 Organizing Page Content 97 The Inline Element Roundup 102 Generic Elements (div and span) 113 Some Special Characters 117 Putting It All Together 118 Test Yourself 120 Element Review: Text 122 Chapter 6: Adding Links 123 The href Attribute 124 Linking to Pages on the Web 125 Linking Within Your Own Site 126 Targeting a New Browser Window 136 Mail Links 137 Telephone Links 138 Test Yourself 139 Element Review: Links 140 Chapter 7: Adding Images 141 First, a Word on Image Formats 141 The img Element 142 A Window in a Window 148 Test Yourself 149 Element Review: Images 150 Chapter 8: Table Markup 151 How Tables Are Used 151 Minimal Table Structure 153 Spanning Cells 157 Table Accessibility 160 Wrapping Up Tables 162 Test Yourself 164 Element Review: Tables 164 Chapter 9: Forms 165 How Forms Work 165 The form Element 167 Variables and Content 169 The Great Form Control Roundup 170 Form Accessibility Features 189 Form Layout and Design 191 Test Yourself 193 Element Review: Forms 194 Chapter 10: What’s Up, HTML5? 199 A Funny Thing Happened on the Way to XHTML 2 200 In the Markup Department 203 Meet the APIs 207 Video and Audio 210 Canvas 216 Final Word 220 Test Yourself 221 Part III: CSS for Presentation 223 Chapter 11: Cascading Style Sheets Orientation 225 The Benefits of CSS 225 How Style Sheets Work 227 The Big Concepts 232 Moving Forward with CSS 239 Test Yourself 241 Chapter 12: Formatting Text 243 The Font Properties 243 Changing Text Color 261 A Few More Selector Types 262 Text Line Adjustments 267 Underlines and Other “Decorations” 270 Changing Capitalization 270 Spaced Out 271 Text Shadow 272 Changing List Bullets and Numbers 277 Test Yourself 279 CSS Review: Font and Text Properties 281 Chapter 13: Colors and Backgrounds 283 Specifying Color Values 283 Foreground Color 290 Background Color 291 Playing with Opacity 293 Introducing...Pseudo-class Selectors 294 Pseudo-element Selectors 297 Attribute Selectors 299 Background Images 302 The Shorthand background Property 311 Like a Rainbow (Gradients) 314 Finally, External Style Sheets 318 Test Yourself 321 CSS Review: Color and Background Properties 322 Chapter 14: Thinking Inside the Box 323 The Element Box 323 Specifying Box Dimensions 324 Padding 330 Borders 334 Margins 346 Assigning Display Roles 351 Adding Drop Shadows to Boxes 353 Test Yourself 354 CSS Review: Basic Box Properties 356 Chapter 15: Floating and Positioning 359 Normal Flow 359 Floating 360 Positioning Basics 374 Relative Positioning 376 Absolute Positioning 377 Fixed Positioning 386 Test Yourself 388 CSS Review: Floating and Positioning Properties 389 Chapter 16: Page Layout with CSS 391 Page Layout Strategies 391 Page Layout Techniques 398 Multicolumn Layouts Using Floats 399 Positioned Layout 410 Top-to-Bottom Column Backgrounds 413 Test Yourself 416 Chapter 17: Transitions, Transforms, and Animation 417 Ease-y Does It (CSS Transitions) 417 CSS Transforms 428 Keyframe Animation 438 Test Yourself 441 CSS Review: Transitions, Transforms, and Animation 444 Chapter 18: CSS Techniques 445 A Clean Slate (CSS Reset) 445 Image Replacement Techniques 447 CSS Sprites 448 Styling Forms 452 Styling Tables 459 Basic Responsive Web Design 462 Wrapping Up Style Sheets 472 Test Yourself 472 CSS Review: Table Properties 474 Part IV: JavaScript for Behaviors 475 Chapter 19: Introduction to JavaScript 477 What Is JavaScript? 477 Adding JavaScript to a Page 481 The Anatomy of a Script 481 The Browser Object 496 Events 496 Putting It All Together 499 Test Yourself 501 Chapter 20: Using JavaScript 503 Meet the DOM 503 Polyfills 511 JavaScript Libraries 515 Big Finish 519 Test Yourself 520 Part V: Creating Web Graphics 523 Chapter 21: Web Graphics Basics 525 Image Sources 525 Meet the Formats 528 Image Size and Resolution 540 Working with Transparency 544 Introduction to SVG 551 Summing Up Images 556 Test Yourself 557 Chapter 22: Lean and Mean Web Graphics 559 General Image Optimization Strategies 560 Optimizing GIFs 561 Optimizing JPEGs 565 Optimizing PNGs 570 Optimize to File Size 571 Optimization in Review 572 Test Yourself 573 Appendix A: Answers 575 Appendix B: CSS3 Selectors 601 Index 605 Do you want to build web pages, but have no previous experience? This friendly guide is the perfect place to start. You’ll begin at square one, learning how the Web and web pages work, and then steadily build from there. By the end of the book, you’ll have the skills to create a simple site with multi-column pages that adapt for mobile devices.Learn how to use the latest techniques, best practices, and current web standards—including HTML5 and CSS3. Each chapter provides exercises to help you to learn various techniques, and short quizzes to make sure you understand key concepts.This thoroughly revised edition is ideal for students and professionals of all backgrounds and skill levels, whether you’re a beginner or brushing up on existing skills.Build HTML pages with text, links, images, tables, and formsUse style sheets (CSS) for colors, backgrounds, formatting text, page layout, and even simple animation effectsLearn about the new HTML5 elements, APIs, and CSS3 properties that are changing what you can do with web pagesMake your pages display well on mobile devices by creating a responsive web designLearn how JavaScript works—and why the language is so important in web designCreate and optimize web graphics so they’ll download as quickly as possible Overview: Do you want to build web pages, but have no previous experience? This friendly guide is the perfect place to start. You'll begin at square one, learning how the Web and web pages work, and then steadily build from there. By the end of the book, you'll have the skills to create a simple site with multi-column pages that adapt for mobile devices. Learn how to use the latest techniques, best practices, and current web standards-including HTML5 and CSS3. Each chapter provides exercises to help you to learn various techniques, and short quizzes to make sure you understand key concepts. This thoroughly revised edition is ideal for students and professionals of all backgrounds and skill levels, whether you're a beginner or brushing up on existing skills. Build HTML pages with text, links, images, tables, and forms -- Use style sheets (CSS) for colors, backgrounds, formatting text, page layout, and even simple animation effects. -- Learn about the new HTML5 elements, APIs, and CSS3 properties that are changing what you can do with web pages. -- Make your pages display well on mobile devices by creating a responsive web design. -- Learn how JavaScript works-and why the language is so important in web design. -- Create and optimize web graphics so they'll download as quickly as possible. Ty te? mo?esz mie? swoj? stron? WWW! Marzy Ci si? w?asna strona internetowa lub profesjonalna witryna dla Twojej firmy? Je?eli brak Ci odpowiednich umiej?tno?ci, to zadanie mo?e by? poza Twoim zasi?giem. Ale do czasu! Ta ksi??ka zawiera dawk? wiedzy, która nawet kompletnemu laikowi pozwoli zaprojektowa? i zbudowa? witryn? WWW. Dzi?ki licznym przyk?adom przebrniesz przez kolejne etapy tworzenia strony internetowej oraz odkryjesz w sobie pasj? webmastera! Kolejne wydanie tej cenionej ksi??ki zosta?o gruntownie przeredagowane i uzupe?nione o nowe informacje tak, aby prezentowa?o obecnie wykorzy