Basics of Web Design: HTML5 & CSS, 5th Edition PDF

Preview

Summary

Textbook Companion Website http://webdevbasics.net Basics of Web Design HTML5 & CSS Fifth Edition Terry Ann Felke-Morris, Ed.D. Professor Emerita Harper College A01_FELK5486_05_SE_FM.indd 3 26/10/2018 11:59 CONTENTS CHAPTER 1 Website Organization 74 Principles of Visual Design 76 Internet and We...

Description

Accelerat ing t he world's research.

Basics of Web Design: HTML5 & CSS, 5th Edition Terry Ann Morris, Ed.D. Basics of Web Design: HTML5 & CSS

Cite this paper

Downloaded from Academia.edu 

Get the citation in MLA, APA, or Chicago styles

Related papers

Download a PDF Pack of t he best relat ed papers 

Textbook Companion Website http://webdevbasics.net

Basics of

Web Design HTML5 & CSS Fifth Edition

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

A01_FELK5486_05_SE_FM.indd 3

26/10/2018 11:59

CONTENTS CHAPTER 1

Internet and Web Basics The Internet and the Web Web Standards and Accessibility Web Browsers and Web Servers Internet Protocols Uniform Resource Identifiers and Domain Names Information on the Web HTML Overview Under the Hood of a Web Page Your First Web Page Review and Apply

1 2 4 6 8 10 14 16 18 20 24

CHAPTER 2

HTML Basics Heading Element Paragraph Element Line Break and Horizontal Rule Blockquote Element Phrase Element Ordered List Unordered List Description List Special Entity Characters HTML Syntax Validation Structural Elements Practice with Structural Elements More Structural Elements Anchor Element Practice with Hyperlinks E-Mail Hyperlinks Review and Apply

Website Organization Principles of Visual Design Design to Provide for Accessibility Use of Text Web Color Palette Design for Your Target Audience Choosing a Color Scheme Use of Graphics and Multimedia More Design Considerations Navigation Design Wireframes and Page Layout Fixed and Fluid Layouts Design for the Mobile Web Responsive Web Design Web Design Best Practices Checklist Review and Apply

27 28 30 32 34 36 38 40 42 44 46 48 50 52 54 56 60

74 76 78 80 82 84 86 90 92 94 96 98 100 102 104 106

CHAPTER 4

Cascading Style Sheets Basics 111 Cascading Style Sheets Overview CSS Selectors and Declarations CSS Syntax for Color Values Configure Inline CSS Configure Embedded CSS Configure External CSS CSS Selectors: Class, Id, and Descendant Span Element Practice with CSS The Cascade Practice with the Cascade CSS Syntax Validation Review and Apply

112 114 116 118 120 122 124 126 128 130 132 134 136

62

CHAPTER 5 CHAPTER 3

Graphics & Text Styling Basics 143

Web Design Basics

71

Your Target Audience

72

Web Graphics Image Element

144 146 Contents

A01_FELK5486_05_SE_FM.indd 9

ix

26/10/2018 11:59

Image Hyperlinks Configure Background Images Position Background Images CSS Multiple Background Images Fonts with CSS CSS Text Properties Practice with Graphics and Text Configure List Markers with CSS The Favorites Icon Image Maps Figure and Figcaption Elements Review and Apply

148 150 152 154 156 158 160 162 164 166 168 170

CHAPTER 6

More CSS Basics Width and Height with CSS The Box Model Margin and Padding with CSS Borders with CSS CSS Rounded Corners Center Page Content with CSS CSS Box Shadow and Text Shadow CSS Background Clip and Origin CSS Background Resize and Scale Practice with CSS Properties CSS Opacity CSS RGBA Color CSS HSLA Color CSS Gradients Review and Apply

179 180 182 184 186 188 190 192 194 196 198 200 202 204 206 208

CSS Interactivity with Pseudo-Classes Practice with CSS Two-Column Layout CSS for Print CSS Sprites Positioning with CSS Practice with Positioning Fixed Position Navigation Bar Review and Apply

236 238 240 242 244 246 248 250

CHAPTER 8

Responsive Layout Basics CSS Flexible Box Layout More About Flex Containers Flexbox Image Gallery Configure Flex Items Practice with Flexbox CSS Grid Layout Grid Columns, Rows, and Gap Two-Column Grid Page Layout Progressive Enhancement with Grid Centering with Flexbox and Grid Viewport Meta Tag CSS Media Queries Responsive Layout with Media Queries Responsive Grid Layout with Media Queries Flexible Images with CSS Picture Element Responsive Img Element Attributes Testing Mobile Display Review and Apply

257 258 260 262 264 266 268 270 272 274 276 278 280 282 286 290 292 294 296 290

CHAPTER 7

Page Layout Basics Normal Flow Float Clear a Float Overflow CSS Box Sizing Basic Two-Column Layout Vertical Navigation with an Unordered List Horizontal Navigation with an Unordered List

x

217

CHAPTER 9

218 220 222 224 226 228

Table Basics

232 234

Table Overview Table Rows, Cells, and Headers Span Rows and Columns Configure an Accessible Table Style a Table with CSS CSS Structural Pseudo-classes Configure Table Sections Review and Apply

309 310 312 314 316 318 320 322 324

Contents

A01_FELK5486_05_SE_FM.indd 10

26/10/2018 11:59

CHAPTER 10

Form Basics Form Overview Text Box Submit Button and Reset Button Check Box and Radio Button Hidden Field and Password Box Textarea Element Select Element and Option Element Label Element Fieldset Element and Legend Element Style a Form with CSS CSS Grid Layout Form Server-Side Processing Practice with a Form More Text Form Controls Datalist Element Slider and Spinner Controls Calendar and Color-Well Controls More Form Practice Review and Apply

331 332 334 336 338 340 342 344 346 348 350 352 354 356 358 360 362 364 366 368

CHAPTER 11

CSS Transition Property Practice with Transitions CSS Drop-Down Menu Details Element and Summary Element JavaScript & jQuery HTML5 APIs Review and Apply

396 398 400 402 404 406 408

CHAPTER 12

Web Publishing Basics File Organization Targeting Hyperlinks Register a Domain Name Choose a Web Host Secure Sockets Layer (SSL) Publish with File Transfer Protocol Search Engine Submission Search Engine Optimization Accessibility Testing Usability Testing Review and Apply

415 416 418 420 422 424 426 428 430 432 434 436

APPENDIX

Media and Interactivity Basics

379

Plug-ins, Containers, and Codecs Configure Audio and Video Flash and the HTML5 Embed Element Audio Element and Source Element Video Element and Source Element Practice with Video Iframe Element CSS Transform Property

380 382 384 386 388 390 392 394

Answers to Review Questions HTML5 Cheat Sheet CSS Cheat Sheet WCAG 2.1 Quick Reference Landmark Roles with ARIA

439 440 445 453 455

Index Credits Web Safe Color Palette

457 473 475

Contents

A01_FELK5486_05_SE_FM.indd 11

xi

26/10/2018 11:59...