Język HTML
HTML (ang. HyperText Markup Language) jest językiem znaczników służącym do tworzenia stron internetowych.
Znaczniki otwierające języka HTML są zwykle stosowane w parze ze znacznikami zamykającymi, np.
<p> ... </p>
Znaczniki mogą zawierać argumenty, zwane też atrybutami, które określają sposób ich działania, np.
<p align="center"> ... </p>
Szablon dokumentu
Szablon prostego dokumentu HTML może wyglądać następująco
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="author" content="***">
<meta name="generator" content="***">
<meta name="keywords" content="***">
<meta name="description" content="***">
<title>***</title>
</head>
<body>
<div align="justify">
<p>
***
</p>
</div>
</body>
</html>
Po wprowadzeniu odpowiednich tekstów w miejsce gwiazdek otrzymujemy kompletny dokument, który może być odczytany przez przeglądarkę internetową.
Kolor tła strony można zmienić stosując w znaczniku body argument bgcolor, np.
<body bgcolor="gray">
przy czym argument color może przybierać wartości "white", "silver", "gray", "black", "red", "green", "blue", "yellow", "aqua", "lime", "purple", "maroon", "olive", "fuchsia", "teal", "navy" i inne.
Kolor można też zdefiniować stosując zapis koloru zdefiniowanego w postaci RGB, określając nasycenie barw składowych w formacie #RRGGBB, gdzie wartości podane są w zapisie szesnastkowym, np.
<body bgcolor="#0022BB">
W podobny sposób można określić kolor tekstu dla całej strony
<body text="white">
Akapity
Akapity umieszcza się pomiędzy znacznikami <p> i </p>
<p> *** </p>
Znacznik <p> może zawierać argument określający sposób formatowania akapitu, np.
<p align="center">
przy czym align może przyjmować wartości "left", "center", "right" i "justify"
Jeżeli konieczne jest złamanie linii w obrębie akapitu należy użyć znacznika <br />.
Czcionki
Rodzaj stosowanej czcionki można określić następująco
<font face="Times">Tekst</font>
Rozmiar czcionki można zmienić stosując argument size
<font size="4">Tekst</font>
przy czym size może przyjmować wartość od 1 (czcionka najmniejsza) do 7 (czcionka największa).
Znacznik font może też zawierać określenia koloru, np.
<font color="red">Tekst</font>
albo w postaci szesnastkowego zapisu RGB
<font color="#11AAFF">Tekst</font>
Znacznik może przyjmować wiele argumentów równocześnie
<font face="Times" size="4" color="red">Tekst</font>
Modyfikacja obrazowania tekstu
Modyfikacji obrazowania fragmentu tekstu można dokonać stosując odpowiednie znaczniki
<b>tekst pogrubiony</b> <i>tekst pochylony</i> <b>tekst podkreślony</b>
Tablice
Tablice w języku HTML tworzy się stosując schemat
<p> <table> <caption>Tytuł tablicy</caption> <tr> <td>***</td> <td>***</td> </tr> <tr> <td>***</td> <td>***</td> </tr> </table> </p>
gdzie pomiędzy znacznikami <tr> i </tr>, ograniczającymi zawartość rzędu tablicy, pomiędzy <td> i </td> umieszcza się zawartość kolejnych komórek.
Za pomocą argumentu border można ustalić grubość obramowania tablicy
<table border="0">...</table>
a za pomocą cellpadding i cellspacing marginesy i odstępy wewnątrz komórek
<table cellpadding="5" cellspacing="2">...</table>
Znacznik <tr> może zawierać m. in. argumenty scalające komórki w kolumnach i w rzędach: colspan i rowspan, np.
<td colspan="2">...</td>
Może też zawierać argument nowrap
<td nowrap="nowrap">...</td>
który blokuje możliwość łamania linii. W takim przypadku do łamania linii należy stosować znacznik <br />.
W miejsce znaczników <td> można zastosować <th>, co spowoduje wyróżnienie zawartości.
Znaczniki <table>, <td> i <th> mogą zawierać argumenty ustalające wysokość i szerokość: heihgt i width, przy czym wartości określają liczbę pikseli albo procent układu, w którym są zawarte (w przypadku znacznika <table> będzie to wielkość ekranu)
<td width="300">...</td> <td width="50%">...</td>
Znacznik <table> może zawierać argument align, określający położenie tablicy na ekranie. Podobnie możliwe jest określenie za pomocą tego argumentu sposobu położenia tekstu w wierszach i komórkach, przy czym w przypadku komórek oprócz pozycjonowania w poziomie za pomocą wartości left, center i right możliwe jest określanie położenia w pionie za pomocą top, middle i bottom.
Zastosowanie argumentu bgcolor umożliwia określenie koloru tła tablicy lub komórki. Stosując argument background można też stworzyć tablicę z tłem w postaci obrazu. Wartość argumentu background stanowi nazwa pliku graficznego.
Argument bordercolor umożliwia zmianę koloru obramowania tablicy, wiersza lub komórki.
Listy
Listy nienumerowane
<ul> <li>...</li> <li>...</li> <li>...</li> </ul>
Argumentem znacznika otwierającego listę <ul> może być type, określające rodzaj znaku stosowanego do wyróżnienia elementu, przyjmujące wartości disc, square albo circle.
Listy numerowane
<ol> <li>...</li> <li>...</li> <li>...</li> </ol>
Znacznik <ol> może zawierać argument type, określający sposób numeracji, który może przyjmować wartość a, A, i, I albo l. Argument start określa wartość początkową numeracji.
Listy definicji
<dl>
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
</dl>
Znacznik <dt> określa hasło, a <dd> definicję.
Obrazy
Obrazy wstawia się do dokumentu za pomocą znacznika <img>
<img src="obraz1.png">
Znacznik <img> często zawiera argumenty alt, align, width i height, np.
<img src="obraz1.png" alt="Tekst zastępczy" align="center" width="300">
Tekst zastępczy będzie wyświetlany w przypadku, gdy przeglądarka nie obsługuje grafiki, alby gdy obraz nie występuje we wskazanym miejscu.
Odsyłacze
Znacznik <a> pozwala na wstawienie tekstu stanowiącego odsyłacz do innego dokumentu
<a href="dokument.html">Tekst</a>
albo strony internetowej
<a href="dokument.html">http://www.gnu.org</a>
Odsyłacz pocztowy tworzy się w podobny sposób
<a href="mailto:nazwa@serwer.org">Tekst</a>
Graficzny odsyłacz obraz1.png do obrazu obraz2.png może mieć następującą postać
<a href="obraz2.png"><img src="obraz1.png"></a>
Odsyłacz w następującej postaci
<a href="#0000000001">Tekst</a>
wskazuje w bieżącym dokumencie miejsce oznakowane etykietą
<a name="0000000001">
Znaki specjalne
" - cudzysłów - "
& - ampersand - &
< - <
> - >
- niełamliwa spacja
­ - łącznik umożliwiający dzielenie wyrazów
  - mały odstęp
  - średni odstęp
  - duży odstęp
– - półpauza
— - pauza (myślnik)
‰ - promil - ‰
€ - euro - €
Opublikowano: 7 marca 2016 r.
Ostatnia aktualizacja: 3 grudnia 2017 r.
skalgo