Skip to content

Instantly share code, notes, and snippets.

@jonavon

jonavon/sample.html

Last active August 29, 2015 14:06
Show Gist options
  • Save jonavon/3954792a7299c9e3bdf3 to your computer and use it in GitHub Desktop.
Save jonavon/3954792a7299c9e3bdf3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sample.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- BEGIN HEAD -->
<head>
<title>Sample Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="Shortcut Icon" href="./favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="./css/style.css" type="text/css" media="screen,handheld" />
<!--[if IE]><link rel="stylesheet" href="./css/ie.css" type="text/css" media="all" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="./css/ie6.css" type="text/css" media="all" /><![endif]-->
<script type="text/javascript" src="./libs/js/jquery-1.3.1.min.js"></script>
</head>
<body id="index">
<div id="container">
<div id="header">
<h1>Sample page</h1>
<h2>Test Your CSS</h2>
</div>
<div id="navigation">
<ul>
<li>
<a href="#" title="" class="active">Link</a>
</li>
<li>
<a href="#" title="">Link</a>
</li>
<li>
<a href="#" title="">Link</a>
</li>
<li>
<a href="#" title="">Link</a>
</li>
<li id="logout">
<a href="./logout" title="">Logout</a>
</li>
</ul>
</div>
<div id="main">
<div id="messages">
<p class="notice">This is a notice message</p>
<p class="warning">This is a warning message</p>
<p class="error">This is an error message</p>
</div>
<div id="content">
<div id="sample-page">
<div id="anchor-samples">
<ul>
<li><a href="#headers-samples">Headers</a></li>
<li><a href="#text-samples">Text</a></li>
<li><a href="#list-samples">List</a></li>
<li><a href="#table-samples">Table</a></li>
<li><a href="#form-samples">Form</a></li>
</ul>
</div>
<div id="headers-samples">
<h1>Header 1</h1>
<p>This is a paragraph after a Level 1 Header.</p>
<h2>Header 2</h2>
<p>This is a paragraph after a Level 2 Header.</p>
<h3>Header 3</h3>
<p>This is a paragraph after a Level 3 Header.</p>
<h4>Header 4</h4>
<p>This is a paragraph after a Level 4 Header.</p>
<h5>Header 5</h5>
<p>This is a paragraph after a Level 5 Header.</p>
<h6>Header 6</h6>
<p>This is a paragraph after a Level 6 Header.</p>
</div>
<hr />
<div id="text-samples">
<p>This is just really long paragraph with some Lorem Ipsum Text.Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<blockquote><p>This is a paragraph inside of a blockquote</p></blockquote>
<address>Address: 1 Simple Way</address>
<p>This paragraph uses <span>valid</span> <abbr title="eXtensible Hypertext Markup Language">XHTML</abbr>. <strong>Strong markup</strong> is used along with <em>Emphasis on this text</em></p>
<pre>Preformatted markup can have a lot of spaces!</pre>
</div>
<hr />
<div id="list-samples">
<ul>
<li>Unordered list 01</li>
<li>Unordered list 02</li>
<li>Unordered list 03
<ul>
<li>Unordered list inside list level 2</li>
<li>Unordered list inside list level 2
<ul>
<li>Unordered list inside list level 3</li>
<li>Unordered list inside list level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
<ol>
<li>Ordered list 01</li>
<li>Ordered list 02</li>
<li>Ordered list 03
<ol>
<li>Ordered list inside list level 2</li>
<li>Ordered list inside list level 2
<ol>
<li>Ordered list inside list level 3</li>
<li>Ordered list inside list level 3</li>
</ol>
</li>
</ol>
</li>
</ol>
<dl>
<dt>Description list title 01</dt>
<dd>Description list description 01</dd>
<dt>Description list title 02</dt>
<dd>Description list description 02</dd>
<dd>Description list description 03</dd>
</dl>
</div>
<hr />
<div id="table-samples">
<table summary="This is a sample table">
<caption>Sample Table</caption>
<colgroup>
<col class="this" />
<col class="that" />
<col class="this" />
<col class="that" />
<col class="this" />
<col class="that" />
</colgroup>
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
<th>Fifth</th>
<th>Sixth</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
<th>Fifth</th>
<th>Sixth</th>
</tr>
</tfoot>
<tbody>
<tr class="odd">
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3</td>
<td>Row 1 Column 4</td>
<td>Row 1 Column 5</td>
<td>Row 1 Column 6</td>
</tr>
<tr class="even">
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
<td>Row 2 Column 4</td>
<td>Row 2 Column 5</td>
<td>Row 2 Column 6</td>
</tr>
<tr class="odd">
<td>Row 3 Column 1</td>
<td>Row 3 Column 2</td>
<td>Row 3 Column 3</td>
<td>Row 3 Column 4</td>
<td>Row 3 Column 5</td>
<td>Row 3 Column 6</td>
</tr>
<tr class="even">
<td>Row 4 Column 1</td>
<td>Row 4 Column 2</td>
<td>Row 4 Column 3</td>
<td>Row 4 Column 4</td>
<td>Row 4 Column 5</td>
<td>Row 4 Column 6</td>
</tr>
<tr class="odd">
<td>Row 5 Column 1</td>
<td>Row 5 Column 2</td>
<td>Row 5 Column 3</td>
<td>Row 5 Column 4</td>
<td>Row 5 Column 5</td>
<td>Row 5 Column 6</td>
</tr>
<tr class="even">
<td>Row 6 Column 1</td>
<td>Row 6 Column 2</td>
<td>Row 6 Column 3</td>
<td>Row 6 Column 4</td>
<td>Row 6 Column 5</td>
<td>Row 6 Column 6</td>
</tr>
</tbody>
</table>
</div>
<hr />
<div id="form-samples">
<form method="post" action="./">
<fieldset>
<legend>Legend</legend>
<p>
<label for="text-input">Text Input</label>
<input id="text-input" name="text-input" type="text" value="Text Input" />
</p>
<p>
<label for="password-input">Password Input</label>
<input id="password-input" name="password-input" type="password" value="Password Input" />
</p>
<p>
<label for="radio1-input">Radio 1 Input</label>
<input id="radio1-input" name="radio-input" type="radio" value="1" />
<label for="radio2-input">Radio 2 Input</label>
<input id="radio2-input" name="radio-input" type="radio" value="2" />
</p>
<p>
<label for="checkbox1-input">checkbox 1 Input</label>
<input id="checkbox1-input" name="checkbox1-input" type="checkbox" value="1" />
<label for="checkbox2-input">checkbox 2 Input</label>
<input id="checkbox2-input" name="checkbox2-input" type="checkbox" value="2" />
</p>
<p>
<label for="select-input">Select Box</label>
<select id="select-input" name="select-input">
<optgroup label="1 thru 3">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</p>
<p>
<label for="textarea-input">Textarea Input</label>
<textarea id="textarea-input" name="textarea-input" rows="20" cols="40">This is a textarea.</textarea>
</p>
<input type="submit" />
<input type="reset" />
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div id="footer">
<p>Copyright &copy; 2001-2009 One Good Company</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment