New XHTML (Transitional) Website

content.html

<h1>Heading 1</h1>
<p>HTML, which stands for <a href="http://en.wikipedia.org/wiki/HTML">HyperText Markup Language</a>, is the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It allows images and objects to be embedded and can be used to create interactive forms. It is written in the form of HTML elements consisting of &quot;tags&quot; surrounded by angle brackets within the web page content. It can embed scripts in languages such as JavaScript which affect the behavior of HTML webpages. HTML can also be used to include Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both HTML and CSS standards, encourages the use of CSS over explicit presentational markup.</p>
<h2>Heading 2</h2>
<p>This is <strong>bolded text</strong>. This is <em>italicized text</em>. This is <u>underlined text</u>. This is <strike>stricken text</strike>.</p>
<h3>Heading 3</h3>
<p>To determine the Fibonacci sequence, one can use the expression: F<sub>n</sub> = F<sub>n-1</sub> +&nbsp;F<sub>n-2</sub></p>
<p>Likewise, one can use the equation, F<sub>-n</sub> = (-1)<sup>n+1</sup>F<sub>n</sub>, to determine Fibonacci numbers for negative index <em>n</em>.</p>
<h4>Heading 4</h4>
<p>Here is an ordered list.</p>
<ol>
    <li>Item text</li>
    <li>Item text</li>
    <li>Item text
    <ol>
        <li>Item text</li>
        <li>Item text</li>
        <li>Item text
        <ol>
            <li>Item text</li>
            <li>Item text</li>
            <li>Item text
            <ol>
                <li>Item text</li>
                <li>Item text</li>
                <li>Itemtext</li>
            </ol>
            </li>
            <li>Item text</li>
        </ol>
        </li>
        <li>Item text</li>
    </ol>
    </li>
    <li>Item text</li>
</ol>
<p>Here is an unordered list.</p>
<ul>
    <li>Item text</li>
    <li>Item text</li>
    <li>Item text
    <ul>
        <li>Item text</li>
        <li>Item text</li>
        <li>Item text
        <ul>
            <li>Item text</li>
            <li>Item text</li>
            <li>Item text
            <ul>
                <li>Item text</li>
                <li>Item text</li>
                <li>Item text</li>
            </ul>
            </li>
            <li>Item text</li>
        </ul>
        </li>
        <li>Item text</li>
    </ul>
    </li>
    <li>Item text</li>
</ul>
<h5>Heading 5</h5>
<p>Here is a blockquote.</p>
<blockquote>
<p>It's been six days and we're all still waiting. Waiting for someone to come. But what if they don't? We have to stop waiting. We need to start figuring things out. A woman died this morning just going for a swim and he tried to save her, and now you're about to crucify him? We can't do this. Everyman for himself is not going to work. It's time to start organizing. We need to figure out how we're going to survive here. Now, I found water. Fresh water, up in the valley. I'll take a group in at first light. If you don't want to go come then find another way to contribute. Last week most of us were strangers, but we're all here now. And god knows how long we're going to be here. But if we can't live together, we're going to die alone.</p>
</blockquote>
<h6>Heading 6</h6>
<p>Here are some junk paragraphs with different alignments.</p>
<p style="margin-left: 40px;">Indented paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Left-aligned paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p style="text-align: right;">Right-aligned paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p style="text-align: center;">Center-aligned paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p style="text-align: justify;">Justify-aligned paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

index.html

<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>TITLE</title>
		
		<meta name="description" content="DESC" />
		<meta name="keywords" content="KEYW" />
		<meta name="robots" content="index, follow" /> 
		
		<link rel="stylesheet" type="text/css" href="styles.css" media="all" />
	</head>
	<body>

CONTENT

		<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
		<script language="javascript" type="text/javascript" src="scripts.js"></script>
	</body>
</html>

scripts.js

/*jslint devel: false, browser: false, white: true */
/*global $: false */

(function( global ) {
	"use strict";
	
	var Module = (function() {
		var privateVariable = '',
			privateMethod = function() {
			};
		
		return {
			init: function() {
				this.publicMethod();
			},
			publicVariable: '',
			publicMethod: function() {
			}
		};
	}());
	
	global.Module = Module;
	
	$( global.document ).ready(function() {
		global.Module.init();
	});
}( this ));

styles.css

@charset "utf-8";

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
	{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
a:focus { outline: 1px dotted #cfc; }
ins { text-decoration: none; background-color: #cfc; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }




/** Setup & Helpers **/
.alignleft { float: left; }
.alignright { float: right; }
.aligncenter { margin: 0 auto; }
img.alignleft { margin-right: 8px; margin-bottom: 8px; }
img.alignright { margin-left: 8px; margin-bottom: 8px; }

.clearleft { clear: left; }
.clearright { clear: right; }
.clearcenter { clear: both; }

.message { width: 80%; padding: 8px; margin: 8px auto; border: 2px solid; color: #000; }
.message.failure { border-color: #c00; background-color: #fcc; }
.message.warning { border-color: gold; background-color: #ff9; }
.message.success { border-color: #060; background-color: #cfc; }
.message.new { border-color: #009; background-color: #e1e3fd; }
.message.note { border-color: #ccc; background-color: #eee; }




/** Layout **/
/** position, top, left, right, bottom, z-index, float, display, width, height, padding, margin, border, outline, list-style (type, position, image), overflow, vertical-align **/
a img { border: none; }
abbr { cursor: pointer; }
sup { position: relative; top: -0.5em; }
sub { position: relative; top: 0.5em; }

#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 { padding-bottom: 0.8em; }

#main table td { vertical-align: top; }
#main table th { vertical-align: middle; }

#main ol { padding: 0 0 1.0em 20px; list-style-type: decimal; }
#main ol ol, #main ol ul { padding-bottom: 0; }
#main ul { padding: 0 0 1.0em 20px; list-style-type: disc; }
#main ul ol, #main ul ul { padding-bottom: 0; }
#main ul>li>ul { list-style-type: circle; }
#main ul>li>ul ul { list-style-type: square; }

#main p { padding-bottom: 1.0em; }
#main blockquote { width: 70%; padding-bottom: 1.0em; margin: 0 auto; }




/** Colors & Typography **/
/** color, background (color, image, repeat, attachment, position), font (style, variant, weight, size, family), line-height, text (indent, align, decoration, transform), letter-spacing, word-spacing, white-space, cursor **/
sup { font-size: 0.8em; }
sub { font-size: 0.8em; }

#main h1, #main h2, #main h3 { font-size: 1.76em; }
#main h4 { font-size: 1.5em; }
#main h5 { font-size: 1.3em; }
#main h6 { font-size: 1.1em; }




/** @media **/

/** Print Styles
@media print { }
 **/