Przejdź do treści

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 />


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.

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>
  1. 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
  2. Punkt 2
  3. 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
<th class="col">...</th>
Nazwa

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
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.
Dodane przez: Sławomir Kokłowski
Tytuł newsa
Dodano: 2006.11.30
  1. 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.
  2. 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.
  3. 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.
Dodane przez: Sławomir Kokłowski
Tytuł newsa
Dodano: 2006.11.30
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
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.
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.
Lorem ipsum
  1. link
  2. link
  3. link
Button