Kurs HTML, XHTML i CSS z przykładami. Encyklopedyczne kompendium wiedzy każdego webmastera.

Kurs HTML 4.01, XHTML 1.0 i CSS 2 z przykładami
autor: Dariusz Majgier • ostatnia aktualizacja kursu: 2004.06.01

[Start] • [Elementy HTML] • [Atrybuty HTML] • [Style CSS] • [Porady online]
[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

> pobierz najnowszą wersję kursu i poznaj warunki dystrybucji <
Kurs stanowi kompendium wiedzy każdego webmastera i zawiera pełny opis
standardów HTML 4.01, XHTML 1.0 i CSS 2 z przykładami. Główne działy kursu:

Elementy HTML
pełne omówienie
wszystkich poleceń
z przykładami 		Atrybuty HTML
pełne omówienie
wszystkich atrybutów
z przykładami 		Style CSS
pełne omówienie
wszystkich stylów
z przykładami 		Porady online
artykuły, skrypty, faq,
gotowe rozwiązania,
narzędzia, strony www

O kursie
Kilka słów na temat przeznaczenia oraz historia kursu
Sposób opisywania elementów, atrybutów i stylów

Wstęp do HTML i CSS
Zanim stworzysz swoją stronę WWW
Twoja pierwsza strona WWW w 15 minut
Dołączanie i korzystanie ze stylów CSS
Kodowanie polskich znaków w ISO-8859-2
Projektuj strony dostępne dla każdego
FTP, czyli jak dodać strony na serwer
XHTML 1.0 - następca języka HTML
Gdy HTML przestaje wystarczać

Przydatne tabele
Kolory na stronie WWW
Znaki, kody liczbowe i encje
Najpopularniejsze typy MIME
Kody języków narodowych

• • •
Zobacz porady, skrypty, artykuły i gotowe rozwiązania dla właścicieli stron WWW!


Atrybut HTML: abbr

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

abbr

Atrybut definiuje skrótowy opis zawartości komórki w tabeli. Przydaje się przy bardzo długich tekstach w komórkach, szczególnie gdy przeglądarka nie obsługuje poprawnie tabel. W założeniach ma też pomagać osobom niewidomym, które nie muszą odczytywać na syntezatorach mowy całej zawartości komórek. Mało przeglądarek obsługuje poprawnie ten atrybut.

Wartości atrybutu:

• dowolny tekst
Atrybut używany w elementach:
TD, TH
Przykładowe zastosowania:

• Przykład 1:

<table align="center" width="70%">
<tr><td abbr="kilka wskazówek dotyczących abbr">
Jeżeli mamy bardzo długie teksty w komórkach tabeli warto je
streścić w kilku słowach lub zdaniach. z pewnością pomożemy w ten
sposób tym, którzy nie chcą czytać całości. Sam nie przepadam za
czytaniem bardzo długich tekstów, jeżeli nie wiem czego dotyczą.
niestety, mało przeglądarek obsługuje ten atrybut.
</td></tr></table>

Jeżeli mamy bardzo długie teksty w komórkach tabeli warto je streścić w kilku słowach lub zdaniach. Z pewnością pomożemy w ten sposób tym, którzy nie chcą czytać całości. Sam nie przepadam za czytaniem bardzo długich tekstów, jeżeli nie wiem czego dotyczą. Niestety, mało przeglądarek obsługuje ten atrybut.


Atrybut HTML: accept

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

accept

Atrybut definiuje akceptowany zestaw znaków

Wartości atrybutu:

• język
Oznaczenie języka. Domyślna wartość to ISO-8859-1 (język angielski). Dla polskiego języka powinno się stosować ISO-8859-2.
Atrybut używany w elementach:
FORM, INPUT
Przykładowe zastosowania:

• Przykład 1:

<form action="1.php" accept="iso-8859-2">
  Twoja płeć:
  <input type="radio" name="plec" value="k"> kobieta
  <input type="radio" name="plec" value="m"> mężczyzna<br>
  <input type="submit" value=" wyślij dane ">
</form>


Atrybut HTML: accept-charset

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

accept-charset

Atrybut definiuje akceptowany język, z jakiego pochodzą wprowadzane znaki.

Wartości atrybutu:

• język
Oznaczenie języka, np. "pl"
Atrybut używany w elementach:
FORM
Przykładowe zastosowania:

• Przykład 1:

<form action="1.php" accept-charset="pl">
  Twoja płeć:
  <input type="radio" name="plec" value="k"> kobieta
  <input type="radio" name="plec" value="m"> mężczyzna<br>
  <input type="submit" value=" wyślij dane ">
</form>


Atrybut HTML: accesskey

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

accesskey

Definiuje klawisz skrótu, po naciśnięciu którego link staje się aktywny i gotowy do uruchomienia. Aby skrót zadziałał konieczne jest przytrzymanie klawisza alt i wybranej litery podanej przy atrybucie accesskey.

Wartości atrybutu:

• litera
np. "c"
Atrybut używany w elementach:
A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA
Przykładowe zastosowania:

• Przykład 1:

<a href="http://reporter.pl/" accesskey="c">reporter.pl</a>

reporter.pl


Atrybut HTML: action

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

action

Atrybut definiuje adres strony przetwarzającej dane z formularza.

Wartości atrybutu:

• ścieżka
dowolna ścieżka, np. "../skrypty/zamowienie.php"
• URL
adres strony w Internecie, np. "http://web.reporter.pl/formularz.php"
Atrybut używany w elementach:
FORM
Przykładowe zastosowania:

• Przykład 1:

<form action="ankieta.php" method="get">
  Twoja płeć:
  <input type="radio" name="plec" value="k"> kobieta
  <input type="radio" name="plec" value="m"> mężczyzna<br>
  <input type="submit" value=" wyślij dane ">
</form>


Atrybut HTML: align

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

align

Atrybut definiuje wyrównanie względem innych elementów w poziomie lub w pionie. Różne elementy HTML korzystają z różnych wartości atrybutu, więc warto zwracać uwagę na miejsce jego użycia. W tekscie najczęściej wykorzystywane są wartości "right", "justify" i "center" ("left" jest domyślną wartością). Elementy graficzne i formularze wykorzystują wartości "top", "middle" i "bottom".

nie zalecany, zastąp stylami: text-align, vertical-align

Wartości atrybutu:

• left - (wartość domyślna w poziomie)
wyrównanie do lewej strony
• center
wycentrowanie w poziomie
• right
wyrównanie do prawej strony
• justify
wyrównanie do prawej i do lewej strony
• top
wyrównanie w pionie do górnej części
• bottom - (wartość domyślna w pionie)
wyrównanie w pionie do dolnej części
• middle
wyrównanie w pionie do centralnej części
• char
wyrównanie względem określonego znaku w tabelach, np. względem przecinka w liczbach dziesiętnych - nie wszystkie przeglądarki obsługują tą wartość
Atrybut używany w elementach:
• [top|bottom|left|right] - CAPTION, LEGEND, FIELDSET
• [bottom|middle|top|left|right] - APPLET, IFRAME, IMG, INPUT, OBJECT
• [left|center|right] - TABLE, HR
• [left|center|right|justify] - DIV, H1, H2, H3, H4, H5, H6, P
• [left|center|right|justify|char] - COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR
Przykładowe zastosowania:

• Przykład 1:

<h3 align="right">przykładowy tytuł z prawej strony</h3>

przykładowy tytuł z prawej strony

• Przykład 2:

<p align="center">przykładowy tekst na środku strony</p>

przykładowy tekst na środku strony

• Przykład 3:

<table align="center" width="70%">
<caption "align=bottom">podpis pod tabelą</caption>
<tr><td><p align="justify">
<img src="../p/kamyki.jpg" align="right" width="100" height="75">
Teraz musimy użyć znacznie więcej treści aby pokazać, jak będzie
wyglądało formatowanie do lewej i do prawej strony. Na wszelki
wypadek warto jeszcze raz powtórzyć poprzednie zdanie. Teraz
musimy użyć znacznie więcej treści aby pokazać, jak będzie
wyglądało formatowanie do lewej i do prawej strony. Jak widać
obie strony tekstu są idealnie równe. O to chodziło!
</p></td></tr></table>

podpis pod tabelą

Teraz musimy użyć znacznie więcej treści aby pokazać, jak będzie wyglądało formatowanie do lewej i do prawej strony. Na wszelki wypadek warto jeszcze raz powtórzyć poprzednie zdanie. Teraz musimy użyć znacznie więcej treści aby pokazać, jak będzie wyglądało formatowanie do lewej i do prawej strony. Jak widać obie strony tekstu są idealnie równe. O to chodziło!

• Przykład 4:

Zdanie, w którym wstawiono ogromny <img src="../p/komp.gif" align="top"
 width="70" height="68" alt="komputer"> komputer, ale tylko po to,
aby pokazać co stanie się z obrazkiem przy różnych wartościach
parametru align w większej ilości tekstu. Przykład praktyczny
zastępuje dziesiątki słów.

Zdanie, w którym wstawiono ogromny komputer komputer, ale tylko po to, aby pokazać co stanie się z obrazkiem przy różnych wartościach parametru align w większej ilości tekstu. Przykład praktyczny zastępuje dziesiątki słów.

• Przykład 5:

Zdanie, w którym wstawiono ogromny <img src="../p/komp.gif"
align="middle" width="70" height="68" alt="komputer"> komputer,
ale tylko po to, aby pokazać co stanie się z obrazkiem przy różnych
 wartościach parametru align w większej ilości tekstu. Przykład
praktyczny zastępuje dziesiątki słów.

Zdanie, w którym wstawiono ogromny komputer komputer, ale tylko po to, aby pokazać co stanie się z obrazkiem przy różnych wartościach parametru align w większej ilości tekstu. Przykład praktyczny zastępuje dziesiątki słów.

• Przykład 6:

Zdanie, w którym wstawiono ogromny <img src="../p/komp.gif"
align="bottom" width="70" height="68" alt="komputer"> komputer,
ale tylko po to, aby pokazać co stanie się z obrazkiem przy
różnych wartościach parametru align w większej ilości tekstu.
Przykład praktyczny zastępuje dziesiątki słów.

Zdanie, w którym wstawiono ogromny komputer komputer, ale tylko po to, aby pokazać co stanie się z obrazkiem przy różnych wartościach parametru align w większej ilości tekstu. Przykład praktyczny zastępuje dziesiątki słów.


Atrybut HTML: alink

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

alink

Atrybut definiuje kolor naciskanych odnośników (linków).

nie zalecany, zastąp stylem: active

Wartości atrybutu:

• kolor - (domyślnie: alink="purple")
angielska nazwa koloru np. alink="green" lub zapis szesnastkowy #RRGGBB, np. alink="#33FF99".
Atrybut używany w elementach:
BODY
Przykładowe zastosowania:

• Przykład 1:

<body text="black" bgcolor="white" background="/g/malpa.gif"
link="black" vlink="#666666" alink="black">


Atrybut HTML: alt

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

alt

Atrybut definiuje tekst alternatywny gdy element nie może być wyświetlony. Wymagany w elementach IMG i AREA, co pozwala na zobaczenie opisu obrazka/zdjęcia, gdy korzystamy z przeglądarek, które nie wyświetlają grafiki. Tekst alternatywny pojawia się również po najechaniu wskaźnikiem myszki na grafikę

Wartości atrybutu:

• tekst
Atrybut używany w elementach:
APPLET, AREA, IMG, INPUT
Przykładowe zastosowania:

• Przykład 1:

<img src="../p/logo.gif" width="120" height="60"
alt="Logo serwisu Reporter.pl">

Logo serwisu Reporter.pl


Atrybut HTML: archive

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

archive

Atrybut definiuje nazwę pliku, który zawiera klasy niezbędne do działania appletu.

Nie jest zalecany dla elementu APPLET.

Wartości atrybutu:

• ścieżka lub URL
Atrybut używany w elementach:
OBJECT, APPLET
Przykładowe zastosowania:

• Przykład 1:

<object codetype="application/java-vm"
        codebase="http://demo.tridia.com/crosstie/classes"
        archive="ctwindowquick.jar"
        classid="com.maxtech.crosstie.term.ctwindowquick"
        alt="java disabled in browser configuration."
        width="120" height="80">
<param name="title" value="crosstie quick login">
<param name="cabbase" value="ctwindowquick.cab">
Your browser doesn\'t appear to support Java applets
or recognize the OBJECT tag.
</object>


Atrybut HTML: axis

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

axis

Atrybut definiuje nazwę pokrewnej grupy komórek, dzięki czemu możliwe staje się czytanie tabeli w sposób pogrupowany, co nie jest bez znaczenia np. dla osób niewidomych. Przeglądarki nie korzystają jeszcze z tego atrybutu.

Wartości atrybutu:

• tekst
nazwy komórek, np. axis="miasta"
Atrybut używany w elementach:
TD, TH
Przykładowe zastosowania:

• Przykład 1:

<table border="1">
<tr>
  <td axis="miasto">Sosnowiec</td>
  <td axis="miasto">Katowice</td>
  <td axis="miasto">Poznań</td>
</tr>
<tr>
  <td axis="data">2001.09.12</td>
  <td axis="data">2001.11.10</td>
  <td axis="data">2001.08.23</td>
</tr>
</table>

Sosnowiec | Katowice | Poznań
2001.09.12 | 2001.11.10 | 2001.08.23


Atrybut HTML: background

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

background

Atrybut definiuje adres graficznego tła strony WWW. Każda witryna może mieć tło w postaci powtarzającego się elementu graficznego. Trzeba jednak uważać, aby było ono na tyle delikatne, aby nie zaciemniało liter i nie utrudniało czytania tekstu.

nie zalecany, zastąp stylem: background-image

Wartości atrybutu:

• URL
adres grafiki w Internecie, np. "http://web.reporter.pl/g/tlo.gif"
• ścieżka
lokalny adres grafiki, np. "g/tlo.gif"
Atrybut używany w elementach:
BODY
Przykładowe zastosowania:

• Przykład 1:

<body text="black" bgcolor="white" background="/g/malpa.gif"
link="black" vlink="#666666" alink="black">


Atrybut HTML: bgcolor

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

bgcolor

Atrybut definiuje kolor tła. W zależności od elementu, jest to kolor tła: strony WWW (w BODY), wszystkich komórek tabeli (w TABLE), jednej komórki tabeli (w TD i TH) lub rzędu komórek (w TR).

nie zalecany, zastąp stylem: background-color

Wartości atrybutu:

• kolor
angielska nazwa koloru np. bgcolor="green" lub zapis szesnastkowy #RRGGBB, np. bgcolor="#33FF99".
Atrybut używany w elementach:
BODY, TABLE, TD, TH, TR
Przykładowe zastosowania:

• Przykład 1:

<table width="200" bgcolor="yellow">
<tr><td>tekst1</td><td bgcolor="#ffddee">inny tekst</td></tr>
<tr><td>tekst2</td><td bgcolor="gray">nowy tekst</td></tr>
</table>

tekst1 | inny tekst
tekst2 | nowy tekst


Atrybut HTML: border

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border

Atrybut definiuje szerokość ramki.

Wartości atrybutu:

• piksele
grubość ramki, jeżeli ma jej nie być to border="0"
Atrybut używany w elementach:
IMG, OBJECT, TABLE
Przykładowe zastosowania:

• Przykład 1:

<table border="5">
<tr><td>
tabela z grubą ramką
</td></tr></table>

tabela z grubą ramką

• Przykład 2:

<center>
<a href="http://www.reporter.pl" target=_blank>
<img src="../p/logo.gif" width="120" height="60" border="3"></a>
</center>


Atrybut HTML: cellpadding

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

cellpadding

Atrybut definiuje odległość akapitu od krawędzi komórki.

Wartości atrybutu:

• piksele
wartość dodatnia, np. cellpadding="5"
Atrybut używany w elementach:
TABLE
Przykładowe zastosowania:

• Przykład 1:

<table cellpadding="10" cellspacing="1" border="1"><tr>
 <td>pole11</td><td>pole12</td>
</tr><tr>
 <td>pole21</td><td>pole22</td>
</tr></table>

pole11 | pole12
pole21 | pole22


Atrybut HTML: cellspacing

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

cellspacing

Atrybut definiuje szerokośc krawędzi komórek.

Wartości atrybutu:

• piksele
wartość dodatnia, np. cellspacing="5"
Atrybut używany w elementach:
TABLE
Przykładowe zastosowania:

• Przykład 1:

<table cellpadding="1" cellspacing="10" border="1"><tr>
 <td>pole11</td><td>pole12</td>
</tr><tr>
 <td>pole21</td><td>pole22</td>
</tr></table>

pole11 | pole12
pole21 | pole22


Atrybut HTML: char

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

char

Atrybut definiuje znak, względem którego nastąpi wyrównanie. Z założenia stosowany ma być w tabelach z kolumnami liczb dziesiętnych, które możnaby ładnie wyrównać względem przecinka (kropki). Przeglądarki nie obsługują jednak tego atrybutu.

Wartości atrybutu:

• znak
dowolny znak, wielkość liter jest rozróżniana, np. "."
Atrybut używany w elementach:
COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR
Przykładowe zastosowania:

• Przykład 1:

<table>
<tr align="char" char="."><td>123.1</td></tr>
<tr align="char" char="."><td>11.11</td></tr>
<tr align="char" char="."><td>1.08</td></tr>
<tr align="char" char="."><td>1234.09</td></tr>
<tr align="char" char="."><td>12.34</td></tr>
</table>

123.1
11.11
1.08
1234.09
12.34


Atrybut HTML: charoff

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

charoff

Atrybut definiuje pozycję znaku wyrównania. Przeglądarki nie obsługują jednak tego atrybutu.

Wartości atrybutu:

• piksele
całkowita liczba pikseli, np. "10"
Atrybut używany w elementach:
COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR
Przykładowe zastosowania:

• Przykład 1:

<table>
<tr align="char" charoff="10" char="."><td>123.1</td></tr>
<tr align="char" charoff="10" char="."><td>11.11</td></tr>
<tr align="char" charoff="10" char="."><td>1.08</td></tr>
<tr align="char" charoff="10" char="."><td>1234.09</td></tr>
<tr align="char" charoff="10" char="."><td>12.34</td></tr>
</table>

123.1
11.11
1.08
1234.09
12.34


Atrybut HTML: charset

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

charset

Atrybut definiuje język w jakim zakodowano dokument. Mało przeglądarek korzysta z tego atrybutu.

Wartości atrybutu:

• język
Oznaczenie języka. Domyślna wartość to ISO-8859-1 (język angielski). Dla polskiego języka powinno się stosować ISO-8859-2.
Atrybut używany w elementach:
A, LINK, SCRIPT
Przykładowe zastosowania:

• Przykład 1:

<a href="http://web.reporter.pl/" charset="iso-8859-2"
target="_blank">web.reporter.pl</a>


Atrybut HTML: checked

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

checked

Atrybut definiuje element listy jako wybrany. Można nim wstępnie wybrać pewne wartości w formularzach.

Wartości atrybutu:

• brak
Atrybut używany w elementach:
INPUT
Przykładowe zastosowania:

• Przykład 1:

Ulubiona potrawa:
<form>
  <br><input type="checkbox" name="potrawa"> barszcz
  <br><input type="checkbox" name="potrawa" checked> łosoś
  <br><input type="checkbox" name="potrawa"> inna
</form>

Ulubiona potrawa:

barszcz
łosoś
inna


Atrybut HTML: cite

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

cite

Atrybut definiuje adres źródła informacji znajdującej się w akapicie lub przypisie. Może to być adres strony WWW, skąd pochodzi cytowany fragment tekstu.

Wartości atrybutu:

• URL
adres strony w Internecie, np. "http://web.reporter.pl/"
Atrybut używany w elementach:
BLOCKQUOTE, DEL, INS, Q
Przykładowe zastosowania:

• Przykład 1:

dowolny tekst
<blockquote cite="http://web.reporter.pl/">
...zbadaj poprawność strony WWW sprawdzając, które tagi języka HTML
zostały użyte oraz ile razy dany tag został otworzony i zamknięty...
</blockquote>
dowolny tekst

dowolny tekst

zbadaj poprawność strony WWW sprawdzając, które tagi języka HTML zostały użyte oraz ile razy dany tag został otworzony i zamknięty
dowolny tekst


Atrybut HTML: class

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

class

Atrybut definiuje klasę CSS dla elementu.

Wartości atrybutu:

• nazwa klasy
poprawna nazwa klasy używanej w arkuszach styli, np. class="duzyred"
Atrybut używany w elementach:
A, ABBR, ACRONYM, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, HR, I, IFRAME, IMG, INPUT, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
.duzyred {color:red;font-size:16px;}
--></style>
<p>przykładowy akapit zwykły</p>
<p class="duzyred">przykładowy akapit - czerwony i duży</p>

przykładowy akapit zwykły

przykładowy akapit - czerwony i duży


Atrybut HTML: classid

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

classid

Atrybut definiuje informacje o klasie obiektu.

Wartości atrybutu:

• ścieżka
dowolna ścieżka, np. "../projekty/dom/java.class"
• URL
adres obiektu w Internecie, np. "http://web.reporter.pl/java.class"
Atrybut używany w elementach:
OBJECT
Przykładowe zastosowania:

• Przykład 1:

<object classid="java:karty.class">


Atrybut HTML: clear

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

clear

Atrybut definiuje położenie nowej linii za grafiką lub innym obiektem.

nie zalecany, zastąp stylem: clear

Wartości atrybutu:

• none - (wartość domyślna)
element BR działa w sposób tradycyjny i przełamuje linie bez zmian
• left
następna linia będzie pod obiektem ułożonym z lewej strony
• right
następna linia będzie pod obiektem ułożonym z prawej strony
• all
następna linia znajdzie się pod obiektem niezależnie od jego położenia
Atrybut używany w elementach:
BR
Przykładowe zastosowania:

• Przykład 1:

<img src="../p/logo.gif" width="120" height="60" align="left">
tekst będzie się układał po prawej stronie i użycie br
<br clear="none"> nie spowoduje dalszego pisania pod grafiką.

tekst będzie się układał po prawej stronie i użycie br
nie spowoduje dalszego pisania pod grafiką.

• przykład 2:

<img src="../p/logo.gif" width="120" height="60" align="left">
a teraz tekst z prawej strony zostanie złamany tak, że znajdzie
się pod grafiką. <br clear="left"> br złamał tekst pod obiekt
znajdujący się po lewej stronie (clear=left).

a teraz tekst z prawej strony zostanie złamany tak, że znajdzie się pod grafiką.
br złamał tekst pod obiekt znajdujący się po lewej stronie (clear=left).


Atrybut HTML: code

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

code

Atrybut definiuje nazwę pliku, który jest appletem napisanym w języku Java i ma rozszerzenie .class.

nie zalecany, zastąp elementem: OBJECT i jego atrybutami

Wartości atrybutu:

• nazwa pliku
tylko nazwa pliku bez katalogów - katalog bazowy określany jest atrybutem codebase
Atrybut używany w elementach:
APPLET
Przykładowe zastosowania:

• Przykład 1:

Applet, który jest grą (ruchem konika szachowego odwiedź wszystkie pola tylko raz)

<table align="center" cellpadding="10"><tr><td bgcolor="black">
<applet code="gra5.class" codebase="../p" width="160" height="215">
  <param name="pola" value="5">
  Uwaga! Twoja przeglądarka nie widzi appletu!
</applet>
</td></tr></table>

Uwaga! Twoja przeglądarka nie widzi appletu!


Atrybut HTML: codebase

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

codebase

Atrybut definiuje adres bazowy, względem którego ustalane są ścieżki dla innych atrybutów.

nie zalecany dla elementu APLLET

Wartości atrybutu:

• ścieżka lub URL
dowolna ścieżka, np. "/applety/" lub adres strony, np. "http://serwis.com/katalog/"
Atrybut używany w elementach:
APPLET, OBJECT
Przykładowe zastosowania:

• Przykład 1:

Applet, który jest grą (ruchem konika szachowego odwiedź wszystkie pola tylko raz)

<table align="center" cellpadding="10"><tr><td bgcolor="black">
<applet code="gra5.class" codebase="../p" width="160" height="215">
  <param name="pola" value="5">
  Uwaga! Twoja przeglądarka nie widzi appletu!
</applet>
</td></tr></table>

Uwaga! Twoja przeglądarka nie widzi appletu!


Atrybut HTML: codetype

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

codetype

Atrybut definiuje typ obiektu.

Wartości atrybutu:

• MIME
typ MIME obiektu, np. codetype="application/java"
Atrybut używany w elementach:
OBJECT
Przykładowe zastosowania:

• Przykład 1:

<object codetype="application/x-python">


Atrybut HTML: color

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

color

Atrybut definiuje kolor czcionki.

nie zalecany, zastąp stylem: color

Wartości atrybutu:

• kolor
angielska nazwa koloru np. color="green" lub zapis szesnastkowy #RRGGBB, np. color="#33FF99".
Atrybut używany w elementach:
BASEFONT, FONT
Przykładowe zastosowania:

• Przykład 1:

<font color="yellow" size="+2">duży, żółty tekst </font>

duży, żółty tekst

• Przykład 2:

<font color="#33ff99">inny kolor tekstu </font>

inny kolor tekstu


Atrybut HTML: cols

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

cols

Atrybut definiuje liczbę kolumn lub szerokość elementu.

Wartości atrybutu:

• liczba znaków
szerokość w znakach stosowana tylko w elemencie TEXTAREA
• piksele
szerokość w pikselach, np. rows=100
• procenty
szerokość w procentach, np. rows=80%
• 0*
specjalna wartość definiująca minimalną szerokość, która jest w stanie poprawnie wyświetlić kolumnę tekstu.
Atrybut używany w elementach:
FRAMESET, TEXTAREA
Przykładowe zastosowania:

• Przykład 1:

<form><textarea cols="30" rows="4">
przykładowe pole tekstowe
</textarea></form>


Atrybut HTML: colspan

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

colspan

Atrybut definiuje ilość połączonych kolumn.

Wartości atrybutu:

• liczba
ilość kolumn, np. colspan="2"
Atrybut używany w elementach:
TD, TH
Przykładowe zastosowania:

• Przykład 1:

<table border="1">
<tr><td colspan="2" align="center">tekst11</td></tr>
<tr><td>tekst21</td><td>tekst21</td></tr>
<tr><td>tekst31</td><td>tekst31</td></tr>
</table>

tekst11
tekst21 | tekst21
tekst31 | tekst31


Atrybut HTML: compact

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

compact

Atrybut definiuje listę bardziej zwartą, jednak przeglądarki nie interpretują poprawnie tego atrybutu.

nie zalecany

Wartości atrybutu:

• brak
Atrybut używany w elementach:
DIR, DL, MENU, OL, UL
Przykładowe zastosowania:

• Przykład 1:

Nie widać jednak żadnej różnicy. Lista z atrybutem compact wygląda tak samo jak bez niego.

<ul compact>
  <li>pierwszy element listy
  <li>drugi element listy
  <li>trzeci element listy
</ul>

  • pierwszy element listy
  • drugi element listy
  • trzeci element listy


Atrybut HTML: content

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

content

Atrybut definiuje wartość atrybutu name dla elementu META.

Wartości atrybutu:

• tekst
różna wartość, w zależności od zastosowań
Atrybut używany w elementach:
META
Przykładowe zastosowania:

• Przykład 1:

<meta http-equiv="refresh" content="3; url=http://www.reporter.pl/">

• Przykład 2:

<meta http-equiv="content-type"
content="text/html; charset=iso-8859-2">


Atrybut HTML: coords

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

coords

Atrybut definiuje współrzędne regionu aktywnego na mapie odsyłaczy.

Wartości atrybutu:

• współrzędne punktów
w zależności od atrybutu shape opisującego kształt, może przyjmować różne wartości.
- dla shape=rect (prostokąt):
coords="lewy-X,górny-Y,prawy-X,dolny-Y"
- dla shape=circle (okrąg):
coords="centralny-X,centralny-Y,promień"
- dla shape=poly (wielokąt):
coords="x1,y1,x2,y2,...,xN,yN"
Atrybut używany w elementach:
A, AREA
Przykładowe zastosowania:

• Przykład 1:

<center><img src="../p/mapa.gif" usemap="#mapa1" border="0"></center>
<map name="mapa1">
  <area shape="rect" coords="3,4,103,54"
        href="http://web.reporter.pl/" target="_blank">
  <area shape="circle" coords="151,63,35"
        href="http://junior.reporter.pl/" target="_blank">
</map>


Atrybut HTML: data

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

data

Atrybut definiuje plik z danymi obiektu.

Wartości atrybutu:

• ścieżka
dowolna ścieżka, np. "../projekty/dom/grafika.gif"
• URL
adres zasobu w Internecie, np. "http://web.reporter.pl/plik.jpg"
Atrybut używany w elementach:
OBJECT
Przykładowe zastosowania:

• Przykład 1:

<object data="animacja.gif" type="image/gif" width="200" height="100">


Atrybut HTML: datetime

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

datetime

Atrybut definiuje datę zmian dokonanych na wybranym fragmencie tekstu.

Wartości atrybutu:

• data
data, np. "2001-12-10T08:15:30-05:00"
Atrybut używany w elementach:
DEL, INS
Przykładowe zastosowania:

• Przykład 1:

Fragment tekstu, z którego
<del datetime="2001-12-10t08:15:30-05:00">
usunięto dwa</del> wyrazy o określonej godzinie.

Fragment tekstu, z którego usunięto dwa wyrazy o określonej godzinie.


Atrybut HTML: declare

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

declare

Atrybut definiuje deklarację obiektu. Obiekt nie jest od razu wykonywany, a jedynie zadeklarowany do wykonania. Uruchomiony zostanie dopiero wtedy, gdy zajdzie taka potrzeba.

Wartości atrybutu:

• brak
Atrybut używany w elementach:
OBJECT
Przykładowe zastosowania:

• Przykład 1:

<object declare classid="java:sputnik.class"
codetype="application/java" width=400 height=250>


Atrybut HTML: defer

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

defer

Atrybut definiuje opóźnienie wykonywania skryptu.

Wartości atrybutu:

• brak
Atrybut używany w elementach:
SCRIPT
Przykładowe zastosowania:

• Przykład 1:

<script language="javascript" defer type="text/javascript">
<!--
jakiś kod
// -->
</script>


Atrybut HTML: dir

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

dir

Atrybut definiuje kierunek wyświetlania tekstu lub położenie elementu w dokumentach, które napisane są w językach czytanych od strony prawej do lewej. Stosowany jest np. w języku hebrajskim, gdzie położenie tekstów i elementów (np. tabel, akapitów) określa się od strony prawej.

Wartości atrybutu:

• ltr (wartość domyślna)
od lewej strony do prawej
• rtl
od prawej strony do lewej
Atrybut używany w elementach:
A, ABBR, ACRONYM, ADDRESS, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, H1, H2, H3, H4, H5, H6, HEAD, HR, HTML, I, IMG, INPUT, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, META, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, STYLE, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, U, UL, VAR
Przykładowe zastosowania:

• Przykład 1:

<bdo dir="rtl">przykładowy akapit napisany wspak</bdo>

przykładowy akapit napisany wspak

• przykład 2:

<p dir="rtl">akapit zaczynający się od prawej strony</p>

akapit zaczynający się od prawej strony


Atrybut HTML: disabled

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

disabled

Definiuje brak możliwości korzystania z elementu. Element nie jest aktywny.

Wartości atrybutu:

• brak
Atrybut używany w elementach:
BUTTON, INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA,
Przykładowe zastosowania:

• Przykład 1:

<form>
<input type="text" value="zmień ten napis!" disabled>
</form>


Atrybut HTML: enctype

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

enctype

Atrybut definiuje sposób kodowania danych dla formularza.

Wartości atrybutu:

• application/x-www-form-urlencoded - (wartość domyślna)
dla wszelkich danych
• MIME
dla specyficznych danych, np. multipart/form-data dla danych pobieranych z pliku
Atrybut używany w elementach:
FORM
Przykładowe zastosowania:

• Przykład 1:

<form action="1.php" enctype="application/x-www-form-urlencoded">
  Twoja płeć:
  <input type="radio" name="plec" value="k"> kobieta
  <input type="radio" name="plec" value="m"> mężczyzna<br>
  <input type="submit" value=" wyślij dane ">
</form>


Atrybut HTML: face

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

face

Atrybut definiuje rodzaj czcionki. Czcionka musi jednak istnieć na komputerze osoby czytającej stronę.

nie zalecany, zastąp stylem: font-family

Wartości atrybutu:

• nazwa
nazwa kroju czcionki, np. "Arial"
Atrybut używany w elementach:
BASEFONT, FONT
Przykładowe zastosowania:

• Przykład 1:

<font face="Arial">tekst napisany krojem arial </font>

tekst napisany krojem Arial

• Przykład 2:

<font face="Wingdings">tekst obrazkowy, krój wingdings </font>

tekst obrazkowy, krój Wingdings


Atrybut HTML: frame

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

frame

Atrybut definiuje typ obramowania tabeli.

Wartości atrybutu:

• void - (wartość domyślna)
ramka nie będzie widoczna
• border
cała ramka tabeli jest widoczna
• above
widoczna będzie tylko górna krawędź obramowania
• below
widoczna będzie tylko dolna krawędź obramowania
• hsides
widoczna będzie tylko górna i dolna krawędź obramowania
• vsides
widoczna będzie tylko lewa i prawa krawędź obramowania
• lhs
widoczna będzie tylko lewa krawędź obramowania
• rhs
widoczna będzie tylko prawa krawędź obramowania
• box
cała ramka tabeli jest widoczna
Atrybut używany w elementach:
TABLE
Przykładowe zastosowania:

• Przykład 1:

<table rules="rows" frame="rhs"><tr>
 <td>pole11</td><td>pole12</td>
</tr><tr>
 <td>pole21</td><td>pole22</td>
</tr></table>

pole11 | pole12
pole21 | pole22

• Przykład 2:

<table rules="rows" frame="vsides"><tr>
 <td>pole11</td><td>pole12</td>
</tr><tr>
 <td>pole21</td><td>pole22</td>
</tr></table>

pole11 | pole12
pole21 | pole22


Atrybut HTML: frameborder

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

frameborder

Atrybut definiuje obramowanie ramki.

Wartości atrybutu:

• yes lub 1 - (wartość domyślna)
obramowanie włączone
• no lub 0
obramowanie wyłączone
Atrybut używany w elementach:
FRAME, IFRAME
Przykładowe zastosowania:

• Przykład 1:

<frame src="ramka1.html" frameborder="yes" name="lewa">


Atrybut HTML: headers

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

headers

Atrybut definiuje listę nazw nagłówków komórek. Przeglądarki nie interpretują tego atrybutu.

Wartości atrybutu:

• ID
lista ID komórek, np. headers="kom1, kom2"
Atrybut używany w elementach:
TD, TH
Przykładowe zastosowania:

• Przykład 1:

<table border="1">
<tr>
<th id="t1">Imie</th>
<th id="t2">Miasto</th>
<th id="t3">Ulica</th>
</tr>
<tr>
<td headers="t1">Kowalski</td>
<td headers="t2">Szczecin</td>
<td headers="t3">Zgody 15/3</td>
</tr>
</table>

Imie | Miasto | Ulica
Kowalski | Szczecin | Zgody 15/3


Atrybut HTML: height

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

height

Atrybut definiuje wysokość elementu, np. wysokość obrazka. Dzięki temu możliwe jest przeskalowanie go z mniejszego na większy lub odwrotnie - operacja ta jednak może zniekształcić grafikę.

nie zalecany w elementach TD, TH i APPLET, zastąp stylem: height

Wartości atrybutu:

• piksele
wysokość w pikselach, np. height=100
• procenty
wysokość w procentach, np. height=80%
Atrybut używany w elementach:
• IMG, OBJECT, IFRAME
• nie zalecany, zastąp stylem w: TD, TH, APPLET
Przykładowe zastosowania:

• Przykład 1:

Powiększenie obrazka - standardowo "buźka" ma wymiar 12x12 pikseli, ale wpisując height="24" powiększamy ją dwa razy w pionie.

<IMG src="../p/sm.gif" width="12" height="24">

• Przykład 2:

<table width="90%" border="1"><tr><td height="80">
  A to komórka tabeli, która ma wysokość 100 pikseli.
</td></tr></table>

A to komórka tabeli, która ma wysokość 100 pikseli.

• Przykład 3:

<applet code="POLChat.class" archive="c.jar"
  codebase="http://s9.polchat.pl/" width="100%" height="99%">
  <param name="room" value="GDCafe">
</applet>


Atrybut HTML: href

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

href

Atrybut definiuje adres strony lub miejsca, do których następuje odwołanie.

Wartości atrybutu:

• ścieżka
dowolna ścieżka, np. "../projekty/dom/index.html"
• URL
adres strony w Internecie, np. "http://web.reporter.pl/"
• identyfikator
nazwa miejsca na stronie WWW zdefiniowana przez atrybut id lub określona przez atrybut name elementu A, np. "/katalog/index.php#akapit1"
Atrybut używany w elementach:
A, AREA, LINK, BASE
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, w którym umieszczono odnośnik do
strony <a href="http://web.reporter.pl/"
target=_blank>web.reporter.pl</a> zawierającej wiele
informacji o Internecie.

Przykładowy tekst, w którym umieszczono odnośnik do strony web.reporter.pl zawierającej wiele informacji o Internecie.


Atrybut HTML: hreflang

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

hreflang

Atrybut definiuje język docelowej strony WWW.

Wartości atrybutu:

• język narodowy
kody języków określa norma ISO 639, a krajów ISO 3166
Atrybut używany w elementach:
A, LINK
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, w którym umieszczono odnośnik do
strony <a href="http://web.reporter.pl/" lang="pl"
target=_blank>web.reporter.pl</a> zawierającej wiele
informacji o Internecie.

Przykładowy tekst, w którym umieszczono odnośnik do strony web.reporter.pl zawierającej wiele informacji o Internecie.


Atrybut HTML: hspace

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

hspace

Atrybut definiuje odstępy poziome dookoła elementu. Czasem istnieje konieczność otoczenia grafiki lub appletu pustą przestrzenią - ten atrybut doskonale nadaje się do takich celów.

nie zalecany, zastąp stylami: margin-right, margin-left

Wartości atrybutu:

• piksele - (domyślnie od 2 do 4 w zależności od przeglądarki)
szerokość wolnej przestrzeni, np. hspace="6"
Atrybut używany w elementach:
APPLET, IMG, OBJECT
Przykładowe zastosowania:

• Przykład 1:

<img src="../p/logo.gif" hspace="10" align="left">
Przestrzeń dookoła loga została otoczona po lewej i po prawej
stronie 10 pikselowym odstępem. Dzięki temu układ akapitu jest
bardziej czytelny. Zabieg często stosowany w przypadku
oblewania tekstem dużej ilości fotografii.

Przestrzeń dookoła loga została otoczona po lewej i po prawej stronie 10 pikselowym odstępem. Dzięki temu układ akapitu jest bardziej czytelny. Zabieg często stosowany w przypadku oblewania tekstem dużej ilości fotografii.

• Przykład 2:

<img src="../p/logo.gif" hspace="20" align="left">
Przestrzeń dookoła loga została otoczona po lewej i po prawej
stronie 20 pikselowym odstępem. Dzięki temu układ akapitu jest
bardziej czytelny. Zabieg często stosowany w przypadku
oblewania tekstem dużej ilości fotografii.

Przestrzeń dookoła loga została otoczona po lewej i po prawej stronie 20 pikselowym odstępem. Dzięki temu układ akapitu jest bardziej czytelny. Zabieg często stosowany w przypadku oblewania tekstem dużej ilości fotografii.


Atrybut HTML: http-equiv

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

http-equiv

Atrybut definiuje wartość dla nagłówka strony.

Wartości atrybutu:

• tekst
w zależności od potrzeb może przyjmować dowolne wartości
Atrybut używany w elementach:
META
Przykładowe zastosowania:

• Przykład 1:

<meta http-equiv="content-type"
content="text/html; charset=iso-8859-2">


Atrybut HTML: id

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

id

Atrybut definiuje unikalny identyfikator dla elementu. Do elementów oznaczonych w ten sposób można się odwoływać poprzez odnośnik, np. <a href="#akapit1">

Wartości atrybutu:

• nazwa
Atrybut używany w elementach:
A, ABBR, ACRONYM, ADDRESS, APPLET, AREA, B, BASEFONT, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, HR, I, IFRAME, IMG, INPUT, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PARAM, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR
Przykładowe zastosowania:

• Przykład 1:

<p id="akapit1">przykładowy akapit z identyfikatorem "akapit1"</p>
<p><a href="#akapit1">kliknij tu!</a>

przykładowy akapit z identyfikatorem "akapit1"

kliknij tu!


Atrybut HTML: ismap

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

ismap

Atrybut definiuje współrzędne dodawane do adresu odnośnika, jeżeli element jest podlinkowany.

Wartości atrybutu:

• brak
Atrybut używany w elementach:
IMG, INPUT
Przykładowe zastosowania:

• Przykład 1:

<center><a href="/adres/strona.php"><img src="../p/logo.gif"
ismap alt="logo" border="0"></a></center>


Atrybut HTML: label

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

label

Atrybut definiuje etykietę grupy. Przeglądarki nie interpretują poprawnie tego atrybutu.

Wartości atrybutu:

• tekst
Nazwa grupy
Atrybut używany w elementach:
OPTGROUP, OPTION
Przykładowe zastosowania:

• Przykład 1:

<select>
  <optgroup label="systemy operacyjne">
    <option label="windows"
      value="w">system Windows</option>
    <option label="unix"
      value="u">system Unix</option>
  </optgroup>
  <optgroup label="procesor">
    <option label="intel"
       value="i">procesor Intel</option>
    <option label="amd"
       value="a">procesor AMD</option>
  </optgroup>
</select>


Atrybut HTML: lang

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

lang

Atrybut definiuje język dla całej strony lub jej wybranego fragmentu.

Wartości atrybutu:

• język narodowy
kody języków określa norma ISO 639, a krajów ISO 3166
Atrybut używany w elementach:
A, ABBR, ACRONYM, ADDRESS, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, H1, H2, H3, H4, H5, H6, HEAD, HR, HTML, I, IMG, INPUT, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, META, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, STYLE, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, U, UL, VAR
Przykładowe zastosowania:

• Przykład 1:

<p lang="pl">Przykładowy akapit napisany w języku polskim</p>

Przykładowy akapit napisany w języku polskim

• Przykład 2:

<p lang="fr-CA">
Désormais plus puissant, grâce aux nouvelles fonctions ajoutées,
il vous permet de gérer votre temps de connexion de façon plus
amusante et plus pratique.
</p>

Désormais plus puissant, grâce aux nouvelles fonctions ajoutées, il vous permet de gérer votre temps de connexion de façon plus amusante et plus pratique.


Atrybut HTML: language

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

language

Atrybut definiuje język skryptu.

Wartości atrybutu:

• język skryptu
nazwa skryptu, np. "JavaScript" lub "VBScript"
Atrybut używany w elementach:
SCRIPT
Przykładowe zastosowania:

• Przykład 1:

<script language="javascript" type="text/javascript">
<!--
jakiś kod
// -->
</script>


Atrybut HTML: link

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

link

Atrybut definiuje kolor odnośników (linków).

nie zalecany, zastąp stylem: link

Wartości atrybutu:

• kolor - (domyślnie: link="blue")
angielska nazwa koloru np. link="green" lub zapis szesnastkowy #RRGGBB, np. link="#33FF99".
Atrybut używany w elementach:
BODY
Przykładowe zastosowania:

• Przykład 1:

<body text="black" bgcolor="white" background="/g/malpa.gif"
link="black" vlink="#666666" alink="black">


Atrybut HTML: longdesc

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

longdesc

Atrybut definiuje adres dokumentu opisującego element. Nie jest używany przez przeglądarki.

Wartości atrybutu:

• ścieżka
dowolna ścieżka, np. "../projekty/dom/index.html"
• URL
adres strony w Internecie, np. "http://web.reporter.pl/opis.html"
Atrybut używany w elementach:
FRAME, IFRAME, IMG
Przykładowe zastosowania:

• Przykład 1:

<img src="../p/logo.gif" width="120" height="60"
longdesc="http://www.reporter.pl/opislogo.html">


Atrybut HTML: marginheight

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

marginheight

Atrybut definiuje szerokość marginesu pionowego ramki.

Wartości atrybutu:

• piksele
szerokość w pikselach, np. width=10
Atrybut używany w elementach:
FRAME, IFRAME
Przykładowe zastosowania:

• Przykład 1:

<frame src="ramka1.html" marginheight="10" name="lewa">


Atrybut HTML: marginwidth

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

marginwidth

Atrybut definiuje szerokość marginesu poziomego ramki.

Wartości atrybutu:

• piksele
szerokość w pikselach, np. width=10
Atrybut używany w elementach:
FRAME, IFRAME
Przykładowe zastosowania:

• Przykład 1:

<frame src="ramka1.html" marginwidth="10" name="lewa">


Atrybut HTML: maxlength

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

maxlength

Atrybut definiuje maksymalną długość tekstu w polu formularza.

Wartości atrybutu:

• liczba
ilość znaków, które można wpisać
Atrybut używany w elementach:
INPUT
Przykładowe zastosowania:

• Przykład 1:

<form>
tu można wpisać tylko 5 znaków:<br>
<input type="text" maxlength="5">
</form>

tu można wpisać tylko 5 znaków:


Atrybut HTML: media

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

media

Atrybut definiuje typ nośnika.

Wartości atrybutu:

• screen - (wartość domyślna)
ekran monitora
• print
drukarka
• print
drukarka, urządzenia drukujące
• projection
projektory
• braille
urządzenia z klawiatura Braille'a - dla niewidomych
• speech
syntezatory mowy
• all
wszystkie urządzenia
Atrybut używany w elementach:
LINK, STYLE
Przykładowe zastosowania:

• Przykład 1:

<link rel="stylesheet" media="all"
href="http://www.reporter.pl/style.css" type="text/css">


Atrybut HTML: method

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

method

Atrybut definiuje sposób przekazywania parametrów z formularza.

Wartości atrybutu:

• get - (wartość domyślna)
dane są widoczne w oknie przeglądarki na pasku adresowym
• post
dane nie są widoczne w oknie przeglądarki na pasku adresowym
Atrybut używany w elementach:
FORM
Przykładowe zastosowania:

• Przykład 1:

<form action="ankieta.php" method="get">
  Twoja płeć:
  <input type="radio" name="plec" value="k"> kobieta
  <input type="radio" name="plec" value="m"> mężczyzna<br>
  <input type="submit" value=" wyślij dane ">
</form>


Atrybut HTML: multiple

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

multiple

Atrybut definiuje wybór wielu elementów.

Wartości atrybutu:

• brak
Atrybut używany w elementach:
SELECT
Przykładowe zastosowania:

• Przykład 1:

<FORM>
Jakie miasta lubisz?
(przytrzymaj klawisz "alt" aby wybrać kilka)<BR>
  <select multiple>
    <option>Warszawa</option>
    <option>Sosnowiec</option>
    <option>Opole</option>
    <option>Wrocław</option>
    <option>Sopot</option>
    <option>Przemyśl</option>
    <option>inne</option>
  </select>
</form>

Jakie miasta lubisz? (przytrzymaj klawisz "alt" aby wybrać kilka)


Atrybut HTML: name

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

name

Atrybut definiuje nazwę elementu. Nazwa umożliwia komunikowanie się z tym elementem przez inne elementy używając np. skryptów lub appletów. Identyfikacja pomaga w precyzyjnym określeniu jednego elementu lub całej grupy elementów np. dla pól wyboru w formularzach.

Nie jest zalecany dla elementu APPLET.

Wartości atrybutu:

• tekst
nazwa atrybutu, np. name="imie"
Atrybut używany w elementach:
BUTTON, TEXTAREA, APPLET, SELECT, FORM, FRAME, IFRAME, IMG, A, INPUT, OBJECT, MAP, PARAM, META
Przykładowe zastosowania:

• Przykład 1:

<form action="..." method="get">
  Ulubione potrawy:<br>
  <input type="checkbox" name="potrawa" value="b"> barszcz
  <input type="checkbox" name="potrawa" value="l"> łosoś
  <input type="checkbox" name="potrawa" value="i"> inna<br>
  <textarea name="tekst" rows="5" cols="20">
    Miejsce na uzasadnienie
  </textarea><br>
  <input type="submit" value=" wyślij dane ">
</form>

Ulubione potrawy:
barszcz łosoś inna


Atrybut HTML: nohref

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

nohref

Atrybut definiuje obszar, z którym nie jest związany żaden odnośnik. Określa pusty odnośnik, który nie przekierowuje do innej strony WWW.

Wartości atrybutu:

• brak
Atrybut używany w elementach:
AREA
Przykładowe zastosowania:

• Przykład 1:

<map name="mapa1">
  <area nohref shape="rect" coords="0,0,120,30">
</map>


Atrybut HTML: noresize

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

noresize

Atrybut definiuje stały rozmiar ramki. Nie można go zmieniać za pomocą myszy.

Wartości atrybutu:

• brak
Atrybut używany w elementach:
FRAME
Przykładowe zastosowania:

• Przykład 1:

<frame src="ramka1.html" scrolling=yes noresize name="lewa">


Atrybut HTML: noshade

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

noshade

Atrybut definiuje brak cienia pod linią wykonaną elementem HR.

Wartości atrybutu:

• brak
Atrybut używany w elementach:
HR
Przykładowe zastosowania:

• Przykład 1:

<hr noshade>


Atrybut HTML: nowrap

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

nowrap

Atrybut definiuje blokowanie przełamywanie akapitów.

Wartości atrybutu:

• brak
Atrybut używany w elementach:
TD, TH
Przykładowe zastosowania:

• Przykład 1:

<table border="1"><tr>
<td nowrap>ten tekst się nie przełamnie
w tabeli (można się domyślić)</td>
<td>ten tekst się przełamnie w tabeli
(też można się domyślić)</td>
</tr></table>

ten tekst się nie przełamnie w tabeli (można się domyślić) ten tekst się przełamnie w tabeli (też można się domyślić)


Atrybut HTML: object

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

object

Atrybut definiuje nazwę pliku z serializowaną wersją appletu, który ma rozszerzenie .class.

nie zalecany, zastąp elementem: OBJECT i jego atrybutami

Wartości atrybutu:

• nazwa pliku
Atrybut używany w elementach:
APPLET
Przykładowe zastosowania:

• Przykład 1:

<applet object="serial.class" codebase="../applet/"
  width="100" height="100">
</applet>


Atrybut HTML: onblur

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

onblur

Definiuje reakcję na zdarzenie pochodzące od myszy i polegające na opuszczeniu aktywnego elementu. Wtedy wywoływany jest zwykle jakiś skrypt napisany w języku JavaScript.

Wartości atrybutu:

• skrypt
np. alert('Nastąpiła reakcja');
Atrybut używany w elementach:
A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA
Przykładowe zastosowania:

• Przykład 1:

<a href="#" onblur="alert(\'Nastąpiła reakcja\')">
najdź tutaj i kliknij, a potem kliknij w innym miejscu!</a>

najdź tutaj i kliknij, a potem kliknij w innym miejscu!


Atrybut HTML: onclick

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

onclick

Definiuje reakcję na zdarzenie pochodzące od myszy i polegające na kliknięciu. Wtedy wywoływany jest zwykle jakiś skrypt, często jest to skrypt napisany w języku JavaScript.

Wartości atrybutu:

• skrypt
np. alert('Nastąpiła reakcja');
Atrybut używany w elementach:
A, ABBR, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR
Przykładowe zastosowania:

• Przykład 1:

<a onclick="alert(\'Nastąpiła reakcja\')"
href="#">jakiś link</a>

jakiś link


Atrybut HTML: ondblclick

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

ondblclick

Definiuje reakcję na zdarzenie pochodzące od myszy i polegające na dwukrotnym kliknięciu. Wtedy wywoływany jest zwykle jakiś skrypt, często jest to skrypt napisany w języku JavaScript.

Wartości atrybutu:

• skrypt
np. alert('Nastąpiła reakcja');
Atrybut używany w elementach:
A, ABBR, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR
Przykładowe zastosowania:

• Przykład 1:

<P ondblclick="alert(\'Nastąpiła reakcja\')">kliknij tu dwa razy!</P>

kliknij tu dwa razy!


Atrybut HTML: onfocus

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

onfocus

Definiuje reakcję na zdarzenie pochodzące od myszy i polegające na uaktywnieniu elementu. Wtedy wywoływany jest zwykle jakiś skrypt, często jest to skrypt napisany w języku JavaScript.

Wartości atrybutu:

• skrypt
np. alert('Nastąpiła reakcja');
Atrybut używany w elementach:
A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA
Przykładowe zastosowania:

• Przykład 1:

<a href="#" onfocus="alert(\'Nastąpiła reakcja\')">
najdź tutaj i kliknij!</a>

najdź tutaj i kliknij!


Atrybut HTML: onkeydown

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

onkeydown

Definiuje reakcję na zdarzenie pochodzące od klawiatury i polegające na wciśnięciu klawisza. Wtedy wywoływany jest zwykle jakiś skrypt, często jest to skrypt napisany w języku JavaScript.

Wartości atrybutu:

• skrypt
np. alert('Nastąpiła reakcja');
Atrybut używany w elementach:
A, ABBR, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR
Przykładowe zastosowania:

• Przykład 1:

<a href="#" onkeydown="alert(\'Nastąpiła reakcja\')">
uaktywnij link i wciśnij klawisz!</a>

uaktywnij link i wciśnij klawisz!


Atrybut HTML: onkeypress

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

onkeypress

Definiuje reakcję na zdarzenie pochodzące od klawiatury i polegające na wciśnięciu i puszczeniu klawisza. Wtedy wywoływany jest zwykle jakiś skrypt, często jest to skrypt napisany w języku JavaScript.

Wartości atrybutu:

• skrypt
np. alert('Nastąpiła reakcja');
Atrybut używany w elementach:
A, ABBR, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR
Przykładowe zastosowania:

• Przykład 1:

<a href="#" onkeypress="alert(\'Nastąpiła reakcja\')">
uaktywnij link i wciśnij klawisz!</a>

uaktywnij link i wciśnij klawisz!


Atrybut HTML: onkeyup

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

onkeyup

Definiuje reakcję na zdarzenie pochodzące od klawiatury i polegające na puszczeniu klawisza. Wtedy wywoływany jest zwykle jakiś skrypt, często jest to skrypt napisany w języku JavaScript.

Wartości atrybutu:

• skrypt
np. alert('Nastąpiła reakcja');
Atrybut używany w elementach:
A, ABBR, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR
Przykładowe zastosowania:

• Przykład 1:

<a href="#" onkeyup="alert(\'Nastąpiła reakcja\')">
uaktywnij link i wciśnij klawisz!</a>

uaktywnij link i wciśnij klawisz!


Atrybut HTML: onload

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

onload

Definiuje reakcję na zdarzenie zachodzące w momencie wczytania (pobrania) strony WWW do przeglądarki. Wtedy wywoływany jest zwykle jakiś skrypt, często jest to skrypt napisany w języku JavaScript.

Wartości atrybutu:

• skrypt
np. alert('Nastąpiła reakcja');
Atrybut używany w elementach:
BODY, FRAMESET
Przykładowe zastosowania:

• Przykład 1:

<body onload="alert(\'Nastąpiła reakcja\')">


Atrybut HTML: onmousedown

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

onmousedown

Definiuje reakcję na zdarzenie pochodzące od myszy i polegające na wciśnięciu przycisku myszy, gdy jej wskaźnik znajduje się nad elementem. Wtedy wywoływany jest zwykle jakiś skrypt, często jest to skrypt napisany w języku JavaScript.

Wartości atrybutu:

• skrypt
np. alert('Nastąpiła reakcja');
Atrybut używany w elementach:
A, ABBR, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR
Przykładowe zastosowania:

• Przykład 1:

<p onmousedown="alert(\'Nastąpiła reakcja\')">najedź i kliknij tu!</p>

najedź i kliknij tu!


Atrybut HTML: onmousemove

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

onmousemove

Definiuje reakcję na zdarzenie pochodzące od myszy i polegające na poruszeniu myszą nad elementem. Wtedy wywoływany jest zwykle jakiś skrypt, często jest to skrypt napisany w języku JavaScript.

Wartości atrybutu:

• skrypt
np. alert('Nastąpiła reakcja');
Atrybut używany w elementach:
A, ABBR, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR
Przykładowe zastosowania:

• Przykład 1:

<b onmousemove="alert(\'Nastąpiła reakcja\')">poruszaj tu myszą!</b>

poruszaj tu myszą!


Atrybut HTML: onmouseout

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

onmouseout

Definiuje reakcję na zdarzenie pochodzące od myszy i polegające na opuszczeniu elementu przez wskaźnik myszy. Wtedy wywoływany jest zwykle jakiś skrypt, często jest to fragment JavaScriptu.

Wartości atrybutu:

• skrypt
np. alert('Nastąpiła reakcja');
Atrybut używany w elementach:
A, ABBR, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR
Przykładowe zastosowania:

• Przykład 1:

<B onmouseout="alert(\'Nastąpiła reakcja\')">najedź i wyjedź!</B>

najedź i wyjedź!


Atrybut HTML: onmouseover

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

onmouseover

Definiuje reakcję na zdarzenie pochodzące od myszy i polegające na najechaniu nad element. Wtedy wywoływany jest zwykle jakiś skrypt, często jest to skrypt napisany w języku JavaScript.

Wartości atrybutu:

• skrypt
np. alert('Nastąpiła reakcja');
Atrybut używany w elementach:
A, ABBR, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR
Przykładowe zastosowania:

• Przykład 1:

<b onmouseover="alert(\'Nastąpiła reakcja\')">najedź tu!</b>

najedź tu!


Atrybut HTML: onmouseup

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

onmouseup

Definiuje reakcję na zdarzenie pochodzące od myszy i polegające na puszczeniu przycisku myszy, gdy jej wskaźnik znajduje się nad elementem. Wtedy wywoływany jest zwykle jakiś skrypt, często jest to skrypt napisany w języku JavaScript.

Wartości atrybutu:

• skrypt
np. alert('Nastąpiła reakcja');
Atrybut używany w elementach:
A, ABBR, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR
Przykładowe zastosowania:

• Przykład 1:

<p onmouseup="alert(\'Nastąpiła reakcja\')">najedź i puść klawisz!</p>

najedź i puść klawisz


Atrybut HTML: onunload

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

onunload

Definiuje reakcję na zdarzenie zachodzące w momencie opuszczenia (usunięcia) strony WWW z przeglądarki.

Wartości atrybutu:

• skrypt
np. alert('Nastąpiła reakcja');
Atrybut używany w elementach:
BODY, FRAMESET
Przykładowe zastosowania:

• Przykład 1:

<body onunload="alert(\'Nastąpiła reakcja\')">


Atrybut HTML: profile

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

profile

Atrybut definiuje adresy profili dokumentów HTML. Przeglądarki nie wykorzystują tego atrybutu. Być może będzie on wykorzystywany w przyszłości.

Wartości atrybutu:

• ścieżka
dowolna ścieżka, np. "../projekty/dom/prof.html"
• URL
adres strony w Internecie, np. "http://web.reporter.pl/profile.html"
Atrybut używany w elementach:
HEAD
Przykładowe zastosowania:

• Przykład 1:

<head profile="http://www.reporter.pl/profil.html">


Atrybut HTML: prompt

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

prompt

Atrybut definiuje tekst opisujący pole formularza.

nie zalecany, zastąp elementem: INPUT i jego atrybutami

Wartości atrybutu:

• text
opis pola, np. prompt="podaj numer buta:"
Atrybut używany w elementach:
ISINDEX
Przykładowe zastosowania:

• Przykład 1:

<isindex prompt="wpisz szukane wyrazy: ">


Atrybut HTML: readonly

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

readonly

Atrybut definiuje element tylko do odczytu.

Wartości atrybutu:

• brak
Atrybut używany w elementach:
INPUT, TEXTAREA
Przykładowe zastosowania:

• Przykład 1:

<form>
<input type="text" value="tylko do odczytu" readonly>
</form>


Atrybut HTML: rel

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

rel

Atrybut definiuje relacje między dokumentem bieżącym a docelowym. Nie jest obsługiwany przez przeglądarki.

Wartości atrybutu:

• nazwa
lista nazw odnośników
Atrybut używany w elementach:
A, LINK
Przykładowe zastosowania:

• Przykład 1:

<a href="http://web.reporter.pl/" target="_blank"
rel="innylink">web.reporter.pl</a>


Atrybut HTML: rev

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

rev

Atrybut definiuje odwrotne relacje między dokumentem bieżącym a docelowym. Nie jest obsługiwany przez przeglądarki.

Wartości atrybutu:

• nazwa
lista nazw odnośników
Atrybut używany w elementach:
A, LINK
Przykładowe zastosowania:

• Przykład 1:

<a href="http://web.reporter.pl/" target="_blank"
rev="innylink">web.reporter.pl</a>


Atrybut HTML: rows

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

rows

Atrybut definiuje liczbę wierszy lub wysokość elementu.

Wartości atrybutu:

• liczba znaków
wysokość w znakach stosowana tylko w elemencie TEXTAREA
• piksele
wysokość w pikselach, np. rows=100
• procenty
wysokość w procentach, np. rows=80%
• 0*
specjalna wartość definiująca minimalną wysokość, która jest w stanie poprawnie wyświetlić kolumnę tekstu.
Atrybut używany w elementach:
FRAMESET, TEXTAREA
Przykładowe zastosowania:

• Przykład 1:

<form><textarea cols="30" rows="4">
przykładowe pole tekstowe
</textarea></form>


Atrybut HTML: rowspan

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

rowspan

Atrybut definiuje ilość połączonych wierszy w tabeli.

Wartości atrybutu:

• liczba
ilość wierszy, np. rowspan="2"
Atrybut używany w elementach:
TD, TH
Przykładowe zastosowania:

• Przykład 1:

<table border="1">
<tr><td rowspan="2" valign="center">tekst11</td><td>tekst12</td></tr>
<tr><td>tekst21</td></tr>
<tr><td>tekst31</td><td>tekst31</td></tr>
</table>

tekst11 | tekst12
 | tekst21
tekst31 | tekst31


Atrybut HTML: rules

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

rules

Atrybut definiuje typ krawędzi tabeli.

Wartości atrybutu:

• none - (wartość domyślna)
brak krawędzi, ramki nie są widoczne
• all
wszystkie krawędzie będą widoczne
• groups
poziome krawędzie będą widoczne pomiędzy grupami wydzielonymi przez THEAD, TBODY, TFOOT, i COLGROUP
• rows
poziome krawędzie będą widoczne pomiędzy wierszami tabeli TR
• cols
pionowe krawędzie będą widoczne między kolumnami
Atrybut używany w elementach:
TABLE
Przykładowe zastosowania:

• Przykład 1:

<table rules="rows"><tr>
 <td>pole11</td><td>pole12</td>
</tr><tr>
 <td>pole21</td><td>pole22</td>
</tr></table>

pole11 | pole12
pole21 | pole22

• Przykład 2:

<table rules="cols"><tr>
 <td>pole11</td><td>pole12</td>
</tr><tr>
 <td>pole21</td><td>pole22</td>
</tr></table>

pole11 | pole12
pole21 | pole22


Atrybut HTML: scheme

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

scheme

Atrybut definiuje schemat profilu określonego atrybutem profile. Przeglądarki nie używają tego atrybutu, będzie on miał znaczenie w przyszłości.

Wartości atrybutu:

• tekst
nazwa profilu
Atrybut używany w elementach:
META
Przykładowe zastosowania:

• Przykład 1:

<meta scheme="nazwa_schematu">


Atrybut HTML: scope

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

scope

Atrybut definiuje zasięg komórki nagłówka.

Wartości atrybutu:

• row
wiersz
• col
kolumna
• rowgroup
grupa wierszy
• colgroup
grupa kolumn
Atrybut używany w elementach:
TD, TH
Przykładowe zastosowania:

• Przykład 1:

<th scope="col">nazwa</th>


Atrybut HTML: scrolling

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

scrolling

Atrybut definiuje paski przewijania w ramce.

Wartości atrybutu:

• yes - (wartość domyślna)
paski przewijania widoczne
• no
paski przewijania niewidoczne
• auto
automatyczny wybór, w zależności od wielkości ekranu
Atrybut używany w elementach:
FRAME, IFRAME
Przykładowe zastosowania:

• Przykład 1:

<frame src="ramka1.html" scrolling="yes" noresize name="lewa">


Atrybut HTML: selected

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

selected

Atrybut definiuje element listy jako wybrany. Można nim wstępnie wybrać wartości listy zamiast korzystać z pierwszego elementu listy, jak to ma miejsce domyślnie.

Wartości atrybutu:

• brak
Atrybut używany w elementach:
OPTION
Przykładowe zastosowania:

• Przykład 1:

<form>
<select name="jezyk">
  <option value="win">windows-1250
  <option value="iso" selected>iso-8859-2
  <option value="ami">amigapl
</select>
</form>


Atrybut HTML: shape

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

shape

Atrybut definiuje kształt opisujący aktywny region mapy odsyłaczy.

Wartości atrybutu:

• default - (wartość domyślna)
cały obrazek jest aktywny
• rect
aktywnym regionem jest prostokąt
• circle
aktywnym regionem jest okrąg
• poly
aktywnym regionem wielokąt
Atrybut używany w elementach:
A, AREA
Przykładowe zastosowania:

• Przykład 1:

<center><img src="../p/mapa.gif" usemap="#mapa1" border="0"></center>
<map name="mapa1">
  <area shape="rect" coords="3,4,103,54"
        href="http://web.reporter.pl/" target="_blank">
  <area shape="circle" coords="151,63,35"
        href="http://junior.reporter.pl/" target="_blank">
</map>


Atrybut HTML: size

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

size

Atrybut definiuje wielkość elementu, np. czcionki.

Dla BASEFONT, FONT i HR nie jest zalecany i powinno się go zastępować stylami

Wartości atrybutu:

• [1|2|3|4|5|6|7]
dla elementu FONT i BASEFONT względna wielkość czcionki - im większy numer tym większa czcionka. Za pomocą znaków plus i minus można lokalnie zmniejszać lub zwiększać czcionkę względem aktualnych ustawień.
• [piksele]
dla elementu HR wysokość w pionie
• [piksele]
dla elementu INPUT szerokość pola
• [liczba]
dla elementu SELECT liczba widocznych elementów
Atrybut używany w elementach:
BASEFONT, FONT, HR, INPUT, SELECT,
Przykładowe zastosowania:

• Przykład 1:

<hr size="40">

• Przykład 2:

<font size="-2">
  tekst pomniejszony względem aktualnych wymiarów czcionki
</font>

tekst pomniejszony względem aktualnych wymiarów czcionki

• Przykład 3:

<form>
  <input type="text" size="30">
</form>

• Przykład 4:

<form>
  <select size="4">
    <option>opcja 1</option>
    <option>opcja 2</option>
    <option>opcja 3</option>
    <option>opcja 4</option>
    <option>opcja 5</option>
    <option>opcja 6</option>
    <option>opcja 7</option>
  </select>
</form>


Atrybut HTML: span

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

span

Atrybut definiuje ilość kolumn w grupie.

Wartości atrybutu:

• liczba
liczba kolumn, domyślnie "1"
Atrybut używany w elementach:
COL, COLGROUP
Przykładowe zastosowania:

• Przykład 1:

<table border="1">
  <colgroup width="100" align="center">
    <col span="2">
    <col width="200">
  </colgroup>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
</table>

tekst | tekst | tekst
tekst | tekst | tekst
tekst | tekst | tekst


Atrybut HTML: src

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

src

Atrybut definiuje adres zawartości elementu. Może to być adres grafiki do wstawienia, strony WWW lub np. skryptu do wykonania.

Wartości atrybutu:

• ścieżka
dowolna ścieżka, np. "../projekty/dom/index.html"
• URL
adres strony w Internecie, np. "http://web.reporter.pl/opis.html"
Atrybut używany w elementach:
FRAME, IFRAME, IMG, INPUT, SCRIPT
Przykładowe zastosowania:

• Przykład 1:

<img src="../p/logo.gif" width="120" height="60">

• Przykład 2:

<frame src="ramka1.html" scrolling=yes name="lewa">

• Przykład 3:

<script language="javascript" type="text/javascript"
src="http://web.reporter.pl/dodaj/skrypty/webnews.php">
</script>


Atrybut HTML: standby

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

standby

Atrybut definiuje tekst pokazywany w czasie ładowania obiektu.

Wartości atrybutu:

• tekst
np. standby="trwa ładowanie obiektu"
Atrybut używany w elementach:
OBJECT
Przykładowe zastosowania:

• Przykład 1:

<object standby="poczekaj, zaraz zagrasz w ulubioną grę">


Atrybut HTML: start

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

start

Atrybut definiuje numer początkowy listy.

Wartości atrybutu:

• liczba
liczba, od której zaczyna być numerowana lista, np. start="2"
Atrybut używany w elementach:
OL
Przykładowe zastosowania:

• Przykład 1:

<ol start="5">
  <li>pierwszy element listy
  <li>drugi element listy
  <li>trzeci element listy
  <li>czwarty element listy
</ol>

  5. pierwszy element listy
  6. drugi element listy
  7. trzeci element listy
  8. czwarty element listy


Atrybut HTML: style

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

style

Atrybut definiuje styl CSS elementu.

Wartości atrybutu:

• CSS
poprawna definicja stylu CSS
Atrybut używany w elementach:
A, ABBR, ACRONYM, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, HR, I, IFRAME, IMG, INPUT, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR
Przykładowe zastosowania:

• Przykład 1:

<p style="color:red;font-size:16px;">przykładowy akapit,
który jest czerwony i duży</p>

przykładowy akapit, który jest czerwony i duży


Atrybut HTML: summary

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

summary

Atrybut definiuje skrótowy opis tabeli. Stosowany gdy przeglądarka nie może wyświetlić całej tabeli.

Wartości atrybutu:

• tekst
dowolny opis, np. summary="tabela opisuje ginące gatunki ptaków"
Atrybut używany w elementach:
TABLE
Przykładowe zastosowania:

• Przykład 1:

<table border="1" summary="streszczenie tabeli"><tr>
 <td>pole11</td><td>pole12</td>
</tr><tr>
 <td>pole21</td><td>pole22</td>
</tr></table>

pole11 | pole12
pole21 | pole22


Atrybut HTML: tabindex

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

tabindex

Definiuje kolejność tabulacji, czyli przechodzenia klawiszem "tab" po poszczególnych elementach z atrybutem tabindex.

Wartości atrybutu:

• cyfra
np. "1"
Atrybut używany w elementach:
A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA
Przykładowe zastosowania:

• Przykład 1:

<a href="http://reporter.pl/" tabindex="1">reporter.pl</a>
<br><a href="http://web.reporter.pl/" tabindex="3">web.reporter.pl</a>
<br><a href="http://foto.reporter.pl/" tabindex="2">foto.reporter.pl</a>

reporter.pl
web.reporter.pl
foto.reporter.pl


Atrybut HTML: target

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

target

Atrybut definiuje okno docelowe dla otwieranego dokumentu.

Wartości atrybutu:

• _blank
nowe, nienazwane okno
• _parent
okno macierzyste lub okno rodzica
• _self - (wartość domyślna)
okno, z którego nastąpiło odwołanie - standardowe zachowanie
• _top
okno główne, likwidowane są wszelkie inne ramki
• nazwa
okno o nazwie podanej przez użytkownika
Atrybut używany w elementach:
A, AREA, BASE, FORM, LINK
Przykładowe zastosowania:

• Przykład 1:

odnośnik otwiera się w nowym oknie:
<a href="http://web.reporter.pl/"
target="_blank">web.reporter.pl</a>

odnośnik otwiera się w nowym oknie: web.reporter.pl

• Przykład 2:

odnośnik otwiera się w tym samym oknie:
<a href="http://web.reporter.pl/"
target="_self">web.reporter.pl</a>
oczywiście dla wartości _self nie trzeba podawać atrybutu
target bo jest to wartość standardowa

odnośnik otwiera się w tym samym oknie: web.reporter.pl oczywiście dla wartości _self nie trzeba podawać atrybutu target bo jest to wartość standardowa


Atrybut HTML: text

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

text

Atrybut definiuje kolor tekstu.

nie zalecany, zastąp stylem: color

Wartości atrybutu:

• kolor - (domyślnie: text="black")
angielska nazwa koloru np. text="green" lub zapis szesnastkowy #RRGGBB, np. text="#33FF99".
Atrybut używany w elementach:
BODY
Przykładowe zastosowania:

• Przykład 1:

<body text="black" bgcolor="white" background="/g/malpa.gif"
link="black" vlink="#666666" alink="black">


Atrybut HTML: title

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

title

Atrybut definiuje tytuł elementu. Jest on pokazywany po najechaniu myszą na element, np. na paragraf tekstu lub odnośnik.

Wartości atrybutu:

• tekst
dowolny tekst
Atrybut używany w elementach:
A, ABBR, ACRONYM, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, HR, I, IFRAME, IMG, INPUT, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR
Przykładowe zastosowania:

• Przykład 1:

<p title="przykładowy tytuł akapitu">przykładowy akapit,
najedź na niego myszą aby zobaczyć tytuł</p>
<a href="http://www.reporter.pl" target=_blank
title="serwis informacyjny">reporter.pl</a>

przykładowy akapit, najedź na niego myszą aby zobaczyć tytuł

reporter.pl


Atrybut HTML: type

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

type

Definiuje typ MIME obiektu docelowego lub typ elementu w zależności od zastosowania. Różne elementy HTML przyjmują różne typy wartości.

Wartości atrybutu:

• text
dla elementu INPUT pole służące do wprowadzenia tekstu
• password
dla elementu INPUT pole służące do wprowadzenia hasła
• checkbox
dla elementu INPUT pole wielokrotnego wyboru
• radio
dla elementu INPUT pole jednokrotnego wyboru
• submit
dla elementu INPUT i BUTTON pole do wysłania formularza
• reset
dla elementu INPUT i BUTTON pole do czyszczenia formularza
• file
dla elementu INPUT pole do wstawienia pliku
• hidden
dla elementu INPUT pole ukryte
• image
dla elementu INPUT pole w postaci grafiki
• button
dla elementu INPUT i BUTTON pole w postaci guzika
• disc
dla elementu UL i LI format wyliczania w postaci kropek
• square
dla elementu UL i LI format wyliczania w postaci kwadratu
• circle
dla elementu UL i LI format wyliczania w postaci kółek
• 1
dla elementu OL i LI format wyliczania 1, 2, 3...
• a
dla elementu OL i LI format wyliczania a, b, c...
• A
dla elementu OL i LI format wyliczania A, B, C...
• i
dla elementu OL i LI format wyliczania i, ii, iii...
• I
dla elementu OL i LI format wyliczania I, II, III...
• MIME
dla pozostałych elementów typ MIME, np. "text/html"
Atrybut używany w elementach:
• [MIME] - A, CAPTION, LEGEND LINK, OBJECT, PARAM, SCRIPT, STYLE
• [text|password|checkbox|radio|submit|reset|file|hidden|image|button] - INPUT
• [disc|square|circle] - UL, LI
• [1|a|A|i|I] - OL, LI
• [button|submit|reset] - BUTTON
Przykładowe zastosowania:

• Przykład 1:

<ul type="circle">
  <li>pierwszy element listy
  <li>drugi element listy
  <li>trzeci element listy
  <ul type="i">
    <li>wewnętrzny element listy
    <li>drugi wewnętrzny element
    <li>trzeci wewnętrzny element
  </ul>
  <li>czwarty element listy
</ul>

  • pierwszy element listy
  • drugi element listy
  • trzeci element listy
    • wewnętrzny element listy
    • drugi wewnętrzny element
    • trzeci wewnętrzny element
  • czwarty element listy


Atrybut HTML: usemap

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

usemap

Atrybut definiuje adres mapy dla elementu.

Wartości atrybutu:

• ścieżka
dowolna ścieżka, np. "../projekty/index.html#mapa"
• URL
adres strony w Internecie, np. "http://reporter.pl/mapy.html#mapa"
• identyfikator
nazwa miejsca na stronie WWW zdefiniowana przez atrybut id lub określona przez atrybut name elementu A, np. "/katalog/index.php#mapa"
Atrybut używany w elementach:
IMG, INPUT, OBJECT
Przykładowe zastosowania:

• Przykład 1:

<center><img src="../p/mapa.gif" usemap="#mapa1" border="0"></center>
<map name="mapa1">
  <area shape="rect" coords="3,4,103,54"
        href="http://web.reporter.pl/" target="_blank">
  <area shape="circle" coords="151,63,35"
        href="http://junior.reporter.pl/" target="_blank">
</map>


Atrybut HTML: valign

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

valign

Atrybut definiuje wyrównanie w pionie. Stosuje się go w tabelach.

Wartości atrybutu:

• top
wyrównanie do krawędzi górnej
• bottom
wyrównanie do krawędzi dolnej
• middle - (wartość domyślna)
wyrównanie do części centralnej
• baseline
wyrównanie do lini bazowej
Atrybut używany w elementach:
COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR
Przykładowe zastosowania:

• Przykład 1:

<table width="250" border="1" height=200><tr>
<td valign="top" width="25%">
pewna ilość tekstu aby pokazać, jak ułoży się w tabeli
</td>
<td width="25%">
pewna ilość tekstu
</td>
<td valign="bottom" width="25%">
pewna ilość tekstu
</td>
<td valign="baseline" width="25%">
pewna ilość tekstu
</td>
</td></table>

pewna ilość tekstu aby pokazać, jak ułoży się w tabeli pewna ilość tekstu pewna ilość tekstu pewna ilość tekstu


Atrybut HTML: value

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

value

Definiuje wartość atrybutu.

Wartości atrybutu:

• tekst
różne wartości liczbowe i tekstowe
Atrybut używany w elementach:
BUTTON, INPUT, LI, OPTION, PARAM
Przykładowe zastosowania:

• Przykład 1:

<form>
<input type="text" value="podaj wiek">
</form>

• Przykład 2:

<ol>
<li value="12"> lista od numeru 12
<li> pole listy
<li> pole listy
</ol>

  12. lista od numeru 12
  13. pole listy
  14. pole listy


Atrybut HTML: valuetype

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

valuetype

Atrybut definiuje typ wartości atrybutu.

Wartości atrybutu:

• data - (wartość domyślna)
dane dla obiektu
• ref
odnośnik do danych
• object
ID atrybutu
Atrybut używany w elementach:
PARAM
Przykładowe zastosowania:

• Przykład 1:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width=120 height=60>
<param name=movie value="../p/ludek.swf">
<param name=quality value=high valuetype="data">
</object>


Atrybut HTML: version

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

version

Atrybut definiuje standard języka HTML użyty w dokumencie.

nie zalecany, zastąp elementem: !DOCTYPE

Wartości atrybutu:

• "-//W3C//DTD HTML 4.0//EN"
tzw. Strict DTD, czyli napisany zgodnie z deklarowanym standardem i nie dopuszczający innych tagów.
• "-//W3C//DTD HTML 4.0 Transitional//EN"
tzw. Transitional DTD, czyli napisany zgodnie z deklarowanym standardem i dopuszczający inne tagi.
• "-//W3C//DTD HTML 4.0 Frameset//EN"
tzw. Frames DTD, czyli napisany zgodnie z deklarowanym standardem i dopuszczający inne tagi - stosowany gdy strona zawiera ramki.
Atrybut używany w elementach:
HTML
Przykładowe zastosowania:

• Przykład 1:

<html version="-//w3c//dtd html 4.0 transitional//en">


Atrybut HTML: vlink

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

vlink

Atrybut definiuje kolor odwiedzonych odnośników (linków).

nie zalecany, zastąp stylem: visited

Wartości atrybutu:

• kolor - (domyślnie: vlink="purple")
angielska nazwa koloru np. vlink="green" lub zapis szesnastkowy #RRGGBB, np. vlink="#33FF99".
Atrybut używany w elementach:
BODY
Przykładowe zastosowania:

• Przykład 1:

<body text="black" bgcolor="white" background="/g/malpa.gif"
link="black" vlink="#666666" alink="black">


Atrybut HTML: vspace

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

vspace

Atrybut definiuje odstępy pionowe dookoła elementu. Czasem istnieje konieczność otoczenia grafiki lub appletu pustą przestrzenią - ten atrybut doskonale się nadaje do takich celów.

nie zalecany, zastąp stylami: margin-top, margin-bottom

Wartości atrybutu:

• piksele (domyślnie od 2 do 4)
wysokość wolnej przestrzeni, np. vspace=6
Atrybut używany w elementach:
APPLET, IMG, OBJECT
Przykładowe zastosowania:

• Przykład 1:

Przestrzeń dookoła loga została otoczona na górze i na dole
10 pikselowym odstępem. Dzięki temu układ akapitu jest
<img src="../p/logo.gif" vspace="10" align="middle">
bardziej czytelny. Zabieg często stosowany w przypadku
oblewania tekstem dużej ilości fotografii.

Przestrzeń dookoła loga została otoczona na górze i na dole 10 pikselowym odstępem. Dzięki temu układ akapitu jest [image] bardziej czytelny. Zabieg często stosowany w przypadku oblewania tekstem dużej ilości fotografii.

• Przykład 2:

Przestrzeń dookoła loga została otoczona na górze i na dole
20 pikselowym odstępem. Dzięki temu układ akapitu jest
<img src="../p/logo.gif" vspace="20" align="middle">
bardziej czytelny. Zabieg często stosowany w przypadku
oblewania tekstem dużej ilości fotografii.

Przestrzeń dookoła loga została otoczona na górze i na dole 20 pikselowym odstępem. Dzięki temu układ akapitu jest [image] bardziej czytelny. Zabieg często stosowany w przypadku oblewania tekstem dużej ilości fotografii.


Atrybut HTML: width

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

width

Atrybut definiuje szerokość elementu.

nie zalecany w elementach HR, TD, TH, APPLET, PRE zastąp stylem: width

Wartości atrybutu:

• piksele
szerokość w pikselach, np. width=100
• procenty
szerokość w procentach, np. width=80%
• liczba znaków
szerokość w znakach stosowana tylko w elemencie PRE
• 0*
specjalna, dodatkowa wartość stosowana w elementach COLGROUP i COL, definiująca minimalną szerokość, która jest w stanie poprawnie wyświetlić kolumnę tekstu.
Atrybut używany w elementach:
• COLGROUP, COL, TABLE, IMG, OBJECT, IFRAME
• nie zalecany, zastąp stylem w: HR, TD, TH, APPLET, PRE
Przykładowe zastosowania:

• Przykład 1:

Powiększenie obrazka - standardowo "buźka" ma wymiar 12x12 pikseli, ale wpisując width="24" powiększamy ją dwa razy. Przy okazji automatycznie zwiększa się wysokość (jeżeli nie została podana), która też ma teraz 24 piksele.

<img src="../p/sm.gif" width="24">

• Przykład 2:

<table width="50%" border="1"><tr><td>
  A to tabelka, która ma dokładnie 50 proc. szerokości ekranu.
  Jak widać, tekst zostaje automatycznie zawijany
</td></tr></table>

A to tabelka, która ma dokładnie 50 proc. szerokości ekranu. Jak widać, tekst zostaje automatycznie zawijany

• Przykład 3:

<pre width="30">
  W swoich założeniach element
PRE ma skalować tekst tak, aby
jego szerokość w linii nie
przekraczała 30 znaków.
</pre>

  W swoich założeniach element
PRE ma skalować tekst tak, aby
jego szerokość w linii nie
przekraczała 30 znaków.


Element HTML: !doctype

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

!DOCTYPE

Element definiuje standard języka HTML użyty w dokumencie. Występuje zawsze jako pierwsza linijka dokumentu HTML przed wszystkimi innymi poleceniami. Może przyjmować następującą formę:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

tzw. Transitional DTD, czyli przejściowy, napisany zgodnie z deklarowanym standardem 4.0 i dopuszczający inne tagi, np. niezalecane przez organizację W3C.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

tzw. Strict DTD, czyli ścisły, napisany zgodnie z deklarowanym standardem i nie dopuszczający innych tagów niż opisane w standardzie.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

tzw. Frames DTD, czyli dla ramek, napisany zgodnie z deklarowanym standardem i dopuszczający inne tagi - stosowany gdy strona zawiera ramki.

Pozostałe cechy:

• znacznik zamykający: zabroniony
• przeglądarki: IE1, N1, O2.1
Grupa elementów strukturalnych:
!DOCTYPE, BASE, BODY, FRAME, FRAMESET, HEAD, HTML, IFRAME, META, NOFRAMES, STYLE, TITLE
Przykładowe zastosowania:

• Przykład 1:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
   <head>
      <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-2">
      <title>Mój pierwszy dokument</title>
   </head>
   <body>
      Witaj świecie!
   </body>
</html>


Element HTML: a

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

A

Element definiuje odnośnik do innej strony WWW lub do określonego miejsca na tej samej lub innej stronie.

Atrybuty elementu:

• href =[ścieżka, URL lub ID] opcjonalny - IE1, N1, O2.1
adres strony lub miejsca, do których następuje odwołanie
• hreflang =[język] opcjonalny - ???
język obiektu docelowego
• coords =[piksele] opcjonalny - ???
współrzędne regionu aktywnego w mapie odsyłaczy
• shape =[default|rect|circle|poly] opcjonalny - ???
kształt opisujący aktywny region mapy odsyłaczy
• rel, rev =[tekst] opcjonalny - IE3
relacje między dokumentem bieżącym a docelowym
• target =[_blank|_parent|_self|_top|Nazwa] opcjonalny - IE3, N2, O2.1
okno docelowe dla otwieranego dokumentu
• charset =[język - domyślnie: ISO-8859-1] opcjonalny - ???
język otwieranego dokumentu
• type =[MIME] opcjonalny - ???
typ MIME otwieranego dokumentu
• accesskey =[litera] opcjonalny - IE4
skrót klawiszowy
• tabindex =[cyfra] opcjonalny - IE4
kolejność tabulacji
• name =[tekst] opcjonalny - IE3, N2, O3.5
nazwa elementu
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onfocus, onblur, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów multimedialnych:
A, APPLET, AREA, IMG, LINK, MAP, NOSCRIPT, OBJECT, PARAM, SCRIPT,
Przykładowe zastosowania:

• Przykład 1:

<p id="akapit1">akapit do którego skoczymy</p>
<p>
<a href="#akapit1">skocz</a>

akapit do którego skoczymy

skocz

• Przykład 2:

Przykładowy tekst, w którym umieszczono odnośnik do
strony <a href="http://web.reporter.pl/"
target=_blank>web.reporter.pl</a> zawierającej wiele
informacji o internecie.

Przykładowy tekst, w którym umieszczono odnośnik do strony web.reporter.pl zawierającej wiele informacji o internecie.

• Przykład 3:

przykładowy tekst, w którym umieszczono odnośnik do katalogu
<a href="../html/" target=_blank>html</a>

• Przykład 4:

przykładowy tekst, w którym umieszczono odnośnik do serwera FTP
<a href="ftp://sunsite.icm.edu.pl/" target=_blank>sunsite</a>

przykładowy tekst, w którym umieszczono odnośnik do serwera FTP sunsite


Element HTML: abbr

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

ABBR

Element definiuje skrót.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: N6, O4
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <abbr>testowane są różne elementy</abbr>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są różne elementy modyfikujące jego wygląd.


Element HTML: acronym

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

ACRONYM

Element definiuje akronim.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE4, N6, O4
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <acronym>testowane są elementy</acronym>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są elementy modyfikujące jego wygląd.


Element HTML: address

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

ADDRESS

Definiuje informacje o autorze strony WWW i jego adresie. W przeglądarce tekst jest pochylony.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów blokowych:
ADDRESS, BLOCKQUOTE, BR, CENTER, DIV, H1, H2, H3, H4, H5, H6, HR, P, PRE,
Przykładowe zastosowania:

• Przykład 1:

<address>
Autorzy serwisu:
<A href="http://reporter.pl/cobretti/">D. Majgier</A>
oraz
<A href="http://reporter.pl/danio/">K. Majgier</A>
</address>

Autorzy serwisu: Dariusz Majgier i Katarzyna Majgier


Element HTML: applet

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

APPLET

Element definiuje applet (program) napisany w języku Java. Jeżeli przeglądarka obsługuje applety, tekst wewnątrz elementu jest ignorowany, w przeciwnym razie pokazuje się w przeglądarce. Można w ten sposób poinformować użytkownika, że nie może uruchomić appletu gdy jego przeglądarka nie obsługuje tego elementu.

Atrybuty elementu:

• code =[nazwa pliku] wymagany - IE3, N2, O3.5
nazwa pliku, który jest appletem
• width, height =[piksele] wymagane - IE3, N2, O3.5
szerokość i wysokość appletu
• align =[bottom|middle|top|left|right] opcjonalny - IE3, N2, O3.5
wyrównanie względem innych elementów
• codebase =[ścieżka lub URL] opcjonalny - IE3, N2
adres bazowy, względem którego ustalany jest atrybut code
• object =[nazwa pliku] opcjonalny - ???
nazwa pliku z serializowaną wersją appletu
• archive =[ścieżka lub URL] opcjonalny - IE4, N3
plik z archiwum klas appletu
• alt =[tekst] opcjonalny - IE3, N2
tekst alternatywny gdy element nie może być wyświetlony
• hspace, vspace =[piksele] opcjonalne - IE3, N2, O4
odstępy poziome i pionowe dookoła appletu
• name =[tekst] opcjonalny - IE3, N2, O3.5
nazwa appletu
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
Pozostałe cechy:
• znacznik zamykający: wymagany
• status: nie zalecany, zastąp elementem: OBJECT
• przeglądarki: IE3, N2, O3.5
Grupa elementów multimedialnych:
A, APPLET, AREA, IMG, LINK, MAP, NOSCRIPT, OBJECT, PARAM, SCRIPT
Przykładowe zastosowania:

• Przykład 1:

Applet, który jest grą (ruchem konika szachowego odwiedź wszystkie pola tylko raz)

<table align="center" cellpadding="10"><tr><td bgcolor="black">
<applet code="gra5.class" codebase="../p" width="160" height="215">
  <param name="pola" value="5">
  Uwaga! Twoja przeglądarka nie widzi appletu!
</applet>
</td></tr></table>

Uwaga! Twoja przeglądarka nie widzi appletu!


Element HTML: area

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

AREA

Element definiuje obszar mapy graficznej.

Atrybuty elementu:

• href =[ścieżka, URL lub ID] opcjonalny - IE1, N1, O2.1
adres strony lub miejsca, do których następuje odwołanie
• coords =[piksele] opcjonalny - IE1, N2, O2.1
współrzędne regionu aktywnego w mapie odsyłaczy
• shape =[default|rect|circle|poly] opcjonalny - IE1, N2, O2.1
kształt opisujący aktywny region mapy odsyłaczy
• accesskey =[litera] opcjonalny - IE4
skrót klawiszowy
• tabindex =[cyfra] opcjonalny - IE4
kolejność tabulacji
• name =[tekst] opcjonalny - IE3, N2, O3.5
nazwa elementu
• nohref =[brak wartości] opcjonalny - IE1, N2, O2.1
pusty odnośnik
• alt =[tekst]opcjonalny - IE4, N3
tekst alternatywny gdy element nie może być wyświetlony
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: zabroniony
• przeglądarki: IE1, N2, O2.1
Grupa elementów multimedialnych:
A, APPLET, AREA, IMG, LINK, MAP, NOSCRIPT, OBJECT, PARAM, SCRIPT,
Przykładowe zastosowania:

• Przykład 1:

<map name="mapa1">
  <area href="strona.html" alt="tekst alternatywny"
  shape="rect" coords="0,0,120,30">
</map>


Element HTML: b

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

B

Element definiuje tekst pogrubiony.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <b>testowane są różne elementy</b>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są różne elementy modyfikujące jego wygląd.


Element HTML: base

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

BASE

Element definiuje adres bazowy dla strony WWW. Względem tego adresu ustalane są wszystkie adresy znajdujące się na stronie, np. w elementach A lub FORM.

Atrybuty elementu:

• href =[ścieżka, URL lub ID] obowiązkowy - IE1, N1, O2.1
adres strony lub miejsca, do których następuje odwołanie
• target =[_blank|_parent|_self|_top|Nazwa] opcjonalny - IE3, N2, O2.1
okno docelowe dla otwieranego dokumentu
Pozostałe cechy:
• znacznik zamykający: zabroniony
• położenie: wewnątrz elementu HEAD
• przeglądarki: IE1, N2, O2.1
Grupa elementów strukturalnych:
!DOCTYPE, BASE, BODY, FRAME, FRAMESET, HEAD, HTML, IFRAME, META, NOFRAMES, STYLE, TITLE
Przykładowe zastosowania:

• Przykład 1:

W poniższym przykładzie adres odnośnika "informacje o języku HTML" będzie wskazywał na stronę http://web.reporter.pl/html/ bez względu na to czy strona będzie umieszczona na dysku lokalnym czy na serwerze. Wszystkie adresy, również nasz "/html/" definiowane są teraz względem adresu bazowego http://web.reporter.pl/. Dodatkowy atrybut target nakazuje aby każdy odnośnik otwierł stronę w nowym oknie przeglądarki.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
   <head>
      <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-2">
      <base href="http://web.reporter.pl/" target=_blank>
      <title>Mój pierwszy dokument</title>
   </head>
   <body>
      Witaj świecie! W wolnym czasie poczytaj sobie
      <a href="/html/">informacje o języku HTML.</a>
   </body>
</html>


Element HTML: basefont

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

BASEFONT

Element definiuje domyślne właściwości czcionki. Względem nich ustalana jest wielkość czcionek zawartych w dokumencie HTML.

Atrybuty elementu:

• size =[1|2|3|4|5|6|7] opcjonalny - IE1, N1, O2.1
wielkość czcionki
• color =[kolor] opcjonalny - IE1, N1, O2.1
kolor czcionki
• face =[nazwa] opcjonalny - IE1
rodzaj czcionki
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• status: nie zalecany, zastąp stylami: font-size, font-family, color
• przeglądarki: IE1, N1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR
Przykładowe zastosowania:

• Przykład 1:

W poniższym przykładzie podstawowa czcionka będzie mieć wielkość umowną 4 (średnia), kolor zielony i będzie to czcionka Arial. Każde zmiana wielkości na stronie powoduje zmianę względem wielkości bazowej. Oznacza to, że fraza "duży napis" będzie miała wielkość 6 (bazowe 4 + kolejne 2)

To zdanie ma atrybuty domyślne czcionki.
<br>
  <basefont size=4 color=green face="arial">
    Oto przykładowy: <font size="+2">duży napis </font>
  </basefont>
<br>
A teraz znowu domyślna czcionka.

To zdanie ma atrybuty domyślne czcionki.
Oto przykładowy: duży napis
A teraz znowu domyślna czcionka.


Element HTML: bdo

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

BDO

Element definiuje kierunek wyświetlania tekstu.

Atrybuty elementu:

• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE5, N6
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

<bdo dir=rtl>Przykładowy tekst, na którym testowane są elementy
modyfikujące jego wygląd.
</bdo>

Przykładowy tekst, na którym testowane są elementy modyfikujące jego wygląd.


Element HTML: big

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

BIG

Element definiuje tekst powiększony.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE3, N1.1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <big>testowane są różne elementy</big>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są różne elementy modyfikujące jego wygląd.


Element HTML: blockquote

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

BLOCKQUOTE

Element definiuje wydzielony blok tekstu.

Atrybuty elementu:

• cite =[URL] opcjonalny - ???
adres źródła
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów blokowych:
ADDRESS, BLOCKQUOTE, BR, CENTER, DIV, H1, H2, H3, H4, H5, H6, HR, P, PRE,
Przykładowe zastosowania:

• Przykład 1:

dowolny tekst
<blockquote>
Nowy akapit z nieco większą ilością tekstu, aby można było
pokazać, że tekst zawija się ładnie. Jeszcze nieco słów,
aby można było wyraźnie pokazać wydzielony blok, który
powstanie po zastosowaniu elementu.
</blockquote>
dowolny tekst

dowolny tekst

Nowy akapit z nieco większą ilością tekstu, aby można było pokazać, że tekst zawija się ładnie. Jeszcze nieco słów, aby można było wyraźnie pokazać wydzielony blok, który powstanie po zastosowaniu elementu.
dowolny tekst


Element HTML: body

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

BODY

Element definiuje "ciało" strony WWW, czyli jej zawartość.

Atrybuty elementu:

• bgcolor =[kolor] opcjonalny - IE1, N1.1, O2.1
kolor tła
• background =[ścieżka, URL] opcjonalny - IE1, N1.1, O2.1
graficzne tło strony
• link =[kolor] opcjonalny - IE1, N1.1, O2.1
kolor odnośników
• alink =[kolor] opcjonalny - IE1, N1.1, O2.1
kolor naciśniętych odnośników
• vlink =[kolor] opcjonalny - IE1, N1.1, O2.1
kolor odwiedzonych odnośników
• text =[kolor] opcjonalny - IE1, N1.1, O2.1
kolor tekstu
• onload, onunload =[skrypt] opcjonalny - IE3, N2, O3
reakcje na pobranie lub usunięcie dokumentu HTML przez przeglądarkę
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: opcjonalny
• położenie: wewnątrz elementu HTML
• przeglądarki: IE1, N1, O2.1
Grupa elementów strukturalnych:
!DOCTYPE, BASE, BODY, FRAME, FRAMESET, HEAD, HTML, IFRAME, META, NOFRAMES, STYLE, TITLE
Przykładowe zastosowania:

• Przykład 1:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
   <head>
      <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-2">
      <title>Mój Pierwszy dokument</title>
   </head>
   <body text=black bgcolor=white link=navy vlink=gray alink=red>
      Witaj świecie!
   </body>
</html>


Element HTML: br

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

BR

Element definiuje przełamamnie akapitu, czyli przejście do nowej linii.

Atrybuty elementu:

• clear =[none|left|right|all] opcjonalny - IE1, N1, O2.1
położenie nowej linii za grafiką
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
Pozostałe cechy:
• znacznik zamykający: zabroniony
• przeglądarki: IE1, N1, O2.1
Grupa elementów blokowych:
ADDRESS, BLOCKQUOTE, BR, CENTER, DIV, H1, H2, H3, H4, H5, H6, HR, P, PRE,
Przykładowe zastosowania:

• Przykład 1:

trochę tekstu, który został <br> przełamany

trochę tekstu, który został
przełamany


Element HTML: button

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

BUTTON

Element definiuje rozbudowane przyciski w formularzach. Można go stosować zamiast elementu INPUT do wysyłania formularzy. Ma tą zaletę, że można w nim umieścić fragmenty kodu HTML i grafiki.

Atrybuty elementu:

• disabled =[brak wartości] opcjonalny - IE4, N6
wyłącza element
• tabindex =[cyfra] opcjonalny - IE4
kolejność tabulacji
• accesskey =[litera] opcjonalny - IE4
skrót klawiszowy
• name =[tekst] opcjonalny - IE4, N6
nazwa elementu
• value =[tekst] opcjonalny - IE4, N6
wartość parametru
• type =[button|submit|reset] opcjonalny - IE4, N4
typ danych
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onfocus, onblur, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• położenie: wewnątrz elementu FORM
• przeglądarki: IE4, N6
Grupa elementów formularzy:
BUTTON, FIELDSET, FORM, INPUT, ISINDEX, LABEL, LEGEND, OPTGROUP, OPTION, SELECT, TEXTAREA,
Przykładowe zastosowania:

• Przykład 1:

<form action="..." method="get">
  Imię: <input type="text" id="imie"><br>
  Nazwisko: <input type="text" id="nazwisko"><br>
  Miasto:
  <select>
    <option>Warszawa</option>
    <option>Sosnowiec</option>
    <option>Inne</option>
  </select><br>
  Płeć:
  <input type="radio" name="plec" value="k"> kobieta
  <input type="radio" name="plec" value="m"> mężczyzna<br>
  Ulubione potrawy:
  <input type="checkbox" name="potrawa" value="b"> barszcz
  <input type="checkbox" name="potrawa" value="l"> łosoś
  <input type="checkbox" name="potrawa" value="i"> inna<br>
  <textarea name="tekst" rows="5" cols="20">
    Miejsce na większy tekst
  </textarea><br>
  <button type="reset" name="reset">
    skasuj<hr width=30>dane
  </button>
  <input type="submit" value=" wyślij dane ">
</form>

Imię:
Nazwisko:
Miasto:
Płeć: kobieta mężczyzna
Ulubione potrawy: barszcz łosoś inna


Element HTML: caption

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

CAPTION

Element definiuje podpis tabeli.

Atrybuty elementu:

• align =[top|bottom|left|right] opcjonalny - IE2, N1.1, O2.1
wyrównuje dane w poziomie
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onfocus, onblur, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• położenie: wewnątrz elementu TABLE
• przeglądarki: IE2, N1.1, O2.1
Grupa elementów tabeli:
CAPTION, COL, COLGROUP, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR
Przykładowe zastosowania:

• Przykład 1:

<table border=1>
  <caption align="bottom">tabelka "tekstowa"</caption>
  <thead align=center>
    <tr><td colspan=3>naglówek tabeli</td></tr>
  </thead>
  <tfoot align=center>
    <tr><td colspan=3>stopka tabeli</td></tr>
  </tfoot>
  <colgroup width=100 align=center>
    <col>
    <col>
    <col width=200>
  </colgroup>
  <tbody>
    <tr><th> opis </th><th> tekst </th><th> tekst </th></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
  </tbody>
</table>

Tabelka "tekstowa"
naglówek tabeli
opis | tekst | tekst
tekst | tekst | tekst
tekst | tekst | tekst
tekst | tekst | tekst
stopka tabeli


Element HTML: center

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

CENTER

Element definiuje położenie centralne. Wypośrodkowuje elementy strony.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• status: nie zalecany, zastąp stylem: text-align
• przeglądarki: IE1, N1, O2.1
Grupa elementów blokowych:
ADDRESS, BLOCKQUOTE, BR, CENTER, DIV, H1, H2, H3, H4, H5, H6, HR, P, PRE
Przykładowe zastosowania:

• Przykład 1:

<center>
wycentrowany tekst
</center>

wycentrowany tekst


Element HTML: cite

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

CITE

Element definiuje cytat.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <cite>testowane są różne elementy</cite>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są różne elementy modyfikujące jego wygląd.


Element HTML: code

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

CODE

Element definiuje fragment programu komputerowego, czyli kodu.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <code>testowane są elementy</code>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są elementy modyfikujące jego wygląd.


Element HTML: col

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

COL

Element definiuje właściwości pojedynczej kolumny.

Atrybuty elementu:

• align =[left|center|right|justify|char] opcjonalny - IE4
wyrównanie w poziomie
• valign =[top|middle|bottom|baseline] opcjonalny - IE4
wyrównanie w pionie
• char =[znak] opcjonalny - ???
znak, względem którego nastąpi wyrównanie
• charoff =[piksele] opcjonalny - ???
pozycja znaku wyrównania
• bgcolor =[kolor] opcjonalny - IE4
kolor tła
• width =[piksele, procenty] opcjonalny - IE3, N6
szerokość kolumny
• span =[liczba] opcjonalny - IE3, N6
ilość kolumn w grupie
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: zabroniony
• położenie: wewnątrz elementu TABLE
• przeglądarki: IE3, N6, O4
Grupa elementów tabeli:
CAPTION, COL, COLGROUP, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR
Przykładowe zastosowania:

• Przykład 1:

<table border=1>
  <caption>tabelka "tekstowa"</caption>
  <thead align=center>
    <tr><td colspan=3>naglówek tabeli</td></tr>
  </thead>
  <tfoot align=center>
    <tr><td colspan=3>stopka tabeli</td></tr>
  </tfoot>
  <colgroup width=100 align=center>
    <col>
    <col>
    <col width=200>
  </colgroup>
  <tbody>
    <tr><th> opis </th><th> opis </th><th> opis </th></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
  </tbody>
</table>

Tabelka "tekstowa"
naglówek tabeli
opis | opis | opis
tekst | tekst | tekst
tekst | tekst | tekst
tekst | tekst | tekst
stopka tabeli


Element HTML: colgroup

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

COLGROUP

Element definiuje właściwości grupy kolumn.

Atrybuty elementu:

• align =[left|center|right|justify|char] opcjonalny - IE4
wyrównanie w poziomie
• valign =[top|middle|bottom|baseline] opcjonalny - IE4
wyrównanie w pionie
• char =[znak] opcjonalny - ???
znak, względem którego nastąpi wyrównanie
• charoff =[piksele] opcjonalny - ???
pozycja znaku wyrównania
• bgcolor =[kolor] opcjonalny - IE4
kolor tła
• width =[piksele, procenty] opcjonalny - IE3, N6
szerokość kolumny
• span =[liczba] opcjonalny - IE3, N6
ilość kolumn w grupie
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: opcjonalny
• położenie: wewnątrz elementu TABLE
• przeglądarki: IE3, N6, O4
Grupa elementów tabeli:
CAPTION, COL, COLGROUP, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR
Przykładowe zastosowania:

• Przykład 1:

<table border=1>
  <caption>tabelka "tekstowa"</caption>
  <thead align=center>
    <tr><td colspan=3>naglówek tabeli</td></tr>
  </thead>
  <tfoot align=center>
    <tr><td colspan=3>stopka tabeli</td></tr>
  </tfoot>
  <colgroup width=100 align=center>
    <col>
    <col>
    <col width=200>
  </colgroup>
  <tbody>
    <tr><th> opis </th><th> opis </th><th> opis </th></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
  </tbody>
</table>

Tabelka "tekstowa"
naglówek tabeli
opis | opis | opis
tekst | tekst | tekst
tekst | tekst | tekst
tekst | tekst | tekst
stopka tabeli


Element HTML: dd

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

DD

Element definiuje wyjaśnienie hasła dla listy definicji.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: opcjonalny
• położenie: wewnątrz elementu DL, za elementem DT
• przeglądarki: IE1, N1, O2.1
Grupa elementów list:
DD, DIR, DL, DT, LI, MENU, OL, UL,
Przykładowe zastosowania:

• Przykład 1:

<dl>
  <dt> hasło1
    <dd> wyjaśnienie hasła1 - może być nawet bardzo
         długie, wtedy automatycznie jest zawijane tak,
         aby zachować odstęp
  <dt> hasło2
    <dd> wyjaśnienie hasła2
  <dt> hasło3
    <dd> wyjaśnienie hasła3
</dl>

hasło1
wyjaśnienie hasła1 - może być nawet bardzo długie, wtedy automatycznie jest zawijane tak, aby zachować odstęp
hasło2
wyjaśnienie hasła2
hasło3
wyjaśnienie hasła3


Element HTML: del

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

DEL

Element definiuje tekst zaznaczony jako usunięty.

Atrybuty elementu:

• cite =[URL] opcjonalny - ???
adres źródła
• datetime =[data] opcjonalny - ???
data zmian
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE4, N6, O4
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <del>testowane są różne</del>
<ins>pokazujemy</ins> elementy modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są różne pokazujemy elementy modyfikujące jego wygląd.


Element HTML: dfn

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

DFN

Element definiuje tekst jako definicję.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N6, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <dfn>testowane są elementy</dfn>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są elementy modyfikujące jego wygląd.


Element HTML: dir

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

DIR

Element definiuje listę zawierającą dane w wielu kolumnach ustawionych obok siebie. Przeglądarki nie interpretują poprawnie tego polecenia, więc przykład poniżej nie pokazuje stanu faktycznego. Przeglądarki traktują go jak element UL.

Atrybuty elementu:

• compact =[brak] opcjonalny - IE1, N1, O2.1
lista bardziej zwartą
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• status: nie zalecany, zastąp elementem: UL
• przeglądarki: brak danych
Grupa elementów list:
DD, DIR, DL, DT, LI, MENU, OL, UL
Przykładowe zastosowania:

• Przykład 1:

<dir>
  <li>pierwsza kolumna1 <li>druga kolumna1
  <li>pierwsza kolumna2 <li>druga kolumna2
  <li>pierwsza kolumna3 <li>druga kolumna3
</dir>

  • pierwsza kolumna1
  • druga kolumna1
  • pierwsza kolumna2
  • druga kolumna2
  • pierwsza kolumna3
  • druga kolumna3

    • • • •


Element HTML: div

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

DIV

Element definiuje i grupuje elementy oraz ich atrybuty.

Atrybuty elementu:

• align =[left|center|right|justify] opcjonalny - IE3, N2, O2.1
wyrównanie w poziomie
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE3, N2, O2.1
Grupa elementów blokowych:
ADDRESS, BLOCKQUOTE, BR, CENTER, DIV, H1, H2, H3, H4, H5, H6, HR, P, PRE
Przykładowe zastosowania:

• Przykład 1:

jakiś tekst
<div style="color:teal;" id="fragment1">
  inny tekst
  <h3>Nagłówek tekstu</h3>
  akapit tekstu dowolnego
</div>
jeszcze jeden tekst

jakiś tekst

inny tekst

Nagłówek tekstu

akapit tekstu dowolnego
jeszcze jeden tekst


Element HTML: dl

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

DL

Element definiuje listę definicji.

Atrybuty elementu:

• compact =[brak] opcjonalny - IE1, N1, O2.1
lista bardziej zwartą
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: opcjonalny
• przeglądarki: IE1, N1, O2.1
Grupa elementów list:
DD, DIR, DL, DT, LI, MENU, OL, UL
Przykładowe zastosowania:

• Przykład 1:

<dl>
  <dt> hasło1
    <dd> wyjaśnienie hasła1 - może być nawet bardzo
         długie, wtedy automatycznie jest zawijane tak,
         aby zachować odstęp
  <dt> hasło2
    <dd> wyjaśnienie hasła2
  <dt> hasło3
    <dd> wyjaśnienie hasła3
</dl>

hasło1
wyjaśnienie hasła1 - może być nawet bardzo długie, wtedy automatycznie jest zawijane tak, aby zachować odstęp
hasło2
wyjaśnienie hasła2
hasło3
wyjaśnienie hasła3


Element HTML: dt

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

DT

Element definiuje hasło dla listy definicji.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: opcjonalny
• położenie: wewnątrz elementu DL, przed elementem DD
• przeglądarki: IE1, N1, O2.1
Grupa elementów list:
DD, DIR, DL, DT, LI, MENU, OL, UL,
Przykładowe zastosowania:

• Przykład 1:

<dl>
  <dt> hasło1
    <dd> wyjaśnienie hasła1 - może być nawet bardzo
         długie, wtedy automatycznie jest zawijane tak,
         aby zachować odstęp
  <dt> hasło2
    <dd> wyjaśnienie hasła2
  <dt> hasło3
    <dd> wyjaśnienie hasła3
</dl>

hasło1
wyjaśnienie hasła1 - może być nawet bardzo długie, wtedy automatycznie jest zawijane tak, aby zachować odstęp
hasło2
wyjaśnienie hasła2
hasło3
wyjaśnienie hasła3


Element HTML: em

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

EM

Element definiuje tekst charakterystyczny.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <em>testowane są elementy</em>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są elementy modyfikujące jego wygląd.


Element HTML: fieldset

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

FIELDSET

Element definiuje grupy elementów formularza.

Atrybuty elementu:

• accesskey =[litera] opcjonalny - IE4
skrót klawiszowy
• align =[top|bottom|left|right] opcjonalny - IE4, O4
wyrównanie w poziomie i pionie
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• położenie: wewnątrz elementu FORM
• przeglądarki: IE4, N6, O4
Grupa elementów formularzy:
BUTTON, FIELDSET, FORM, INPUT, ISINDEX, LABEL, LEGEND, OPTGROUP, OPTION, SELECT, TEXTAREA
Przykładowe zastosowania:

• Przykład 1:

<form action="..." method="get">
  <fieldset>
    <legend>pola tekstowe</legend>
     <label for="imie">imie: </label>
      <input type="text" id="imie"><br>
    <label for="nazwisko">nazwisko: </label>
      <input type="text" id="nazwisko"><br>
    pole baz label: <input type="text"><br>
  </fieldset>
  <fieldset>
    <legend>pola wyboru</legend>
    <select>
      <optgroup label="systemy operacyjne">
        <option label="windows"
          value="w">system Windows</option>
        <option label="unix"
          value="u">system Unix</option>
      </optgroup>
      <optgroup label="procesor">
        <option label="intel"
           value="i">procesor Intel</option>
        <option label="amd"
           value="a">procesor Amd</option>
      </optgroup>
    </select>
  </fieldset>
  <input type="submit" value=" wyślij dane ">
</form>

pola tekstowe

pole baz LABEL:
pola wyboru


Element HTML: font

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

FONT

Element definiuje właściwości czcionki. Przy użyciu FONT trzeba uważać, aby element zamykający nie był "przylepiony" do ostatniego wyrazu w tekscie, który zajmuje więcej niż jedną linię. W przeciwnym razie ostatnia linijka akapitu będzie miała większy odstęp niż pozostałe - co wygląda mało estetycznie. Błąd ten występuje w przeglądarkach Internet Explorer i aby się przed nim zabezpieczyć najlepiej przed elementem zamykającym FONT dodać spację, jak w przykładzie: <FONT color="navy">jakiś fragment tekstu </FONT>.

Atrybuty elementu:

• size =[1|2|3|4|5|6|7] opcjonalny - IE1, N1, O2.1
wielkość czcionki
• color =[kolor] opcjonalny - IE1, N1, O2.1
kolor czcionki
• face =[nazwa] opcjonalny - IE1
rodzaj czcionki
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• status: nie zalecany, zastąp stylami: font-size, font-family, color
• przeglądarki: IE1, N1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst,
<FONT color="green" size="+1">
na którym testowane są elementy
</FONT>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są elementy modyfikujące jego wygląd.

• Przykład 2:

<font size="+3">o</font><font size="+1">ryginalny</font>
<font size="+3">t</font><font size="+1">ytuł</font>

oryginalny tytuł

• Przykład 3:

<font size="-3">r</font>
<font size="-2">o</font>
<font size="-1">s</font>
<font size="-0">n</font>
<font size="+1">ą</font>
<font size="+2">c</font>
<font size="+3">e</font>

<font size="+3">l</font>
<font size="+2">i</font>
<font size="+1">t</font>
<font size="+0">e</font>
<font size="-1">r</font>
<font size="-2">k</font>
<font size="-3">i</font>

r o s n ą c e l i t e r k i


Element HTML: form

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

FORM

Element definiuje formularz.

Atrybuty elementu:

• action =[URL, ścieżka] obowiązkowy - IE1, N1, O2.1
adres strony przetwarzającej dane
• method =[get|post] opcjonalne - IE1, N1, O2.1
sposób przekazywania parametrów
• enctype =[MIME] opcjonalne - IE1, N1, O2.1
sposób kodowania danych
• accept-charset =[język] opcjonalne - ???
język, z jakiego pochodzą wprowadzane znaki
• accept =[MIME] opcjonalne - ???
akceptowany zestaw znaków
• name =[tekst] opcjonalny - IE3, N2, O3
nazwa elementu
• target =[_blank|_parent|_self|_top|Nazwa] opcjonalny - IE3, N2, O2.1
okno docelowe dla otwieranego dokumentu
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O1
Grupa elementów formularzy:
BUTTON, FIELDSET, FORM, INPUT, ISINDEX, LABEL, LEGEND, OPTGROUP, OPTION, SELECT, TEXTAREA
Przykładowe zastosowania:

• Przykład 1:

<form action="..." method="get">
<input type="hidden" name="odbiorca" value="adres@odbiorcy">
<table>
<tr><td>imie i nazwisko:</td>
<td><input type="text" name="imie"></td></tr>
<tr><td>twój adres e-mail:</td>
<td><input type="text" name="email"></td></tr>
<tr><td>treść listu:</td>
<td><textarea name="tekst" rows="5" cols="20">
</textarea></td></tr>
</table>
<input type="submit" value=" wyślij dane ">
<input type="reset" value=" wyczyść dane ">
</form>

imie i nazwisko:
twój adres e-mail:
treść listu:

• Przykład 2:

<form action="..." method="get">
  Miasto:
  <select>
    <option>Warszawa</option>
    <option>Sosnowiec</option>
    <option>Inne</option>
  </select><br>
  Płeć:
  <input type="radio" name="plec" value="k"> kobieta
  <input type="radio" name="plec" value="m"> mężczyzna<br>
  Ulubione potrawy:
  <input type="checkbox" name="potrawa" value="b"> barszcz
  <input type="checkbox" name="potrawa" value="l"> łosoś
  <input type="checkbox" name="potrawa" value="i"> inna<br>
  <textarea name="tekst" rows="5" cols="20">
    Miejsce na większy tekst
  </textarea><br>
  <button type="reset" name="reset">
    skasuj<hr width=30>dane
  </button>
  <input type="submit" value=" wyślij dane ">
</form>

Miasto:
Płeć: kobieta mężczyzna
Ulubione potrawy: barszcz łosoś inna


Element HTML: frame

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

FRAME

Element definiuje źródło i właściwości ramek.

Atrybuty elementu:

• name =[tekst] opcjonalny - IE3, N2, O2.1
nazwa elementu
• longdesc =[ścieżka, URL] opcjonalny - ???
adres dokumentu opisującego element
• src =[ścieżka, URL] obowiązkowy - IE3, N2, O2.1
adres zawartości elementu
• noresize =[brak] opcjonalny - IE3, N2, O2.1
blokuje rozmiar elementu
• scrolling =[auto|yes|no] opcjonalny - IE3, N2, O2.1
paski przewijania
• frameborder =[yes|no] lub [1|0] opcjonalny - IE3, N2, O2.1
włącza lub wyłącza obramowanie
• marginwidth, marginheight =[piksele] opcjonalny - IE3, N2, O2.1
szerokość marginesów poziomych i pionowych
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
Pozostałe cechy:
• znacznik zamykający: zabroniony
• położenie: wewnątrz elementu FRAMESET
• przeglądarki: IE3, N2, O2.1
Grupa elementów strukturalnych:
!DOCTYPE, BASE, BODY, FRAME, FRAMESET, HEAD, HTML, IFRAME, META, NOFRAMES, STYLE, TITLE
Przykładowe zastosowania:

• Przykład 1:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
   <head>
      <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-2">
      <title>Tytuł strony</title>
   </head>
   <frameset cols="33%,33%,33%">
     <frame src="ramka1.html" scrolling=yes name="lewa">
     <frame src="ramka2.html" scrolling=yes name="srodkowa">
     <frame src="ramka3.html" scrolling=yes name="prawa">
     <noframes>
        ups... Twoja przeglądarka nie obsługuje ramek.
     </noframes>
   </frameset>
</html>


Element HTML: frameset

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

FRAMESET

Element definiuje zbiór ramek. Wykorzystuje się go zamiast elementu BODY w stronach z ramkami.

Atrybuty elementu:

• rows, cols =[piksele, procenty, *] opcjonalny - IE3, N2, O2.1
liczba oraz rozmiar kolumn i wierszy
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onload, onunload =[skrypt] opcjonalny - IE3, N2, O3
reakcje na pobranie lub usunięcie dokumentu HTML przez przeglądarkę
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE3, N2, O2.1
Grupa elementów strukturalnych:
!DOCTYPE, BASE, BODY, FRAME, FRAMESET, HEAD, HTML, IFRAME, META, NOFRAMES, STYLE, TITLE
Przykładowe zastosowania:

• Przykład 1:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
   <head>
      <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-2">
      <title>Tytuł strony</title>
   </head>
   <frameset cols="33%,33%,33%">
     <frame src="ramka1.html" scrolling=yes name="lewa">
     <frame src="ramka2.html" scrolling=yes name="srodkowa">
     <frame src="ramka3.html" scrolling=yes name="prawa">
     <noframes>
        ups... Twoja przeglądarka nie obsługuje ramek.
     </noframes>
   </frameset>
</html>


Element HTML: h1

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

H1

Element definiuje tytuł akapitu (największy).

Atrybuty elementu:

• align =[left|center|right|justify] opcjonalny - IE1, N1, O2.1
wyrównanie w poziomie
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów blokowych:
ADDRESS, BLOCKQUOTE, BR, CENTER, DIV, H1, H2, H3, H4, H5, H6, HR, P, PRE
Przykładowe zastosowania:

• Przykład 1:

<h1>
Tytuł rozdziału
</h1>

Tytuł rozdziału

• • •
Zobacz porady, skrypty, artykuły i gotowe rozwiązania dla właścicieli stron WWW!


Element HTML: h2

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

H2

Element definiuje tytuł akapitu.

Atrybuty elementu:

• align =[left|center|right|justify] opcjonalny - IE1, N1, O2.1
wyrównanie w poziomie
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów blokowych:
ADDRESS, BLOCKQUOTE, BR, CENTER, DIV, H1, H2, H3, H4, H5, H6, HR, P, PRE
Przykładowe zastosowania:

• Przykład 1:

<h2>
Tytuł rozdziału
</h2>

Tytuł rozdziału

• • •
Zobacz porady, skrypty, artykuły i gotowe rozwiązania dla właścicieli stron WWW!


Element HTML: h3

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

H3

Element definiuje tytuł akapitu.

Atrybuty elementu:

• align =[left|center|right|justify] opcjonalny - IE1, N1, O2.1
wyrównanie w poziomie
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów blokowych:
ADDRESS, BLOCKQUOTE, BR, CENTER, DIV, H1, H2, H3, H4, H5, H6, HR, P, PRE
Przykładowe zastosowania:

• Przykład 1:

<h3>
Tytuł rozdziału
</h3>

Tytuł rozdziału

• • •
Zobacz porady, skrypty, artykuły i gotowe rozwiązania dla właścicieli stron WWW!


Element HTML: h4

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

H4

Element definiuje tytuł akapitu.

Atrybuty elementu:

• align =[left|center|right|justify] opcjonalny - IE1, N1, O2.1
wyrównanie w poziomie
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów blokowych:
ADDRESS, BLOCKQUOTE, BR, CENTER, DIV, H1, H2, H3, H4, H5, H6, HR, P, PRE
Przykładowe zastosowania:

• Przykład 1:

<h4>
Tytuł rozdziału
</h4>

Tytuł rozdziału

• • •
Zobacz porady, skrypty, artykuły i gotowe rozwiązania dla właścicieli stron WWW!


Element HTML: h5

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

H5

Element definiuje tytuł akapitu.

Atrybuty elementu:

• align =[left|center|right|justify] opcjonalny - IE1, N1, O2.1
wyrównanie w poziomie
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów blokowych:
ADDRESS, BLOCKQUOTE, BR, CENTER, DIV, H1, H2, H3, H4, H5, H6, HR, P, PRE
Przykładowe zastosowania:

• Przykład 1:

<h5>
Tytuł rozdziału
</h5>

Tytuł rozdziału

• • •
Zobacz porady, skrypty, artykuły i gotowe rozwiązania dla właścicieli stron WWW!


Element HTML: h6

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

H6

Element definiuje tytuł akapitu (najmniejszy).

Atrybuty elementu:

• align =[left|center|right|justify] opcjonalny - IE1, N1, O2.1
wyrównanie w poziomie
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów blokowych:
ADDRESS, BLOCKQUOTE, BR, CENTER, DIV, H1, H2, H3, H4, H5, H6, HR, P, PRE
Przykładowe zastosowania:

• Przykład 1:

<h6>
Tytuł rozdziału
</h6>

Tytuł rozdziału

• • •
Zobacz porady, skrypty, artykuły i gotowe rozwiązania dla właścicieli stron WWW!


Element HTML: head

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

HEAD

Element definiuje nagłówek i elementy opisujące dokument HTML.

Atrybuty elementu:

• profile =[ścieżka, URL] opcjonalny - ???
adresy profili dokumentów HTML
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
Pozostałe cechy:
• znacznik zamykający: opcjonalny
• położenie: wewnątrz elementu HTML
• przeglądarki: IE1, N1, O2.1
Grupa elementów strukturalnych:
!DOCTYPE, BASE, BODY, FRAME, FRAMESET, HEAD, HTML, IFRAME, META, NOFRAMES, STYLE, TITLE
Przykładowe zastosowania:

• Przykład 1:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
   <head>
      <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-2">
      <title>Tytuł strony</title>
   </head>
   <body>
      Witaj świecie!
   </body>
</html>


Element HTML: hr

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

HR

Element definiuje linię poziomą. Służy ona często do oddzielania fragmentów tekstu.

Atrybuty elementu:

• align =[left|center|right|justify] opcjonalny - IE1, N1, O2.1
wyrównanie w poziomie
• noshade =[brak] opcjonalny - IE1, N1, O2.1
brak cienia pod linią
• size =[piksele] opcjonalny - IE1, N1, O2.1
grubość linii
• width =[piksele, procenty] opcjonalny - IE1, N1, O2.1
długość linii
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: zabroniony
• przeglądarki: IE1, N1, O2.1
Grupa elementów blokowych:
ADDRESS, BLOCKQUOTE, BR, CENTER, DIV, H1, H2, H3, H4, H5, H6, HR, P, PRE,
Przykładowe zastosowania:

• Przykład 1:

<hr width="50%" align="center">
<p>
<hr size="5">
<p>
<hr noshade size="5" align="right">
<p>
<hr size="1" width="300">


Element HTML: html

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

HTML

Element definiuje początek dokumentu HTML. Nie ma konieczności stosowania go, ale w dobrym tonie jest gdy znajduje się w każdym dokumencie.

Atrybuty elementu:

• version =[wersjaHTML] opcjonalny - ???
standard języka HTML
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
Pozostałe cechy:
• znacznik zamykający: opcjonalny
• przeglądarki: IE1, N1, O2.1
Grupa elementów strukturalnych:
!DOCTYPE, BASE, BODY, FRAME, FRAMESET, HEAD, HTML, IFRAME, META, NOFRAMES, STYLE, TITLE
Przykładowe zastosowania:

• Przykład 1:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
   <head>
      <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-2">
      <title>Tytuł strony</title>
   </head>
   <body>
      Witaj świecie!
   </body>
</html>


Element HTML: i

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

I

Element definiuje tekst pochyły.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <i>testowane są różne elementy</i>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są różne elementy modyfikujące jego wygląd.


Element HTML: iframe

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

IFRAME

Element definiuje ramkę zawierającą inną stronę WWW. Ramka może być umieszczona w dowolnej części dokumentu HTML.

Atrybuty elementu:

• name =[tekst] opcjonalny - IE3, N2, O2.1
nazwa elementu
• longdesc =[ścieżka, URL] opcjonalny - ???
adres dokumentu opisującego element
• align =[bottom|middle|top|left|right] opcjonalny - IE3, N6
wyrównanie w poziomie i pionie
• width, height =[piksele] opcjonalny - IE3, N6, O4
szerokość ramki w poziomie i pionie
• scrolling =[auto|yes|no] opcjonalny - IE3, N6, O4
paski przewijania
• frameborder =[yes|no] lub [1|0] opcjonalny - IE3, N6, O4
włącza lub wyłącza obramowanie
• marginwidth, marginheight =[piksele] opcjonalny - IE3, N6, O4
szerokość marginesów poziomych i pionowych
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE3, N6, O4
Grupa elementów strukturalnych:
!DOCTYPE, BASE, BODY, FRAME, FRAMESET, HEAD, HTML, IFRAME, META, NOFRAMES, STYLE, TITLE
Przykładowe zastosowania:

• Przykład 1:

<center>
  <iframe src="../p/strona01.html" width="400" height="200"
  frameborder="1">
    ups... twoja przeglądarka nie obsługuje ramek.
  </iframe>
</center>


Element HTML: img

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

IMG

Element definiuje grafikę.

Atrybuty elementu:

• alt =[tekst] opcjonalny - IE1, N1, O2.1
tekst alternatywny gdy element nie może być wyświetlony
• border =[piksele] opcjonalny - IE1, N1, O2.1
szerokość obramowania gdy grafika jest odnośnikiem
• hspace, vspace =[piksele] opcjonalne - IE1, N1, O2.1
odstępy poziome i pionowe dookoła appletu
• align =[bottom|middle|top|left|right] opcjonalny - IE1, N1, O2.1
wyrównanie w poziomie i pionie
• width, height =[piksele] opcjonalny - IE1, N1, O2.1
szerokość i wysokość elementu
• longdesc =[ścieżka, URL] opcjonalny - ???
adres dokumentu opisującego element
• src =[ścieżka, URL] obowiązkowy - IE1, N1, O2.1
źródło grafiki
• usemap =[ścieżka, URL] opcjonalny - IE1, N1, O2.1
adres mapy dla elementu
• ismap =[brak] opcjonalny - IE1, N1, O2.1
dodaje współrzędne do adresu odnośnika
• name =[tekst] opcjonalny - IE1, N1, O2.1
nazwa elementu
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: zabroniony
• przeglądarki: IE1, N1, O2.1
Grupa elementów multimedialnych:
A, APPLET, AREA, IMG, LINK, MAP, NOSCRIPT, OBJECT, PARAM, SCRIPT,
Przykładowe zastosowania:

• Przykład 1:

<center>
<a href="http://www.reporter.pl" target=_blank>
<img src="../p/logo.gif" width="120" height="60" border="0"></a>
</center>


Element HTML: input

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

INPUT

Element definiuje w formularzach pola różnego typu.

Atrybuty elementu:

• disabled =[brak wartości] opcjonalny - IE4, N6
wyłącza element
• usemap =[ścieżka, URL] opcjonalny - IE1, N1, O2.1
adres mapy dla elementu
• ismap =[brak] opcjonalny - IE1, N1, O2.1
dodaje współrzędne do adresu odnośnika
• src =[ścieżka, URL] opcjonalny - IE1, N1, O2.1
źródło grafiki dla przycisku
• alt =[tekst] opcjonalny - IE1, N1, O2.1
tekst alternatywny gdy element nie może być wyświetlony
• readonly =[brak] opcjonalny - IE4, N6
tylko do odczytu
• accept =[MIME] opcjonalne - ???
akceptowany zestaw znaków
• size =[liczba] opcjonalny - IE1, N1, O2.1
szerokość elementu
• checked =[brak] opcjonalny - IE1, N1, O2.1
zaznacza i wybiera element
• maxlength =[liczba] opcjonalny - IE1, N1, O2.1
maksymalna długość tekstu
• align =[bottom|middle|top|left|right] opcjonalny - IE1, N1, O2.1
wyrównanie w poziomie i pionie
• accesskey =[litera] opcjonalny - IE4
skrót klawiszowy
• tabindex =[cyfra] opcjonalny - IE4
kolejność tabulacji
• name =[tekst] opcjonalny - IE1, N1, O2.1
nazwa elementu
• value =[tekst] opcjonalny - IE1, N1, O2.1
wartość parametru
• type =[text|password|checkbox|radio|submit|reset|file|hidden|image|button] opcjonalny - IE1, N1, O2.1
rodzaj elementu
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onfocus, onblur, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: zabroniony
• położenie: wewnątrz elementu FORM
• przeglądarki: IE1, N1, O2.1
Grupa elementów formularzy:
BUTTON, FIELDSET, FORM, INPUT, ISINDEX, LABEL, LEGEND, OPTGROUP, OPTION, SELECT, TEXTAREA
Przykładowe zastosowania:

• Przykład 1:

<form action="..." method="get">
  Imię: <input type="text" id="imie"><br>
  Nazwisko: <input type="text" id="nazwisko"><br>
  Miasto:
  <select>
    <option>Warszawa</option>
    <option>Sosnowiec</option>
    <option>Inne</option>
  </select><br>
  Płeć:
  <input type="radio" name="plec" value="k"> kobieta
  <input type="radio" name="plec" value="m"> mężczyzna<br>
  Ulubione potrawy:
  <input type="checkbox" name="potrawa" value="b"> barszcz
  <input type="checkbox" name="potrawa" value="l"> łosoś
  <input type="checkbox" name="potrawa" value="i"> inna<br>
  <textarea name="tekst" rows="5" cols="20">
    miejsce na większy tekst
  </textarea><br>
  <button type="reset" name="reset">
    skasuj<hr width=30>dane
  </button>
  <input type="submit" value=" wyślij dane ">
</form>

Imię:
Nazwisko:
Miasto:
Płeć: kobieta mężczyzna
Ulubione potrawy: barszcz łosoś inna


Element HTML: ins

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

INS

Element definiuje wstawkę redakcyjną.

Atrybuty elementu:

• cite =[URL] opcjonalny - ???
adres źródła
• datetime =[data] opcjonalny - ???
data zmian
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE4, N6, O4
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <del>testowane są różne</del>
<ins>pokazujemy</ins> elementy modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są różne pokazujemy elementy modyfikujące jego wygląd.


Element HTML: isindex

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

ISINDEX

Element definiuje pole tekstowe w formularzach służące do wyszukiwania tekstu w dokumentach.

Atrybuty elementu:

• prompt =[tekst] opcjonalny - IE1, N1, O2.1
tekst opisujący pole
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
Pozostałe cechy:
• znacznik zamykający: zabroniony
• status: nie zalecany, zastąp elementem: INPUT
• przeglądarki: IE1, N1, O2.1
Grupa elementów formularzy:
BUTTON, FIELDSET, FORM, INPUT, ISINDEX, LABEL, LEGEND, OPTGROUP, OPTION, SELECT, TEXTAREA,
Przykładowe zastosowania:

• Przykład 1:

<isindex prompt="wpisz szukane wyrazy: ">


Element HTML: kbd

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

KBD

Element definiuje tekst wprowadzany z klawiatury.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O3.5
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <kbd>testowane są elementy</kbd>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są elementy modyfikujące jego wygląd.


Element HTML: label

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

LABEL

Element definiuje etykietę dla pola formularza, po kliknięciu której uaktywnia się przypisane jej pole.

Atrybuty elementu:

• accesskey =[litera] opcjonalny - IE4
skrót klawiszowy
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onfocus, onblur, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• położenie: wewnątrz elementu FORM
• przeglądarki: IE4, N6, O4
Grupa elementów formularzy:
BUTTON, FIELDSET, FORM, INPUT, ISINDEX, LABEL, LEGEND, OPTGROUP, OPTION, SELECT, TEXTAREA,
Przykładowe zastosowania:

• Przykład 1:

<form action="..." method="get">
  <fieldset>
    <legend>pola tekstowe</legend>
     <label for="imie">imie: </label>
      <input type="text" id="imie"><br>
    <label for="nazwisko">nazwisko: </label>
      <input type="text" id="nazwisko"><br>
    pole baz label: <input type="text"><br>
  </fieldset>
  <fieldset>
    <legend>pola wyboru</legend>
    <select>
      <optgroup label="systemy operacyjne">
        <option label="windows"
          value="w">system Windows</option>
        <option label="unix"
          value="u">system Unix</option>
      </optgroup>
      <optgroup label="procesor">
        <option label="intel"
           value="i">procesor Intel</option>
        <option label="amd"
           value="a">procesor AMD</option>
      </optgroup>
    </select>
  </fieldset>
  <input type="submit" value=" wyślij dane ">
</form>

pola tekstowe

pole baz LABEL:
pola wyboru


Element HTML: legend

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

LEGEND

Element definiuje tytuł dla grupy elementów oznaczonych elementem FIELDSET. Dookoła zaznaczonych elementów tworzy się ramka z podanym tytułem.

Atrybuty elementu:

• accesskey =[litera] opcjonalny - IE4
skrót klawiszowy
• align =[top|bottom|left|right] opcjonalny - IE4, N6
wyrównanie w poziomie i pionie
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• położenie: wewnątrz elementu FIELDSET
• przeglądarki: IE4, N6
Grupa elementów formularzy:
BUTTON, FIELDSET, FORM, INPUT, ISINDEX, LABEL, LEGEND, OPTGROUP, OPTION, SELECT, TEXTAREA,
Przykładowe zastosowania:

• Przykład 1:

<form action="..." method="get">
  <fieldset>
    <legend>pola tekstowe</legend>
     <label for="imie">imie: </label>
      <input type="text" id="imie"><br>
    <label for="nazwisko">nazwisko: </label>
      <input type="text" id="nazwisko"><br>
    pole baz label: <input type="text"><br>
  </fieldset>
  <fieldset>
    <legend>pola wyboru</legend>
    <select>
      <optgroup label="systemy operacyjne">
        <option label="windows"
          value="w">system windows</option>
        <option label="unix"
          value="u">system Unix</option>
      </optgroup>
      <optgroup label="procesor">
        <option label="intel"
           value="i">procesor Intel</option>
        <option label="amd"
            value="a">procesor AMD</option>
      </optgroup>
    </select>
  </fieldset>
  <input type="submit" value=" wyślij dane ">
</form>

pola tekstowe

pole baz LABEL:
pola wyboru


Element HTML: li

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

LI

Element definiuje nowy element listy.

Atrybuty elementu:

• type =dla OL, [1|A|a|I|i], a dla UL, [disc|square|circle|round] opcjonalny - IE1, N1, O2.1
styl wypunktowania
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: opcjonalny
• położenie: wewnątrz elementów DIR, MENU, OL, UL
• przeglądarki: IE1, N1, O2.1
Grupa elementów list:
DD, DIR, DL, DT, LI, MENU, OL, UL
Przykładowe zastosowania:

• Przykład 1:

<ul>
  <li>pierwszy element listy
  <li>drugi element listy
  <li>trzeci element listy
  <ul>
    <li>wewnętrzny element listy
    <li>drugi wewnętrzny element
    <li>trzeci wewnętrzny element
  </ul>
  <li>czwarty element listy
</ul>

  • pierwszy element listy
  • drugi element listy
  • trzeci element listy
    • wewnętrzny element listy
    • drugi wewnętrzny element
    • trzeci wewnętrzny element
  • czwarty element listy


Element HTML: link

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

LINK

Element definiuje relacje pomiędzy odnośnikami.

Atrybuty elementu:

• href =[ścieżka, URL lub ID] opcjonalny - IE3, N4, O3.5
adres strony lub miejsca, do których następuje odwołanie
• hreflang =[język] opcjonalny - ???
język obiektu docelowego
• type =[MIME] opcjonalny - IE3, N4
typ danych
• rel, rev =[tekst] opcjonalny - IE3, N4, O3.5
relacje między dokumentem bieżącym a docelowym
• charset =[język - domyślnie: ISO-8859-1] opcjonalny - ???
język otwieranego dokumentu
• media =[screen|print|centric devices|projection|braille|speech|all] opcjonalny - IE4, N4, O3.5
typ nośnika
• target =[_blank|_parent|_self|_top|Nazwa] opcjonalny - IE4
okno docelowe dla otwieranego dokumentu
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: zabroniony
• przeglądarki: IE3, N3, O3.5
Grupa elementów multimedialnych:
A, APPLET, AREA, IMG, LINK, MAP, NOSCRIPT, OBJECT, PARAM, SCRIPT,
Przykładowe zastosowania:

• Przykład 1:

<link rel="stylesheet"
href="http://www.reporter.pl/style.css" type="text/css">


Element HTML: map

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

MAP

Element definiuje mapę graficzną.

Atrybuty elementu:

• name =[tekst] opcjonalny - IE1, N2, O2.1
nazwa elementu
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N2, O2.1
Grupa elementów multimedialnych:
A, APPLET, AREA, IMG, LINK, MAP, NOSCRIPT, OBJECT, PARAM, SCRIPT,
Przykładowe zastosowania:

• Przykład 1:

<map name="mapa1">
  <area href="strona.html" alt="tekst alternatywny"
  shape="rect" coords="0,0,120,30">
</map>


Element HTML: menu

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

MENU

Element definiuje listę zawierającą elementy tylko w jednej kolumnie. Przeglądarki nie interpretują poprawnie tego polecenia i traktują go jak element UL.

Atrybuty elementu:

• compact =[brak] opcjonalny - IE1, N1, O2.1
lista bardziej zwartą
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• status: nie zalecany, zastąp elementem: UL
• przeglądarki: IE1, N1, O2.1
Grupa elementów list:
DD, DIR, DL, DT, LI, MENU, OL, UL
Przykładowe zastosowania:

• Przykład 1:

<menu>
  <li>pozycja1
  <li>pozycja2
  <li>pozycja3
  <li>pozycja4
  <li>pozycja5
</menu>

  • pozycja1
  • pozycja2
  • pozycja3
  • pozycja4
  • pozycja5

    • • • •


Element HTML: meta

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

META

Element definiuje właściwości dokumentu HTML.

Atrybuty elementu:

• name =[tekst] opcjonalny - IE2, N1.1, O3
nazwa elementu
• content =[tekst] obowiązkowy - IE2, N1.1, O3
wartość atrybutu name
• scheme =[tekst] opcjonalny - ???
schemat profilu określonego atrybutem profile
• http-equiv =[tekst] opcjonalny - IE2, N1.1, O3
wartość dla nagłówka strony
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
Pozostałe cechy:
• znacznik zamykający: zabroniony
• położenie: wewnątrz elementu HEAD
• przeglądarki: IE2, N1.1, O3
Grupa elementów strukturalnych:
!DOCTYPE, BASE, BODY, FRAME, FRAMESET, HEAD, HTML, IFRAME, META, NOFRAMES, STYLE, TITLE
Przykładowe zastosowania:

• Przykład 1:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
   <head>
      <style type="text/css"><!--
        .test {color: maroon;}
      --></style>
      <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-2">
      <meta name="author" content="dariusz majgier">
      <title>Tytuł strony</title>
   </head>
   <body>
      Witaj świecie!
   </body>
</html>

• Przykład 2:

<meta http-equiv="refresh" content="3; url=http://www.reporter.pl/">


Element HTML: noframes

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

NOFRAMES

Element definiuje alternatywny tekst dla przeglądarek nie obsługujących ramek.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE3, N2, O2.1
Grupa elementów strukturalnych:
!DOCTYPE, BASE, BODY, FRAME, FRAMESET, HEAD, HTML, IFRAME, META, NOFRAMES, STYLE, TITLE
Przykładowe zastosowania:

• Przykład 1:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
   <head>
      <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-2">
      <title>Tytuł strony</title>
   </head>
   <frameset cols="33%,33%,33%">
     <frame src="ramka1.html" scrolling=yes name="lewa">
     <frame src="ramka2.html" scrolling=yes name="srodkowa">
     <frame src="ramka3.html" scrolling=yes name="prawa">
     <noframes>
        ups... twoja przeglądarka nie obsługuje ramek.
     </noframes>
   </frameset>
</html>


Element HTML: noscript

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

NOSCRIPT

Element definiuje alternatywny tekst, który ukaże się, gdy przeglądarka nie obsługuje skryptów.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE3, N3, O3
Grupa elementów multimedialnych:
A, APPLET, AREA, IMG, LINK, MAP, NOSCRIPT, OBJECT, PARAM, SCRIPT,
Przykładowe zastosowania:

• Przykład 1:

<script language="javascript" type="text/javascript">
<!--
function klik() {
    alert(\'Uruchomiłeś okienko!\');
}
// -->
</script>
<noscript>
 Niestety, Twoja przeglądarka nie obsługuje skryptów.
</noscript>
<a href="javascript:klik()">Uruchom okienko!</a>

Niestety, Twoja przeglądarka nie obsługuje skryptów.

[nawet jeżeli obsługuje skrypty też zobaczysz powyższy tekst - tutaj wpisany jest na stałe]


Element HTML: object

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

OBJECT

Element definiuje obiekt multimedialny.

Atrybuty elementu:

• standby =[tekst] opcjonalny - ???
tekst pokazywany w czasie ładowania obiektu
• archive =[ścieżka lub URL] opcjonalny - N6
plik z archiwum klas obiektu
• declare =[brak] opcjonalny - ???
deklaracja obiektu
• data =[ścieżka, URL] opcjonalny - IE3, N6, O4
plik z danymi obiektu
• classid =[ścieżka, URL] opcjonalny - IE3, N6
informacje o klasie obiektu
• codetype =[MIME] opcjonalny - IE3, N6
typ obiektu
• usemap =[ścieżka, URL] opcjonalny - IE4, N6
adres mapy dla elementu
• codebase =[ścieżka lub URL] opcjonalny - IE3, N6
adres bazowy, względem którego ustalane są adresy atrybutów
• border =[piksele] opcjonalny - N6
szerokość obramowania
• hspace, vspace =[piksele] opcjonalne - IE3, N6, O4
odstępy poziome i pionowe dookoła obiektu
• align =[bottom|middle|top|left|right] opcjonalny - IE3, N6, O4
wyrównanie względem innych elementów
• width, height =[piksele] wymagane - IE3, N6, O4
szerokość i wysokość obiektu
• type =[MIME] opcjonalny - IE3, N6, O4
rodzaj elementu
• tabindex =[cyfra] opcjonalny - IE4
kolejność tabulacji
• name =[tekst] opcjonalny - IE3, N6, O4
nazwa obiektu
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE3, N6, O4
Grupa elementów multimedialnych:
A, APPLET, AREA, IMG, LINK, MAP, NOSCRIPT, OBJECT, PARAM, SCRIPT,
Przykładowe zastosowania:

• Przykład 1:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width=120 height=60>
<param name=movie value="../p/ludek.swf">
<param name=quality value=high>
</object>


Element HTML: ol

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

OL

Element definiuje listę numerowaną.

Atrybuty elementu:

• type =[1|A|a|I|i] opcjonalny - IE1, N1, O2.1
styl wypunktowania
• compact =[brak] opcjonalny - IE1, N1, O2.1
lista bardziej zwarta
• start =[liczba] opcjonalny - IE1, N1, O2.1
numer początkowy
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów list:
DD, DIR, DL, DT, LI, MENU, OL, UL,
Przykładowe zastosowania:

• Przykład 1:

<ol>
  <li>pierwszy element listy
  <li>drugi element listy
  <li>trzeci element listy
  <ol>
    <li>wewnętrzny element listy
    <li>drugi wewnętrzny element
    <li>trzeci wewnętrzny element
  </ol>
  <li>czwarty element listy
</ol>

  1. pierwszy element listy
  2. drugi element listy
  3. trzeci element listy
    1. wewnętrzny element listy
    2. drugi wewnętrzny element
    3. trzeci wewnętrzny element
  4. czwarty element listy


Element HTML: optgroup

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

OPTGROUP

Element definiuje etykiety dla zgrupowanych pól wyboru. Element nie jest jednak poprawnie interpretowany przez przeglądarki.

Atrybuty elementu:

• disabled =[brak wartości] opcjonalny - N6
wyłącza element
• label =[tekst] opcjonalny - N6
etykieta grupy
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• położenie: wewnątrz elementu SELECT
• przeglądarki: N6
Grupa elementów formularzy:
BUTTON, FIELDSET, FORM, INPUT, ISINDEX, LABEL, LEGEND, OPTGROUP, OPTION, SELECT, TEXTAREA
Przykładowe zastosowania:

• Przykład 1:

<form action="..." method="get">
  <fieldset>
    <legend>pola tekstowe</legend>
     <label for="imie">imie: </label>
      <input type="text" id="imie"><br>
    <label for="nazwisko">nazwisko: </label>
      <input type="text" id="nazwisko"><br>
    pole baz label: <input type="text"><br>
  </fieldset>
  <fieldset>
    <legend>pola wyboru</legend>
    <select>
      <optgroup label="systemy operacyjne">
        <option label="windows"
          value="w">system Windows</option>
        <option label="unix"
          value="u">system Unix</option>
      </optgroup>
      <optgroup label="procesor">
        <option label="intel"
           value="i">procesor Intel</option>
        <option label="amd"
           value="a">procesor AMD</option>
      </optgroup>
    </select>
  </fieldset>
  <input type="submit" value=" wyślij dane ">
</form>

pola tekstowe

pole baz label:
pola wyboru


Element HTML: option

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

OPTION

Element definiuje nowe pozycje listy w rozwijanych polach wyboru SELECT.

Atrybuty elementu:

• disabled =[brak wartości] opcjonalny - N6
wyłącza element
• selected =[brak wartości] opcjonalny - IE1, N1, O2.1
wybiera element listy
• tabindex =[cyfra] opcjonalny - IE4
kolejność tabulacji
• name =[tekst] opcjonalny - IE1, N1, O2.1
nazwa elementu
• size =[liczba] opcjonalny - IE1, N1, O2.1
szerokość elementu
• multiple =[brak] opcjonalny - IE1, N1, O2.1
wybór wielu elementów
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• położenie: wewnątrz elementu SELECT
• przeglądarki: IE1, N1, O2.1
Grupa elementów formularzy:
BUTTON, FIELDSET, FORM, INPUT, ISINDEX, LABEL, LEGEND, OPTGROUP, OPTION, SELECT, TEXTAREA,
Przykładowe zastosowania:

• Przykład 1:

<form action="..." method="get">
  Imię: <input type="text" id="imie"><br>
  Nazwisko: <input type="text" id="nazwisko"><br>
  Miasto:
  <select>
    <option>Warszawa</option>
    <option>Sosnowiec</option>
    <option>Inne</option>
  </select><br>
  Płeć:
  <input type="radio" name="plec" value="k"> kobieta
  <input type="radio" name="plec" value="m"> mężczyzna<br>
  Ulubione potrawy:
  <input type="checkbox" name="potrawa" value="b"> barszcz
  <input type="checkbox" name="potrawa" value="l"> łosoś
  <input type="checkbox" name="potrawa" value="i"> inna<br>
  <textarea name="tekst" rows="5" cols="20">
    Miejsce na większy tekst
  </textarea><br>
  <button type="reset" name="reset">
    skasuj<hr width=30>dane
  </button>
  <input type="submit" value=" wyślij dane ">
</form>

Imię:
Nazwisko:
Miasto:
Płeć: kobieta mężczyzna
Ulubione potrawy: barszcz łosoś inna


Element HTML: p

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

P

Element definiuje akapit.

Atrybuty elementu:

• align =[left|center|right|justify] opcjonalny - IE1, N1, O2.1
wyrównanie w poziomie
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: opcjonalny
• przeglądarki: IE1, N1, O2.1
Grupa elementów blokowych:
ADDRESS, BLOCKQUOTE, BR, CENTER, DIV, H1, H2, H3, H4, H5, H6, HR, P, PRE
Przykładowe zastosowania:

• Przykład 1:

<p align=right>
Nowy akapit z nieco większą ilością tekstu, aby można było
pokazać, że tekst zawija się ładnie. Akapit umiejscowiony
po prawej stronie
<p>
Nowy akapit z nieco większą ilością tekstu, aby można było
pokazać, że tekst zawija się ładnie.

Nowy akapit z nieco większą ilością tekstu, aby można było pokazać, że tekst zawija się ładnie. Akapit umiejscowiony po prawej stronie

Nowy akapit z nieco większą ilością tekstu, aby można było pokazać, że tekst zawija się ładnie.


Element HTML: param

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

PARAM

Element definiuje parametry obiektu.

Atrybuty elementu:

• valuetype =[data|ref|object] opcjonalny - ???
typ wartości atrybutu
• value =[tekst] opcjonalny - IE3, N2, O3.5
wartość parametru
• type =[MIME] opcjonalny - ???
rodzaj elementu
• name =[tekst] opcjonalny - IE1, N1, O2.1
nazwa elementu
• id =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator
Pozostałe cechy:
• znacznik zamykający: zabroniony
• przeglądarki: IE3, N2, O3.5
Grupa elementów multimedialnych:
A, APPLET, AREA, IMG, LINK, MAP, NOSCRIPT, OBJECT, PARAM, SCRIPT,
Przykładowe zastosowania:

• Przykład 1:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width=120 height=60>
<param name=movie value="../p/ludek.swf">
<param name=quality value=high>
</object>


Element HTML: pre

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

PRE

Element definiuje tekst, w którym zachowane są białe znaki (spacje i nowe wiersze).

Atrybuty elementu:

• width =[liczba] opcjonalny - N6
szerokość w znakach
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów blokowych:
ADDRESS, BLOCKQUOTE, BR, CENTER, DIV, H1, H2, H3, H4, H5, H6, HR, P, PRE,
Przykładowe zastosowania:

• Przykład 1:

dowolny tekst
<pre>
        Nowy akapit z nieco
   większą     ilością tekstu, aby   można było
 pokazać,
że tekst zachowuje swoje właściwości..        .
     i nie jest łamany
</pre>
dowolny tekst

dowolny tekst

        Nowy akapit z nieco
   większą     ilością tekstu, aby   można było
 pokazać,
że tekst zachowuje swoje właściwości..        .
     i nie jest łamany
dowolny tekst


Element HTML: q

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

Q

Element definiuje cytat zagnieżdżony.

Atrybuty elementu:

• cite =[URL] opcjonalny - ???
adres źródła
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE4, N6, O4
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

<q cite="http://foto.reporter.pl/cytaty/">
<p>tu powinien znajdować się cytat...</p>
</q>

tu powinien znajdować się cytat...


Element HTML: s

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

S

Element definiuje tekst przekreślony.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• status: nie zalecany, zastąp stylem: text-decoration
• przeglądarki: IE1, N1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <s>testowane są różne elementy</s>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są różne elementy modyfikujące jego wygląd.


Element HTML: samp

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

SAMP

Element definiuje fragment kodu, próbkę.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <samp>testowane są elementy</samp>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są elementy modyfikujące jego wygląd.


Element HTML: script

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

SCRIPT

Element definiuje skrypt, często jest to fragment kodu napisany w języku JavaScript.

Atrybuty elementu:

• src =[ścieżka, URL] opcjonalny - IE3, N3, O3
plik ze skryptem
• language =[język skryptu] opcjonalny - IE3, N2, O3
język skryptu
• defer =[brak] opcjonalny - IE3, N2, O3
opóźnia wykonanie skryptu
• charset =[język - domyślnie: ISO-8859-1] opcjonalny - ???
kodowanie skryptu
• type =[MIME] opcjonalny - ???
typ danych
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE3, N2, O3
Grupa elementów multimedialnych:
A, APPLET, AREA, IMG, LINK, MAP, NOSCRIPT, OBJECT, PARAM, SCRIPT
Przykładowe zastosowania:

• Przykład 1:

<script language="javascript" type="text/javascript">
<!--
function klik() {
    alert(\'Uruchomiłeś okienko!\');
}
// -->
</script>
<noscript>
 Niestety, Twoja przeglądarka nie obsługuje skryptów.
</noscript>
<a href="javascript:klik()">Uruchom okienko!</a>

Uruchom okienko!


Element HTML: select

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

SELECT

Element definiuje rozwijane pole wyboru w formularzach.

Atrybuty elementu:

• disabled =[brak wartości] opcjonalny - N6
wyłącza element
• tabindex =[cyfra] opcjonalny - IE4
kolejność tabulacji
• name =[tekst] opcjonalny - IE1, N1, O2.1
nazwa elementu
• size =[liczba] opcjonalny - IE1, N1, O2.1
szerokość elementu
• multiple =[brak] opcjonalny - IE1, N1, O2.1
wybór wielu elementów
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• położenie: wewnątrz elementu FORM
• przeglądarki: IE1, N1, O2.1
Grupa elementów formularzy:
BUTTON, FIELDSET, FORM, INPUT, ISINDEX, LABEL, LEGEND, OPTGROUP, OPTION, SELECT, TEXTAREA,
Przykładowe zastosowania:

• Przykład 1:

<form action="..." method="get">
  Imię: <input type="text" id="imie"><br>
  Nazwisko: <input type="text" id="nazwisko"><br>
  Miasto:
  <select>
    <option>Warszawa</option>
    <option>Sosnowiec</option>
    <option>Inne</option>
  </select><br>
  Płeć:
  <input type="radio" name="plec" value="k"> kobieta
  <input type="radio" name="plec" value="m"> mężczyzna<br>
  Ulubione potrawy:
  <input type="checkbox" name="potrawa" value="b"> barszcz
  <input type="checkbox" name="potrawa" value="l"> łosoś
  <input type="checkbox" name="potrawa" value="i"> inna<br>
  <textarea name="tekst" rows="5" cols="20">
    Miejsce na większy tekst
  </textarea><br>
  <button type="reset" name="reset">
    skasuj<hr width=30>dane
  </button>
  <input type="submit" value=" wyślij dane ">
</form>

Imię:
Nazwisko:
Miasto:
Płeć: kobieta mężczyzna
Ulubione potrawy: barszcz łosoś inna


Element HTML: small

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

SMALL

Element definiuje tekst pomniejszony.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE3, N1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

<H5>
Przykładowy tekst, na którym <small>testowane są różne elementy</small>
modyfikujące jego wygląd.
</H5>

Przykładowy tekst, na którym testowane są różne elementy modyfikujące jego wygląd.

• • •
Zobacz porady, skrypty, artykuły i gotowe rozwiązania dla właścicieli stron WWW!


Element HTML: span

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

SPAN

Element definiuje i grupuje elementy liniowe oraz ich atrybuty.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE3, N4, O3.5
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR
Przykładowe zastosowania:

• Przykład 1:

jakiś tekst
<span style="color:teal;" id="fragment1">
  inny tekst
  <h3>Nagłówek tekstu</h3>
  akapit tekstu dowolnego
</span>
jeszcze jeden tekst

jakiś tekst inny tekst

Nagłówek tekstu

akapit tekstu dowolnego jeszcze jeden tekst


Element HTML: strike

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

STRIKE

Element definiuje tekst przekreślony.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• status: nie zalecany, zastąp stylem: text-decoration
• przeglądarki: IE1, N3, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <strike>testowane są elementy</strike>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są elementy modyfikujące jego wygląd.


Element HTML: strong

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

STRONG

Element definiuje tekst mocno wytłuszczony.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <strong>testowane są elementy</strong>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są elementy modyfikujące jego wygląd.


Element HTML: style

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

STYLE

Element definiuje style przypisane do elementów strony WWW.

Atrybuty elementu:

• type =[text/css|and text/javascript|MIME] opcjonalny - IE3, N4
typ danych
• media =[screen|print|centric devices|projection|braille|speech|all] opcjonalny - IE4, N4, O3.5
typ nośnika
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
Pozostałe cechy:
• znacznik zamykający: wymagany
• położenie: wewnątrz elementu HEAD
• przeglądarki: IE3, N4, O3.5
Grupa elementów strukturalnych:
!DOCTYPE, BASE, BODY, FRAME, FRAMESET, HEAD, HTML, IFRAME, META, NOFRAMES, STYLE, TITLE
Przykładowe zastosowania:

• Przykład 1:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
   <head>
      <style type="text/css"><!--
        .test {color: maroon;}
      --></style>
      <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-2">
      <title>Tytuł strony</title>
   </head>
   <body>
      <p class="test">
      Witaj świecie!
      </p>
   </body>
</html>


Element HTML: sub

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

SUB

Element definiuje indeks dolny.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE3, N1.1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <sub>testowane są różne elementy</sub>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są różne elementy modyfikujące jego wygląd.


Element HTML: sup

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

SUP

Element definiuje indeks górny.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE3, N1.1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <sup>testowane są różne elementy</sup>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są różne elementy modyfikujące jego wygląd.


Element HTML: table

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

TABLE

Element definiuje tabelę.

Atrybuty elementu:

• bgcolor =[kolor] opcjonalny - IE2, N3, O2.1
kolor tła
• align =[left|center|right] opcjonalny - IE2, N2, O2.1
wyrównanie w poziomie
• width =[piksele, procenty] opcjonalny - IE2, N3, O2.1
szerokość tabeli
• cellspacing =[piksele] opcjonalny - IE2, N3, O2.1
szerokośc krawędzi komórek
• cellpadding =[piksele] opcjonalny - IE2, N3, O2.1
odległość akapitu od krawędzi komórki
• summary =[tekst] opcjonalny - N6
opis tabeli
• frame =[border|void|above|below|hsides|vsides|lhs|rhs|box] opcjonalny - IE3, N6
typ obramowania tabeli
• rules =[all|none|groups|rows|cols] opcjonalny - N6
typ krawędzi tabeli
• border =[piksele] opcjonalny - IE2, N1.1, O2.1
szerokość obramowania tabeli
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE2, N1.1, O2.1
Grupa elementów tabeli:
CAPTION, COL, COLGROUP, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR
Przykładowe zastosowania:

• Przykład 1:

<table width="300" border="1">
  <tr align="center">
    <td width="60%">komórka a</td>
    <td width="40%">komórka b</td>
  </tr>
</table>

komórka a komórka b


Element HTML: tbody

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

TBODY

Element definiuje i grupuje zawartość tabeli do przewijania. Teoretycznie, przy dużych tabelach zawartość TBODY jest przewijana, podczas gdy nagłówek (THEAD) i stopka (TFOOT) tabeli są cały czas widoczne na ekranie. W praktyce przeglądarki tego nie realizują.

Atrybuty elementu:

• align =[left|center|right|justify|char] opcjonalny - IE4, N6, O4
wyrównanie w poziomie (nie zalecany)
• valign =[top|middle|bottom|baseline] opcjonalny - IE4, N6, O4
wyrównanie w pionie (nie zalecany)
• char =[znak] opcjonalny - ???
znak, względem którego nastąpi wyrównanie
• charoff =[piksele] opcjonalny - ???
pozycja znaku wyrównania
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: opcjonalny
• położenie: wewnątrz elementu TABLE
• przeglądarki: IE3, N6, O4
Grupa elementów tabeli:
CAPTION, COL, COLGROUP, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR
Przykładowe zastosowania:

• Przykład 1:

<table border=1>
  <caption>tabelka "tekstowa"</caption>
  <thead align=center>
    <tr><td colspan=3>naglówek tabeli</td></tr>
  </thead>
  <tfoot align=center>
    <tr><td colspan=3>stopka tabeli</td></tr>
  </tfoot>
  <colgroup width=100 align=center>
    <col>
    <col>
    <col width=200>
  </colgroup>
  <tbody>
    <tr><th> opis </th><th> tekst </th><th> tekst </th></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
  </tbody>
</table>

tabelka "tekstowa"
naglówek tabeli
opis | tekst | tekst
tekst | tekst | tekst
tekst | tekst | tekst
tekst | tekst | tekst
stopka tabeli


Element HTML: td

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

TD

Element definiuje poszczególne komórki tabeli, które mogą być także puste.

Atrybuty elementu:

• colspan, rowspan =[liczba] opcjonalny - IE2, N1.1, O2.1
ilość połączonych kolumn lub wierszy
• nowrap =[brak] opcjonalny - IE2, N1.1, O2.1
blokowanie przełamywanie akapitów
• abbr =[tekst] opcjonalny - ???
opisuje skrótowo zawartość komórki w tabeli
• axis =[tekst] opcjonalny - ???
nazwa pokrewnej grupy komórek
• headers =[ID] opcjonalny - ???
lista nazw nagłówków komórek
• scope =[row|col|rowgroup|colgroup] opcjonalny - ???
zasięg komórki nagłówka
• bgcolor =[kolor] opcjonalny - IE2, N3, O2.1
kolor tła
• align =[left|center|right] opcjonalny - IE2, N2, O2.1
wyrównanie w poziomie
• valign =[top|middle|bottom|baseline] opcjonalny - IE4
wyrównanie w pionie
• width, height =[piksele] opcjonalny - IE2, N1.1, O2.1
szerokość i wysokość elementu
• char =[znak] opcjonalny - ???
znak, względem którego nastąpi wyrównanie
• charoff =[piksele] opcjonalny - ???
pozycja znaku wyrównania
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: opcjonalny
• położenie: wewnątrz elementu TR
• przeglądarki: IE2, N1.1, O2.1
Grupa elementów tabeli:
CAPTION, COL, COLGROUP, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR
Przykładowe zastosowania:

• Przykład 1:

<table width=300 border=1>
  <tr align=center>
    <td width="60%">komórka a</td>
    <td width="40%">komórka b</td>
  </tr>
</table>

komórka a komórka b


Element HTML: textarea

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

TEXTAREA

Element definiuje duże pola tekstowe w formularzach.

Atrybuty elementu:

• readonly =[brak] opcjonalny - IE4, N6
tylko do odczytu
• disabled =[brak wartości] opcjonalny - IE4, N6
wyłącza element
• tabindex =[cyfra] opcjonalny - IE4
kolejność tabulacji
• name =[tekst] opcjonalny - IE1, N1, O2.1
nazwa elementu
• rows, cols =[liczba] opcjonalny - IE3, N2, O2.1
liczba kolumn i wierszy
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onfocus, onblur, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów formularzy:
BUTTON, FIELDSET, FORM, INPUT, ISINDEX, LABEL, LEGEND, OPTGROUP, OPTION, SELECT, TEXTAREA,
Przykładowe zastosowania:

• Przykład 1:

<form action="..." method="get">
  Imię: <input type="text" id="imie"><br>
  Nazwisko: <input type="text" id="nazwisko"><br>
  Miasto:
  <select>
    <option>Warszawa</option>
    <option>Sosnowiec</option>
    <option>Inne</option>
  </select><br>
  Płeć:
  <input type="radio" name="plec" value="k"> kobieta
  <input type="radio" name="plec" value="m"> mężczyzna<br>
  Ulubione potrawy:
  <input type="checkbox" name="potrawa" value="b"> barszcz
  <input type="checkbox" name="potrawa" value="l"> łosoś
  <input type="checkbox" name="potrawa" value="i"> inna<br>
  <textarea name="tekst" rows="5" cols="20">
    Miejsce na większy tekst
  </textarea><br>
  <button type="reset" name="reset">
    skasuj<hr width=30>dane
  </button>
  <input type="submit" value=" wyślij dane ">
</form>

Imię:
Nazwisko:
Miasto:
Płeć: kobieta mężczyzna
Ulubione potrawy: barszcz łosoś inna


Element HTML: tfoot

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

TFOOT

Element definiuje stopkę tabeli. Musi być użyty przed elementem TBODY.

Atrybuty elementu:

• align =[left|center|right|justify|char] opcjonalny - N6, O4
wyrównanie w poziomie
• valign =[top|middle|bottom|baseline] opcjonalny - IE4
wyrównanie w pionie
• char =[znak] opcjonalny - ???
znak, względem którego nastąpi wyrównanie
• charoff =[piksele] opcjonalny - ???
pozycja znaku wyrównania
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: opcjonalny
• położenie: wewnątrz elementu TABLE
• przeglądarki: IE3, N6, O4
Grupa elementów tabeli:
CAPTION, COL, COLGROUP, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR
Przykładowe zastosowania:

• Przykład 1:

<table border=1>
  <caption>tabelka "tekstowa"</caption>
  <thead align=center>
    <tr><td colspan=3>naglówek tabeli</td></tr>
  </thead>
  <tfoot align=center>
    <tr><td colspan=3>stopka tabeli</td></tr>
  </tfoot>
  <colgroup width=100 align=center>
    <col>
    <col>
    <col width=200>
  </colgroup>
  <tbody>
    <tr><th> opis </th><th> tekst </th><th> tekst </th></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
  </tbody>
</table>

tabelka "tekstowa"
naglówek tabeli
opis | tekst | tekst
tekst | tekst | tekst
tekst | tekst | tekst
tekst | tekst | tekst
stopka tabeli


Element HTML: th

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

TH

Element definiuje tytuł kolumny w tabeli.

Atrybuty elementu:

• colspan, rowspan =[liczba] opcjonalny - IE2, N1.1, O2.1
ilość połączonych kolumn lub wierszy
• nowrap =[brak] opcjonalny - IE2, N1.1, O2.1
blokowanie przełamywanie akapitów
• abbr =[tekst] opcjonalny - ???
opisuje skrótowo zawartość komórki w tabeli
• axis =[tekst] opcjonalny - ???
nazwa pokrewnej grupy komórek
• headers =[ID] opcjonalny - ???
lista nazw nagłówków komórek
• scope =[row|col|rowgroup|colgroup] opcjonalny - ???
zasięg komórki nagłówka
• bgcolor =[kolor] opcjonalny - IE2, N3, O2.1
kolor tła
• align =[left|center|right] opcjonalny - IE2, N2, O2.1
wyrównanie w poziomie
• valign =[top|middle|bottom|baseline] opcjonalny - IE4
wyrównanie w pionie
• width, height =[piksele] opcjonalny - IE2, N1.1, O2.1
szerokość i wysokość elementu
• char =[znak] opcjonalny - ???
znak, względem którego nastąpi wyrównanie
• charoff =[piksele] opcjonalny - ???
pozycja znaku wyrównania
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: opcjonalny
• położenie: wewnątrz elementu TR
• przeglądarki: IE2, N1.1, O2.1
Grupa elementów tabeli:
CAPTION, COL, COLGROUP, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR
Przykładowe zastosowania:

• Przykład 1:

<table border=1>
  <caption>tabelka "tekstowa"</caption>
  <thead align=center>
    <tr><td colspan=3>naglówek tabeli</td></tr>
  </thead>
  <tfoot align=center>
    <tr><td colspan=3>stopka tabeli</td></tr>
  </tfoot>
  <colgroup width=100 align=center>
    <col>
    <col>
    <col width=200>
  </colgroup>
  <tbody>
    <tr><th> opis </th><th> tekst </th><th> tekst </th></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
  </tbody>
</table>

tabelka "tekstowa"
naglówek tabeli
opis | tekst | tekst
tekst | tekst | tekst
tekst | tekst | tekst
tekst | tekst | tekst
stopka tabeli


Element HTML: thead

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

THEAD

Element definiuje nagłówek tabeli.

Atrybuty elementu:

• align =[left|center|right|justify|char] opcjonalny - N6, O4
wyrównanie w poziomie
• valign =[top|middle|bottom|baseline] opcjonalny - IE4
wyrównanie w pionie
• char =[znak] opcjonalny - ???
znak, względem którego nastąpi wyrównanie
• charoff =[piksele] opcjonalny - ???
pozycja znaku wyrównania
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: opcjonalny
• położenie: wewnątrz elementu TABLE
• przeglądarki: IE3, N6, O4
Grupa elementów tabeli:
CAPTION, COL, COLGROUP, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR
Przykładowe zastosowania:

• Przykład 1:

<table border=1>
  <caption>tabelka "tekstowa"</caption>
  <thead align=center>
    <tr><td colspan=3>naglówek tabeli</td></tr>
  </thead>
  <tfoot align=center>
    <tr><td colspan=3>stopka tabeli</td></tr>
  </tfoot>
  <colgroup width=100 align=center>
    <col>
    <col>
    <col width=200>
  </colgroup>
  <tbody>
    <tr><th> opis </th><th> tekst </th><th> tekst </th></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
    <tr><td> tekst </td><td> tekst </td><td> tekst </td></tr>
  </tbody>
</table>

tabelka "tekstowa"
naglówek tabeli
opis | tekst | tekst
tekst | tekst | tekst
tekst | tekst | tekst
tekst | tekst | tekst
stopka tabeli


Element HTML: title

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

TITLE

Element definiuje tytuł strony, który wyświetlany jest na pasku tytułowym przeglądarki.

Atrybuty elementu:

• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
Pozostałe cechy:
• znacznik zamykający: wymagany
• położenie: wewnątrz elementu HEAD
• przeglądarki: IE1, N1, O2.1
Grupa elementów strukturalnych:
!DOCTYPE, BASE, BODY, FRAME, FRAMESET, HEAD, HTML, IFRAME, META, NOFRAMES, STYLE, TITLE
Przykładowe zastosowania:

• Przykład 1:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
   <head>
      <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-2">
      <title>mój pierwszy dokument</title>
   </head>
   <body>
      Witaj świecie!
   </body>
</html>


Element HTML: tr

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

TR

Element definiuje wiersz tabeli.

Atrybuty elementu:

• bgcolor =[kolor] opcjonalny - IE2, N3, O2.1
kolor tła
• align =[left|center|right] opcjonalny - IE2, N2, O2.1
wyrównanie w poziomie
• valign =[top|middle|bottom|baseline] opcjonalny - IE4
wyrównanie w pionie
• char =[znak] opcjonalny - ???
znak, względem którego nastąpi wyrównanie
• charoff =[piksele] opcjonalny - ???
pozycja znaku wyrównania
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: opcjonalny
• położenie: wewnątrz elementu TABLE
• przeglądarki: IE2, N1.1, O2.1
Grupa elementów tabeli:
CAPTION, COL, COLGROUP, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR
Przykładowe zastosowania:

• Przykład 1:

<table width=300 border=1>
  <tr align=center>
    <td width="60%">komórka a</td>
    <td width="40%">komórka b</td>
  </tr>
</table>

komórka a komórka b


Element HTML: tt

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

TT

Element definiuje tekst o stałej szerokości liter.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <tt>testowane są różne elementy</tt>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są różne elementy modyfikujące jego wygląd.


Element HTML: u

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

U

Element definiuje tekst podkreślony.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• status: nie zalecany, zastąp stylem: text-decoration
• przeglądarki: IE1, N1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <u>testowane są różne elementy</u>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są różne elementy modyfikujące jego wygląd.


Element HTML: ul

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

UL

Element definiuje listę zwykłą.

Atrybuty elementu:

• type =[disc|square|circle] opcjonalny - IE1, N1, O2.1
styl wypunktowania
• compact =[brak] opcjonalny - IE1, N1, O2.1
lista bardziej zwarta
• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów list:
DD, DIR, DL, DT, LI, MENU, OL, UL,
Przykładowe zastosowania:

• Przykład 1:

<ul>
  <li>pierwszy element listy
  <li>drugi element listy
  <li>trzeci element listy
  <ul>
    <li>wewnętrzny element listy
    <li>drugi wewnętrzny element
    <li>trzeci wewnętrzny element
  </ul>
  <li>czwarty element listy
</ul>

  • pierwszy element listy
  • drugi element listy
  • trzeci element listy
    • wewnętrzny element listy
    • drugi wewnętrzny element
    • trzeci wewnętrzny element
  • czwarty element listy


Element HTML: var

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

VAR

Element definiuje nazwę zmiennej.

Atrybuty elementu:

• id, class =[tekst] opcjonalne - IE3, N4, O3.5
unikalny identyfikator i nazwa klasy CSS
• lang, dir =[tekst] opcjonalne - IE4
język i kierunek wyświetlania tekstu bądź elementu
• title =[tekst] opcjonalny - IE5
tytuł elementu
• style =[CSS] opcjonalny - IE3, N4, O3.5
styl CSS elementu
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup =[skrypt] opcjonalne
reakcje na zdarzenia pochodzące od myszy lub klawiatury
Pozostałe cechy:
• znacznik zamykający: wymagany
• przeglądarki: IE1, N1, O2.1
Grupa elementów liniowych:
ABBR, ACRONYM, B, BASEFONT, BDO, BIG, CITE, CODE, DEL, DFN, EM, FONT, I, INS, KBD, Q, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR,
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, na którym <var>testowane są różne elementy</var>
modyfikujące jego wygląd.

Przykładowy tekst, na którym testowane są różne elementy modyfikujące jego wygląd.


Indeks: a

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• A - element definiuje odnośnik
• ABBR - element definiuje skrót
• ACRONYM - element definiuje akronim
• ADDRESS - element definiuje informacje o autorze strony WWW
• APPLET - element definiuje applet (program) napisany w języku Java
• AREA - element definiuje obszar mapy graficznej
• abbr - atrybut definiuje skrótowy opis zawartości komórki w tabeli
• accept-charset - atrybut definiuje akceptowany język
• accept - atrybut definiuje akceptowany zestaw znaków
• accesskey - atrybut definiuje klawisz skrótu
• action - atrybut definiuje adres strony przetwarzającej dane z formularza
• align - atrybut definiuje wyrównanie względem innych elementów
• alink - atrybut definiuje kolor naciskanych odnośników
• alt - atrybut definiuje tekst alternatywny gdy element nie może być wyświetlony
• archive - atrybut definiuje nazwę pliku, który zawiera klasy appletu
• axis - atrybut definiuje nazwę pokrewnej grupy komórek
• active - styl definiuje właściwości naciskanych odnośników
• after - styl definiuje za elementem dowolną zawartość
• azimuth - styl definiuje kąt wydobywania się dźwięku w poziomie


Indeks: atrybuty

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• abbr - atrybut definiuje skrótowy opis zawartości komórki w tabeli
• accept-charset - atrybut definiuje akceptowany język
• accept - atrybut definiuje akceptowany zestaw znaków
• accesskey - atrybut definiuje klawisz skrótu
• action - atrybut definiuje adres strony przetwarzającej dane z formularza
• align - atrybut definiuje wyrównanie względem innych elementów
• alink - atrybut definiuje kolor naciskanych odnośników
• alt - atrybut definiuje tekst alternatywny gdy element nie może być wyświetlony
• archive - atrybut definiuje nazwę pliku, który zawiera klasy appletu
• axis - atrybut definiuje nazwę pokrewnej grupy komórek
• background - atrybut definiuje adres graficznego tła strony WWW
• bgcolor - atrybut definiuje kolor tła
• border - atrybut definiuje szerokość ramki
• cellpadding - atrybut definiuje odległość akapitu od krawędzi komórki
• cellspacing - atrybut definiuje szerokośc krawędzi komórek
• char - atrybut definiuje znak, względem którego nastąpi wyrównanie
• charoff - atrybut definiuje pozycję znaku wyrównania
• charset - atrybut definiuje język w jakim zakodowano dokument
• checked - atrybut definiuje element formularza jako wybrany
• cite - atrybut definiuje adres źródła informacji
• class - atrybut definiuje klasę CSS dla elementu
• classid - atrybut definiuje informacje o klasie obiektu
• clear - atrybut definiuje położenie nowej linii za grafiką
• code - atrybut definiuje nazwę appletu w Javie dla elementu APPLET
• codebase - atrybut definiuje adres bazowy dla atrybutu code
• codetype - atrybut definiuje typ obiektu
• color - atrybut definiuje kolor czcionki
• cols - atrybut definiuje liczbę kolumn lub szerokość elementu
• colspan - atrybut definiuje ilość połączonych kolumn
• compact - atrybut definiuje listę bardziej zwartą
• content - atrybut definiuje wartość atrybutu "name"
• coords - atrybut definiuje współrzędne regionu w mapie odsyłaczy
• data - atrybut definiuje plik z danymi obiektu
• datetime - atrybut definiuje datę zmian
• declare - atrybut definiuje deklarację obiektu
• defer - atrybut definiuje opóźnienie wykonywania skryptu
• dir - atrybut definiuje kierunek wyświetlania tekstu lub położenie elementu
• disabled - atrybut definiuje brak możliwości korzystania z elementu
• enctype - atrybut definiuje sposób kodowania danych
• face - atrybut definiuje rodzaj czcionki
• frame - atrybut definiuje typ obramowania tabeli
• frameborder - atrybut definiuje obramowanie ramki
• headers - atrybut definiuje listę nazw nagłówków komórek
• height - atrybut definiuje wysokość elementu
• href - atrybut definiuje adres strony lub miejsca
• hreflang - atrybut definiuje język docelowej strony WWW
• hspace - atrybut definiuje odstępy poziome dookoła elementu
• http-equiv - atrybut definiuje wartość dla nagłówka strony
• id - atrybut definiuje unikalny identyfikator
• ismap - atrybut definiuje współrzędne dodawane do adresu odnośnika
• label - atrybut definiuje etykietę grupy
• lang - atrybut definiuje język dla całej lub fragmentu strony
• language - atrybut definiuje język skryptu
• link - atrybut definiuje kolor odnośników
• longdesc - atrybut definiuje adres dokumentu opisującego element
• marginheight - atrybut definiuje szerokość marginesu pionowego ramki
• marginwidth - atrybut definiuje szerokość marginesu poziomego ramki
• maxlength - atrybut definiuje maksymalną długość tekstu w polu
• media - atrybut definiuje typ nośnika
• method - atrybut definiuje sposób przekazywania parametrów
• multiple - atrybut definiuje wybór wielu elementów
• name - atrybut definiuje nazwę elementu
• nohref - atrybut definiuje obszar, z którym nie jest związany żaden odnośnik
• noresize - atrybut definiuje stały rozmiar ramki
• noshade - atrybut definiuje brak cienia pod linią HR
• nowrap - atrybut definiuje blokowanie przełamywanie akapitów
• object - atrybut definiuje nazwę pliku z serializowaną wersją appletu
• onblur - atrybut definiuje reakcję na opuszczeniu aktywnego elementu
• onclick - atrybut definiuje reakcję na kliknięcie myszy
• ondblclick - atrybut definiuje reakcję na podwójne kliknięcie myszy
• onfocus - atrybut definiuje reakcję na uaktywnienie elementu
• onkeydown - atrybut definiuje reakcję na wciśnięcie klawisza
• onkeypress - atrybut definiuje reakcję na wciśnięcie i puszczenie klawisza
• onkeyup - atrybut definiuje reakcję na puszczenie klawisza
• onload - atrybut definiuje reakcję na wczytanie strony WWW
• onmousedown - atrybut definiuje reakcję na wciśnięcie przycisku myszy
• onmousemove - atrybut definiuje reakcję na poruszenie myszą nad elementem
• onmouseout - atrybut definiuje reakcję na opuszczenie elementu
• onmouseover - atrybut definiuje reakcję na najechanie nad element
• onmouseup - atrybut definiuje reakcję na puszczenie przycisku myszy
• onunload - atrybut definiuje reakcję na usunięcie strony WWW
• profile - atrybut definiuje adresy profili dokumentów HTML
• prompt - atrybut definiuje tekst opisujący pole formularza
• readonly - atrybut definiuje element tylko do odczytu
• rel - atrybut definiuje relacje między dokumentami
• rev - atrybut definiuje odwrote relacje między dokumentami
• rows - atrybut definiuje liczbę kolumn lub wysokość elementu
• rowspan - atrybut definiuje ilość połączonych wierszy
• rules - atrybut definiuje typ krawędzi tabeli
• scheme - atrybut definiuje schemat profilu
• scope - atrybut definiuje zasięg komórki nagłówka
• scrolling - atrybut definiuje paski przewijania w ramce
• selected - atrybut definiuje element rozwijanego pola wyboru jako wybrany
• shape - atrybut definiuje kształt aktywnego regionu mapy odsyłaczy
• size - atrybut definiuje wielkość elementu
• span - atrybut definiuje ilość kolumn w grupie
• src - atrybut definiuje adres zawartości elementu
• standby - atrybut definiuje tekst pokazywany w czasie ładowania obiektu
• start - atrybut definiuje numer początkowy listy
• style - atrybut definiuje styl CSS elementu
• summary - atrybut definiuje skrótowy opis tabeli
• tabindex - atrybut definiuje kolejność tabulacji
• target - atrybut definiuje okno docelowe dla otwieranego dokumentu
• text - atrybut definiuje kolor tekstu
• title - atrybut definiuje tytuł elementu
• type - atrybut definiuje typ elementu
• usemap - atrybut definiuje adres mapy dla elementu
• valign - atrybut definiuje wyrównanie w pionie
• value - atrybut definiuje wartość atrybutu
• valuetype - atrybut definiuje typ wartości atrybutu
• version - atrybut definiuje standard języka HTML użyty w dokumencie
• vlink - atrybut definiuje kolor odwiedzonych odnośników
• vspace - atrybut definiuje odstępy pionowe dookoła elementu
• width - atrybut definiuje szerokość elementu


Indeks: b

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• B - element definiuje tekst pogrubiony
• BASE - element definiuje adres bazowy dla strony WWW
• BASEFONT - element definiuje domyślne właściwości czcionki
• BDO - element definiuje kierunek wyświetlania tekstu
• BIG - element definiuje tekst powiększony
• BLOCKQUOTE - element definiuje wydzielony blok tekstu
• BODY - element definiuje "ciało" strony WWW czyli jej zawartość
• BR - element definiuje przełamamnie akapitu
• BUTTON - element definiuje przyciski w formularzach
• background - atrybut definiuje adres graficznego tła strony WWW
• bgcolor - atrybut definiuje kolor tła
• border - atrybut definiuje szerokość ramki
• background-attachment - styl definiuje przewijanie graficznego tła
• background-color - styl definiuje kolor tła
• background-image - styl definiuje adres tła graficznego
• background-position - styl definiuje położenie tła graficznego
• background-repeat - styl definiuje powtórzenie tła graficznego
• background - styl definiuje właściwości tła
• before - styl definiuje przed elementem dowolną zawartość
• border-bottom-color - styl definiuje kolor dolnej ramki
• border-bottom-style - styl definiuje wygląd dolnej ramki
• border-bottom-width - styl definiuje szerokość dolnej ramki
• border-bottom - styl definiuje właściwości dolnej ramki
• border-color - styl definiuje kolor ramki
• border-left-color - styl definiuje kolor lewej ramki
• border-left-style - styl definiuje wygląd lewej ramki
• border-left-width - styl definiuje szerokość lewej ramki
• border-left - styl definiuje właściwości lewej ramki
• border-right-color - styl definiuje kolor prawej ramki
• border-right-style - styl definiuje wygląd prawej ramki
• border-right-width - styl definiuje szerokość prawej ramki
• border-right - styl definiuje właściwości prawej ramki
• border-style - styl definiuje styl i wygląd ramki
• border-top-color - styl definiuje kolor górnej ramki
• border-top-style - styl definiuje wygląd górnej ramki
• border-top-width - styl definiuje szerokość górnej ramki
• border-top - styl definiuje właściwości górnej ramki
• border-width - styl definiuje szerokość ramki
• border - styl definiuje właściwości ramki
• bottom - styl definiuje odległość od dolnej krawędzi


Indeks: bloki

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• ADDRESS - element definiuje informacje o autorze strony WWW
• BLOCKQUOTE - element definiuje wydzielony blok tekstu
• BR - element definiuje przełamamnie akapitu
• DIV - element definiuje i grupuje elementy oraz ich atrybuty
• H1 - element definiuje nagłówek i jego wielkość (największy)
• H2 - element definiuje nagłówek i jego wielkość
• H3 - element definiuje nagłówek i jego wielkość
• H4 - element definiuje nagłówek i jego wielkość
• H5 - element definiuje nagłówek i jego wielkość
• H6 - element definiuje nagłówek i jego wielkość (najmniejszy)
• HR - element definiuje linię poziomą
• P - element definiuje akapit
• PRE - element definiuje tekst, w którym zachowane są białe znaki
• content - styl definiuje tworzenie zawartości dokumentu
• counter-increment - styl definiuje zmianę wartości licznika
• counter-reset - styl definiuje nową wartość licznika
• cursor - styl definiuje wygląd kursora
• display - styl definiuje sposób wyświetlania elementu
• first-child - styl definiuje właściwości pierwszego elementu w hierarchii
• focus - styl definiuje właściwości elementu aktualnie używanego
• lang - styl definiuje język narodowy
• visibility - styl definiuje widoczność elementu


Indeks: c

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• CAPTION - element definiuje podpis tabeli
• CENTER - element definiuje położenie centralne
• CITE - element definiuje cytat
• CODE - element definiuje fragment programu komputerowego
• COL - element definiuje właściwości pojedynczej kolumny
• COLGROUP - element definiuje właściwości grupy kolumn
• cellpadding - atrybut definiuje odległość akapitu od krawędzi komórki
• cellspacing - atrybut definiuje szerokośc krawędzi komórek
• char - atrybut definiuje znak, względem którego nastąpi wyrównanie
• charoff - atrybut definiuje pozycję znaku wyrównania
• charset - atrybut definiuje język w jakim zakodowano dokument
• checked - atrybut definiuje element formularza jako wybrany
• cite - atrybut definiuje adres źródła informacji
• class - atrybut definiuje klasę CSS dla elementu
• classid - atrybut definiuje informacje o klasie obiektu
• clear - atrybut definiuje położenie nowej linii za grafiką
• code - atrybut definiuje nazwę appletu w Javie dla elementu APPLET
• codebase - atrybut definiuje adres bazowy dla atrybutu code
• codetype - atrybut definiuje typ obiektu
• color - atrybut definiuje kolor czcionki
• cols - atrybut definiuje liczbę kolumn lub szerokość elementu
• colspan - atrybut definiuje ilość połączonych kolumn
• compact - atrybut definiuje listę bardziej zwartą
• content - atrybut definiuje wartość atrybutu "name"
• coords - atrybut definiuje współrzędne regionu w mapie odsyłaczy
• caption-side - styl definiuje położenie tytułu tabeli
• clear - styl definiuje położenie nowego akapitu
• clip - styl definiuje widoczną część elementu dla stylu overflow
• color - styl definiuje kolor tekstu
• content - styl definiuje tworzenie zawartości dokumentu
• counter-increment - styl definiuje zmianę wartości licznika
• counter-reset - styl definiuje nową wartość licznika
• cue-after - styl definiuje odtwarzanie dźwięku po elemencie
• cue-before - styl definiuje odtwarzanie dźwięku przed elementem
• cue - styl definiuje odtwarzanie dźwięku przed lub po elemencie
• cursor - styl definiuje wygląd kursora


Indeks: czcionki

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• BASEFONT - element definiuje domyślne właściwości czcionki
• FONT - element definiuje właściwości czcionki
• face - atrybut definiuje rodzaj czcionki
• size - atrybut definiuje wielkość elementu
• font-family - styl definiuje rodzaj oraz rodzinę czcionki
• font-size-adjust - styl definiuje współczynnik wielkości do wysokości znaku
• font-size - styl definiuje wielkość czcionki
• font-stretch - styl definiuje rozstrzelenie liter
• font-style - styl definiuje styl czcionki
• font-variant - styl definiuje wariant czcionki
• font-weight - styl definiuje grubość (wagę) czcionki
• font - styl definiuje właściwości czcionki


Indeks: d

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• DD - element definiuje wyjaśnienie hasła dla listy definicji
• DEL - element definiuje tekst usunięty
• DFN - element definiuje tekst jako definicję
• DIR - element definiuje listę zawierającą elementy w wielu kolumnach
• DIV - element definiuje i grupuje elementy oraz ich atrybuty
• DL - element definiuje listę definicji
• DT - element definiuje hasło dla listy definicji
• data - atrybut definiuje plik z danymi obiektu
• datetime - atrybut definiuje datę zmian
• declare - atrybut definiuje deklarację obiektu
• defer - atrybut definiuje opóźnienie wykonywania skryptu
• dir - atrybut definiuje kierunek wyświetlania tekstu lub położenie elementu
• disabled - atrybut definiuje brak możliwości korzystania z elementu
• direction - styl definiuje kierunek wyświetlania tekstu
• display - styl definiuje sposób wyświetlania elementu


Indeks: druk

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• marks - styl definiuje znaczniki obszaru strony przy wydruku
• orphans - styl definiuje minimalną ilość wierszy na końcu strony
• page-break-after - styl definiuje rozpoczęcie strony po tym elemencie
• page-break-before - styl definiuje rozpoczęcie strony przed tym elementem
• page-break-inside - styl definiuje rozpoczęcie strony w elemencie nadrzędnym
• page - styl definiuje typ strony
• size - styl definiuje wielkość i orientację strony dokumentu
• widows - styl definiuje minimalną ilość wierszy na początku strony


Indeks: e

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• EM - element definiuje tekst charakterystyczny
• enctype - atrybut definiuje sposób kodowania danych
• elevation - styl definiuje kąt wydobywania się dźwięku w pionie
• empty-cells - styl definiuje typ obramowania komórek tabeli, które są puste


Indeks: elementy

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• !DOCTYPE - element definiuje standard języka HTML użyty w dokumencie
• A - element definiuje odnośnik
• ABBR - element definiuje skrót
• ACRONYM - element definiuje akronim
• ADDRESS - element definiuje informacje o autorze strony WWW
• APPLET - element definiuje applet (program) napisany w języku Java
• AREA - element definiuje obszar mapy graficznej
• B - element definiuje tekst pogrubiony
• BASE - element definiuje adres bazowy dla strony WWW
• BASEFONT - element definiuje domyślne właściwości czcionki
• BDO - element definiuje kierunek wyświetlania tekstu
• BIG - element definiuje tekst powiększony
• BLOCKQUOTE - element definiuje wydzielony blok tekstu
• BODY - element definiuje "ciało" strony WWW czyli jej zawartość
• BR - element definiuje przełamamnie akapitu
• BUTTON - element definiuje przyciski w formularzach
• CAPTION - element definiuje podpis tabeli
• CENTER - element definiuje położenie centralne
• CITE - element definiuje cytat
• CODE - element definiuje fragment programu komputerowego
• COL - element definiuje właściwości pojedynczej kolumny
• COLGROUP - element definiuje właściwości grupy kolumn
• DD - element definiuje wyjaśnienie hasła dla listy definicji
• DEL - element definiuje tekst usunięty
• DFN - element definiuje tekst jako definicję
• DIR - element definiuje listę zawierającą elementy w wielu kolumnach
• DIV - element definiuje i grupuje elementy oraz ich atrybuty
• DL - element definiuje listę definicji
• DT - element definiuje hasło dla listy definicji
• EM - element definiuje tekst charakterystyczny
• FIELDSET - element definiuje i grupuje elementy formularza
• FONT - element definiuje właściwości czcionki
• FORM - element definiuje formularz na stronie
• FRAME - element definiuje źródło i właściwości ramek
• FRAMESET - element definiuje zbiór ramek
• H1 - element definiuje nagłówek i jego wielkość (największy)
• H2 - element definiuje nagłówek i jego wielkość
• H3 - element definiuje nagłówek i jego wielkość
• H4 - element definiuje nagłówek i jego wielkość
• H5 - element definiuje nagłówek i jego wielkość
• H6 - element definiuje nagłówek i jego wielkość (najmniejszy)
• HEAD - element definiuje nagłówek i elementy opisujące dokument HTML
• HR - element definiuje linię poziomą
• HTML - element definiuje początek dokumentu HTML
• I - element definiuje tekst pochyły
• IFRAME - element definiuje ramkę umieszczoną w dowolnej części dokumentu
• IMG - element definiuje grafikę
• INPUT - element definiuje różne pola w formularzach
• INS - element definiuje wstawkę redakcyjną
• ISINDEX - element definiuje pole tekstowe w formularzach
• KBD - element definiuje tekst wprowadzany z klawiatury
• LABEL - element definiuje pole formularza uaktywniane po kliknięciu na etykietę
• LEGEND - element definiuje tytuł dla grupy elementów FIELDSET
• LI - element definiuje nowy element listy
• LINK - element definiuje relacje pomiędzy odnośnikami
• MAP - element definiuje mapę graficzną
• MENU - element definiuje listę zawierającą elementy w jednej kolumnie
• META - element definiuje właściwości dokumentu HTML
• NOFRAMES - element definiuje tekst dla przeglądarek bez obsługi ramek
• NOSCRIPT - element definiuje tekst dla przeglądarek bez obsługi skryptów
• OBJECT - element definiuje obiekt multimedialny
• OL - element definiuje listę numerowaną
• OPTGROUP - element definiuje etykiety dla zgrupowanych pól wyboru
• OPTION - element definiuje nowe pozycje listy w polach wyboru SELECT
• P - element definiuje akapit
• PARAM - element definiuje parametry obiektu
• PRE - element definiuje tekst, w którym zachowane są białe znaki
• Q - element definiuje cytat zagnieżdżony
• S - element definiuje tekst przekreślony
• SAMP - element definiuje fragment kodu, próbkę
• SCRIPT - element definiuje skrypt
• SELECT - element definiuje rozwijane pole wyboru w formularzach
• SMALL - element definiuje tekst pomniejszony
• SPAN - element definiuje i grupuje elementy liniowe oraz ich atrybuty
• STRIKE - element definiuje tekst przekreślony
• STRONG - element definiuje tekst mocno wytłuszczony
• STYLE - element definiuje style przypisane do elementów strony WWW
• SUB - element definiuje indeks dolny
• SUP - element definiuje indeks górny
• TABLE - element definiuje tabelę
• TBODY - element definiuje i grupuje zawartość tabeli do przewijania
• TD - element definiuje komórki tabeli
• TEXTAREA - element definiuje duże pola tekstowe w formularzach
• TFOOT - element definiuje stopkę tabeli
• TH - element definiuje tytuł kolumny
• THEAD - element definiuje nagłówek tabeli
• TITLE - element definiuje tytuł strony
• TR - element definiuje wiersz tabeli
• TT - element definiuje tekst o stałej szerokości liter
• U - element definiuje tekst podkreślony
• UL - element definiuje listę zwykłą
• VAR - element definiuje nazwę zmiennej


Indeks: f

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• FIELDSET - element definiuje i grupuje elementy formularza
• FONT - element definiuje właściwości czcionki
• FORM - element definiuje formularz na stronie
• FRAME - element definiuje źródło i właściwości ramek
• FRAMESET - element definiuje zbiór ramek
• face - atrybut definiuje rodzaj czcionki
• frame - atrybut definiuje typ obramowania tabeli
• frameborder - atrybut definiuje obramowanie ramki
• first-child - styl definiuje właściwości pierwszego elementu w hierarchii
• first-letter - styl definiuje właściwości pierwszej litery elementu
• first-line - styl definiuje właściwości pierwszej linii elementu
• float - styl definiuje kierunek oblewania elementu
• focus - styl definiuje właściwości elementu aktualnie używanego
• font-family - styl definiuje rodzaj oraz rodzinę czcionki
• font-size-adjust - styl definiuje współczynnik wielkości do wysokości znaku
• font-size - styl definiuje wielkość czcionki
• font-stretch - styl definiuje rozstrzelenie liter
• font-style - styl definiuje styl czcionki
• font-variant - styl definiuje wariant czcionki
• font-weight - styl definiuje grubość (wagę) czcionki
• font - styl definiuje właściwości czcionki


Indeks: formularze

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• BUTTON - element definiuje przyciski w formularzach
• FIELDSET - element definiuje i grupuje elementy formularza
• FORM - element definiuje formularz na stronie
• INPUT - element definiuje różne pola w formularzach
• ISINDEX - element definiuje pole tekstowe w formularzach
• LABEL - element definiuje pole formularza uaktywniane po kliknięciu na etykietę
• LEGEND - element definiuje tytuł dla grupy elementów FIELDSET
• OPTGROUP - element definiuje etykiety dla zgrupowanych pól wyboru
• OPTION - element definiuje nowe pozycje listy w polach wyboru SELECT
• SELECT - element definiuje rozwijane pole wyboru w formularzach
• TEXTAREA - element definiuje duże pola tekstowe w formularzach
• accesskey - atrybut definiuje klawisz skrótu
• action - atrybut definiuje adres strony przetwarzającej dane z formularza
• checked - atrybut definiuje element formularza jako wybrany
• disabled - atrybut definiuje brak możliwości korzystania z elementu
• enctype - atrybut definiuje sposób kodowania danych
• label - atrybut definiuje etykietę grupy
• method - atrybut definiuje sposób przekazywania parametrów
• multiple - atrybut definiuje wybór wielu elementów
• name - atrybut definiuje nazwę elementu
• prompt - atrybut definiuje tekst opisujący pole formularza
• selected - atrybut definiuje element rozwijanego pola wyboru jako wybrany
• size - atrybut definiuje wielkość elementu
• tabindex - atrybut definiuje kolejność tabulacji
• type - atrybut definiuje typ elementu
• value - atrybut definiuje wartość atrybutu


Indeks: h

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• H1 - element definiuje nagłówek i jego wielkość (największy)
• H2 - element definiuje nagłówek i jego wielkość
• H3 - element definiuje nagłówek i jego wielkość
• H4 - element definiuje nagłówek i jego wielkość
• H5 - element definiuje nagłówek i jego wielkość
• H6 - element definiuje nagłówek i jego wielkość (najmniejszy)
• HEAD - element definiuje nagłówek i elementy opisujące dokument HTML
• HR - element definiuje linię poziomą
• HTML - element definiuje początek dokumentu HTML
• headers - atrybut definiuje listę nazw nagłówków komórek
• height - atrybut definiuje wysokość elementu
• href - atrybut definiuje adres strony lub miejsca
• hreflang - atrybut definiuje język docelowej strony WWW
• hspace - atrybut definiuje odstępy poziome dookoła elementu
• http-equiv - atrybut definiuje wartość dla nagłówka strony
• height - styl definiuje wysokość elementu
• hover - styl definiuje właściwości "najechanych" odnośników


Indeks: i

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• I - element definiuje tekst pochyły
• IFRAME - element definiuje ramkę umieszczoną w dowolnej części dokumentu
• IMG - element definiuje grafikę
• INPUT - element definiuje różne pola w formularzach
• INS - element definiuje wstawkę redakcyjną
• ISINDEX - element definiuje pole tekstowe w formularzach
• id - atrybut definiuje unikalny identyfikator
• ismap - atrybut definiuje współrzędne dodawane do adresu odnośnika


Indeks: k

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• KBD - element definiuje tekst wprowadzany z klawiatury


Indeks: kolory

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• BASEFONT - element definiuje domyślne właściwości czcionki
• BODY - element definiuje "ciało" strony WWW czyli jej zawartość
• FONT - element definiuje właściwości czcionki
• TABLE - element definiuje tabelę
• TD - element definiuje komórki tabeli
• TH - element definiuje tytuł kolumny
• TR - element definiuje wiersz tabeli
• alink - atrybut definiuje kolor naciskanych odnośników
• bgcolor - atrybut definiuje kolor tła
• color - atrybut definiuje kolor czcionki
• link - atrybut definiuje kolor odnośników
• text - atrybut definiuje kolor tekstu
• vlink - atrybut definiuje kolor odwiedzonych odnośników
• active - styl definiuje właściwości naciskanych odnośników
• background-color - styl definiuje kolor tła
• border-bottom-color - styl definiuje kolor dolnej ramki
• border-color - styl definiuje kolor ramki
• border-left-color - styl definiuje kolor lewej ramki
• border-right-color - styl definiuje kolor prawej ramki
• border-top-color - styl definiuje kolor górnej ramki
• color - styl definiuje kolor tekstu
• link - styl definiuje właściwości nieodwiedzonych odnośników
• outline - styl definiuje właściwości obramowania
• visited - styl definiuje właściwości odwiedzonych odnośników


Indeks: l

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• LABEL - element definiuje pole formularza uaktywniane po kliknięciu na etykietę
• LEGEND - element definiuje tytuł dla grupy elementów FIELDSET
• LI - element definiuje nowy element listy
• LINK - element definiuje relacje pomiędzy odnośnikami
• label - atrybut definiuje etykietę grupy
• lang - atrybut definiuje język dla całej lub fragmentu strony
• language - atrybut definiuje język skryptu
• link - atrybut definiuje kolor odnośników
• longdesc - atrybut definiuje adres dokumentu opisującego element
• lang - styl definiuje język narodowy
• left - styl definiuje odległość od lewej krawędzi
• letter-spacing - styl definiuje odstępy pomiędzy literami
• line-height - styl definiuje odstęp pomiędzy liniami
• link - styl definiuje właściwości nieodwiedzonych odnośników
• list-style-image - styl definiuje graficzny znak wypunktowania listy
• list-style-position - styl definiuje pozycję znaku wypunktowania listy
• list-style-type - styl definiuje typ listy
• list-style - styl definiuje właściwości listy


Indeks: linki

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• A - element definiuje odnośnik
• AREA - element definiuje obszar mapy graficznej
• BASE - element definiuje adres bazowy dla strony WWW
• LINK - element definiuje relacje pomiędzy odnośnikami
• MAP - element definiuje mapę graficzną
• alink - atrybut definiuje kolor naciskanych odnośników
• href - atrybut definiuje adres strony lub miejsca
• hreflang - atrybut definiuje język docelowej strony WWW
• ismap - atrybut definiuje współrzędne dodawane do adresu odnośnika
• link - atrybut definiuje kolor odnośników
• nohref - atrybut definiuje obszar, z którym nie jest związany żaden odnośnik
• target - atrybut definiuje okno docelowe dla otwieranego dokumentu
• usemap - atrybut definiuje adres mapy dla elementu
• vlink - atrybut definiuje kolor odwiedzonych odnośników
• active - styl definiuje właściwości naciskanych odnośników
• hover - styl definiuje właściwości "najechanych" odnośników
• link - styl definiuje właściwości nieodwiedzonych odnośników
• visited - styl definiuje właściwości odwiedzonych odnośników


Indeks: listy

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• DD - element definiuje wyjaśnienie hasła dla listy definicji
• DIR - element definiuje listę zawierającą elementy w wielu kolumnach
• DL - element definiuje listę definicji
• DT - element definiuje hasło dla listy definicji
• LI - element definiuje nowy element listy
• MENU - element definiuje listę zawierającą elementy w jednej kolumnie
• OL - element definiuje listę numerowaną
• UL - element definiuje listę zwykłą
• compact - atrybut definiuje listę bardziej zwartą
• start - atrybut definiuje numer początkowy listy
• type - atrybut definiuje typ elementu
• list-style-image - styl definiuje graficzny znak wypunktowania listy
• list-style-position - styl definiuje pozycję znaku wypunktowania listy
• list-style-type - styl definiuje typ listy
• list-style - styl definiuje właściwości listy


Indeks: m

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• MAP - element definiuje mapę graficzną
• MENU - element definiuje listę zawierającą elementy w jednej kolumnie
• META - element definiuje właściwości dokumentu HTML
• marginheight - atrybut definiuje szerokość marginesu pionowego ramki
• marginwidth - atrybut definiuje szerokość marginesu poziomego ramki
• maxlength - atrybut definiuje maksymalną długość tekstu w polu
• media - atrybut definiuje typ nośnika
• method - atrybut definiuje sposób przekazywania parametrów
• multiple - atrybut definiuje wybór wielu elementów
• margin-bottom - styl definiuje wielkość dolnego marginesu
• margin-left - styl definiuje wielkość lewego marginesu
• margin-right - styl definiuje wielkość prawego marginesu
• margin-top - styl definiuje wielkość górnego marginesu
• margin - styl definiuje wielkość marginesu
• marker-offset - styl definiuje odległość między markerem i elementem
• marks - styl definiuje znaczniki obszaru strony przy wydruku
• max-height - styl definiuje maksymalną wysokość elementu
• max-width - styl definiuje maksymalną szerokość elementu
• min-height - styl definiuje minimalną wysokość elementu
• min-width - styl definiuje minimalną szerokość elementu


Indeks: multimedia

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• APPLET - element definiuje applet (program) napisany w języku Java
• IMG - element definiuje grafikę
• NOSCRIPT - element definiuje tekst dla przeglądarek bez obsługi skryptów
• OBJECT - element definiuje obiekt multimedialny
• PARAM - element definiuje parametry obiektu
• SCRIPT - element definiuje skrypt
• alt - atrybut definiuje tekst alternatywny gdy element nie może być wyświetlony
• archive - atrybut definiuje nazwę pliku, który zawiera klasy appletu
• charset - atrybut definiuje język w jakim zakodowano dokument
• classid - atrybut definiuje informacje o klasie obiektu
• code - atrybut definiuje nazwę appletu w Javie dla elementu APPLET
• codebase - atrybut definiuje adres bazowy dla atrybutu code
• codetype - atrybut definiuje typ obiektu
• data - atrybut definiuje plik z danymi obiektu
• declare - atrybut definiuje deklarację obiektu
• defer - atrybut definiuje opóźnienie wykonywania skryptu
• ismap - atrybut definiuje współrzędne dodawane do adresu odnośnika
• language - atrybut definiuje język skryptu
• longdesc - atrybut definiuje adres dokumentu opisującego element
• name - atrybut definiuje nazwę elementu
• object - atrybut definiuje nazwę pliku z serializowaną wersją appletu
• src - atrybut definiuje adres zawartości elementu
• standby - atrybut definiuje tekst pokazywany w czasie ładowania obiektu
• type - atrybut definiuje typ elementu
• usemap - atrybut definiuje adres mapy dla elementu
• value - atrybut definiuje wartość atrybutu
• valuetype - atrybut definiuje typ wartości atrybutu


Indeks: n

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• NOFRAMES - element definiuje tekst dla przeglądarek bez obsługi ramek
• NOSCRIPT - element definiuje tekst dla przeglądarek bez obsługi skryptów
• name - atrybut definiuje nazwę elementu
• nohref - atrybut definiuje obszar, z którym nie jest związany żaden odnośnik
• noresize - atrybut definiuje stały rozmiar ramki
• noshade - atrybut definiuje brak cienia pod linią HR
• nowrap - atrybut definiuje blokowanie przełamywanie akapitów


Indeks: o

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• OBJECT - element definiuje obiekt multimedialny
• OL - element definiuje listę numerowaną
• OPTGROUP - element definiuje etykiety dla zgrupowanych pól wyboru
• OPTION - element definiuje nowe pozycje listy w polach wyboru SELECT
• object - atrybut definiuje nazwę pliku z serializowaną wersją appletu
• onblur - atrybut definiuje reakcję na opuszczeniu aktywnego elementu
• onclick - atrybut definiuje reakcję na kliknięcie myszy
• onfocus - atrybut definiuje reakcję na uaktywnienie elementu
• onkeydown - atrybut definiuje reakcję na wciśnięcie klawisza
• onkeypress - atrybut definiuje reakcję na wciśnięcie i puszczenie klawisza
• onkeyup - atrybut definiuje reakcję na puszczenie klawisza
• onload - atrybut definiuje reakcję na wczytanie strony WWW
• onmousedown - atrybut definiuje reakcję na dwukrotne kliknięcie myszy
• onmousedown - atrybut definiuje reakcję na wciśnięcie przycisku myszy
• onmousemove - atrybut definiuje reakcję na poruszenie myszą nad elementem
• onmouseout - atrybut definiuje reakcję na opuszczenie elementu
• onmouseover - atrybut definiuje reakcję na najechanie nad element
• onmouseup - atrybut definiuje reakcję na puszczenie przycisku myszy
• onunload - atrybut definiuje reakcję na usunięcie strony WWW
• orphans - styl definiuje minimalną ilość wierszy na końcu strony
• outline-color - styl definiuje kolor obramowania
• outline-style - styl definiuje styl i wygląd obramowania
• outline-width - styl definiuje szerokość obramowania
• outline - styl definiuje właściwości obramowania
• overflow - styl definiuje przycinanie elementów blokowych


Indeks: obramowania

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• border-bottom-color - styl definiuje kolor dolnej ramki
• border-bottom-style - styl definiuje wygląd dolnej ramki
• border-bottom-width - styl definiuje szerokość dolnej ramki
• border-bottom - styl definiuje właściwości dolnej ramki
• border-color - styl definiuje kolor ramki
• border-left-color - styl definiuje kolor lewej ramki
• border-left-style - styl definiuje wygląd lewej ramki
• border-left-width - styl definiuje szerokość lewej ramki
• border-left - styl definiuje właściwości lewej ramki
• border-right-color - styl definiuje kolor prawej ramki
• border-right-style - styl definiuje wygląd prawej ramki
• border-right-width - styl definiuje szerokość prawej ramki
• border-right - styl definiuje właściwości prawej ramki
• border-style - styl definiuje styl i wygląd ramki
• border-top-color - styl definiuje kolor górnej ramki
• border-top-style - styl definiuje wygląd górnej ramki
• border-top-width - styl definiuje szerokość górnej ramki
• border-top - styl definiuje właściwości górnej ramki
• border-width - styl definiuje szerokość ramki
• border - styl definiuje właściwości ramki
• margin-bottom - styl definiuje wielkość dolnego marginesu
• margin-left - styl definiuje wielkość lewego marginesu
• margin-right - styl definiuje wielkość prawego marginesu
• margin-top - styl definiuje wielkość górnego marginesu
• margin - styl definiuje wielkość marginesu
• outline-color - styl definiuje kolor obramowania
• outline-style - styl definiuje styl i wygląd obramowania
• outline-width - styl definiuje szerokość obramowania
• outline - styl definiuje właściwości obramowania
• padding-bottom - styl definiuje wielkość dolnego dopełnienia
• padding-left - styl definiuje wielkość lewego dopełnienia
• padding-right - styl definiuje wielkość prawego dopełnienia
• padding-top - styl definiuje wielkość górnego dopełnienia
• padding - styl definiuje wielkość dopełnienia


Indeks: p

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• P - element definiuje akapit
• PARAM - element definiuje parametry obiektu
• PRE - element definiuje tekst, w którym zachowane są białe znaki
• profile - atrybut definiuje adresy profili dokumentów HTML
• prompt - atrybut definiuje tekst opisujący pole formularza
• padding-bottom - styl definiuje wielkość dolnego dopełnienia
• padding-left - styl definiuje wielkość lewego dopełnienia
• padding-right - styl definiuje wielkość prawego dopełnienia
• padding-top - styl definiuje wielkość górnego dopełnienia
• padding - styl definiuje wielkość dopełnienia
• page-break-after - styl definiuje rozpoczęcie strony po tym elemencie
• page-break-before - styl definiuje rozpoczęcie strony przed tym elementem
• page-break-inside - styl definiuje rozpoczęcie strony w elemencie nadrzędnym
• page - styl definiuje typ strony
• pause-after - styl definiuje przerwę przed odtworzeniem dźwięku
• pause-before - styl definiuje przerwę po odtworzeniu dźwięku
• pause - styl definiuje przerwę w odtwarzaniu dźwięku
• pitch-range - styl definiuje modulację głosu
• pitch - styl definiuje wysokość głosu
• play-during - styl definiuje dźwięk w tle
• position - styl definiuje sposób określenia współrzędnych elementu


Indeks: pozycje

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• CENTER - element definiuje położenie centralne
• align - atrybut definiuje wyrównanie względem innych elementów
• charoff - atrybut definiuje pozycję znaku wyrównania
• clear - atrybut definiuje położenie nowej linii za grafiką
• dir - atrybut definiuje kierunek wyświetlania tekstu lub położenie elementu
• valign - atrybut definiuje wyrównanie w pionie
• after - styl definiuje za elementem dowolną zawartość
• before - styl definiuje przed elementem dowolną zawartość
• bottom - styl definiuje odległość od dolnej krawędzi
• clear - styl definiuje położenie nowego akapitu
• direction - styl definiuje kierunek wyświetlania tekstu
• float - styl definiuje kierunek oblewania elementu
• left - styl definiuje odległość od lewej krawędzi
• marker-offset - styl definiuje odległość między markerem i elementem
• position - styl definiuje sposób określenia współrzędnych elementu
• right - styl definiuje odległość od prawej krawędzi
• top - styl definiuje odległość od górnej krawędzi
• unicode-bidi - styl definiuje kierunek tekstu dla elementów zagłębionych
• vertical-align - styl definiuje wyrównanie w pionie
• word-spacing - styl definiuje odstępy pomiędzy wyrazami
• z-index - styl definiuje kolejność ułożenia elementów na stosie


Indeks: q

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• Q - element definiuje cytat zagnieżdżony
• quotes - styl definiuje znak cudzysłowu


Indeks: r

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• readonly - atrybut definiuje element tylko do odczytu
• rel - atrybut definiuje relacje między dokumentami
• rev - atrybut definiuje odwrote relacje między dokumentami
• rows - atrybut definiuje liczbę kolumn lub wysokość elementu
• rowspan - atrybut definiuje ilość połączonych wierszy
• rules - atrybut definiuje typ krawędzi tabeli
• richness - styl definiuje głębokość głosu
• right - styl definiuje odległość od prawej krawędzi


Indeks: rozmiary

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• border - atrybut definiuje szerokość ramki
• coords - atrybut definiuje współrzędne regionu w mapie odsyłaczy
• height - atrybut definiuje wysokość elementu
• hspace - atrybut definiuje odstępy poziome dookoła elementu
• marginheight - atrybut definiuje szerokość marginesu pionowego ramki
• marginwidth - atrybut definiuje szerokość marginesu poziomego ramki
• maxlength - atrybut definiuje maksymalną długość tekstu w polu
• noresize - atrybut definiuje stały rozmiar ramki
• size - atrybut definiuje wielkość elementu
• vspace - atrybut definiuje odstępy pionowe dookoła elementu
• width - atrybut definiuje szerokość elementu
• clip - styl definiuje widoczną część elementu dla stylu overflow
• height - styl definiuje wysokość elementu
• letter-spacing - styl definiuje odstępy pomiędzy literami
• line-height - styl definiuje odstęp pomiędzy liniami
• max-height - styl definiuje maksymalną wysokość elementu
• max-width - styl definiuje maksymalną szerokość elementu
• min-height - styl definiuje minimalną wysokość elementu
• min-width - styl definiuje minimalną szerokość elementu
• overflow - styl definiuje przycinanie elementów blokowych
• width - styl definiuje definiuje szerokość elementu


Indeks: s

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• S - element definiuje tekst przekreślony
• SAMP - element definiuje fragment kodu, próbkę
• SCRIPT - element definiuje skrypt
• SELECT - element definiuje rozwijane pole wyboru w formularzach
• SMALL - element definiuje tekst pomniejszony
• SPAN - element definiuje i grupuje elementy liniowe oraz ich atrybuty
• STRIKE - element definiuje tekst przekreślony
• STRONG - element definiuje tekst mocno wytłuszczony
• STYLE - element definiuje style przypisane do elementów strony WWW
• SUB - element definiuje indeks dolny
• SUP - element definiuje indeks górny
• scheme - atrybut definiuje schemat profilu
• scope - atrybut definiuje zasięg komórki nagłówka
• scrolling - atrybut definiuje paski przewijania w ramce
• selected - atrybut definiuje element rozwijanego pola wyboru jako wybrany
• shape - atrybut definiuje kształt aktywnego regionu mapy odsyłaczy
• size - atrybut definiuje wielkość elementu
• span - atrybut definiuje ilość kolumn w grupie
• src - atrybut definiuje adres zawartości elementu
• standby - atrybut definiuje tekst pokazywany w czasie ładowania obiektu
• start - atrybut definiuje numer początkowy listy
• style - atrybut definiuje styl CSS elementu
• summary - atrybut definiuje skrótowy opis tabeli
• size - styl definiuje wielkość i orientację strony dokumentu
• speak-header - styl definiuje czytanie nagłówków tabel
• speak-numeral - styl definiuje czytanie liczb
• speak-punctuation - styl definiuje czytanie znaków przestankowych
• speak - styl definiuje sposób czytania tekstu
• speech-rate - styl definiuje szybkość czytania tekstu
• stress - styl definiuje wysokość akcentów w intonacji głosu


Indeks: struktura

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• !DOCTYPE - element definiuje standard języka HTML użyty w dokumencie
• BODY - element definiuje "ciało" strony WWW czyli jej zawartość
• FRAME - element definiuje źródło i właściwości ramek
• FRAMESET - element definiuje zbiór ramek
• HEAD - element definiuje nagłówek i elementy opisujące dokument HTML
• HTML - element definiuje początek dokumentu HTML
• IFRAME - element definiuje ramkę umieszczoną w dowolnej części dokumentu
• META - element definiuje właściwości dokumentu HTML
• NOFRAMES - element definiuje tekst dla przeglądarek bez obsługi ramek
• STYLE - element definiuje style przypisane do elementów strony WWW
• TITLE - element definiuje tytuł strony
• content - atrybut definiuje wartość atrybutu "name"
• frameborder - atrybut definiuje obramowanie ramki
• http-equiv - atrybut definiuje wartość dla nagłówka strony
• lang - atrybut definiuje język dla całej lub fragmentu strony
• media - atrybut definiuje typ nośnika
• profile - atrybut definiuje adresy profili dokumentów HTML
• scheme - atrybut definiuje schemat profilu
• style - atrybut definiuje styl CSS elementu
• type - atrybut definiuje typ elementu
• version - atrybut definiuje standard języka HTML użyty w dokumencie
• !important - styl definiuje ważniejszą deklarację styli


Indeks: style

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• !important - styl definiuje ważniejszą deklarację styli
• active - styl definiuje właściwości naciskanych odnośników
• after - styl definiuje za elementem dowolną zawartość
• azimuth - styl definiuje kąt wydobywania się dźwięku w poziomie
• background-attachment - styl definiuje przewijanie graficznego tła
• background-color - styl definiuje kolor tła
• background-image - styl definiuje adres tła graficznego
• background-position - styl definiuje położenie tła graficznego
• background-repeat - styl definiuje powtórzenie tła graficznego
• background - styl definiuje właściwości tła
• before - styl definiuje przed elementem dowolną zawartość
• border-bottom-color - styl definiuje kolor dolnej ramki
• border-bottom-style - styl definiuje wygląd dolnej ramki
• border-bottom-width - styl definiuje szerokość dolnej ramki
• border-bottom - styl definiuje właściwości dolnej ramki
• border-color - styl definiuje kolor ramki
• border-left-color - styl definiuje kolor lewej ramki
• border-left-style - styl definiuje wygląd lewej ramki
• border-left-width - styl definiuje szerokość lewej ramki
• border-left - styl definiuje właściwości lewej ramki
• border-right-color - styl definiuje kolor prawej ramki
• border-right-style - styl definiuje wygląd prawej ramki
• border-right-width - styl definiuje szerokość prawej ramki
• border-right - styl definiuje właściwości prawej ramki
• border-style - styl definiuje styl i wygląd ramki
• border-top-color - styl definiuje kolor górnej ramki
• border-top-style - styl definiuje wygląd górnej ramki
• border-top-width - styl definiuje szerokość górnej ramki
• border-top - styl definiuje właściwości górnej ramki
• border-width - styl definiuje szerokość ramki
• border - styl definiuje właściwości ramki
• bottom - styl definiuje odległość od dolnej krawędzi
• caption-side - styl definiuje położenie tytułu tabeli
• clear - styl definiuje położenie nowego akapitu
• clip - styl definiuje widoczną część elementu dla stylu overflow
• color - styl definiuje kolor tekstu
• content - styl definiuje tworzenie zawartości dokumentu
• counter-increment - styl definiuje zmianę wartości licznika
• counter-reset - styl definiuje nową wartość licznika
• cue-after - styl definiuje odtwarzanie dźwięku po elemencie
• cue-before - styl definiuje odtwarzanie dźwięku przed elementem
• cue - styl definiuje odtwarzanie dźwięku przed lub po elemencie
• cursor - styl definiuje wygląd kursora
• direction - styl definiuje kierunek wyświetlania tekstu
• display - styl definiuje sposób wyświetlania elementu
• elevation - styl definiuje kąt wydobywania się dźwięku w pionie
• empty-cells - styl definiuje typ obramowania komórek tabeli, które są puste
• first-child - styl definiuje właściwości pierwszego elementu w hierarchii
• first-letter - styl definiuje właściwości pierwszej litery elementu
• first-line - styl definiuje właściwości pierwszej linii elementu
• float - styl definiuje kierunek oblewania elementu
• focus - styl definiuje właściwości elementu aktualnie używanego
• font-family - styl definiuje rodzaj oraz rodzinę czcionki
• font-size-adjust - styl definiuje współczynnik wielkości do wysokości znaku
• font-size - styl definiuje wielkość czcionki
• font-stretch - styl definiuje rozstrzelenie liter
• font-style - styl definiuje styl czcionki
• font-variant - styl definiuje wariant czcionki
• font-weight - styl definiuje grubość (wagę) czcionki
• font - styl definiuje właściwości czcionki
• height - styl definiuje wysokość elementu
• hover - styl definiuje właściwości "najechanych" odnośników
• lang - styl definiuje język narodowy
• left - styl definiuje odległość od lewej krawędzi
• letter-spacing - styl definiuje odstępy pomiędzy literami
• line-height - styl definiuje odstęp pomiędzy liniami
• link - styl definiuje właściwości nieodwiedzonych odnośników
• list-style-image - styl definiuje graficzny znak wypunktowania listy
• list-style-position - styl definiuje pozycję znaku wypunktowania listy
• list-style-type - styl definiuje typ listy
• list-style - styl definiuje właściwości listy
• margin-bottom - styl definiuje wielkość dolnego marginesu
• margin-left - styl definiuje wielkość lewego marginesu
• margin-right - styl definiuje wielkość prawego marginesu
• margin-top - styl definiuje wielkość górnego marginesu
• margin - styl definiuje wielkość marginesu
• marker-offset - styl definiuje odległość między markerem i elementem
• marks - styl definiuje znaczniki obszaru strony przy wydruku
• max-height - styl definiuje maksymalną wysokość elementu
• max-width - styl definiuje maksymalną szerokość elementu
• min-height - styl definiuje minimalną wysokość elementu
• min-width - styl definiuje minimalną szerokość elementu
• orphans - styl definiuje minimalną ilość wierszy na końcu strony
• outline-color - styl definiuje kolor obramowania
• outline-style - styl definiuje styl i wygląd obramowania
• outline-width - styl definiuje szerokość obramowania
• outline - styl definiuje właściwości obramowania
• overflow - styl definiuje przycinanie elementów blokowych
• padding-bottom - styl definiuje wielkość dolnego dopełnienia
• padding-left - styl definiuje wielkość lewego dopełnienia
• padding-right - styl definiuje wielkość prawego dopełnienia
• padding-top - styl definiuje wielkość górnego dopełnienia
• padding - styl definiuje wielkość dopełnienia
• page-break-after - styl definiuje rozpoczęcie strony po tym elemencie
• page-break-before - styl definiuje rozpoczęcie strony przed tym elementem
• page-break-inside - styl definiuje rozpoczęcie strony w elemencie nadrzędnym
• page - styl definiuje typ strony
• pause-after - styl definiuje przerwę przed odtworzeniem dźwięku
• pause-before - styl definiuje przerwę po odtworzeniu dźwięku
• pause - styl definiuje przerwę w odtwarzaniu dźwięku
• pitch-range - styl definiuje modulację głosu
• pitch - styl definiuje wysokość głosu
• play-during - styl definiuje dźwięk w tle
• position - styl definiuje sposób określenia współrzędnych elementu
• quotes - styl definiuje znak cudzysłowu
• richness - styl definiuje głębokość głosu
• right - styl definiuje odległość od prawej krawędzi
• size - styl definiuje wielkość i orientację strony dokumentu
• speak-header - styl definiuje czytanie nagłówków tabel
• speak-numeral - styl definiuje czytanie liczb
• speak-punctuation - styl definiuje czytanie znaków przestankowych
• speak - styl definiuje sposób czytania tekstu
• speech-rate - styl definiuje szybkość czytania tekstu
• stress - styl definiuje wysokość akcentów w intonacji głosu
• table-layout - styl definiuje algorytm rozmieszczania komórek tabeli
• text-align - styl definiuje wyrównanie poziome tekstu
• text-decoration - styl definiuje wygląd tekstu
• text-indent - styl definiuje wcięcie pierwszej linii elementu
• text-shadow - styl definiuje cień dla tekstu
• text-transform - styl definiuje wielkość liter
• top - styl definiuje odległość od górnej krawędzi
• unicode-bidi - styl definiuje kierunek tekstu dla elementów zagłębionych
• vertical-align - styl definiuje wyrównanie w pionie
• visibility - styl definiuje widoczność elementu
• visited - styl definiuje właściwości odwiedzonych odnośników
• voice-family - styl definiuje rodzinę głosów lub głos konkretnej osoby
• volume - styl definiuje natężenie dźwięku
• white-space - styl definiuje sposób wyświetlania białych znaków
• widows - styl definiuje minimalną ilość wierszy na początku strony
• width - styl definiuje definiuje szerokość elementu
• word-spacing - styl definiuje odstępy pomiędzy wyrazami
• z-index - styl definiuje kolejność ułożenia elementów na stosie


Indeks: synteza

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• azimuth - styl definiuje kąt wydobywania się dźwięku w poziomie
• cue-after - styl definiuje odtwarzanie dźwięku po elemencie
• cue-before - styl definiuje odtwarzanie dźwięku przed elementem
• cue - styl definiuje odtwarzanie dźwięku przed lub po elemencie
• elevation - styl definiuje kąt wydobywania się dźwięku w pionie
• pause-after - styl definiuje przerwę przed odtworzeniem dźwięku
• pause-before - styl definiuje przerwę po odtworzeniu dźwięku
• pause - styl definiuje przerwę w odtwarzaniu dźwięku
• pitch-range - styl definiuje modulację głosu
• pitch - styl definiuje wysokość głosu
• play-during - styl definiuje dźwięk w tle
• richness - styl definiuje głębokość głosu
• speak-header - styl definiuje czytanie nagłówków tabel
• speak-numeral - styl definiuje czytanie liczb
• speak-punctuation - styl definiuje czytanie znaków przestankowych
• speak - styl definiuje sposób czytania tekstu
• speech-rate - styl definiuje szybkość czytania tekstu
• stress - styl definiuje wysokość akcentów w intonacji głosu
• voice-family - styl definiuje rodzinę głosów lub głos konkretnej osoby
• volume - styl definiuje natężenie dźwięku


Indeks: t

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• TABLE - element definiuje tabelę
• TBODY - element definiuje i grupuje zawartość tabeli do przewijania
• TD - element definiuje komórki tabeli
• TEXTAREA - element definiuje duże pola tekstowe w formularzach
• TFOOT - element definiuje stopkę tabeli
• TH - element definiuje tytuł kolumny
• THEAD - element definiuje nagłówek tabeli
• TITLE - element definiuje tytuł strony
• TR - element definiuje wiersz tabeli
• TT - element definiuje tekst o stałej szerokości liter
• tabindex - atrybut definiuje kolejność tabulacji
• target - atrybut definiuje okno docelowe dla otwieranego dokumentu
• text - atrybut definiuje kolor tekstu
• title - atrybut definiuje tytuł elementu
• type - atrybut definiuje typ elementu
• table-layout - styl definiuje algorytm rozmieszczania komórek tabeli
• text-align - styl definiuje wyrównanie poziome tekstu
• text-decoration - styl definiuje wygląd tekstu
• text-indent - styl definiuje wcięcie pierwszej linii elementu
• text-shadow - styl definiuje cień dla tekstu
• text-transform - styl definiuje wielkość liter
• top - styl definiuje odległość od górnej krawędzi


Indeks: tabele

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• CAPTION - element definiuje podpis tabeli
• COL - element definiuje właściwości pojedynczej kolumny
• COLGROUP - element definiuje właściwości grupy kolumn
• TABLE - element definiuje tabelę
• TBODY - element definiuje i grupuje zawartość tabeli do przewijania
• TD - element definiuje komórki tabeli
• TFOOT - element definiuje stopkę tabeli
• TH - element definiuje tytuł kolumny
• THEAD - element definiuje nagłówek tabeli
• TR - element definiuje wiersz tabeli
• abbr - atrybut definiuje skrótowy opis zawartości komórki w tabeli
• axis - atrybut definiuje nazwę pokrewnej grupy komórek
• cellpadding - atrybut definiuje odległość akapitu od krawędzi komórki
• cellspacing - atrybut definiuje szerokośc krawędzi komórek
• cols - atrybut definiuje liczbę kolumn lub szerokość elementu
• colspan - atrybut definiuje ilość połączonych kolumn
• frame - atrybut definiuje typ obramowania tabeli
• rows - atrybut definiuje liczbę kolumn lub wysokość elementu
• rowspan - atrybut definiuje ilość połączonych wierszy
• rules - atrybut definiuje typ krawędzi tabeli
• summary - atrybut definiuje skrótowy opis tabeli
• caption-side - styl definiuje położenie tytułu tabeli
• empty-cells - styl definiuje typ obramowania komórek tabeli, które są puste
• table-layout - styl definiuje algorytm rozmieszczania komórek tabeli


Indeks: tekst

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• ABBR - element definiuje skrót
• ACRONYM - element definiuje akronim
• B - element definiuje tekst pogrubiony
• BDO - element definiuje kierunek wyświetlania tekstu
• BIG - element definiuje tekst powiększony
• CITE - element definiuje cytat
• CODE - element definiuje fragment programu komputerowego
• DEL - element definiuje tekst usunięty
• DFN - element definiuje tekst jako definicję
• EM - element definiuje tekst charakterystyczny
• I - element definiuje tekst pochyły
• INS - element definiuje wstawkę redakcyjną
• KBD - element definiuje tekst wprowadzany z klawiatury
• Q - element definiuje cytat zagnieżdżony
• S - element definiuje tekst przekreślony
• SAMP - element definiuje fragment kodu, próbkę
• SMALL - element definiuje tekst pomniejszony
• SPAN - element definiuje i grupuje elementy liniowe oraz ich atrybuty
• STRIKE - element definiuje tekst przekreślony
• STRONG - element definiuje tekst mocno wytłuszczony
• SUB - element definiuje indeks dolny
• SUP - element definiuje indeks górny
• TT - element definiuje tekst o stałej szerokości liter
• U - element definiuje tekst podkreślony
• VAR - element definiuje nazwę zmiennej
• cite - atrybut definiuje adres źródła informacji
• first-letter - styl definiuje właściwości pierwszej litery elementu
• first-line - styl definiuje właściwości pierwszej linii elementu
• letter-spacing - styl definiuje odstępy pomiędzy literami
• quotes - styl definiuje znak cudzysłowu
• text-align - styl definiuje wyrównanie poziome tekstu
• text-decoration - styl definiuje wygląd tekstu
• text-indent - styl definiuje wcięcie pierwszej linii elementu
• text-shadow - styl definiuje cień dla tekstu
• text-transform - styl definiuje wielkość liter
• white-space - styl definiuje sposób wyświetlania białych znaków


Indeks: tla

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• BODY - element definiuje "ciało" strony WWW czyli jej zawartość
• TABLE - element definiuje tabelę
• TD - element definiuje komórki tabeli
• TH - element definiuje tytuł kolumny
• TR - element definiuje wiersz tabeli
• background - atrybut definiuje adres graficznego tła strony WWW
• bgcolor - atrybut definiuje kolor tła
• background-attachment - styl definiuje przewijanie graficznego tła
• background-color - styl definiuje kolor tła
• background-image - styl definiuje adres tła graficznego
• background-position - styl definiuje położenie tła graficznego
• background-repeat - styl definiuje powtórzenie tła graficznego
• background - styl definiuje właściwości tła


Indeks: u

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• U - element definiuje tekst podkreślony
• UL - element definiuje listę zwykłą
• usemap - atrybut definiuje adres mapy dla elementu
• unicode-bidi - styl definiuje kierunek tekstu dla elementów zagłębionych


Indeks: v

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• VAR - element definiuje nazwę zmiennej
• valign - atrybut definiuje wyrównanie w pionie
• value - atrybut definiuje wartość atrybutu
• valuetype - atrybut definiuje typ wartości atrybutu
• version - atrybut definiuje standard języka HTML użyty w dokumencie
• vlink - atrybut definiuje kolor odwiedzonych odnośników
• vspace - atrybut definiuje odstępy pionowe dookoła elementu
• vertical-align - styl definiuje wyrównanie w pionie
• visibility - styl definiuje widoczność elementu
• visited - styl definiuje właściwości odwiedzonych odnośników
• voice-family - styl definiuje rodzinę głosów lub głos konkretnej osoby
• volume - styl definiuje natężenie dźwięku


Indeks: w

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• width - atrybut definiuje szerokość elementu
• white-space - styl definiuje sposób wyświetlania białych znaków
• widows - styl definiuje minimalną ilość wierszy na początku strony
• width - styl definiuje definiuje szerokość elementu
• word-spacing - styl definiuje odstępy pomiędzy wyrazami


Indeks: z

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

• z-index - styl definiuje kolejność ułożenia elementów na stosie


Styl CSS: !important

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

!important

Styl, a w zasadzie dyrektywa, która definiuje ważniejszą deklarację stylu, unieważniającą pozostałe, jeżeli jest ich więcej w kaskadzie. Dyrektywa stosowana jest w kaskadach styli, gdzie trzeba wymusić styl ważniejszy, niż wynikałoby to z ich kolejności.

Wartości:

• brak
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, O3
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p {color: navy !important;}
--></style>


Styl CSS: active

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

active

Styl, a w zasadzie pseudoklasa, która definiuje właściwości naciskanych odnośników (linków). W CSS1 przypisywany wyłącznie do elementu A, jednak w CSS2 może być używany również z innymi elementami HTML.

Wartości:

• brak
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N6, O5
• odpowiednik HTML: alink
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
a:active {color:red;}
--></style>


Styl CSS: after

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

after

Styl, a w zasadzie pseudoelement, który dodaje za elementem HTML dowolną treść.

Wartości:

• brak
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / N6, O4
Przykładowe zastosowania:

• Przykład 1:

Przykład umożliwia dodanie gwiazdki na końcu każdego akapitu

<style type="text/css"><!--
p:after {content:"*";}
--></style>


Styl CSS: azimuth

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

azimuth

Styl definiuje kąt wydobywania się dźwięku w poziomie.

Wartości:

• center (wartość domyślna) - CSS2
domyślna pozycja pozioma (0deg)
• left-side - CSS2
270 lub -90 stopni
• far-left - CSS2
300 lub -60 stopni
• left - CSS2
320 lub -40 stopni
• center-left - CSS2
340 lub -20 stopni
• center-right - CSS2
20 lub -340 stopni
• right - CSS2
40 lub -320 stopni
• far-right - CSS2
60 lub -300 stopni
• right-side - CSS2
90 lub -270 stopni
• leftwards - CSS2
o 20 stopni w lewo
• rightwards - CSS2
o 20 stopni w prawo
• kąt - CSS2
wartość w stopniach, od "-360deg" do "360deg"
• inherit - CSS2
przejęcie wartości "rodzica", np. azimuth:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p {azimuth:55deg;}
--></style>


Styl CSS: background

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

background

Styl definiuje właściwości tła. Za pomocą tego jednego polecenia można ustalić wszystkie, następujące właściwości tła: background-color, background-image, background-repeat, background-attachment, background-position. Jedno polecenie zamiast kilku jest po prostu wygodne w stosowaniu. Kolejność podawanych wartości nie ma znaczenia. Można podać wszystkie wartości poniższych stylów lub tylko niektóre z nich.

Wartości:

• background-color - CSS1 / IE3, N4, O3.5
kolor tła, np. background:white;
• background-image - CSS1 / IE3, N4, O3.5
grafika tła, np. background:url(tlo.gif);
• background-repeat - CSS1 / IE3, N4, O3.5
powtórzenie tła, np. background:repeat;
• background-attachment - CSS1 / IE3, N6, O3.5
przewijanie tła, np. background:fixed;
• background-position - CSS1 / IE3, N6, O3.5
pozycja tła, np. background:center top;
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. background:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
• odpowiedniki HTML: bgcolor, background
Przykładowe zastosowania:

• Przykład 1:

<table border="0" style="background: url(../p/sm.gif) repeat blue;">
<tr><td width=300 height=50>
<p>
</td></tr></table>

• Przykład 2:

<style type="text/css"><!--
body {background: url(../p/tlo.gif) repeat white fixed;}
table {background: url(../p/tlotabel.gif) yellow top center;}
--></style>


Styl CSS: background-attachment

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

background-attachment

Styl definiuje sposób przewijania tła graficznego.

Wartości:

• scroll (wartość domyślna) - CSS1 / IE4, N6, O3.5
tło przewija się razem ze stroną, np. background-attachment:scroll;
• fixed - CSS1 / IE4, N6, O3.5
tło "stoi w miejscu" gdy zawartość strony jest przewijana, np. background-attachment:fixed;
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. background-attachment:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
body {background-image: url(tlo.gif); background-attachment:scroll;}
--></style>


Styl CSS: background-color

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

background-color

Styl definiuje kolor tła. Uwaga: w przeglądarce Netscape 4.x wartość transparent jest interpretowana błędnie i traktowana jako kolor czarny!

Wartości:

• kolor - CSS1 / IE4, N4, O3.5
angielska nazwa koloru np. background-color:green zapis szesnastkowy #RRGGBB, np. background-color:#33FF99; lub zapis RGB, np. background-color:rgb(255,128,0);
• transparent - CSS1 / IE4, N4, O3.5
definiuje przeźroczyste tło, np. background-color:transparent;
• inherit - CSS2 / N6, O4
przejęcie wartości "rodzica", np. background-color:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
• odpowiednik HTML: bgcolor
Przykładowe zastosowania:

• Przykład 1:

<table border="0" style="background-color: blue;">
<tr><td width=300 height=50>
<p>
</td></tr></table>

• Przykład 2:

<style type="text/css"><!--
body {background-color: white;}
table {background-color: yellow;}
p {background-color: #eeeeee;}
--></style>


Styl CSS: background-image

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

background-image

Styl definiuje adres pliku tła graficznego.

Wartości:

• none (wartość domyślna) - CSS1 / IE4, N4, O3.5
brak tła graficznego, np. background-image:none;
• URL, ścieżka - CSS1 / IE4, N4, O3.5
adres tła, np. background-image:url(http://reporter.pl/tlo.gif);
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. background-image:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
• odpowiednik HTML: background
Przykładowe zastosowania:

• Przykład 1:

<table border="0" style="background-image: url(../p/sm.gif);">
<tr><td width=300 height=50>
<p>
</td></tr></table>

• Przykład 2:

<style type="text/css"><!--
body {background-image: url(tlo.gif);}
table {background-image: url(http://www.reporter.pl/g/tabela.gif);}
--></style>


Styl CSS: background-position

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

background-position

Styl definiuje położenie tła graficznego. Domyślnie: 0%,0%. Można podawać dowolne z poniższych wartości, np. top left.

Wartości:

• pozycja x,y wyrażone w [px|mm|cm|in|pt|pc|em|ex] lub procentach - CSS1 / IE4, N6, O3.5
jedna lub dwie wartości - jeżeli nie będzie podana druga, przyjmie ona wartość 50%.
• [top|center|botom] - CSS1 / IE4, N6, O3.5
góra, centrum lub dół elementu w pionie
• [left|center|right] - CSS1 / IE4, N6, O3.5
lewo, centrum lub prawa strona elementu w poziomie
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. background-position:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table border="1" style="background-image: url(../p/sm.gif);
background-position:bottom right;background-repeat:no-repeat;">
<tr><td width=300 height=50>
<p>
</td></tr></table>

• Przykład 2:

<style type="text/css"><!--
body {background-image: url(tlo.gif); background-position: top center;}
--></style>


Styl CSS: background-repeat

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

background-repeat

Styl definiuje sposób powtarzania tła graficznego.

Wartości:

• repeat (wartość domyślna) - CSS1 / IE4, N4, O3.5
powtarza w pionie i poziomie
• repeat-x - CSS1 / IE4, N4, O3.5
powtarza w poziomie
• repeat-y - CSS1 / IE4, N4, O3.5
powtarza w pionie
• no-repeat - CSS1 / IE4, N4, O3.5
nie powtarza tła
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. background-repeat:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
Przykładowe zastosowania:

• przykład 1:

<table border="0" style="background-image: url(../p/sm.gif);
background-repeat:repeat-x;">
<tr><td width=300 height=50>
<p>
</td></tr></table>

• przykład 2:

<table border="0" style="background-image: url(../p/sm.gif);
background-repeat:repeat-y;">
<tr><td width=300 height=50>
<p>
</td></tr></table>

• przykład 3:

<table border="0" style="background-image: url(../p/sm.gif);
background-repeat:no-repeat;">
<tr><td width=300 height=50>
<p>
</td></tr></table>

• przykład 4:

<table border="0" style="background-image: url(../p/sm.gif);
background-repeat:repeat;">
<tr><td width=300 height=50>
<p>
</td></tr></table>

• przykład 5:

<style type="text/css"><!--
body {background-image: url(tlo.gif); background-repeat:repeat;}
table {background-image: url(tab.gif); background-repeat:repeat-y;}
--></style>


Styl CSS: before

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

before

Styl, a w zasadzie pseudoelement, który dodaje przed elementem dowolną treść.

Wartości:

• brak
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / N6, O4
Przykładowe zastosowania:

• Przykład 1:

Przykład umożliwia dodanie gwiazdki na początku każdego akapitu

<style type="text/css"><!--
p:before {content:"*";}
--></style>


Styl CSS: border

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border

Styl definiuje właściwości ramki. Za pomocą tego jednego polecenia można ustalić następujące właściwości ramki: border-width, border-style, border-color. Jedno polecenie zamiast kilku jest po prostu wygodne w stosowaniu. Kolejność podawanych wartości nie ma znaczenia. Trzeba tylko podać styl ramki aby ją zobaczyć (domyślny jest none czyli brak ramki).

Wartości:

• border-width - CSS1 / IE4, N4, O3.5
szerokość ramki, np. border:medium;
• border-style - CSS1 / IE4, N4, O3.5
styl ramki, np. border:solid;
• border-color - CSS1 / IE4, N4, O3.5
kolor ramki, np. border:green;
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
• odpowiednik HTML: border
Przykładowe zastosowania:

• Przykład 1:

<table style="border: 3px solid green;">
<tr><td width=300 height=50>
<p>
</td></tr></table>

• Przykład 2:

<style type="text/css"><!--
table {border: 3px solid green;}
--></style>


Styl CSS: border-bottom

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-bottom

Styl definiuje właściwości dolnej ramki. Za pomocą tego jednego polecenia można ustalić następujące właściwości dolnej ramki: border-bottom-width, border-style, border-color. Jedno polecenie zamiast kilku jest po prostu wygodne w stosowaniu. Kolejność podawanych wartości nie ma znaczenia. Trzeba tylko podać styl ramki aby ją zobaczyć (domyślny jest none czyli brak ramki).

Wartości:

• border-bottom-width - CSS1 / IE4, N6, O3.5
szerokość ramki, np. border-bottom:medium;
• border-style - CSS1 / IE4, N6, O3.5
styl ramki, np. border-bottom:solid;
• border-color - CSS1 / IE4, N6, O3.5
kolor ramki, np. border-bottom:green;
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-bottom:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N6, O3.5
• odpowiednik HTML: border
Przykładowe zastosowania:

• Przykład 1:

<table style="border-bottom: 3px solid green;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<style type="text/css"><!--
table {border-bottom: 3px solid green;}
--></style>


Styl CSS: border-bottom-color

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-bottom-color

Styl definiuje kolor dolnej ramki.

Wartości:

• kolor - CSS2 / IE4, N6, O3.5
angielska nazwa koloru np. border-bottom-color:green; zapis szesnastkowy #RRGGBB, np. border-bottom-color:#33FF99; lub zapis RGB, np. border-bottom-color:rgb(255,128,0);
• transparent - CSS2 / N6
przeźroczysta ramka
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-bottom-color:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE4, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table style="border-bottom-color:blue; border-style: dotted;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<style type="text/css"><!--
table {border-bottom-color:purple; border-style: solid;}
--></style>


Styl CSS: border-bottom-style

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-bottom-style

Styl definiuje wygląd dolnej ramki.

Wartości:

• none (wartość domyślna) - CSS2 / IE4, N6, O3.5
nie ma ramki
• hidden - CSS2 / O3.5
linia ukryta
• dotted - CSS2 / IE5.5, N6, O3.5
linia składająca się z kropek
• dashed - CSS2 / IE5.5, N6, O3.5
linia składająca się z kresek
• solid - CSS2 / IE4, N6, O3.5
linia tradycyjna
• groove - CSS2 / IE4, N6, O3.5
linia wklęsła przestrzenna
• ridge - CSS2 / IE4, N6, O3.5
linia wypukła przestrzenna
• inset - CSS2 / IE4, N6, O3.5
linia wklęsła
• outset - CSS2 / IE4, N6, O3.5
linia wypukła
• double - CSS2 / IE4, N6, O3.5
linia podwójna
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-bottom-style:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table style="border-bottom-style:dotted;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<table style="border-bottom-style:dashed;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 3:

<style type="text/css"><!--
table {border-bottom-style:solid;}
--></style>


Styl CSS: border-bottom-width

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-bottom-width

Styl definiuje szerokość dolnej ramki.

Wartości:

• thin - CSS1 / IE4, N4, O3.5
cienka linia
• medium (wartość domyślna) - CSS1 / IE4, N4, O3.5
normalna linia
• thick - CSS1 / IE4, N4, O3.5
gruba linia
• szerokość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE4, N4, O3.5
wartość dodatnia
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-bottom-width:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
• odpowiednik HTML: border
Przykładowe zastosowania:

• Przykład 1:

<table style="border-bottom-width:thick; border-style: solid;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<table style="border-bottom-width: 0.5cm; border-style: solid;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 3:

<style type="text/css"><!--
table {border-bottom-width: thick; border-style: solid;}
--></style>


Styl CSS: border-color

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-color

Styl definiuje kolor ramki.

Wartości:

• kolor - CSS1 / IE4, N4, O3.5
angielska nazwa koloru np. border-color:green; zapis szesnastkowy #RRGGBB, np. border-color:#33FF99; lub zapis RGB, np. border-color:rgb(255,128,0);
• transparent - CSS2 / N6
przeźroczysta ramka
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-color:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table style="border-color: maroon; border-style: dotted;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<style type="text/css"><!--
table {border-color: green; border-style: solid;}
--></style>


Styl CSS: border-left

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-left

Styl definiuje właściwości lewej ramki. Za pomocą tego jednego polecenia można ustalić następujące właściwości lewej ramki: border-left-width, border-style, border-color. Jedno polecenie zamiast kilku jest po prostu wygodne w stosowaniu. Kolejność podawanych wartości nie ma znaczenia. Trzeba tylko podać styl ramki aby ją zobaczyć (domyślny jest none czyli brak ramki).

Wartości:

• border-left-width - CSS1 / IE4, N6, O3.5
szerokość ramki, np. border-bottom:medium;
• border-style - CSS1 / IE4, N6, O3.5
styl ramki, np. border-bottom:solid;
• border-color - CSS1 / IE4, N6, O3.5
kolor ramki, np. border-bottom:green;
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-left:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N6, O3.5
• odpowiednik HTML: border
Przykładowe zastosowania:

• Przykład 1:

<table style="border-left: 3px solid green;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<style type="text/css"><!--
table {border-left: 3px solid green;}
--></style>


Styl CSS: border-left-color

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-left-color

Styl definiuje kolor lewej ramki.

Wartości:

• kolor - CSS2 / IE4, N6, O3.5
angielska nazwa koloru np. border-left-color:green; zapis szesnastkowy #RRGGBB, np. border-left-color:#33FF99; lub zapis RGB, np. border-left-color:rgb(255,128,0);
• transparent - CSS2 / N6
przeźroczysta ramka
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-left-color:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE4, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table style="border-left-color:blue; border-style: dotted;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<style type="text/css"><!--
table {border-left-color:purple; border-style: solid;}
--></style>


Styl CSS: border-left-style

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-left-style

Styl definiuje wygląd lewej ramki.

Wartości:

• none (wartość domyślna) - CSS2 / IE4, N6, O3.5
nie ma ramki
• hidden - CSS2 / O3.5
linia ukryta
• dotted - CSS2 / IE5.5, N6, O3.5
linia składająca się z kropek
• dashed - CSS2 / IE5.5, N6, O3.5
linia składająca się z kresek
• solid - CSS2 / IE4, N6, O3.5
linia tradycyjna
• groove - CSS2 / IE4, N6, O3.5
linia wklęsła przestrzenna
• ridge - CSS2 / IE4, N6, O3.5
linia wypukła przestrzenna
• inset - CSS2 / IE4, N6, O3.5
linia wklęsła
• outset - CSS2 / IE4, N6, O3.5
linia wypukła
• double - CSS2 / IE4, N6, O3.5
linia podwójna
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-left-style:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table style="border-left-style:dotted;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<table style="border-left-style:dashed;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 3:

<style type="text/css"><!--
table {border-left-style:solid;}
--></style>


Styl CSS: border-left-width

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-left-width

Styl definiuje szerokość lewej ramki.

Wartości:

• thin - CSS1 / IE4, N4, O3.5
cienka linia
• medium (wartość domyślna) - CSS1 / IE4, N4, O3.5
normalna linia
• thick - CSS1 / IE4, N4, O3.5
gruba linia
• szerokość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE4, N4, O3.5
wartość dodatnia
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-left-width:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
• odpowiednik HTML: border
Przykładowe zastosowania:

• Przykład 1:

<table style="border-left-width:thick; border-style: solid;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<table style="border-left-width: 0.5cm; border-style: solid;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 3:

<style type="text/css"><!--
table {border-left-width: thick; border-style: solid;}
--></style>


Styl CSS: border-right

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-right

Styl definiuje właściwości prawej ramki. Za pomocą tego jednego polecenia można ustalić następujące właściwości prawej ramki: border-right-width, border-style, border-color. Jedno polecenie zamiast kilku jest po prostu wygodne w stosowaniu. Kolejność podawanych wartości nie ma znaczenia. Trzeba tylko podać styl ramki aby ją zobaczyć (domyślny jest none czyli brak ramki).

Wartości:

• border-right-width - CSS1 / IE4, N6, O3.5
szerokość ramki, np. border-bottom:medium;
• border-style - CSS1 / IE4, N6, O3.5
styl ramki, np. border-bottom:solid;
• border-color - CSS1 / IE4, N6, O3.5
kolor ramki, np. border-bottom:green;
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-right:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N6, O3.5
• odpowiednik HTML: border
Przykładowe zastosowania:

• Przykład 1:

<table style="border-right: 3px solid green;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<style type="text/css"><!--
table {border-right: 3px solid green;}
--></style>


Styl CSS: border-right-color

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-right-color

Styl definiuje kolor prawej ramki.

Wartości:

• kolor - CSS2 / IE4, N6, O3.5
angielska nazwa koloru np. border-right-color:green; zapis szesnastkowy #RRGGBB, np. border-right-color:#33FF99; lub zapis RGB, np. border-right-color:rgb(255,128,0);
• transparent - CSS2 / N6
przeźroczysta ramka
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-right-color:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE4, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table style="border-right-color:blue; border-style: dotted;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<style type="text/css"><!--
table {border-right-color:purple; border-style: solid;}
--></style>


Styl CSS: border-right-style

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-right-style

Styl definiuje wygląd prawej ramki.

Wartości:

• none (wartość domyślna) - CSS2 / IE4, N6, O3.5
nie ma ramki
• hidden - CSS2 / O3.5
linia ukryta
• dotted - CSS2 / IE5.5, N6, O3.5
linia składająca się z kropek
• dashed - CSS2 / IE5.5, N6, O3.5
linia składająca się z kresek
• solid - CSS2 / IE4, N6, O3.5
linia tradycyjna
• groove - CSS2 / IE4, N6, O3.5
linia wklęsła przestrzenna
• ridge - CSS2 / IE4, N6, O3.5
linia wypukła przestrzenna
• inset - CSS2 / IE4, N6, O3.5
linia wklęsła
• outset - CSS2 / IE4, N6, O3.5
linia wypukła
• double - CSS2 / IE4, N6, O3.5
linia podwójna
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-right-style:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table style="border-right-style:dotted;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<table style="border-right-style:dashed;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 3:

<style type="text/css"><!--
table {border-right-style:solid;}
--></style>


Styl CSS: border-right-width

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-right-width

Styl definiuje szerokość prawej ramki.

Wartości:

• thin - CSS1 / IE4, N4, O3.5
cienka linia
• medium (wartość domyślna) - CSS1 / IE4, N4, O3.5
normalna linia
• thick - CSS1 / IE4, N4, O3.5
gruba linia
• szerokość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE4, N4, O3.5
wartość dodatnia
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-right-width:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
• odpowiednik HTML: border
Przykładowe zastosowania:

• Przykład 1:

<table style="border-right-width:thick; border-style: solid;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<table style="border-right-width: 0.5cm; border-style: solid;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 3:

<style type="text/css"><!--
table {border-right-width: thick; border-style: solid;}
--></style>


Styl CSS: border-style

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-style

Styl definiuje styl i wygląd ramki.

Wartości:

• none (wartość domyślna) - CSS1 / IE4, N4, O3.5
nie ma ramki
• hidden - CSS2 / O3.5
ramka jest ukryta
• solid - CSS1 / IE4, N4, O3.5
linia tradycyjna
• dotted - CSS1 / IE5.5, N6, O3.5
linia składająca się z kropek
• dashed - CSS1 / IE5.5, N6, O3.5
linia składająca się z kresek
• double - CSS1 / IE4, N4, O3.5
linia podwójna
• groove - CSS1 / IE4, N4, O3.5
linia wklęsła przestrzenna
• ridge - CSS1 / IE4, N4, O3.5
linia wypukła przestrzenna
• inset - CSS1 / IE4, N4, O3.5
linia wklęsła
• outset - CSS1 / IE4, N4, O3.5
linia wypukła
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-style:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table style="border-style: solid;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p> </td></tr></table>

• Przykład 2:

<table style="border-style: dotted;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p> </td></tr></table>

• Przykład 3:

<table style="border-style: dashed;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p> </td></tr></table>

• Przykład 4:

<table style="border-style: double;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p> </td></tr></table>

• Przykład 5:

<table border=10 style="border-style: groove;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p> </td></tr></table>

• Przykład 6:

<table border=10 style="border-style: ridge;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p> </td></tr></table>

• Przykład 7:

<table border=10 style="border-style: inset;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p> </td></tr></table>

• Przykład 8:

<table border=10 style="border-style: outset;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p> </td></tr></table>

• Przykład 9:

<style type="text/css"><!--
table {style="border-style: dotted;}
--></style>


Styl CSS: border-top

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-top

Styl definiuje właściwości górnej ramki. Za pomocą tego jednego polecenia można ustalić następujące właściwości górnej ramki: border-top-width, border-style, border-color. Jedno polecenie zamiast kilku jest po prostu wygodne w stosowaniu. Kolejność podawanych wartości nie ma znaczenia. Trzeba tylko podać styl ramki aby ją zobaczyć (domyślny jest none czyli brak ramki).

Wartości:

• border-top-width - CSS1 / IE4, N6, O3.5
szerokość ramki, np. border-bottom:medium;
• border-style - CSS1 / IE4, N6, O3.5
styl ramki, np. border-bottom:solid;
• border-color - CSS1 / IE4, N6, O3.5
kolor ramki, np. border-bottom:green;
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-top:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N6, O3.5
• odpowiednik HTML: border
Przykładowe zastosowania:

• Przykład 1:

<table style="border-top: 3px solid green;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<style type="text/css"><!--
table {border-top: 3px solid green;}
--></style>


Styl CSS: border-top-color

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-top-color

Styl definiuje kolor górnej ramki.

Wartości:

• kolor - CSS2 / IE4, N6, O3.5
angielska nazwa koloru np. border-top-color:green; zapis szesnastkowy #RRGGBB, np. border-top-color:#33FF99; lub zapis RGB, np. border-top-color:rgb(255,128,0);
• transparent - CSS2 / N6
przeźroczysta ramka
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-top-color:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE4, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table style="border-top-color:blue; border-style: dotted;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<style type="text/css"><!--
table {border-top-color:purple; border-style: solid;}
--></style>


Styl CSS: border-top-style

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-top-style

Styl definiuje wygląd górnej ramki.

Wartości:

• none (wartość domyślna) - CSS2 / IE4, N6, O3.5
nie ma ramki
• hidden - CSS2 / O3.5
linia ukryta
• dotted - CSS2 / IE5.5, N6, O3.5
linia składająca się z kropek
• dashed - CSS2 / IE5.5, N6, O3.5
linia składająca się z kresek
• solid - CSS2 / IE4, N6, O3.5
linia tradycyjna
• groove - CSS2 / IE4, N6, O3.5
linia wklęsła przestrzenna
• ridge - CSS2 / IE4, N6, O3.5
linia wypukła przestrzenna
• inset - CSS2 / IE4, N6, O3.5
linia wklęsła
• outset - CSS2 / IE4, N6, O3.5
linia wypukła
• double - CSS2 / IE4, N6, O3.5
linia podwójna
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-top-style:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table style="border-top-style:dotted;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<table style="border-top-style:dashed;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 3:

<style type="text/css"><!--
table {border-top-style:solid;}
--></style>


Styl CSS: border-top-width

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-top-width

Styl definiuje szerokość górnej ramki.

Wartości:

• thin - CSS1 / IE4, N6, O3.5
cienka linia
• medium (wartość domyślna) - CSS1 / IE4, N6, O3.5
normalna linia
• thick - CSS1 / IE4, N6, O3.5
gruba linia
• szerokość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE4, N6, O3.5
wartość dodatnia
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-top-width:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3
• odpowiednik HTML: border
Przykładowe zastosowania:

• Przykład 1:

<table style="border-top-width:thick; border-style: solid;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<table style="border-top-width: 0.5cm; border-style: solid;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 3:

<style type="text/css"><!--
table {border-top-width: thick; border-style: solid;}
--></style>


Styl CSS: border-width

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

border-width

Styl definiuje szerokość ramki.

Wartości:

• thin - CSS1 / IE4, N4, O3.5
cienka linia
• medium (wartość domyślna) - CSS1 / IE4, N4, O3.5
normalna linia
• thick - CSS1 / IE4, N4, O3.5
gruba linia
• szerokość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE4, N4, O3.5
wartość dodatnia
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. border-width:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
• odpowiednik HTML: border
Przykładowe zastosowania:

• Przykład 1:

<table style="border-width:thick; border-style: solid;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 2:

<table style="border-width: 0.5cm; border-style: solid;">
<tr><td width=300 height=50 bgcolor="#eeeeee">
<p>
</td></tr></table>

• Przykład 3:

<style type="text/css"><!--
table {border-width: thick; border-style: solid;}
--></style>


Styl CSS: bottom

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

bottom

Styl definiuje odległość od dolnej krawędzi elementu zewnętrznego.

Wartości:

• auto (wartość domyślna) - CSS2 / IE5, N6, O4
standardowa odległość
• długość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS2 / IE5, N6, O4
wartość dodatnia lub ujemna
• procenty - CSS2 / IE5, N6, O4
wartość wyrażona w procentach
• inherit - CSS2 / N6, O5
przejęcie wartości "rodzica", np. bottom:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE5, N6, O4
Przykładowe zastosowania:

• Przykład 1:

<p style="position:relative;bottom:-10px;">akapit odsunięty
o -10 pikseli od dołu</p>

Akapit odsunięty o -10 pikseli od dołu

• Przykład 2:

<style type="text/css"><!--
p.prawy {position:relative;bottom:-50px;}
--></style>


Styl CSS: caption-side

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

caption-side

Styl definiuje położenie tytułu w tabeli.

Wartości:

• top (wartość domyślna) - CSS2 / N6, O4
na górze tabeli
• bottom - CSS2 / N6, O4
na dole tabeli
• bottom - CSS2 / O4
po lewej stronie tabeli
• right - CSS2 / O4
po prawej stronie tabeli
• inherit - CSS2 / N6, O4
przejęcie wartości "rodzica", np. caption-side:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / N6, O4
• odpowiednik HTML: align
Przykładowe zastosowania:

• Przykład 1:

<table border="1">
<caption style="caption-side:bottom;">podpis</caption>
<tr><td>przykładowa tabela z podpisem</td></tr></table>

podpis
przykładowa tabela z podpisem

• Przykład 2:

<style type="text/css"><!--
caption {caption-side:bottom;}
--></style>


Styl CSS: clear

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

clear

Styl definiuje położenie nowego akapitu. W działaniu podobny jest do atrybutu clear stosowanego w elemencie BR.

Wartości:

• none (wartość domyślna) - CSS1 / IE4, N4, O3.5
bez zmian
• left - CSS1 / IE4, N4, O3.5
następna linia będzie pod obiektem ułożonym z lewej strony
• right - CSS1 / IE4, N4, O3.5
następna linia będzie pod obiektem ułożonym z prawej strony
• both - CSS1 / IE4, N4, O3.5
następna linia znajdzie się pod obiektem niezależnie od jego położenia
• inherit - CSS2 / N6, O4
przejęcie wartości "rodzica", np. clear:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
• odpowiednik HTML: clear
Przykładowe zastosowania:

• Przykład 1:

<img src="../p/logo.gif" width="120" height="60" align="left">
tekst będzie się układał po prawej stronie i użycie BR
<br clear="none"> nie spowoduje dalszego pisania pod grafiką.

tekst będzie się układał po prawej stronie i użycie BR
nie spowoduje dalszego pisania pod grafiką.

• Przykład 2:

<img src="../p/logo.gif" width="120" height="60" align="left">
a teraz tekst z prawej strony zostanie złamany tak, że znajdzie
się pod grafiką. <br style="clear:left;"> BR z clear = left złamał
tekst pod obiekt znajdujący się po lewej stronie .

a teraz tekst z prawej strony zostanie złamany tak, że znajdzie się pod grafiką.
BR z clear = left złamał tekst pod obiekt znajdujący się po lewej stronie .

• Przykład 3:

<style type="text/css"><!--
br {clear:both;}
--></style>


Styl CSS: clip

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

clip

Styl definiuje widoczną część elementu dla stylu overflow.

Wartości:

• auto (wartość domyślna) - CSS2 / IE4, N4
cały element objęty jest działaniem stylu clip
• góra prawo dół lewo - CSS2 / IE4, N4
odstęp od każdego z boków elementu dla sekcji clip, np. clip:rect(5px 20px 20px 5px);
• inherit - CSS2 / N6, O4
przejęcie wartości "rodzica", np. clip:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE4, N4
Przykładowe zastosowania:

• Przykład 1:

<p style="width:50px;height:50px;overflow:scroll;
position:absolute; clip:rect(5px 45px 45px 5px);">
ten tekst będzie można swobodnie przewijać</p>

ten tekst będzie można swobodnie przewijać

• Przykład 2:

<style type="text/css"><!--
p.cl {width:50px;height:50px;overflow:scroll;
position:absolute; clip:rect(5px 45px 45px 5px);}
--></style>


Styl CSS: color

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

color

Styl definiuje kolor tekstu.

Wartości:

• kolor - CSS1 / IE3, N4, O3.5
angielska nazwa koloru np. color:green; zapis szesnastkowy #RRGGBB, np. color:#33FF99; lub zapis RGB, np. color:rgb(255,128,0);
• inherit - CSS2 / N6, O4
przejęcie wartości "rodzica", np. color:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
• odpowiedniki HTML: color, text
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, w którym <span style="color:green;">część
wyrazów napisana jest w kolorze zielonym</span>.

Przykładowy tekst, w którym część wyrazów napisana jest w kolorze zielonym.

• Przykład 2:

<style type="text/css"><!--
a:hover {color:#3333cc;}
p, td {color:rgb(255,80,60);}
.mar {color:maroon;}
--></style>


Styl CSS: content

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

content

Styl definiuje tworzenie zawartości dokumentu. Często stosowany ze stylami before i after.

Wartości:

• łańcuch znaków - CSS2 / N6, O4
litery, wyraz, wyrażenie, np. content:"tekst";
• URL - CSS2 / N6
adres lub ścieżka wstawianego dokumentu lub obiektu (np. dźwięku)
• [counter()|counters()] - CSS2 / N6
wstawianie licznika lub liczników
• [open-quote|close-quote] - CSS2 / N6, O4
wstawienie znaku cudzysłowów początkowych lub końcowych
• [no-open-quote|no-close-quote] - CSS2 / N6
nie wstawienie znaku cudzysłowów początkowych lub końcowych
• attr(X) - CSS2 / N6, O4
zwraca łańcuch będący wartością atrybutu X
• inherit - CSS2 / O4
przejęcie wartości "rodzica", np. content:content;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / N6, O4
Przykładowe zastosowania:

• Przykład 1:

Przykład umożliwia dodanie gwiazdki na początku każdego akapitu

<style type="text/css"><!--
p:before {content:"*";}
--></style>

• Przykład 2:

Przykład zmienia cudzysłowy na "polskie"

<style type="text/css"><!--
blockquote {quotes:"\201e" "\201d";}
blockquote:before {content:open-quote;}
blockquote:after {content:close-quote;}
--></style>


Styl CSS: counter-increment

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

counter-increment

Styl definiuje zmianę wartości licznika.

Wartości:

• none (wartość domyślna) - CSS2 / O4
nie zmienia wartości licznika
• identyfikator liczba - CSS2 /O4
nazwa licznika i wartość jego zmiany (liczba dodatnia lub ujemna)
• inherit - CSS2
przejęcie wartości "rodzica", np. counter-increment:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / O4
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p:before {
counter-increment: licznik1 3;
content: "nr " counter(licznik1) ":";}
--></style>


Styl CSS: counter-reset

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

counter-reset

Styl definiuje nową wartość licznika.

Wartości:

• none (wartość domyślna) - CSS2 / O4
nie zmienia wartości licznika
• identyfikator liczba - CSS2 /O4
nazwa licznika i wartość tego licznika (liczba dodatnia lub ujemna)
• inherit - CSS2
przejęcie wartości "rodzica", np. counter-reset:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / O4
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p:before {
counter-increment: licznik1 3;
counter-reset: licznik2 0;
content: "nr " counter(licznik1) ":";}
--></style>


Styl CSS: cue

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

cue

Styl definiuje odtwarzanie dźwięku przed lub po elemencie. Za pomocą tego jednego polecenia można ustalić wszystkie, następujące style: cue-after, cue-before. Jedno polecenie zamiast kilku jest po prostu wygodne w stosowaniu. Kolejność podawanych wartości ma znaczenie. Można podać dwa dźwięki lub tylko jeden (wtedy oba przyjmą tą samą wartość).

Wartości:

• none (wartość domyślna) - CSS2
ani przed ani po elemencie nie będzie odtwarzany dźwięk
• URLprzed URLpo - CSS2
ścieżki do pliku dźwiękowego przed i po elemencie
• inherit - CSS2
przejęcie wartości "rodzica", np. cue:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p {cue: url(powitanie.wav) url(wprowadzenie.wav);}
--></style>


Styl CSS: cue-after

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

cue-after

Styl definiuje odtwarzanie dźwięku po elemencie.

Wartości:

• none (wartość domyślna) - CSS2
po elemencie nie będzie odtwarzany dźwięk
• URL - CSS2
ścieżka do pliku dźwiękowego
• inherit - CSS2
przejęcie wartości "rodzica", np. cue-after:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p {cue-after: url(pozegnanie.wav);}
--></style>


Styl CSS: cue-before

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

cue-before

Styl definiuje odtwarzanie dźwięku przed elementem.

Wartości:

• none (wartość domyślna) - CSS2
przed elementem nie będzie odtwarzany dźwięk
• URL - CSS2
ścieżka do pliku dźwiękowego
• inherit - CSS2
przejęcie wartości "rodzica", np. cue-before:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p {cue-before: url(powitanie.wav);}
--></style>


Styl CSS: cursor

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

cursor

Styl definiuje wygląd kursora.

Wartości:

• auto (wartość domyślna) - CSS2 / IE4, N6
wygląd uzależniony od kontekstu
• default - CSS2 / IE4, N6
wygląd domyślny, zwykle strzałka
• URL - CSS2 / IE6
adres własnego wyglądu kursora
• [n-resize|ne-resize|e-resize|se-resize|s-resize|sw-resize|w-resize|nw-resize] - CSS2 / IE4, N6
zmiana orientacji kursora wyznaczona przez strony świata
• crosshair - CSS2 / IE4, N6
kursor w postaci krzyża
• hand - CSS2 / IE4, N6
kursor w postaci rączki
• pointer - CSS2 / IE4, N6
kursor w postaci wskaźnika (np. strzałka)
• move - CSS2 / IE4, N6
kursor dla elementów, które można przemieszczać
• text - CSS2 / IE4, N6
kursor dla elementów tekstowych
• wait - CSS2 / IE4, N6
kursor oczekiwania (np. zegarek lub klepsydra)
• help - CSS2 / IE4, N6
kursor pomocy (np. znak zapytania)
• inherit - CSS2
przejęcie wartości "rodzica", np. cursor:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE4, N6
Przykładowe zastosowania:

• Przykład 1:

<p style="cursor:help;">Najedź tutaj i zobacz kursor "help"</p>

Najedź tutaj i zobacz kursor "help"

• Przykład 2:

<p style="cursor:wait;">Najedź tutaj i zobacz kursor "wait"</p>

Najedź tutaj i zobacz kursor "wait"

• Przykład 3:

<p style="cursor:text;">Najedź tutaj i zobacz kursor "text"</p>

Najedź tutaj i zobacz kursor "text"

• Przykład 4:

<p style="cursor:move;">Najedź tutaj i zobacz kursor "move"</p>

Najedź tutaj i zobacz kursor "move"

• Przykład 5:

<p style="cursor:pointer;">Najedź tutaj i zobacz kursor "pointer"</p>

Najedź tutaj i zobacz kursor "pointer"

• Przykład 6:

<p style="cursor:crosshair;">Najedź tutaj i zobacz kursor "crosshair"</p>

Najedź tutaj i zobacz kursor "crosshair"

• Przykład 7:

<p style="cursor:hand;">Najedź tutaj i zobacz kursor "hand"</p>

Najedź tutaj i zobacz kursor "hand"

• Przykład 8:

<style type="text/css"><!--
body {cursor:crosshair;}
--></style>


Styl CSS: direction

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

direction

Styl definiuje kierunek wyświetlania tekstu lub położenie elementu w dokumentach, które napisane są w językach czytanych od strony prawej do lewej.

Wartości:

• ltr (wartość domyślna) - CSS1 / IE5, N6
od lewej strony do prawej
• rtl - CSS1 / IE5, N6
od prawej strony do lewej
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. direction:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE5, N6
• odpowiednik HTML: dir
Przykładowe zastosowania:

• Przykład 1:

<p style="direction:rtl;">Akapit zaczynający się od prawej strony</p>

Akapit zaczynający się od prawej strony

• Przykład 2:

<style type="text/css"><!--
p.hebrajski {direction:rtl;}
--></style>


Styl CSS: display

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

display

Styl definiuje sposób wyświetlania/interpretowania elementu.

Wartości:

• block (wartość domyślna) - CSS1 / IE5, N4, O3.5
tworzy element blokowy
• inline - CSS1 / IE5, N6, O3.5
tworzy element liniowy
• list-item - CSS1 / IE6, N4, O4
tworzy listę
• none - CSS1 / IE4, N4, O3.5
ukrywa element
• compact - CSS2 / O4
tworzy zagęszczony akapit bez odstępów
• run-in - CSS2 / O4
tworzy element liniowy, jeżeli następny jest element blokowy
• marker - CSS2 / O4
tworzy marker
• table-header-group - CSS2 / IE5, N6, O4
tworzy nagłówek tabeli
• table-footer-group - CSS2 / IE5, N6, O4
tworzy stopkę tabeli
• table - CSS2 / N6, O4
tworzy tabelę
• inline-table - CSS2 / O4
tworzy tabelę
• table-caption - CSS2 / N6, O4
tworzy podpis tabeli
• table-cell - CSS2 / N6, O4
tworzy komórkę tabeli
• table-row - CSS2 / N6, O4
tworzy rząd tabeli
• table-row-group - CSS2 / N6, O4
tworzy grupę rzędów tabeli
• table-column - CSS2 / N6, O4
tworzy kolumnę tabeli
• table-column-group - CSS2 / N6, O4
tworzy grupę kolumn tabeli
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. display:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<p style="display:inline;"> akapity przekształcone są w zwykłe</p>
<p style="display:inline;"> elementy liniowe, co spowodowało </p>
<p style="display:inline;"> wyświetlenie tekstu w jednej linii</p>

akapity przekształcone są w zwykłe

elementy liniowe, co spowodowało

wyświetlenie tekstu w jednej linii

• Przykład 2:

dla odmiany elementy u (podkreślenia) zostały
<u style="display:block;"> zamienione na elementy blokowe </u>
<u style="display:block;"> i teraz przypominają w działaniu </u>
<u style="display:block;"> elementy br (przejście do nowej linii)</u>

dla odmiany elementy u (podkreślenia) zostały zamienione na elementy blokowe i teraz przypominają w działaniu elementy br (przejście do nowej linii)

• Przykład 3:

a gdyby tak z elementów b (pogrubienie) zrobić listę? proszę:
<b style="display:list-item;"> pierwsza pozycja </b>
<b style="display:list-item;"> druga pozycja </b>
<b style="display:list-item;"> trzecia pozycja </b>

a gdyby tak z elementów b (pogrubienie) zrobić listę? proszę: pierwsza pozycja druga pozycja trzecia pozycja

• Przykład 4:

tutaj powinien być napis, ale został ukryty:
<span style="display:none;">napis</span>

tutaj powinien być napis, ale został ukryty: napis

• Przykład 5:

Pierwsza linia tekstu
<u style="display:compact;">kolejna, wydzielona linia, która teraz
jest akapitem, pozbawionym odstępów na dole i powyżej</u>
Ostatnia linijka tekstu

Pierwsza linia tekstu kolejna, wydzielona linia, która teraz jest akapitem, pozbawionym odstępów na dole i powyżej Ostatnia linijka tekstu

• Przykład 6:

<p>To jest pierwszy akapit.</p>
<p style="display:run-in;">To jest drugi akapit jako "run-in",
czyli liniowy.</p>
<p>To jest trzeci akapit.</p>

To jest pierwszy akapit.

To jest drugi akapit jako "run-in", czyli liniowy.

To jest trzeci akapit.

• Przykład 7:

<style type="text/css"><!--
.ukryty {display:none;}
--></style>


Styl CSS: elevation

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

elevation

Styl definiuje kąt wydobywania się dźwięku w pionie.

Wartości:

• level (wartość domyślna) - CSS2
domyślna pozycja pionowa (0deg)
• below - CSS2
najniżej (-90deg)
• above - CSS2
najwyżej (90deg)
• lower - CSS2
o 10 stopni mniej
• higher - CSS2
o 10 stopni więcej
• kąt - CSS2
wartość w stopniach, od "-90deg" do "90deg"
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. elevation:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p {elevation:25deg;}
--></style>


Styl CSS: empty-cells

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

empty-cells

Styl definiuje typ obramowania komórek tabeli, które są puste.

Wartości:

• show (wartość domyślna) - CSS2 / N6, O4
obramowanie widoczne
• hide - CSS2 / N6, O4
obramowanie niewidoczne
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. empty-cells:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / N6, O4
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
td {empty-cells:show;}
--></style>


Styl CSS: first-child

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

first-child

Styl, a w zasadzie pseudoklasa, który definiuje właściwości pierwszego elementu w hierarchii stylów.

Wartości:

• brak
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / N6
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p:first-child {color:red;}
--></style>


Styl CSS: first-letter

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

first-letter

Styl, a w zasadzie pseudoelement, który definiuje właściwości pierwszej litery elementu.

Wartości:

• brak
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE5.5, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p:first-letter {color:red;}
--></style>


Styl CSS: first-line

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

first-line

Styl, a w zasadzie pseudoelement, który definiuje właściwości pierwszej linii elementu.

Wartości:

• brak
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE5.5, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p:first-line {color:red;}
--></style>


Styl CSS: float

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

float

Styl definiuje kierunek oblewania elementu (np. obrazka) przez tekst lub inne elementy.

Wartości:

• none (wartość domyślna) - CSS1 / IE4, N4, O3.5
bez zmian
• left - CSS1 / IE4, N4, O3.5
element znajduje się po lewej stronie i oblewany jest z prawej strony
• right - CSS1 / IE4, N4, O3.5
element znajduje się po prawej stronie i oblewany jest z lewej strony
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. float:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
• odpowiednik HTML: align
Przykładowe zastosowania:

• Przykład 1:

<img src="../p/logo.gif" width="120" height="60" style="float:left;">
Tekst będzie oblewał element po prawej stronie, a sam element znajdzie
się po stronie prawej - zgodnie z tym co zadeklarowaliśmy.<br> Co
ciekawe, w CSS oblewać można nie tylko obrazki, ale także akapity
i inne elementy. Pozwala to tworzyć bardzo zaawansowane i ładnie
poukładane strony z tekstem.

Tekst będzie oblewał element po prawej stronie, a sam element znajdzie się po stronie prawej - zgodnie z tym co zadeklarowaliśmy.
Co ciekawe, w CSS oblewać można nie tylko obrazki, ale także akapity i inne elementy. Pozwala to tworzyć bardzo zaawansowane i ładnie poukładane strony z tekstem.

• Przykład 2:

<style type="text/css"><!--
img {float:none;}
.lewo {float:left;}
.prawo {float:right;}
--></style>


Styl CSS: focus

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

focus

Styl, a w zasadzie pseudoklasa, który definiuje właściwości elementu aktualnie używanego (wybranego), np. pola tekstowego.

Wartości:

• brak
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / N6
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
input:focus {color:red;}
--></style>


Styl CSS: font

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

font

Styl definiuje właściwości czcionki. Za pomocą tego jednego polecenia można ustalić wszystkie, następujące właściwości czcionki: font-family, font-size, font-style, font-variant, font-weight. Jedno polecenie zamiast kilku jest po prostu wygodne w stosowaniu. Kolejność podawanych wartości ma znaczenie. Można podać wszystkie wartości poniższych styli lub tylko niektóre z nich, ale muszą wystąpić font-size i font-family.

Wartości:

• font-style - CSS1 / IE3, N4, O3.5
styl czcionki, np. font:italic;
• font-variant - CSS1 / IE4, N6, O3.5
wariant czcionki, np. font:small-caps;
• font-weight - CSS1 / IE3, N4, O3.5
grubość (waga) czcionki, np. font:bold;
• font-size - CSS1 / IE3, N4, O3.5
wielkość czcionki, np. font:14px;
• font-family - CSS1 / IE3, N4, O3.5
rodzina czcionki, np. font:sans-serif;
• caption - CSS2 / IE4, N6, O6
czcionka systemowa, jak w przyciskach, np. font:caption;
• icon - CSS2 / IE4, N6, O6
czcionka systemowa, jak w ikonach, np. font:icon;
• menu - CSS2 / IE4, N6, O6
czcionka systemowa, jak w menu, np. font:menu;
• message-box - CSS2 / IE5.5, N6, O6
czcionka systemowa, jak w komunikatach, np. font:message-box;
• small-caption - CSS2 / IE5.5, N6, O6
czcionka systemowa, jak w dymkach, np. font:small-caption;
• status-bar - CSS2 / IE5.5, N6, O6
czcionka systemowa, jak w pasku statusu, np. font:status-bar;
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. font:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
• odpowiedniki HTML: FONT, I, B
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, w którym
<span style="font: bold 14px Helvetica, Arial, sans-serif;">
część wyrazów napisana jest inną czcionką</span>.
A teraz znowu zwykły tekst.

Przykładowy tekst, w którym część wyrazów napisana jest inną czcionką. A teraz znowu zwykły tekst.

• Przykład 2:

<style type="text/css"><!--
body, td, br, p, center {font: 14px helvetica, sans-serif;}
b {font: bold 16px helvetica, sans-serif;}
--></style>


Styl CSS: font-family

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

font-family

Styl definiuje rodzaj oraz rodzinę czcionek. Można podać tylko nazwę, tylko rodzinę, albo jedno i drugie, co jest rozwiązaniem najlepszym. W przypadku gdy wskazanej czcionki nie ma w systemie, na stronie pojawi się czcionka podobna z podanej rodziny.

Wartości:

• nazwa - CSS1 / IE3, N4, O3.5
rodzaj czcionki, np. font-family:Arial;
• [serif|sans-serif|cursive|fantasy|monospace] - CSS1 / IE3, N4, O3.5
rodzina czcionki, np. font-family:sans-serif;
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. font-family:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
• odpowiednik HTML: face
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, w którym
<span style="font-family: Verdana, Arial, Helvetica, sans-serif;">
część wyrazów napisana jest inną czcionką</span>.
A teraz znowu zwykły tekst.

Przykładowy tekst, w którym część wyrazów napisana jest inną czcionką. A teraz znowu zwykły tekst.

• Przykład 2:

<style type="text/css"><!--
body {font-family: verdana, arial, helvetica, sans-serif;}
.cour {font-family: courier;}
--></style>


Styl CSS: font-size

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

font-size

Styl definiuje wielkość czcionki.

Wartości:

• medium (wartość domyślna) - CSS1 / IE3, N4, O3.5
standardowy rozmiar
• długość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE3, N4, O3.5
wartość dodatnia
• procenty - CSS1 / IE3, N4, O3.5
wartość wyrażona w procentach
• xx-small|x-small|small|smaller - CSS1 / IE3, N4, O3.5
małe rozmiary, próbki poniżej
• xx-large|x-large|large|larger - CSS1 / IE3, N4, O3.5
duże rozmiary, próbki poniżej
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. font-size:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
• odpowiednik HTML: size
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, w którym pokazane są różne wymiary czcionek:
<br>- <span style="font-size:smaller;"> próbka smaller</span>
<br>- <span style="font-size:xx-small;"> próbka xx-small</span>
<br>- <span style="font-size:x-small;"> próbka x-small</span>
<br>- <span style="font-size:small;"> próbka small</span>
<br>- <span style="font-size:larger;"> próbka larger</span>
<br>- <span style="font-size:large;"> próbka large</span>
<br>- <span style="font-size:x-large;"> próbka x-large</span>
<br>- <span style="font-size:xx-large;"> próbka xx-large</span>

Przykładowy tekst, w którym pokazane są różne wymiary czcionek:
- próbka smaller
- próbka xx-small
- próbka x-small
- próbka small
- próbka larger
- próbka large
- próbka x-large
- próbka xx-large

• Przykład 2:

<style type="text/css"><!--
body {font-size: 16px;}
.mini {font-size: 12px;}
--></style>


Styl CSS: font-size-adjust

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

font-size-adjust

Styl definiuje współczynnik wielkości do wysokości znaku.

Wartości:

• none (wartość domyślna) - CSS2
standardowy rozmiar
• liczba - CSS2
współczynnik, np. font-size-adjust:55;
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. font-size-adjust:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

Tradycyjny tekst. <span style="font-size-adjust:49;">Przykładowy
tekst ze zmienioną proporcją czcionki.</SPAN> Tradycyjny tekst.

Tradycyjny tekst. Przykładowy tekst ze zmienioną proporcją czcionki. Tradycyjny tekst.

• Przykład 2:

<style type="text/css"><!--
p {font-size-adjust:49;}
--></style>


Styl CSS: font-stretch

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

font-stretch

Styl definiuje szerokość (rozstrzelenie) liter.

Wartości:

• normal (wartość domyślna) - CSS2
standardowy rozmiar
• narrower - CSS2
węższe pismo
• wider - CSS2
szersze pismo
• [ultra-condensed|extra-condensed|condensed|semi-condensed|normal] - CSS2
od najwęższego do normalnego
• [normal|semi-expanded|expanded|extra-expanded|ultra-expanded] - CSS2
od normalnego do najszerszego
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. font-stretch:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

Tradycyjny tekst. <span style="font-stretch:ultra-expanded;">
Przykładowy tekst bardzo rozstrzeony.</SPAN> Tradycyjny tekst.

Tradycyjny tekst. Przykładowy tekst bardzo rozstrzeony. Tradycyjny tekst.

• Przykład 2:

<style type="text/css"><!--
p {font-stretch:ultra-expanded;}
--></style>


Styl CSS: font-style

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

font-style

Styl definiuje styl czcionki. Wartość italic i oblique na ekranie wyglądają identycznie dla większości czcionek.

Wartości:

• normal (wartość domyślna) - CSS1 / IE3, N4, O3.5
normalna czcionka
• italic - CSS1 / IE3, N4, O3.5
kursywa
• oblique - CSS1 / IE4, N6, O3.5
pochyła
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. font-style:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
• odpowiednik HTML: I
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, w którym
<span style="font-style:oblique;">
część wyrazów napisana jest innym stylem</span>.
A teraz znowu zwykły tekst.

Przykładowy tekst, w którym część wyrazów napisana jest innym stylem. A teraz znowu zwykły tekst.

• Przykład 2:

Przykładowy tekst, w którym
<span style="font-style:italic;">
część wyrazów napisana jest innym stylem</span>.
A teraz znowu zwykły tekst.

Przykładowy tekst, w którym część wyrazów napisana jest innym stylem. A teraz znowu zwykły tekst.

• Przykład 3:

<style type="text/css"><!--
i {font-style: italic;}
.poch {font-style: oblique;}
--></style>


Styl CSS: font-variant

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

font-variant

Styl definiuje wariant czcionki.

Wartości:

• normal (wartość domyślna) - CSS1 / IE4, N6, O3.5
normalna czcionka
• small-caps - CSS1 / IE4, N6, O3.5
kapitaliki
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. font-variant:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, w którym
<span style="font-variant:small-caps;">
część wyrazów napisana jest innym stylem</span>.
A teraz znowu zwykły tekst.

Przykładowy tekst, w którym część wyrazów napisana jest innym stylem. A teraz znowu zwykły tekst.

• Przykład 2:

<style type="text/css"><!--
p.spec {font-variant:small-caps;}
.kapitaliki {font-variant:small-caps;}
--></style>


Styl CSS: font-weight

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

font-weight

Styl definiuje grubość (wagę) czcionki.

Wartości:

• normal (wartość domyślna) - CSS1 / IE3, N4, O3.5
standardowa grubość
• bold - CSS1 / IE3, N4, O3.5
gruba
• bolder - CSS1 / IE4, N4, O3.5
grubsza
• lighter - CSS1 / IE4, N4, O3.5
cieńsza
• 100|200|300|400|500|600|700|800|900 - CSS1 / IE4, N4, O3.5
grubości numeryczne, 400 to normal, 700 to bold.
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. font-weight:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
• odpowiednik HTML: B
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, w którym pokazane są różne grubości czcionek:
<br>- <span style="font-weight:bold;"> próbka bold</span>
<br>- <span style="font-weight:bolder;"> próbka bolder</span>
<br>- <span style="font-weight:lighter;"> próbka lighter</span>
<br>- <span style="font-weight:100;"> próbka 100</span>
<br>- <span style="font-weight:200;"> próbka 200</span>
<br>- <span style="font-weight:300;"> próbka 300</span>
<br>- <span style="font-weight:400;"> próbka 400</span>
<br>- <span style="font-weight:500;"> próbka 500</span>
<br>- <span style="font-weight:600;"> próbka 600</span>
<br>- <span style="font-weight:700;"> próbka 700</span>
<br>- <span style="font-weight:800;"> próbka 800</span>
<br>- <span style="font-weight:900;"> próbka 900</span>

Przykładowy tekst, w którym pokazane są różne grubości czcionek:
- próbka bold
- próbka bolder
- próbka lighter
- próbka 100
- próbka 200
- próbka 300
- próbka 400
- próbka 500
- próbka 600
- próbka 700
- próbka 800
- próbka 900

• Przykład 2:

<style type="text/css"><!--
b {font-weight:bold;}
.l {font-weight:lighter;}
--></style>


Styl CSS: height

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

height

Styl definiuje wysokość elementu.

Wartości:

• auto (wartość domyślna) - CSS1 / IE4, N6, O3.5
wysokość dostosowana automatycznie
• długość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE4, N6, O3.5
wartość dodatnia
• procenty wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS2 / IE4, N6, O3.5
wartość wyrażona w procentach
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. height:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table border="1" style="height:100px;">
<tr><td>
tabela o wysokości 100 pikseli
</td></tr></table>

tabela o wysokości 100 pikseli

• Przykład 2:

Powiększony obrazek:
<img src="../p/sm.gif" style="height:50px;">
<br clear=all>

Powiększony obrazek:

• Przykład 3:

<style type="text/css"><!--
table {height:100px;}
.big {height:10cm;}
--></style>


Styl CSS: hover

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

hover

Styl, a w zasadzie pseudoklasa, która definiuje właściwości "najechanych" elementów, np. odnośników (linków).

Wartości:

• brak
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE4, N6, O4
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
a:hover {color:red;}
--></style>


Styl CSS: lang

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

lang

Styl, a w zasadzie pseudoklasa, która definiuje język narodowy elementu.

Wartości:

• język narodowy
kody języków określa norma ISO 639, a krajów ISO 3166
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p:lang(en) {color:red;}
b:lang(en-us) {color:red;}
--></style>


Styl CSS: left

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

left

Styl definiuje odległość od lewej krawędzi elementu zewnętrznego.

Wartości:

• auto (wartość domyślna) - CSS2 / IE4, N6, O4
standardowa odległość
• długość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS2 / IE4, N6, O4
wartość dodatnia lub ujemna
• procenty - CSS2 / IE4, N6, O4
wartość wyrażona w procentach
• inherit - CSS2 / N6, O5
przejęcie wartości "rodzica", np. left:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE4, N6, O4
Przykładowe zastosowania:

• Przykład 1:

<p style="position:relative;left:150px;">Akapit odsunięty
o 150 pikseli od lewej strony</P>

Akapit odsunięty o 150 pikseli od lewej strony

• Przykład 2:

<style type="text/css"><!--
p.lewy {position:relative;left:50px;}
--></style>


Styl CSS: letter-spacing

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

letter-spacing

Styl definiuje odstępy pomiędzy literami.

Wartości:

• normal (wartość domyślna) - CSS1 / IE4, N6, O3.5
normalne odstępy
• długość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE4, N6, O3.5
wartość dodatnia lub ujemna sumowana z aktualnym odstępem
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. letter-spacing:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, w którym
<br><span style="letter-spacing:2px;">
część wyrazów obejmuje wartość 2 piksele</span>,
<br><span style="letter-spacing:0.5in;">
część wyrazów obejmuje wartość pół cala</span>,
<br><span style="letter-spacing:-1px;">
a część wyrazów obejmuje wartość -1 piksel</span>.

Przykładowy tekst, w którym
część wyrazów obejmuje wartość 2 piksele,
część wyrazów obejmuje wartość pół cala,
a część wyrazów obejmuje wartość -1 piksel.

• Przykład 2:

<style type="text/css"><!--
p {letter-spacing:2px;}
.tab {letter-spacing:2cm;}
--></style>


Styl CSS: line-height

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

line-height

Styl definiuje odstęp pomiędzy liniami. Stosowany może być nie tylko do tekstu, ale w odniesieniu do dowolnego elementu, np. grafik.

Wartości:

• normal (wartość domyślna) - CSS1 / IE3, N4, O3.5
odstęp normalny
• wysokość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE3, N4, O3.5
wartość dodatnia
• procenty - CSS1 / IE3, N4, O3.5
wartość wyrażona w procentach
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. line-height:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst,
<br><span style="line-height:25px;">w którym pokazana została
<br>różnica w odległości pomiędzy</span>
<br> środkowymi liniami

Przykładowy tekst,
w którym pokazana została
różnica w odległości pomiędzy
środkowymi liniami

• Przykład 2:

Przykładowy tekst,
<br><span style="line-height:5px;">w którym pokazana została
<br>różnica w odległości pomiędzy</span>
<br> środkowymi liniami

Przykładowy tekst,
w którym pokazana została
różnica w odległości pomiędzy
środkowymi liniami

• Przykład 3:

<style type="text/css"><!--
p {style="line-height:15px;}
.scisniety {style="line-height:10px;}
--></style>


Styl CSS: link

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

link

Styl, a w zasadzie pseudoklasa, która definiuje właściwości nieodwiedzonych odnośników (linków).

Wartości:

• brak
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
• odpowiednik HTML: link
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
a:link {color:red;}
--></style>


Styl CSS: list-style

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

list-style

Styl definiuje właściwości listy. Za pomocą tego jednego polecenia można ustalić wszystkie, następujące właściwości listy: list-style-image, list-style-position, list-style-type. Jedno polecenie zamiast kilku jest po prostu wygodne w stosowaniu. Kolejność podawanych wartości ma znaczenie.

Wartości:

• list-style-image - CSS1 / IE4, N6, O3.5
definiuje obrazek zamiast wypunktowania, np. list-style:url(grafika.gif);
• list-style-position - CSS1 / IE4, N6, O3.5
pozycja znaku wypunktowania, np. list-style:inside;
• list-style-type - CSS1 / IE4, N4, O3.5
typ listy, np. list-style:circle;
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. list-style:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
• odpowiednik HTML: type
Przykładowe zastosowania:

• Przykład 1:

<ul style="list-style: circle url(../p/sm.gif) inside;">
<li> pierwszy element listy
<li> drugi element listy
<li> trzeci element listy
</ul>

  • pierwszy element listy
  • drugi element listy
  • trzeci element listy

• Przykład 2:

<style type="text/css"><!--
ul {list-style: circle url(../p/sm.gif) inside;}
--></style>


Styl CSS: list-style-image

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

list-style-image

Styl definiuje graficzny znak wypunktowania listy.

Wartości:

• none (wartość domyślna) - CSS1 / IE4, N6, O3.5
brak grafiki
• URL, ścieżka - CSS1 / IE4, N6, O3.5
adres tła, np. background-image:url(http://reporter.pl/tlo.gif);
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. list-style-image:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

<ul style="list-style-image: url(../p/sm.gif);">
<li> pierwszy element listy
<li> drugi element listy
<li> trzeci element listy
</ul>

  • pierwszy element listy
  • drugi element listy
  • trzeci element listy

• Przykład 2:

<style type="text/css"><!--
ul {list-style-image: url(punkt.gif);}
--></style>


Styl CSS: list-style-position

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

list-style-position

Styl definiuje pozycję znaku wypunktowania listy.

Wartości:

• outside (wartość domyślna) - CSS1 / IE4, N6, O3.5
wypunktowanie na zewnątrz listy
• inside - CSS1 / IE4, N6, O3.5
wypunktowanie wewnątrz listy
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. list-style-position:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

<ul style="list-style-position: inside;">
<li> pierwszy element<br> listy wypuktowanej
<li> drugi element<br> listy wypuktowanej
<li> trzeci element<br> listy wypuktowanej
</ul>

  • pierwszy element
    listy wypuktowanej
  • drugi element
    listy wypuktowanej
  • trzeci element
    listy wypuktowanej

• Przykład 2:

<ul style="list-style-position: outside;">
<li> pierwszy element<br> listy wypuktowanej
<li> drugi element<br> listy wypuktowanej
<li> trzeci element<br> listy wypuktowanej
</ul>

  • pierwszy element
    listy wypuktowanej
  • drugi element
    listy wypuktowanej
  • trzeci element
    listy wypuktowanej

• Przykład 3:

<style type="text/css"><!--
ul {list-style-position: outside;}
--></style>


Styl CSS: list-style-type

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

list-style-type

Styl definiuje typ listy.

Wartości:

• disc (wartość domyślna) - CSS1 / IE4, N4, O3.5
punkty tradycyjne w postaci kropek
• square - CSS1 / IE4, N4, O3.5
kwadraty
• circle - CSS1 / IE4, N4, O3.5
kółka
• decimal - CSS1 / IE4, N4, O3.5
liczby: 1, 2, 3...
• decimal-leading-zero - CSS2 / N6
liczby z początkowym zerem: 01, 02, 03...
• lower-greek - CSS2 / N6, O6
małe litery greckie: alpha, beta, gamma...
• lower-latin - CSS2 / N6, O6
małe litery łacińskie
• upper-latin - CSS2 / N6, O6
duże litery łacińskie
• armenian - CSS2 / N6, O6
numerowanie armeńskie
• georgian - CSS2 / N6, O6
numerowanie gruzińskie
• hebrew - CSS2 / N6, O6
numerowanie hebrajskie
• cjk-ideographic - CSS2 / N6
numerowanie ideograficzne
• hiragana - CSS2 / N6
numerowanie japońskie - hiragana: a, i, u, e, o, ka...
• katakana - CSS2 / N6
numerowanie japońskie - katakana: a, i, u, e, o, ka...
• hiragana-iroha - CSS2 / N6
numerowanie japońskie - hiragana-iroha: i, ro, ha, ni, ho, he...
• katakana-iroha - CSS2 / N6
numerowanie japońskie - katakana-iroha: i, ro, ha, ni, ho, he...
• lower-alpha - CSS1 / IE4, N4, O3.5
litery: a, b, c...
• upper-alpha - CSS1 / IE4, N4, O3.5
litery: A, B, C...
• lower-roman - CSS1 / IE4, N4, O3.5
litery rzymskie: i, ii, iii...
• upper-roman - CSS1 / IE4, N4, O3.5
litery rzymskie: I, II, III...
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. list-style-type:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
• odpowiednik HTML: type
Przykładowe zastosowania:

• Przykład 1:

<ul style="list-style-type:upper-roman;">
<li> pierwszy element listy
<li> drugi element listy
<li> trzeci element listy
</ul>

  • pierwszy element listy
  • drugi element listy
  • trzeci element listy

• Przykład 2:

<ul style="list-style-type:circle;">
<li> pierwszy element listy
<li> drugi element listy
<li> trzeci element listy
</ul>

  • pierwszy element listy
  • drugi element listy
  • trzeci element listy

• Przykład 3:

<ul style="list-style-type:square;">
<li> pierwszy element listy
<li> drugi element listy
<li> trzeci element listy
</ul>

  • pierwszy element listy
  • drugi element listy
  • trzeci element listy

• Przykład 4:

<ul style="list-style-type:decimal;">
<li> pierwszy element listy
<li> drugi element listy
<li> trzeci element listy
</ul>

  • pierwszy element listy
  • drugi element listy
  • trzeci element listy

• Przykład 5:

<ul style="list-style-type:lower-greek;">
<li> pierwszy element listy
<li> drugi element listy
<li> trzeci element listy
</ul>

  • pierwszy element listy
  • drugi element listy
  • trzeci element listy

• Przykład 6:

<ul style="list-style-type:lower-latin;">
<li> pierwszy element listy
<li> drugi element listy
<li> trzeci element listy
</ul>

  • pierwszy element listy
  • drugi element listy
  • trzeci element listy

• Przykład 7:

<style type="text/css"><!--
ul {list-style-type:circle;}
--></style>


Styl CSS: margin

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

margin

Styl definiuje wielkość marginesu dla elementu. Za pomocą tego jednego polecenia można ustalić wszystkie, następujące właściwości marginesu: margin-bottom, margin-top, margin-right, margin-left. Jedno polecenie zamiast kilku jest po prostu wygodne w stosowaniu. Kolejność podawanych wartości ma znaczenie. Można podać wszystkie wartości poniższych stylów lub tylko jeden.

- Jeżeli podamy jeden, trzy pozostałe będą miały taką sama wartość.
- Jeżeli podamy dwa, pierwszy określi top i bottom, a drugi right i left
- Jeżeli podamy trzy, pierwszy określi top, drugi right i left, trzeci bottom.

Wartości:

• margin-top - CSS1 / IE3, N4, O3.5
wielkość marginesu górnego
• margin-right - CSS1 / IE3, N4, O3.5
wielkość marginesu prawego
• margin-bottom - CSS1 / IE3, N4, O3.5
wielkość marginesu dolnego
• margin-left - CSS1 / IE3, N4, O3.5
wielkość marginesu lewego
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. margin:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table border="1"><tr><td>
<p style="margin:10px;">tekst</p>
</td></tr></table>

tekst

• Przykład 2:

<table border="1"><tr><td>
<p style="margin:10px 30px;">tekst</p>
</td></tr></table>

tekst

• Przykład 3:

<style type="text/css"><!--
table {margin:10px;}
.big {margin:50px;}
--></style>


Styl CSS: margin-bottom

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

margin-bottom

Styl definiuje wielkość dolnego marginesu. Wartość domyślna - 0.

Wartości:

• auto - CSS1 / IE4, N4, O3.5
automatyczne dostosowanie
• odstęp wyrażony w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE4, N4, O3.5
wartość dodatnia lub ujemna
• procenty - CSS1 / IE4, N4, O3.5
wartość wyrażona w procentach
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. margin-bottom:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table border="1"><tr><td>
<p style="margin-bottom:10px;">tekst</p>
</td></tr></table>

tekst

• Przykład 2:

<style type="text/css"><!--
table {margin-bottom:10px;}
.big {margin-bottom:30px;}
--></style>


Styl CSS: margin-left

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

margin-left

Styl definiuje wielkość lewego marginesu. Wartość domyślna - 0.

Wartości:

• auto - CSS1 / IE3, N4, O3.5
automatyczne dostosowanie
• odstęp wyrażony w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE3, N4, O3.5
wartość dodatnia lub ujemna
• procenty - CSS1 / IE3, N4, O3.5
wartość wyrażona w procentach
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. margin-left:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table border="1"><tr><td>
<p style="margin-left:10px;">tekst</p>
</td></tr></table>

tekst

• Przykład 2:

<style type="text/css"><!--
table {margin-left:10px;}
.big {margin-left:30px;}
--></style>


Styl CSS: margin-right

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

margin-right

Styl definiuje wielkość prawego marginesu. Wartość domyślna - 0.

Wartości:

• auto - CSS1 / IE3, N4, O3.5
automatyczne dostosowanie
• odstęp wyrażony w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE3, N4, O3.5
wartość dodatnia lub ujemna
• procenty - CSS1 / IE3, N4, O3.5
wartość wyrażona w procentach
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. margin-right:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table border="1"><tr><td>
<p style="margin-right:10px;">tekst</p>
</td></tr></table>

tekst

• Przykład 2:

<style type="text/css"><!--
table {margin-right:10px;}
.big {margin-right:30px;}
--></style>


Styl CSS: margin-top

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

margin-top

Styl definiuje wielkość górnego marginesu. Wartość domyślna - 0.

Wartości:

• auto - CSS1 / IE3, N4, O3.5
automatyczne dostosowanie
• odstęp wyrażony w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE3, N4, O3.5
wartość dodatnia lub ujemna
• procenty - CSS1 / IE3, N4, O3.5
wartość wyrażona w procentach
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. margin-top:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table border="1"><tr><td>
<p style="margin-top:10px;">tekst</p>
</td></tr></table>

tekst

• Przykład 2:

<style type="text/css"><!--
table {margin-top:10px;}
.big {margin-top:30px;}
--></style>


Styl CSS: marker-offset

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

marker-offset

Styl definiuje odległość pomiędzy markerem i blokiem zewnętrznym.

Wartości:

• auto - (wartość domyślna) CSS2
odległość domyślna
• długość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS2
wartość dodatnia lub ujemna
• inherit - CSS2
przejęcie wartości "rodzica", np. marker-offset:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
li:before {display:marker; marker-offset:3px;}
--></style>


Styl CSS: marks

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

marks

Styl definiuje znaczniki obszaru strony przy wydruku.

Wartości:

• none - (wartość domyślna) CSS2
znaczniki nie są drukowane
• crop - CSS2
drukowane są znaczniki przycięcia strony
• cross - CSS2
drukowane są linie do precyzyjnego składania stron
• inherit - CSS2
przejęcie wartości "rodzica", np. marks:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
body {marks:crop cross;}
--></style>


Styl CSS: max-height

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

max-height

Styl definiuje maksymalną wysokość elementu.

Wartości:

• none - (wartość domyślna) CSS2 / N6, O4
limit nie jest stosowany
• wysokość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS2 / N6, O4
wartość dodatnia
• procenty - CSS2 / N6, O4
wartość wyrażona w procentach
• inherit - CSS2
przejęcie wartości "rodzica", np. max-height:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / N6, O4
Przykładowe zastosowania:

• Przykład 1:

<table style="max-height:20;"><tr><td>
ta tabela ma krótki<br> odstęp za sobą
bo zajmuje tylko 20 pikseli
</td></tr></table>

ta tabela ma krótki
odstęp za sobą bo zajmuje tylko 20 pikseli

• Przykład 2:

<style type="text/css"><!--
table {max-height:200;}
--></style>


Styl CSS: max-width

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

max-width

Styl definiuje maksymalną szerokość elementu.

Wartości:

• none - (wartość domyślna) CSS2 / N6, O4
limit nie jest stosowany
• szerokość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS2 / N6, O4
wartość dodatnia
• procenty - CSS2 / N6, O4
wartość wyrażona w procentach
• inherit - CSS2
przejęcie wartości "rodzica", np. max-width:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / N6, O4
Przykładowe zastosowania:

• Przykład 1:

<table border="1" style="max-width:100;"><tr><td>
ta tabela zajmuje tylko 100 pikseli na szerokość
</td></tr></table>

ta tabela zajmuje tylko 100 pikseli na szerokość

• Przykład 2:

<style type="text/css"><!--
table {max-width:200;}
--></style>


Styl CSS: min-height

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

min-height

Styl definiuje minimalną wysokość elementu. Wartość domyślna: 0.

Wartości:

• wysokość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS2 / IE6, N6, O4
wartość dodatnia
• procenty - CSS2 / IE6, N6, O4
wartość wyrażona w procentach
• inherit - CSS2 / N6, O4
przejęcie wartości "rodzica", np. min-height:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE6, N6, O4
Przykładowe zastosowania:

• Przykład 1:

<table border="1" style="min-height:100;"><tr><td>
ta tabela ma 100 pikseli wysokości
</td></tr></table>

ta tabela ma 100 pikseli wysokości

• Przykład 2:

<style type="text/css"><!--
table {min-height:50;}
--></style>


Styl CSS: min-width

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

min-width

Styl definiuje minimalną szerokość elementu.

Wartości:

• szerokość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS2 / N6, O4
wartość dodatnia
• procenty - CSS2 / N6, O4
wartość wyrażona w procentach
• inherit - CSS2 / N6, O4
przejęcie wartości "rodzica", np. min-width:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / N6, O4
Przykładowe zastosowania:

• Przykład 1:

<table border="1" style="min-width:300;"><tr><td>
ta tabela ma 300 pikseli szerokości
</td></tr></table>

ta tabela ma 300 pikseli szerokości

• Przykład 2:

<style type="text/css"><!--
table {min-width:100;}
--></style>


Styl CSS: orphans

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

orphans

Styl definiuje minimalną ilość wierszy w akapicie, które muszą być widoczne na końcu strony. Domyślna wartość: 2.

Wartości:

• liczba - CSS2 / O3.5
liczba wierszy
• inherit - CSS2
przejęcie wartości "rodzica", np. orphans:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / O3.5
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p {orphans:1;}
--></style>


Styl CSS: outline

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

outline

Styl definiuje właściwości obramowania. Za pomocą tego jednego polecenia można ustalić następujące właściwości obramowania: outline-color, outline-style, outline-width. Jedno polecenie zamiast kilku jest po prostu wygodne w stosowaniu. Kolejność podawanych wartości nie ma znaczenia. Styl przypomina w działaniu border, jednak pozwala nadawać właściwości ramek również obiektom o kształtach innych niż prostokąt.

Wartości:

• outline-color - CSS2
kolor obramowania, np. outline:green;
• outline-style - CSS2
styl obramowania, np. outline:solid;
• outline-width - CSS2
szerokość obramowania, np. outline:thick;
• inherit - CSS2
przejęcie wartości "rodzica", np. outline:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
input {outline: maroon solid thick;}
--></style>


Styl CSS: outline-color

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

outline-color

Styl definiuje kolor obramowania.

Wartości:

• kolor - CSS2
angielska nazwa koloru np. outline-color:green; zapis szesnastkowy #RRGGBB, np. outline-color:#33FF99; lub zapis RGB, np. outline-color:rgb(255,128,0);
• invert (wartość domyślna) - CSS2
kolor kontrastujący z elementem
• inherit - CSS2
przejęcie wartości "rodzica", np. outline-color:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
input {outline-color:maroon;}
--></style>


Styl CSS: outline-style

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

outline-style

Styl definiuje styl i wygląd obramowania.

Wartości:

• none (wartość domyślna) - CSS2
nie ma obramowania
• dotted - CSS2
linia składająca się z kropek
• dashed - CSS2
linia składająca się z kresek
• solid - CSS2
linia tradycyjna
• groove - CSS2
linia wklęsła przestrzenna
• ridge - CSS2
linia wypukła przestrzenna
• inset - CSS2
linia wklęsła
• outset - CSS2
linia wypukła
• double - CSS2
linia podwójna
• inherit - CSS2
przejęcie wartości "rodzica", np. outline-style:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
button {outline-style:double;}
--></style>


Styl CSS: outline-width

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

outline-width

Styl definiuje szerokość obramowania.

Wartości:

• thin - CSS2
cienka linia
• medium (wartość domyślna) - CSS2
normalna linia
• thick - CSS2
gruba linia
• szerokość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS2
wartość dodatnia
• inherit - CSS2
przejęcie wartości "rodzica", np. outline-width:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
button {outline-width:thin;}
--></style>


Styl CSS: overflow

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

overflow

Styl definiuje przycinanie elementów blokowych. Jeżeli elementy bloku będą wychodzić poza jego granice mogą zostać przycięte.

Wartości:

• visible (wartość domyślna) - CSS2 / IE4, N6, O4
elementy są widoczne (nie są przycinane)
• hidden - CSS2 / IE4, N6, O4
elementy wystające nie są widoczne
• scroll - CSS2 / IE4, N6
elementy wystające nie są widoczne, ale pojawiają się suwaki umożliwiające przesunięcie niewidocznych elementów
• auto - CSS2 / IE4, N6
przeglądarka decyduje o wyglądzie elementów wystających
• inherit - CSS2
przejęcie wartości "rodzica", np. overflow:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE4, N6, O4
Przykładowe zastosowania:

• Przykład 1:

<p style="width:100px;height:50px;overflow:scroll;">
ten tekst będzie można swobodnie przewijać</p>

ten tekst będzie można swobodnie przewijać

• Przykład 2:

<p style="width:50px;height:50px;overflow:hidden;">
ten tekst będzie przycięty</p>

ten tekst będzie przycięty

• Przykład 3:

<style type="text/css"><!--
p.maly {width:50px;height:50px;overflow:hidden;}
--></style>


Styl CSS: padding

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

padding

Styl definiuje wielkość dopełnienia dla elementu. Za pomocą tego jednego polecenia można ustalić wszystkie, następujące właściwości dopełnienia: padding-bottom, padding-top, padding-right, padding-left. Jedno polecenie zamiast kilku jest po prostu wygodne w stosowaniu. Kolejność podawanych wartości ma znaczenie. Można podać wszystkie wartości poniższych stylów lub tylko jeden.

- Jeżeli podamy jeden, trzy pozostałe będą miały taką sama wartość.
- Jeżeli podamy dwa, pierwszy określi top i bottom, a drugi right i left
- Jeżeli podamy trzy, pierwszy określi top, drugi right i left, trzeci bottom.

Wartości:

• padding-top - CSS1 / IE4, N4, O3.5
wielkość dopełnienia górnego
• padding-right - CSS1 / IE4, N4, O3.5
wielkość dopełnienia prawego
• padding-bottom - CSS1 / IE4, N4, O3.5
wielkość dopełnienia dolnego
• padding-left - CSS1 / IE4, N4, O3.5
wielkość dopełnienia lewego
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. padding:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table border="1"><tr><td>
<p style="padding:10px;">tekst</p>
</td></tr></table>

tekst

• Przykład 2:

<table border="1"><tr><td>
<p style="padding:10px 30px;">tekst</p>
</td></tr></table>

tekst

• Przykład 3:

<style type="text/css"><!--
table {padding:10px;}
.big {padding:50px;}
--></style>


Styl CSS: padding-bottom

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

padding-bottom

Styl definiuje wielkość dolnego dopełnienia. Wartość domyślna - 0.

Wartości:

• auto - CSS1 / IE4, N4, O3.5
automatyczne dostosowanie
• odstęp wyrażony w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE4, N4, O3.5
wartość dodatnia lub ujemna
• procenty - CSS1 / IE4, N4, O3.5
wartość wyrażona w procentach
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. padding-bottom:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table border="1"><tr><td>
<p style="padding-bottom:10px;">tekst</p>
</td></tr></table>

tekst

• Przykład 2:

<style type="text/css"><!--
table {padding-bottom:10px;}
.big {padding-bottom:30px;}
--></style>


Styl CSS: padding-left

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

padding-left

Styl definiuje wielkość lewego dopełnienia. Wartość domyślna - 0.

Wartości:

• auto - CSS1 / IE4, N4, O3.5
automatyczne dostosowanie
• odstęp wyrażony w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE4, N4, O3.5
wartość dodatnia lub ujemna
• procenty - CSS1 / IE4, N4, O3.5
wartość wyrażona w procentach
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. padding-left:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table border="1"><tr><td>
<p style="padding-left:10px;">tekst</p>
</td></tr></table>

tekst

• Przykład 2:

<style type="text/css"><!--
table {padding-left:10px;}
.big {padding-left:30px;}
--></style>


Styl CSS: padding-right

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

padding-right

Styl definiuje wielkość prawego dopełnienia. Wartość domyślna - 0.

Wartości:

• auto - CSS1 / IE4, N4, O3.5
automatyczne dostosowanie
• odstęp wyrażony w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE4, N4, O3.5
wartość dodatnia lub ujemna
• procenty - CSS1 / IE4, N4, O3.5
wartość wyrażona w procentach
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. padding-right:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table border="1"><tr><td>
<p style="padding-right:10px;">tekst</p>
</td></tr></table>

tekst

• Przykład 2:

<style type="text/css"><!--
table {padding-right:10px;}
.big {padding-right:30px;}
--></style>


Styl CSS: padding-top

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

padding-top

Styl definiuje wielkość górnego dopełnienia. Wartość domyślna - 0.

Wartości:

• auto - CSS1 / IE4, N4, O3.5
automatyczne dostosowanie
• odstęp wyrażony w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE4, N4, O3.5
wartość dodatnia lub ujemna
• procenty - CSS1 / IE4, N4, O3.5
wartość wyrażona w procentach
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. padding-top:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table border="1"><tr><td>
<p style="padding-top:10px;">tekst</p>
</td></tr></table>

tekst

• Przykład 2:

<style type="text/css"><!--
table {padding-top:10px;}
.big {padding-top:30px;}
--></style>


Styl CSS: page

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

page

Styl definiuje typ strony.

Wartości:

• auto (wartość domyślna) - CSS2
standardowa strona
• identyfikator - CSS2
identyfikator strony użyty przy @page
• inherit - CSS2
przejęcie wartości "rodzica", np. page:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
@page strona1 {size:20cm 10cm;page-break-after:left;}
body {page:strona1;}
--></style>


Styl CSS: page-break-after

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

page-break-after

Styl definiuje rozpoczęcie nowej strony na wydruku po tym elemencie.

Wartości:

• auto (wartość domyślna) - CSS2 / IE4, O3.5
rozpoczyna nową stronę po elemencie jeżeli to konieczne
• avoid - CSS2 / O3.5
rozpoczyna nową stronę po tym elemencie
• [left|right] - CSS2 / IE4, O3.5
stosowane przy drukowaniu obustronnym
• always - CSS2 / IE4, O3.5
wymusza nową stronę po tym elemencie
• inherit - CSS2
przejęcie wartości "rodzica", np. page-break-after:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p.zlam {page-break-after:always;}
--></style>


Styl CSS: page-break-before

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

page-break-before

Styl definiuje rozpoczęcie nowej strony na wydruku przed tym elementem.

Wartości:

• auto (wartość domyślna) - CSS2 / IE4, O3.5
rozpoczyna nową stronę przed elementem jeżeli to konieczne
• avoid - CSS2 / O3.5
rozpoczyna nową stronę przed tym elementem
• [left|right] - CSS2 / IE4, O3.5
stosowane przy drukowaniu obustronnym
• always - CSS2 / IE4, O3.5
wymusza nową stronę pred tym elementem
• inherit - CSS2
przejęcie wartości "rodzica", np. page-break-before:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p.zlam {page-break-before:always;}
--></style>


Styl CSS: page-break-inside

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

page-break-inside

Styl definiuje rozpoczęcie nowej strony na wydruku wewnątrz elementu nadrzędnego.

Wartości:

• auto (wartość domyślna) - CSS2 / O3.5
rozpoczyna nową stronę przed elementem jeżeli to konieczne
• avoid - CSS2 / O3.5
rozpoczyna nową stronę przed tym elementem
• inherit - CSS2
przejęcie wartości "rodzica", np. page-break-inside:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / O3.5
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p.zlam {page-break-inside:avoid;}
--></style>


Styl CSS: pause

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

pause

Styl definiuje przerwę w odtwarzaniu dźwięku. Za pomocą tego jednego polecenia można ustalić następujące właściwości pauzy: pause-before, pause-after. Jedno polecenie zamiast kilku jest po prostu wygodne w stosowaniu.

Wartości:

• pause-before - CSS2
pauza przed odtworzeniem elementu
• pause-after - CSS2
pauza po odtworzeniu elementu
• inherit - CSS2
przejęcie wartości "rodzica", np. pause:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p.stop {pause: 2s 3s;}
--></style>


Styl CSS: pause-after

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

pause-after

Styl definiuje przerwę w odtwarzaniu dźwięku przed odtworzeniem elementu.

Wartości:

• czas - CSS2
czas w sekundach (s) albo milisekundach (ms)
• procenty - CSS2
wartość wyrażona w procentach
• inherit - CSS2
przejęcie wartości "rodzica", np. pause-after:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p.stop {pause-after:2s;}
--></style>


Styl CSS: pause-before

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

pause-before

Styl definiuje przerwę w odtwarzaniu dźwięku po odtworzeniu elementu.

Wartości:

• czas - CSS2
czas w sekundach (s) albo milisekundach (ms)
• procenty - CSS2
wartość wyrażona w procentach
• inherit - CSS2
przejęcie wartości "rodzica", np. pause-before:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p.stop {pause-before:3s;}
--></style>


Styl CSS: pitch

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

pitch

Styl definiuje wysokość głosu.

Wartości:

• medium (wartość domyślna) - CSS2
standardowa wysokość głosu: dla kobiecego 210Hz, dla męskiego 120Hz
• częstotliwość - CSS2
dowolna częstotliwość w Hz lub kHz
• x-low - CSS2
bardzo niska częstotliwość
• low - CSS2
niska częstotliwość
• high - CSS2
wysoka częstotliwość
• x-high - CSS2
bardzo wysoka częstotliwość
• inherit - CSS2
przejęcie wartości "rodzica", np. pitch:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p {pitch:high;}
--></style>


Styl CSS: pitch-range

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

pitch-range

Styl definiuje modulację głosu. Wartość domyślna: 50.

Wartości:

• wartość - CSS2
zakres od 0 do 100.
• inherit - CSS2
przejęcie wartości "rodzica", np. pitch-range:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p {pitch-range:40;}
--></style>


Styl CSS: play-during

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

play-during

Styl definiuje dźwięk w tle odtwarzany podczas czytania tekstu.

Wartości:

• auto (wartość domyślna) - CSS2
dźwiek nadrzędnego elementu odgrywany jest raz.
• mix - CSS2
odgrywany jest dźwiek nadrzędnego elementu
• repeat - CSS2
odgrywany jest dźwiek nadrzędnego elementu wielokrotnie
• none - CSS2
dźwiek w tle nie jest odgrywany
• URL - CSS2
ścieżka do pliku odgrywanego w tle
• inherit - CSS2
przejęcie wartości "rodzica", np. play-during:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p {play-during:mix;}
--></style>


Styl CSS: position

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

position

Styl definiuje sposób określenia współrzędnych elementu.

Wartości:

• static (wartość domyślna) - CSS2 / N6, O4
pozycjonowanie tradycyjne
• relative - CSS2 / IE4, N4, O4
element zmienia pozycję, ale otaczające elementy zachowują się, jakby element nadal tam był
• absolute - CSS2 / IE4, N4, O4
pozycjonowanie względem bloku zewnętrznego, mają tu zastosowanie style left, right, top, i bottom
• fixed - CSS2 / N6.1, O4
pozycjonowanie stałe, nie zmienia się gdy strona jest przewijana
• inherit - CSS2
przejęcie wartości "rodzica", np. position:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE4, N4, O4
Przykładowe zastosowania:

• Przykład 1:

Powinien pokazać się napis widoczny nawet gdy strona jest przewijana.

<p style="color:blue; position:fixed; top:300px;
right:10px; bottom:10px; left:150px;">testowy napis</p>

testowy napis

• Przykład 2:

<style type="text/css"><!--
p {position:fixed; top:10px; right:10px; bottom:10px; left:10px;}
--></style>


Styl CSS: quotes

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

quotes

Styl definiuje znak cudzysłowu. Znaki cudzysłowu można podać jako wartości w Unikodzie (cudzysłów zwykły to 0022) lub w encjach (cudzysłów zwykły to &#34;). W wypadku użycia własnych cudzysłowów trzeba zdefiniować wartości open-quote (cudzysłów otwierający) i close-quote (cudzysłów zamykający).

Wartości:

• none CSS2 / N6, O4
brak
• otwierający zamykający - CSS2 / N6, O4
dwa znaki - początkowy i końcowy
• inherit - CSS2 / N6, O5
przejęcie wartości "rodzica", np. quotes:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / N6, O4
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
blockquote {quotes:"\201e" "\201d";}
blockquote:before {content:open-quote;}
blockquote:after {content:close-quote;}
--></style>


Styl CSS: richness

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

richness

Styl definiuje głębokość głosu. Wartość domyślna - 50.

Wartości:

• wartość - CSS2
liczba od 0 (ożywiony głos) do 100 (tłumiony głos)
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. richness:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p {richness:25;}
--></style>


Styl CSS: right

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

right

Styl definiuje odległość od prawej krawędzi elementu zewnętrznego.

Wartości:

• auto (wartość domyślna) - CSS2 / IE5, N6, O4
standardowa odległość
• długość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS2 / IE5, N6, O4
wartość dodatnia lub ujemna
• procenty - CSS2 / IE5, N6, O4
wartość wyrażona w procentach
• inherit - CSS2 / N6, O5
przejęcie wartości "rodzica", np. right:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE5, N6, O4
Przykładowe zastosowania:

• Przykład 1:

<p style="position:relative;right:-100px;">akapit odsunięty
o -100 pikseli od prawej strony</p>

akapit odsunięty o -100 pikseli od prawej strony

• Przykład 2:

<style type="text/css"><!--
p.prawy {position:relative;right:-50px;}
--></style>


Styl CSS: size

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

size

Styl definiuje wielkość i orientację strony dokumentu.

Wartości:

• auto (wartość domyślna) - CSS2
automatyczny wybór
• portrait - CSS2
strona tradycyjna, pionowa
• landscape - CSS2
strona widokowa, pozioma (obrócona o 90 stopni)
• wymiary - CSS2
długośc w poziomie i pionie, np. size:20cm 15cm;
• inherit - CSS2
przejęcie wartości "rodzica", np. size:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
body {size:landscape;}
--></style>


Styl CSS: speak

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

speak

Styl definiuje sposób czytania tekstu.

Wartości:

• normal (wartość domyślna) - CSS2
tekst jest czytany normalnie
• none - CSS2
tekst nie ma być czytany
• spell-out - CSS2
tekst ma być literowany
• inherit - CSS2
przejęcie wartości "rodzica", np. speak:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
acronym {speak:spell-out;}
p.nie {speak:none;}
--></style>


Styl CSS: speak-header

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

speak-header

Styl definiuje czytanie nagłówków tabel.

Wartości:

• once (wartość domyślna) - CSS2
nagłowek jest czytany raz
• always - CSS2
nagłowek jest czytany przed każdą z komórek
• inherit - CSS2
przejęcie wartości "rodzica", np. speak-header:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
table {speak-header:once;}
--></style>


Styl CSS: speak-numeral

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

speak-numeral

Styl definiuje czytanie liczb.

Wartości:

• continuous (wartość domyślna) - CSS2
liczby są czytane jako pełne wartości np "1476"
• digits - CSS2
liczby są czytane jak osobne cyfry, np. "1", "4", "7", "6"
• inherit - CSS2
przejęcie wartości "rodzica", np. speak-numeral:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p {speak-numeral:digits;}
--></style>


Styl CSS: speak-punctuation

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

speak-punctuation

Styl definiuje czytanie znaków przestankowych.

Wartości:

• none (wartość domyślna) - CSS2
znaki nie są czytane, zachowane są odstępy między wyrazami
• code - CSS2
znaki są czytane jak wyrazy
• inherit - CSS2
przejęcie wartości "rodzica", np. speak-punctuation:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p {speak-punctuation:none;}
--></style>


Styl CSS: speech-rate

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

speech-rate

Styl definiuje szybkość czytania tekstu.

Wartości:

• medium (wartość domyślna) - CSS2
wartość średnia (180 - 200 słów na minutę)
• x-slow - CSS2
bardzo wolno (80 słów na minutę)
• slow - CSS2
wolno (120 słów na minutę)
• fast - CSS2
szybko (300 słów na minutę)
• x-fast - CSS2
bardzo szybko (500 słów na minutę)
• slower - CSS2
wolniej o 40 słów na minutę
• faster - CSS2
szybciej o 40 słów na minutę
• wartość - CSS2
ilość słów na minutę
• inherit - CSS2
przejęcie wartości "rodzica", np. speech-rate:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p.wolno {speech-rate:90;}
p.szybko {speech-rate:x-fast;}
--></style>


Styl CSS: stress

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

stress

Styl definiuje wysokość akcentów w intonacji głosu. Wartość domyślna - 50.

Wartości:

• wartość - CSS2
liczba od 0 do 100
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. stress:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p {stress:25;}
--></style>


Styl CSS: table-layout

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

table-layout

Styl definiuje algorytm rozmieszczania komórek tabeli. Wartość fixed jest brzydsza ale szybsza, ponieważ najpierw tworzy kolumny, a potem dopasowuje je do szerokości ekranu. Auto najpierw czyta całą tabelę (gdy jest duża, chwilę to trwa), a potem wyświetla ją na ekranie odpowiednio dopasowaną do strony.

Wartości:

• auto (wartość domyślna) - CSS2 / IE5, N6
typowy algorytm dla wielu przeglądarek
• fixed - CSS2 / IE5, N6
stały algorytm
• inherit - CSS2
przejęcie wartości "rodzica", np. table-layout:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE5, N6
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
table {table-layout:fixed;}
--></style>


Styl CSS: text-align

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

text-align

Styl definiuje wyrównanie poziome tekstu.

Wartości:

• left (wartość domyślna) - CSS1 / IE3, N4, O3.5
wyrównanie do lewej strony
• center - CSS1 / IE3, N4, O3.5
wycentrowanie w poziomie
• right - CSS1 / IE3, N4, O3.5
wyrównanie do prawej strony
• justify - CSS1 / IE4, N4, O3.5
wyrównanie do prawej i do lewej strony
• string - CSS2 / N6, O6
wyrównanie względem znaku w kolumnach tabeli
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. text-align:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
• odpowiedniki HTML: CENTER, align
Przykładowe zastosowania:

• Przykład 1:

<p style="text-align:right;">
tekst wyrównany do prawej strony.
</p>

tekst wyrównany do prawej strony.

• Przykład 2:

<p style="text-align:center;">
tekst wypośrodkowany
</p>

tekst wypośrodkowany

• Przykład 3:

<p style="text-align:justify;">
Tekst wyjustowany lub jak ktoś woli - wyrównany do lewej i do prawej
strony. Potrzeba jednak nieco więcej tekstu aby pokazać jak wygląda
efekt końcowy. Po lewej i po prawej stronie tekst ładnie "przylega"
do krawędzi i nie jest poszarpany z prawej strony.
</p>

Tekst wyjustowany lub jak ktoś woli - wyrównany do lewej i do prawej strony. Potrzeba jednak nieco więcej tekstu aby pokazać jak wygląda efekt końcowy. Po lewej i po prawej stronie tekst ładnie "przylega" do krawędzi i nie jest poszarpany z prawej strony.

• Przykład 4:

<style type="text/css"><!--
p {text-align:justify;}
.centralnie {text-align:center;}
--></style>


Styl CSS: text-decoration

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

text-decoration

Styl definiuje wygląd tekstu. Można stosować kilka wartości jednocześnie.

Wartości:

• none (wartość domyślna) - CSS1 / IE3, N4, O3.5
nie zmienia wyglądu tekstu
• underline - CSS1 / IE3, N4, O3.5
tekst podkreślony
• overline - CSS1 / IE3, N4, O3.5
tekst nadkreślony (kreska nad tekstem)
• line-through - CSS1 / IE3, N4, O3.5
tekst przekreślony
• blink - CSS1 / IE4, O4
tekst migający
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. text-decoration:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
• odpowiedniki HTML: U, S, STRIKE
Przykładowe zastosowania:

• Przykład 1:

<p style="text-decoration:underline;">
podkreślony fragment tekstu
</p>

podkreślony fragment tekstu

• Przykład 2:

<p style="text-decoration:line-through;">
przekreślony fragment tekstu
</p>

przekreślony fragment tekstu

• Przykład 3:

<p style="text-decoration:overline;">
nadkreślony fragment tekstu
</p>

nadkreślony fragment tekstu

• Przykład 4:

<p style="text-decoration:blink;">
migający fragment tekstu
</p>

migający fragment tekstu

• Przykład 5:

<p style="text-decoration:blink overline underline line-through;">
wszystko w jednym fragmencie tekstu
</p>

wszystko w jednym fragmencie tekstu

• Przykład 6:

<style type="text/css"><!--
a:hover {text-decoration:overline;}
p.zly {text-decoration:line-through;}
.uwaga {text-decoration:blink;}
--></style>


Styl CSS: text-indent

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

text-indent

Styl definiuje wcięcie pierwszej linii elementu. Wartość domyślna - 0.

Wartości:

• długość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE3, N4, O3.5
wartość dodatnia lub ujemna
• procenty - CSS1 / IE3, N4, O3.5
wartość wyrażona w procentach
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. text-indent:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<p style="text-indent:20px;">
Wcięcie w przykładowym tekście o szerokości 20 pikseli.
<br>Można w ten sposób ładnie zaczynać akapity.
</p>

Wcięcie w przykładowym tekście o szerokości 20 pikseli.
Można w ten sposób ładnie zaczynać akapity.

• Przykład 3:

<p style="text-indent:-5%;">
Wcięcie w przykładowym tekście o szerokości -5 procent.
<br>Można w ten sposób stracić początek akapitu...
</p>

Wcięcie w przykładowym tekście o szerokości -5 procent.
Można w ten sposób stracić początek akapitu...

• Przykład 3:

<style type="text/css"><!--
p {text-indent:20px;}
h3 {text-indent:10px;}
.wciecie {text-indent:5%;}
--></style>


Styl CSS: text-shadow

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

text-shadow

Styl definiuje cień dla tekstu. Poszczególne cienie składają się z trzech wartości: koloru, odchylenia w poziomie, odchylenia w pionie i rozmycia - ostatni parametr można opuścić. Takie definicje oddziela się od siebie przecinkami.

Wartości:

• none (wartość domyślna) - CSS2
brak cienia
• parametry - CSS2
kolor x-odchylenie y-odchylenie rozmycie
• inherit - CSS2
przejęcie wartości "rodzica", np. text-shadow:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<p style="text-shadow:black 2px 2px, maroon -2px -2px;">
a oto tekst z cieniem</p>

a oto tekst z cieniem

• Przykład 2:

<style type="text/css"><!--
p.cien {text-shadow:black 2px 2px, maroon -2px -2px;}
--></style>


Styl CSS: text-transform

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

text-transform

Styl definiuje wielkość liter, bez względu na to, jakie są aktualnie używane. Należy uważać przy stosowaniu z polskimi znakami, ponieważ niektóre z nich są traktowane jako separator wyrazów i efekt może wyglądać mało ciekawie.

Wartości:

• none (wartość domyślna) - CSS1 / IE4, N4, O3.5
bez zmian
• capitalize - CSS1 / IE4, N4, O3.5
pierwszy znak wyrazu z dużej litery
• uppercase - CSS1 / IE4, N4, O3.5
duże litery
• lowercase - CSS1 / IE4, N4, O3.5
małe litery
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. text-transform:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, w którym:
<br><span style="text-transform:capitalize;">
- część wyrazów obejmuje wartość capitalize</span>.
<br><span style="text-transform:lowercase;">
- część WYRAZÓW OBEJMUJE wartość lowercase</span>.
<br><span style="text-transform:uppercase;">
- część wyrazów obejmuje wartość uppercase</span>.

Przykładowy tekst, w którym:
- część wyrazów obejmuje wartość capitalize.
- część WYRAZÓW OBEJMUJE wartość lowercase.
- część wyrazów obejmuje wartość uppercase.

• Przykład 2:

<style type="text/css"><!--
pre, strong {text-transform:uppercase;}
.male {text-transform:lowercase;}
--></style>


Styl CSS: top

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

top

Styl definiuje odległość od górnej krawędzi elementu zewnętrznego.

Wartości:

• auto (wartość domyślna) - CSS2 / IE4, N6, O4
standardowa odległość
• długość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS2 / IE4, N6, O4
wartość dodatnia lub ujemna
• procenty - CSS2 / IE4, N6, O4
wartość wyrażona w procentach
• inherit - CSS2 / N6, O5
przejęcie wartości "rodzica", np. top:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE4, N6, O4
Przykładowe zastosowania:

• Przykład 1:

<p style="position:relative;top:-10px;">Akapit odsunięty
o -10 pikseli od góry</p>

Akapit odsunięty o -10 pikseli od góry

• Przykład 2:

<style type="text/css"><!--
p.gorny {position:relative;top:20px;}
--></style>


Styl CSS: unicode-bidi

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

unicode-bidi

Styl definiuje kierunek wyświetlania tekstu dla elementów zagłębionych.

Wartości:

• normal (wartość domyślna) - CSS2 /IE5
bez zmian
• embed - CSS2 /IE5
elementy liniowe określa styl direction
• bidi-override - CSS2 /IE5
pierszeństwo ma kierunek ustalony przez styl direction
• inherit - CSS2
przejęcie wartości "rodzica", np. unicode-bidi:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE5
Przykładowe zastosowania:

• Przykład 1:

<p style="unicode-bidi:embed; direction:rtl;">Przykładowy tekst</p>

Przykładowy tekst

• Przykład 2:

<style type="text/css"><!--
p.embed {unicode-bidi:embed; direction:rtl;}
--></style>


Styl CSS: vertical-align

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

vertical-align

Styl definiuje wyrównanie w pionie.

Wartości:

• baseline (wartość domyślna) - CSS1 / IE4, N4, O3.5
wyrównanie do lini bazowej
• sub - CSS1 / IE4, N6, O3.5
indeks dolny
• super - CSS1 / IE4, N6, O3.5
indeks górny
• top - CSS1 / IE4, N4, O3.5
wyrównanie do górnej części elementów
• text-top - CSS1 / IE4, N4, O3.5
wyrównanie do górnej lini tekstu
• text-bottom - CSS1 / IE4, N4, O3.5
wyrównanie do dolnej lini tekstu
• middle - CSS1 / IE4, N4, O3.5
wyrównanie do środkowej części elementów
• bottom - CSS1 / IE4, N4, O3.5
wyrównanie do dolej części elementów
• procenty - CSS1 / IE6, N6, O3.5
wartość wyrażona w procentach - dodatnie przesuwają element w górę, ujemne w dół
• długość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS2 / IE6, N6, O3.5
wartość dodatnia (ponad linię bazową) lub ujemna (poniżej lini bazowej)
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. vertical-align:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
• odpowiedniki HTML: align, valign
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, gdzie
<span style="vertical-align:super;">
część wyrazów obejmuje </span> wartość "super"

Przykładowy tekst, gdzie część wyrazów obejmuje wartość "super"

• Przykład 2:

Przykładowy tekst, gdzie
<span style="vertical-align:sub;">
część wyrazów obejmuje </span> wartość "sub"

Przykładowy tekst, gdzie część wyrazów obejmuje wartość "sub"

• Przykład 3:

Przykładowy tekst, gdzie
<span style="vertical-align:text-top;">
część wyrazów obejmuje </span> wartość "text-top"

Przykładowy tekst, gdzie część wyrazów obejmuje wartość "text-top"

• Przykład 4:

Przykładowy tekst, gdzie
<span style="vertical-align:text-bottom;">
część wyrazów obejmuje </span> wartość "text-bottom"

Przykładowy tekst, gdzie część wyrazów obejmuje wartość "text-bottom"

• Przykład 5:

Przykładowy tekst, gdzie
Nieco tekstu <img src="../p/sm.gif" style="vertical-align:top;">
zawierającego grafikę <img src="../p/logo.gif">
aby lepiej przedstawić efekt wyrównywania.

Nieco tekstu [image] zawierającego grafikę [image] aby lepiej przedstawić efekt wyrównywania.

• Przykład 6:

Przykładowy tekst, gdzie
Nieco tekstu <img src="../p/sm.gif" style="vertical-align:bottom;">
zawierającego grafikę <img src="../p/logo.gif">
aby lepiej przedstawić efekt wyrównywania.

Nieco tekstu [image] zawierającego grafikę [image] aby lepiej przedstawić efekt wyrównywania.

• Przykład 7:

Przykładowy tekst, gdzie
Nieco tekstu <img src="../p/sm.gif" style="vertical-align:middle;">
zawierającego grafikę <img src="../p/logo.gif">
aby lepiej przedstawić efekt wyrównywania.

Nieco tekstu [image] zawierającego grafikę [image] aby lepiej przedstawić efekt wyrównywania.

• Przykład 8:

Tekstu z grafiką <img src="../p/sm.gif" style="vertical-align:-70%;">
obrazujący użycie procentów

Tekstu z grafiką [image] obrazujący użycie procentów

• Przykład 9:

Tekstu z grafiką <img src="../p/sm.gif" style="vertical-align:70%;">
obrazujący użycie procentów

Tekstu z grafiką [image] obrazujący użycie procentów

• Przykład 10:

<style type="text/css"><!--
img {vertical-align:bottom;}
sub {vertical-align:sub;}
p.top {vertical-align:top;}
p.gora {vertical-align:200%;}
--></style>


Styl CSS: visibility

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

visibility

Styl definiuje widoczność elementu.

Wartości:

• visible - CSS2 / IE4, N4.5, O4
element jest widoczny
• hidden - CSS2 / IE4, N4.5, O4
element nie jest widoczny
• collapse - CSS2 / N6
element nie jest widoczny
• inherit (wartość domyślna) - CSS2 / IE4, N4, O6
przejęcie wartości "rodzica", np. visibility:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE4, N4, O4
Przykładowe zastosowania:

• Przykład 1:

<p style="visibility:hidden;">tego akapitu nie zobaczysz!</p>

tego akapitu nie zobaczysz!

• Przykład 2:

<style type="text/css"><!--
p.ukryty {visibility:hidden;}
--></style>


Styl CSS: visited

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

visited

Styl, a w zasadzie pseudoklasa, która definiuje właściwości odwiedzonych odnośników (linków).

Wartości:

• brak
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
• odpowiednik HTML: vlink
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
a:visited {color:red;}
--></style>


Styl CSS: voice-family

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

voice-family

Styl definiuje rodzinę głosów lub głos konkretnej osoby.

Wartości:

• [male|female|child] - CSS2
głos mężczyzny, kobiety lub dziecka
• głos - CSS2
głos konkretnej osoby, np. voice-family: "Bob Dylan";
• inherit (wartość domyślna) - CSS2
przejęcie wartości "rodzica", np. voice-family:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p.bob {voice-family: "bob dylan", "dariusz majgier", male;}
--></style>


Styl CSS: volume

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

volume

Styl definiuje głośność (natężenie) dźwięku.

Wartości:

• medium (wartość domyślna) - CSS2
głośność średnia (normalna - 50)
• silent - CSS2
cisza
• x-soft - CSS2
bardzo cichy głos (0)
• soft - CSS2
cichy głos (25)
• loud - CSS2
głośny dźwięk (75)
• x-loud - CSS2
bardzo głośy dźwięk (100)
• wartość - CSS2
natężenie dźwięku od 0 (cisza) do 100 (bardzo głośno)
• procenty - CSS2
wartość wyrażona w procentach
• inherit - CSS2
przejęcie wartości "rodzica", np. volume:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p.cicho {volume:30;}
p.glosno {volume:x-loud;}
--></style>


Styl CSS: white-space

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

white-space

Styl definiuje sposób wyświetlania białych znaków (np. spacji).

Wartości:

• normal (wartość domyślna) - CSS1 / IE5.5, N4, O4
normalne wyświetlanie białych znaków
• pre - CSS1 / IE5.5, N4, O4
zachowane są białe znaki, podobnie jak w elemencie PRE w HTMLu
• nowrap - CSS1 / IE5.5, N4, O4
uniemożliwia łamanie białych znaków, podobnie jak w atrybucie nowrap w HTMLu
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. white-space:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE5.5, N4, O4
• odpowiedniki HTML: PRE, nowrap
Przykładowe zastosowania:

• Przykład 1:

przykładowy tekst, w którym
<br><span style="white-space:pre;">
zachowane         zostały    b   i   a   ł   e
      znaki (czyli odstępy)
</span>

przykładowy tekst, w którym
zachowane zostały b i a ł e znaki (czyli odstępy)

• Przykład 2:

<TABLE border="1"><TR>
<td style="white-space:nowrap;">ten tekst się nie przełamie
w tabeli (można się domyślić)</td>
<td>ten tekst się przełamie w tabeli
(też można się domyślić)</td>
</tr></table>

ten tekst się nie przełamie w tabeli (można się domyślić) ten tekst się przełamie w tabeli (też można się domyślić)

• Przykład 2:

<style type="text/css"><!--
tt {white-space:pre;}
td {white-space:nowrap;}
.pre {white-space:pre;}
--></style>


Styl CSS: widows

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

widows

Styl definiuje minimalną ilość wierszy w akapicie, które muszą być widoczne na początku strony. Domyślna wartość: 2.

Wartości:

• liczba - CSS2 / O3.5
liczba wierszy
• inherit - CSS2
przejęcie wartości "rodzica", np. widows:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / O3.5
Przykładowe zastosowania:

• Przykład 1:

<style type="text/css"><!--
p {widows:1;}
--></style>


Styl CSS: width

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

width

Styl definiuje szerokość elementu.

Wartości:

• auto (wartość domyślna) - CSS1 / IE4, N4, O3.5
szerokość dostosowana automatycznie
• długość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE4, N4, O3.5
wartość dodatnia
• procenty - CSS1 / IE4, N4, O3.5
wartość wyrażona w procentach
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. width:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE4, N4, O3.5
Przykładowe zastosowania:

• Przykład 1:

<table border="1" style="width:100px;">
<tr><td>
tabela o szerokości 100 pikseli
</td></tr></table>

tabela o szerokości 100 pikseli

• Przykład 2:

powiększony obrazek:
<img src="../p/sm.gif" style="width:50px;">
<br clear=all>

powiększony obrazek:

• Przykład 3:

<style type="text/css"><!--
table {width:80%;}
.big {width:10cm;}
--></style>


Styl CSS: word-spacing

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

word-spacing

Styl definiuje odstępy pomiędzy wyrazami.

Wartości:

• normal (wartość domyślna) - CSS1 / IE6, N6, O3.5
normalne odstępy
• długość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS1 / IE6, N6, O3.5
wartość dodatnia lub ujemna sumowana z aktualnym odstępem
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. word-spacing:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE6, N6, O3.5
Przykładowe zastosowania:

• Przykład 1:

przykładowy tekst, w którym
<br><span style="word-spacing:10px;">
część wyrazów obejmuje wartość 10 pikseli</span>,
<br><span style="word-spacing:0.5in;">
część wyrazów obejmuje wartość pół cala</span>,
<br><span style="word-spacing:-2px;">
a część wyrazów obejmuje wartość -2 piksele</span>,

przykładowy tekst, w którym
część wyrazów obejmuje wartość 10 pikseli,
część wyrazów obejmuje wartość pół cala,
a część wyrazów obejmuje wartość -2 piksele,

• Przykład 2:

<style type="text/css"><!--
p {word-spacing:5px;}
.tab {word-spacing:2cm;}
--></style>


Styl CSS: z-index

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

z-index

Styl definiuje kolejność ułożenia elementów na stosie. Elementy są prezroczyste, chyba, że zdefiniowane zostało tło.

Wartości:

• auto - CSS2 / IE4, N4, O4
automatyczna numeracja
• numer - CSS2 / IE4, N4, O4
numer warstwy
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. z-index:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS2 / IE4, N4, O4
Przykładowe zastosowania:

• Przykład 1:

<p style="z-index:1;">przykładowy tekst</p>

przykładowy tekst

• Przykład 2:

<style type="text/css"><!--
p.warstwa1 {z-index:1;}
--></style>


Artykuł z kursu HTML i CSS

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

Projektuj strony dostępne dla każdego

Odbiorcami naszych stron WWW są w większości osoby cieszące się dobrym zdrowiem, używające popularnych przeglądarek, nie mające kłopotów ze sprzętem komputerowym czy wyświetlaniem grafiki. Jednak o klasie autora stron WWW świadczy takie przygotowanie witryny, aby korzystać z niej mogli także pozostali użytkownicy Sieci.

Na co zwrócić uwagę? Po prostu wczuj się w rolę tych, którzy nie dysponują najnowszą technologią lub nie mają możliwości aby poprawnie odebrać zawartość stron internetowych. Wbrew pozorom takich osób jest sporo. Czasem mogą to być osoby ważne, mające wpływ na dalsze losy Twojej strony.

Przeglądarki

Przeciętny internauta wymieni cztery przeglądarki: Internet Explorer, Netscape Navigator, Mozilla i Opera. Pewnie część osób słyszała jeszcze o Lynxie - przeglądarce pracującej w trybie tekstowym, bez grafiki. Tymczasem na świecie wykorzystywanych jest ponad 50 różnych przeglądarek stron WWW, a także równie wiele przeglądarek stosowanych w tzw. kioskach multimedialnych czy budkach informacyjnych, spotykanych np. na dworcach kolejowych lub wystawach. Wiele z tych przeglądarek pracuje na różnych systemach operacyjnych, co powoduje kolejne ograniczenia, np. ilości stosowanych kolorów lub rozdzielczości ekranu.

Każda z przeglądarek jest nieco inna, zwykle nie obsługuje najnowszych standardów WWW, a części poleceń HTML nie wykonuje wcale. Jeżeli Twoja strona aż roi się od grafik, użytkownik przeglądarki tekstowej zobaczy pustkę i będzie rozczarowany. Gorzej, gdy nie będzie mógł z niej korzystać - nie zobaczy przecież menu i nie będzie wiedział co ma kliknąć aby przejść dalej. Wymogiem jest więc stosowanie atrybutu alt w grafikach istotnych dla użytkownika.

Innym problemem jest rozdzielczość ekranu i ilość kolorów. U Ciebie ekran jest duży i wszystko na nim możesz pomieścić, ale użytkownik palmtopa czy organizera będzie musiał stronę przewijać nie tylko w pionie, ale też w poziomie. Jeżeli wykorzystuje tylko 16 kolorów, to na niewiele zdadzą mu się Twoje kolorowe zdjęcia. Może też być sytuacja odwrotna - Ty masz niewielką rozdzielczość (np. 800x600), ale użytkownik dysponuje dużym ekranem i rozdzielczość ustawi sobie na 1280x1024. Nagle strona staje się dla niego mała, a teksty, które u Ciebie składały się z kilku wierszy zajmują tylko jeden wiersz... Całość może wyglądać nieczytelnie lub mało estetycznie.

Przed opublikowaniem strony warto przetestować jej wygląd przynajmniej w trzech najpopularniejszych przeglądarkach. Opera pozwala wyłączyć grafikę co dodatkowo pokaże, czy osoba bez grafiki będzie mogła w dalszym ciągu korzystać z serwisu. Utrudnieniem jest fakt, że Internet Explorer potrafi naprawiać drobne (ale czasem istotne) błędy w kodzie HTML, np. niezamknięte tabele. Więc strona która wygląda poprawnie, wcale nie musi być dobrze napisana i w innych przeglądarkach może wyglądać okropnie.

Osoby niepełnosprawne

Czemu osoby niewidome nie odwiedzają witryn wykonanych w technologii Flash? Bo nie mają szans zobaczyć grafik i tekstów zaszytych w kodzie animacji. Za to potrafią spędzić wiele godzin na prostych witrynach, gdzie nie ma wiele grafik, a cały tekst znajduje się na jednej stronie WWW. Bardzo wiele osób niewidomych poznałem dzięki Reporterowi - publikowane tam opowiadania i artykuły łatwo mogli odczytać za pomocą syntezatorów mowy. Nic im nie przeszkadzało w skopiowaniu artykułu i odłożeniu go na potem.

Rozmowa z osobą niewidomą, korzystającą z naszych stron WWW może być bardzo pouczająca. To trochę tak, jakbyśmy mieli korzystać z serwisu bez użycia monitora. Jeżeli to możliwe, nie utrudniaj korzystania osobom, które i tak mają z tym kłopoty. Ułatw im życie - docenią to z pewnością.

Wiele osób niedowidzi, a część ma kłopoty z rózróżnianiem kolorów. Czytanie z ekranu męczy wzrok i po kilku godzinach pracy przed monitorem łatwo o przeoczenie małych elementów lub pomyłkę w odcieniach barw poszczególnych wykresów. Staraj się aby strony były maksymalnie czytelne. Dobieraj tak kolory tła, aby nie męczyły wzroku po kilkunastu minutach czytania.

Spróbuj pochodzić przez chwilę po serwisie bez korzystania z myszy. Nie każdy ma sprawną rękę i mysz. Część osób korzysta z różnych manipulatorów - płytek dotykowych, małych gumowych pałeczek przypominających dżojstik, kulek, rysików. Sprawne ręce to cenna rzecz, ale wyobraź sobie, że z Twojego serwisu korzystają też osoby starsze, którym ręka drży i nie mogą łatwo wycelować myszką w mały, graficzny odnośnik lub link w postaci miniaturowego napisu. Dla nich korzystanie z serwisu będzie trudne, więc będą sfrustrowani, że nie mogą trafić w odnośnik. Będzie im przykro, że nikt o nich nie pomyślał.

Nie tylko monitor

Ekran monitora to nie jedyne urządzenie do prezentowania strony WWW. Można je przecież wydrukować, zsyntetyzować i przedstawić w postaci głosu elektronicznego lektora lub przenieść np. na specjalne czytniki alfabetu Braila, z których mogą korzystać niewidomi. Wiele osób kopiuje stronę do edytorów tekstu lub zapisuje ją na dysk lokalny. Dobra strona daje się przenieść do każdej z tych postaci. Czasem warto zadbać o kilka wersji swojej strony, np. większe opracowania można przygotować w postaci stron HTML i dokumentu PDF.

5 maja 1999 r. organizacja W3C opublikowała dokument "Web Content Accessibility Guidelines 1.0", który opisuje jak przygotować strony aby były one dostępne dla różnych urządzeń lub osób niepełnosprawnych. Warto go poznać, jeżeli chcesz tworzyć serwisy uniwersalne.

Zauważ, że już CSS2 przewiduje obsługę stron WWW na takich urządzeniach, jak: aural - syntezatory mowy, braille - dotykowe czytniki Braila, embossed - drukarki Braila, handheld - czytniki w urządzeniach naręcznych (np. palmtopy), print - drukarki, projection - projektory, screen - monitory komputerowe, tty - terminale, tv - telewizory.

Inne drobiazgi

Jest jeszcze wiele istotnych udogodnień, ważnych dla odbiorców naszych stron. Chociażby umożliwienie kontaktu z czytelnikiem bez potrzeby korzystania z programu pocztowego. Mały formularz z polem na tekst umożliwi wysłanie listu z dowolnego miejsca, chociażby z kawiarni internetowej. Ważne jest też podanie adresu e-mail, w formie łatwej do kopiowania i przenoszenia do edytora tekstu.

Warto stosować streszczenia i zapowiedzi tekstów. Aby oszczędzić czas osoby niewidomej można w dwóch zdaniach napisać o czym jest długi tekst. Podobnie w wypadku dokumentów nietypowych warto poinformować jaką mają objętość. Gdy ktoś korzysta z wolnego modemu i próbuje otworzyć dokument PDF mający 10 MB, a nie wie, jak długi jest ten dokument, może myśleć, że plik jest uszkodzony bo wciąż nie widać treści. Gdyby wiedział, że musi poświęcić wiele czasu na otwarcie go, być może nie podjąłby się pobierania pliku albo zrobiłby to w pracy, gdzie ma szybsze łącze.

Opisane przypadki nie są tylko rozważaniami teoretycznymi. Wiele serwisów, organizacji, dzienników i instytucji na całym świecie stara się sprostać opisanym przypadkom. Sam często korzystam z takich udogodnień, pomimo tego, że jestem sprawny i korzystam z nowoczesnego sprzętu.


Artykuł z kursu HTML i CSS

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

FTP, czyli jak dodać strony na serwer

Gdy tylko skończysz tworzyć stronę WWW na własnym komputerze oraz poprawisz wszystkie błędy i niedociągnięcia, stwierdzisz pewnie, że chcesz teraz pokazać ją całemu światu. I słusznie, bo taki jest cel tworzenia serwisów internetowych. Zanim jednak zaprezentujesz stronę innym, musisz podjąć kilka ważnych decyzji.

Wybór dostawcy usług internetowych

Strony musisz umieścić na serwerze WWW. Jest to komputer, który powinien gwarantować dostęp do stron przez całą dobę. Musi być szybki, wydajny, bezpieczny i niezawodny. Serwery WWW udostępniają dostawcy usług internetowych, nazywani również po polskawemu "prowajderami" lub ISP (Internet Service Provider).

Firmy ISP pobierają opłaty za utrzymywanie stron WWW. Nie martw się, jest też sporo firm i portali, które pozwalają "bezpłatnie" umieszczać strony w Internecie. Bezpłatne konta na strony udostępniają większe portale.

Darmowe usługi są bardzo popularne i często wykorzystują je młodzi webmasterzy lub osoby prywatne, które nie tworzą zaawansowanych witryn. Pomimo tego, że mają szereg wad, są często jedynym sposobem zaistnienia w Internecie. Co prawda nie płacisz wtedy za utrzymywanie stron, jednak zgadzasz się na emitowanie reklam innych firm na Twojej stronie. Często musisz też podać swój adres e-mail i informacje o sobie, które mogą być wykorzystywane do przysyłania listów reklamowych. Ponieważ jest to usługa darmowa, nie masz wsparcia technicznego i firma nie gwarantuje wysokiej jakości usług. Dla amatora wystarcza, ale gdy chcesz czegoś więcej warto zdecydować się na usługi wyspecjalizowanych firm, gdzie opłaty nie są wielkie, ale masz znacznie szerszy pakiet usług.

Dobrym rozwiązaniem jest też porozmawianie ze znajomymi. Mogą dysponować własnym serwerem i być może bezpłatnie zamieszczą Twoją stronę WWW. Jest to rozwiązanie lepsze niż darmowe usługi, bo wtedy nikt Cię o nic nie wypytuje i nie umieszcza reklam w Twoim serwisie. Jeżeli administrator jest uczynny, może też założyć Ci poddomenę, np. nazwa.jakisserwer.pl

Wybór programu FTP

Jeżeli już wybrałeś firmę lub serwis, w którym będziesz trzymać swoje strony WWW, trzeba je tam jakoś umieścić... Służą do tego programy nazywane potocznie "programy do FTP". Zwykle w swojej nazwie mają skrót FTP, który oznacza protokół przesyłania plików (File Transfer Protocol). Musisz więc wybrać program, którym będziesz się posługiwał przy przesyłaniu plików.

Bez względu na to, jaki program wybierzesz, wszystkie działają bardzo podobnie - różnią się tylko ilością dostępnych funkcji, wyglądem i wygodą działania. Program FTP pozwala przenosić dokumenty między własnym komputerem i serwerem zdalnym (np. dostacy usług internetowych). Umożliwia kasowanie, kopiowanie, podglądanie i sprawne zarządzanie nimi.

Zakładając konto u dostawcy usług lub w bezpłatnym serwisie otrzymasz trzy bardzo ważne informacje:

• nazwę serwera FTP, np. www.reporter.pl
• login (Twój identyfikator), np. czarek
• hasło dostępu, np. Xcr423hJ

Nazwa serwera FTP to często nazwa serwisu poprzedzona prefiksem "ftp", np. ftp.reporter.pl. Może być też identyczna z nazwą serwera WWW, czyli www.reporter.pl. Znajomość nazwy serwera FTP jest niezbędna, bo właśnie na nim będziesz trzymać strony. Login i hasło wymagane są do identyfikacji. Pamiętaj aby pod żadnym pozorem nie podawać hasła nikomu, nawet administratorom serwisu. Oni i tak mają dostęp do każdej części serwera. Hasło jest tylko i wyłącznie do Twojej wiadomości.

Poszukaj w programie FTP opcji konfiguracyjnych. Wpisz w odpowiednie pola nazwę serwera, login i hasło. Teraz możesz połączyć się z serwerem FTP dostawcy. Zwykle na serwerze FTP jest katalog o nazwie www, do którego możesz przesłać wszystkie strony WWW z dysku. Czasem nazwa katalogu może być inna, zapoznaj się zawsze z dokumentacją, jaką udostępniają poszczególni dostawcy usług.

W zależności od programu, kopiowanie plików z własnego dysku na serwer może polegać na przeciąganiu ich myszą lub zaznaczeniu i wciśnięciu odpowiedniego guzika z menu. Po chwili zostaną one przetransportowane na serwer i już każdy może je zobaczyć w Internecie. Jeżeli plików masz wiele i są one duże (np. muzyka, wideo), czas ich przesyłania może być długi.

Musisz się jeszcze dowiedzieć, pod jakim adresem będzie widoczna Twoja strona. Nazwy katalogów na serwerze FTP nie muszą odpowiadać ścieżkom w adresie strony. A więc fakt, że pliki kopiujesz do katalogu www, nie oznacza, że Twoja strona będzie widoczna pod adresem: http://jakisserwer.pl/www/.

Zasady przesyłania

Warto znać podstawowe zasady przesyłania stron. Często okazuje się, że pomimo skopiowania stron na serwer, nie można ich zobaczyć... Najważniejszą sprawą jest wielkość liter w nazwach plików. Pamiętaj, że ten sam plik pisany dużymi i małymi literami, to zupełnie inne dokumenty! Strona INDEX.HTML nie oznacza strony index.html - jeżeli to tylko możliwe staraj się używać zawsze małych liter, wtedy nie będziesz mieć problemu z nazwami. Dotyczy to nazw plików i odnośników w treści stron WWW. Niektóre programy umożliwiają automatyczną zamianę wszystkich znaków w nazwie plików na małe podczas ich przesyłania. Osobiście korzystam z tego udogodnienia i nie muszę pamiętać o problemie z wielkością znaków.

Pamiętaj o poprawnych ścieżkach i katalogach. Również zapisuj je z małych liter. Jeżeli nie widzisz obrazków, sprawdź czy pliki graficzne są pobierane z odpowiednich katalogów i czy odpowiadają one katalogom na serwerze FTP. Jeżeli używasz skryptów CGI, na serwerze FTP z pewnością będzie gdzieś katalog /cgi-bin/ umieść je w tym miejscu nadając im odpowiednie prawa (czytanie i wykonywanie dla wszystkich, zapisywanie tylko dla użytkownika).

Sprawdź ile zajmuje strona WWW. Zwykle każde konto ma określoną pojemność, np. 10 MB. To dużo dla zwykłego tekstu, ale jeżeli chcesz umieszczać pliki muzyczne i wideo, może okazać się, że po prostu zabraknie miejsca. Musisz poprosić o zwiększenie limitu lub dokupić większą przestrzeń w ramach swojego konta. Może też być tak, że objętość dotyczy konta WWW i poczty e-mail. Jeżeli masz dużo poczty, możesz nie mieć miejsca na strony WWW i również trzeba poprosić o zwiększenie limitu pojemności.

Czasem nawet najlepszym i najdroższym dostawcom usług zdarza się, że nie są dostępni w Sieci. Chwilowa awaria łącza lub wymiana serwera może powodować przerwy w działaniu. W razie kłopotów z połączeniem, sprawdź, czy administratorzy nie zapowiedzieli awarii. Upewnij się też, że jesteś prawidłowo połączony do Internetu.

Nie działa!!! Co robić???

Jeżeli wszystko dokładnie sprawdzisz i przeczytasz regulamin oraz instrukcje obsługi konta i programu FTP, po chwili będziesz się cieszyć własną stroną WWW dostępną w Internecie. Gdy w dalszym ciągu masz problemy z konfiguracją, zwróć się o pomoc do swojego administratora. Dobre serwisy komercyjne udostępniają bezpłatną pomoc nawet 24 godziny na dobę (jeżeli nie jest to bardzo pilny problem, nie dzwoń do administratora o pierwszej w nocy). Z serwisami darmowymi może być gorzej, bo bywa, że nikt nie odpisuje na maile. Wtedy popytaj innych użytkowników tego serwisu (jeżeli wszyscy jeszcze z niego nie zrezygnowali), a z pewnością pomogą.

W przypadku kłopotów nigdy nie pisz czegoś w stylu "Nie mogę uruchomić stron WWW. Co robić?". Bo odpowiedź (jeżeli w ogóle ktoś odpisze) będzie równie lakoniczna "Przeczytaj instrukcję obsługi". Zawsze gdy zgłaszasz problem opisz w miarę dokładnie jakiego programu używasz, w jakich okolicznościach występuje błąd, jakie są objawy i czy jesteś początkujący. Im dokładniej opiszesz problem, tym szybciej dostaniesz konkretną odpowiedź. Zaoszczędzisz więc czasu sobie i ludziom, którzy poświęcą czas aby Ci pomóc.


Artykuł z kursu HTML i CSS

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

Kody języków narodowych

Określenie języka może odbywać się na dwa sposoby: pierwszy definiuje język na podstawie dwuliterowych skrótów z normy ISO 639, np. lang="en" (język angielski), a druga uzupełnia język o dodatkowy dialekt kraju, których dwuliterowe skróty definiuje norma ISO 3166, np. lang="en-US" (angielski używany w Stanach Zjednoczonych), lang="fr-CA" (francuski stosowany w Kanadzie).

kody języków (za ISO 639)
aa - Afar
ab - Abkhazian
af - Afrikaans
am - Amharic
ar - Arabic
as - Assamese
ay - Aymara
az - Azerbaijani
ba - Bashkir
be - Byelorussian
bg - Bulgarian
bh - Bihari
bi - Bislama
bn - Bengali; Bangla
bo - Tibetan
br - Breton
ca - Catalan
co - Corsican
cs - Czech
cy - Welsh
da - Danish
de - German
dz - Bhutani
el - Greek
en - English
eo - Esperanto
es - Spanish
et - Estonian
eu - Basque
fa - Persian
fi - Finnish
fj - Fiji
fo - Faroese
fr - French
fy - Frisian
ga - Irish
gd - Scots Gaelic
gl - Galician
gn - Guarani
gu - Gujarati
ha - Hausa
he - Hebrew (poprzednio iw)
hi - Hindi
hr - Croatian
hu - Hungarian
hy - Armenian
ia - Interlingua
id - Indonesian (poprzednio in)
ie - Interlingue
ik - Inupiak
is - Icelandic
it - Italian
iu - Inuktitut
ja - Japanese
jw - Javanese
ka - Georgian
kk - Kazakh
kl - Greenlandic
km - Cambodian
kn - Kannada
ko - Korean
ks - Kashmiri
ku - Kurdish
ky - Kirghiz
la - Latin
ln - Lingala
lo - Laothian
lt - Lithuanian
lv - Latvian, Lettish
mg - Malagasy
mi - Maori
mk - Macedonian
ml - Malayalam
mn - Mongolian
mo - Moldavian
mr - Marathi
ms - Malay
mt - Maltese
my - Burmese
na - Nauru
ne - Nepali
nl - Dutch
no - Norwegian
oc - Occitan
om - (Afan) Oromo
or - Oriya
pa - Punjabi
pl - Polish
ps - Pashto, Pushto
pt - Portuguese
qu - Quechua
rm - Rhaeto-Romance
rn - Kirundi
ro - Romanian
ru - Russian
rw - Kinyarwanda
sa - Sanskrit
sd - Sindhi
sg - Sangho
sh - Serbo-Croatian
si - Sinhalese
sk - Slovak
sl - Slovenian
sm - Samoan
sn - Shona
so - Somali
sq - Albanian
sr - Serbian
ss - Siswati
st - Sesotho
su - Sundanese
sv - Swedish
sw - Swahili
ta - Tamil
te - Telugu
tg - Tajik
th - Thai
ti - Tigrinya
tk - Turkmen
tl - Tagalog
tn - Setswana
to - Tonga
tr - Turkish
ts - Tsonga
tt - Tatar
tw - Twi
ug - Uighur
uk - Ukrainian
ur - Urdu
uz - Uzbek
vi - Vietnamese
vo - Volapuk
wo - Wolof
xh - Xhosa
yi - Yiddish (poprzednio ji)
yo - Yoruba
za - Zhuang
zh - Chinese
zu - Zulu 		kody krajów (za ISO 3166)
AD - Andorra
AE - United Arab Emirates
AF - Afghanistan
AG - Antigua and Barbuda
AI - Anguilla
AL - Albania
AM - Armenia
AN - Netherlands Antilles
AO - Angola
AQ - Antarctica
AR - Argentina
AS - American Samoa
AT - Austria
AU - Australia
AW - Aruba
AZ - Azerbaijan
BA - Bosnia and Herzegovina
BB - Barbados
BD - Bangladesh
BE - Belgium
BF - Burkina Faso
BG - Bulgaria
BH - Bahrain
BI - Burundi
BJ - Benin
BM - Bermuda
BN - Brunei Darussalam
BO - Bolivia
BR - Brazil
BS - Bahamas
BT - Bhutan
BV - Bouvet Island
BW - Botswana
BY - Belarus
BZ - Belize
CA - Canada
CC - Cocos (Keeling) Islands
CF - Central African Republic
CG - Congo
CH - Switzerland
CI - Cote D'Ivoire (Ivory Coast)
CK - Cook Islands
CL - Chile
CM - Cameroon
CN - China
CO - Colombia
CR - Costa Rica
CS - Czechoslovakia
CU - Cuba
CV - Cape Verde
CX - Christmas Island
CY - Cyprus
CZ - Czech Republic
DE - Germany
DJ - Djibouti
DK - Denmark
DM - Dominica
DO - Dominican Republic
DZ - Algeria
EC - Ecuador
EE - Estonia
EG - Egypt
EH - Western Sahara
ER - Eritrea
ES - Spain
ET - Ethiopia
FI - Finland
FJ - Fiji
FK - Falkland Islands (Malvinas)
FM - Micronesia
FO - Faroe Islands
FR - France
FX - France, Metropolitan
GA - Gabon
GB - Great Britain (UK)
GD - Grenada
GE - Georgia
GF - French Guiana
GH - Ghana
GI - Gibraltar
GL - Greenland
GM - Gambia
GN - Guinea
GP - Guadeloupe
GQ - Equatorial Guinea
GR - Greece
GS - S. Georgia and S. Sandwich Isls.
GT - Guatemala
GU - Guam
GW - Guinea-Bissau
GY - Guyana
HK - Hong Kong
HM - Heard and McDonald Islands
HN - Honduras
HR - Croatia (Hrvatska)
HT - Haiti
HU - Hungary
ID - Indonesia
IE - Ireland
IL - Israel
IN - India
IO - British Indian Ocean Territory
IQ - Iraq
IR - Iran
IS - Iceland
IT - Italy
JM - Jamaica
JO - Jordan
JP - Japan
KE - Kenya
KG - Kyrgyzstan
KH - Cambodia
KI - Kiribati
KM - Comoros
KN - Saint Kitts and Nevis
KP - Korea (North)
KR - Korea (South)
KW - Kuwait
KY - Cayman Islands
KZ - Kazakhstan
LA - Laos
LB - Lebanon
LC - Saint Lucia
LI - Liechtenstein
LK - Sri Lanka
LR - Liberia
LS - Lesotho
LT - Lithuania
LU - Luxembourg
LV - Latvia
LY - Libya
MA - Morocco
MC - Monaco
MD - Moldova
MG - Madagascar
MH - Marshall Islands
MK - Macedonia
ML - Mali
MM - Myanmar
MN - Mongolia
MO - Macau
MP - Northern Mariana Islands
MQ - Martinique
MR - Mauritania
MS - Montserrat
MT - Malta
MU - Mauritius
MV - Maldives
MW - Malawi
MX - Mexico
MY - Malaysia
MZ - Mozambique
NA - Namibia
NC - New Caledonia
NE - Niger
NF - Norfolk Island
NG - Nigeria
NI - Nicaragua
NL - Netherlands
NO - Norway
NP - Nepal
NR - Nauru
NT - Neutral Zone
NU - Niue
NZ - New Zealand (Aotearoa)
OM - Oman
PA - Panama
PE - Peru
PF - French Polynesia
PG - Papua New Guinea
PH - Philippines
PK - Pakistan
PL - Poland
PM - St. Pierre and Miquelon
PN - Pitcairn
PR - Puerto Rico
PT - Portugal
PW - Palau
PY - Paraguay
QA - Qatar
RE - Reunion
RO - Romania
RU - Russian Federation
RW - Rwanda
SA - Saudi Arabia
SB - Solomon Islands
SC - Seychelles
SD - Sudan
SE - Sweden
SG - Singapore
SH - St. Helena
SI - Slovenia
SJ - Svalbard and Jan Mayen Islands
SK - Slovak Republic
SL - Sierra Leone
SM - San Marino
SN - Senegal
SO - Somalia
SR - Suriname
ST - Sao Tome and Principe
SU - USSR
SV - El Salvador
SY - Syria
SZ - Swaziland
TC - Turks and Caicos Islands
TD - Chad
TF - French Southern Territories
TG - Togo
TH - Thailand
TJ - Tajikistan
TK - Tokelau
TM - Turkmenistan
TN - Tunisia
TO - Tonga
TP - East Timor
TR - Turkey
TT - Trinidad and Tobago
TV - Tuvalu
TW - Taiwan
TZ - Tanzania
UA - Ukraine
UG - Uganda
UK - United Kingdom
UM - US Minor Outlying Islands
US - United States
UY - Uruguay
UZ - Uzbekistan
VA - Vatican City State (Holy See)
VC - Saint Vincent and the Grenadines
VE - Venezuela
VG - Virgin Islands (British)
VI - Virgin Islands (U.S.)
VN - Viet Nam
VU - Vanuatu
WF - Wallis and Futuna Islands
WS - Samoa
YE - Yemen
YT - Mayotte
YU - Yugoslavia
ZA - South Africa
ZM - Zambia
ZR - Zaire
ZW - Zimbabwe


Artykuł z kursu HTML i CSS

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

Kolory na stronie WWW

Każda przeglądarka stron WWW pozwala uzyskać na ekranie jednocześnie 256 różnych kolorów, jednak tylko 216 z nich poprawnie wyświetlają wszystkie przeglądarki internetowe. Używając "bezpiecznego" zestawu barw masz pewność, że kolor zostanie pokazany tak samo w każdym systemie operacyjnym (paleta 256 kolorów w systemie Windows nie odpowiada tym samym kolorom systemowym w komputerze Macintosh). Jeżeli użyjesz większej ilości kolorów, mogą one zostać zamienione do podobnych kolorów z podstawowego zestawu barw, czyli wspomnianych, bezpiecznych 216 kolorów.

Dowolny kolor składa się z trzech barw podstawowych: czerwonej, zielonej i niebieskiej (red, green, blue - czyli RGB). Do dyspozycji mamy 256 odcieni każdego z tych kolorów i poprzez ich mieszanie otrzymujemy dowolny inny kolor.

Kolor RGB zapisywany jest w postaci #RRGGBB, gdzie RR to zapisany szesnastkowo (heksadecymalnie) kolor czerwony (red), GG to kolor zielony (green), a BB to kolor niebieski (blue). Oznacza to, że każdy kolor może przyjmować wartości od 00 do FF. W stylach CSS pojawia się jeszcze zapis dziesiętny koloru RGB w postaci rgb(RR,GG,BB), gdzie każda składowa może przyjmować wartości od 0 do 255. Bezpieczne kolory operują wielokrotnością liczby 33 w systemie szesnastkowym (00, 33, 66, 99, CC, FF) i 51 w systemie dziesiętnym (0, 51, 102, 153, 204, 255).

Można też używać nazw kolorów. Podstawowe 16 określeń pochodzi od nazw kolorów, które można było uzyskać na komputerach z kartą graficzną VGA (komputery pokazywały kiedyś tylko 16 kolorów): white (kolor biały - #FFFFFF), black (kolor czarny - #000000), green, blue, fuchsia, yellow, lime, olive, purple, teal, silver, red, navy, maroon, gray, aqua.

Ostatecznie zwiększono jednak liczbę dostępnych nazw kolorów do 140. Tabela na końcu tekstu prezentuje wszystkie dostępne nazwy. Należy jednak pamiętać, że nie w pełni odpowiadają one bezpiecznej palecie, np. zapis szesnastkowy koloru maroon to #800000 (nie ma takiego w tablicy bezpiecznych kolorów!).

Można nie zwracać uwagi na różnicę jeśli umieszczamy tylko zielony napis lub zieloną tabelę. Wtedy nawet lepiej jest stosować nazwy, bo nie trzeba zastanawiać się, jak zapisać kolor zielony za pomocą #RRGGBB. Informacja ta zaczyna nabierać znaczenia wyłącznie przy łączeniu bitmapy (GIF, JPEG) z kolorami na stronie WWW wprowadzonymi np. takimi instrukcjami:

color:#00ff66; - ustala kolor czcionki za pomocą stylu
background-color:#00ff66; - ustala kolor tła za pomocą stylu
<font color="#33ff22"> - ustala kolor czcionki
<tr bgcolor="blue"> - ustawia kolor rzędu komórek w tabeli
<td bgcolor="#cc9966"> - ustawia kolor komórki w tabeli
<body bgcolor="white"> - ustawia kolor tła strony

Grupa elementów wykorzystujących kolory:

BASEFONT, BODY, FONT, TABLE, TD, TH, TR
Grupa atrybutów wykorzystujących kolory:
alink, bgcolor, color, link, text, vlink

Grupa stylów wykorzystujących kolory:

active, background-color, border-bottom-color, border-color, border-left-color, border-right-color, border-top-color, color, link, outline, visited

Obecnie nie zaleca się stosowania atrybutów HTML. Powinno się je zamieniać na style CSS. W stylach, w miejsce #RRGGBB można wpisać kolor w postaci szesnastkowej (np. #CCFFCC), nazwy angielskiej (np. maroon) lub wartości RGB - rgb(20,20,99). Oto odpowiedniki:

• alink - A:active {color:#RRGGBB;}
• bgcolor - background-color:#RRGGBB;
• color - color:#RRGGBB;
• link - A:link {color:#RRGGBB;}
• text - color:#RRGGBB;
• vlink - A:visited {color:#RRGGBB;}

Projektując wygląd strony, warto zwrócić uwagę na dobór kolorów. W Internecie dostępne są serwisy wspomagające dobieranie kolorów i projektowanie bezpiecznych zestawów barwnych dla tabel, linków, tekstu czy tła. Takie narzędzie znajdziesz w serwisie Web.Reporter.pl.

zestawienie 216 "bezpiecznych" kolorów (HEX/RGB)
#FF0000 255 0 0 | #FF0033 255 0 51 | #FF0066 255 0 102 | #FF0099 255 0 153 | #FF00CC 255 0 204 | #FF00FF 255 0 155
#FF3300 255 51 0 | #FF3333 255 51 51 | #FF3366 255 51 102 | #FF3399 255 51 153 | #FF33CC 255 51 204 | #FF33FF 255 51 255
#FF6600 255 102 0 | #FF6633 255 102 51 | #FF6666 255 102 102 | #FF6699 255 102 153 | #FF66CC 255 102 204 | #FF66FF 255 102 255
#FF9900 255 153 0 | #FF9933 255 153 51 | #FF9966 255 153 102 | #FF9999 255 153 153 | #FF99CC 255 153 204 | #FF99FF 255 153 255
#FFCC00 255 204 0 | #FFCC33 255 204 51 | #FFCC66 255 204 102 | #FFCC99 255 204 153 | #FFCCCC 255 204 204 | #FFCCFF 255 204 255
#FFFF00 255 255 0 | #FFFF33 255 255 51 | #FFFF66 255 255 102 | #FFFF99 255 255 153 | #FFFFCC 255 255 204 | #FFFFFF 255 255 255
#CC0000 204 0 0 | #CC0033 204 0 51 | #CC0066 204 0 102 | #CC0099 204 0 153 | #CC00CC 204 0 204 | #CC00FF 204 0 255
#CC3300 204 51 0 | #CC3333 204 51 51 | #CC3366 204 51 102 | #CC3399 204 51 153 | #CC33CC 204 51 204 | #CC33FF 204 51 255
#CC6600 204 102 0 | #CC6633 204 102 51 | #CC6666 204 102 102 | #CC6699 204 102 153 | #CC66CC 204 102 204 | #CC66FF 204 102 255
#CC9900 204 153 0 | #CC9933 204 153 0 | #CC9966 204 153 102 | #CC9999 204 153 153 | #CC99CC 204 153 204 | #CC99FF 204 153 255
#CCCC00 204 204 0 | #CCCC33 204 204 51 | #CCCC66 204 204 102 | #CCCC99 204 204 153 | #CCCCCC 204 204 204 | #CCCCFF 204 204 255
#CCFF00 204 255 0 | #CCFF33 204 255 51 | #CCFF66 204 255 102 | #CCFF99 204 255 153 | #CCFFCC 204 255 204 | #CCFFFF 204 255 255
#990000 153 0 0 | #990033 153 0 51 | #990066 153 0 102 | #990099 153 0 153 | #9900CC 153 0 204 | #9900FF 153 0 255
#993300 153 51 0 | #993333 153 51 51 | #993366 153 51 102 | #993399 153 51 153 | #9933CC 153 51 204 | #9933FF 153 51 255
#996600 153 102 0 | #996633 153 102 51 | #996666 153 102 102 | #996699 153 102 153 | #9966CC 153 102 204 | #9966FF 153 102 255
#999900 153 153 0 | #999933 153 153 51 | #999966 153 153 102 | #999999 153 153 153 | #9999CC 153 153 204 | #9999FF 153 153 255
#99CC00 153 204 0 | #99CC33 153 204 51 | #99CC66 153 204 102 | #99CC99 153 204 153 | #99CCCC 153 204 204 | #99CCFF 153 204 255
#99FF00 153 255 0 | #99FF33 153 255 51 | #99FF66 153 255 102 | #99FF99 153 255 153 | #99FFCC 153 255 204 | #99FFFF 153 255 255
#660000 102 0 0 | #660033 102 0 51 | #660066 102 0 102 | #660099 102 0 153 | #6600CC 102 0 204 | #6600FF 102 0 255
#663300 102 51 0 | #663333 102 51 51 | #663366 102 51 102 | #663399 102 51 153 | #6633CC 102 51 204 | #6633FF 102 51 255
#666600 102 102 0 | #666633 102 102 51 | #666666 102 102 102 | #666699 102 102 153 | #6666CC 102 102 204 | #6666FF 102 102 255
#669900 102 153 0 | #669933 102 153 51 | #669966 102 153 102 | #669999 102 153 153 | #6699CC 102 153 204 | #6699FF 102 153 255
#66CC00 102 204 0 | #66CC33 102 204 51 | #66CC66 102 204 102 | #66CC99 102 204 153 | #66CCCC 102 204 204 | #66CCFF 102 204 255
#66FF00 102 255 0 | #66FF33 102 255 51 | #66FF66 102 255 102 | #66FF99 102 255 153 | #66FFCC 102 255 204 | #66FFFF 102 255 255
#330000 51 0 0 | #330033 51 0 51 | #330066 51 0 102 | #330099 51 0 153 | #3300CC 51 0 204 | #3300FF 51 0 255
#333300 51 51 0 | #333333 51 51 51 | #333366 51 51 102 | #333399 51 51 153 | #3333CC 51 51 204 | #3333FF 51 51 255
#336600 51 102 0 | #336633 51 102 51 | #336666 51 102 102 | #336699 51 102 153 | #3366CC 51 102 204 | #3366FF 51 102 255
#339900 51 153 0 | #339933 51 153 51 | #339966 51 153 102 | #339999 51 153 153 | #3399CC 51 153 204 | #3399FF 51 153 255
#33CC00 51 204 0 | #33CC33 51 204 51 | #33CC66 51 204 102 | #33CC99 51 204 153 | #33CCCC 51 204 204 | #33CCFF 51 204 255
#33FF00 51 255 0 | #33FF33 51 255 51 | #33FF66 51 255 102 | #33FF99 51 255 153 | #33FFCC 51 255 204 | #33FFFF 51 255 255
#000000 0 0 0 | #000033 0 0 51 | #000066 0 0 102 | #000099 0 0 153 | #0000CC 0 0 204 | #0000FF 0 0 255
#003300 0 51 0 | #003333 0 51 51 | #003366 0 51 102 | #003399 0 51 153 | #0033CC 0 51 204 | #0033FF 0 51 255
#006600 0 102 0 | #006633 0 102 51 | #006666 0 102 102 | #006699 0 102 153 | #0066CC 0 102 204 | #0066FF 0 102 255
#009900 0 153 0 | #009933 0 153 51 | #009966 0 153 102 | #009999 0 153 153 | #0099CC 0 153 204 | #0099FF 0 153 255
#00CC00 0 204 0 | #00CC33 0 204 51 | #00CC66 0 204 102 | #00CC99 0 204 153 | #00CCCC 0 204 204 | #00CCFF 0 204 255
#00FF00 0 255 0 | #00FF33 0 255 51 | #00FF66 0 255 102 | #00FF99 0 255 153 | #00FFCC 0 255 204 | #00FFFF 0 255 255

zestawienie nazw kolorów (nie są to kolory "bezpieczne"):
(pogrubionych zostało 16 podstawowych nazw)
nazwa koloru | HEX | RGB | kolor
AliceBlue | #F0F8FF | rgb(240,248,255) |
AntiqueWhite | #FAEBD7 | rgb(250,235,215) |
Aqua | #00FFFF | rgb(0,255,255) |
Aquamarine | #7FFFD4 | rgb(127,255,212) |
Azure | #F0FFFF | rgb(240,255,255) |
Beige | #F5F5DC | rgb(245,245,220) |
Bisque | #FFE4C4 | rgb(255,228,196) |
Black | #000000 | rgb(0,0,0) |
BlanchedAlmond | #FFEBCD | rgb(255,235,205) |
Blue | #0000FF | rgb(0,0,255) |
BlueViolet | #8A2BE2 | rgb(138,43,226) |
Brown | #A52A2A | rgb(165,42,42) |
Burlywood | #DEB887 | rgb(222,184,135) |
CadetBlue | #5F9EA0 | rgb(95,158,160) |
Chartreuse | #7FFF00 | rgb(127,255,0) |
Chocolate | #D2691E | rgb(210,105,30) |
Coral | #FF7F50 | rgb(255,127,80) |
CornflowerBlue | #6495ED | rgb(100,149,237) |
Cornsilk | #FFF8DC | rgb(255,248,220) |
Crimson | #DC143C | rgb(220,20,60) |
Cyan | #00FFFF | rgb(0,255,255) |
DarkBlue | #00008B | rgb(0,0,139) |
DarkCyan | #008B8B | rgb(0,139,139) |
DarkGoldenrod | #B8860B | rgb(184,134,11) |
DarkGray | #A9A9A9 | rgb(169,169,169) |
DarkGreen | #006400 | rgb(0,100,0) |
DarkKhaki | #BDB76B | rgb(189,183,107) |
DarkMagenta | #8B008B | rgb(139,0,139) |
DarkOliveGreen | #556B2F | rgb(85,107,47) |
DarkOrange | #FF8C00 | rgb(255,140,0) |
DarkOrchid | #9932CC | rgb(153,50,204) |
DarkRed | #8B0000 | rgb(139,0,0) |
DarkSalmon | #E9967A | rgb(233,150,122) |
DarkSeaGreen | #8FBC8F | rgb(143,188,143) |
DarkSlateBlue | #483D8B | rgb(72,61,139) |
DarkSlateGray | #2F4F4F | rgb(47,79,79) |
DarkTurquoise | #00CED1 | rgb(0,206,209) |
DarkViolet | #9400D3 | rgb(148,0,211) |
DeepPink | #FF1493 | rgb(255,20,147) |
DeepSkyBlue | #00BFBF | rgb(0,191,191) |
DimGrey | #696969 | rgb(105,105,105) |
DodgerBlue | #1E90FF | rgb(30,144,255) |
Firebrick | #B22222 | rgb(178,34,34) |
FloralWhite | #FFFAF0 | rgb(255,250,240) |
ForestGreen | #228B22 | rgb(34,139,34) |
Fuchsia | #FF00FF | rgb(255,0,255) |
Gainsboro | #DCDCDC | rgb(220,220,220) |
GhostWhite | #F8F8FF | rgb(248,248,255) |
Gold | #FFD700 | rgb(255,215,0) |
Goldenrod | #DAA520 | rgb(218,165,32) |
Green | #008000 | rgb(0,128,0) |
GreenYellow | #ADFF2F | rgb(173,255,47) |
Gray | #808080 | rgb(128,128,128) |
Honeydew | #F0FFF0 | rgb(240,255,240) |
HotPink | #FF69B4 | rgb(255,105,180) |
IndianRed | #CD5C5C | rgb(205,92,92) |
Indigo | #4B0082 | rgb(75,0,130) |
Ivory | #FFFFF0 | rgb(255,255,240) |
Khaki | #F0E68C | rgb(240,230,140) |
Lavender | #E6E6FA | rgb(230,230,250) |
LavenderBlush | #FFF0F5 | rgb(255,240,245) |
LawnGreen | #7CFC00 | rgb(124,252,0) |
LemonChiffon | #FFFACD | rgb(255,250,205) |
LightBlue | #ADD8E6 | rgb(173,216,230) |
LightCoral | #F08080 | rgb(240,128,128) |
LightCyan | #E0FFFF | rgb(224,255,255) |
LightGoldenrodYellow | #FAFAD2 | rgb(250,250,210) |
LightGreen | #90EE90 | rgb(144,238,144) |
LightGray | #D3D3D3 | rgb(211,211,211) |
LightPink | #FFB6C1 | rgb(255,182,193) |
LightSalmon | #FFA07A | rgb(255,160,122) |
LightSeaGreen | #20B2AA | rgb(32,178,170) |
LightSkyBlue | #87CEFA | rgb(135,206,250) |
LightSlateGray | #778899 | rgb(119,136,153) |
LightSteelBlue | #B0C4DE | rgb(176,196,222) |
LightYellow | #FFFFE0 | rgb(255,255,224) |
Lime | #00FF00 | rgb(0,255,0) |
LimeGreen | #32CD32 | rgb(50,205,50) |
Linen | #FAF0E6 | rgb(250,240,230) |
Magenta | #FF00FF | rgb(255,0,255) |
Maroon | #800000 | rgb(128,0,0) |
MediumAquamarine | #66CDAA | rgb(102,205,170) |
MediumBlue | #0000CD | rgb(0,0,205) |
MediumOrchid | #BA55D3 | rgb(186,85,211) |
MediumPurple | #9370DB | rgb(147,112,219) |
MediumSeaGreen | #3CB371 | rgb(60,179,113) |
MediumSlateBlue | #7B68EE | rgb(123,104,238) |
MediumSpringGreen | #00FA9A | rgb(0,250,154) |
MediumTurquoise | #48D1CC | rgb(72,209,204) |
MediumVioletRed | #C71585 | rgb(199,21,133) |
MidnightBlue | #191970 | rgb(25,25,112) |
MintCream | #F5FFFA | rgb(245,255,250) |
MistyRose | #FFE4E1 | rgb(255,228,225) |
Moccasin | #FFE4B5 | rgb(255,228,181) |
NavajoWhite | #FFDEAD | rgb(255,222,173) |
Navy | #000080 | rgb(0,0,128) |
OldLace | #FDF5E6 | rgb(253,245,230) |
Olive | #808000 | rgb(128,128,0) |
OliveDrab | #6B8E23 | rgb(107,142,35) |
Orange | #FFA500 | rgb(255,165,0) |
OrangeRed | #FF4500 | rgb(255,69,0) |
Orchid | #DA70D6 | rgb(218,112,214) |
PaleGoldenrod | #EEE8AA | rgb(238,232,170) |
PaleGreen | #98FB98 | rgb(152,251,152) |
PaleTurquoise | #AFEEEE | rgb(175,238,238) |
PaleVioletRed | #DB7093 | rgb(219,112,147) |
PapayaWhip | #FFEFD5 | rgb(255,239,213) |
PeachPuff | #FFDAB9 | rgb(255,218,185) |
Peru | #CD853F | rgb(205,133,63) |
Pink | #FFC0CB | rgb(255,192,203) |
Plum | #DDA0DD | rgb(221,160,221) |
PowderBlue | #B0E0E6 | rgb(176,224,230) |
Purple | #800080 | rgb(128,0,128) |
Red | #FF0000 | rgb(255,0,0) |
RosyBrown | #BC8F8F | rgb(188,143,143) |
RoyalBlue | #4169E1 | rgb(65,105,225) |
SaddleBrown | #8B4513 | rgb(139,69,19) |
Salmon | #FA8072 | rgb(250,128,114) |
SandyBrown | #F4A460 | rgb(244,164,96) |
SeaGreen | #2E8B57 | rgb(46,139,87) |
Seashell | #FFF5EE | rgb(255,245,238) |
Sienna | #A0522D | rgb(160,82,45) |
Silver | #C0C0C0 | rgb(192,192,192) |
SkyBlue | #87CEEB | rgb(135,206,235) |
SlateBlue | #6A5ACD | rgb(106,90,205) |
SlateGrey | #708090 | rgb(112,128,144) |
Snow | #FFFAFA | rgb(255,250,250) |
SpringGreen | #00FF7F | rgb(0,255,127) |
SteelBlue | #4682B4 | rgb(70,130,180) |
Tan | #D2B48C | rgb(210,180,140) |
Teal | #008080 | rgb(0,128,128) |
Thistle | #D8BFD8 | rgb(216,191,216) |
Tomato | #FF6347 | rgb(255,99,71) |
Turquoise | #40E0D0 | rgb(64,224,208) |
Violet | #EE82EE | rgb(238,130,238) |
Wheat | #F5DEB3 | rgb(245,222,179) |
White | #FFFFFF | rgb(255,255,255) |
WhiteSmoke | #F5F5F5 | rgb(245,245,245) |
Yellow | #FFFF00 | rgb(255,255,0) |
YellowGreen | #9ACD32 | rgb(154,205,50) |


Artykuł z kursu HTML i CSS

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

Najpopularniejsze typy MIME

MIME (Multipurpose Internet Mail Extensions) określa format danych, które przesyłane są drogą elektroniczną. Standard MIME obejmuje następujące typy danych: application (programy), audio (dźwięki), image (grafiki), message (komunikaty), model (modele), multipart (multi-dane), text (teksty), video (filmy).

MIME - typ/podtyp | rozszerzenia pliku
application/access | mdf
application/excel | xls
application/font-tdpfr | pfr
application/futuresplash | spl
application/hep | hep
application/lotus-123 | wks
application/mac-binhex40 | hqx
application/mac-compactpro | cpt
application/mspowerpoint | ppt
application/msword | doc
application/octet-stream | bin dms lha lzh exe class
application/oda | oda
application/pagemaker | pm5 pt5 pm
application/pdf | pdf
application/postscript | ai eps ps
application/powerpoint | ppt
application/rtf | rtf
application/smil | smi smil sml
application/toolbook | tbk
application/wordperfect | wp
application/wordperfect5.1 | wp5
application/wordperfect6.1 | wp6
application/wordperfectd | wpd
application/x-bcpio | bcpio
application/x-cdlink | vcd
application/x-cpio | cpio
application/x-csh | csh
application/x-director | dcr dir dxr
application/x-dvi | dvi
application/x-gtar | gtar
application/x-hdf | hdf
application/x-ica | ica
application/x-javascript | js
application/x-koan | skp skd skt skm
application/x-latex | latex
application/x-mif | mif
application/x-netcdf | nc cdf
application/x-sh | sh
application/x-shar | shar
application/x-shockwave-flash | swf
application/x-spss | sav spp sbs sps spo
application/x-stuffit | sit
application/x-sv4cpio | sv4cpio
application/x-sv4crc | sv4crc
application/x-tar | tar
application/x-tcl | tcl
application/x-tex | tex
application/x-texinfo | texinfo texi
application/x-troff-man | man
application/x-troff-me | me
application/x-troff-ms | ms
application/x-troff | t tr roff
application/x-ustar | ustar
application/x-wais-source | src
application/zip | zip
audio/basic | au snd
audio/midi | mid midi kar
audio/mpeg | mp2 mpa mpg mpga mp3
audio/mpeg3 | mp3
audio/x-aiff | aif aiff aifc
audio/x-midi | mid
audio/x-mpeg | mp2
audio/x-mpegurl | mp3
audio/x-pn-realaudio-plugin | rpm
audio/x-pn-realaudio | ra ram rm rpm
audio/x-realaudio | ra
audio/x-wav | wav
image/gif | gif
image/ief | ief
image/jpeg | jpeg jpg jpe
image/png | png
image/tiff | tiff tif
image/x-cmu-raster | ras
image/x-portable-anymap | pnm
image/x-portable-bitmap | pbm
image/x-portable-graymap | pgm
image/x-portable-pixmap | ppm
image/x-rgb | rgb
image/x-xbitmap | xbm
image/x-xpixmap | xpm
image/x-xwindowdump | xwd
model/iges | igs iges
model/mesh | msh mesh silo
model/vrml | wrl vrml
text/css | css
text/html | html htm
text/plain | txt
text/richtext | rtx
text/tab-separated-values | tsv
text/x-setext | etx
text/x-sgml | sgml sgm
text/xml | xml dtd
video/mpeg | mpeg mpg mpe
video/quicktime | qt mov
video/x-ms-asf | asf asx
video/x-msvideo | avi
video/x-sgi-movie | movie


Artykuł z kursu HTML i CSS

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

pobierz najnowszą wersję kursu

najnowsza wersja kursu online dostępna jest na stronie: http://web.reporter.pl/html/

Wybierz odpowiadające Ci archiwum z najnowszą wersją kursu:
• html.zip (ok. 1 MB) - spakowane strony HTML (każdy system)
• html.exe (ok 200 KB) - samorozpakowujące się strony HTML (Windows)
• html.chm (ok. 500 KB) - plik pomocy w formacie HTML Help (Windows)

warunki dystrybucji kursu na stronach WWW i płytach CD

Do dalszej dystrybucji lub publikacji można wykorzystywać wyłącznie archiwa w wersjach "offline", czyli kurs umieszczony w pliku: html.zip, html.exe lub html.chm

Każdy (osoba prywatna lub firma) może nieodpłatnie umieszczać oraz udostępniać na swojej stronie (prywatnej lub komercyjnej) zawartość kursu z poszanowaniem następujących zasad:

  • Zabronione jest jakiekolwiek modyfikowanie zawartości kursu bez wiedzy i zgody autora, niedopuszczalne są nawet drobne zmiany. Osoby zainteresowane dostosowaniem kursu do indywidualnego wyglądu lub wersji PHP powinny skontaktować się z autorem aby taką zgodę otrzymać.
  • Publikować i udostępniać można jedynie pełne i oryginalne wersje kursu w postaci stron HTML lub plików html.zip, html.exe i html.chm. Pliki z kursem można umieszczać w serwisach WWW, FTP i na płytach CD czasopism.
  • Każda publikacja i udostępnienie kursu wymaga poinformowania o tym autora. W tym celu wystarczy wysłać e-mail na adres: majgier@reporter.pl o treści "udostępniam kurs na stronie: [adres strony]". Dzięki temu autor będzie mógł informować o zmianach i aktualizacji kursu.
  • W razie niejasności i pytań należy kontaktować się z autorem, który rozstrzygnie wszelkie wątpliwości, w większości przypadków na korzyść publikującego:-)


Artykuł z kursu HTML i CSS

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

Moja pierwsza strona WWW w 15 minut

Tworzenie stron WWW jest zajęciem w miarę prostym i bardzo przyjemnym. Podstaw języka HTML można nauczyć się w kilka godzin, a dosłownie po chwili zbudować prostą witrynę. Trzeba tylko pamiętać o przestrzeganiu kilku podstawowych zasad.

Aby wprawnie posługiwać się językiem HTML niezbędna jest praktyka. Identyczną stronę można wykonać na bardzo wiele sposobów, więc tylko doświadczony webmaster będzie w stanie stworzyć ją lepiej, szybciej, tak aby dobrze prezentowała się identycznie w każdej przeglądarce. Polecam więc eksperymentowanie, testowanie, sprawdzanie efektów w różnych przeglądarkach i ciągłe podnoszenie swoich umiejętności.

Pierwsza strona

Aby tworzyć strony WWW nie musisz mieć dostępu do Internetu. Wystarczy przeglądarka stron WWW zainstalowana Twoim komputerze. Stronę musisz zapisać w zwykłym pliku tekstowym i odpowiednio go nazwać. Do pisania stron WWW nadaje się każdy, nawet najbardziej banalny edytor tekstowy - od prostego Notatnika w systemie Windows czy Pico w Unixie, aż do specjalistycznych edytorów HTML. Każdy ma swój ulubiony edytor tekstowy, ja używam rewelacyjnego NoteTab Pro (mniej zaawansowana wersja tego edytora dostępna jest bezpłatnie).

Dokument zawierający HTML powinien mieć rozszerzenie .html lub .htm - co sugeruje, że to jest strona WWW. Przyjęło się, że główna strona serwisu ma zwykle nazwę index.html (czasem może się jednak nazywać inaczej). Pozostałe strony, do których można dotrzeć z index.html mogą mieć dowolne nazwy. Niech będą jednak czytelne i niezbyt długie.

W nazwach stron ważna jest wielkość liter - najlepiej stosować tylko małe litery bez polskich znaków. Strona Kontakt.html nie jest tą samą stroną co kontakt.html (zwróć uwagę na wielkość pierwszej litery K). Nie powinno się też używać polskich znaków w nazwach stron, uważaj też na znaki specjalne (np. %^&#$@). Nie stosuj też spacji (odstępów). Lepiej nadać nazwę: pokarm-dla-zolwia.html niż pokarm dla żółwia.html.

Każda strona ma pewne elementy wspólne. Musisz poinformować przeglądarkę, że ma do czynienia z językiem HTML, a nie zwykłym tekstem. W dodatku napisanym z polskimi znakami w standardzie ISO8859-2. Warto też nadać stronie tytuł.

Oto szablon każdej strony WWW, który możesz skopiować i modyfikować w zależności od dalszych potrzeb. Mając prostego "gotowca" szybko stworzysz dowolną inną stronę.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
  <meta http-equiv="content-type"
    content="text/html; charset=iso-8859-2">
  <title>Tu wstaw tytuł strony</title>
</head>
<body>

  Moja pierwsza strona www!

</body>
</html>

Powyższy szablon to niezbędne minimum, więc powinien znajdować się w treści każdej strony WWW. Są także strony, których budowa może być inna, ale dla większości wszystkich witryn w Internecie wspomniana konstrukcja jest standardem.

!DOCTYPE określa wariant języka HTML (Transitional w wersji 4.0 jest stosowany najczęściej). Następnie informujemy przeglądarkę, że jest to dokument HTML umieszczając całą treść dokumentu w parze elementów: <HTML> i </HTML>. Każda strona ma nagłówek znajdujący się pomiędzy elementami <HEAD> i </HEAD>. Umieszczamy w nim tytuł strony w elementach <TITLE> i </TITLE> i informację o kodowaniu polskich znaków w ISO-8859-2. Po nagłówku znajduje się część, którą widzimy w oknie przeglądarki - określają ją elementy <BODY> i </BODY>. Tu znajduje się tekst, grafika, odnośniki, tabele i inne rzeczy.

Skopiuj zawartość do edytora tekstu, zapisz wszystko na dysku pod nazwą index.html i zobacz jak wygląda strona w przeglądarce. W zasadzie już masz swoją stronę...

Kilka zasad

Jak widzisz, większość elementów HTML to pary poleceń. Jest element otwierający i zamykający, np. tytuł został otoczony parą <TITLE> i </TITLE>. Dzięki temu przeglądarka wie, co ma wyświetlić na belce przeglądarki jako tytuł strony. Jeżeli w treści strony jakiś wyraz otoczysz parą elementów <B> i </B> zostanie on pogrubiony (B to skrót od angielskiego słowa Bold). Znając pary poleceń możesz z tekstem robić dowolne rzeczy. Tak na prawdę nie musisz uczyć się par - wystarczy pamiętać nazwę polecenia, bo konstrukcja jest zwykle taka sama: <POLECENIE> ... </POLECENIE>.

Polecenia (w kursie sąto elementy HTML) mogą mieć jeszcze atrybuty. Oznacza to, że możesz zmieniać właściwości tych poleceń. Jeżeli chcesz utworzyć połączenie z inną stroną WWW wystarczy, że do polecenia A dodasz atrybut href określający adres innej strony. W praktyce wygląda to następująco:

<A href="http://web.reporter.pl/">odnośnik do WebReportera</A>

Jeżeli dodasz jeszcze atrybut target, możesz określić okno, w którym otwarta zostanie strona WWW. Niech to będzie nowe okno przeglądarki, a więc target będzie miał wartość _blank (blank to czyste, nowe okno).

<A href="http://reporter.pl/" target="_blank">Zobacz Reporter.pl</A>

Zobacz Reporter.pl

Polecenia i atrybuty mogą być pisane dużymi lub małymi literami, nie ma to znaczenia. Wyłącznie na potrzeby kursu stosuję duże litery dla elementów (poleceń), a małe litery dla atrybutów ponieważ taki sposób jest bardziej czytelny. Ale równie dobrze powyższy odnośnik mógłby zostać zapisany tak:

<a HrEf="http://reporter.pl/" tarGET="_BLaNk">Zobacz Reporter.pl</a>

Pewnie domyślasz się, że aby wstawić na stronę jakiś obrazek, trzeba użyć elementu odpowiedzialnego za grafikę i wskazać mu, który obrazek ma wstawić. Element IMG odpowiada za obrazki (IMG to skrót od słowa Image). Ma wiele atrybutów, a jednym z nich jest src (czyli source - źródło obrazka). Użyjmy ich więc... Niech dodatkowo obrazek będzie na środku strony (polecenie centrujące nazywa się CENTER).

<center>
  <img src="../p/logo.gif">
</center>

I oto mamy obrazek. Pamiętaj jeszcze, że wartości atrybutów powinno się umieszczać w cudzysłowach. Dzięki temu przeglądarka może je prawidłowo zidentyfikować. Pewnie chcesz mieć "klikalny" obrazek, który jest odnośnikiem do innego serwisu? Połączmy więc dotychczasową wiedzę:

<center>
<a href="http://www.reporter.pl" target="_blank">
<img src="../p/logo.gif" width="120" height="60" border="0"></a>
</center>

Nie jest to skomplikowane, choć pojawiły się kolejne atrybuty: width to szerokość obrazka, height określa wysokość, a border="0" powoduje, że znika ramka oznaczająca, że obrazek jest odnośnikiem. Nie chcę ramki, bo tylko szpeci obraz - dlatego prawie zawsze element IMG na stronach WWW ma wyłączoną ramkę...

Kolejna istotna zasada to kolejność otwierania i zamykania poleceń. Nie powinno się robić czegoś takiego:

<s>kilka <b>przykładowych</s> wyrazów</b>

kilka przykładowych wyrazów

Element S definiuje przekreślenie, ale zanim został on zamknięty, otworzyłem element B (pogrubienie), a następnie zamknąłem S zamiast B. Są one założone "na krzyż". Wygląda to mało czytelnie i nie jest zgodne z regułami, pomimo tego, że przeglądarka pokazała efekt dobrze... Oto prawidłowa kolejność:

<s>kilka</s> <b><s>przykładowych</s> wyrazów</b>

Wiem, że trzeba było użyć kilka razy S, ale opłaciło się. Przykład jest bardziej czytelny. W skomplikowanych dokumentach ma to ogromne znacznie. Dlatego podczas tworzenia strony zwracaj uwagę na jej czytelność. Nie przez przypadek wiele autorów robi charakterystyczne wcięcia w kodzie HTML. Ułatwia to odczytanie kodu po latach, gdy sam autor nie pamięta co miał na myśli robiąc stronę...

Zauważ, że już potrafisz tworzyć odnośniki i wstawiać grafikę. Każdy akapit (blok tekstu) rozpoczyna się od polecenia P (akurat on nie wymaga stosowania elementu zamykającego, choć warto go użyć). Te informacje wystarczają aby pokusić się o eksperymenty z Twoją pierwszą stroną WWW.

Podczas tworzenia stron WWW trafisz też na wiele niedogodności. Ponieważ istnieje kilka przeglądarek stron WWW, niektóre polecenia mogą w nich dawać odmienny efekt. Czasem strona z niezamkniętymi poleceniami lub tabelami (co jest oczywiście błędem) będzie wyglądała poprawnie pod Internet Explorerem. Zdarzy się i tak, że poprawna strona, wykorzystująca standard języka HTML zalecany przez organizację W3C mimo wszystko nie będzie dobrze pokazywana przez przeglądarkę Netscape. Ludzie będą chcieli stronę drukować, wysyłać mailem, zapisywać na dysku. O wszystkich potrzebach użytkownika musisz pomyśleć!

Jeżeli chcesz poznać wszystkie elementy i atrybuty języka HTML, wystarczy, że będziesz przeglądać kurs - wszędzie znajdziesz przykłady i omówienia - wystarczy je skopiować do szablonu aby sprawdzić jak działają. Dobrym treningiem jest też podglądanie innych witryn i sprawdzanie, jak autorzy poradzili sobie z wykonaniem różnych efektów. Ucząc się na przykładach poznasz wiele technik i metod tworzenia stron. Po jakimś czasie wypracujesz własne, najlepsze rozwiązania i wtedy inni będą mogli uczyć się od Ciebie...

Powodzenia!


Artykuł z kursu HTML i CSS

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

Gdy HTML przestaje wystarczać

Jeżeli dobrze opanujesz HTML i zaczniesz tworzyć bardziej zawansowane serwisy WWW, w pewnej chwili odkryjesz wiele niedoskonałości tego języka. Okazuje się, że w czystym HTMLu nie można stworzyć bazy danych z książkami, nie da się też napisać sklepu internetowego czy przetworzyć danych z formularza. Nie wspominając już o forach dyskusyjnych czy wyszukiwarkach stron WWW.

Nie znaczy to, że z języka HTML wkrótce zrezygnujesz. O nie! Jest on niezbędny, bowiem wyniki działania wszystkich skryptów i narzędzi pokazywane są w dalszym ciągu, jako zwykłe strony WWW napisane w języku HTML (ewentualnie z dołączonym skryptem). Jedyna różnica polega na tym, że strona staje się dynamiczna, a więc może za każdym razem wyglądać inaczej, czyli zawierać inne elementy języka HTML lub inne treści.

Dynamiczne strony

Aby lepiej zrozumieć ideę dynamicznych stron, zobacz jak zbudowane są serwisy prasowe publikujące aktualności. Tam nowe informacje pojawiają się nawet co kilka minut. Nikt przecież nie tworzy co chwilę nowej strony głównej z tytułami, które kierują do osobnych podstron, gdzie zamieszczane są poszczególne informacje. Byłoby to zbyt pracochłonne. Wyobraź sobie, co by się stało, gdyby nagle ktoś chciał zmienić wygląd wszystkich wiadomości - nie chciałbym być osobą, która musi ręcznie zmienić zawartość kilkunastu tysięcy osobnych dokumentów HTML!

Z problemem można sobie łatwo poradzić. Wystarczy skonstruować szablon strony, do którego z bazy danych wstawiane są w odpowiednie miejsca tytuły i treść informacji. W bazie danych są one zapisane jako zwykły tekst. Dopiero po ich pobraniu i wstawieniu w szablon strony WWW, który zawiera polecenia HTML, całość wysyłana jest do przeglądarki. Odbiorca widzi ją jako zwykła strona HTML. Różni się tylko nazwą - zamiast tradycyjnego index.html można spotkać np. index.php lub index.asp. Rozszerzenie określa język skryptowy, który został zastosowany do wygenerowania strony WWW.

Języki programowania pozwalają na przekazywanie różnych parametrów do wnętrza dokumentów. Wygląda to na przykład tak: index.php?id=1354. W ten sposób można poinformować program, że szablon ma być wypełniony informacją o określonym numerze ID, w tym wypadku jest to np. news numer 1354. Taki "trick" pozwala jedną stronę wykorzystać do wyświetlania wielu informacji w zależności, jakie dane zostały do niej przekazane.

Tym sposobem nie mamy już 10 tys. osobnych stron HTML, ale jedną stronę napisaną w wybranym języku programowania. Znając składnię języka możemy pobierać informacje z baz danych lub z innych serwisów, przetwarzać dokumenty, wyszukiwać informacje lub obsługiwać fora dyskusyjne.

Po stronie użytkownika

Część języków programowania uruchamianych jest w przeglądarce, która odpowiada za ich poprawne wykonanie. Sprawa wygląda podobnie, jak z językiem HTML - przeglądarka "czyta" kod i wykonuje go w swoim oknie. Użytkownik musi jednak mieć wersję przeglądarki (lub odpowiednią wtyczkę), obsługującą poprawnie wybrany język programowania.

Najczęściej jest to JavaScrypt i Java. Ponieważ każda przeglądarka różni się jednak nieco składnią poleceń, mogą pojawić się problemy z działaniem tych skryptów. Użytkownik może też zabronić przeglądarce wykonywania ich, przez co strona może stracić na jakości i czytelności.

Zaletą takiego rozwiązania jest szybkość działania. To przeglądarka wykonuje kod programu więc uruchamia się on znacznie szybciej niż przesłanie strony przez Internet. Natychmiast widać też efekty działania skryptu. Jeżeli skrypt nie pobiera dodatkowych danych przez Internet, można używać programu nawet po rozłączeniu się z Internetem (np. grać w gry napisane w Javie)

Języki JavaScript, JScript, ECMAScript

JavaScript (firmy Netscape) i JScript (Microsoftu) oraz ECMAScript (standard przemysłowy) funkcjonujące w zasadzie pod nazwą JavaScript to bardzo podobne języki, które można umieszczać na stronach WWW i mieszać je z HTMLem. Są bardzo przydatne gdy trzeba szybko poradzić sobie z prostym problemem, np. weryfikacją formularza lub wyświetleniem na stronie aktualnej daty z imieninami czy jakiegoś okienka z podpowiedzią. Oczywiście można je też stosować do bardziej zaawansowanych rzeczy - np. rozwijanych systemów menu.

JavaScript ma jednak poważną wadę - za jego wykonanie odpowiada przeglądarka, a ponieważ przeglądarki różnych firm inaczej interpretują polecenia języka JavaScript, wynik działania skryptu może być różny. W skrajnych przypadkach użytkownik nic nie zobaczy. Tym bardziej, że może wyłączyć w przeglądarce ten język lub jego przeglądarka może go wcale nie obsługiwać.

Do zalet należy niewątpliwie fakt, że nie trzeba za każdym razem przeładowywać strony aby zobaczyć efekty działania skryptu. W ten sposób można zrobić np. przyciski graficzne, które zmieniają się, gdy najedziemy na nie wskaźnikiem myszy.

Język Java

Potężny język pozwalający na umieszczenie na stronie WWW gotowego programu o dowolnym stopniu skomplikowania. Np. gry, edytora tekstów, arkusza kalkulacyjnego, interaktywnej mapy z pogodą. W wydzielonym miejscu na stronie można wstawić program nie ustępujący jakością programom tradycyjnym. Dodatkowo działa on w każdym systemie operacyjnym tak samo. Jedyna wada to fakt, że również wykonuje go przeglądarka, przez co nie zawsze można go uruchomić. Użytkownik może też wyłączyć działanie programów w Javie.

Po stronie serwera

Przeciwnością skryptów wykonywanych po stronie użytkownika są języki programowania wykonywane po stronie serwera. Serwer odpowiada za "wyprodukowanie" strony według naszych potrzeb i przesłanie jej w gotowej postaci do przeglądarki. Może to być czysty HTML lub wzbogacony również o skrypty wykonywane po stronie przeglądarki. Języki wykonywane po stronie serwera mają tą zaletę, że mogą współpracować z innymi aplikacjami uruchomionymi na serwerze, np. bazami danych. Mało tego - są niezależne od przeglądarki, więc każda otrzyma dokładnie ten sam wynik działania skryptu.

Najpopularniejszymi językami tego typu są PHP, PERL, ASP. Interfejs CGI pozwala na uruchamianie po stronie serwera programów w dowolnych językach, również w C. Dla programisty oznacza to dostęp do niemal wszystkich narzędzi znajdujących się na serwerze. Można w ten sposób zarządzać serwerem, dodawać nowych użytkowników, wysyłać pocztę, konfigurować i udostępniać różne usługi sieciowe oraz robić wiele innych rzeczy za pośrednictwem zwykłej przeglądarki stron WWW.

Język PHP

Szalenie popularny i niezbyt trudny język. Ma mnóstwo zalet i pozwala budować najbardziej skomplikowane serwisy i portale. Znając kilkanaście podstawowych poleceń można już pokusić się o tworzenie całkiem zaawansowanych serwisów. Udostępniają go obecnie wszyscy więksi dostawcy Internetu. Strony napisane w tym języku można poznać po rozszerzeniu nazwy, najczęściej .php.

Język PERL

Równie popularny, ale nieco trudniejszy do opanowania dla początkujących. Też pozwala budować najbardziej skomplikowane serwisy. Kiedyś, gdy nie było jeszcze PHP, był najpopularniejszym językiem skryptowym. Udostępniają go obecnie wszyscy więksi dostawcy Internetu. Strony napisane w tym języku można poznać po rozszerzeniu nazwy, najczęściej .cgi, .pl.

Technologia ASP

Produkt firmy Microsoft, więc wykorzystywany jest bardzo często na serwerach WWW tej firmy. Pozwala na zintegrowanie danych i programów pracujących pod kontrolą środowiska Windows. Zdecydowanie ustępuje popularnością językowi PHP. Jednak wielu twórców stron wybiera to rozwiązanie, jako najlepsze. Udostępniają go tylko wybrani dostawcy Internetu. Strony napisane w tym języku można poznać po rozszerzeniu nazwy, najczęściej .asp. Strony w ASP można pisać używając różnych języków, najczęściej są to VBScript, JScript, czasem PERL.

To nie koniec...

Powyższe języki są najpopularniejsze, ale nie jedyne. Narzędzi do tworzenia dynamicznych stron WWW jest wiele, a różne firmy oferują własne rozwiązania. Wybór odpowiedniego języka narzuca rodzaj i stopień zaawansowania serwisu WWW. Często też wykorzystuje się kilka języków jednocześnie.

Na początek proponuję Ci naukę języka PHP. Jest wystarczająco zaawansowany i jednocześnie na tyle prosty, że po jego opanowaniu w stopniu podstawowym możesz spokojnie konkurować z większymi serwisami. W Internecie znajduje się tysiące gotowych skryptów, więc wystarczy tylko umiejętność konfigurowania i dodawania ich do własnego serwisu, aby cieszyć się wyszukiwarką na stronie lub własnym forum. Wiele gotowych przykładów i skryptów opisanych jest w serwisie Web.Reporter.pl.


Artykuł z kursu HTML i CSS

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

Kodowanie polskich znaków w ISO-8859-2

Polskie znaki narodowe, często nazywane potocznie "ogonkami", sprawiają problemy nie tylko autorom stron WWW. Do dziś istnieje wiele programów, w których zapisuje się je w różnych standardach kodowania. Doliczyłem się w sumie ok. 20 sposobów zapisywania polskich ogonków! Obecnie obowiązującą normą jest standard ISO-8859-2 (odpowiada on Polskiej Normie PN-93 T-42118). I rób wszystko co w Twojej mocy, aby strony WWW były zapisane właśnie w tym standardzie.

Każda strona WWW powinna mieć w sekcji HEAD następujący element META:

<head>
<meta http-equiv="content-type"
   content="text/html; charset=iso-8859-2">
</head>

Informuje on przeglądarkę, że znaki na stronie WWW zapisane są w standardzie ISO-8859-2 i dzięki temu widzimy poprawnie polski litery. Przeglądarka mając taką deklarację sama przestawia się na zalecany przez autora zestaw znaków.

Może dwa słowa o standardach i kodowaniu... Komputer udostępnia nam do dyspozycji 256 różnych znaków zapisanych w tablicy znaków ASCII. Są to liczby, litery, znaki specjalne, wykrzykniki, małpki i jeszcze wiele innych, nieraz niewidocznych znaków, które pełnią jednak ważną rolę w komputerze. Wśród nich muszą się też znaleźć polskie znaki, których tradycyjny (amerykański) zestaw znaków nie przewiduje.

Aby je tam umieścić, trzeba z pewnych znaków zrezygnować. Ponieważ każdy standard kodowania rezygnuje z innych znaków, więc w tablicy ASCII polskie znaki znajdują się na różnych pozycjach w różnych standardach. Komputer znaki rozpoznaje po ich numerze - wciskając klawisz z literą A, informujemy komputer, że na ekranie ma się pojawić symbol o numerze 65, litera B ma numer 66, itd. Można to łatwo sprawdzić pisząc w języku HTML kod znaku, np. &#65; (litera A). Więcej o kodach znaków dowiesz się z artykułu Znaki i ich kody liczbowe

Aby móc korzystać z polskich znaków trzeba mieć polską czcionkę. Linux ma instalowaną domyślnie czcionkę ISO-8859-2 więc problem z głowy, natomiast Windows ma czcionkę w standardzie Windows-1250. Różni się ona jednak od ISO-8859-2 pozycją sześciu liter w tablicy ASCII (ąśźĄŚŹ). Aby móc pisać i widzieć czcionkę ISO trzeba nieco pokombinować...

Windows nie udostępnia polskich znaków ISO, ale nic straconego. Czcionki ISO (np. autorstwa firmy EuroFont) możemy pobrać z Internetu i po zainstalowaniu jej w edytorze tekstu bez problemu będziemy widzieć wszystkie polskie znaki w standardzie ISO. Jest też malutki programik KeyPlus autorstwa Adama Strzeleckiego, który pozwala pisać w standardzie ISO. Możemy więc pisać i widzieć czcionkę ISO-8859-2. O to chodziło.

Bardziej rozbudowane edytory do stron WWW mają wbudowane mechanizmy do konwersji znaków i nawet nie zauważymy problemu polskich znaków. Piszemy tak, jak zawsze, a otrzymane strony WWW są już poprawnie zakodowane z polskimi znakami w ISO-8859-2.

Oczywiście nie zawsze możemy zainstalować polską czcionkę ISO. Być może mamy też wiele dokumentów napisanych w Windowsie. Nic straconego. W Internecie dostępnych jest wiele programów do konwertowania tekstów z jednego standardu do innego, np. napisany przez Michała Jaskólskiego program Ogonki 97. Warto korzystać z takich narzędzi w razie potrzeby.

Na koniec niespodzianka. Strony WWW można też tworzyć w standardzie Windows-1250, czyli tym, w którym domyślnie piszemy korzystając z systemu operacyjnego Windows. Nie jest to jednak sposób zalecany i jeżeli tylko możesz, przestaw się na ISO-8859-2. Jeżeli już koniecznie musisz publikować strony w standardzie Windows-1250 nie zapomnij umieścić w dokumencie HTML innej zawartości elementu META:

<head>
<meta http-equiv="content-type"
   content="text/html; charset=windows-1250">
</head>


Artykuł z kursu HTML i CSS

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

Kilka słów na temat przeznaczenia oraz historia kursu.

Gdy w czerwcu 2002 r. tworzyłem pierwszą wersję kursu HTML, jego głównym celem było usystematyzowanie, pogrupowanie i opisanie wszystkich aktualnie zalecanych elementów oraz atrybutów języka HTML. Niedługo potem dodałem pełny opis stylów CSS.

Organizacja World Wide Web Consortium od lat wyznacza standardy języków HTML i CSS, które powinny być przestrzegane przez producentów przeglądarek. Firmy nie stosują się jednak do tych zaleceń i często wprowadzają w swoich przeglądarkach własne elementy języka HTML czy CSS, które nie działają poprawnie w pozostałych programach.

Kurs ma nauczyć posługiwania się tylko tymi poleceniami języka HTML i CSS, które mają przyszłość i są lub będą poprawnie interpretowane w każdej przeglądarce. Niektóre przeglądarki już radzą sobie z większością opisanych tutaj poleceń HTML i niemal wszystkimi stylami CSS 2.

Publikacja na pomóc w szybkim odnalezieniu polecenia i poznaniu jego składni oraz dopuszczalnych wartości lub atrybutów. Zgromadzone są także informacje o przeglądarkach, w których dany element języka jest poprawnie wyświetlany. Wśród wielu poleceń, które kiedyś były standardem, część nie jest już zalecana i w kursie znajdziesz ich zamienniki.

To ogromny podręcznik, który pomaga nie tylko początkującym twórcom stron, ale stanowi również świetną ściągawkę dla webmasterów doświadczonych. Każde z ponad 330 poleceń poparte jest przykładami, których łącznie w kursie jest niemal 700. Całość uzupełniają dodatkowe artykuły, tabele i wskazówki praktyczne.

Z kursu korzysta wiele szkół, uczelni, instytucji edykacyjnych, firm, dostawców Internetu i osób prywatnych. Kurs publikowany jest na krążkach CD czasopism, dołączany do różnych programów i umieszczany w niezliczonej ilości serwisów WWW.

W 2003 r. czytelnicy magazynu PC World Komputer wybrali kurs jednym z Produktów Roku - nigdy nie sądziłem, że zdobędzie on tak wielką popularność. Jestem bardzo wdzięczy za wszystkie uwagi i listy dotyczące kursu. Dziękuję. Mam nadzieję, że również Tobie kurs przypadnie do gustu i stanie się pomocnym narzędziem w codziennej pracy.


Artykuł z kursu HTML i CSS

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

Sposób opisywania elementów, atrybutów i stylów.

Notacja zastosowana do opisywania poszczególnych poleceń może wydawać się skomplikowana, ale w rzeczywostości jest bardzo prosta. Wystarczy chwila aby poznać wszystkie symbole i oznaczenia.

• APPLET - czerwona kropka przy jakimkolwiek poleceniu informuje, że nie jest ono zalecane i w przyszłości przeglądarki mogą go nie obsługiwać. Przy opisie każdego takiego polecenia znajdziesz jego zalecany zamiennik.

Każde polecenie ma pewne cechy, które skrótowo opisane są w jego definicji. Aby przeczytać więcej informacji o wybranym atrybucie wystarczy kliknąć w jego nazwę. Czasami ten sam atrybut znaczy zupełnie coś innego w kilku elementach HTML więc opisy tego samego atrybutu w poszczególnych elementach mogą być inne. Wyjaśnienie przykładowych opisów dwóch atrybutów poniżej:

• alt =[tekst] opcjonalny - IE3, N2
opis dla przeglądarek, które nie pokazują tego elementu
• align =[bottom|middle|top|left|right] opcjonalny - IE3, N2, O3.5
wyrównanie względem innych elementów (nie zalecany)
1. Atrybut alt może przyjmować wartość tekstową, np. alt="Opis obrazka". Atrybut jest opcjonalny, co znaczy, że nie musi wystąpić w opisywanym elemencie HTML (niektóre atrybuty muszą wystąpić, np. "src" w elemencie IMG). Interpretowany jest poprawnie przez przeglądarki Internet Explorer w wersji 3 i nowsze oraz Netscape 2 i nowsze. Zawsze poniżej znajduje się skrócony opis atrybutu.

2. Atrybut align może przyjmować wartości "bottom" lub "middle" lub "top" lub "left" lub "right", np. align="right". Domyślną wartością jest "left". Atrybut jest opcjonalny, co znaczy, że nie musi wystąpić w opisywanym elemencie HTML. Interpretowany jest poprawnie przez przeglądarki Internet Explorer w wersji 3 i nowsze oraz Netscape 2 i nowsze oraz Opera 3.5 i nowsze. Poniżej znajduje się skrócony opis atrybutu. "Nie zalecany" oznacza, że atrybut jest wycofywany ze standardu HTML i kolejne przeglądarki mogą go nie interpretować poprawnie. Zwykle można go zastąpić innymi atrybutami lub stylami CSS.

Elementy, atrybuty i style bardzo często powiązane są z elemenatmi podobnymi, co pozwala natychmiast zobaczyć np. jakie atrybuty ma element TABLE lub do jakich elementów powinien być przypięty atrybut align.

Przy opisach elementów znajdują się także inne cechy poleceń, np. odpowiedniki HTML dla stylów CSS, informacje o obowiązkowym znaczniku zamykającym lub położeniu elementów wewnątrz określonej struktury (np. element TD musi być w elemencie TR).


Artykuł z kursu HTML i CSS

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

Dołączanie i korzystanie ze stylów CSS

Style pozwalają kontrolować większość właściwości elementów HTML, które kiedyś można było ustawiać wyłącznie za pomocą atrybutów. Powtarzanie atrybutów w wielu elementach było nie tylko niewygodne, ale zwykle jakakolwiek zmiana koloru lub wyglądu strony wymagała dokonania poprawek na wszystkich stronach WWW, w każdym elemencie.

Gdy nagle tytuły miały być zielone i pogrubione, a dotychczas były czerwone i rozstrzelone, wtedy webmastera czekała bardzo niemiła robota - musiał ręcznie zmieniać wygląd wszystkich tytułów.

Organizacja W3C szybko doszła do wniosku, że trzeba oddzielić układ (konstrukcję) strony od właściwości elementów umieszczonych na niej. Za pomocą języka HTML tworzy się więc strukturę, jak np. tabele, tytuły czy akapity, a korzystając ze stylów nadaje się im odpowiednie właściwości i formatowanie, np. kolor, pogrubienie, pochylenie, tła, wielkość liter i inne elementy odpowiedzialne za kształt i wygląd.

Wystarczy więc przypisać do tytułu strony nazwę stylu, np. "glowny" i zdefiniować w jednym miejscu jakie właściwości ma mieć główny tytuł. Może być pogrubiony, niebieski, napisany czcionką Arial o wielkości 16 pikseli. Wszystkie tytuły główne mogą mieć ten sam styl zapisany w jednym pliku.

Gdy nagle trzeba zmienić wygląd tytułów, wystarczy w jednym miejscu zmienić właściwości stylu "glowny" i efekt będzie widoczny od razu na wszystkich stronach we wszystkich tytułach oznaczonych tym stylem. Prawda, że rewelacyjny (i rewolucyjny) wynalazek? Takie podejście pozwala szybko zmienić kolorystykę, kształt czy właściwości określonego stylu przypisanego konkretnym elementom HTML.

Jak zdefiniować swoje style?

Własne style możesz nazwać dowolnie, w sposób dla Ciebie czytelny. Mogą nazywać się np. "naglowek", "akapitczerwony" lub "pogrubienie". Aby je stworzyć musisz zadeklarować je w osobnym pliku lub wprost na wybranej stronie WWW.

W nagłówku strony, w sekcji HEAD umieść swoją definicję stylu pomiędzy tagami STYLE.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html><head>
  <style type="text/css"><!--

    h1,td {color: green;}
    .naglowek {color: red; font-size:16px;}
    .pogrubiony {font-weight: bold;}

  --></style>
  <meta http-equiv="content-type"
    content="text/html; charset=iso-8859-2">
  <title>Tytuł strony</title>
</head><body>

  Dalsza treść strony, gdzie będą używane Twoje style...

</body></html>

W przykładzie został zdefiniowany jeden styl dla elementów H1 i TD i dwa style o nazwach "naglowek" i "pogrubiony". Najłatwiejszą notacją (bo style można definiować na kilka sposobów) i chyba najczęściej spotykaną jest przypisanie stylu do elementu HTML. Inną popularną notacją jest kropka i nazwa stylu. Kropka określa, że styl jest selektorem klasy, czyli oznacza, że klasa będzie miała nadaną przez nas nazwę, którą można potem użyć w definicji klasy dla elementu HTML.

Brzmi nieco zawile? Też tak myśle. Teorią się nie przejmuj, ważniejsza jest praktyka. Pamiętaj o kropce i za nią umieść nazwę stylu. Następnie w nawiasach klamrowych musisz opisać jakie cechy będzie miał stworzony przez Ciebie styl.

Wszystkie tytuły H1 i komórki tabeli TD będą miały kolor zielony (color: green;) Nagłówek ma mieć czerwony kolor (color: red;) i wielkość 16 pikseli (font-size:16px;). Styl pogrubiony będzie tylko pogrubiony (font-weight: bold;).

Dowolny element HTML, który ma mieć styl naglowek powinien mieć atrybut class z nazwą naszego stylu (ale już bez kropki):

<p class=naglowek>Nagłówek strony</p>

Bez problemu możesz ten styl przypisać kilka razy do różnych elementów na stronie:

<p class=naglowek>Nagłówek strony</p>
<div class=naglowek>Inny nagłówek strony</div>
<a href="http://www.reporter.pl" class=naglowek>Duży link</a>

Kropka oznacza, że wszystkie elementy na stronie (polecenia HTML), dla których zdefiniujesz klasę "naglowek" będą miały ten styl. Gdy przypiszesz styl do elementu HTML, tylko te elementy mają określone właściwości (tak zrobiliśmy z komórkami tabeli i tytułami H1)

Jak już wiesz, aby kawałek tekstu miał pogrubiony styl, wystarczy go zdefiniować z kropką na początku:

.pogrubiony {font-weight: bold;}

Tak określony styl może się odnościć do dowolnych elementów HTML - możesz pogrubić akapity, tabele, linki i generalnie wszystkie tagi języka HTML. Dodając przed kropką nazwę elementu HTML, możesz ograniczyć działanie tego stylu tylko do wybranych poleceń języka HTML. Zastosujmy pogrubienie tylko w akapitach:

P.pogrubiony {font-weight: bold;}

I użyjmy go w praktyce:

<p class=pogrubiony>TYLKO TEN tekst zostanie pogrubiony</p>
<br class=pogrubiony>ten tekst nie zostanie pogrubiony</br>
<div class=pogrubiony>Ten tekst nie zostanie pogrubiony</div>
<a href="http://reporter.pl" class=pogrubiony>Link bez pogrubienia</a>

Takie zachowanie pozwala stworzyć wiele stylów o nazwie "pogrubiony", ale każdy będzie odnosił się tylko do określonego elementu języka HTML:

P.pogrubiony {font-weight: bold;}
BR.pogrubiony {font-weight: bold; color: red;}

Łatwo zapamiętać, że brak nazwy elementu przed kropką dotyczy wszystkich tagów HTML, a wyszczególniona nazwa przed kropką we własnej definicji stylu ogranicza działanie stylu tylko do tego elementu języka HTML.

Jest jeszcze jeden zapis własnej definicji stylu, gdzie zamiast kropki stosuje się znak #:

#zielony {color: green;}

Tym razem odwołanie do stylu nie następuje przez podanie atrybutu class, ale przez identyfikator elementu, czyli atrybut id:

<p id=zielony>zielony akapit</p>

Ważną rzeczą jest aby na jednej stronie nie było dwóch elementów HTML (np. dwóch lub więcej akapitów), które mają taką samą nazwę ID. Identyfikator jest unikalny. Jeżeli chcesz stosować więcej identyfikatorów musisz je np. ponumerować:

#zielony1 {color: green;}
#zielony2 {color: green;}
#zielony3 {color: green;}

<p id=zielony1>zielony akapit</p>
<span id=zielony2>zielony akapit</span>
<p id=zielony3>zielony akapit</p>

Tutaj również można ograniczyć zakres działania stylu dla wybranego elementu dodając jego nazwę przed definicją stylu:

P#zielony {color: green;}

W praktyce zapis z identyfikatorami ID nie jest często stosowany, ponieważ z definicji każdy element HTML musi mieć inny identyfikator i tych styli byłoby bardzo dużo. Natomiast styl zapisany w ten sposób ma zastosowanie w dynamicznym HTML, a więc w powiązaniu z JavaScriptem i DOMem, gdzie odwołania do elementów HTML możliwe są poprzez identyfikatory ID.

Zdecydowanie najczęściej spotykany jest przykład pierwszy, gdzie po kropce podajesz nazwę stylu, a w nawiasach określasz wszystkie style i parametry jakie mają być przypisane do danej nazwy. Potem w elementach HTML wystarczy za pomocą atrybutu class przypisać określoną nazwę stylu, aby go użyć w dowolnym miejscu na stronie.

Dołączanie stylów

Jednym ze sposobów jest umieszczenie stylów wprost przy elemencie, którego dotyczy korzystając z atrybutu style. Można w ten sposób nadać konkretny styl wybranemu elementowi HTML, bez konieczności stosowania arkusza zewnętrznego lub wewnętrznego:

<p style="color:red; font-size:16px;">
dowolny akapit
</p>

Takie rozwiązanie jest stosowane wyjątkowo, gdy trzeba zmienić wygląd jednego elementu (lub kilku elementów) na stronie lub nadpisać wygląd konkretnego elementu HTML, który wcześniej został zadeklarowany w stylach zewnętrznych lub osadzonych na stronie.

Nie powinno się stosować stylów wprost w elementach HTML, ponieważ trudno je potem znaleźć w kodzie strony i kłopotliwe jest ich poprawianie. Mimo chaosu, jaki może wprowadzić taki zapis, jest on w praktyce dosyć często stosowony z lenistwa, bo łatwiej dokonać zmiany stylu konkretnego elementu niż wypisywać wszystkie style w zewnętrznym arkuszu i potem przypisywać każdy ze stylów do poszczególnych elementów.

Definicje stylów można umieścić wprost na konkretnej stronie WWW, w sekcji nagłówkowej strony, czyli pomiędzy tagami <head> i </head>, np. zaraz po określeniu tytułu dla strony:

<head>
  <meta http-equiv="content-type"
  content="text/html; charset=iso-8859-2">
  <title>Tytuł strony </title>
  <style type="text/css"><!--

  body, p {
    font-family: Arial, sans-serif;
    font-size: 14px;
  }
  a { text-decoration:none; }
  .menu:active {color:navy;}
  .menu:link {color:navy;}
  .menu:visited {color:navy;}
  .menu:hover {color:#3333cc;}

  --></style>
</head>

Style są umieszczone wprost na konkretnej stronie WWW i nawet jeżeli ktoś skopiuje stronę na dysk lokalny i nie będzie miał połączenia z Siecią, w dalszym ciągu style będą w dokumencie zachowane.

To bardzo dobry sposób osadzania stylów w przypadku języków skryptowych (np. PHP), ponieważ style można dołączyć z jednego pliku za pomocą dyrektywy include.

Nieco gorzej jest z wykorzystaniem tej metody w wypadku statycznych stron HTML, gdyż modyfikacja stylu wymaga zmodyfikowania zapisu na wszystkich stronach należących do witryny. Wtedy wygodniej skorzystać z metody dołączenia zewnętrznego arkusza z dowolnego miejsca w Sieci lub z wybranego katalogu na stronie WWW.

Zamiast osadzać style CSS na stronie można je dołączyć z zewnętrznego pliku za pomocą elementu link:

<head>
  <meta http-equiv="content-type"
  content="text/html; charset=iso-8859-2">
  <title>Tytuł strony </title>
  <link rel="stylesheet" type="text/css" href="/style.css">
</head>

Można też podać pełną ścieżkę do serwera i dołączać więcej niż jeden arkusz stylów:

<link rel="stylesheet" type="text/css" href="http://serwer1/style.css">
<link rel="stylesheet" type="text/css" href="http://serwer2/style.css">

Dołączany plik style.css powinien zawierać od razu definicje stylów, jak poniżej:

body, p {
  font-family: Arial, sans-serif;
  font-size: 14px;
}
a { text-decoration:none; }
input { width:200px; }

Ten sposób dołączania stylów jest bardzo wygodny, ponieważ w praktyce istnieje tylko jeden plik ze stylami, który może być dołączany z dowolnej lokalizacji w Sieci. Modyfikacje wystarczy przeprowadzać tylko w jednym pliku. Jego wadą jest to, że podczas zapisywania strony na dysk, style mogą zostać zgubione i bez dostępu do pliku ze stylami strona może prezentować się mało ciekawie.

Dopuszczalna jest również kombinacja zastosowania stylów z zewnętrznego pliku w stylach znajdujących się na stronie:

<style type="text/css"><!--

@import url(http://serwer.pl/katalog/style.css)
body, p {
  font-family: Arial, sans-serif;
  font-size: 14px;
}
a { text-decoration:none; }

--></style>

W tym celu można skorzystać z polecenia @import dołączającego do stylów na stronie dodatkowe style znajdujące się w pliku w dowolnym miejscu w Sieci. Style znajdujące się poniżej dołączanego stylu mogą rozszerzyć style z pliku lub zastąpić je na konkretnej stronie.

Co jeszcze?

Szczerze mówiąc, o stylach można napisać całkiem sporą książkę, a przedstawione powyżej podstawy mają tylko zaznajomić Cię z tematyką i pomóc szybko zacząć je stosować na stronach. Nie przejmuj się, jeżeli od razu nie zroumiesz o co w tym wszystkim chodzi. Myśle, że każdy początkujący webmaster miał problemy ze zrozumieniem wszystkich zawiłości stylów CSS. Mam nadzieję, że ten krótki, ale treściwy wstęp, nieco wyjaśnił Ci posługiwanie się stylami w praktyce.


Artykuł z kursu HTML i CSS

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

XHTML 1.0 - następca języka HTML

Język HTML od wersji 4.01 nie jest już dalej rozwijany - zastąpił go XHTML, obecnie w wersji 1.1 (jednak tekst dotyczy łatwiejszej do opisania wersji XHTML 1.0). Nazwa brzmi może groźnie, ale w praktyce jest on niemal identyczny z HTML 4.01, którego dobrze znasz z mojego kursu.

Kilka nowych reguł bardzo łatwo możesz opanować i już po chwili będziesz w stanie pisać strony zgodne z językiem XHTML. Po co więc powstał nowy język? Dla wygody. HTML został znormalizowany aby mógł być zgodny z językiem XML, który określa zasady tworzenia innych języków używanych w elektronicznych publikacjach. Jest też łatwy do przetwarzania przez różne translatory XML.

Pisząc nowe strony dobrze jest stosować się do zasad określonych w XHTMLu, jeżeli jednak chcesz nadal używać tylko języka HTML 4.01 nic nie stoi na przeszkodzie aby zapomnieć o tym tekście zaraz po jego przeczytaniu. Nowe przeglądarki stron WWW będą cały czas obsługiwać HTML na równi z XHTMLem - przynajmniej w najbliższej przyszłości. Miliony dokumentów na całym świecie zostały napisane w języku HTML - nikt nie będzie ich nagle przerabiał do XHTMLa, bo byłaby to czynność pozbawiona sensu. Warto jednak znać różnice pomiędzy językami.

Deklaracja dokumentu

Każda strona w języku XHTML musi zaczynać się od określenia wersji języka XML (obecnie jest to wersja 1.0) i sposobu kodowania znaków. Dla języka polskiego będzie to iso-8859-2:

<?xml version="1.0" encoding="iso-8859-2"?>

Zwróć uwagę na znak zapytania (nie ukośnik), "zamykający" wersję XML. Następnie trzeba zadeklarować odpowiednią definicję DTD, czyli określić reguły języka. Musimy wybrać jedną z trzech wersji.

1. Strict: strona będzie napisana zgodnie z deklarowanym standardem i nie dopuszcza innych elementów. Trudno jest napisać taką stronę, ale właśnie do takiego ideału dążymy...

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "DTD/xhtml1-strict.dtd">

2. Transitional: strona będzie napisana zgodnie z deklarowanym standardem, ale dopuszczalne są też inne elementy, np. ze starego języka HTML. W większości wypadków dobrze jest użyć tej właśnie definicji...

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "DTD/xhtml1-transitional.dtd">

3. Frames: strona będzie napisana zgodnie z deklarowanym standardem, ale dopuszczalne są też inne elementy, np. ze starego języka HTML. Ten wariant stosuje się gdy witryna zawiera ramki.

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "DTD/xhtml1-frameset.dtd">

Powyższe polecenia przypominają element !DOCTYPE z języka HTML.

Trzeba również określić tzw. przestrzeń nazw. W języku XML sami decydujemy jaką rolę pełnią wszystkie elementy i ich atrybuty. Każdy element języka HTML może mieć wiele znaczeń, więc trzeba poinformować przeglądarkę co ma zrobić gdy natrafi np. na element img lub jak zareagować na atrybut src. W tym celu definiuje się przestrzeń nazw, gdzie określone są sposoby użycia poszczególnych poleceń. Odpowiedzialny jest za to atrybut xmlns (czyli XML namespace). Dla języka XHTML będzie to następujący fragment kodu:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

Szablon strony

Znając już podstawowe elementy możemy utworzyć szablon strony. Nie różni się on bardzo od szablonu w języku HTML.

<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tytuł strony</title>
</head>
<body>
   <p>Przykładowy akapit</p>
</body>
</html>

Czas na szczegóły...

1. Zagnieżdżanie. W języku XHTML istotna jest kolejność otwierania i zamykania tagów. W HTML również powinniśmy o tym pamiętać, ale tutaj ma to kluczowe znaczenie. Nie można napisać:

To <b>nie jest poprawna <i>kolejność</b> elementów</i> - są skrzyżowane!

Trzeba też pamiętać, aby element A nie zawierał innych elementów A. PRE nie może zawierać elementów IMG, BIG, SUB, SUP, SMALL i OBJECT. BUTTON nie może zawierać elementów INPUT, SELECT, TEXTAREA, LABEL, BUTTON, FORM, FIELDSET, IFRAME i ISINDEX. LABEL nie może zawierać innych elementów LABEL, a FORM nie może zawierać innych elementów FORM.

2. Zamykanie znaczników. Każdy znacznik musi być zamknięty, nawet jeżeli nie ma znaczników zamykających. Brzmi to może dziwnie, bo jak zamknąć element <br>? Jest na to sposób - wystarczy użyć go w postaci <br />, podobnie jak np. <img src="zdjecie.jpg" />. Pamiętaj o spacji przed ukośnikiem, bo niektóre współczesne przeglądarki mogą mieć problem gdy odstępu nie będzie.

3. Wielkość liter. Wszystkie elementy i atrybuty muszą być zapisywane małymi literami. Wielkość znaków w XHTML ma znaczenie, więc co innego znaczy <B> (to nie jest pogrubienie), a co innego <b> (to jest pogrubienie). W całym kursie stosuję duże litery dla atrybutów aby kurs był bardziej czytelny. W XHTMLu elementy pisane są z użyciem małych liter.

4. Cudzysłów. Wszystkie atrybuty muszą być zapisane w cudzysłowach. Błędem jest napisanie <table align=left width=100>. Prawidłowo powinno być: <table align="left" width="100">.

5. Atrybuty puste. W HTML stosowane są atrybuty puste (logiczne), np. <hr noshade>. W XHTMLu muszą mieć przypisane wartości. Ponieważ nie mają wartości, przypisuje się im własną nazwę. Po zamianie na XHTML przykład wygląda tak: <hr noshade="noshade" />.

6. Znaki specjalne. Trzeba uważać przy stosowaniu znaków < i & w skryptach i deklaracjach CSS. Najlepiej zastępować je poprzez &lt; i &amp;.

7. Skrypty. Każdy skrypt powinien być "otoczony" przez następującą strukturę:

<script type="text/javascript">
<![CDATA[

 dopiero tutaj umieść skrypt

]]>
</script>

8. Atrybut ID Zamiast atrybutu name stosuj id. Atrybut name nie jest zalecany i nie powinno się go używać w XHTML. Jeżeli używasz atrybutu name, uzupełnij element o atrybut id o takiej samej wartości.

Już znasz XHTML...

Jak widzisz, XHTML nie jest zbyt trudny, choć wydaje się nieco kłopotliwy w użyciu. To w zasadzie stary, dobrze znany HTML wzbogacony o pewne reguły, które dbają o zgodność zapisu z językiem XML.


Artykuł z kursu HTML i CSS

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

Zanim stworzysz swoją stronę WWW

Wydawać by się mogło, że do wykonania dobrej strony WWW najważniejsza jest umiejętność posługiwania się językiem HTML, znajomość programów, wiedza techniczna i doświadczenie w pracy z komputerem. Jeżeli tak myślisz, postaram się przekonać Cię, że HTML i CSS to ostatnia rzecz, jakie musisz znać przy projektowaniu dobrej strony.

Dla mnie zakodowanie strony w języku HTML (lub jakimkolwiek innym) jest ostatnim etapem pracy przy witrynie. Wcześniej projekt serwisu dojrzewa od kilkunastu dni nawet do kilku lat (!) w mojej głowie i na wielu kartkach papieru. Gdybym chciał określić procentowo ilość czasu jaki poświęcam na kodowanie i projektowanie serwisu, to myślę, że projekt zajął by mi nawet do 98 proc. czasu potrzebnego na powstanie strony, a kodowanie wszystkiego w postaci stron HTML to dosłownie "chwila".

Wiedz czego chcesz

Wiele osób chce mieć stronę, jednak sama chęć nie wystarcza. Już po chwili rodzą się różne pytania. Jaki wygląd ma mieć strona? Co powinna zawierać? Jakich narzędzi użyć do jej stworzenia? Czy można na niej zarobić?

Warto usiąść i określić co chcemy na niej zamieścić oraz wypisać funkcje, które ma spełniać. Nie są to łatwe decyzje, ale trzeba je podjąć już na wstępie. Od nich zależy konstrukcja menu, wygląd strony głównej, ilość działów, nawigacja, liczba dokumentów i grafik, które będą nam potrzebne do zbudowania serwisu.

Wczuj się w rolę czytelnika, pomyśl co zrobi gdy wejdzie na Twoją witrynę, czego będzie szukał, co możesz mu zaoferować, jaki jest koszt stworzenia strony. Swoje przemyślenia przedstaw kilku osobom i zapytaj co sądzą o pomyśle. Z pewnością podpowiedzą Ci, co ich zdaniem należałoby dodać lub zmienić.

Pamiętaj, że serwis internetowy różni się od książki lub gazety. Nikt nie czyta długich tekstów, jeżeli nie musi lub nie chce. Treść musi być na tyle ciekawa, aby zatrzymać użytkownika na dłużej. Jeżeli witryna będzie interesująca i oryginalna, wiele osób będzie z niej korzystać, a przecież o to chodzi!

Pierwsze wrażenie

Pamiętaj, że pierwsze wrażenie można zrobić tylko raz. Internet to miliony stron - jeżeli wejdę na jedną z nich i nie zrobi na mnie dobrego wrażenia, już na nią nie powrócę. Szkoda czasu. Więc bardzo ważne jest, aby strona była możliwie najlepiej dopracowana już podczas jej pierwszej prezentacji w Internecie. Ba, ale jak to osiągnąć? Jest kilka sposobów...

Teksty - nie mogą być nudne, zbyt długie, rozlazłe i niestarannie napisane. Sprawdzaj błędy ortograficzne, czytaj je po kilka razy, zastanów się nad używanym słownictwem. Jeżeli tekst jest dłuższy stosuj punkty, akapity lub rozdziały. Gdy powołujesz się na jakieś informacje zawsze umieszczaj ich źródło. Nie możesz napisać, że w Polsce 10% ludzi korzysta z Internetu, jeżeli nie podasz skąd masz takie dane (no, chyba, że sam to zbadasz). Zastanów się, czy teksty będziesz pisać samemu, czy może pozyskasz je od innych autorów lub serwisów.

Grafika - musi być odpowiednio dobrana do serwisu. Jeżeli nie masz zdolności plastycznych, popytaj znajomych, czy nie mogliby pomóc. Ważny jest dobór kolorów, kształtów, zestawienie grafik z innymi elementami strony. Pomyśl o zdjęciach - urozmaicają tekst i przyciągają oko. Możesz je robić samodzielnie, zlecić wykonanie fotografowi lub postarać się o nie z innych źródeł. Jeżeli będziesz robić wiele zdjęć, może przydałby się aparat cyfrowy lub skaner? Pamiętaj, że grafika ma ułatwiać, a nie utrudniać poruszanie się po stronie.

Nawigacja - dzięki niej możesz bardzo wiele zyskać. Bezproblemowe poruszanie się po serwisie, wyszukiwanie informacji czy proste przechodzenie pomiędzy różnymi działami to jedne z najważniejszych cech dobrej witryny. Użytkownik zawsze wybierze serwis, który sprawia mu mniej kłopotów podczas wędrówki - pamiętaj o tym podczas projektowania przejść pomiędzy stronami. Im więcej kliknięć, pułapek i niespodzianek czega na odbiorcę, tym bardziej będzie on poirytowany. Przygotuj mapę serwisu, jeżeli jest bardzo rozbudowany. Nikt nie będzie szukał przez godzinę informacji, z których korzysta na co dzień. Jeżeli to możliwe zbadaj preferencje użytkowników i to, z czego korzystają najczęściej, umieść na stronie głównej. Pamiętaj o umożliwieniu kontaktu z Tobą lub z osobą, która odpowiada za witrynę. Jeżeli nie chcesz odpowiadać na listy użytkowników to najlepiej zapomnij o Internecie i zabierz się za uprawę buraków pastewnych - ułatwisz w ten sposób życie sobie i wielu osobom.

Prawa autorskie - przestrzegaj je zawsze i za wszelką cenę, a jeżeli masz wątpliwości, pytaj o zgodę autorów. Pamiętaj, że wszystko co nie jest Twoje należy do kogoś innego. Jeżeli chcesz użyć czyjegoś tekstu, grafiki, zdjęcia lub oryginalnego pomysłu, MUSISZ mieć jego zgodę i to najlepiej na piśmie. Jeżeli wykorzystasz czyjeś prace bez poszanowania praw autorskich grozi Ci nie tylko zepsucie opinii w środowisku, ale również odpowiedzialność karna, a wtedy straty finansowe mogą być bardzo dotkliwe i wielokrotnie przewyższać koszt zakupu wykorzystywanych materiałów. Zawsze pytaj o zgodę jeżeli chcesz coś przedrukować lub zamieścić na własnej stronie. Zwykle firmy lub osoby prywatne udzielają zgody bez problemu jeżeli nie prowadzisz serwisu komercyjnego. W Internecie jest też wiele materiałów bezpłatnych, z których można korzystać również do celów komercyjnych (jak ten kurs HTML). Ale musi to być wyraźnie napisane - jeżeli tak nie jest, najlepiej wyjaśnij wątpliwości u autora prac.

Aktualizacja - to magnes na czytelnika. Witryna nie może być martwa. Staraj się przewidzieć jak często będzie dodawana nowa zawartość. Im częściej będzie się pojawiać coś nowego, tym częściej ludzie będą przychodzić aby to zobaczyć. Jeżeli nie będziesz w stanie uzupełniać witryny codziennie, staraj się aby chociaż raz w tygodniu dodać choćby kilka słów od siebie.

Nie wiem co chcę pokazać!

To częsty problem. Chcesz mieć stronę, ale nie wiesz co na niej umieścić... Na szczęście jest wiele elementów, które są wspólne dla różnych witryn. Możesz też odwiedzić inne, podobne strony, aby zobaczyć jakie informacje umieszcza konkurencja. Warto zrobić własne "badanie rynku", bo dzięki temu zobaczysz, czy to co chcesz zrobić nie zostało już wcześniej wykonane. Pół biedy, jeżeli Twój pomysł ktoś zrealizował w kiepski sposób i możesz wykonać lepszą witrynę. Gorzej, gdy serwis, który planujesz uruchomić, konkurencja zrobiła już dawno temu i cieszy się on dużą popularnością, a na dodatek nie masz szans zrobić go lepiej. Wtedy masz poważny problem.

"Kontakt". Zacznij od strony kontaktowej - może to być adres e-mail, telefon, ulica, miasto, mapka opisująca jak do Ciebie dojechać. Jeżeli lubisz zaskakiwać podaj np. szerokość i długość geograficzną. Jeżeli ktoś ma GPS może dotrzeć do Ciebie wykorzystując dane satelitarne.

"O autorze/O firmie/O serwisie". Napisz kilka zdań o sobie - kim jesteś, co robisz, ile masz lat, czym się interesujesz. Możesz też dodać swoje zdjęcie. Firmy w tym miejscu opisują zwykle swoją historię, ofertę, dokonania. Możesz też napisać kilka zdań o serwisie - do kogo jest skierowany, co można w nim znaleźć.

"Nowości/Informacje prasowe". Wydziel stronę, na której opisywać będziesz zmiany i zapowiedzi nowych tekstów. Firmy tworzą zwykle sekcję dla prasy, aby dziennikarze mogli pobierać najnowsze doniesienia. Pomyśl o Newsletterze. Jeżeli chcesz mieć kontakt z czytelnikami daj im możliwość pozostawienia adresów e-mail. Mając bazę adresów, możesz wysyłać im co jakiś czas informacje o nowościach. Tylko pilnuj bazy i nie udostępniaj jej innym, jeżeli czytelnicy nie wyrazili na to zgody. Chroń dane czytelników, bo jeżeli trafią one w niepowołane ręce, nigdy więcej ludzie Ci nie zaufają.

"Katalog stron WWW". Spis podobnych witryn poukładany tematycznie. Umieść też adresy swojej konkurencji - nie zaszkodzi. Gdy ktoś będzie chciał zgłębić temat wejdzie do innych serwisów. I to nic, że teraz ucieknie z Twojej strony, ale będzie do niej wracał, bo wie, że tylko u Ciebie znajdzie kompletny zestaw adresów internetowych.

"Ankieta". Ważna rzecz - zadając pytania poznasz bliżej swoich odbiorców i lepiej dostosujesz serwis do ich wymogów. Jest wiele typów ankiet, więc też musisz przemyśleć, które będą Ci najbardziej odpowiadać.

Co jeszcze... Każda strona ma swoje specyficzne działy. Jeżeli prowadzisz serwis o muzyce to pewnie przedstawisz sylwetki muzyków, wywiady, książki, nagrania w MP3, teksty piosenek. Gdy myślisz o serwisie turystycznym opiszesz trasy wycieczek, schroniska, hotele, podasz rozkłady jazdy pociągów, pogodę na najbliższe dni w różnych regionach. Jeżeli masz serwis finansowy, rozsądne jest podanie aktualnych kursów walut. W prywatnym serwisie możesz opisać swoje hobby, ulubione książki, pokazać własną twórczość, opisać drzewo genealogiczne rodziny.

Chcesz osiągnąć sukces, prawda?

Zanim cokolwiek zrobisz, przemyśl jak to zrobisz! Katalog stron WWW ma każdy, więc dlaczego Twój ma być lepszy od innych i dlaczego to właśnie z Twojego katalogu stron mają korzystać ludzie? Wszystko zależy od tego, jak go wykonasz. Ważne jest grupowanie adresów w logiczne kategorie, umieszczanie ciekawych opisów, możliwość zgłaszania nieistniejących stron. Zastanów się czy dodasz wszystkie adresy stron WWW czy tylko te najepsze? Musisz mieć coś więcej niż konkurencja aby zaistnieć w Internecie. I nie jest to wcale zadanie proste.

Nie staraj się robić strony o wszystkim. Wiem, że interesują Cię sporty wodne, lotnictwo, książki, muzyka, aerobik, jazda konna i GSM. Lepiej jest się jednak skupić na jednym temacie, ale za to opracować go dokładnie. Tylko wtedy ludzie docenią Twój trud. Stron o telefonach komórkowych jest setki, ale czytelnicy najczęściej odwiedzają tylko kilka z nich. Wybierz jedną tematykę, na której znasz się najlepiej i jej poświęć swój czas.

Projekt musi być elastyczny i łatwy do szybkiego przebudowania. Jeżeli będziesz dodawać nowe pozycje do menu, grafika nie może Cię ograniczać. Stwórz "style book", czyli książkę standardów. Dzięki temu nie zapomnisz, jakich czcionek, kolorów i proporcji używasz do wykonania wszystkich elementów serwisu.

Już teraz pomyśl z jakimi serwisami i osobami będziesz współpracować, co zrobisz aby wypromować serwis, do których katalogów i wyszukiwarek go dodasz. Warto przemyśleć też sprawę reklamy (haseł reklamowych) i bannerów. Część miejsca w serwisie przeznacz na bannery innych. Reklama jest bardzo ważna - po co Ci serwis, o którym nikt nie wie?

Są jeszcze ograniczenia. Pewnych rzeczy nie warto robić jeżeli nie dysponujesz odpowiednimi narzędziami i technologiami. Krótka historyjka zobrazuje co mam na myśli... Zbieram bilety komunikacyjne z całego świata i mam ich niemal 10 tys. Wiele lat temu chciałem przenieść kolekcję do Internetu. Nie miałem wtedy dostępu do baz danych i PHP. Musiałbym stworzyć 10 tys. osobnych stron HTML opisujących każdy bilet. Zajęcie byłoby tak pracochłonne, że pewnie serwis tworzyłbym kilka lat, a teraz musiałbym wszystko przerabiać! To co kiedyś było niewykonalne, dzisiaj mogę zrobić szybciej i lepiej. Warto więc czasem czekać nawet kilka lat niż na siłę tworzyć coś, co z założenia nie ma sensu.

I najważniejsze - cierpliwość i pasja. W ciągu tygodnia nie osiągniesz sukcesu. Nie wystarczy miesiąc, a nawet pół roku. Dobry serwis wymaga stałej aktualizacji i wielu wyrzeczeń przez lata. Im bardziej się rozrasta tym więcej masz przy nim pracy. Zapał wygasa, przychodzą chwile zwątpienia. Reportera tworzę od 1996 r. i bardzo lubię przy nim pracować, ale miewałem okresy, kiedy chciałem rzucić to wszystko i zająć się czymś innym. Duży serwis potrafi też zmienić człowieka. Długie przebywanie przed komputerem nie jest dobre dla zdrowia, wpływa też na psychikę.

Jeżeli chcesz podjąć ryzyko i przeżyć przygodę swojego życia to zapraszam do Sieci - tu każdy ma równe szanse. Przenieś gotowy projekt do postaci stron HTML i zacznij rozwijać własną witrynę. Emocje gwarantowane...


Artykuł z kursu HTML i CSS

[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

Znaki, kody liczbowe i encje

Każdy znak umieszczony na stronie WWW można zapisać na kilka sposobów. Czasem tradycyjne znaki wprowadzane z klawiatury nie wystarczają i trzeba skorzystać ze specjalnych kodów tych znaków. Wiele liter czy symboli nie znajdziemy na klawiaturze - jedynym sposobem ich wyświetlenia na stronie WWW jest posłużenie się odpowiednim kodem znaku. Są też znaki niewidoczne (np. twarda spacja), której nie można zastąpić tradycyjnymi odstępami z klawiatury.

Na stronie WWW dowolne znaki alfabetu można wstawić na trzy sposoby:
- z klawiatury (co jest oczywiste i naturalne)
- w Unikodzie, którego składnia wygląda następujaco: &#D; lub &#xH; - gdzie D jest liczbą dziesiętną (np. 1,23,456,9001), a H jest liczbą szesnastkową (np. 0001, 00FF, 004B).
- za pomocą tzw. encji, czyli nazwy znaku zapisanej następująco: &nazwa; - nazwy dla takiego zapisu można znaleźć w tabeli. Ważna uwaga - wielkość liter ma tutaj znaczenie.

Oczywiście zestaw znaków dla każdego rodzaju czcionki jest inny. Czasem symbolu lub znaku może brakować. Poniższa tabela zawiera zestaw znaków dla czcionki Arial - występującej w większości komputerów. Nie bez znaczenia jest też kodowanie znaków na stronie WWW - polskie strony kodowane są w standardzie ISO-8859-2 i wtedy "ogonki" mogą nadpisać inne znaki, które dla angielskich stron kodowanych w ISO8859-1 są widoczne.

Stosowanie encji (nazw znaków) jest bardzo praktyczne, bo zamiast pamiętać numer znaku wystarczy napisać &reg; aby otrzymać znak zastrzeżenia (®). Duży odstęp pomiędzy wyrazami możliwy jest np. dzięki powtórzonej encji &nbsp; (spacje, które nie przechodzą do następnego wiersza). Również znaki narodowe często łatwiej jest wpisać za pomocą kodów - oto rosyjskie ż (Ж) zapisane jako &#1046;

Zapisywanie znaków w postaci Unikodu pozwala bezproblemowo umieszczać na jednej stronie nawet kilka różnych symboli narodowych. Można więc pisać po polsku, rosyjsku, czesku...

Poniższa tabela składa się z następujących pól:

• znak - symbol znaku zapisany w postaci &#D;
• Unikod - dziesiętny &#D; i szesnastkowy &#xH; kod znaku
• znak - symbol znaku zapisany w postaci &nazwa;
• encja - nazwa encji
• krótki opis - miejsce na uwagi

znak | Unikod | znak | encja | krótki opis
 | &#32; &#x0020; |  |  |
! | &#33; &#x0021; |  |  |
" | &#34; &#x0022; |  |  |
# | &#35; &#x0023; |  |  |
$ | &#36; &#x0024; |  |  |
% | &#37; &#x0025; |  |  |
& | &#38; &#x0026; |  |  |
' | &#39; &#x0027; |  |  |
( | &#40; &#x0028; |  |  |
) | &#41; &#x0029; |  |  |
* | &#42; &#x002A; |  |  |
+ | &#43; &#x002B; |  |  |
, | &#44; &#x002C; |  |  |
- | &#45; &#x002D; |  |  |
. | &#46; &#x002E; |  |  |
/ | &#47; &#x002F; |  |  |
0 | &#48; &#x0030; |  |  |
1 | &#49; &#x0031; |  |  |
2 | &#50; &#x0032; |  |  |
3 | &#51; &#x0033; |  |  |
4 | &#52; &#x0034; |  |  |
5 | &#53; &#x0035; |  |  |
6 | &#54; &#x0036; |  |  |
7 | &#55; &#x0037; |  |  |
8 | &#56; &#x0038; |  |  |
9 | &#57; &#x0039; |  |  |
: | &#58; &#x003A; |  |  |
; | &#59; &#x003B; |  |  |
< | &#60; &#x003C; |  |  |
= | &#61; &#x003D; |  |  |
> | &#62; &#x003E; |  |  |
? | &#63; &#x003F; |  |  |
@ | &#64; &#x0040; |  |  |
A | &#65; &#x0041; |  |  |
B | &#66; &#x0042; |  |  |
C | &#67; &#x0043; |  |  |
D | &#68; &#x0044; |  |  |
E | &#69; &#x0045; |  |  |
F | &#70; &#x0046; |  |  |
G | &#71; &#x0047; |  |  |
H | &#72; &#x0048; |  |  |
I | &#73; &#x0049; |  |  |
J | &#74; &#x004A; |  |  |
K | &#75; &#x004B; |  |  |
L | &#76; &#x004C; |  |  |
M | &#77; &#x004D; |  |  |
N | &#78; &#x004E; |  |  |
O | &#79; &#x004F; |  |  |
P | &#80; &#x0050; |  |  |
Q | &#81; &#x0051; |  |  |
R | &#82; &#x0052; |  |  |
S | &#83; &#x0053; |  |  |
T | &#84; &#x0054; |  |  |
U | &#85; &#x0055; |  |  |
V | &#86; &#x0056; |  |  |
W | &#87; &#x0057; |  |  |
X | &#88; &#x0058; |  |  |
Y | &#89; &#x0059; |  |  |
Z | &#90; &#x005A; |  |  |
[ | &#91; &#x005B; |  |  |
\ | &#92; &#x005C; |  |  |
] | &#93; &#x005D; |  |  |
^ | &#94; &#x005E; |  |  |
_ | &#95; &#x005F; |  |  |
` | &#96; &#x0060; |  |  |
a | &#97; &#x0061; |  |  |
b | &#98; &#x0062; |  |  |
c | &#99; &#x0063; |  |  |
d | &#100; &#x0064; |  |  |
e | &#101; &#x0065; |  |  |
f | &#102; &#x0066; |  |  |
g | &#103; &#x0067; |  |  |
h | &#104; &#x0068; |  |  |
i | &#105; &#x0069; |  |  |
j | &#106; &#x006A; |  |  |
k | &#107; &#x006B; |  |  |
l | &#108; &#x006C; |  |  |
m | &#109; &#x006D; |  |  |
n | &#110; &#x006E; |  |  |
o | &#111; &#x006F; |  |  |
p | &#112; &#x0070; |  |  |
q | &#113; &#x0071; |  |  |
r | &#114; &#x0072; |  |  |
s | &#115; &#x0073; |  |  |
t | &#116; &#x0074; |  |  |
u | &#117; &#x0075; |  |  |
v | &#118; &#x0076; |  |  |
w | &#119; &#x0077; |  |  |
x | &#120; &#x0078; |  |  |
y | &#121; &#x0079; |  |  |
z | &#122; &#x007A; |  |  |
{ | &#123; &#x007B; |  |  |
| | &#124; &#x007C; |  |  |
} | &#125; &#x007D; |  |  |
~ | &#126; &#x007E; |  |  |
 | &#160; &#x00A0; |  | &nbsp; | twarda spacja
¡ | &#161; &#x00A1; | ¡ | &iexcl; | odwrócony wykrzyknik
¢ | &#162; &#x00A2; | ¢ | &cent; |
£ | &#163; &#x00A3; | £ | &pound; |
¤ | &#164; &#x00A4; | ¤ | &curren; |
¥ | &#165; &#x00A5; | ¥ | &yen; |
¦ | &#166; &#x00A6; | ¦ | &brvbar; |
§ | &#167; &#x00A7; | § | &sect; |
¨ | &#168; &#x00A8; | ¨ | &uml; |
© | &#169; &#x00A9; | © | &copy; |
ª | &#170; &#x00AA; | ª | &ordf; |
« | &#171; &#x00AB; | « | &laquo; |
¬ | &#172; &#x00AC; | ¬ | &not; |
 | &#173; &#x00AD; |  | &shy; |
® | &#174; &#x00AE; | ® | &reg; |
¯ | &#175; &#x00AF; | ¯ | &macr; |
° | &#176; &#x00B0; | ° | &deg; |
± | &#177; &#x00B1; | ± | &plusmn; |
² | &#178; &#x00B2; | ² | &sup2; |
³ | &#179; &#x00B3; | ³ | &sup3; |
´ | &#180; &#x00B4; | ´ | &acute; |
µ | &#181; &#x00B5; | µ | &micro; |
¶ | &#182; &#x00B6; | ¶ | &para; |
· | &#183; &#x00B7; | · | &middot; |
¸ | &#184; &#x00B8; | ¸ | &cedil; |
¹ | &#185; &#x00B9; | ¹ | &sup1; |
º | &#186; &#x00BA; | º | &ordm; |
» | &#187; &#x00BB; | » | &raquo; |
¼ | &#188; &#x00BC; | ¼ | &frac14; |
½ | &#189; &#x00BD; | ½ | &frac12; |
¾ | &#190; &#x00BE; | ¾ | &frac34; |
¿ | &#191; &#x00BF; | ¿ | &iquest; |
À | &#192; &#x00C0; | À | &Agrave; |
Á | &#193; &#x00C1; | Á | &Aacute; |
Â | &#194; &#x00C2; | Â | &Acirc; |
Ã | &#195; &#x00C3; | Ã | &Atilde; |
Ä | &#196; &#x00C4; | Ä | &Auml; |
Å | &#197; &#x00C5; | Å | &Aring; |
Æ | &#198; &#x00C6; | Æ | &AElig; |
Ç | &#199; &#x00C7; | Ç | &Ccedil; |
È | &#200; &#x00C8; | È | &Egrave; |
É | &#201; &#x00C9; | É | &Eacute; |
Ê | &#202; &#x00CA; | Ê | &Ecirc; |
Ë | &#203; &#x00CB; | Ë | &Euml; |
Ì | &#204; &#x00CC; | Ì | &Igrave; |
Í | &#205; &#x00CD; | Í | &Iacute; |
Î | &#206; &#x00CE; | Î | &Icirc; |
Ï | &#207; &#x00CF; | Ï | &Iuml; |
Ð | &#208; &#x00D0; | Ð | &ETH; |
Ñ | &#209; &#x00D1; | Ñ | &Ntilde; |
Ò | &#210; &#x00D2; | Ò | &Ograve; |
Ó | &#211; &#x00D3; | Ó | &Oacute; |
Ô | &#212; &#x00D4; | Ô | &Ocirc; |
Õ | &#213; &#x00D5; | Õ | &Otilde; |
Ö | &#214; &#x00D6; | Ö | &Ouml; |
× | &#215; &#x00D7; | × | &times; |
Ø | &#216; &#x00D8; | Ø | &Oslash; |
Ù | &#217; &#x00D9; | Ù | &Ugrave; |
Ú | &#218; &#x00DA; | Ú | &Uacute; |
Û | &#219; &#x00DB; | Û | &Ucirc; |
Ü | &#220; &#x00DC; | Ü | &Uuml; |
Ý | &#221; &#x00DD; | Ý | &Yacute; |
Þ | &#222; &#x00DE; | Þ | &THORN; |
ß | &#223; &#x00DF; | ß | &szlig; |
à | &#224; &#x00E0; | à | &agrave; |
á | &#225; &#x00E1; | á | &aacute; |
â | &#226; &#x00E2; | â | &acirc; |
ã | &#227; &#x00E3; | ã | &atilde; |
ä | &#228; &#x00E4; | ä | &auml; |
å | &#229; &#x00E5; | å | &aring; |
æ | &#230; &#x00E6; | æ | &aelig; |
ç | &#231; &#x00E7; | ç | &ccedil; |
è | &#232; &#x00E8; | è | &egrave; |
é | &#233; &#x00E9; | é | &eacute; |
ê | &#234; &#x00EA; | ê | &ecirc; |
ë | &#235; &#x00EB; | ë | &euml; |
ì | &#236; &#x00EC; | ì | &igrave; |
í | &#237; &#x00ED; | í | &iacute; |
î | &#238; &#x00EE; | î | &icirc; |
ï | &#239; &#x00EF; | ï | &iuml; |
ð | &#240; &#x00F0; | ð | &eth; |
ñ | &#241; &#x00F1; | ñ | &ntilde; |
ò | &#242; &#x00F2; | ò | &ograve; |
ó | &#243; &#x00F3; | ó | &oacute; |
ô | &#244; &#x00F4; | ô | &ocirc; |
õ | &#245; &#x00F5; | õ | &otilde; |
ö | &#246; &#x00F6; | ö | &ouml; |
÷ | &#247; &#x00F7; | ÷ | &divide; |
ø | &#248; &#x00F8; | ø | &oslash; |
ù | &#249; &#x00F9; | ù | &ugrave; |
ú | &#250; &#x00FA; | ú | &uacute; |
û | &#251; &#x00FB; | û | &ucirc; |
ü | &#252; &#x00FC; | ü | &uuml; |
ý | &#253; &#x00FD; | ý | &yacute; |
þ | &#254; &#x00FE; | þ | &thorn; |
ÿ | &#255; &#x00FF; | ÿ | &yuml; |
ƒ | &#402; &#x0192; | ƒ | &fnof; |
Α | &#913; &#x0391; | Α | &Alpha; |
Β | &#914; &#x0392; | Β | &Beta; |
Γ | &#915; &#x0393; | Γ | &Gamma; |
Δ | &#916; &#x0394; | Δ | &Delta; |
Ε | &#917; &#x0395; | Ε | &Epsilon; |
Ζ | &#918; &#x0396; | Ζ | &Zeta; |
Η | &#919; &#x0397; | Η | &Eta; |
Θ | &#920; &#x0398; | Θ | &Theta; |
Ι | &#921; &#x0399; | Ι | &Iota; |
Κ | &#922; &#x039A; | Κ | &Kappa; |
Λ | &#923; &#x039B; | Λ | &Lambda; |
Μ | &#924; &#x039C; | Μ | &Mu; |
Ν | &#925; &#x039D; | Ν | &Nu; |
Ξ | &#926; &#x039E; | Ξ | &Xi; |
Ο | &#927; &#x039F; | Ο | &Omicron; |
Π | &#928; &#x03A0; | Π | &Pi; |
Ρ | &#929; &#x03A1; | Ρ | &Rho; |
Σ | &#931; &#x03A3; | Σ | &Sigma; |
Τ | &#932; &#x03A4; | Τ | &Tau; |
Υ | &#933; &#x03A5; | Υ | &Upsilon; |
Φ | &#934; &#x03A6; | Φ | &Phi; |
Χ | &#935; &#x03A7; | Χ | &Chi; |
Ψ | &#936; &#x03A8; | Ψ | &Psi; |
Ω | &#937; &#x03A9; | Ω | &Omega; |
α | &#945; &#x03B1; | α | &alpha; |
β | &#946; &#x03B2; | β | &beta; |
γ | &#947; &#x03B3; | γ | &gamma; |
δ | &#948; &#x03B4; | δ | &delta; |
ε | &#949; &#x03B5; | ε | &epsilon; |
ζ | &#950; &#x03B6; | ζ | &zeta; |
η | &#951; &#x03B7; | η | &eta; |
θ | &#952; &#x03B8; | θ | &theta; |
ι | &#953; &#x03B9; | ι | &iota; |
κ | &#954; &#x03BA; | κ | &kappa; |
λ | &#955; &#x03BB; | λ | &lambda; |
μ | &#956; &#x03BC; | μ | &mu; |
ν | &#957; &#x03BD; | ν | &nu; |
ξ | &#958; &#x03BE; | ξ | &xi; |
ο | &#959; &#x03BF; | ο | &omicron; |
π | &#960; &#x03C0; | π | &pi; |
ρ | &#961; &#x03C1; | ρ | &rho; |
ς | &#962; &#x03C2; | ς | &sigmaf; |
σ | &#963; &#x03C3; | σ | &sigma; |
τ | &#964; &#x03C4; | τ | &tau; |
υ | &#965; &#x03C5; | υ | &upsilon; |
φ | &#966; &#x03C6; | φ | &phi; |
χ | &#967; &#x03C7; | χ | &chi; |
ψ | &#968; &#x03C8; | ψ | &psi; |
ω | &#969; &#x03C9; | ω | &omega; |
ϑ | &#977; &#x03D1; | ϑ | &thetasym; |
ϒ | &#978; &#x03D2; | ϒ | &upsih; |
ϖ | &#982; &#x03D6; | ϖ | &piv; |
• | &#8226; &#x2022; | • | &bull; |
… | &#8230; &#x2026; | … | &hellip; |
′ | &#8242; &#x2032; | ′ | &prime; |
″ | &#8243; &#x2033; | ″ | &Prime; |
‾ | &#8254; &#x203E; | ‾ | &oline; |
⁄ | &#8260; &#x2044; | ⁄ | &frasl; |
℘ | &#8472; &#x2118; | ℘ | &weierp; |
ℑ | &#8465; &#x2111; | ℑ | &image; |
ℜ | &#8476; &#x211C; | ℜ | &real; |
™ | &#8482; &#x2122; | ™ | &trade; |
ℵ | &#8501; &#x2135; | ℵ | &alefsym; |
← | &#8592; &#x2190; | ← | &larr; |
↑ | &#8593; &#x2191; | ↑ | &uarr; |
→ | &#8594; &#x2192; | → | &rarr; |
↓ | &#8595; &#x2193; | ↓ | &darr; |
↔ | &#8596; &#x2194; | ↔ | &harr; |
↵ | &#8529; &#x21B5; | ↵ | &crarr; |
⇐ | &#8556; &#x21D0; | ⇐ | &lArr; |
⇑ | &#8557; &#x21D1; | ⇑ | &uArr; |
⇒ | &#8558; &#x21D2; | ⇒ | &rArr; |
⇓ | &#8559; &#x21D3; | ⇓ | &dArr; |
⇔ | &#8560; &#x21D4; | ⇔ | &hArr; |
∀ | &#8704; &#x2200; | ∀ | &forall; |
∂ | &#8706; &#x2202; | ∂ | &part; |
∃ | &#8707; &#x2203; | ∃ | &exist; |
∅ | &#8709; &#x2205; | ∅ | &empty; |
∇ | &#8711; &#x2207; | ∇ | &nabla; |
∈ | &#8712; &#x2208; | ∈ | &isin; |
∉ | &#8713; &#x2209; | ∉ | &notin; |
∋ | &#8715; &#x220B; | ∋ | &ni; |
∏ | &#8719; &#x220F; | ∏ | &prod; |
∑ | &#8721; &#x2211; | ∑ | &sum; |
− | &#8722; &#x2212; | − | &minus; |
∗ | &#8727; &#x2217; | ∗ | &lowast; |
√ | &#8730; &#x221A; | √ | &radic; |
∝ | &#8733; &#x221D; | ∝ | &prop; |
∞ | &#8734; &#x221E; | ∞ | &infin; |
∠ | &#8736; &#x2220; | ∠ | &ang; |
∧ | &#8743; &#x2227; | ∧ | &and; |
∨ | &#8744; &#x2228; | ∨ | &or; |
∩ | &#8745; &#x2229; | ∩ | &cap; |
∪ | &#8746; &#x222A; | ∪ | &cup; |
∫ | &#8747; &#x222B; | ∫ | &int; |
∴ | &#8756; &#x2234; | ∴ | &there4; |
∼ | &#8764; &#x223C; | ∼ | &sim; |
≅ | &#8773; &#x2245; | ≅ | &cong; |
≈ | &#8776; &#x2248; | ≈ | &asymp; |
≠ | &#8800; &#x2260; | ≠ | &ne; |
≡ | &#8801; &#x2261; | ≡ | &equiv; |
≤ | &#8804; &#x2264; | ≤ | &le; |
≥ | &#8805; &#x2265; | ≥ | &ge; |
⊂ | &#8834; &#x2282; | ⊃ | &sup; |
⊃ | &#8835; &#x2283; | ⊂ | &sub; |
⊄ | &#8836; &#x2284; | ⊄ | &nsub; |
⊆ | &#8838; &#x2286; | ⊆ | &sube; |
⊇ | &#8839; &#x2287; | ⊇ | &supe; |
⊕ | &#8853; &#x2295; | ⊕ | &oplus; |
⊗ | &#8855; &#x2297; | ⊗ | &otimes; |
⊥ | &#8859; &#x22A5; | ⊥ | &perp; |
⋅ | &#8901; &#x22C5; | ⋅ | &sdot; |
⌈ | &#8968; &#x2308; | ⌈ | &lceil; |
⌉ | &#8969; &#x2309; | ⌉ | &rceil; |
⌊ | &#8970; &#x230A; | ⌊ | &lfloor; |
⌋ | &#8971; &#x230B; | ⌋ | &rfloor; |
〈 | &#9001; &#x2329; | ⟨ | &lang; |
〉 | &#9002; &#x232A; | ⟩ | &rang; |
◊ | &#9674; &#x25CA; | ◊ | &loz; |
♠ | &#9824; &#x2660; | ♠ | &spades; |
♣ | &#9827; &#x2663; | ♣ | &clubs; |
♥ | &#9829; &#x2665; | ♥ | &hearts; |
♦ | &#9830; &#x2666; | ♦ | &diams; |