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.
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:
<?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
Linking to an External Style Sheet
<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.