Web Development and Design

Table of Contents

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 http://www.dropshippers.co.za/

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 http://www.dropshippers.co.za/

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 http://www.dropshippers.co.za/

E-mail Protocols 10

Hypertext Transfer Protocol (HTTP) 10 http://www.dropshippers.co.za/

Transmission Control Protocol/Internet Protocol (TCP/IP) 10 1.8URIs, URLs, and Domain Names 12

URIs and URLs 12 http://www.dropshippers.co.za/

Domain Names 13 1.9Markup Languages 14

Standard Generalized Markup Language (SGML) 15 http://www.dropshippers.co.za/

Hypertext Markup Language (HTML) 15

Extensible Markup Language (XML) 15 http://www.dropshippers.co.za/

Extensible Hypertext Markup Language (XHTML) 15

HTML 5–The Next Version of (X)HTML 15 1.10 Internet and Web Trends 16 http://www.dropshippers.co.za/

Chapter Summary 19

Key Terms 19 http://www.dropshippers.co.za/

Review Questions 19

Hands-On Exercise 20 http://www.dropshippers.co.za/

Web Research 21

Focus on Web Design 21 http://www.dropshippers.co.za/

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 http://www.dropshippers.co.za/

The Body Element 31

The Heading Element 31 http://www.dropshippers.co.za/

Accessibility and Headings 32

The Paragraph Element 32 http://www.dropshippers.co.za/

The Line Break Element 34

The Blockquote Element 36 2.6 XHTML–List Basics 37 http://www.dropshippers.co.za/

Definition Lists 37

Ordered Lists 39 http://www.dropshippers.co.za/

Unordered Lists 40 2.7 XHTML–Text Formatting 43

XHTML Logical Style Elements 43 http://www.dropshippers.co.za/

XHTML–Physical Style Elements 44

Special XHTML Characters 45 2.8 XHTML–Hyperlinks 47 http://www.dropshippers.co.za/

The Anchor Element 47

Absolute and Relative Links 48 http://www.dropshippers.co.za/

E-Mail Links 51

Accessibility and Links 52 2.9 XHTMLValidation 53 http://www.dropshippers.co.za/

Chapter Summary 56

Key Terms 56 http://www.dropshippers.co.za/

Review Questions 56

Apply Your Knowledge 57 http://www.dropshippers.co.za/

Hands-On Exercises 59

Web Research 60 http://www.dropshippers.co.za/

Focus on Web Design 60

Web Site Case Study 60 http://www.dropshippers.co.za/

CHAPTER 3 Configuring Color and Text with CSS 75

3.1 Overview of Cascading Style Sheets 76 http://www.dropshippers.co.za/

Advantages of Cascading Style Sheets 76

Types of Cascading Style Sheets 76 http://www.dropshippers.co.za/

Introduction to CSS Syntax 77 3.2 Using Color on Web Pages 78

Web Color Palette 79 http://www.dropshippers.co.za/

Making Color Choices 80

Accessibility and Color 80 3.3 Configuring Color with Inline CSS 81 http://www.dropshippers.co.za/

The Style Attribute 81 3.4 Configuring Color with Embedded Styles 82

The Style Element 83 3.5 Configuring Text with CSS 86 http://www.dropshippers.co.za/

CSS and Fonts 86 3.6 The Classand IdSelectors 90

The ClassSelector 90 http://www.dropshippers.co.za/

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 http://www.dropshippers.co.za/

Chapter Summary 104

Key Terms 104 http://www.dropshippers.co.za/

Review Questions 104

Apply Your Knowledge 105 http://www.dropshippers.co.za/

Hands-On Exercises 107

Web Research 109 http://www.dropshippers.co.za/

Focus on Web Design 110

Web Site Case Study: Implementing CSS 111 http://www.dropshippers.co.za/

CHAPTER 4 Visual Elements and Graphics 121

4.1 Configuring Lines and Borders 122 http://www.dropshippers.co.za/

The Horizontal Rule Element 122

The borderand padding http://www.dropshippers.co.za/

Properties 122 4.2 Types of Graphics 127

GIF Images 128 http://www.dropshippers.co.za/

JPEG Images 130

PNG Images 132 4.3 Using Graphics 132 http://www.dropshippers.co.za/

The Image Element 132

Accessibility and Images 133 http://www.dropshippers.co.za/

Image Links 136

Background Images 138 http://www.dropshippers.co.za/

Configuring Background Images with CSS 140 4.4 XHTML Images and More 142

Image Maps 142 http://www.dropshippers.co.za/

Thumbnail Images 145

The Favorities Icon 145 http://www.dropshippers.co.za/

Advanced Techniques: Image

Slicing 146 4.5 Sources and Guidelines for Graphics 146 http://www.dropshippers.co.za/

Sources of Graphics 146

Guidelines for Using Images 147 http://www.dropshippers.co.za/

Accessibility and Visual Elements 148

Chapter Summary 150 http://www.dropshippers.co.za/

Key Terms 150

Review Questions 150 http://www.dropshippers.co.za/

Apply Your Knowledge 151

Hands-On Exercises 153 http://www.dropshippers.co.za/

Web Research 155

Focus on Web Design 155 http://www.dropshippers.co.za/

Web Site Case Study: Using Graphics 155

CHAPTER 5 Web Design 169

5.1 Web Site Organization 170 http://www.dropshippers.co.za/

Hierarchical Organization 171

Linear Organization 174 http://www.dropshippers.co.za/

Random Organization 174 5.2 Web Site Navigation–Best Practices 175

Ease of Navigation 175 http://www.dropshippers.co.za/

Navigation Bars 175

Short Pages 178 http://www.dropshippers.co.za/

Table of Contents 178

Site Map and Site Search Features 179 5.3 Design Principles 180 http://www.dropshippers.co.za/

Repetition: Repeat Visual Elements throughout Design 180

Contrast: Add Visual Excitement and Draw Attention 181 http://www.dropshippers.co.za/

Proximity: Group-Related Items 181

Alignment: Align Elements to Create http://www.dropshippers.co.za/

Visual Unity 181 5.4 Web Page Design–Best Practices 181

Load Time 182 http://www.dropshippers.co.za/

Perceived Load Time 183

Above the Fold 183 http://www.dropshippers.co.za/

Web Page “Real Estate” 183

Horizontal Scrolling 184 http://www.dropshippers.co.za/

Adequate White Space 184

Target Audience 184 http://www.dropshippers.co.za/

Browser-Friendly 186

Screen Resolution 187 http://www.dropshippers.co.za/

Wireframes and Page Layout 187 5.5 Page Layout Design Techniques 189

Ice Design 189 http://www.dropshippers.co.za/

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 http://www.dropshippers.co.za/

WCAG 2.0 Quick Reference List 198 5.9 Best Practices Checklist 199

Chapter Summary 203 http://www.dropshippers.co.za/

Key Terms 203

Review Questions 203 http://www.dropshippers.co.za/

Hands-On Exercises 204

Web Research 208 http://www.dropshippers.co.za/

Focus on Web Design 208

Web Site Case Study: Web Design http://www.dropshippers.co.za/

Best Practices 209

CHAPTER 6 Page Layout with CSS 213

6.1 CSS Page Layout Overview 214 http://www.dropshippers.co.za/

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 http://www.dropshippers.co.za/

Relative and Absolute

Positioning 220 http://www.dropshippers.co.za/

The floatProperty 224

The clearProperty 226 http://www.dropshippers.co.za/

The overflowProperty 227

The displayProperty 229 http://www.dropshippers.co.za/

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 http://www.dropshippers.co.za/

Chapter Summary 249

Key Terms 249 http://www.dropshippers.co.za/

Review Questions 249

Apply Your Knowledge 250 http://www.dropshippers.co.za/

Hands-On Exercises 253

Web Research 255 http://www.dropshippers.co.za/

Focus on Web Design 255

Web Site Case Study: Implementing CSS http://www.dropshippers.co.za/

Two-Column Page Layout 255

CHAPTER 7 More on Links, Lists, and Layout 271

7.1 Another Look at XHTML Hyperlinks 272 http://www.dropshippers.co.za/

More on Relative Linking 272

Relative Link Examples 272 http://www.dropshippers.co.za/

Opening a Link in a New Browser

Window 273 http://www.dropshippers.co.za/

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 http://www.dropshippers.co.za/

Key Terms 301

Review Questions 301 http://www.dropshippers.co.za/

Apply Your Knowledge 302

Hands-On Exercises 305 http://www.dropshippers.co.za/

Web Research 306

Focus On Web Design 307 http://www.dropshippers.co.za/

Web Site Case Study: Navigation Links in a List 307

CHAPTER 8 Tables 311

8.1 Using Tables on Web Pages 312 http://www.dropshippers.co.za/

Overview of an XHTML Table 312

XHTML Table Headings 313 http://www.dropshippers.co.za/

XHTML Table Captions 313

XHTML Table Attributes 315 http://www.dropshippers.co.za/

Applying Attributes to Rows and Cells 318

Accessibility and Tables 322 http://www.dropshippers.co.za/

XHTML Table Row Groups 324 8.2 XHTML–Table Page Layout 325

Accessibility and Layout Tables 326 http://www.dropshippers.co.za/

More Sample Page Layout Tables 327

Flexible and Fixed Table Widths 328 http://www.dropshippers.co.za/

Nested Tables 331 8.3 Using CSS to Style a Table 333

Chapter Summary 339 http://www.dropshippers.co.za/

Key Terms 339

Review Questions 339 http://www.dropshippers.co.za/

Apply Your Knowledge 340

Hands-On Exercises 342 http://www.dropshippers.co.za/

Web Research 343

Focus on Web Design 344 http://www.dropshippers.co.za/

Web Site Case Study: Using Tables 344

CHAPTER 9 XHTML Forms 351

9.1 Overview of Forms 352 9.2 XHTML–Using Forms 353 http://www.dropshippers.co.za/

The Form Element 355

Form Controls 357 9.3 Form Enhancements 369 http://www.dropshippers.co.za/

The Label Element 369

The Fieldset and Legend Elements 370 http://www.dropshippers.co.za/

The tabindexAttribute 371

The accesskeyAttribute 371 http://www.dropshippers.co.za/

Accessibility and Forms 371

Image Buttons and the Button http://www.dropshippers.co.za/

Element 373 9.4 Using CSS to Style a Form 374

Styling Forms with Tables and CSS 375 http://www.dropshippers.co.za/

Styling Forms with Only CSS 376 9.5 Server-Side Processing 378

Steps in Utilizing Server-Side http://www.dropshippers.co.za/

Processing 379

Privacy and Forms 381 http://www.dropshippers.co.za/

Server-Side Processing Resources 382

Exploring Server-Side Processing http://www.dropshippers.co.za/

Technologies 382

Chapter Summary 384 http://www.dropshippers.co.za/

Key Terms 384

Review Questions 384 http://www.dropshippers.co.za/

Apply Your Knowledge 386

Hands-On Exercises 387 http://www.dropshippers.co.za/

Web Research 389

Focus on Web Design 390 http://www.dropshippers.co.za/

Web Site Case Study: Adding a Form390

CHAPTER 10 Web Site Development 399

10.1 Successful Large-Scale Project http://www.dropshippers.co.za/

Development 400

Project Manager 400 http://www.dropshippers.co.za/

Information Architect 400

Marketing Representative 400 http://www.dropshippers.co.za/

Copywriter and Editor 400

Content Manager 400 http://www.dropshippers.co.za/

Graphic Designer 401

Database Administrator 401 http://www.dropshippers.co.za/

Network Administrator 401

Web Developer 401 http://www.dropshippers.co.za/

Project Staffing Criteria 401 10.2 The Development Process 401

Conceptualization 403 http://www.dropshippers.co.za/

Analysis 404

Design 404 http://www.dropshippers.co.za/

Production 406

Testing 406 http://www.dropshippers.co.za/

Launch 409

Maintenance 409 http://www.dropshippers.co.za/

Evaluation 409 10.3 Domain Name Overview 409

Choosing a Domain Name 410 http://www.dropshippers.co.za/

Registering a Domain Name 411 10.4 Web Hosting 411

Web Host Providers 411 http://www.dropshippers.co.za/

Hosting Needs 412 10.5 Choosing a Virtual Host 413

Chapter Summary 416 http://www.dropshippers.co.za/

Key Terms 416

Review Questions 416 http://www.dropshippers.co.za/

Hands-On Exercises 417

Web Research 420 http://www.dropshippers.co.za/

Focus on Web Design 421

Web Site Case Study: Testing Phase 421 http://www.dropshippers.co.za/

CHAPTER 11 Web Multimedia and Interactivity 423

11.1 Helper Applications and Plug-Ins 424 11.2 Multimedia File Types 425 http://www.dropshippers.co.za/

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 http://www.dropshippers.co.za/

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 http://www.dropshippers.co.za/

Common Uses of Flash 438

Web Design and Flash 439 http://www.dropshippers.co.za/

Adding a Flash Animation to a

Web Page 440 http://www.dropshippers.co.za/

Flash Resources 443 11.9 Java 443

Common Uses of Java Applets 444 http://www.dropshippers.co.za/

Adding a Java Applet to a Web Page 446

Free Java Applet Resources 449 11.10 JavaScript 449 http://www.dropshippers.co.za/

Common Uses of JavaScript 450

Free JavaScript Resources 451 11.11 Dynamic HTML (DHTML) 451 http://www.dropshippers.co.za/

Common Uses of DHTML 452

Sources of Free DHTML 452 11.12 Ajax 453 http://www.dropshippers.co.za/

Common Uses of Ajax 454

Ajax Resources 455 11.13 Accessibility and Multimedia/Interactivity 455 http://www.dropshippers.co.za/

Chapter Summary 457

Key Terms 457 http://www.dropshippers.co.za/

Review Questions 457

Apply Your Knowledge 458 http://www.dropshippers.co.za/

Hands-On Exercises 460

Web Research 461 http://www.dropshippers.co.za/

Focus on Web Design 462

Web Site Case Study: Adding Multimedia 462 http://www.dropshippers.co.za/

CHAPTER 12 E-Commerce Overview 469

12.1 What Is E-Commerce? 470 http://www.dropshippers.co.za/

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 http://www.dropshippers.co.za/

Encryption 475

Integrity 476 http://www.dropshippers.co.za/

Secure Sockets Layer (SSL) 477

Digital Certificate 478 http://www.dropshippers.co.za/

SSL and Digital Certificates 479 12.7 Order and Payment Processing 480

Cash Model 480 http://www.dropshippers.co.za/

Check Model 480

Credit Model 480 http://www.dropshippers.co.za/

Smart Card 481 12.8 E-Commerce Storefront Solutions 482

Instant Online Storefront 482 http://www.dropshippers.co.za/

Off-the-Shelf Shopping Cart Software 483

Custom-Built Solution 483 http://www.dropshippers.co.za/

Semi-Custom-Built Solutions on a

Budget 483 http://www.dropshippers.co.za/

Chapter Summary 485

Key Terms 485 http://www.dropshippers.co.za/

Review Questions 485

Hands-On Exercise 486 http://www.dropshippers.co.za/

Web Research 488

Focus on Web Design 489 http://www.dropshippers.co.za/

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 http://www.dropshippers.co.za/

Robot 505

Database 505 http://www.dropshippers.co.za/

Search Form 505 13.4 Designing Your Pages for Promotion 506

Keywords 506 http://www.dropshippers.co.za/

Page Titles 506

Heading Tags 506 http://www.dropshippers.co.za/

Description 507

Meta Tags 507 http://www.dropshippers.co.za/

Linking 508

Page Layout 508 http://www.dropshippers.co.za/

Images and Multimedia 508

Valid Code 508 http://www.dropshippers.co.za/

Content of Value 508 13.5 Listing in a Search Engine and Search

Index 509 http://www.dropshippers.co.za/

Preferential Placement 509

Map Your Site 511 http://www.dropshippers.co.za/

Alliances 512 13.6 Monitoring Search Listings 512 13.7 Link Popularity 514 13.8 Social Media Optimization 515

Social Bookmarking 515 http://www.dropshippers.co.za/

Blogs and RSS Feeds 515

Social Networking 515 13.9 Other Site Promotion Activities 516 http://www.dropshippers.co.za/

Affiliate Programs 516

Banner Ads 516 http://www.dropshippers.co.za/

Banner Exchange 517

Reciprocal Link Agreements 517 http://www.dropshippers.co.za/

Newsletters 518

Sticky Site Features 518 http://www.dropshippers.co.za/

Personal Recommendations 518

Web Rings 519 http://www.dropshippers.co.za/

Newsgroup and Listserv Postings 519

Traditional Media Ads and Existing Marketing Materials 519 13.10 Serving Dynamic Content with Inline Frames 519 http://www.dropshippers.co.za/

Chapter Summary 524

Key Terms 524 http://www.dropshippers.co.za/

Review Questions 524

Hands-On Exercises 525 http://www.dropshippers.co.za/

Web Research 526

Focus on Web Design 527 http://www.dropshippers.co.za/

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 http://www.dropshippers.co.za/

Alert Message 533

Popup Windows 533 http://www.dropshippers.co.za/

Browser Sniffing 534

Jump Menus 534 http://www.dropshippers.co.za/

Mouse Movement Techniques 535 14.4 Adding JavaScript to a Web Page 536

The Script Element 536 http://www.dropshippers.co.za/

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 http://www.dropshippers.co.za/

Writing a Variable to a Web Page 546

Collecting Variable Values Using a Prompt 548 14.8 Introduction to Programming http://www.dropshippers.co.za/

Concepts 550

Arithmetic Operators 550 http://www.dropshippers.co.za/

Decision Making 551

Functions 554 14.9 Form Handling 557 14.10 Accessibility and JavaScript 563 14.11 JavaScript Resources 564 http://www.dropshippers.co.za/

Chapter Summary 565

Key Terms 565 http://www.dropshippers.co.za/

Review Questions 565

Apply Your Knowledge 567 http://www.dropshippers.co.za/

Hands-On Exercises 568

Web Research 569 http://www.dropshippers.co.za/

Web Site Case Study: Adding JavaScript 569

Web Developer’s Handbook Appendixes 575

A. XHTMLReference 577

B. Special Characters 607 http://www.dropshippers.co.za/

C. CSS Property Reference 611

D. Comparison of HTML4, XHTML, and HTML5 621 http://www.dropshippers.co.za/

E. Section 508 Standards 633

Answers 635 http://www.dropshippers.co.za/

Index 655