Web Design

Basics of

Fifth Edition

HTML5 & CSS

Terry Ann Felke-Morris, Ed.D.Professor Emerita

Harper College

A01_FELK5486_05_SE_FM.indd 3 26/10/2018 11:59

Contents ix

CONTENTS

CHAPTER 1

Internet and Web Basics 1The Internet and the Web 2Web Standards and Accessibility 4Web Browsers and Web Servers 6Internet Protocols 8Uniform Resource Identifiers and Domain Names 10Information on the Web 14HTML Overview 16Under the Hood of a Web Page 18Your First Web Page 20

Review and Apply 24

CHAPTER 2

HTML Basics 27Heading Element 28Paragraph Element 30Line Break and Horizontal Rule 32Blockquote Element 34Phrase Element 36Ordered List 38Unordered List 40Description List 42Special Entity Characters 44HTML Syntax Validation 46Structural Elements 48Practice with Structural Elements 50More Structural Elements 52Anchor Element 54Practice with Hyperlinks 56E-Mail Hyperlinks 60

Review and Apply 62

CHAPTER 3

Web Design Basics 71Your Target Audience 72

Website Organization 74Principles of Visual Design 76Design to Provide for Accessibility 78Use of Text 80Web Color Palette 82Design for Your Target Audience 84Choosing a Color Scheme 86Use of Graphics and Multimedia 90More Design Considerations 92Navigation Design 94Wireframes and Page Layout 96Fixed and Fluid Layouts 98Design for the Mobile Web 100Responsive Web Design 102Web Design Best Practices Checklist 104

Review and Apply 106

CHAPTER 4

Cascading Style Sheets Basics 111Cascading Style Sheets Overview 112CSS Selectors and Declarations 114CSS Syntax for Color Values 116Configure Inline CSS 118Configure Embedded CSS 120Configure External CSS 122CSS Selectors: Class, Id, and Descendant 124Span Element 126Practice with CSS 128The Cascade 130Practice with the Cascade 132CSS Syntax Validation 134

Review and Apply 136

CHAPTER 5

Graphics & Text Styling Basics 143Web Graphics 144Image Element 146

A01_FELK5486_05_SE_FM.indd 9 26/10/2018 11:59

x Contents

Image Hyperlinks 148Configure Background Images 150Position Background Images 152CSS Multiple Background Images 154Fonts with CSS 156CSS Text Properties 158Practice with Graphics and Text 160Configure List Markers with CSS 162The Favorites Icon 164Image Maps 166Figure and Figcaption Elements 168

Review and Apply 170

CHAPTER 6

More CSS Basics 179Width and Height with CSS 180The Box Model 182Margin and Padding with CSS 184Borders with CSS 186CSS Rounded Corners 188Center Page Content with CSS 190CSS Box Shadow and Text Shadow 192CSS Background Clip and Origin 194CSS Background Resize and Scale 196Practice with CSS Properties 198CSS Opacity 200CSS RGBA Color 202CSS HSLA Color 204CSS Gradients 206

Review and Apply 208

CHAPTER 7

Page Layout Basics 217Normal Flow 218Float 220Clear a Float 222Overflow 224CSS Box Sizing 226Basic Two-Column Layout 228Vertical Navigation with an Unordered List 232Horizontal Navigation with an Unordered List 234

CSS Interactivity with Pseudo-Classes 236Practice with CSS Two-Column Layout 238CSS for Print 240CSS Sprites 242Positioning with CSS 244Practice with Positioning 246Fixed Position Navigation Bar 248

Review and Apply 250

CHAPTER 8

Responsive Layout Basics 257CSS Flexible Box Layout 258More About Flex Containers 260Flexbox Image Gallery 262Configure Flex Items 264Practice with Flexbox 266CSS Grid Layout 268Grid Columns, Rows, and Gap 270Two-Column Grid Page Layout 272Progressive Enhancement with Grid 274Centering with Flexbox and Grid 276Viewport Meta Tag 278CSS Media Queries 280Responsive Layout with Media Queries 282Responsive Grid Layout with Media Queries 286Flexible Images with CSS 290Picture Element 292Responsive Img Element Attributes 294Testing Mobile Display 296

Review and Apply 290

CHAPTER 9

Table Basics 309Table Overview 310Table Rows, Cells, and Headers 312Span Rows and Columns 314Configure an Accessible Table 316Style a Table with CSS 318CSS Structural Pseudo-classes 320Configure Table Sections 322

Review and Apply 324

A01_FELK5486_05_SE_FM.indd 10 26/10/2018 11:59

Contents xi

CHAPTER 10

Form Basics 331Form Overview 332Text Box 334Submit Button and Reset Button 336Check Box and Radio Button 338Hidden Field and Password Box 340Textarea Element 342Select Element and Option Element 344Label Element 346Fieldset Element and Legend Element 348Style a Form with CSS 350CSS Grid Layout Form 352Server-Side Processing 354Practice with a Form 356More Text Form Controls 358Datalist Element 360Slider and Spinner Controls 362Calendar and Color-Well Controls 364More Form Practice 366

Review and Apply 368

CHAPTER 11

Media and Interactivity Basics 379Plug-ins, Containers, and Codecs 380Configure Audio and Video 382Flash and the HTML5 Embed Element 384Audio Element and Source Element 386Video Element and Source Element 388Practice with Video 390Iframe Element 392CSS Transform Property 394

CSS Transition Property 396Practice with Transitions 398CSS Drop-Down Menu 400Details Element and Summary Element 402JavaScript & jQuery 404HTML5 APIs 406

Review and Apply 408

CHAPTER 12

Web Publishing Basics 415File Organization 416Targeting Hyperlinks 418Register a Domain Name 420Choose a Web Host 422Secure Sockets Layer (SSL) 424Publish with File Transfer Protocol 426Search Engine Submission 428Search Engine Optimization 430Accessibility Testing 432Usability Testing 434

Review and Apply 436

APPENDIXAnswers to Review Questions 439HTML5 Cheat Sheet 440CSS Cheat Sheet 445WCAG 2.1 Quick Reference 453Landmark Roles with ARIA 455

Index 457Credits 473Web Safe Color Palette 475

A01_FELK5486_05_SE_FM.indd 11 26/10/2018 11:59