Web Development and Design Foundations with HTML5
, by Felke-Morris, Terry
- ISBN: 9780133571783 | 0133571785
- Cover: Paperback
- Copyright: 2/14/2014
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.
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
More on Relative Linking 296
Relative Link Examples 296
Fragment Identifiers 298
Landmark Roles with ARIA 300
The Target Attribute 300
Block Anchor 301
Telephone and Text Message Hyperlinks 301
7.2 CSS Sprites 301
7.3 Three-Column CSS Page Layout 304
7.4 CSS Styling for Print 310
Print Styling Best Practices 311
7.5 Designing for the Mobile Web 315
Mobile Web Design Best Practices 316
7.6 Viewport Meta Tag 318
7.7 CSS3 Media Queries 319
What’s a Media Query? 319
Media Query Example Using a Link Element 320
Media Query Example Using an @media
Rule 320
7.8 Flexible Images 324
7.9 Testing Mobile Display 326
Testing with a Desktop Browser 327
For Serious Developers Only 328
Media Queries & Internet Explorer 328
Mobile First 328
7.10 CSS3 Flexible Box Layout 328
Configure a Flexible Container 329
Configure the Flex Items 329
Chapter Summary 335
Key Terms 335
Review Questions 335
Apply Your Knowledge 336
Hands-On Exercises 339
Web Research 340
Focus on Web Design 340
Website Case Study 341
Chapter 8
Tables 355
8.1 Table Overview 356
Table Element 356
The border Attribute 357
Table Captions 357
8.2 Table Rows, Cells, and Headers 358
Table Row Element 358
Table Data Element 358
Table Header Element 358
8.3 Span Rows and Columns 360
The colspan Attribute 360
The rowspan Attribute 360
8.4 Configure an Accessible Table 362
8.5 Style a Table with CSS 364
8.6 CSS3 Structural Pseudo-Classes 366
8.7 Configure Table Sections 368
Chapter Summary 371
Key Terms 371
Review Questions 371
Apply Your Knowledge 372
Hands-On Exercises 374
Web Research 375
Focus on Web Design 375
Web Site Case Study 375
Chapter 9
Forms 383
9.1 Overview of Forms 384
Form Element 385
Form Controls 386
9.2 Input Element Form Controls 386
Text Box 386
Submit Button 387
Reset Button 387
Check Box 389
Radio Button 390
Hidden Input Control 391
Password Box 392
9.3 Scrolling Text Box 392
Textarea Element 392
9.4 Select List 395
Select Element 395
Option Element 396
9.5 Image Buttons and the Button
Element 397
Image Button 397
Button Element 397
9.6 Accessibility and Forms 398
Label Element 398
Fieldset and Legend Elements 400
The tabindex Attribute 402
The accesskey Attribute 402
9.7 Style a Form with CSS 403
9.8 Server-Side Processing 404
Privacy and Forms 407
Server-Side Processing
Resources 407
9.9 HTML5 Form Controls 408
E-mail Address Input 408
URL Input 409
Telephone Number Input 409
Search Field Input 410
Datalist Form Control 410
Slider Form Control 411
Spinner Form Control 412
Calendar Form Control 413
Color-well Form Control 414
HTML5 and Progressive
Enhancement 417
Chapter Summary 418
Key Terms 418
Review Questions 418
Apply Your Knowledge 419
Hands-On Exercises 421
Web Research 422
Focus on Web Design 423
Website Case Study 424
Chapter 10
Web Development 435
10.1 Successful Large-Scale Project
Development 436
Project Job Roles 436
Project Staffing Criteria 437
10.2 The Development Process 437
Conceptualization 439
Analysis 440
Design 440
Production 442
Testing 442
Launch 445
Maintenance 446
Evaluation 446
10.3 Domain Name Overview 446
Choosing a Domain Name 446
Registering a Domain Name 447
10.4 Web Hosting 448
Web Hosting Providers 448
10.5 Choosing a Virtual Host 449
Chapter Summary 452
Key Terms 452
Review Questions 452
Hands-On Exercises 453
Web Research 455
Focus on Web Design 455
Website Case Study 456
Chapter 11
Web Multimedia and Interactivity 457
11.1 Plug-Ins, Containers, and Codecs 458
11.2 Getting Started with Audio and
Video 460
Provide a Hyperlink 460
Working with Multimedia on the Web 461
11.3 Adobe Flash 463
HTML5 Embed Element 463
Flash Resources 465
11.4 HTML5 Audio and Video Elements 466
Audio Element 466
Source Element 467
HTML5 Audio on a Web Page 467
Video Element 469
Source Element 469
HTML5 Video on a Web Page 470
11.5 Multimedia Files and Copyright Law 471
11.6 CSS3 and Interactivity 472
CSS Image Gallery 472
CSS3 Transform Property 474
CSS3 Rotate Transform 475
CSS Transition Property 476
Practice with Transitions 478
11.7 Java 480
Adding a Java Applet to a Web Page 481
Java Applet Resources 482
11.8 JavaScript 483
JavaScript Resources 485
11.9 Ajax 485
Ajax Resources 486
11.10 jQuery 486
jQuery Resources 487
11.11 HTML5 APIs 487
Geolocation 487
Web Storage 487
Offline Web Applications 488
Drawing with the Canvas Element 488
11.12 Accessibility and Multimedia/
Interactivity 490
Chapter Summary 492
Key Terms 492
Review Questions 492
Apply Your Knowledge 493
Hands-On Exercises 495
Web Research 495
Focus on Web Design 496
Website Case Study 496
Chapter 12
E-Commerce Overview 503
12.1 What Is E-Commerce? 504
Advantages of E-Commerce 504
Risks of E-Commerce 505
12.2 E-Commerce Business Models 506
12.3 Electronic Data Interchange (EDI) 506
12.4 E-Commerce Statistics 506
12.5 E-Commerce Issues 507
12.6 E-Commerce Security 509
Encryption 509
Integrity 510
Secure Sockets Layer (SSL) 510
Digital Certificate 511
SSL and Digital Certificates 512
12.7 Order and Payment Processing 512
Cash Model 513
Credit Model 513
Smart Card Model 513
Mobile Payment Model 513
12.8 E-Commerce Storefront Solutions 514
Instant Online Storefront 514
Off-the-Shelf Shopping Cart Software 514
Custom-Built Solutions 515
Semi-Custom-Built Solutions on a Budget 515
Chapter Summary 516
Key Terms 516
Review Questions 516
Hands-On Exercises 517
Web Research 518
Focus on Web Design 519
Website Case Study 519
Chapter 13
Web Promotion 533
13.1 Search Engine Overview 534
13.2 Popular Search Engines 534
13.3 Components of a Search Engine 534
Robot 535
Database 535
Search Form 535
13.4 Search Engine Optimization 536
Keywords 536
Page Titles 536
Heading Tags 536
Description 536
Description Meta Tag 536
Linking 537
Images and Multimedia 537
Valid Code 537
Content of Value 537
13.5 Listing in a Search Engine 538
Map Your Site 539
Alliances 540
13.6 Monitoring Search Listings 540
13.7 Link Popularity 542
13.8 Social Media Optimization 542
Blogs and RSS Feeds 543
Social Networking 543
13.9 Other Site Promotion Activities 543
Quick Response (QR) Codes 543
Affiliate Programs 544
Banner Ads 544
Banner Exchange 545
Reciprocal Link Agreements 545
Newsletters 545
Sticky Site Features 545
Personal Recommendations 545
Newsgroup and Listserv Postings 546
Traditional Media Ads and Existing Marketing
Materials 546
13.10 Serving Dynamic Content with Inline
Frames 546
The iframe Element 547
YouTube Video in an Inline Frame 548
Chapter Summary 550
Key Terms 550
Review Questions 550
Hands-On Exercises 551
Web Research 552
Focus on Web Design 552
Website Case Study 553
Chapter 14
A Brief Look at JavaScript and
jQuery 557
14.1 Overview of JavaScript 558
14.2 The Development of JavaScript 558
14.3 Popular Uses for JavaScript 559
Alert Message 559
Popup Windows 559
Jump Menus 560
Mouse Movement Techniques 560
14.4 Adding JavaScript to a Web Page 561
Script Element 561
Legacy JavaScript Statement Block
Template 561
Alert Message Box 562
14.5 Document Object Model Overview 564
14.6 Events and Event Handlers 567
14.7 Variables 570
Writing a Variable to a Web Page 570
Collecting Variable Values Using a Prompt 572
14.8 Introduction to Programming
Concepts 574
Arithmetic Operators 574
Decision Making 574
Functions 577
14.9 Form Handling 580
14.10 Accessibility and JavaScript 586
14.11 JavaScript Resources 587
14.12 Overview of jQuery 587
14.13 Adding jQuery to a Web Page 587
Download jQuery 587
Access jQuery via a Content Delivery
Network 588
The Ready Event 588
14.14 jQuery Selectors 590
14.15 jQuery Methods 590
14.16 jQuery Image Gallery 593
14.17 jQuery Plugins 597
14.18 jQuery Resources 601
Chapter Summary 602
Key Terms 602
Review Questions 602
Apply Your Knowledge 603
Hands-On Exercises 605
Web Research 606
WebSite Case Study 606
Appendix A: HTML5 Quick Reference 619
Appendix B: XHTML Quick Reference 623
Appendix C: Special Entity Characters 627
Appendix D: Comparison of XHTML and
HTML5 629
Appendix E: CSS Property Reference 637
Appendix F: WCAG 2.0 Quick Reference 643
Appendix G: FTP Tutorial 645
Appendix H: Web-Safe Color Palette 649
Answers 651
Index 000
Credits 000
What is included with this book?
The New copy of this book will include any supplemental materials advertised. Please check the title of the book to determine if it should include any access cards, study guides, lab manuals, CDs, etc.
The Used, Rental and eBook copies of this book are not guaranteed to include any supplemental materials. Typically, only the book itself is included. This is true even if the title states it includes any access cards, study guides, lab manuals, CDs, etc.
Please wait while the item is added to your bag...
