| |
| |
| |
| Introduction to the Internet and World Wide Web | |
| |
| |
| |
| The Internet and the Web | |
| |
| |
| The Internet | |
| |
| |
| Birth of the Internet | |
| |
| |
| Growth of the Internet | |
| |
| |
| Birth of the Web | |
| |
| |
| The First Graphical Browser | |
| |
| |
| Convergence of Technologies | |
| |
| |
| Who Runs the Internet? | |
| |
| |
| Intranets and Extranets | |
| |
| |
| |
| Web Standards and Accessibility | |
| |
| |
| W3C Recommendations | |
| |
| |
| Web Standards and Accessibility | |
| |
| |
| Accessibility and the Law | |
| |
| |
| Universal Design for the Web | |
| |
| |
| |
| Information on the Web | |
| |
| |
| Reliability and Information on the Web | |
| |
| |
| Ethical Use of Information on the Web | |
| |
| |
| |
| Network Overview | |
| |
| |
| |
| The Client/Server Model | |
| |
| |
| |
| Internet Protocols | |
| |
| |
| File Transfer Protocol (FTP) | |
| |
| |
| E-mail Protocols | |
| |
| |
| Hypertext Transfer Protocol (HTTP) | |
| |
| |
| Transmission Control Protocol/Internet Protocol (TCP/IP) | |
| |
| |
| |
| Uniform Resource Identifiers and Domain Names | |
| |
| |
| URIs and URLs | |
| |
| |
| Domain Names | |
| |
| |
| |
| Markup Languages | |
| |
| |
| Standard Generalized Markup Language (SGML) | |
| |
| |
| Hypertext Markup Language (HTML) | |
| |
| |
| Extensible Markup Language (XML) | |
| |
| |
| Extensible Hypertext Markup Language (XHTML) | |
| |
| |
| HTML5�the Newest Version of HTML | |
| |
| |
| |
| Internet and Web Trends | |
| |
| |
| Chapter Summary | |
| |
| |
| Key Terms | |
| |
| |
| Review Questions | |
| |
| |
| Hands-On Exercise | |
| |
| |
| Web Research | |
| |
| |
| Focus on Web Design | |
| |
| |
| |
| HTML Basics | |
| |
| |
| |
| HTML Overview | |
| |
| |
| HTML | |
| |
| |
| XHTML | |
| |
| |
| HTML | |
| |
| |
| |
| Document Type Definition | |
| |
| |
| |
| Example XHTML Web Page | |
| |
| |
| |
| Example HTML5 Web Page | |
| |
| |
| |
| Head, Body, Title, and Meta Elements | |
| |
| |
| The Head Section | |
| |
| |
| The Body Section | |
| |
| |
| |
| Your First Web Page | |
| |
| |
| |
| Heading Element | |
| |
| |
| Accessibility and Headings | |
| |
| |
| More Heading Options in HTML | |
| |
| |
| |
| Paragraph Element | |
| |
| |
| Alignment | |
| |
| |
| |
| Line Break Element | |
| |
| |
| |
| Blockquote Element | |
| |
| |
| |
| Phrase Elements | |
| |
| |
| |
| Unordered List | |
| |
| |
| The type Attribute | |
| |
| |
| HTML5 and Unordered Lists | |
| |
| |
| |
| Ordered List | |
| |
| |
| The type Attribute | |
| |
| |
| HTML5 and Ordered Lists | |
| |
| |
| |
| Description List | |
| |
| |
| |
| Special Characters | |
| |
| |
| |
| Div Element | |
| |
| |
| |
| Anchor Element | |
| |
| |
| Absolute Hyperlinks | |
| |
| |
| Relative Hyperlinks | |
| |
| |
| E-Mail Hyperlinks | |
| |
| |
| Accessibility and Hyperlinks | |
| |
| |
| Block Anchor | |
| |
| |
| |
| HTML Validation | |
| |
| |
| Chapter Summary | |
| |
| |
| Key Terms | |
| |
| |
| Review Questions | |
| |
| |
| Apply Your Knowledge | |
| |
| |
| Hands-On Exercises | |
| |
| |
| Web Research | |
| |
| |
| Focus on Web Design | |
| |
| |
| Website Case Study | |
| |
| |
| |
| Configuring Color and Text with CSS | |
| |
| |
| |
| Overview of Cascading Style Sheets | |
| |
| |
| Advantages of Cascading Style Sheets | |
| |
| |
| Configuring Cascading Style Sheets | |
| |
| |
| CSS Selectors and Declarations | |
| |
| |
| The background-color Property | |
| |
| |
| The color Property | |
| |
| |
| Configure Background and Text Color | |
| |
| |
| |
| Using Color on Web Pages | |
| |
| |
| Hexadecimal Color Values | |
| |
| |
| Web Safe Colors | |
| |
| |
| CSS Color Syntax | |
| |
| |
| |
| Inline CSS with the Style Attribute | |
| |
| |
| The Style Attribute | |
| |
| |
| |
| Embedded CSS with the Style Element | |
| |
| |
| Style Element | |
| |
| |
| |
| Configuring Text with CSS | |
| |
| |
| The Property | |
| |
| |
| More CSS Font Properties | |
| |
| |
| |
| CSS Class, Id, and Contextual Selectors | |
| |
| |
| The Class Selector | |
| |
| |
| The Id Selector | |
| |
| |
| The Contextual Selector | |
| |
| |
| |
| Span Element | |
| |
| |
| |
| Using External Style Sheets | |
| |
| |
| Link Element | |
| |
| |
| |
| Center HTML Elements with CSS | |
| |
| |
| |
| The -Cascade | |
| |
| |
| |
| CSS Validation | |
| |
| |
| Chapter Summary | |
| |
| |
| Key Terms | |
| |
| |
| Review Questions | |
| |
| |
| Apply Your Knowledge | |
| |
| |
| Hands-On Exercises | |
| |
| |
| Web Research | |
| |
| |
| Focus on Web Design | |
| |
| |
| Website Case Study: Implementing CSS | |
| |
| |
| |
| Visual Elements and Graphics | |
| |
| |
| |
| Configuring Lines and Borders | |
| |
| |
| Horizontal Rule Element | |
| |
| |
| The border and padding Properties | |
| |
| |
| |
| Types of Graphics | |
| |
| |
| Graphic Interchange Format (GIF) Images | |
| |
| |
| Joint Photographic Experts Group (JPEG) Images | |
| |
| |
| Portable Network Graphic (PNG) Images | |
| |
| |
| New WebP Image Format | |
| |
| |
| |
| Image Element | |
| |
| |
| Accessibility and Images | |
| |
| |
| Image Hyperlinks | |
| |
| |
| Optimize an Image for the Web | |
| |
| |
| |
| HTML5 Visual Elements | |
| |
| |
| HTML5 Figure Element | |
| |
| |
| HTML5 Figcaption Element | |
| |
| |
| HTML5 Meter Element | |
| |
| |
| HTML5 Progress Element | |
| |
| |
| |
| Background Images | |
| |
| |
| The background-image Property | |
| |
| |
| Browser Display of a Background Image | |
| |
| |
| The background-repeat Property | |
| |
| |
| The background-position Property | |
| |
| |
| The background-attachment Property | |
| |
| |
| |
| More About Images | |
| |
| |
| Image Maps | |
| |
| |
| The Favorites Icon | |
| |
| |
| Image Slicing | |
| |
| |
| CSS Sprites | |
| |
| |
| |
| Sources and Guidelines for Graphics | |
| |
| |
| Sources of Graphics | |
| |
| |
| Guidelines for Using Images | |
| |
| |
| Accessibility and Visual Elements | |
| |
| |
| |
| CSS3 Visual Effects | |
| |
| |
| The CSS3 background-clip Property | |
| |
| |
| The CSS3 background-origin Property | |
| |
| |
| The CSS3 background-size Property | |
| |
| |
| CSS3 Multiple Background Images | |
| |
| |
| CSS3 Rounded Corners | |
| |
| |
| CSS3 Box Shadow | |
| |
| |
| CSS3 Text Shadow | |
| |
| |
| CSS3 Opacity | |
| |
| |
| CSS3 RGBA Color | |
| |
| |
| CSS3 Gradients | |
| |
| |
| Chapter Summary | |
| |
| |
| Key Terms | |
| |
| |
| Review Questions | |
| |
| |
| Apply Your Knowledge | |
| |
| |
| Hands-On Exercises | |
| |
| |
| Web Research | |
| |
| |
| Focus on Web Design | |
| |
| |
| Website Case Study: Using Graphics & Visual Elements | |
| |
| |
| |
| Web Design | |
| |
| |
| |
| Design for Your Target Audience | |
| |
| |
| Browser-Friendly | |
| |
| |
| Screen Resolution | |
| |
| |
| |
| Website Organization | |
| |
| |
| Hierarchical Organization | |
| |
| |
| Linear Organization | |
| |
| |
| Random Organization | |
| |
| |
| |
| Principles of Visual Design | |
| |
| |
| Repetition: Repeat Visual Elements throughout Design | |
| |
| |
| Contrast: Add Visual Excitement and Draw Attention | |
| |
| |
| Proximity: Group-Related Items | |
| |
| |
| Alignment: Align Elements to Create Visual Unity | |
| |
| |
| |
| Design to Provide Accessibility | |
| |
| |
| Who Benefits from Universal Design and Increased Accessibility? | |
| |
| |
| Accessible Design Can Benefit Search Engine Listing | |
| |
| |
| Legal Requirements | |
| |
| |
| Accessibility is the Right Thing To Do | |
| |
| |
| |
| Writing for the Web | |
| |
| |
| Organize Your Content | |
| |
| |
| Text in Hyperlinks | |
| |
| |
| Reading Level | |
| |
| |
| Use of Fonts | |
| |
| |
| Spelling and Grammar | |
| |
| |
| |
| Use of Color | |
| |
| |
| Choosing Colors | |
| |
| |
| Accessibility and Color | |
| |
| |
| Appealing to Children and Preteens | |
| |
| |
| Appealing to Young Adults | |
| |
| |
| Appealing to Everybody | |
| |
| |
| Appealing to Older Adults | |
| |
| |
| |
| Use of Graphics and Multimedia | |
| |
| |
| File Size and Dimension Matter | |
| |
| |
| Antialiased/Aliased Text in Media | |
| |
| |
| Use Only Necessary Multimedia | |
| |
| |
| Provide Alternate Text | |
| |
| |
| |
| Navigation Design | |
| |
| |
| Ease of Navigation | |
| |
| |
| Navigation Bars | |
| |
| |
| Breadcrumb Navigation | |
| |
| |
| Using Graphics for Navigation | |
| |
| |
| Dynamic Navigation | |
| |
| |
| Site Map | |
| |
| |
| Site Search Features | |
| |
| |
| |
| Page Layout Design | |
| |
| |
| Wireframes and Page Layout | |
| |
| |
| Page Layout Design Techniques | |
| |
| |
| Design for the Mobile Web | |
| |
| |
| |
| More Design Considerations | |
| |
| |
| Load Time | |
| |
| |
| Above the Fold | |
| |
| |
| White Space | |
| |
| |
| Avoid Horizontal Scrolling | |
| |
| |
| Browsers | |
| |
| |
| Screen Resolution | |
| |
| |
| |
| Web Design Best Practices Checklist | |
| |
| |
| Chapter Summary | |
| |
| |
| Key Terms | |
| |
| |
| Review Questions | |
| |
| |
| Hands-On Exercises | |
| |
| |
| Web Research | |
| |
| |
| Focus on Web Design | |
| |
| |
| Website Case Study: Web Design Best Practices | |
| |
| |
| |
| Page Layout | |
| |
| |
| |
| The Box Model | |
| |
| |
| Content | |
| |
| |
| Padding | |
| |
| |
| Border | |
| |
| |
| Margin | |
| |
| |
| The Box Model in Action | |
| |
| |
| |
| Normal Flow | |
| |
| |
| |
| CSS Positioning | |
| |
| |
| Relative Positioning | |
| |
| |
| Absolute Positioning | |
| |
| |
| |
| CSS Float | |
| |
| |
| |
| CSS Clearing a Float | |
| |
| |
| The clear Property | |
| |
| |
| The overflow Property | |
| |
| |
| |
| CSS Two-Column Page Layout | |
| |
| |
| Two Column with Left Navigation | |
| |
| |
| Two Column with Top Header and Left Navigation | |
| |
| |
| |
| Hyperlinks in an Unordered List | |
| |
| |
| Configure List Markers with CSS | |
| |
| |
| Vertical Navigation with an Unordered List | |
| |
| |
| Horizontal Navigation with an Unordered List | |
| |
| |
| |
| CSS Interactivity with Pseudo-Classes | |
| |
| |
| |
| Practice with CSS Two Column Layout | |
| |
| |
| |
| CSS Resources | |
| |
| |
| CSS Debugging Techniques | |
| |
| |
| CSS Web Resources | |
| |
| |
| |
| HTML5 Structural Elements | |
| |
| |
| Header Element | |
| |
| |
| Hgroup Element | |
| |
| |
| Nav Element | |
| |
| |
| Footer Element | |
| |
| |
| |
| |
| |
| Article Element | |
| |
| |
| Aside Element | |
| |
| |
| Time Element | |
| |
| |
| HTML5 & Today�s Browsers | |
| |
| |
| More on Links and Layout | |
| |
| |
| Another Look at Hyperlinks | |
| |
| |
| CSS Sprites | |
| |
| |
| Three-Column CSS Page Layout | |
| |
| |
| CSS Styling for Print | |
| |
| |
| CSS Styling for the Mobile Web | |
| |
| |
| Tables | |
| |
| |
| Table Overview | |
| |
| |
| Table Rows, Cells, and Headers | |
| |
| |
| Span Rows and Columns | |
| |
| |
| Configure an Accessible Table | |
| |
| |
| Style a Table with CSS | |
| |
| |
| CSS Structural Pseudo-classes | |
| |
| |
| Configure Table Sections | |
| |
| |
| Forms | |
| |
| |
| Overview of Forms | |
| |
| |
| Input Element Form Controls | |
| |
| |
| Scrolling Text Box | |
| |
| |
| Select List Select List | |
| |
| |
| Image Buttons and the Button Element | |
| |
| |
| Accessibility and Forms | |
| |
| |
| Styling a Form | |
| |
| |
| Server-Side Processing | |
| |
| |
| HTML5 Form Controls | |
| |
| |
| Web Development | |
| |
| |
| Successful Large-Scale Project Development | |
| |
| |
| The Development Process | |
| |
| |
| Domain Name Overview | |
| |
| |
| Web Hosting | |
| |
| |
| Choosing a Virtual Host | |
| |
| |
| Web Multimedia and Interactivity | |
| |
| |
| Plug-Ins, Containers, and Codecs | |
| |
| |
| Getting Started with Audio and Video | |
| |
| |
| XHTML Object & Param Elements | |
| |
| |
| Adobe Flash | |
| |
| |
| HTML5 Audio & Video Elements | |
| |
| |
| Multimedia Files & Copyright | |
| |
| |
| CSS3 & Interactivity | |
| |
| |
| Java | |
| |
| |
| JavaScript | |
| |
| |
| Ajax | |
| |
| |
| HTML5 Canvas Element | |
| |
| |
| Accessibility and Multimedia/Interactivity | |
| |
| |
| E-Commerce Overview | |
| |
| |
| What Is E-Commerce? | |
| |
| |
| E-Commerce Business Models | |
| |
| |
| Electronic Data Interchange (EDI) | |
| |
| |
| E-Commerce Statistics | |
| |
| |
| E-Commerce Issues | |
| |
| |
| E-Commerce Security | |
| |
| |
| Order and Payment Processing | |
| |
| |
| E-Commerce Storefront Solutions | |
| |
| |
| Web Promotion | |
| |
| |
| Search Engine Overview | |
| |
| |
| Popular Search Engines | |
| |
| |
| Components of a Search Engine | |
| |
| |
| Designing Your Pages for Promotion | |
| |
| |
| Listing in a Search Engine and Search Index | |
| |
| |
| Monitoring Search Listings | |
| |
| |
| Link Popularity | |
| |
| |
| Social Media Optimization | |
| |
| |
| Other Site Promotion Activities | |
| |
| |
| Serving Dynamic Content with Inline Frames | |
| |
| |
| A Brief Look at JavaScript | |
| |
| |
| Overview of JavaScript | |
| |
| |
| The Development of JavaScript | |
| |
| |
| Popular Uses for JavaScript | |
| |
| |
| Adding JavaScript to a Web Page | |
| |
| |
| Document Object Model Overview | |
| |
| |
| Events and Event Handlers | |
| |
| |
| Variables | |
| |
| |
| Introduction to Programming Concepts | |
| |
| |
| Form Handling | |
| |
| |
| Accessibility and JavaScript | |
| |
| |
| JavaScript Resources | |