• Abstract and Figures
• Public Full-text

5TH EDITION “Unlike all the other books that start at the beginning, this one will get you to the good stuff, fast. Jennifer will explain every step you need, including some very advanced concepts.” —JEN SIMMONS, MOZILLA AND W3C CSS WORKING GROUP Learning Web Design A BEGINNER'S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS Jennifer Niederst Robbins Whether you’re a beginner or bringing your skills up to date, this book gives you a solid footing in footing a solid you this book gives date, skills up to a beginner or bringing your Whether you’re exercises with frequent pace, visually at a pleasant topic each I teach production. modern web Robbins —Jennifer classroom! sitting in my like it feels Reading skills. try out new let you to Fifth Edition LEARNING WEB DESIGN A BEGINNER’S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS Jennifer Niederst Robbins Beijing • Boston • Farnham • Sebastopol • Tokyo Learning Web Design, Fifth Edition A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics by Jennifer Niederst Robbins Copyright © 2018 O’Reilly Media, Inc. All rights reserved. Printed in Canada. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly Media books may be purchased for educational, business, or sales promotional use. Online editions are also avail- able for most titles (oreilly.com/safari). For more information, contact our corporate/institutional sales department: 800-998- 9938 or [email protected]. EDITORS: Meg Foley and Jeff Bleiel PRODUCTION EDITOR: Kristen Brown COVER DESIGNER: Edie Freedman INTERIOR DESIGNER: Jennifer Robbins PRINT HISTORY: March 2001: First edition. June 2003: Second edition. June 2007: Third edition. August 2012: Fourth edition. May 2018: Fifth edition. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. “O’Reilly Digital Studio” and related trade dress are trademarks of O’Reilly Media, Inc. Photoshop, Illustrator, Dreamweaver, Elements, HomeSite, and Fireworks are either regis- tered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Microsoft and Expression Web are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trade- marks. Where those designations appear in this book, and O’ReillyMedia, Inc. was aware of a trademark claim, the designa- tions have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. ISBN: 978-1-491-96020-2 [TI] [2018-11-30] CONTENTS FOREWORD .................................................................................................... xi PREFACE ....................................................................................................... xiii PART I. GETTING STARTED 1. Getting Started in Web Design ..........................................3 Where Do I Start? ............................................................................. 4 It Takes a Village (Website Creation Roles) ........................................ 4 Gearing Up for Web Design ............................................................ 14 What You’ve Learned ...................................................................... 20 Test Yourself ................................................................................... 20 2. How the Web Works ........................................................ 21 The Internet Versus the Web ........................................................... 21 Serving Up Your Information .......................................................... 22 A Word About Browsers .................................................................. 23 Web Page Addresses (URLs) ............................................................ 24 The Anatomy of a Web Page ............................................................ 27 Putting It All Together ..................................................................... 32 Test Yourself ................................................................................... 34 3. Some Big Concepts You Need to Know ............................ 35 A Multitude of Devices ................................................................... 36 Sticking with the Standards ............................................................. 38 Progressive Enhancement ................................................................ 38 iii Responsive Web Design .................................................................. 40 One Web for All (Accessibility) ....................................................... 42 The Need for Speed (Site Performance) ............................................ 44 Test Yourself ................................................................................... 46 PART II. HTML FOR STRUCTURE 4. Creating a Simple Page ................................................... 49 A Web Page, Step-By-Step ............................................................... 49 Launch a Text Editor ....................................................................... 50 Step 1: Start with Content ............................................................... 53 Step 2: Give the HTML Document Structure ................................... 55 Step 3: Identify Text Elements ......................................................... 59 Step 4: Add an Image ...................................................................... 62 Step 5: Change the Look with a Style Sheet ..................................... 66 When Good Pages Go Bad .............................................................. 67 Validating Your Documents ............................................................. 68 Test Yourself ................................................................................... 70 Element Review: HTML Document Setup ...................................... 70 5. Marking Up Text .............................................................. 71 Paragraphs ...................................................................................... 71 Headings ......................................................................................... 72 Thematic Breaks (Horizontal Rule) .................................................. 74 Lists ................................................................................................ 74 More Content Elements ................................................................... 78 Organizing Page Content ................................................................. 82 The Inline Element Roundup ........................................................... 88 Generic Elements (div and span) ...................................................... 98 Improving Accessibility with ARIA ............................................... 102 Character Escapes ......................................................................... 105 Putting It All Together ................................................................... 108 Test Yourself ..................................................................................111 Element Review: Text Elements ..................................................... 112 iv Contents 6. Adding Links ................................................................. 113 The href Attribute ..........................................................................114 Linking to Pages on the Web ......................................................... 115 Linking Within Your Own Site ......................................................116 Targeting a New Browser Window ................................................ 126 Mail Links .................................................................................... 127 Telephone Links ............................................................................ 128 Test Yourself ................................................................................. 128 Element Review: Links .................................................................. 130 7. Adding Images .............................................................. 131 First, a Word on Image Formats .................................................... 132 The img Element ........................................................................... 134 Adding SVG Images ...................................................................... 139 Responsive Image Markup ............................................................ 146 Whew! We’re Finished .................................................................. 159 Test Yourself ................................................................................. 159 Element Review: Images ................................................................162 8. Table Markup ................................................................ 163 How to Use Tables ........................................................................ 163 Minimal Table Structure ............................................................... 165 Table Headers ............................................................................... 167 Spanning Cells .............................................................................. 168 Table Accessibility .........................................................................169

Load more

  14

Copy Link