Język HTML jest ściśle związany z siecią WWW od początków jej istnienia. Wygoda korzystania z hipertekstu zawierającego odnośniki w połączeniu z prostotą samego języka spowodowała lawinowy wzrost zarówno użytkowników, jak i osób publikujących na łamach WWW. Do tworzenia atrakcyjnych, a zarazem poprawnych dokumentów HTML nie wystarczy jednak pobieżna znajomość kilku znaczników.
Dokumenty dostępne w sieci WWW, nazywane potocznie stronami internetowymi lub stronami WWW są zapisane w plikach tekstowych. Zawartość plików tekstowych możemy przeglądać i edytować niemal każdym edytorem, na przykład notatnikiem. Najczęściej stosowane jest rozszerzenie .html, .htm lub .xml, jednakże w pewnych sytuacjach możemy się spotkać z .php, .asp, .pl, .cgi, .sh czy nawet .exe. Rozszerzenia różne od .html, .htm oraz .xml mówią o tym, że dana strona jest wynikiem działania pewnego programu uruchomionego na serwerze WWW.
Treść strony internetowej opisujemy w jednym z języków HTML, XHTML lub XML.
Języki HTML, XHTML oraz XML należą do rodziny języków znacznikowych (z ang. MarkUp Languages). W językach takich, zawartość dokumentu przeplata się z pewnymi specjalnymi napisami nazywanymi znacznikami (z ang. tag). Ogólnie, znaczniki spełniają trzy funkcje:
W językach HTML oraz XHTML rola znaczników w głównej mierze ogranicza się do pierwszego punktu: ustalenia struktury zawartości. Prezentacyjną stronę dokumentów HTML oraz XHTML określamy stosując język CSS. Wsparcie semantyczne języków HTML i XHTML jest marginalne.
W dalszej części skupimy się na języku HTML w wersji 4.01.
Szczegółowe informacje dotyczące języków znacznikowych znajdziemy na stronach konsorcjum W3C (http://www.w3c.org/) odpowiedzialnego za ustalanie standardów obowiązujących w sieci WWW:
Kompletna dokumentacja języka HTML 4.01 jest dostępna pod adresem http://www.w3.org/TR/html4/.
Poznawanie języka HTML rozpoczniemy od składni. Kolejno omówimy:
Rozważania dotyczące składni zakończymy omówieniem komentarzy.
Część przykładów występujących w dalszej części artykułu będzie przedstawiała poprawne zapisy, a część — niepoprawne. W celu uniknięcia dwuznaczności przyjmiemy zasadę stosowaną w dokumentacji języka. Każdy niepoprawny przykład zostanie poprzedzony uwagą PRZYKŁAD NIEPOPRAWNY. Natomiast przykłady, które są poprawne ale niezalecane oznaczymy uwagą PRZYKŁAD NIEZALECANY.
Znaczniki to napisy otoczone znakami < oraz >. Bezpośrednio po znaku < występuje nazwa znacznika:
<STRONG>
Przedstawiony znacznik nazywa się STRONG i jest to znacznik otwierający elementu STRONG. Duża część znaczników otwierających, lecz nie wszystkie, posiada odpowiadające im znaczniki zamykające. Znacznik zamykający różni się od znacznika otwierającego znakiem / nazywanym ukośnikiem (ang. slash):
</STRONG>
Znaczniki otwierający i zamykający otaczają pewien fragment tekstu nadając mu odpowiednie znaczenie. Na przykład przedstawiony znacznik STRONG uwypukla fragment dokumentu:
Stoi na stacji <STRONG>lokomotywa</STRONG>
W powyższym przykładzie znaczniki otwierający <STRONG> oraz zamykający </STRONG> otaczają wyraz „lokomotywa”. W ten sposób określamy, że słowo lokomotywa powinno zostać uwypuklone.
Para znaczników, znacznik otwierający oraz znacznik zamykający, określa element. Przedstawiony przykład zawierał element STRONG. Innym przykładem jest:
Ciężka, ogromna i <EM>pot</EM> z niej spływa.
Mówimy, że w powyższym tekście występuje element EM o zawartości „pot”. Zasięg elementu określają znaczniki: otwierający <EM>, oraz zamykający </EM>.
Element to nie to samo, co znacznik!
W kodzie:
E = mc<SUP>2</SUP>
występuje element SUP o zawartości „2” zdefiniowany przez znacznik otwierający <SUP> oraz znacznik zamykający </SUP>. Pisząc „element SUP” nie używamy znaków < ani >. Wówczas mamy na myśli zawartość:
<SUP>2</SUP>
Jeśli natomiast piszemy „znacznik <SUP>” wówczas wskazujemy, że chodzi jedynie o zawartość:
<SUP>
Analogicznie, stwierdzenie „znacznik </SUP>” dotyczy wyłącznie:
</SUP>
Nazwy znaczników możemy pisać literami dowolnej wielkości. Wszystkie poniższe przykłady określają ten sam znacznik <TD>:
<TD> <Td> <tD> <td>
Specyfikacja języka HTML stosuje konwencję pisania nazw znaczników dużymi literami i takiej też zasady będziemy się trzymali w dalszych przykładach.
Wewnątrz znaczników mogą pojawić się białe znaki. Zarówno:
<P >
jak i
<P >
jest poprawnym znacznikiem otwierającym elementu P. Należy jednak zwrócić uwagę, że białe znaki poprzedzające nazwę znacznika są niedozwolone. Zatem żaden z poniższych trzech znaczników nie jest poprawny:
PRZYKŁAD NIEPOPRAWNY < EM> , < /SPAN> , </ DIV>
Tabela 1 zawiera sumaryczne zestawienie wszystkich elementów języka HTML opisanych w dokumentacji. Uwaga, tabelka nie zawiera żadnych elementów, które zostały wycofane z języka (ang. deprecated). Przestarzałymi elementami są: APPLET, BASEFONT, CENTER, DIR, FONT, ISINDEX, MENU S STRIKE oraz U. Pominięte zostały również elementy niezalecane B, I, TT, BIG, SMALL oraz elementy dotyczące ramek FRAMESET, FRAME, NOFRAMES i IFRAME.
Najlepiej nie umieszczać białych znaków wewnątrz znaczników. Nie stanowi to żadnego ograniczenia, a uchroni nas przed trudnymi do odnalezienia błędami. Zamiast:
<STRONG >KOT</STRONG >
piszmy:
<STRONG>KOT</STRONG>
Konieczność stosowania białych znaków wewnątrz znaczników będzie nieunikniona, ale dopiero wówczas, gdy będziemy określali atrybuty znaczników.
lp. | Znaczenie | Znaczniki | liczba |
---|---|---|---|
lp. | Znaczenie | Znaczniki | liczba |
1. | Definicja dokumentu | DOCTYPE, HTML, HEAD, TITLE, BODY, ADDRESS | 6 |
2. | Dane dodatkowe o dokumencie | META | 1 |
3. | Elementy ogólne | DIV, SPAN | 2 |
4. | Nagłówki | H1, H2, H3, H4, H5, H6 | 6 |
5. | Tekst dokumentu | P, BR PRE EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM Q, BLOCKQUOTE SUB, SUP |
17 |
5. | Zmiany w dokumencie | INS, DEL | 2 |
6. | Listy | UL, OL, LI, DL, DT, DD | 6 |
7. | Tabelki | TABLE, TR, TD, TH, CAPTION, THEAD, TFOOT, TBODY, COL, COLGROUP | 10 |
8. | Hiperłącza | A, LINK, BASE | 3 |
9. | Obrazy i obiekty | IMG, OBJECT, PARAM, MAP, AREA | 5 |
10. | Style | STYLE | 1 |
11. | Formularze | FORM, INPUT, BUTTON, SELECT, OPTION, OPTGROUP, TEXTAREA, LABEL, FIELDSET, LEGEND | 10 |
12. | Skrypty | SCRIPT, NOSCRIPT | 2 |
13. | Inne | HR, <!-- -->, BDO | 3 |
RAZEM | 74 |
Tabela 1. Zestawienie wszystkich poprawnych elementów języka HTML 4.01 w wersji "strict"
Z uwagi na to, że znaki < oraz > otaczają znaczniki, wprowadzenie tekstu poniższych nierówności:
PRZYKŁAD NIEPOPRAWNY a<b a>7
będzie prowadziło do dwuznaczności. Napis <b a> zostanie zinterpretowany jako znacznik! W jaki zatem sposób wprowadzić znak mniejszości tak, by został on potraktowany jako fragment tekstu? Służą do tego znaki specjalne (ang. character references).
Zamiast znaku < należy użyć napisu <, a zamiast znaku > — napisu >. Wszystkich znaków specjalnych jest kilkaset. Kilka najczęściej stosowanych zostało zawartych w tabeli 2.
Poprzedni przykład, po zastosowaniu znaków specjalnych ma postać
a<b a>7
Znaki specjalne możemy również wprowadzać podając kod dziesiętny lub szesnastkowy. Na przykład znak ASCII o kodzie 229 możemy uzyskać pisząc å (kod dziesiętny) lub å (kod szesnastkowy).
Średnik umieszczany na końcu znaków specjalnych jest opcjonalny, jednakże specyfikacja zaleca jego stosowanie.
PRZYKŁAD NIEZALECANY 7 < a
lp. | Nazwa | Znak drukowany | Znak specjalny |
---|---|---|---|
lp. | Nazwa | Znak drukowany | Znak specjalny |
1. | Znak mniejszości | < | < |
2. | Znak większości | > | > |
3. | Ampersand | & | & |
4. | Copyright | © | © |
5. | Twarda spacja | | |
6. | Cudzysłów | " | " |
7. | Apostrof | ' | ' |
8. | Myślnik | — | — |
9. | Półpauza | – | – |
10. | Otwierający polski cudzysłów | „ | „ |
11. | Zamykający polski cudzysłów | ” | ” |
12. | Iloczyn kartezjański | × | × |
13. | Wielokropek | … | … |
14. | Strzałka w prawo | → | → |
15. | Strzałka do góry | ↑ | ↑ |
16. | Strzałka do dołu | ↓ | ↓ |
17. | Strzałka w lewo | ← | ← |
Tabela 2. Najczęściej stosowane znaki specjalne
Znaki < oraz > mają wewnątrz dokumentu HTML specjalne znaczenie: rozpoczynają i kończą znaczniki. Nie wolno ich używać w treści dokumentu. Jeśli chcemy zawrzeć w dokumencie znaki < lub > wówczas trzeba wykorzystać znaki specjalne < oraz >.
Elementy HTML możemy zagnieżdżać. Oznacza to, że jeden element HTML może zawierać inny element
<P><STRONG>Witaj!</STRONG></P>
W powyższym przykładzie występują dwa elementy: element P oraz element STRONG, przy czym element STRONG jest zawarty wewnątrz elementu P. Zwróćmy uwagę, na sposób otwierania i zamykania znaczników. Jest on podobny do zasad stosowanych w wyrażeniach arytmetycznych. Wyrażenie 2*(1/[2+3]) jest poprawne, natomiast wyrażenie 2*(1/[2)+3] jest błędne. Podobnie, niepoprawny jest kod:
PRZYKŁAD NIEPOPRAWNY <P><EM>Żegnaj!</P></EM>
Poprawna wersja przedstawionego przykładu jest następująca:
<P><EM>Żegnaj!</EM></P>
O ile powyższa kwestia poprawnego rozmieszczania znaczników otwierających i zamykających jest — przez swoją analogię do notacji nawiasowej znanej z matematyki — dość oczywista, to sprawa dopuszczalności danego zagnieżdżenia jest o wiele bardziej skomplikowana. Na przykład element SPAN może być zawarty wewnątrz komórki tabelki definiowanej elementem TD:
<TD><SPAN>Pomidor?</SPAN></TD>
Natomiast zagnieżdżenie elementu DIV wewnątrz elementu TITLE jest niedopuszczalne:
PRZYKŁAD NIEPOPRAWNY <TITLE><DIV>Kartofel!</DIV></TITLE>
Każdy element HTML ma ściśle zdefiniowaną dopuszczalną zawartość. Niedozwolone jest tworzenie „kwiatków” postaci:
PRZYKŁAD NIEPOPRAWNY <EM><BODY><TITLE><PRE>UFF!</PRE></TITLE></BODY></EM>
Wprawdzie przedstawione cztery elementy EM, BODY, TITLE oraz PRE są poprawnie pootwierane i pozamykane — przypominają wyrażenie ([{/ UFF! /}]) — jednakże zagnieżdżenia takie nie są dopuszczalne w składni HTML. Po pierwsze element EM nie może zawierać elementu BODY. Po drugie element BODY nie może zawierać elementu TITLE. Wreszcie element TITLE nie może zawierać żadnego elementu, w szczególności PRE.
Zasady dotyczące poprawności zagnieżdżania elementów HTML będziemy poznawali w miarę przyswajania nowych elementów. Najlepiej nie stosować zagnieżdżeń, których nie jesteśmy pewni.
Pośród wielu znaczników występujących w języku HTML część jest opcjonalna, natomiast część — konieczna. Są i takie, które są zabronione.
Przykładami znaczników opcjonalnych są znaczniki otwierające i zamykające elementów HTML, HEAD oraz BODY. Oznacza to, że pełny kod:
<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
możemy również napisać:
<HTML><HEAD>
i będzie on znaczył dokładnie tyle samo. Elementom HEAD oraz HTML usunęliśmy znacznik zamykający, zaś element BODY został pozbawiony obydwu znaczników.
Tak liberalne zasady, pozwalające usunąć zarówno znacznik otwierający jak i zamykający, dotyczą tylko niewielu elementów. Drugą klasę stanowią elementy, które muszą posiadać znacznik otwierający, zaś znacznik zamykający jest opcjonalny. Przykładem takiego elementu jest LI:
<LI>Abra <LI>Kadabra <LI>Bęc
W przypadku elementu LI, otwierający znacznik <LI> automatycznie zamyka niezamknięte wcześniej elementy LI. Kod ten jest równoważny poniższemu:
<LI>Abra</LI> <LI>Kadabra</LI> <LI>Bęc</LI>
Kolejna kategoria elementów, to takie elementy, które muszą posiadać oba znaczniki: otwierający i zamykający. Przykładem jest elementy EM. Kod:
PRZYKŁAD NIEPOPRAWNY <EM>Miała <EM>Baba <EM>Koguta
jest niepoprawny i powinien być zapisany:
<EM>Miała</EM> <EM>Baba</EM> <EM>Koguta</EM>
Ostatni rodzaj elementów, to takie elementy, które nie posiadają znacznika zamykającego ani żadnej treści. Nazywamy je elementami pustymi (ang. empty elements). Przykładem elementu pustego jest BR — element powodujący złamanie wiersza. Ponieważ element jest pusty, nie możemy napisać:
PRZYKŁAD NIEPOPRAWNY <BR>RED</BR><BR>GREEN</BR><BR>BLUE</BR>
Znaczniki zamykające </BR> są niedozwolone i muszą zostać usunięte:
<BR>RED<BR>GREEN<BR>BLUE
Jak sobie radzić z tymi czterema skomplikowanymi kategoriami? Rozwiązanie jest bardzo proste. Wystarczy zapamiętać elementy puste, a tych jest naprawdę niewiele. AREA, BASE, BR, COL, HR, IMG, INPUT, LINK, META oraz PARAM to kompletna lista pustych znaczników (pominięty został jedynie element FRAME). . Wszystkie inne znaczniki piszemy w pełnej postaci.
Zauważmy jeszcze, że w odniesieniu do elementów pustych zamienne stosowanie terminów „element” oraz „znacznik” nie prowadzi do niejasności.
Obserwując przykład przedstawiający elementy HTML, HEAD oraz BODY prezentujący podział kodu na linie i wcięcia przypominające formatowanie programów komputerowych należy się zastanowić, czy jest to poprawne? Jak przeglądarki powinny interpretować białe znaki pomiędzy elementami HTML?
lp. | Nazwa | Znak specjalny |
---|---|---|
lp. | Nazwa | Znak specjalny |
1. | spacja |   |
2. | tabulacja | 	 |
3. | wysunięcie papieru |  |
4. | spacja o zerowej szerokości | ​ |
5. | powrót karetki (CR) | 
 |
6. | złamanie wiersza (LF) | 
 |
Tabela 3. Białe znaki języka HTML
Dokumentacja mówi, że białe znaki nie mają wpływu na poprawność kodu HTML i nie powinny mieć wpływu na to jak przeglądarka dany dokument wyświetli. O ile uwaga dotycząca poprawności kodu jest jak najbardziej prawdziwa (przynajmniej z punktu widzenia oprogramowania walidującego kod HTML udostępnianego przez W3C), to graficzna prezentacja strony przez przeglądarki może zostać zakłócona przez białe znaki.
Specyfikacja HTML przestrzega przed umieszczaniem białych znaków wewnątrz znaczników. Na przykład kod:
PRZYKŁAD NIEZALECANY Fiat<EM> Audi </EM>Ford
bezpieczniej zapisać:
Fiat <EM>Audi</EM> Ford
Najczęściej spotykanym przykładem potwierdzającym, że białe znaki mogą wpływać na wygląd strony jest seria obrazów wstawionych do dokumentu elementem IMG. Jeśli elementy IMG nie są oddzielone białymi znakami:
<IMG src="kot.jpg" alt="KOT"><IMG src="pies.jpg" alt="PIES">
wówczas obrazy będą się stykały. Natomiast umieszczenie elementów IMG w osobnych liniach:
<IMG src="kot.jpg" alt="KOT"> <IMG src="pies.jpg" alt="PIES">
spowoduje, że pomiędzy obrazami pojawi się drobny odstęp. Oczywiście istnieją sposoby osiągnięcia dokładnie zamierzonego rozkładu elementów, jednak przytoczony przykład wskazuje, że białe znaki mogą niekiedy wpływać na sposób graficznego przedstawienia strony przez przeglądarkę.
Jeśli chodzi o umieszczenie białych znaków wewnątrz tekstu, na przykład:
Kto to taki? Kasztaniaki!
to ich rola sprowadza się do separacji wyrazów. Identyczny efekt osiągniemy pisząc:
Kto to taki? Kasztaniaki!
Zarówno spacje, jak i znaki złamania wiersza zostaną potraktowane jako pojedyncze separatory wyrazów. Jeśli koniecznie zależy nam na umieszczeniu w tekście spacji lub znaku złamania wiersza, wówczas należy się posłużyć znakiem specjalnym (spacja) oraz znacznikiem <BR> (złamanie wiersza). Kod:
LIS ZAJĄC
spowoduje oddzielenie wyrazów „LIS” oraz „ZAJĄC” czterema spacjami. Ponieważ spacja to tzw. twarda spacja (ang. non-breakable space), zatem przeglądarka nie powinna złamać wiersza pomiędzy słowami „LIS” oraz „ZAJĄC”:
LIS ZAJĄC
Przedstawiony przed chwilą element IMG prezentuje ostatnią nieomówioną cechę znaczników. Otóż znaczniki (niemal wszystkie) mogą posiadać atrybuty. Przykładami atrybutów są napisy src="pies.jpg" oraz alt="PIES" w znaczniku:
<IMG src="pies.jpg" alt="PIES">
Każdy z atrybutów ma swoją nazwę. W powyższym przykładzie atrybuty nazywają się alt oraz src. Po nazwie atrybutu następuje znak równości oraz wartość atrybutu. Należy zwrócić uwagę, by nie stawiać znaków spacji dookoła znaku równa się. Żaden z poniższych dwóch znaczników nie jest poprawny:
PRZYKŁAD NIEPOPRAWNY <H1 class = "proba"> <UL id = "nazwiska">
Nazwę atrybutu możemy pisać, podobnie jak nazwę znacznika, literami dowolnej wielkości:
<strong CLASS="zielona"> <sTrOnG claSS="zielona">
Wygodnie jest jednak przyjąć zasadę stosowaną w specyfikacji języka: nazwy znaczników piszemy dużymi literami, zaś nazwy atrybutów — małymi.
Białe znaki oddzielające atrybuty, jak i kolejność atrybutów nie gra roli. Oba poniższe znaczniki są równoważne:
<IMG src="Zima.jpg" alt="Zdjęcie" id="zd1"> <IMG alt="Zdjęcie" id="zd1" src="Zima.jpg" >
Oczywiście każdy ze znaczników może przyjmować tylko określone atrybuty. Podobnie jak w przypadku zagnieżdżania znaczników najlepiej użycie każdego atrybutu poprzedzić sprawdzeniem.
Dodatkowo, pewne atrybuty są konieczne. Przykładem atrybutu koniecznego jest atrybut alt elementu IMG. Pominięcie go:
PRZYKŁAD NIEPOPRAWNY <IMG src="las.png">
powoduje, że znacznik jest niepoprawny.
Wartości atrybutów powinny być otoczone znakami " (cudzysłów) lub ' (apostrof). Pominięcie cudzysłowów oraz apostrofów jest dopuszczalne jedynie w przypadku, gdy wartość atrybutu składa się wyłącznie z liter, cyfr, myślników, kropek, znaków podkreślenia oraz dwukropków. Jednakże i wówczas autorzy specyfikacji zalecają stosowanie cudzysłowów lub apostrofów.
PRZYKŁAD NIEZALECANY <IMG src=kot.jpg alt=Fotografia5>
Jeśli w wartości atrybutu chcemy zawrzeć cudzysłów, wówczas wartość otaczamy znakami apostrofu, jeśli wartość zawiera znak apostrofu, wówczas stosujemy cudzysłów. Ewentualnie możemy również znaki zacytować: " lub " (cudzysłów ") oraz ' (apostrof ').
Wartością części atrybutów może być nazwa pliku lub adres strony WWW. Zatem wielkość liter ma znaczenie w części przypadków.
Niektóre atrybuty posiadają wartości logiczne. Obecność atrybutu określa daną cechę jako TRUE. Brak atrybutu oznacza wartość FALSE.
<OPTION selected>
Atrybuty takie nie mają znaku równości i wartości. Wprawdzie specyfikacja określa jako poprawne również atrybuty logiczne postaci
PRZYKŁAD NIEZALECANY <OPTION selected="selected">
jednak ze względu na to, że wiele przeglądarek może mieć z takim zapisem kłopot zalecana jest notacja skrócona.
Analizę składni zakończymy omówieniem komentarzy stosowanych w języku HTML. Komentarze w języku HTML rozpoczynamy napisem <!--, zaś kończymy -->
<!-- komentarz -->
Komentarzy nie można zagnieżdżać. Można natomiast umieszczać w nich znaczniki:
<!-- <strong>CAT</strong> --> <!-- <em> --> DOG <!-- </em> -->
Poprawny, pusty dokument w języku HTML został przedstawiony na listingu 1. Składa się on z trzech części:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE></TITLE> <META http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> </BODY> </HTML>
Listing 1. Pusta, polska strona WWW w języku HTML 4.01 strict
Element DOCTYPE określający użyty dialekt języka HTML jest obowiązkowy i nie może zostać pominięty. W języku HTML 4.01 dostępne są trzy dialekty:
W zależności od wybranego dialektu część znaczników i elementów może być niedostępna. Najwęższym dialektem jest wersja ścisła. Element DOCTYPE ma wówczas postać:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Wersja ścisła dopuszcza tylko nieprzestarzałe elementy i nie dopuszcza ramek.
Wersja przejściowa jest rozszerzeniem wersji ścisłej. Dokumenty w wersji przejściowej rozpoczynają się następującym element DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
i mogą zawierać wszystkie elementy dozwolone w wersji ścisłej jak również elementy wycofane z języka (ang. deprecated).
Ostatni możliwy typ dokumentu, to wersja z ramkami:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Stosując wersję z ramkami możemy używać wszystkich elementów dopuszczonych w wersji przejściowej, a także elementów definiujących ramki.
Każdy dokument w języku HTML musi zawierać element DOCTYPE. Brak elementu DOCTYPE powoduje, że dokument nie jest poprawny!
Dalsza część artykułu będzie poświęcona wyłącznie językowi HTML 4.01 w wersji ścisłej.
Drugim elementem strony WWW jest jej nagłówek. Nagłówek znajduje się pomiędzy znacznikami <HEAD> oraz </HEAD> i zawiera informacje charakteryzujące dany dokument. Przykładami takich informacji są imię i nazwisko autora, język dokumentu czy jego tytuł. Decyzja o tym, jakie informacje ogólne o dokumencie umieścić w nagłówku należy do autora strony. Konieczne jest jedynie umieszczenie tytułu dokumentu oraz informacji na temat stosowanego kodowania znaków.
Tytuł dokumentu określamy znacznikami <TITLE> oraz </TITLE>. Pamiętajmy, że jest to element niezmiernie istotny z punktu widzenia klasyfikacji naszego dokumentu przez wyszukiwarki internetowe. Jedna z tak zwanych „podpowiedzi dnia” (ang. Tip of The Day) dostępnych na stronach konsorcjum W3C mówi: "TITLE — najważniejszy element dobrej witryny WWW".
Element TITLE jest bardzo ważny i nie może zostać pominięty! Tytuły nadawane stronom WWW powinny być jasne i zwięzłe. Warto pamiętać, że element TITLE odgrywa niezmiernie ważną rolę w pozycjonowaniu naszych stron w wyszukiwarkach.
Jeśli chodzi o polskie znaki, to pewne zamieszanie powoduje fakt, że istnieją dwa sposoby kodowania. Pierwszy z nich, to sposób propagowany przez firmę Microsoft, zaś drugi, to międzynarodowy standard zatwierdzony przez organizację ISO. Formaty te są identyfikowane jako windows-1250 oraz iso-8859-2.
W formacie windows-1250 litera Ą ma kod dziesiętny 165. Kodem tej samej litery Ą w standardzie iso-8859-2 jest natomiast liczba 161. (Kody wszystkich polskich znaków w obydwu standardach są przedstawione w dokumencie polskieznaki.html.)
Sposób zakodowania polskich liter w pliku tekstowym jest cechą danego pliku. Plik albo zawiera kodowanie iso-8859-2 albo windows-1250 (oczywiście może się zdarzyć frapujący przypadek zastosowania obu kodów na raz; sytuacja taka może się pojawić po niepoprawnej konwersji kodów i należy ją traktować jako błędną). Z poziomu języka HTML nie możemy dokonać konwersji. Żaden ze znaczników HTML nie modyfikuje strony odczytanej z pliku. Tak jak nie ma znaczników, które powodują zamianę liter małych na duże, tak nie ma znaczników zmieniających kodowanie polskich znaków (konwersja liter dużych na małe dotyczy prezentacji dokumentu i jest osiągalna przy użyciu stylów).
Zatem przygotowując stronę WWW musimy wiedzieć, jakie kodowanie polskich znaków stosuje dany edytor. Na przykład oprogramowanie Windows stosuje kodowanie windows-1250 (Oczywiście każda aplikacja może mieć opcję: Zapisz w formacie ..., która dokonuje konwersji. Jednak wykonanie polecenia Plik → Zapisz w większości aplikacji Windows utworzy plik w kodzie windows-1250). Oznacza to tyle, że tworząc stronę WWW programem notatnik otrzymujemy dokument z kodami windows-1250.
Element META języka HTML służy miedzy innymi do ustalenia kodowania znaków w dokumencie. Pamiętajmy jednak, by w dokumencie umieszczać informacje o kodowaniu zgodną z fizycznym zapisem pliku. Jeżeli plik zawiera polską literę Ą zakodowaną kodem 165 (kod windows-1250) to należy umieścić element:
<META http-equiv="Content-Type" content="text/html; charset=windows-1250">
Jeśli natomiast kodem litery Ą jest liczba 161 (kod iso-8859-2), to należy użyć elementu:
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
W środowisku internautów przeważa opinia, że należy stosować kodowanie w formacie ISO.
Dokument HTML przygotowany standardowym notatnikiem Windows zawiera polskie znaki w formacie windows-1250. W dokumencie takim należy umieścić element:
<META http-equiv="Content-Type" content="text/html; charset=windows-1250">
Zmiana znacznika kodowania META z windows-1250 na iso-8859-2 nie wystarczy. Należy jeszcze dokument poddać konwersji znaków.
Treść dokumentu jest zawarta wewnątrz elementu BODY, czyli pomiędzy znacznikami <BODY> oraz </BODY>. Warto zapamiętać, że wewnątrz elementu BODY nie możemy umieszczać tekstu:
PRZYKŁAD NIEPOPRAWNY <BODY> Witam na mojej stronie! </BODY>
a jedynie inne elementy HTML:
<BODY> <P> Witam na mojej stronie! </P> </BODY>
Osobom rozpoczynającym naukę języka HTML może się wydawać, że składnia języka HTML jest zawiła i niejednoznaczna. Tak nie jest. Myślę, że samodzielne przygotowanie kilku dokumentów wystarczy do opanowania HTML w dostatecznym stopniu.
Rzeczą, która najbardziej przeraża dużą część osób, szczególnie tych, które się zetknęły z edytorami WYSIWYG w rodzaju FrontPage, jest ręczne wklepywanie znaczników. Ale i na to znajdzie się rada.
Dodajmy jeszcze na zachęte, że nauka HTML jest konieczna jeśli myślimy o tym, by w przyszłości tworzyć strony WWW w języku PHP.