10th Edition Web Development and Design Foundations with HTML5 Terry Ann Felke-Morris, Ed.D. Professor Emerita Harper College 330 Hudson Street, NY NY 10013 A01_FELK9996_10_SE_FM.indd 3 18/09/19 5:26 PM Contents 1.7 Uniform Resource Identifiers and Domain CHAPTER 1 Names 13 URIs and URLs 13 Introduction to the Internet and Domain Names 13 World Wide Web 1 1.8 Markup Languages 16 1.1 The Internet and the Web 2 Standard Generalized Markup Language The Internet 2 (SGML) 16 Birth of the Internet 2 Hypertext Markup Language Growth of the Internet 2 (HTML) 16 Birth of the Web 2 Extensible Markup Language The First Graphical Browser 2 (XML) 16 Convergence of Technologies 3 Extensible Hypertext Markup Language (XHTML) 17 Who Runs the Internet? 3 HTML5—the Newest Version Intranets and Extranets 4 of HTML 17 1.2 Web Standards and Accessibility 4 1.9 Popular Uses of the Web 17 W3C Recommendations 4 E-Commerce 17 Web Standards and Accessibility 5 Mobile Access 18 Accessibility and the Law 5 Blogs 18 Universal Design for the Web 5 Wikis 18 1.3 Information on the Web 6 Social Networking 18 Reliability and Information on the Web 6 Cloud Computing 19 Ethical Use of Information on the Web 7 RSS 19 1.4 Network Overview 8 Podcasts 19 Constant Change 19 1.5 The Client/Server Model 9 1.6 Internet Protocols 10 Chapter Summary 20 File Transfer Protocol (FTP) 10 Key Terms 20 E-mail Protocols 11 Review Questions 20 Hypertext Transfer Protocol (HTTP) 11 Hands-On Exercise 21 Hypertext Transfer Protocol Secure (HTTPS) 11 Web Research 22 Transmission Control Protocol/Internet Protocol Focus on Web Design 23 (TCP/IP) 11 xii A01_FELK9996_10_SE_FM.indd 12 18/09/19 5:26 PM Contents xiii Relative Hyperlinks 55 CHAPTER Site Map 55 2 The Target Attribute 59 HTML Basics 25 Block Anchor 59 E-Mail Hyperlinks 59 2.1 HTML Overview 26 Accessibility and Hyperlinks 61 HTML 26 XML 26 2.18 HTML Validation 61 XHTML 26 Chapter Summary 64 HTML5 27 Key Terms 64 2.2 Document Type Definition 27 Review Questions 65 2.3 Web Page Template 28 Apply Your Knowledge 66 Hands-On Exercises 67 HTML Element 28 2.4 Web Research 68 2.5 Head, Title, Meta, and Body Focus on Web Design 68 Elements 28 Website Case Study 68 The Head Section 28 The Body Section 29 2.6 Your First Web Page 29 2.7 Heading Element 33 CHAPTER 3 Accessibility and Headings 35 Configuring Color and Text 2.8 Paragraph Element 35 with CSS 83 Alignment 36 3.1 Overview of Cascading Style 2.9 Line Break Element 37 Sheets 84 Advantages of Cascading Style Sheets 84 2.10 Blockquote Element 38 Configuring Cascading Style Sheets 85 2.11 Phrase Elements 39 CSS Selectors and Declarations 85 2.12 Ordered List 40 The background-color Property 85 The Type, Start, and Reversed The color Property 86 Attributes 41 Configure Background and Text Color 86 2.13 Unordered List 42 3.2 Using Color on Web Pages 87 Hexadecimal Color Values 88 2.14 Description List 44 Web-Safe Colors 88 Special Characters 46 2.15 CSS Color Syntax 88 2.16 Structural Elements 47 3.3 Inline CSS with the Style Attribute 89 Div Element 48 The Style Attribute 89 Header Element 48 Nav Element 48 3.4 Embedded CSS with the Style Main Element 48 Element 91 Footer Element 48 Style Element 91 Section Element 51 3.5 Configuring Text with CSS 94 Article Element 51 The font-family Property 94 Aside Element 52 More CSS Text Properties 96 Time Element 52 3.6 CSS Class, Id, and Descendant 2.17 Hyperlinks 53 Selectors 102 The A Element 53 The Class Selector 102 The Href Attribute 53 The Id Selector 103 Absolute Hyperlinks 54 The Descendant Selector 104 A01_FELK9996_10_SE_FM.indd 13 18/09/19 5:26 PM xiv Contents 3.7 Span Element 106 4.6 More About Images 164 Image Maps 164 3.8 Using External Style Sheets 107 Link Element 107 The Favorites Icon 166 Configuring a Favorites Icon 167 Center HTML Elements with CSS 112 3.9 CSS Sprites 168 3.10 The “Cascade” 114 4.7 Sources and Guidelines for Graphics 168 3.11 CSS Validation 117 Sources of Graphics 168 Guidelines for Using Images 169 Chapter Summary 119 Accessibility and Visual Elements 170 Key Terms 119 Review Questions 119 4.8 CSS Visual Effects 171 Apply Your Knowledge 120 CSS Rounded Corners 171 Hands-On Exercises 122 The box-shadow Property 173 Web Research 124 The opacity Property 177 Focus on Web Design 124 CSS RGBA Color 178 Website Case Study 125 CSS HSLA Color 180 CSS Gradients 183 Chapter Summary 185 CHAPTER 4 Key Terms 185 Visual Elements and Graphics 137 Review Questions 185 Apply Your Knowledge 187 4.1 Configuring Lines and Borders 138 Hands-On Exercises 188 Horizontal Rule Element 138 Web Research 189 The border and padding Properties 138 Focus on Web Design 190 4.2 Graphics on the Web 144 Website Case Study 190 Graphic Interchange Format (GIF) 144 Joint Photographic Experts Group (JPEG) 145 Portable Network Graphic (PNG) 146 CHAPTER 5 WebP Image Format 146 Popular Graphics Applicaitions 147 Web Design 205 4.3 Img Element 147 5.1 Design for Your Target Audience 206 Accessibility and Images 148 5.2 Website Organization 207 Image Hyperlinks 149 Hierarchical Organization 207 Accessibility and Image Hyperlinks 151 Linear Organization 208 4.4 More Visual Elements 152 Random Organization 208 Figure and Figcaption Elements 153 5.3 Principles of Visual Design 209 Meter Element 155 Repetition: Repeat Visual Components Progress Element 155 Throughout the Design 209 Contrast: Add Visual Excitement and Draw 4.5 Background Images 155 Attention 209 The background-image Property 156 Proximity: Group Related Items 210 Browser Display of a Background Image 156 Alignment: Align Elements to Create Visual The background-repeat Property 157 Unity 210 The background-position Property 159 Design to Provide Accessibility 210 The background-attachment Property 159 5.4 Who Benefits from Universal Design The background-clip Property 160 and Increased Accessibility? 211 The background-origin Property 160 Accessible Design Can Benefit Search Engine The background-size Property 161 Listing 211 Multiple Background Images 162 Accessibility is the Right Thing to Do 211 A01_FELK9996_10_SE_FM.indd 14 18/09/19 5:26 PM Contents xv Optimize Text for Mobile Use 232 5.5 Writing for the Web 212 Organize Your Content 212 Mobile Design Quick Checklist 232 Choosing a Font 213 5.12 Responsive Web Design 233 Font Size 213 5.13 Web Design Best Practices Font Weight 213 Checklist 234 Font Color Contrast 213 Line Length 214 Chapter Summary 237 Alignment 214 Key Terms 237 Text in Hyperlinks 214 Review Questions 237 Reading Level 214 Hands-On Exercises 238 Spelling and Grammar 214 Web Research 241 Focus on Web Design 241 Use of Color 214 5.6 Website Case Study 242 Color Scheme Based on an Image 214 Color Wheel 215 Color Scheme Based on the Color Wheel 216 Implementing a Color Scheme 217 CHAPTER Accessibility and Color 217 6 Colors and Your Target Audience 218 Page Layout 245 5.7 Use of Graphics and Multimedia 220 6.1 Width and Height with CSS 246 File Size and Image Dimensions Matter 220 The width Property 246 Antialiased/Aliased Text in Media 220 The min-width Property 246 Use Only Necessary Multimedia 220 The max-width Property 247 Provide Alternate Text 221 The height Property 247 5.8 More Design Considerations 221 6.2 The Box Model 248 Mobile Devices 221 Content 248 Browsers 222 Padding 248 Screen Resolution 222 Border 248 White Space 222 Margin 248 Flat Web Design 222 The Box Model in Action 249 Single Page Website 223 6.3 Normal Flow 250 5.9 Navigation Design 223 6.4 CSS Float 252 Ease of Navigation 223 CSS Clearing a Float 254 Navigation Bars 224 6.5 The clear Property 254 Breadcrumb Navigation 224 The overflow Property 255 Using Graphics for Navigation 224 Skip Repetitive Navigation 225 6.6 CSS Box Sizing 257 Dynamic Navigation 225 6.7 CSS Two-Column Layout 258 Site Map 226 Your First Two-Column Layout 258 Site Search Feature 226 Two-Column Layout Example 261 5.10 Page Layout Design 226 6.8 Hyperlinks in an Unordered List 262 Wireframes and Page Layout 226 Configure List Markers with CSS 262 Page Layout Design Techniques 228 Vertical Navigation with an Unordered List 263 5.11 Design for the Mobile Web 230 The display Property 264 Mobile Web Design Considerations 231 Horizontal Navigation with an Unordered List 264 Optimize Layout for Mobile use 231 6.9 CSS Interactivity with Pseudo-Classes 265 Optimize Navigation for Mobile Use 231 CSS Button 267 Optimize Graphics for Mobile Use 232 6.10 CSS Sprites 271 A01_FELK9996_10_SE_FM.indd 15 18/09/19 5:26 PM xvi Contents 6.11 CSS for Printing 273 7.5 Grid Columns, Rows, and Gap 324 Print Styling Best Practices 273 Grid Gap 324 The order Property 325 6.12 Positioning with CSS 275 Static Positioning 275 7.6 Two-Column Grid Page Layout 326 Fixed Positioning 275 Configure Grid Columns and Rows 327 Relative Positioning 275 Configure Grid Items 327 Sticky Positioning 276 Grid Line Numbers 327 Absolute Positioning 277 7.7 Layout with Grid Areas 329 Practice with Positioning 277 The grid-area Property 329 6.13 Fixed Position Navigation Bar 279 The grid-template-areas The z-index Property 279 Property 330 The grid-template Property 332 6.14 Single Page Website 282 Fragment Identifiers 282 7.8 Progressive Enhancement Parallax Scrolling 285 with Grid 333 CSS Feature Query 333 Chapter Summary 288 Key Terms 288 7.9 Centering with Flexbox and Grid 336 Review Questions 288 7.10 Viewport Meta Tag 338 Apply Your Knowledge 289 7.11 CSS Media Queries 340 Hands-On Exercises 292 What’s a Media Query? 340 Web Research 293 Media Query Example Using a Focus on Web Design 293 Link Element 340 Website Case Study 293 Media Query Example Using an