Basic HTML Files

Have you ever needed some basic HTML? Maybe you were setting up a stylesheet and just wanted to copy and paste some HTML with which to work. I have too! That's why I set up these basic HTML files. I've tried to include the most common tags in each. Keep in mind, each preview is loaded using your browser's default styles.


Warning: Undefined variable $linkList in /home/lanczklo/lokowebdesign.com/tool/code/html.php on line 85

Warning: Undefined variable $codeList in /home/lanczklo/lokowebdesign.com/tool/code/html.php on line 88

Downloads

Code

Common HTML Form Tags

Preview:

Code:

<form name="formName" id="formName" action="process.php" method="post">
	<fieldset>
		<legend>Form Legend</legend> <input type="hidden" name="hidden" value="something hidden">
		<p>
			<label for="input1">Label 1</label> <input id="input1" name="input1" type="text">
		</p>
		<p>
			<label>Label 2</label> <input name="radios" type="radio" value="radio 1"> <input name="radios" type="radio" value="radio 2">
		</p>
		<p>
			<label for="input4">Label 3</label> <input name="checks" type="checkbox" value="checkbox 1"> <input name="checks" type="checkbox" value="checkbox 2">
		</p>
		<p>
			<label for="textarea">Label 4</label> 
			<textarea id="textarea" name="textarea">
</textarea>
		</p>
		<p>
			<label for="select">Label 5</label> <select id="select" name="select">
				<option>
					Please choose...
				</option>
				<option value="option 1">
					Option 1
				</option>
				<option value="option 2">
					Option 2
				</option>
			</select>
		</p>
		<p>
			<label for="readonly">Label 6</label> <input type="text" name="readonly" id="readonly" readonly>
		</p>
		<p>
			<label for="file">Label 7</label> <input type="file" name="file" id="file">
		</p>
		<p>
			<input id="submit" name="submit" type="submit" value="Submit">
		</p>
	</fieldset>
</form>

General HTML Tags

Preview:

Code:

<!DOCTYPE html>
<html>
 <head>
  <title>Title Bar</title>
 </head>
 <body>
  <div>
   <h1>Heading 1</h1>
   <p>Paragraph of text with some <strong>bold text</strong> and some <em>italicized text</em>. Also <a href="url">a link</a>.</p>
   <h2>Heading 2</h2>
   <p>Paragraph of text with some <strike>strikethrough text</strike> and some <small>small text</small>. Also <u>underlined text</u>.</p>
   <p><img align="right" src="../../assets/placeholder.png" alt="image"></p>
   <h3>Heading 3</h3>
   <blockquote>Blockquote text</blockquote>
   <hr>
   <p>Paragraph of text and a <span>span</span>.</p>
   <pre>a section inside a pre tag</pre>
   <h4>Heading 4</h4>
   <tt>Why not add some typewriter text?</tt>
   <h5>Heading 5</h5>
   <h6>Heading 6</h6>
  </div>
 </body>
</html>

HTML Tables

Preview:

Code:

<table cellspacing="0" cellpadding="5" border="1">
	<thead>
		<tr>
			<th>column 1 heading</th>
			<th>column 2 heading</th>
			<th>column 3 heading</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>column 1 footer</th>
			<th>column 2 footer</th>
			<th>column 3 footer</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>row 1, column 1</td>
			<td>row 1, column 2</td>
			<td>row 1, column 3</td>
		</tr>
		<tr rowspan="2">
			<td rowspan="2">row 2 and 3, column 1</td>
			<td>row 2, column 2</td>
			<td>row 2, column 3</td>
		</tr>
		<tr>
			<td>row 3, column 2</td>
			<td>row 3, column 3</td>
		</tr>
		<tr>
			<td colspan="2">row 4, column 1 and 2</td>
			<td>row 4, column 3</td>
		</tr>
	</tbody>
</table>

© Loko Web Design

Sponsors Domain names for just 88 cents! Bulletproof your Domain for $4.88 a year!