Live Examples

Links and live examples from the book and additional, supplemental material for each chapter.

Chapter 1: Why Write for the Web?

Downloads and Utilities

  • TweetDeck (Cross-platform social networking application)

Websites

Chapter 2: Reading the Web

Downloads and Utilities

Chapter 3: Creating Web Content

Downloads and Utilities

Websites

Chapter 4: Standards-Based Web Pages

Downloads and Utilities

Websites

Chapter 5: Preparing to Write and Design

Downloads and Utilities

  • PortableApps.com (Free and open-source Windows applications that can be run on a USB drive)
  • FreeSMUG.org (Free and open-source Mac OS X applications that can be run on a USB drive)
  • Notepad++ (“Notepad plus”) (Recommended free text editor for Windows; can be run from USB drive)

    Download the zip package of Notepad++ (not the installer); when you unzip it, there will be two folders: ansi and unicode. Throw the ansi folder away, and move the unicode folder to your desktop or USB drive. The Notepad++ program is inside of the unicode folder (you can rename unicode to notepad++ if you wish).

  • TextWrangler (Recommended free text editor for Mac OS X; also available via the Mac App Store)
  • WinSCP (Recommended free and open-source FTP/SFTP client for Windows)
  • Cyberduck (Recommended free and open-source FTP/SFTP client for Mac OS X
  • Mozilla Firefox (Recommended baseline development browser)
  • Chris Pederick’s Web Developer Add-on for Firefox (Recommended Firefox add-on for Web design and development)

Chapter 6: Accessibility

Websites

Chapter 7: Usability

Chapter 8: Sustainability

Chapter 9: Structured Content: XHTML Overview

Websites

Examples

  • XHTML Strict DOCTYPE (p. 94): 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • The Global Structure of Web Pages (p. 96): 
    <html>
  <head>
  </head>
  <body>
  </body>
</html>
  • Content Type and Character Encoding <meta /> Tag (p. 97): 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • Uniquely Identifying Pieces of Structure with id (p. 98-99): 
    <body>
  <div id="header">
    <h1>John Smith's Home Page</h1>
  </div>
  <div id="content>
    <h2>Portfolio Overview</h2>
    <p>Read all about <a href="portfolio.htm">my portfolio</a>...</p>
    <h2>Latest Projects</h2>
    <p>Read all about my <a href="latest-projects.htm"> latest projects</a>...</p>
  </div>
  <ul id="navigation">
    <li><a href="index.htm">Home</a></li>
    <li><a href="resume.htm">Resume</a></li>
    <li><a href="contact.htm">Contact</a></li>
  </ul>
  <div id="footer">
    <p>
      All site content is licensed for use under a
      <a rel="license" href= "http://creativecommons.org/licenses/by/3.0/us/">
      Creative Commons Attribution 3.0 United States License</a>.
    </p>
  </div>
</body>
  • Associating Similar, Repeated Structures with class (p. 100): 
    <p>
  I enjoyed Peter Jackson's <cite class="film">Lord of the Rings</cite>
  films, especially <cite class="film">The Two Towers</cite>, but I do
  not think that they were as good as the original 
  <cite class="book">Lord of the Rings</cite> books by J. R. R. Tolkien.
</p>

Chapter 10: Presentation and Design: CSS Overview

Websites

Examples

  • A Sample of XHTML (p. 104)
  • A Sample of XHTML with a Cascade (p. 104)
  • CSS Style Declarations (p. 105) 
    /*Pseudo-code to show selectors, properties, and values in CSS*/
selector {
  property: value;                /*For styles that take a single value, e.g.,
                                    color: blue;
                                  */
  property: value, value, value;  /*Commas separate values ordered by preference, e.g., 
                                    font-family: Verdana, Arial, sans-serif;
                                  */
  property: value value value;    /*For styles that take multiple values, e.g.,
                                    border: 10px solid red;
                                  */
}
  • Descendant Selectors (p. 108)
  • Child Selectors on Nested Lists (p. 110)
  • Hanging Indents (p. 115)

Chapter 11: Rapid Prototyping

Downloads and Utilities

Examples

Chapter 12: Writing with Source in a Text Editor

Downloads and Utilities

Websites

Examples

  • One Page, Many Views (p. 134-137)
  • Highlighting Error (p. 137)
  • Format Source However You'd Like (p. 138-142)
  • Indentation: XHTML (p. 141): 
    <div class="tip">
  <h2>Indentation Makes Source Readable</h2>
  <p>
      However, some text editors require you to
      do your indentation manually.
  </p>
</div>
  • Indentation: CSS (p. 141): 
    /*
  Put properties on separate lines, 
  and indent them within a selector:
*/
body { 
  font-family: Helvetica, Arial, sans-serif;
  font-size: small;
}

/*
  Some designers indent selectors to show
  which selectors appear inside of others:
*/
div#content { width: 500px; }
  div#content h2 { font-size: 26px; }
  div#content p { font-size: 14px; }
    div#content p a { color: green; }
  • Comment syntax in XHTML (p. 143): 
    <!--Here is a comment in XHTML.-->
  • Comment syntax in CSS (p. 143): 
    /*Here is a comment in CSS.*/
  • Comment syntax in JavaScript (p. 143): 
    /*Here is a comment in JavaScript.*/
  • Commenting Out Problem Code (p. 145): 
    p { 
  width: 100px;
  /*padding: 50px;*/
  }
  /*Padding is changing the width,
  so I've commented it out for
  testing purposes.*/

Chapter 13: Page Metadata

Websites

Examples

  • A metadata-rich opening <html> tag (p. 148): 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="example-com">
  • Specifying the Content Type in the <meta /> Tag (p. 149): 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • Mismatched Character Encoding (p. 149)
  • Correct Character Encoding (p. 150)
  • Character Entities (p. 151) 
    <!--Essential XHTML character entities that *must* be used:-->
  &lt; (display as <)
  &gt; (displays as >)
  &amp; (displays as &)
<!--In certain situations, such as in JavaScript or in code examples,
you might need to use:-->
  &quot; (displays as ")
  &apos; (displays as ')
  • Title Bar Example (p. 152)
  • Linking to a Shortcut Icon or "Favicon" (p. 154): 
    <!--For most browsers-->
<link rel="icon" href="http://example.com/favicon.png" type="image/png" />
<!--For Internet Explorer; no type must be specified-->
<link rel="shortcut icon" href="http://example.com/
favicon.ico" />
  • Linking to CSS (p. 155): 
    <link rel="stylesheet" type="text/css" href="/css/style.css" media="screen" />
  • Linking to JavaScript (p. 155-156): 
    <script type="text/javascript" src="/js/site.js"></script>

Chapter 14: Page Branding

Websites

Examples

Be sure to look at the linked examples below in Firefox with the Web Developer Add-on, using its CSS > Edit CSS feature.

Chapter 15: Navigation

Examples

  • XHTML for a basic navigation area (p. 178): 
    <ul id="navigation">
  <li><a id="nav-home" href="/">Home</a></li>
  <li><a id="nav-resume" href="/resume.htm">Resume</a></li>
  <li><a id="nav-portfolio" href="/portfolio.htm">Portfolio</a></li>
  <li><a id="nav-about" href="/about.htm">About</a></li>
  <li><a id="nav-contact" href="/contact.htm">Contact</a></li>
</ul>
  • CSS for maximizing clickable areas (p. 178): 
    ul#navigation a {
  display: block; /*Treat links as blocks*/
  padding: 20px; /*Padding is also clickable*/
  background-color: gray;
}
  • Figure 15.1: Generous boxes, but small clickable areas (p. 182)
  • Figure 15.2: Generous boxes, large clickable areas (p. 182)
  • Wayfinding Made Simple (p. 183-184): 
    ul#navigation li a:hover,
ul#navigation li a:focus,
body.home ul#navigation li a#nav-home,
body.resume ul#navigation li a#nav-resume,
body.portfolio ul#navigation li a#nav-portfolio,
body.about ul#navigation li a#nav-about,
body.contact ul#navigation li a#nav-contact {
  background-color: white;
}
  • Horizontal Navigation, Float Method, Automatic Width (p. 185): 
    ul#navigation {
  overflow: hidden; /*Necessary style for best handling floats*/
}
ul#navigation li {
  float: left; /*Float items to the left*/
  display: inline; /*Fix a float issue in older IE browsers*/
  margin-right: 5px; /*Put some space between items*/
}
ul#navigation li a {
  display: block; /*Maximize clickable area*/
  padding: 5px 10px 5px 10px; /*Generous padding on top and bottom,
                                less on right and left*/
  background-color: #CCC; /*Background color for the items*/
}
  • Figure 15.3: Horizontal navigation bar with different button widths (p. 186)
  • Horizontal Navigation, Float Method, Fixed Width (p. 186): 
    ul#navigation li {
  width: 100px; /*Set a fixed width on `li`
                  example in Figure 15.4 puts
                  the width on `li a` instead.*/
  float: left; /*Float items to the left*/
  display: inline; /*Fix a float issue in older IE browsers*/
  margin-right: 5px; /*Put some space between items*/
}
  • Figure 15.4: Horizontal navigation bar with uniform button widths (p. 187)
  • Figure 15.5: Horizontal navigation bar with uniform widths, centered text (p. 187)

Chapter 16: Text Content

Websites

Examples

Chapter 17: Page Layout

Websites

Examples

Chapter 18: Multimedia Content

Downloads and Utilities

Websites

Examples

  • Sample markup for a photo caption with an accessible label (p. 226): 
    <p class="caption">
  <span class="access-label">Photo caption: </span>We took
  this photograph of the Jefferson Memorial during our visit
  to Washington, D.C. in November of 2010.
</p>
  • CSS to hide the access label (p. 227): 
    .access-label {
  display: block; /*Display as block for positioning*/
  position: absolute; /*Pulll from document flow*/
  left: -10000px; /*Move way left of the screen*/
}
  • Example reusable markup for creating a consistent image presentation (p. 227-228): 
    <div class="photograph">
  <!--Path to image in src=""; match height and width to image-->
  <img src="" height="300" width="400" alt="Add alt text" />
  <p class="caption">
    <span class="access-label">Photo caption: </span>
    
    Image description....
    
  </p>
</div>
  • Figure 18.1: Example presentation of a photograph and caption (p. 229)

Chapter 19: Performance and Interaction

Downloads and Utilities

Websites

Examples

  • The jQuery Ready Event (p. 237-238): 
    /*JavaScript*/
$(document).ready(function()
  {
    /*Scripts are written here to run
    once the DOM has been loaded.*/
  }
);
  • “DOM Scripting is Awesome” (p. 238-239): 
    /*JavaScript*/
$(document).ready(function()
  {
    $('div#header h1').html('DOM Scripting Is Awesome!');
  }
);
  • Is JavaScript Available? (p. 239-240): 
    /*JavaScript*/
$(document).ready(function()
  {
    $('body').addClass('hasjs');
  }
);
    /*CSS*/
p { color: black; }
body.hasjs p { color: red; } /*As a demonstration, make 
                             paragraphs red when JavaScript
                            is active.*/
  • Figure 19.1: Layout from Chapter 17 without JavaScript enhancement (p. 241)
  • rpkwidescreen() function (p. 240-241) 
    /*JavaScript*/
function rpkwidescreen() {
  var rpkwidth = $(window).width();
  if(rpkwidth>1100) { $('body').addClass('widescreen'); }
  else { $('body').removeClass('widescreen'); }
}
  • Figure 19.2: Layout with widescreen class and CSS (p. 241-243) 
    /*JavaScript*/
$(document).ready(function()
  {
    $('body').addClass('hasjs');
    rpkwidescreen(); /*Run once the DOM has loaded*/
    $(window).resize(rpkwidescreen); /*Run on any resizing of the browser window*/
  }
);
    /*CSS*/
div#page { width: 700px; } /*Width on small and/or JavaScriptless screens*/
body.widescreen div#page { width: 1000px; } /*Widescreen width*/
  • DOM scripting for external links (p. 243-244): 
    /*JavaScript*/
$(document).ready(function()
  {
    $('div#content a[href^=http\\:\\/\\/]').addClass('ext');
  }
);
    /*CSS*/
a { color: blue; } /*Color links blue*/
a.ext { color: red; } /*Color external links red*/
  • DOM Scripting and animation (p. 244-246): 
    /*JavaScript*/
$(document).ready(function() {
  /*Set margin-right for jQuery manipulation:*/
  $('ul#navigation a').css('margin-right','30px');
  /*Navigation hover function:*/
  $('ul#navigation a').hover( function() 
    {
      $(this).animate( { "margin-right": 0 } , "slow");
    }, function() {
      $(this).animate( { "margin-right": 30 } , "slow");
    }
  );
});
  • DOM Scripting and animation improved (disable animation queing so that navigation doesn’t continue to expand and contract again and again; speed up animation): 
    /*JavaScript*/
$(document).ready(function() {
  /*Set margin-right for jQuery manipulation*/
  $('ul#navigation a').css('margin-right','30px');
  /*Navigation hover function:*/
  $('ul#navigation a').hover( function() 
    {
      $(this).animate( { "margin-right": 0 } , {queue: false, duration: "fast" });
    }, function() {
      $(this).animate( { "margin-right": 30 } , { queue: false, duration: "fast" });
    }
  );
});

Chapter 20: Site Architecture

Downloads and Utilities

Websites

  • XAMPP (Development Web server documentation)

Examples

Chapter 21: Reusing and Dynamically Generating Content

Websites

Chapter 22: Dynamic Sites in WordPress

Downloads and Utilities

Websites

Chapter 23: Going Live

Downloads and Utilities

  • WinSCP (FTP/SFTP client for Windows)
  • Cyberduck (FTP/SFTP client for Mac OS X)
  • FileZilla (FTP/SFTP client for all operating systems)

Websites

Chapter 24: Tracking Visitors, Sharing Content

Downloads and Utilities

Websites