TYPO3 Reea Blog

This will be shown to users with no Flash or Javascript.

Codul HTML


<h1 style="margin-top:0">Base Elements for Styling Check</h1>
	<p>Following are most, if not all, of the HTML elements you will use in your day-to-day work. They are virgin elements, in that, they have no classes or ids applied. This way you know how your base styling looks. You can use this page to check your styling as you adjust CSS.</p>
	<p>You can also add classes to various elements to see how they perform with the classes.</p>
<h1>XHTML Elements</h1>
		<h3>-------------------------------------<br />Paragraphs</h3>
		<p>This is the first paragraph. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. Maecenas lacus pede, imperdiet at, ullamcorper nec, fermentum vel, ipsum. Vivamus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt, pede sed sagittis viverra, tortor turpis dapibus enim, a vehicula pede quam vel lorem.</p>
		<p>This is second paragraph. Use this paragraph to see what the before and after margins of a paragraph look like between otehr paragraphs. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. Maecenas lacus pede, imperdiet at, ullamcorper nec, fermentum vel, ipsum. Vivamus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt, pede sed sagittis viverra, tortor turpis dapibus enim, a vehicula pede quam vel lorem.</p>
		<p>This is third paragraph. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. Maecenas lacus pede, imperdiet at, ullamcorper nec, fermentum vel, ipsum. Vivamus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt, pede sed sagittis viverra, tortor turpis dapibus enim, a vehicula pede quam vel lorem.</p>
		<h3>-------------------------------------<br />Text</h3>
		<div><b>This is bold Text</b></div>
		<div><i>This is italic text</i></div>
		<div><strong>This is strong text</strong></div>
		<div><em>This is emphasized text</em></div>
		<div><a href="#">This is a linked text</a></div>
		<div>This is <sup>superscripted text</sup></div>
		<div>This is <sub>subscripted text</sub></div>
		<div><cite>This is a citation</cite></div>
		<div><q>This is quoted text</q></div>
		<div><ins>This is inserted text</ins></div>
		<div><del>This is deleted text</del></div>
		<div><kbd>This is keyboard text</kbd></div>
		<div><samp>This is sample text</samp></div>
		<div>This is bi-dierectional text with dir attribute of rtl beginning here: <bdo dir="rtl">This is bi-directional text</bdo></div>
		<div>This is a <var>variable</var></div>
		<div><dfn title="This is my definition">Definition</dfn></div>
		<h3>-------------------------------------<br />Headlines</h3>
		<h1>This is an H1 Headline</h1>
		<h2>This is an H2 Headline</h2>
		<h3>This is an H3 Headline</h3>
		<h4>This is an H4 Headline</h4>
		<h5>This is an H5 Headline</h5>
		<h6>This is an H6 Headline</h6>
		<h3>-------------------------------------<br />Headlines with Paragraph</h3>
		<h1>This is an H1 Headline</h1>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.</p>
		<h2>This is an H2 Headline</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.</p>
		<h3>This is an H3 Headline</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.</p>
		<h4>This is an H4 Headline</h4>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.</p>
		<h5>This is an H5 Headline</h5>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.</p>
		<h6>This is an H6 Headline</h6>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.</p>
		<h3>-------------------------------------<br />Blockquote</h3>
		<blockquote>
			Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. Maecenas lacus pede, imperdiet at, ullamcorper nec, fermentum vel, ipsum. Vivamus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt, pede sed sagittis viverra, tortor turpis dapibus enim, a vehicula pede quam vel lorem.
		</blockquote>
		<h3>-------------------------------------<br />Nested Blockquotes</h3>
		<blockquote>
			Level 1. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim.  tortor turpis dapibus enim, a vehicula pede quam vel lorem.
				<blockquote>
					Level 2. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim.  tortor turpis dapibus enim, a vehicula pede quam vel lorem.
						<blockquote>
							Level 3. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim.  tortor turpis dapibus enim, a vehicula pede quam vel lorem.
						</blockquote>
				</blockquote>
		</blockquote>
		<h3>-------------------------------------<br />Definition Term</h3> 
		<dl>
			<dt>Definition Term 1</dt>
				<dd>Definition Description 1</dd>
				<dd>Definition Description 2</dd>
				<dd>Definition Description 3</dd>
			<dt>Definition Term 2</dt>
				<dd>Definition Description 1</dd>
				<dd>Definition Description 2</dd>
				<dd>Definition Description 3</dd>
		</dl>
		<h3>-------------------------------------<br />Unordered List</h3>
		<ul>
		  <li>Unordered List Item One</li>
		  <li>Unordered List Item Two</li>
		  <li>Unordered List Item Two</li>
		</ul>
		<h3>-------------------------------------<br />Ordered List</h3>
		<ol>
		  <li>Ordered List Item One</li>
		  <li>Ordered List Item Two</li>
		  <li>Ordered List Item Two</li>
		</ol>
		<h3>-------------------------------------<br />Unordered List with Nested Unordered Lists</h3>
		<ul>
			<li>Unordered List Item One
				<ul>
					<li>Nested Level 2 Unordered List Item One
						<ul>
							<li>Nested Level 3 Unordered List Item One</li>
							<li>Nested Level 3 Unordered List Item Two</li>
							<li>Nested Level 3 Unordered List Item Three</li>
						</ul>
					</li>
					<li>Nested Level 2 Unordered List Item Two</li>
					<li>Nested Level 2 Unordered List Item Three</li>
				</ul>
			</li>
			<li>Unordered List Item Two</li>
			<li>Unordered List Item Three</li>
		</ul>
		<h3>-------------------------------------<br />Ordered List with Nested Ordered Lists</h3>
		<ol>
			<li>Ordered List Item One
				<ol>
					<li>Nested Level 2 Ordered List Item One
						<ol>
							<li>Nested Level 3 Ordered List Item One</li>
							<li>Nested Level 3 Ordered List Item Two</li>
							<li>Nested Level 3 Ordered List Item Three</li>
						</ol>
					</li>
					<li>Nested Level 2 Ordered List Item Two</li>
					<li>Nested Level 2 Ordered List Item Three</li>
				</ol>
			</li>
			<li>Ordered List Item Two</li>
			<li>Ordered List Item Three</li>
		</ol>
		<h3>-------------------------------------<br />Abbreviation</h3>
		<abbr>This is an abbreviation</abbr>
		<h3>-------------------------------------<br />Acronym</h3>
		<acronym>This is an acronym</acronym>
		<h3>-------------------------------------<br />Address</h3>
		<address>
		This is an address
		</address>
		<h3>-------------------------------------<br />Preformatted Text</h3>
		<pre>
This is preformatted text with a return placed here
New line begins here 
	New line with tab here
New line with multiple sapces here      spaces end
		</pre>
		<h3>-------------------------------------<br />Computer Code</h3>
		<code>
&lt;div&gt;
	&lt;h1&gt;This my code for a headline&lt;/h1&gt;
	&lt;p&gt;This is my code for a paragraph&lt;/p&gt;	
&lt;/div&gt;

		</code>
		<h3>-------------------------------------<br />Computer Code   with pre tag</h3>
		<pre>
		<code>
This is how the same computer code as above 
will look when surrounded by the pre tag
&lt;div&gt;
	&lt;h1&gt;This my code for a headline&lt;/h1&gt;
	&lt;p&gt;This is my code for a paragraph&lt;/p&gt;	
&lt;/div&gt;
		</code>
		</pre>
		<h3>-------------------------------------<br />Simple 3 row, 4 column Table</h3>
		<table>
			<tr>
				<td>r1c1</td>
				<td>r1c2</td>
				<td>r1c3</td>
				<td>r1c4</td>
			</tr>
			<tr>
				<td>r2c1</td>
				<td>r2c2</td>
				<td>r2c3</td>
				<td>r2c4</td>
			</tr>
			<tr>
				<td>r3c1</td>
				<td>r3c2</td>
				<td>r3c3</td>
				<td>r3c4</td>
			</tr>
		</table>
		<h3>-------------------------------------<br />Complex Table with Column Groups</h3>
		<table>
			<caption>
				My Table Caption
			</caption>
			<colgroup />
			<colgroup />
			<colgroup id="col-test"> <col /><col /><col /> </colgroup>
			<thead>
				<tr>
					<td colspan="2"></td>
					<th scope="colgroup" colspan="3">Column Group A</th>
				</tr>
				<tr>
					<td></td>
					<th scope="col" rowspan="2">Column 1</th>
					<th scope="col" >Group A1</th>
					<th scope="col">Group A2</th>
					<th scope="col">Group A3</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<td></td>
					<th scope="col" rowspan="2">Column 1</th>
					<th scope="col" >Group A1</th>
					<th scope="col">Group A2</th>
					<th scope="col">Group A3</th>
				</tr>
				<tr>
					<td colspan="2"></td>
					<th scope="colgroup" colspan="3">Column Group A</th>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<th scope="row">Description Row 1</th>
					<td>r1c2</td>
					<td>r1c3</td>
					<td>r1c4</td>
					<td>r1c5</td>
				</tr>
				<tr>
					<th scope="row">Description Row 2</th>
					<td>r2c2</td>
					<td>r2c3</td>
					<td>r2c4</td>
					<td>r2c5</td>
				</tr>
				<tr>
					<th scope="row">Description Row 2</th>
					<td>r3c1</td>
					<td>r3c3</td>
					<td>r3c4</td>
					<td>r3c5</td>
				</tr>
			</tbody>
		</table>
		<h3>-------------------------------------<br />Forms</h3>
		<form action="post">
			<div>
				<p>Input field follows:</p>
				<input value="This is the default value" />
			</div>
			<div>
				<p>Input field of type password follows:</p> 
					<input type="password" value="myPassword" />
			</div>
			<div>
				<p>Input field of type radio follows:</p> 
					<input type="radio" name="RadioGroup1" value="Radio 1" />Radio 1
					<input type="radio" name="RadioGroup1" value="Radio 2 (default)" checked="checked" />Radio 2 (default)
					<input type="radio" name="RadioGroup1" value="Radio 3" />Radio 3
			</div>
			<div>
				<p>Input field of type Checkbox follows:</p> 
					<input type="checkbox" name="Check1" value="Check 1" />Check 1
					<input type="checkbox" name="Check2" value="Check 2" />Check 2 
					<input type="checkbox" name="Check3" value="Check 3" checked="checked" />Check 3 (default)
			</div>
			<div>
				<p>Input field of type button follows:</p> 
					<input type="button" value="Input Button" />
			</div>
			<div>
				<p>Input field of type submit follows:</p> 
					<input type="submit" name="Submit" value="Submit This Now" />
			</div>
			<div>
				<p>Input field of type file follows:</p> 
					<input type="file" />
			</div>
			<div>
				<p>Button of type submit:</p> 
					<button type="submit">My Submit</button>
			</div>
			<div>
				<p>TestArea field follows:</p> <textarea cols="40" rows="4">This is the default value</textarea>
			</div>
			<div><p>Select field follows:</p>
				<select>
					<option>Option 1</option>
					<option>Option 2</option>
					<option>Option 2</option>
				</select>
			</div>
			<div><p>Select field with multiple follows:</p>
				<select multiple="multiple">
					<option>Option 1</option>
					<option>Option 2</option>
					<option>Option 2</option>
				</select>
			</div>
			<div><p>Select field with option groups follow (click to view):</p>
				<select>
					<optgroup label="Group 1">
						<option>Option 1, Group 1</option>
						<option>Option 2, Group 1</option>
						<option>Option 2, Group 1</option>
					</optgroup>
					<optgroup label="Group 2">
						<option>Option 1, Group 2</option>
						<option>Option 2, Group 2</option>
						<option>Option 2, Group 2</option>
					</optgroup>
				</select>
			</div>
			<div><p>Field label:</p>
				<label>
					My Special Field Label
				</label>
			</div>
			<div><p>Fieldset with label:</p>
				<fieldset>
					<legend>My Legend for this fieldset</legend>
					<input value="Input field inside frameset" /><br />
					<input value="Input field inside frameset" />
				</fieldset>
			</div>
		</form>

Base Elements for Styling Check

Following are most, if not all, of the HTML elements you will use in your day-to-day work. They are virgin elements, in that, they have no classes or ids applied. This way you know how your base styling looks. You can use this page to check your styling as you adjust CSS.

You can also add classes to various elements to see how they perform with the classes.

XHTML Elements

-------------------------------------
Paragraphs

This is the first paragraph. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. Maecenas lacus pede, imperdiet at, ullamcorper nec, fermentum vel, ipsum. Vivamus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt, pede sed sagittis viverra, tortor turpis dapibus enim, a vehicula pede quam vel lorem.

This is second paragraph. Use this paragraph to see what the before and after margins of a paragraph look like between otehr paragraphs. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. Maecenas lacus pede, imperdiet at, ullamcorper nec, fermentum vel, ipsum. Vivamus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt, pede sed sagittis viverra, tortor turpis dapibus enim, a vehicula pede quam vel lorem.

This is third paragraph. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. Maecenas lacus pede, imperdiet at, ullamcorper nec, fermentum vel, ipsum. Vivamus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt, pede sed sagittis viverra, tortor turpis dapibus enim, a vehicula pede quam vel lorem.

-------------------------------------
Text

This is bold Text
This is italic text
This is strong text
This is emphasized text
This is superscripted text
This is subscripted text
This is a citation
This is quoted text
This is inserted text
This is deleted text
This is keyboard text
This is sample text
This is bi-dierectional text with dir attribute of rtl beginning here: This is bi-directional text
This is a variable
Definition

-------------------------------------
Headlines

This is an H1 Headline

This is an H2 Headline

This is an H3 Headline

This is an H4 Headline

This is an H5 Headline
This is an H6 Headline

-------------------------------------
Headlines with Paragraph

This is an H1 Headline

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.

This is an H2 Headline

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.

This is an H3 Headline

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.

This is an H4 Headline

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.

This is an H5 Headline

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.

This is an H6 Headline

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.

-------------------------------------
Blockquote

Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. Maecenas lacus pede, imperdiet at, ullamcorper nec, fermentum vel, ipsum. Vivamus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt, pede sed sagittis viverra, tortor turpis dapibus enim, a vehicula pede quam vel lorem.

-------------------------------------
Nested Blockquotes

Level 1. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. tortor turpis dapibus enim, a vehicula pede quam vel lorem.
Level 2. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. tortor turpis dapibus enim, a vehicula pede quam vel lorem.
Level 3. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. tortor turpis dapibus enim, a vehicula pede quam vel lorem.

-------------------------------------
Definition Term

Definition Term 1
Definition Description 1
Definition Description 2
Definition Description 3
Definition Term 2
Definition Description 1
Definition Description 2
Definition Description 3

-------------------------------------
Unordered List

  • Unordered List Item One
  • Unordered List Item Two
  • Unordered List Item Two

-------------------------------------
Ordered List

  1. Ordered List Item One
  2. Ordered List Item Two
  3. Ordered List Item Two

-------------------------------------
Unordered List with Nested Unordered Lists

  • Unordered List Item One
    • Nested Level 2 Unordered List Item One
      • Nested Level 3 Unordered List Item One
      • Nested Level 3 Unordered List Item Two
      • Nested Level 3 Unordered List Item Three
    • Nested Level 2 Unordered List Item Two
    • Nested Level 2 Unordered List Item Three
  • Unordered List Item Two
  • Unordered List Item Three

-------------------------------------
Ordered List with Nested Ordered Lists

  1. Ordered List Item One
    1. Nested Level 2 Ordered List Item One
      1. Nested Level 3 Ordered List Item One
      2. Nested Level 3 Ordered List Item Two
      3. Nested Level 3 Ordered List Item Three
    2. Nested Level 2 Ordered List Item Two
    3. Nested Level 2 Ordered List Item Three
  2. Ordered List Item Two
  3. Ordered List Item Three

-------------------------------------
Abbreviation

This is an abbreviation

-------------------------------------
Acronym

This is an acronym

-------------------------------------
Address

This is an address

-------------------------------------
Preformatted Text

This is preformatted text with a return placed here
New line begins here 
	New line with tab here
New line with multiple sapces here      spaces end
		

-------------------------------------
Computer Code

<div> <h1>This my code for a headline</h1> <p>This is my code for a paragraph</p> </div>

-------------------------------------
Computer Code with pre tag

		
This is how the same computer code as above 
will look when surrounded by the pre tag
<div>
	<h1>This my code for a headline</h1>
	<p>This is my code for a paragraph</p>	
</div>
		
		

-------------------------------------
Simple 3 row, 4 column Table

r1c1 r1c2 r1c3 r1c4
r2c1 r2c2 r2c3 r2c4
r3c1 r3c2 r3c3 r3c4

-------------------------------------
Complex Table with Column Groups

My Table Caption
Column Group A
Column 1 Group A1 Group A2 Group A3
Column 1 Group A1 Group A2 Group A3
Column Group A
Description Row 1 r1c2 r1c3 r1c4 r1c5
Description Row 2 r2c2 r2c3 r2c4 r2c5
Description Row 2 r3c1 r3c3 r3c4 r3c5

-------------------------------------
Forms

Input field follows:

Input field of type password follows:

Input field of type radio follows:

Radio 1 Radio 2 (default) Radio 3

Input field of type Checkbox follows:

Check 1 Check 2 Check 3 (default)

Input field of type button follows:

Input field of type submit follows:

Input field of type file follows:

Button of type submit:

TestArea field follows:

Select field follows:

Select field with multiple follows:

Select field with option groups follow (click to view):

Field label:

Fieldset with label:

My Legend for this fieldset

CSS pentru styled content


.main ul,
.main ol {
	margin-left:20px;
}

.main ul li {
	list-style:disc;
}

.main ol li {
	list-style-type: decimal;
}

.main blockquote {
	margin-left:20px;
}
.main p {
	padding-bottom:15px;
}
blog comments powered by Disqus