Web Development and Design Foundations with XHTML

Terry Felke-Morris 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. Terry has over fifteen years of industry experience and received the 2006 Blackboard Greenhouse Community of Practice Award for use of Internet technology in the academic environment.

Chapter 1 The Internet and the World Wide Web
1.1 The Evolution of the Internet
1.2 The Internet, Intranets, and Extranets
      The Evolution of the World Wide Web
      Internet Standards and Coordination  
1.3 Web Standards and the World Wide Web Consortium
1.4    Accessibility and the Web      
1.5 Ethical Use of Information on the Web  
Checkpoint 1.1
1.6 Network Overview       
1.7 The Client/Server Model   
1.8 Internet Protocols        
    File Transfer Protocol (FTP)         
    E-mail Protocols       
    Hypertext Transfer Protocol (HTTP)  
     Transmission Control Protocol/
        Internet Protocol (TCP/IP)          
1.9 URLs and Domain Names           
     URLs   
       Domain Names    
1.10 Markup Languages     
    Standard Generalized Markup Language (SGML)    
       Hypertext Markup Language (HTML)          
       Extensible Markup Language (XML)
       Extensible Hypertext Markup Language (XHTML)
Checkpoint 1.2       
1.11 Internet and Web Trends
Key Terms
Review Questions           
Web Research
Web Design Focus

Chapter 2 XHTML Basics  
2.1 What Is HTML?        
2.2 Why XHTML and Not HTML?  
2.3 Document Type Definition               
2.4 Your First Web Page         
    Hands-On Practice 2.1      
Checkpoint 2.1       
2.5 XHTML—Body and Text Basics      
    The Body Element       
       The Heading Element     
       Hands-On Practice 2.2
       Accessibility and Headings      
       The Paragraph Element    
       Hands-On Practice 2.3     
       The Line Break Element   
       Hands-On Practice 2.4
    The Blockquote Element
       Hands-On Practice 2.5     
2.6 XHTML—List Basics   
       Definition Lists      
       Hands-On Practice 2.5
       Ordered Lists        
       Unordered Lists      
       Hands-On Practice 2.6      
Checkpoint 2.2
2.7 XHTML —Text Formatting
       XHTML Logical Style Elements     
       XHTML Physical Style Elements    
       Special XHTML Characters        
       Hands-On Practice 2.7
2.8 XHTML—Hyperlinks   
       The Anchor Element     
       Absolute and Relative Links
E-mail Links       
       Hands-On Practice 2.8
       Accessibility and Links     
2.9 XHTML Validation
       Hands-On Practice 2.9            
Checkpoint 2.3
Key Terms     
Review Questions       
Apply Your Knowledge      
Hands-On Exercises
Web Research
Web Design Focus             
Web Site Case Study     
      JavaJam Coffee House     
       Fish Creek Animal Hospital            
       Pete the Painter          
       Prime Properties             

Chapter 3 Configuring Color & Text with CSS
3.1 Overview of Cascading Style Sheets   
       Advantages of Cascading Style Sheets           
       Types of Cascading Style Sheets    
       Introduction to CSS Syntax
3.2 Using Color on Web Pages          
       Web Color Palette   
       Accessibility and Color
3.3 Configuring Color with Inline CSS
    The Style Attribute
       Hands-On Practice 3.1
3.4 Configuring Color with Embedded CSS
The Style Element
       Hands-On Practice 3.2             
Checkpoint 3.1     
3.5 Configuring Text with CSS           
    CSS and Fonts             
       Hands-On Practice 3.3               
3.6 The Class and Id Selectors
    Hands-On Practice 3.4               
3.7 The Div and Span Elements
      Hands-On Practice 3.5
3.8 Using External Style Sheets     
       Hands-On Practice 3.6
    Hands-On Practice 3.7
Checkpoint 3.2     
3.9 Centering XHTML Elements
    Hands-On Practice 3.8          
3.10 CSS Validation
Hands-On Practice 3.9
Key Terms
Review Questions      
Apply Your Knowledge         
Hands-On Exercises    
Web Research
Web Design Focus         
Web Site Case Study    
    JavaJam Coffee House            
       Fish Creek Animal Hospital        
       Pete the Painter      
       Prime Properties      
   
Chapter 4 Visual Elements & Graphics
4.1 Configuring Lines and Borders
    The Horizontal Rule Element
        Hands-On Practice 4.1
    The Border and Padding Properties
        Hands-On Practice 4.2
Checkpoint   4.1 
4.2 Types of Graphics     
       GIF Images        
       JPEG Images      
       PNG Images       
4.3 Using Graphics       
       The Image Element
       Accessibility and Images
       Hands-On Practice 4.3
       Image Links
       Hands-On Practice 4.4
       Background Images
    Configuring Background Images with CSS
       Hands-On Practice 4.5        
Checkpoint 4.2        
4.4 XHTML Images and More         
       Image Maps          
       Thumbnail Images  
       Advanced Techniques: Image Slicing         
    Sources of Graphics   
4.5 Sources and Guidelines for Graphics 
       Sources of Graphics 
       Guidelines for Using Images      
       Web Accessibility   
Checkpoint 4.3 
Key Terms
Review Questions         
Apply Your Knowledge    
Hands-On Exercises
Web Research
Web Design Focus            
Web Site Case Study   
       JavaJam Coffee House              
       Fish Creek Animal Hospital          
       Pete the Painter        
       Prime Properties        

Chapter 5 Web Design        
5.1 Web Site Organization 
       Hierarchical Organization       
       Linear Organization 
       Random Organization          
5.2 Web Site Navigation—Best Practices 
       Ease of Navigation  
       Navigation Bars    
       Short Pages       
       Table of Contents   
       Site Map and Site Search Features 
5.3 Design Principles     
       Repetition        
       Contrast         
       Proximity        
       Alignment        
5.4 Web Page Design—Best Practices    
       Load Time        
       Perceived Load Time
       Above the Fold
    Web Page “Real Estate”    
       Horizontal Scrolling 
       Adequate White Space          
       Target Audience    
       Browser-Friendly   
       Screen Resolution   
       Wireframes & Page Layout                 
5.5 Page Layout Design Techniques   
       Ice Design      
       Jello Design     
       Liquid Design   
Checkpoint 5.1    
5.6 Text Design—Best Practices        
5.7 Graphic Design—Best Practices     
5.8 Design to Provide Accessibility      
5.9 Best Practices Checklist
Checkpoint 5.2     
Key Terms
Review Questions     
Hands-On Exercises
Web Research
Web Design Focus
Web Site Case Study   
       JavaJam Coffee House          
       Fish Creek Animal Hospital      
       Pete the Painter    
       Prime Properties    
    Web Project       

Chapter 6 Page Layout with CSS
6.1 CSS Page Layout Overview        
       Advantages of Using CSS for Page Layout      
       Disadvantages of Using CSS for Page Layout    
6.2 The Box Model
    Hands-On Practice 6.1     
6.3 CSS Positioning Properties         
   Relative and Absolute Positioning
   Hands-On Practice 6.2
   The float Property
   Hands-On Practice 6.3 
   The display Property
   The z-index Property
   Hands-On Practice 6.4
Checkpoint 6.1   
6.4 Exploring CSS Page Layout
   Hands-On Practice 6.5           
6.5 Two-Column Page Layout         
   Hands-On Practice 6.6         
6.6 CSS Debugging Tips
6.7 CSS Page Layout Resources
Checkpoint 6.2
Key Terms
Review Questions     
Apply Your Knowledge
Hands-On Exercises
Web Research
Web Design Focus  
Web Site Case Study   
       JavaJam Coffee House           
       Fish Creek Animal Hospital       
       Pete the Painter    
       Prime Properties
Web Project     

Chapter 7 More on Links, Lists & Layout
7.1 Another Look at XHTML Hyperlinks  
      More on Relative Linking        
       Relative Link Examples          
       Opening a Link in a New Browser Window      
       Internal Links           
       Hands-On Practice 7.1    
7.2 CSS Pseudo-classes and Links     
       Hands-On Practice 7.2      
7.3    CSS Navigation Layout Using Lists
Checkpoint 7.1
7.4 Three-Column CSS Page Layout      
       Hands-On Practice 7.3
7.5 CSS Styling for Print   
      Hands-On Practice 7.4
7.6 The “Cascade”     
    Hands-On Practice 7.5
Checkpoint 7.2   
Key Terms
Review Questions      
Apply Your Knowledge    
Hands-On Exercises
Web Research
Web Design Focus    
Web Site Case Study    
       JavaJam Coffee House    
       Fish Creek Animal Hospital           
       Pete the Painter         
       Prime Properties
    Web Project         

Chapter 8 Tables
8.1 Using Tables on Web Pages         
       Overview of an XHTML Table    
       XHTML Table Headings         
       XHTML Table Captions         
       Hands-On Practice 8.1   
       XHTML Table Attributes        
       Applying Attributes to Rows and Cells          
       Hands-On Practice 8.2
Accessibility and Tables
Checkpoint 8.1
8.2 XHTML—Table Page Layout
       Accessibility and Layout Tables 
       More Sample Page Layout Examples
       Flexible and Fixed Table Widths    
       Hands-On Practice 8.3   
       Nested Tables       
Checkpoint 8.2  
8.3 Using CSS to Style a Table
Hands-On Practice 8.4
Key Terms
Review Questions      
Apply Your Knowledge    
Hands-On Exercises
Web Research
Web Design Focus    
Web Site Case Study    
       JavaJam Coffee House    
       Fish Creek Animal Hospital           
       Pete the Painter         
       Prime Properties
Web Project         
 
Chapter 9 Forms          
9.1 Overview of Forms    
9.2 XHTML—Using Forms
       Hands-On Practice 9.1           
       The Form Element
       Basic Form Elements
       Hands-On Practice 9.2              
Checkpoint 9.1     
9.3 Form Enhancements   
       The Label Element
       The Fieldset and Legend Elements        
       The Tabindex Attribute         
       The Accesskey Attribute
       Accessibility and Forms        
       Image Buttons and the Button Element 
    Hands-On Practice 9.3               
Checkpoint 9.2     
9.4 Using CSS to Style a Form
9.5 CGI Server-Side Processing         
       Steps in Utilizing CGI
    Using CGI        
       Hands-On Practice 9.4
Privacy and Forms              
       CGI Resources     
       Server-Side Processing Technologies       
Checkpoint 9.3     
Key Terms
Review Questions     
Apply Your Knowledge    
Hands-On Exercises
Web Research
Web Design Focus       
Web Site Case Study   
       JavaJam Coffee House              
       Fish Creek Animal Hospital          
       Pete the Painter        
       Prime Properties
Web Project
        
Chapter 10 Web Site Development   
10.1 Successful Large-Scale Project Development       
       Project Manager    
       Information Architect          
      Marketing Representative       
       Copywriter and Editor             
       Content Manager   
       Graphic Designer   
       Database Administrator            
       Network Administrator         
      Web Developer     
       Project Staffing Criteria         
10.2 The Development Process          
       Conceptualization  
       Analysis          
       Design
       Production        
       Testing
       Launch
      Maintenance      
       Evaluation        
Checkpoint 10.1    
10.3 Web Hosting        
       Types of Web Host Providers     
       Hosting Needs     
10.4 Choosing a Virtual Host
       Web Host Checklist 
Checkpoint 10.2    
Key Terms
Review Questions     
Hands-On Exercises
Web Research
Web Design Focus   
Web Site Case Study   
Web Project       

Chapter 11 Web Multimedia & Interactivity       
11.1 Helper Applications and Plug-ins    
11.2 Multimedia File Types      
    Obtaining Multimedia Files 
11.3 Using Sound on a Web Page        
       The Embed Element   
       Hands-On Practice 11.1                 
       The Object Element   
       Hands-On Practice 11.2               
       Background Sounds 
       Hands-On Practice 11.3
11.4 Podcasting Overview               
11.5 Using Video on a Web Page        
       The Embed Element  
       Hands-On Practice 11.4                 
       The Object Element
       Hands-On Practice 11.5                
11.6 Browser Compatibility and Accessibility       
11.7 Copyright Issues and Media Files    
Checkpoint 11.1       
11.8 Adobe Flash    
       Common Uses of Flash          
       Web Design and Flash          
       Adding a Flash Animation to a Web Page             
       Hands-On Practice 11.6                 
       Flash Resources    
11.9 Java    
       Common Uses of Java Applets    
       Adding a Java Applet to a Web Page          
       Hands-On Practice 11.7                   
       Free Java Applet Resources      
Checkpoint 11.2
11.10 JavaScript
       Common Uses of JavaScript
       Free JavaScript Resources
11. 11 Dynamic HTML (DHTML)
      Common Uses of DHTML
       Sources of free DHTML
11.12 Ajax
       Common Uses of Ajax
       Ajax Resources
Checkpoint 11.3
11.13 Accessibility and Multimedia/Interactivity
Key Terms
Review Questions           
Apply Your Knowledge       
Hands-On Exercises
Web Research
Web Design Focus        
Web Site Case Study    
       JavaJam Coffee House                 
       Fish Creek Animal Hospital             
       Pete the Painter           
       Prime Properties           
       Web Project       

Chapter 12 E-Commerce Overview   
12.1 What Is E-Commerce? 
       Advantages of E-Commerce      
       Risks of E-Commerce
12.2 E-Commerce Business Models      
12.3 Electronic Data Interchange (EDI)   
12.4 E-Commerce Statistics          
12.5 E-Commerce Issues    
12.6 E-Commerce Security  
       Encryption        
       Integrity          
       Secure Sockets Layer (SSL)       
       Digital Certificate   
       SSL and Digital Certificates      
Checkpoint 12.1    
12.7 Order and Payment Processing      
       Cash Model       
       Check Model      
       Credit Model      
       Smart Card       
12.8 E-Commerce Storefront Solutions   
       Instant Online Storefront        
       Off-the-Shelf Shopping Cart Software         
       Custom-Built Solution          
       Semi-Custom-Built Solutions on a Budget      
Checkpoint 12.2
Key Terms
Review Questions     
Hands-On Exercises
Web Research
Web Design Focus          
Web Site Case Study   
       JavaJam Coffee House                 
       Fish Creek Animal Hospital             
       Pete the Painter           
       Prime Properties          
       Web Project       
     
Chapter 13 Promotion for Web Developers       
13.1 Search Engines and Search Indexes Overview      
13.2 Popular Search Engines and Search Indexes              
13.3 Components of a Search Engine     
       Robot
       Database         
       Search Form       
13.4 Designing Your Pages for Promotion        
       Keywords         
       Description       
       Meta Elements        
13.5 Listing in a Search Engine and Search Index              
      Preferential Placement                 
Checkpoint 13.1   
13.6 Monitoring Search Engine and Search Index Listings  
13.7 Link Popularity      
13.8 Other Web Site Promotion Activities     
       Affiliate Programs  
       Banner Ads       
       Banner Exchange   
       Reciprocal Link Agreements     
       Newsletters       
        “Sticky” Site Features
    Personal Recommendations
     Social Bookmarking
Blogs
    RSS Feeds
       Web Rings        
       Newsgroup and Listserv Postings  
       Traditional Media Ads and Existing Marketing Materials
Checkpoint 13.2
13.9 Serving Dynamic Content with Inline Frames
Hands-On Practice 13.1
Key Terms
Review Questions     
Hands-On Exercises
Web Research
Web Design Focus  
Web Site Case Study   
    JavaJam Coffee House                 
       Fish Creek Animal Hospital             
       Pete the Painter           
       Prime Properties           
       Web Project       

Chapter 14 A Brief Look at JavaScript
14.1 Overview of JavaScript?   
14.2The Development of JavaScript
14.3 Popular Uses for JavaScript
        Alert Message
         Popup Windows
        Browser Sniffing
        Jump Menus
        Mouse Movement Techniques
14.4 Adding JavaScript to a Web Page
        The Script Element
        JavaScript Statement Block Template
        Hands-On Practice 14.1
Checkpoint 14.1
14.5 Document Object Model Overview
            Hands-On Practice 14.2
14.6 Events and Event Handlers
     Hands-On Practice 14.3
Checkpoint 14.2
14.7 Variables
        Writing a Variable to a Web Page
        Hands-on Practice 14.4
        Collecting Variable Values Using Prompt
      Hands-On Practice 14.5
14.8 Introduction to Programming Concepts
        Arithmetic Operators
        Decision Making Using If
        Hands-On Practice 14.6
        Functions
        Hands-On Practice 14.7
Checkpoint 14.3
14.9 Form Handling
        Hands-On Practice 14.8
Checkpoint 14.4
14.10 JavaScript and Accessibility
14.11 JavaScript Resources
Key Terms
Review Questions
Apply Your Knowledge
Hands-On Exercises
Web Research
Web Site Case Study   
    JavaJam Coffee House          
       Fish Creek Animal Hospital      
       Pete the Painter    
       Prime Properties    
       Web Project       

Answers          
Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10       
Chapter 11        
Chapter 12       
Chapter 13        
Chapter 14        


Appendix—Web Developer’s Handbook
A. XHTML Reference
B. Special Characters
C. CSS Property Reference
D. Comparison of HTML and XHTML
E. Section 508 Standards

Index