HTMLSandBox is an online html testbed, powered entirely by Javascript. If you download this page and the linked files, it'll run right from your desktop!
All code below is XHTML 1.0 valid.
| Doctypes | |
|---|---|
| XHTML 1.0 Transitional | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| XHTML 1.0 Strict | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| XHTML 1.0 Frameset | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
| Head Elements | |
| Title | <title>Title</title> |
| Content-Type | <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> |
| Author | <meta name="author" content="You" /> |
| Description | <meta name="description" content="About your site." /> |
| Keywords | <meta name="keywords" content="Your keywords." /> |
| Robots | <meta name="robots" content="noindex,noarchive,nofollow" /> |
| Stylesheet | <link rel="stylesheet" type="text/css" media="screen" href="URL" /> |
| Shortcut Icon | <link rel="shortcut icon" type="image/x-icon" href="URL" /> |
| Javascript File | <script type="text/javascript" src="URL"></script> |
| Headings | |
| Heading |
<h1>Heading (1-6)</h1> <h6>Heading (1-6)</h6> |
| Elements | |
| Div | <div>Div</div> |
| Paragraph | <p>Paragraph</p> |
| Preformatted Text | <pre>Text or Code</pre> |
| Blockquote | <blockquote>Quote</blockquote> |
| Dividers | |
| Break | <br /> |
| Horizontal Rule | <hr /> |
| Vertical Rule | <hr style="height: 100px; width: 1px;" /> |
| Text | |
| Italic | <em>Italic</em> |
| Bold | <strong>Bold</strong> |
| Superscript | <sup>Superscript</sup> |
| Subscript | <sub>Subscript</sub> |
| <strike>Strikethrough</strike> | |
| Abbreviation | <abbr title="Abbreviation">Abbr</abbr> |
| Acronym | <acronym title="Acronym">Acronym</acronym> |
| Tables | |
| Table |
<table> <tr> <td>Content<td> </tr> </table> |
| Row |
<tr> <td>Content<td> </tr> |
| Heading | <th>Content<th> |
| Data | <td>Content<td> |
| Lists | |
| Unordered List |
<ul> <li>Item<li> </ul> |
| Ordered List |
<ol> <li>Item<li> </ol> |
| Definition List |
<dl> <dt>Definition Title<dt> <dd>Definition</dd> </dl> |
| Forms | |
| Form | <form method="post" action="result.php></form> |
| Input - Text: | <input type="text" name="fieldName" value="Default Value" /> |
| Input - Password: | <input type="password" name="fieldName" value="Default Value" /> |
| Input - Checkbox: | <input type="checkbox" name="fieldName" checked="checked" /> |
| Input - Radio: | <input type="radio" name="fieldName" checked="checked" /> |
| Input - Button: | <input type="button" name="fieldName" value="Button" /> |
| Input - Submit: | <input type="submit" name="fieldName" value="Submit" /> |
| Select: |
<select name="options"> <option value="1">Option 1</option> <option value="2" selected="selected">Option 2</option> <option value="3">Option 3</option> </select> |
| Textarea: | <textarea rows="2" cols="15">Textarea</textarea> |
| Media | |
| Image | <img src="URL" alt="Image description" /> |
| Flash |
<object data="example.swf" type="application/x-shockwave-flash"> <div>If you can see this message, you do not have flash installed!</div> </object> |
| Miscellaneous | |
| Link (Anchor) | <a href="URL">Link</a> |
| Helpful Links | |
| HTML Validator | W3C HTML Validator |
| HTML Tidy | HTML Tidy (Fixes common HTML errors.) |
| EmEditor | EmEditor (Our text editor of choice.) |
All code below is CSS 2.0 valid.
| Notes | |
|---|---|
| Combining Styles |
You can combine styles. For example: <span style="color: red; font-weight: bold; text-decoration: underline;">Bold, red, and underlined text.</span> |
| Measurement Units |
Millimeters: 10mm; Centimeters: 10cm; Inches: 10in; Picas (1/6in): 10pc; Points (1/72in): 10pt; Pixels: 10px; em-Space: 10em; x-Space: 10ex; Percentage: 10%; |
| Text | |
| Italic | <span style="font-style: italic;">Italic</span> |
| Bold | <span style="font-weight: bold;">Bold</span> |
| Overline | <span style="text-decoration: overline;">Overline</span> |
| Underline | <span style="text-decoration: underline;">Underline</span> |
| Both | <span style="text-decoration: overline underline;">Both</span> |
| Strikethrough | <span style="text-decoration: line-through;">Strikethrough</span> |
| Color | <span style="color: red;">Color</span> |
| Size | <span style="font-size: 10pt;">Size</span> |
| Family | <span style="font-family: Arial;">Family</span> |
Horizontal Center |
<p style="text-align: center;">Center</p> |
Vertical Center |
<p style="vertical-align: middle;">Center</p> |
Text Indent |
<p style="text-indent: 1em;">Indented Text</p> |
| Line Height | <p style="line-height: 14px;">Line Height</p> |
| Element Styles | |
| Padding | <div style="padding: 10px;">Padding</div> |
| Margin | <div style="margin: 10px;">Margin</div> |
| Border Width | <div style="border-width: 2px;">Border Width</div> |
| Border Style | <div style="border-style: solid;">Border Style</div> |
| Border Color | <div style="border-color: #000;">Border Color</div> |
| Background Color | <div style="background-color: #000;">Background Color</div> |
| Background Image | <div style="background-image: url('URL');">Background Image</div> |
| Background Image Repeat | <div style="background-repeat: repeat;">Repeat / Repeat-X / Repeat-Y</div> |
| Helpful Links | |
| CSS Validator | W3C CSS Validator |
| EmEditor | EmEditor (Our text editor of choice.) |