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 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), NotePad++ (PC), or Komodo Edit (Mac, Windows, and Linux).
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 Declarations
Most browsers can display simple webpages without document type declarations (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 HTML or XHTML you are using. Document Type Declarations appear at the very top of your HTML pages and instruct the browser how to display the rest of the code in that page. DTDs for the previous versions of HTML and XHTML were long and complex, and you can read more about them on the W3C website. However, in this class we will primarily use HTML 5, which has an incredibly simple DTD:
<!DOCTYPE html>
This line should be followed by the opening <html> tag, which typically includes a language declaration:
<html lang="en">
Other “Head” Elements
To link a CSS file to your HTML page, add the following markup to the <head> section of your HTML page, replacing “stylesheet.css” with the name of your style sheet:
<link rel="stylesheet" type="text/css" href="stylesheet.css">
To tell browsers which character encoding system you’re using (ASCII, UTF, etc.), include a <meta charaset> element in the <head> section of your HTML page. Typically, you should encode your HTML pages using the UTF-8 format:
<meta charset="utf-8">
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 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.