Warning: This is an archived course website that is part of my teaching portfolio, so some links may no longer work. Please contact me with any questions about this site.

Code Bank

The Code Bank will serve as a repository of code snippets that you can copy and paste as you build your websites for this class. Although your writing and design work in this class must be original, the basic building blocks of (X)HTML and CSS are well established and don’t need to be typed out by hand each time you create a new site.

Think of the items in the Code Bank as blank templates–they provide a starting point for your work, but they must be customized and fine tuned if you want to create successful websites.

To use the code snippets, simply copy and paste the code from the samples into a text editor like TextWrangler (Mac) or NotePad++ (PC).

Items will be added to the Code Bank as we progress through the semester.

Basic Page Structure

At minimum, an HTML page should contain the following items:

<html>

<head>

<title>Title goes here...</title>

</head>

<body>Body goes here...</body>

</html>

Document Type Definitions

Most browsers can display simple webpages without document type definitions (DTDs), but if you want to retain control over how browsers interpret the code of your complex websites, you need to tell the browsers what kind of (X)HTML you are using. Document Type Definitions appear at the very top of your (X)HTML pages and instruct the browser how to display the rest of the code in that page. W3 Schools has a more thorough explanation of DTDs, but in this class we will primarily use two DTDs:

XHTML 1.1

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

XHTML 1.0 Transitional

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Note that the final line of each of these DTDs is actually the opening <html> tag. When using an XHTML DTD, you should also use a namespace declaration, which doubles as the opening <html> tag.

Linking to an External Style Sheet

In the <head> section of your (X)HTML page, insert the following code, replacing “stylesheet.css” with the name of your style sheet:

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

Style Sheet Test

When you want to test how comprehensive a style sheet is, it can be helpful to have a page that uses most of the standard (X)HTML elements. You can copy and paste the code from Style Sheet Test page into your site to see how your CSS file styles the standard elements.