Web Development and Design Foundations with XHTML

Terry Felke-Morris is¿working¿on¿her¿Ed.D.¿at¿Northcentral¿University and is an associate professor at William Rainey Harper College, where she helped to develop the Web Developer certificate and degree programs. She holds a Master of Science degree in Information Systems and various certifications, including Microsoft Certified Professional and Master CIW Designer. A former information systems analyst and software developer, Terry began prototyoping Web applications as early as 1996. She's been teaching Web Development courses at Harper College since 1999 and led the creation of one of the first community college Web Development Certificate and Associate of Applied Science programs in the State of Illinois. Harper College was also one of the first institutions of higher education in Illinois to offer a certificate focusing on Web accessibility, the Accessible Web Design & Compliance Certificate. Terry is a member of The Web Standards Project (WasP) Education Task Force Curriculum Project, which is an effort to engage web design and education professionals in collaboration to develop a curriculum framework for web professionals. The Web Development & Design Foundations with XHTML textbook has been designated as a recommended reference book for the curriculum. An innovative educator and instructional designer, Terry has been honored with three international awards, the Instructional Technology Council's 2008 Outstanding e-Learning Faculty Award for Excellence, the 2008 MERLOT Award for Exemplary Online Learning Resources — MERLOT Business Classics, and the 2006 Blackboard Greenhouse Exemplary Course (Online Category).

CHAPTER 1 Introduction to the Internet and World Wide Web 1
1.1 Evolution of the Internet 2
1.2 Internet, Intranets, and Extranets 3
The Evolution of the World Wide Web 3
1.3 Standards and Coordination 4
1.4 Standards and the World Wide Web Consortium 4
Accessibility and the Web 5
Ethical Use of Information on the Web 6
1.5 Network Overview 7
1.6 The Client/Server Model 9
1.7 Internet Protocols 10
File Transfer Protocol (FTP) 10
E-mail Protocols 10
Hypertext Transfer Protocol (HTTP) 10
Transmission Control Protocol/Internet Protocol (TCP/IP) 10
1.8URIs, URLs, and Domain Names 12
URIs and URLs 12
Domain Names 13
1.9Markup Languages 14
Standard Generalized Markup Language (SGML) 15
Hypertext Markup Language (HTML) 15
Extensible Markup Language (XML) 15
Extensible Hypertext Markup Language (XHTML) 15
HTML 5–The Next Version of (X)HTML 15
1.10 Internet and Web Trends 16
Chapter Summary 19
Key Terms 19
Review Questions 19
Hands-On Exercise 20
Web Research 21
Focus on Web Design 21


CHAPTER 2 XHTML Basics 23
2.1 What Is HTML? 24
2.2 Why XHTMLand Not HTML? 24
2.3 Document Type Definition 25
2.4 Your First Web Page 26
2.5 XHTML–Body and Text Basics 31
The Body Element 31
The Heading Element 31
Accessibility and Headings 32
The Paragraph Element 32
The Line Break Element 34
The Blockquote Element 36
2.6 XHTML–List Basics 37
Definition Lists 37
Ordered Lists 39
Unordered Lists 40
2.7 XHTML–Text Formatting 43
XHTML Logical Style Elements 43
XHTML–Physical Style Elements 44
Special XHTML Characters 45
2.8 XHTML–Hyperlinks 47
The Anchor Element 47
Absolute and Relative Links 48
E-Mail Links 51
Accessibility and Links 52
2.9 XHTMLValidation 53
Chapter Summary 56
Key Terms 56
Review Questions 56
Apply Your Knowledge 57
Hands-On Exercises 59
Web Research 60
Focus on Web Design 60
Web Site Case Study 60


CHAPTER 3 Configuring Color and Text with CSS 75
3.1 Overview of Cascading Style Sheets 76
Advantages of Cascading Style Sheets 76
Types of Cascading Style Sheets 76
Introduction to CSS Syntax 77
3.2 Using Color on Web Pages 78
Web Color Palette 79
Making Color Choices 80
Accessibility and Color 80
3.3 Configuring Color with Inline CSS 81
The Style Attribute 81
3.4 Configuring Color with Embedded Styles 82
The Style Element 83
3.5 Configuring Text with CSS 86
CSS and Fonts 86
3.6 The Classand IdSelectors 90
The ClassSelector 90
The IdSelector 91
3.7 The Divand SpanXHTMLElements 93
3.8 Using External Style Sheets 95
3.9 Centering XHTMLElements with CSS 99
Center the Page Content 100
3.10 CSS Validation 101
Chapter Summary 104
Key Terms 104
Review Questions 104
Apply Your Knowledge 105
Hands-On Exercises 107
Web Research 109
Focus on Web Design 110
Web Site Case Study: Implementing CSS 111


CHAPTER 4 Visual Elements and Graphics 121
4.1 Configuring Lines and Borders 122
The Horizontal Rule Element 122
The borderand padding
Properties 122
4.2 Types of Graphics 127
GIF Images 128
JPEG Images 130
PNG Images 132
4.3 Using Graphics 132
The Image Element 132
Accessibility and Images 133
Image Links 136
Background Images 138
Configuring Background Images with CSS 140
4.4 XHTML Images and More 142
Image Maps 142
Thumbnail Images 145
The Favorities Icon 145
Advanced Techniques: Image
Slicing 146
4.5 Sources and Guidelines for Graphics 146
Sources of Graphics 146
Guidelines for Using Images 147
Accessibility and Visual Elements 148
Chapter Summary 150
Key Terms 150
Review Questions 150
Apply Your Knowledge 151
Hands-On Exercises 153
Web Research 155
Focus on Web Design 155
Web Site Case Study: Using Graphics 155


CHAPTER 5 Web Design 169
5.1 Web Site Organization 170
Hierarchical Organization 171
Linear Organization 174
Random Organization 174
5.2 Web Site Navigation–Best Practices 175
Ease of Navigation 175
Navigation Bars 175
Short Pages 178
Table of Contents 178
Site Map and Site Search Features 179
5.3 Design Principles 180
Repetition: Repeat Visual Elements throughout Design 180
Contrast: Add Visual Excitement and Draw Attention 181
Proximity: Group-Related Items 181
Alignment: Align Elements to Create
Visual Unity 181
5.4 Web Page Design–Best Practices 181
Load Time 182
Perceived Load Time 183
Above the Fold 183
Web Page “Real Estate” 183
Horizontal Scrolling 184
Adequate White Space 184
Target Audience 184
Browser-Friendly 186
Screen Resolution 187
Wireframes and Page Layout 187
5.5 Page Layout Design Techniques 189
Ice Design 189
Jello Design 190
Liquid Design 190
5.6 Text Design–Best Practices 192
5.7 Graphic Design–Best Practices 193
5.8 Design to Provide Accessibility 197
WCAG 2.0 Quick Reference List 198
5.9 Best Practices Checklist 199
Chapter Summary 203
Key Terms 203
Review Questions 203
Hands-On Exercises 204
Web Research 208
Focus on Web Design 208
Web Site Case Study: Web Design
Best Practices 209


CHAPTER 6 Page Layout with CSS 213
6.1 CSS Page Layout Overview 214
Advantages of Using CSS for Page Layout 216
Disadvantages of Using CSS for Page Layout 217
6.2 The Box Model 217
6.3 CSS Positioning Properties 220
Relative and Absolute
Positioning 220
The floatProperty 224
The clearProperty 226
The overflowProperty 227
The displayProperty 229
The z-indexProperty 229
6.4 Exploring CSS Page Layout 236
6.5 Two-Column Page Layout 240
6.6 CSS Debugging Tips 246
CSS Debugging Techniques 246
6.7 CSS Page Layout Resources 247
Chapter Summary 249
Key Terms 249
Review Questions 249
Apply Your Knowledge 250
Hands-On Exercises 253
Web Research 255
Focus on Web Design 255
Web Site Case Study: Implementing CSS
Two-Column Page Layout 255

CHAPTER 7 More on Links, Lists, and Layout 271
7.1 Another Look at XHTML Hyperlinks 272
More on Relative Linking 272
Relative Link Examples 272
Opening a Link in a New Browser
Window 273
Linking to Fragment Identifiers 273
7.2 CSS Pseudo-Classes and Links 276
7.3 CSS Navigation Layout Using Lists 281
7.4 Three-Column CSS Page Layout 283
7.5 CSS Styling for Print 291
7.6 CSS Styling for the Mobile Web 294
7.7 The “Cascade” 297
Chapter Summary 301
Key Terms 301
Review Questions 301
Apply Your Knowledge 302
Hands-On Exercises 305
Web Research 306
Focus On Web Design 307
Web Site Case Study: Navigation Links in a List 307


CHAPTER 8 Tables 311
8.1 Using Tables on Web Pages 312
Overview of an XHTML Table 312
XHTML Table Headings 313
XHTML Table Captions 313
XHTML Table Attributes 315
Applying Attributes to Rows and Cells 318
Accessibility and Tables 322
XHTML Table Row Groups 324
8.2 XHTML–Table Page Layout 325
Accessibility and Layout Tables 326
More Sample Page Layout Tables 327
Flexible and Fixed Table Widths 328
Nested Tables 331
8.3 Using CSS to Style a Table 333
Chapter Summary 339
Key Terms 339
Review Questions 339
Apply Your Knowledge 340
Hands-On Exercises 342
Web Research 343
Focus on Web Design 344
Web Site Case Study: Using Tables 344


CHAPTER 9 XHTML Forms 351
9.1 Overview of Forms 352
9.2 XHTML–Using Forms 353
The Form Element 355
Form Controls 357
9.3 Form Enhancements 369
The Label Element 369
The Fieldset and Legend Elements 370
The tabindexAttribute 371
The accesskeyAttribute 371
Accessibility and Forms 371
Image Buttons and the Button
Element 373
9.4 Using CSS to Style a Form 374
Styling Forms with Tables and CSS 375
Styling Forms with Only CSS 376
9.5 Server-Side Processing 378
Steps in Utilizing Server-Side
Processing 379
Privacy and Forms 381
Server-Side Processing Resources 382
Exploring Server-Side Processing
Technologies 382
Chapter Summary 384
Key Terms 384
Review Questions 384
Apply Your Knowledge 386
Hands-On Exercises 387
Web Research 389
Focus on Web Design 390
Web Site Case Study: Adding a Form390

CHAPTER 10 Web Site Development 399
10.1 Successful Large-Scale Project
Development 400
Project Manager 400
Information Architect 400
Marketing Representative 400
Copywriter and Editor 400
Content Manager 400
Graphic Designer 401
Database Administrator 401
Network Administrator 401
Web Developer 401
Project Staffing Criteria 401
10.2 The Development Process 401
Conceptualization 403
Analysis 404
Design 404
Production 406
Testing 406
Launch 409
Maintenance 409
Evaluation 409
10.3 Domain Name Overview 409
Choosing a Domain Name 410
Registering a Domain Name 411
10.4 Web Hosting 411
Web Host Providers 411
Hosting Needs 412
10.5 Choosing a Virtual Host 413
Chapter Summary 416
Key Terms 416
Review Questions 416
Hands-On Exercises 417
Web Research 420
Focus on Web Design 421
Web Site Case Study: Testing Phase 421


CHAPTER 11 Web Multimedia and Interactivity 423
11.1 Helper Applications and Plug-Ins 424
11.2 Multimedia File Types 425
Obtaining Multimedia Files 426
11.3 Using Sound on a Web Page 427
The Object Element 428
11.4 Podcasting Overview 432
11.5 Using Video on a Web Page 433
The Object Element 433
Internet Explorer Only Option 436
11.6 Browser Compatibility and Accessibility 436
11.7 Copyright Issues and Media Files 436
11.8 Adobe Flash 437
Common Uses of Flash 438
Web Design and Flash 439
Adding a Flash Animation to a
Web Page 440
Flash Resources 443
11.9 Java 443
Common Uses of Java Applets 444
Adding a Java Applet to a Web Page 446
Free Java Applet Resources 449
11.10 JavaScript 449
Common Uses of JavaScript 450
Free JavaScript Resources 451
11.11 Dynamic HTML (DHTML) 451
Common Uses of DHTML 452
Sources of Free DHTML 452
11.12 Ajax 453
Common Uses of Ajax 454
Ajax Resources 455
11.13 Accessibility and Multimedia/Interactivity 455
Chapter Summary 457
Key Terms 457
Review Questions 457
Apply Your Knowledge 458
Hands-On Exercises 460
Web Research 461
Focus on Web Design 462
Web Site Case Study: Adding Multimedia 462


CHAPTER 12 E-Commerce Overview 469
12.1 What Is E-Commerce? 470
Advantages of E-Commerce 470
Risks of E-Commerce 471
12.2 E-Commerce Business Models 472
12.3 Electronic Data Interchange (EDI) 472
12.4 E-Commerce Statistics 473
12.5 E-Commerce Issues 474
12.6 E-Commerce Security 475
Encryption 475
Integrity 476
Secure Sockets Layer (SSL) 477
Digital Certificate 478
SSL and Digital Certificates 479
12.7 Order and Payment Processing 480
Cash Model 480
Check Model 480
Credit Model 480
Smart Card 481
12.8 E-Commerce Storefront Solutions 482
Instant Online Storefront 482
Off-the-Shelf Shopping Cart Software 483
Custom-Built Solution 483
Semi-Custom-Built Solutions on a
Budget 483
Chapter Summary 485
Key Terms 485
Review Questions 485
Hands-On Exercise 486
Web Research 488
Focus on Web Design 489
Web Site Case Study: Adding a Catalog Page for an Online Store 489


CHAPTER 13 Web Promotion 503
13.1 Search Engine Overview 504
13.2 Popular Search Engines 504
13.3 Components of a Search Engine 505
Robot 505
Database 505
Search Form 505
13.4 Designing Your Pages for Promotion 506
Keywords 506
Page Titles 506
Heading Tags 506
Description 507
Meta Tags 507
Linking 508
Page Layout 508
Images and Multimedia 508
Valid Code 508
Content of Value 508
13.5 Listing in a Search Engine and Search
Index 509
Preferential Placement 509
Map Your Site 511
Alliances 512
13.6 Monitoring Search Listings 512
13.7 Link Popularity 514
13.8 Social Media Optimization 515
Social Bookmarking 515
Blogs and RSS Feeds 515
Social Networking 515
13.9 Other Site Promotion Activities 516
Affiliate Programs 516
Banner Ads 516
Banner Exchange 517
Reciprocal Link Agreements 517
Newsletters 518
Sticky Site Features 518
Personal Recommendations 518
Web Rings 519
Newsgroup and Listserv Postings 519
Traditional Media Ads and Existing Marketing Materials 519
13.10 Serving Dynamic Content with Inline Frames 519
Chapter Summary 524
Key Terms 524
Review Questions 524
Hands-On Exercises 525
Web Research 526
Focus on Web Design 527
Web Site Case Study: Meta Tags to Promote Web Sites 527


CHAPTER 14 A Brief Look at JavaScript 531
14.1 Overview of JavaScript 532
14.2 The Development of JavaScript 532
14.3 Popular Uses for JavaScript 533
Alert Message 533
Popup Windows 533
Browser Sniffing 534
Jump Menus 534
Mouse Movement Techniques 535
14.4 Adding JavaScript to a Web Page 536
The Script Element 536
JavaScript Statement Block Template 536
Practice with Debugging 539
14.5 Document Object Model Overview 540
14.6 Events and Event Handlers 542
14.7 Variables 546
Writing a Variable to a Web Page 546
Collecting Variable Values Using a Prompt 548
14.8 Introduction to Programming
Concepts 550
Arithmetic Operators 550
Decision Making 551
Functions 554
14.9 Form Handling 557
14.10 Accessibility and JavaScript 563
14.11 JavaScript Resources 564
Chapter Summary 565
Key Terms 565
Review Questions 565
Apply Your Knowledge 567
Hands-On Exercises 568
Web Research 569
Web Site Case Study: Adding JavaScript 569


Web Developer’s Handbook Appendixes 575
A. XHTMLReference 577
B. Special Characters 607
C. CSS Property Reference 611
D. Comparison of HTML4, XHTML, and HTML5 621
E. Section 508 Standards 633
Answers 635
Index 655