Kurs HTML - Przewodnik po strukturze i klasach dokumentu

Struktura elementów

<!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="pl" lang="pl">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
		<title>...</title>
	</head>
	<body>
		<div id="TOP">
			<div id="BODY">
				<div id="HEADER">
					<h1><a href="?"><strong>Kurs HTML</strong><b> - strona WWW za darmo</b></a></h1>
					<ul>
						<li>...</li>
						<li>...</li>
						<li>...</li>
					</ul>
				</div>
				<div id="MAIN">
					<div id="MENU">
						<dl id="MAIN_MENU">
							<dt><span>HTML</span></dt>
							<dd><a href="?">...</a></dd>
							<dd><a href="?">...</a></dd>
							<dd><a href="?">...</a></dd>
							<dd><b>Dodatki</b></dd>
							<dd><a href="?">...</a></dd>
							<dd><a href="?">...</a></dd>
							<dt><span>CSS</span></dt>
							<dd><a href="?">...</a></dd>
							<dd><a href="?">...</a></dd>
							<dd><b>Selektory</b></dd>
							<dd><a href="?">...</a></dd>
							<dd><a href="?">...</a></dd>
							<dd><b>Własności</b></dd>
							<dd><a href="?">...</a></dd>
							<dd><a href="?">...</a></dd>
							<dd><a href="?">...</a></dd>
							<dd><b>Dodatki</b></dd>
							<dd><a href="?">...</a></dd>
							<dd><a href="?">...</a></dd>
							<dt><span>Skrypty</span></dt>
							<dd><a href="?">...</a></dd>
							<dd><a href="?">...</a></dd>
							<dd><a href="?">...</a></dd>
							<dd><b>Inne</b></dd>
							<dd><a href="?">...</a></dd>
							<dt><span>Informacje</span></dt>
							<dd><a href="?">...</a></dd>
							<dd><a href="?">...</a></dd>
							<dd><a href="?">...</a></dd>
						</dl>
						<div id="INFO">
							<div class="reklama"><a href="?"><img src="pliki/boo.gif" alt="boo.pl" title="Konto WWW za 1 SMS" style="width: 140px; height: 60px; border: 0" /></a></div>
							<div id="SEARCH">
								<form action="?" method="get"><div>
										<input type="text" class="text" />
										<input type="submit" value="Szukaj" class="button" />
								</div></form>
								<div>
									<span><input type="radio" id="wyszukiwarka0" name="wyszukiwarka" value="0" checked="checked" style="vertical-align: middle" /><label for="wyszukiwarka0">Indeks</label></span>
									<span><input type="radio" id="wyszukiwarka1" name="wyszukiwarka" value="1" style="vertical-align: middle" /><label for="wyszukiwarka1">Wyszukiwarka</label></span>
									<span><input type="radio" id="wyszukiwarka2" name="wyszukiwarka" value="2" style="vertical-align: middle" /><label for="wyszukiwarka2">Google</label></span>
								</div>
							</div>
							<div class="box">
								<div class="header"><a href="?">Porady</a></div>
								<ul>
									<li class="row1"><a href="?">...</a></li>
									<li class="row2"><a href="?">...</a></li>
									<li class="row1"><a href="?">...</a></li>
								</ul>
							</div>
							<div class="box">
								<div class="header"><a href="?">Na forum</a></div>
								<ul>
									<li class="row1"><a href="?">...</a></li>
									<li class="row2"><a href="?">...</a></li>
									<li class="row1"><a href="?">...</a></li>
								</ul>
							</div>
							<div class="box">
								<div class="header">Reklama</div>
								<ul>
									<li class="row1"><a href="?">...</a></li>
									<li class="row2"><a href="?">...</a></li>
									<li class="row1"><a href="?">...</a></li>
								</ul>
							</div>
							<div class="reklama">
								<a href="?" style="margin: 1px"><img src="..." alt="" style="width: 88px; height: 31px; border: 0" /></a><a href="?" style="margin: 1px"><img src="..." alt="" style="width: 88px; height: 31px; border: 0" /></a><a href="?" style="margin: 1px"><img src="..." alt="" style="width: 88px; height: 31px; border: 0" /></a><a href="?" style="margin: 1px"><img src="..." alt="" style="width: 88px; height: 31px; border: 0" /></a>
							</div>
						</div>
					</div>
					<div id="CONTENT">
						<div class="CONTENT">
							<h1>...</h1>
							<h2>...</h2>
							<p>...</p>
							<ul class="NAV">
								<li class="PREV"><a href="?" title="Wstecz">...</a></li>
								<li class="NEXT"><a href="?" title="Dalej">...</a></li>
							</ul>
							<ul class="PAG_NAV">
								<li class="TOP"><a href="#TOP">Do&nbsp;góry</a></li>
								<li class="HOME"><a href="?">Strona&nbsp;główna</a></li>
								<li class="PRINT"><a href="?">Drukuj&nbsp;rozdział</a></li>
								<li class="COMMENT"><a href="?">Komentarze</a></li>
							</ul>
							<div class="reklama">
								<div>REKLAMA</div>
								<a href="?"><img src="..." alt="?" style="width: 450px; height: 50px; border: 0" /></a>
							</div>
						</div>
					</div>
				</div>
				<div id="FOOTER">
					<strong>&copy; 2002-2006 <a href="info/kontakt.html">Sławomir&nbsp;Kokłowski</a></strong> <a href="rss/?a=channel&amp;id=1" class="RSS"><img src="pliki/rss.gif" alt="RSS" title="Subskrybuj nowości" /></a>
					<div class="COPYRIGHT">Publikacja materiałów bez zgody autora zabroniona (<a href="info/copyright.html">zasady&nbsp;korzystania</a>).</div>
					<div>Protected by <a href="http://www.bowi.org.pl">BOWI&nbsp;Group</a></div>
				</div>
			</div>
		</div>
	</body>
</html>

<h2>Tytuł podrozdziału</h2>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan. Etiam nulla lectus, consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim. Pellentesque lectus enim, eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat. Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.

Fusce in arcu ultricies tortor volutpat tristique. Curabitur condimentum odio id orci. Donec fringilla metus et enim. Nam feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ut libero non purus mattis adipiscing. Aliquam tortor lectus, vestibulum ac, porttitor at, adipiscing porta, leo. Mauris a metus. Nam venenatis pede at lorem. Morbi at neque. Proin consequat magna vitae est. In suscipit. Etiam tortor ante, blandit eu, gravida in, rhoncus ac, lectus. Proin posuere. Proin dignissim nisi vitae magna. Etiam ac lectus. Nunc placerat laoreet erat. Praesent lectus elit, nonummy in, egestas ut, tempus ac, quam.

<h3>Tytuł punktu</h3>

Poniżej pozioma linia <hr />

Elementy

<abbr>skrót</abbr>, <acronym>akronim</acronym>, <code>fragment kodu</code>, <kbd>tekst do wprowadzenia</kbd>, <code><var>wartość zmienna wewnątrz fragmentu kodu</var></code>, <samp>przykład</samp>

Składnia polecenia

Jeżeli ustawiony styl inny niż overflow: visible, wysokość bloku jest automatycznie dopasowywana do wysokości okna przeglądarki.

<pre class="skladnia">...</pre>

To jest blok składni. Może zawierać zmienne...

<div class="parametry">...</div>

Poniżej bloku składni znajduje się zwykle opis parametrów. Może zawierać zmienne oraz wartości, które zmienne mogą przyjmować. Może się składać z listy:

wartość - opis wartości
wartość - opis wartości
wartość - opis wartości

Może też zawierać listę definicyjną:

zmienna

Opis zmiennej

zmienna

Opis zmiennej

zmienna

wartość - opis wartości
wartość - opis wartości
wartość - opis wartości

Kod źródłowy

Jeżeli ustawiony styl inny niż overflow: visible, wysokość bloku jest automatycznie dopasowywana do wysokości okna przeglądarki.

<p class="zaznacz"><a href="...">Zaznacz kod</a></p>

<pre class="html">...</pre>

<samp title="Przykład">To jest przykład</samp>
<samp title="Przykład">To jest przykład</samp>
<samp title="Przykład">To jest przykład</samp>
<samp title="Przykład">To jest przykład</samp>
<samp title="Przykład">To jest przykład</samp>

<p class="zaznacz"><a href="...">Zaznacz kod</a></p>

<pre class="css">...</pre>

a:hover { color: red }
a:hover { color: red }
a:hover { color: red }
a:hover { color: red }
a:hover { color: red }

<p class="zaznacz"><a href="...">Zaznacz kod</a></p>

<pre class="kod">...</pre>

To jest ogólny blok kodu, np. JavaScript.
Może zawierać zmienne oraz wyróżnienia.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan.
Etiam nulla lectus, consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim.
Pellentesque lectus enim, eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat.
Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.

Fusce in arcu ultricies tortor volutpat tristique.
Curabitur condimentum odio id orci.
Donec fringilla metus et enim.
Nam feugiat.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Phasellus ut libero non purus mattis adipiscing.
Aliquam tortor lectus, vestibulum ac, porttitor at, adipiscing porta, leo.
Mauris a metus.
Nam venenatis pede at lorem.
Morbi at neque.
Proin consequat magna vitae est.
In suscipit.
Etiam tortor ante, blandit eu, gravida in, rhoncus ac, lectus.
Proin posuere.
Proin dignissim nisi vitae magna.
Etiam ac lectus.
Nunc placerat laoreet erat.
Praesent lectus elit, nonummy in, egestas ut, tempus ac, quam.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan.
Etiam nulla lectus, consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim.
Pellentesque lectus enim, eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat.
Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.

Fusce in arcu ultricies tortor volutpat tristique.
Curabitur condimentum odio id orci.
Donec fringilla metus et enim.
Nam feugiat.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Phasellus ut libero non purus mattis adipiscing.
Aliquam tortor lectus, vestibulum ac, porttitor at, adipiscing porta, leo.
Mauris a metus.
Nam venenatis pede at lorem.
Morbi at neque.
Proin consequat magna vitae est.
In suscipit.
Etiam tortor ante, blandit eu, gravida in, rhoncus ac, lectus.
Proin posuere.
Proin dignissim nisi vitae magna.
Etiam ac lectus.
Nunc placerat laoreet erat.
Praesent lectus elit, nonummy in, egestas ut, tempus ac, quam.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan.
Etiam nulla lectus, consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim.
Pellentesque lectus enim, eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat.
Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.

Fusce in arcu ultricies tortor volutpat tristique.
Curabitur condimentum odio id orci.
Donec fringilla metus et enim.
Nam feugiat.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Phasellus ut libero non purus mattis adipiscing.
Aliquam tortor lectus, vestibulum ac, porttitor at, adipiscing porta, leo.
Mauris a metus.
Nam venenatis pede at lorem.
Morbi at neque.
Proin consequat magna vitae est.
In suscipit.
Etiam tortor ante, blandit eu, gravida in, rhoncus ac, lectus.
Proin posuere.
Proin dignissim nisi vitae magna.
Etiam ac lectus.
Nunc placerat laoreet erat.
Praesent lectus elit, nonummy in, egestas ut, tempus ac, quam.

Wskazówki, uwagi, informacje...

<div class="wskazowka">...</div>

To jest wskazówka. Zawiera przydatne informacje.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan. Etiam nulla lectus, consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim. Pellentesque lectus enim, eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat. Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.

<div class="uwaga">...</div>

UWAGA!
To jest uwaga. Zawiera ważne informacje, które powinny zostać zauważone.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan. Etiam nulla lectus, consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim. Pellentesque lectus enim, eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat. Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.

<div class="wazne">...</div>

To jest bardzo ważna informacja. Nie może ujść uwadze czytelnika!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan. Etiam nulla lectus, consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim. Pellentesque lectus enim, eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat. Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.

<div class="deprecated">...</div>

To jest informacja o ZNACZNIKACH i ATRYBUTACH zdeprecjonowanych w HTML 4.01.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan. Etiam nulla lectus, consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim. Pellentesque lectus enim, eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat. Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.

Odstępy

<ul class="odstep">...</ul>

To jest lista z dodatkowymi odstępami pomiędzy kolejnymi punktami.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan. Etiam nulla lectus, consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim. Pellentesque lectus enim, eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat. Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.
Fusce in arcu ultricies tortor volutpat tristique. Curabitur condimentum odio id orci. Donec fringilla metus et enim. Nam feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ut libero non purus mattis adipiscing. Aliquam tortor lectus, vestibulum ac, porttitor at, adipiscing porta, leo. Mauris a metus. Nam venenatis pede at lorem. Morbi at neque. Proin consequat magna vitae est. In suscipit. Etiam tortor ante, blandit eu, gravida in, rhoncus ac, lectus. Proin posuere. Proin dignissim nisi vitae magna. Etiam ac lectus. Nunc placerat laoreet erat. Praesent lectus elit, nonummy in, egestas ut, tempus ac, quam.

<dl class="odstep">...</dl>

Termin: To jest lista definicyjna z dodatkowymi odstępami pomiędzy kolejnymi elementami.
Termin: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan. Etiam nulla lectus, consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim. Pellentesque lectus enim, eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat. Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.
Termin: Fusce in arcu ultricies tortor volutpat tristique. Curabitur condimentum odio id orci. Donec fringilla metus et enim. Nam feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ut libero non purus mattis adipiscing. Aliquam tortor lectus, vestibulum ac, porttitor at, adipiscing porta, leo. Mauris a metus. Nam venenatis pede at lorem. Morbi at neque. Proin consequat magna vitae est. In suscipit. Etiam tortor ante, blandit eu, gravida in, rhoncus ac, lectus. Proin posuere. Proin dignissim nisi vitae magna. Etiam ac lectus. Nunc placerat laoreet erat. Praesent lectus elit, nonummy in, egestas ut, tempus ac, quam.

Listy plus/minus

<ul class="plus">...</ul>

Plus
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan. Etiam nulla lectus, consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim. Pellentesque lectus enim, eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat. Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.
Fusce in arcu ultricies tortor volutpat tristique. Curabitur condimentum odio id orci. Donec fringilla metus et enim. Nam feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ut libero non purus mattis adipiscing. Aliquam tortor lectus, vestibulum ac, porttitor at, adipiscing porta, leo. Mauris a metus. Nam venenatis pede at lorem. Morbi at neque. Proin consequat magna vitae est. In suscipit. Etiam tortor ante, blandit eu, gravida in, rhoncus ac, lectus. Proin posuere. Proin dignissim nisi vitae magna. Etiam ac lectus. Nunc placerat laoreet erat. Praesent lectus elit, nonummy in, egestas ut, tempus ac, quam.

<ul class="minus">...</ul>

Minus
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan. Etiam nulla lectus, consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim. Pellentesque lectus enim, eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat. Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.
Fusce in arcu ultricies tortor volutpat tristique. Curabitur condimentum odio id orci. Donec fringilla metus et enim. Nam feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ut libero non purus mattis adipiscing. Aliquam tortor lectus, vestibulum ac, porttitor at, adipiscing porta, leo. Mauris a metus. Nam venenatis pede at lorem. Morbi at neque. Proin consequat magna vitae est. In suscipit. Etiam tortor ante, blandit eu, gravida in, rhoncus ac, lectus. Proin posuere. Proin dignissim nisi vitae magna. Etiam ac lectus. Nunc placerat laoreet erat. Praesent lectus elit, nonummy in, egestas ut, tempus ac, quam.

Mapa serwisu

<ol class="lista">...</ol>

Punkt 1
1. Punkt 1.1
  1. Punkt 1.1.1
  2. Punkt 1.1.2
  3. Punkt 1.1.3
2. Punkt 1.2
3. Punkt 1.3
Punkt 2
Punkt 3

Wprowadzenie do rozdziału

<ul class="linki">...</ul>

Specjalna lista definicyjna

<dl class="dl">...</dl>

Termin: Definicja
Termin: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan. Etiam nulla lectus, consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim. Pellentesque lectus enim, eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat. Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.
Termin: Fusce in arcu ultricies tortor volutpat tristique. Curabitur condimentum odio id orci. Donec fringilla metus et enim. Nam feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ut libero non purus mattis adipiscing. Aliquam tortor lectus, vestibulum ac, porttitor at, adipiscing porta, leo. Mauris a metus. Nam venenatis pede at lorem. Morbi at neque. Proin consequat magna vitae est. In suscipit. Etiam tortor ante, blandit eu, gravida in, rhoncus ac, lectus. Proin posuere. Proin dignissim nisi vitae magna. Etiam ac lectus. Nunc placerat laoreet erat. Praesent lectus elit, nonummy in, egestas ut, tempus ac, quam.

Specjalna tabela

<table class="table">...</table>

Tytuł tabeli
Nagłówek	Nagłówek	Nagłówek
Zawartość komórki	Zawartość komórki	Zawartość komórki
Zawartość komórki	Zawartość komórki	Zawartość komórki
Zawartość komórki	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan. Etiam nulla lectus, consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim. Pellentesque lectus enim, eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat. Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.	Fusce in arcu ultricies tortor volutpat tristique. Curabitur condimentum odio id orci. Donec fringilla metus et enim. Nam feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ut libero non purus mattis adipiscing. Aliquam tortor lectus, vestibulum ac, porttitor at, adipiscing porta, leo. Mauris a metus. Nam venenatis pede at lorem. Morbi at neque. Proin consequat magna vitae est. In suscipit. Etiam tortor ante, blandit eu, gravida in, rhoncus ac, lectus. Proin posuere. Proin dignissim nisi vitae magna. Etiam ac lectus. Nunc placerat laoreet erat. Praesent lectus elit, nonummy in, egestas ut, tempus ac, quam.

Generator

<table class="generator">...</table>

Nazwa
Nazwa
<th class="col">...</th>
Wartość...

Inne

<p class="interpretacja">...</p>

To jest informacja o interpretacji polecenia w różnych przeglądarkach.

<p class="przyklad">Przykład:</p>

Przykład:

<p class="zrodlo">Źródło: <a href="..."><cite>...</cite></a></p>

Źródło: Odniesienie do źródła

<p class="zobacz"><a href="...">...</a></p>

[Zobacz więcej...]

<a href="..." class="http" >...</a>

Link zewnętrzny

<b class="ostrzezenie">Ostrzeżenie</b>, <span class="ok">poprawnie</span>, <span class="nok">niepoprawnie</span>

Artykuły

<ul class="artykuly">...</ul>

Tytuł artykułu
Lorem ipsum dolor sit amet consectetuer at Donec Integer Sed Pellentesque. Habitant vitae sem justo sem at turpis leo dis velit leo. Tellus id sit feugiat ligula volutpat Sed id quis Aenean pellentesque. Dapibus magnis velit ut Integer lacinia Proin ante et dui velit. Cursus Nunc Lorem tellus eros suscipit ac Maecenas magnis dictumst sagittis. Neque Phasellus Pellentesque ligula tempus facilisis ante metus.
Tytuł artykułu
Lorem ipsum dolor sit amet consectetuer at Donec Integer Sed Pellentesque. Habitant vitae sem justo sem at turpis leo dis velit leo. Tellus id sit feugiat ligula volutpat Sed id quis Aenean pellentesque. Dapibus magnis velit ut Integer lacinia Proin ante et dui velit. Cursus Nunc Lorem tellus eros suscipit ac Maecenas magnis dictumst sagittis. Neque Phasellus Pellentesque ligula tempus facilisis ante metus.
Tytuł artykułu
Lorem ipsum dolor sit amet consectetuer at Donec Integer Sed Pellentesque. Habitant vitae sem justo sem at turpis leo dis velit leo. Tellus id sit feugiat ligula volutpat Sed id quis Aenean pellentesque. Dapibus magnis velit ut Integer lacinia Proin ante et dui velit. Cursus Nunc Lorem tellus eros suscipit ac Maecenas magnis dictumst sagittis. Neque Phasellus Pellentesque ligula tempus facilisis ante metus.

Newsy

<dl class="news">...</dl>

Tytuł newsa

Dodano: 2006.11.30

Więcej...

Dodane przez: Sławomir Kokłowski

Tytuł newsa

Dodano: 2006.11.30

Lorem ipsum dolor - 87.65%
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan.
Etiam nulla lectus - 76.54%
Consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim.
Pellentesque lectus enim - 65.43%
Eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat. Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.

Więcej...

Dodane przez: Sławomir Kokłowski

Tytuł newsa

Dodano: 2006.11.30

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Więcej...

Dodane przez: Sławomir Kokłowski

Box

<dl class="box">...</dl>

Nagłówek: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque. Nulla facilisi. In interdum urna vitae nisl. Vestibulum at ipsum. Quisque consequat tortor vel urna aliquam accumsan. Etiam nulla lectus, consectetuer eu, hendrerit nec, ultrices eget, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas facilisis ipsum quis enim. Pellentesque lectus enim, eleifend eu, facilisis ac, scelerisque et, sapien. Phasellus interdum. Nullam semper lectus nec odio. Ut placerat. Morbi nec turpis. In volutpat. Nulla venenatis nibh in augue. Cras id quam. Donec nonummy nonummy odio.
Więcej...

Nagłówek

Więcej...

Lorem ipsum