Web Development and Design Foundations with HTML5 is intended for use in a beginning web development course. It is also suitable for all readers interested in developing web sites.

Using Hands-On Practice exercises and Web Site Case Studies to motivate readers, Web Development and Design Foundations with HTML5 includes all the necessary lessons to guide students in developing highly effective Web sites. A well-rounded balance of hard skills (HTML5, CSS, JavaScript) and soft skills (Web Design, e-commerce, Web site promotion strategies) presents everything beginning Web developers need to know to build and promote successful Web sites.

Teaching and Learning Experience

This program will provide a better teaching and learning experience–for you and your students. It will help:

Build a Strong Foundation of Web Development Skills: A well-rounded foundation of hard and soft skills will help students design web pages for today and tomorrow.
Motivate Students with Hands-on Practice: This text emphasizes hands-on practice through practice exercises within the chapters, end-of-chapter exercises, and the development of websites through ongoing real-world case studies.
Reinforce Concepts with In-text Features: Throughout the book, emphasis is placed on web design, accessibility, and ethics. The appendixes in the Web Developer’s Handbook offer comprehensive, easy-to-use reference materials
Enhance Learning with Instructor and Student Supplements: Resources are available to expand on the topics presented in the text.

Terry Felke-Morris is a Professor of Computer Information Systems at William Rainey Harper College in Palatine, Illinois. She holds a Doctor of Education degree, a Master of Science degree in information systems, and numerous certifications, including Adobe Certified Dreamweaver 8 Developer, WOW Certified Associate Webmaster, Microsoft Certified Professional, Master CIW Designer, and CIW Certified Instructor.

Dr. Felke-Morris has been honored with Harper College’s Glenn A. Reich Memorial Award for Instructional Technology in recognition of her work in designing the college’s CIS Web Development program and courses. In 2006, she received the Blackboard Greenhouse Exemplary Online Course Award for use of Internet technology in the academic environment. Ms.Felke-Morris received two international awards in 2008: the Instructional Technology Council’s Outstanding e-Learning Faculty Award for Excellence and the MERLOT Award for Exemplary Online Learning Resources–MERLOT Business Classics.

With over 25 years of information technology experience in business and industry, Dr. Felke-Morris published her first website in 1996 and has been working with the Web ever since. A long-time promoter of Web standards, she has been a member of the Web Standards Project Education Task Force. Dr. Felke-Morris helped to develop the Web Development certificate and degree programs at William Rainey Harper College and currently is the senior faculty member in that area. For more information about Dr. Felke-Morris, visit http://terrymorris.net.

Chapter 1

Introduction to the Internet and World

Wide Web 1

1.1 The Internet and the Web 1

The Internet 2

Birth of the Internet 2

Growth of the Internet 2

Birth of the Web 2

The First Graphical Browser 2

Convergence of Technologies 3

Who Runs the Internet? 3

Intranets and Extranets 4

1.2 Web Standards and Accessibility 4

W3C Recommendations 4

Web Standards and Accessibility 5

Accessibility and the Law 5

Universal Design for the Web 5

1.3 Information on the Web 6

Reliability and Information on the Web 6

Ethical Use of Information on the Web 7

1.4 Network Overview 8

1.5 The Client/Server Model 9

1.6 Internet Protocols 10

File Transfer Protocol (FTP) 10

E-mail Protocols 11

Hypertext Transfer Protocol (HTTP) 11

Transmission Control Protocol/Internet Protocol

(TCP/IP) 11

1.7 Uniform Resource Identifiers and

Domain Names 13

URIs and URLs 13

Domain Names 13

1.8 Markup Languages 15

Standard Generalized Markup Language

(SGML) 15

Hypertext Markup Language

(HTML) 16

Extensible Markup Language

(XML) 16

Extensible Hypertext Markup Language

(XHTML) 16

HTML5–the Newest Version of

HTML 16

1.9 Popular Uses of the Web 17

E-Commerce 17

Mobile Access 17

Blogs 17

Wikis 18

Social Networking 18

Cloud Computing 18

RSS 18

Podcasts 19

Web 2.0 19

Chapter Summary 20

Key Terms 20

Review Questions 20

Hands-On Exercise 21

Web Research 22

Focus on Web Design 23

Chapter 2

HTML Basics 25

2.1 HTML Overview 26

HTML 26

XML 26

XHTML 26

HTML5 27

2.2 Document Type Definition 27

2.3 Web Page Template 28

2.4 HTML Element 28

2.5 Head, Title, Meta, and Body

Elements 28

The Head Section 28

The Body Section 29

2.6 Your First Web Page 29

2.7 Heading Element 33

Accessibility and Headings 35

2.8 Paragraph Element 35

Alignment 36

2.9 Line Break Element 37

2.10 Blockquote Element 38

2.11 Phrase Elements 39

2.12 Ordered List 40

The Type, Start, and Reversed Attributes 41

2.13 Unordered List 42

2.14 Description List 44

2.15 Special Characters 46

2.16 Structural Elements 47

The Div Element 47

HTML5 Structural Elements 48

The Header Element 48

The Nav Element 48

The Main Element 48

The Footer Element 48

2.17 Anchor Element 50

Absolute Hyperlinks 51

Relative Hyperlinks 52

Site Map 52

E-Mail Hyperlinks 55

Accessibility and Hyperlinks 57

Block Anchor 57

2.18 HTML Validation 58

Chapter Summary 61

Key Terms 61

Review Questions 62

Apply Your Knowledge 63

Hands-On Exercises 64

Web Research 65

Focus on Web Design 65

Website Case Study 65

Chapter 3

Configuring Color and Text

with CSS 81

3.1 Overview of Cascading Style Sheets 82

Advantages of Cascading Style Sheets 82

Configuring Cascading Style Sheets 83

CSS Selectors and Declarations 83

The background-color Property 83

The color Property 84

Configure Background and Text Color 84

3.2 Using Color on Web Pages 85

Hexadecimal Color Values 86

Web-Safe Colors 86

CSS Color Syntax 86

3.3 Inline CSS with the Style Attribute 87

The Style Attribute 87

3.4 Embedded CSS with the Style

Element 89

Style Element 89

3.5 Configuring Text with CSS 92

The Property 92

More CSS Font Properties 94

CSS3 text-shadow Property 96

3.6 CSS Class, id, and Descendant

Selectors 99

The Class Selector 99

The id Selector 100

The Descendant Selector 102

3.7 Span Element 102

3.8 Using External Style Sheets 104

Link Element 104

3.9 Center HTML Elements with CSS 109

3.10 The “Cascade” 110

3.11 CSS Validation 113

Chapter Summary 116

Key Terms 116

Review Questions 116

Apply Your Knowledge 117

Hands-On Exercises 119

Web Research 121

Focus on Web Design 121

Website Case Study 122

Chapter 4

Visual Elements and Graphics 133

4.1 Configuring Lines and Borders 134

The Horizontal Rule Element 134

The border and padding Properties 134

4.2 Types of Graphics 140

Graphic Interchange Format (GIF) Images 140

Joint Photographic Experts Group (JPEG)

Images 141

Portable Network Graphic (PNG) Images 142

New WebP Image Format 142

4.3 Image Element 143

Accessibility and Images 144

Image Hyperlinks 144

Optimize an Image for the Web 147

4.4 HTML5 Visual Elements 148

HTML5 Figure Element 148

HTML5 Figcaption Element 149

HTML5 Meter Element 150

HTML5 Progress Element 151

4.5 Background Images 151

The background-image Property 151

Browser Display of a Background Image 152

The background-repeat Property 153

The background-position Property 153

The background-attachment Property 155

4.6 More About Images 156

Image Maps 156

The Favorites Icon 158

Configuring a Favorites Icon 158

Image Slicing 159

CSS Sprites 159

4.7 Sources and Guidelines for Graphics 160

Sources of Graphics 160

Guidelines for Using Images 161

Accessibility and Visual Elements 162

4.8 CSS3 Visual Effects 162

The CSS3 background-clip Property 163

The CSS3 background-origin Property 163

The CSS3 background-size Property 164

CSS3 Multiple Background Images 165

CSS3 Rounded Corners 167

The CSS3 box-shadow Property 169

The CSS3 opacity Property 171

CSS3 RGBA Color 173

CSS3 HSLA Color 175

Hue, Saturation, Lightness, and Alpha 176

HSLA Color Examples 176

CSS3 Gradients 178

W3C Linear Gradient Syntax 178

CSS3 Gradients and Progressive

Enhancement 178

Configuring CSS3 Gradients 178

Chapter Summary 180

Key Terms 180

Review Questions 180

Apply Your Knowledge 181

Hands-On Exercises 183

Web Research 184

Focus on Web Design 184

Website Case Study 185

Chapter 5

Web Design 199

5.1 Design for Your Target Audience 200

5.2 Website Organization 201

Hierarchical Organization 201

Linear Organization 202

Random Organization 202

5.3 Principles of Visual Design 203

Repetition: Repeat Visual Components

Throughout the Design 203

Contrast: Add Visual Excitement and Draw

Attention 203

Proximity: Group Related Items 204

Alignment: Align Elements to Create Visual

Unity 204

5.4 Design to Provide Accessibility 204

Who Benefits from Universal Design and

Increased Accessibility? 205

Accessible Design Can Benefit Search Engine

Listing 205

Accessibility is the Right Thing to Do 205

5.5 Writing for the Web 206

Organize Your Content 206

Choosing a Font 207

Font Size 207

Chapter Summary 231

Key Terms 231

Review Questions 231

Hands-On Exercises 232

Web Research 234

Focus on Web Design 235

Website Case Study 236

Chapter 6

Page Layout 239

6.1 The Box Model 240

Content 240

Padding 240

Border 240

Margin 240

The Box Model in Action 242

6.2 Normal Flow 242

6.3 CSS Float 244

6.4 CSS: Clearing a Float 246

The clear Property 246

The overflow Property 247

6.5 CSS Two-Column Page Layout 249

Two Columns with Left Navigation 249

Two Columns with Top Header and Left

Navigation 250

6.6 Hyperlinks in an Unordered List 251

Configure List Markers with CSS 251

Vertical Navigation with an Unordered List 253

Horizontal Navigation with an Unordered

List 254

6.7 CSS Interactivity with Pseudo-

Classes 254

6.8 Practice with CSS Two-Column

Layout 257

6.9 Header Text Image Replacement 260

Improved Header Text Image Replacement

Technique 260

6.10 Practice with an Image Gallery 262

6.11 Positioning with CSS 264

Static Positioning 264

Fixed Positioning 265

Relative Positioning 265

Absolute Positioning 266

6.12 CSS Debugging Techniques 268

6.13 More HTML5 Structural Elements 270

The Section Element 270

Font Weight 207

Font Color Contrast 207

Line Length 208

Alignment 208

Text in Hyperlinks 208

Reading Level 208

Spelling and Grammar 208

5.6 Use of Color 208

Color Scheme Based on an Image 208

Color Wheel 209

Color Scheme Based on the Color Wheel 209

Implementing a Color Scheme 210

Accessibility and Color 211

Colors and Your Target Audience 211

5.7 Use of Graphics and Multimedia 214

File Size and Image Dimensions Matter 214

Antialiased/Aliased Text in Media 214

Use Only Necessary Multimedia 215

Provide Alternate Text 215

5.8 More Design Considerations 215

Load Time 215

Above the Fold 216

White Space 217

Avoid Horizontal Scrolling 217

Browsers 217

Screen Resolution 217

5.9 Navigation Design 218

Ease of Navigation 218

Navigation Bars 218

Breadcrumb Navigation 218

Using Graphics for Navigation 218

Skip Repetitive Navigation 219

Dynamic Navigation 219

Site Map 220

Site Search Feature 220

5.10 Page Layout Design 220

Wireframes and Page Layout 220

Page Layout Design Techniques 222

5.11 Design for the Mobile Web 224

Three Approaches 224

Mobile Device Design Considerations 224

Example Desktop Website and Mobile

Website 225

Mobile Design Quick Checklist 225

Responsive Web Design 226

5.12 Web Design Best Practices

Checklist 227

The Article Element 270

The Aside Element 270

The Time Element 270

6.14 HTML5 Compatibility with Older

Browsers 272

Configure CSS Block Display 273

HTML5 Shim 273

Chapter Summary 275

Key Terms 275

Review Questions 275

Apply Your Knowledge 276

Hands-On Exercises 279

Web Research 279

Focus on Web Design 280

Website Case Study 280

Chapter 7

More on Links, Layout, and Mobile 295

7.1 Another Look at Hyperlinks 296

Rent More, Save More! Use code: ECRENTAL

Rent More, Save More! Use code: ECRENTAL

5% off 1 book, 7% off 2 books, 10% off 3+ books

Web Development and Design Foundations with HTML5

Summary

Author Biography

Table of Contents

Supplemental Materials

Rewards Program