CMYK
NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML
język znaczników
Język HTML jest
SciSle związany
z siecią WWW
od początków jej
istnienia. Wygoda
korzystania
z hipertekstu
zawierającego
odnoSniki
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.
Jednak
do tworzenia
atrakcyjnych,
a zarazem
poprawnych
dokumentów
HTML
nie wystarczy
pobieżna
znajomoSć kilku
znaczników.
Włodzimierz
Gajda
102 INTERNET.lipiec.2004
HTML
CMYK
WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD
HTML
Vademecum
dla początkujących
Strony WWW Rozważania dotyczące składni zakończymy omówieniem
Dokumenty dostępne w sieci WWW, nazywane potocznie stronami komentarzy.
internetowymi lub stronami WWW, są zapisane w plikach Niektóre przykłady występujące w dalszej częSci artykułu będą
tekstowych. ZawartoSć plików tekstowych możemy przeglądać przedstawiały poprawne zapisy, a niektóre niepoprawne. W celu
i edytować niemal każdym edytorem, na przykład notatnikiem. uniknięcia dwuznacznoSci przyjmiemy zasadę stosowaną
NajczęSciej stosowane jest rozszerzenie .html, .htm lub .xml, w dokumentacji języka. Każdy niepoprawny przykład zostanie
jednak w pewnych sytuacjach możemy się spotkać z .php, .asp, .pl, poprzedzony uwagą PRZYKŁAD NIEPOPRAWNY. Natomiast
.cgi, .sh czy nawet .exe. Rozszerzenia różne od .html, .htm oraz przykłady, które są poprawne, ale niezalecane oznaczymy uwagą
.xml mówią o tym, że dana strona jest wynikiem działania pewnego PRZYKŁAD NIEZALECANY.
programu uruchomionego na serwerze WWW.
TreSć strony internetowej opisujemy w jednym z języków Znaczniki i elementy
HTML, XHTML lub XML. Znaczniki to napisy otoczone znakami < i >. BezpoSrednio po
znaku < występuje nazwa znacznika
Języki znacznikowe
Języki HTML, XHTML oraz XML należą do rodziny języków Przedstawiony znacznik nazywa się STRONG i jest to znacznik
znacznikowych (z ang. MarkUp Languages). W językach takich otwierający elementu STRONG. Duża częSć znaczników
zawartoSć dokumentu przeplata się ze specjalnymi napisami otwierających, lecz nie wszystkie, posiada odpowiadające im
nazywanymi znacznikami (z ang. tag). Ogólnie znaczniki spełniają znaczniki zamykające. Znacznik zamykający różni się od znacznika
trzy funkcje: otwierającego znakiem /:
nadają dokumentowi strukturę, definiując różne jego elementy, Znaczniki otwierający i zamykający otaczają pewien fragment
takie jak rozdziały, podrozdziały czy akapity, tekstu, nadając mu odpowiednie znaczenie. Na przykład znacznik
okreSlają cechy prezentacyjne, takie jak kolor i krój czcionki, STRONG powoduje, że dany fragment dokumentu będzie
definiują semantyczne znaczenie fragmentów dokumentu. wySwietlony pogrubioną czcionką.
Stoi na stacji lokomotywa
W językach HTML oraz XHTML rola znaczników w głównej W powyższym przykładzie znaczniki otwierający
mierze ogranicza się do pierwszego punktu: ustalenia struktury oraz zamykający otaczają wyraz lokomotywa .
zawartoSci. Prezentacyjną stronę dokumentów HTML oraz W ten sposób okreSlamy, że słowo lokomotywa zostanie
XHTML okreSlamy stosując język CSS. Wsparcie semantyczne wySwietlone pogrubioną czcionką.
języków HTML i XHTML jest marginalne. Para znaczników, znacznik otwierający oraz znacznik
W dalszej częSci skupimy się na języku HTML w wersji 4.01. zamykający, okreSla element. Przedstawiony przykład zawierał
element STRONG. Innym przykładem jest:
Ciężka, ogromna i pot z niej spływa.
Szczegółowe informacje dotyczące języków znacznikowych znajdziemy na
Mówimy, że w powyższym tekScie występuje element EM
stronach konsorcjum W3C (http://www.w3c.org) odpowiedzialnego za
o zawartoSci pot . Zasięg elementu okreSlają znaczniki:
ustalanie standardów obowiązujących w sieci WWW:
otwierający oraz zamykający .
HTML, XHTML (http://www.w3c.org/MarkUp/)
XML (http://www.w3c.org/XML/)
Element to nie to samo, co znacznik!
W kodzie:
Kompletna dokumentacja języka HTML 4.01 jest dostępna pod adresem
http://www.w3.org/TR/html4/. Dokument ten w kilku różnych formatach
E = mc2
został dołączony do czasopisma na płycie CD.
występuje element SUP o zawartości 2 zdefiniowany przez znacznik
otwierający oraz znacznik zamykający . Pisząc element
SUP nie używamy znaków < ani >. Wówczas mamy na myśli zawartość:
Składnia języka HTML 4.01 2
Jeśli natomiast piszemy znacznik , wówczas wskazujemy, że
Poznawanie języka HTML rozpoczniemy od składni. Kolejno
chodzi jedynie o zawartość:
omówimy czym są znaczniki oraz elementy, jak również zbiór
znaków, które mogą wystąpić w dokumencie (szczególną uwagę
Analogicznie, stwierdzenie znacznik dotyczy wyłącznie:
poSwięcimy białym znakom); scharakteryzujemy zagnieżdżanie
elementów uwzględniając znaczniki wymagane, opcjonalne oraz
elementy puste; przyjrzymy się atrybutom znaczników.
INTERNET.lipiec.2004 103
CMYK
NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML
Nazwy znaczników możemy pisać literami dowolnej wielkoSci. PRZYKŁAD NIEPOPRAWNY
Wszystkie poniższe przykłady okreSlają ten sam znacznik
Specyfikacja języka HTML stosuje konwencję pisania nazw zinterpretowany jako znacznik! W jaki zatem sposób
znaczników dużymi literami i tej zasady będziemy się trzymali wprowadzić znak mniejszoSci, by został on potraktowany jako
w dalszych przykładach. fragment tekstu? Służą do tego znaki specjalne (ang. character
Wewnątrz znaczników mogą pojawić się białe (puste) znaki. references).
Zarówno Zamiast znaku <, należy użyć napisu <, a zamiast znaku >,
napisu >. Wszystkich znaków specjalnych jest kilkaset. Kilka
jak i najczęSciej stosowanych zostało zawartych w tabeli 2.
postać: Witaj! Żegnaj! Żegnaj!
> a<b a>7
jest poprawnym znacznikiem otwierającym elementu P. Należy Znaki specjalne możemy również wprowadzać podając kod
jednak zwrócić uwagę, że białe znaki poprzedzające nazwę dziesiętny lub szesnastkowy. Na przykład znak ASCII o kodzie 229
znacznika są niedozwolone. Zatem żaden z poniższych trzech możemy uzyskać pisząc å (kod dziesiętny) lub å (kod
znaczników nie jest poprawny: szesnastkowy).
Rrednik umieszczany na końcu znaków specjalnych jest
PRZYKŁAD NIEPOPRAWNY opcjonalny, jednak specyfikacja zaleca jego stosowanie:
< EM> , < /SPAN> ,
Tabela 1 zawiera sumaryczne zestawienie wszystkich PRZYKŁAD NIEZALECANY
elementów języka HTML opisanych w dokumentacji. Uwaga: 7 < a
tabela nie zawiera żadnych elementów, które zostały wycofane
TABELA 2. NAJCZŚCIEJ STOSOWANE ZNAKI SPECJALNE
z języka (ang. deprecated). Przestarzałymi elementami są między
lp. Znak drukowany Znak specjalny
innymi CENTER, I oraz B:
1. < <
2. > >
3. & &
PRZYKŁAD NIEPOPRAWNY
4. ©
Baltazar Gąbka
5. twarda spacja
6. "
Najlepiej nie umieszczać białych znaków wewnątrz znaczników. Nie
stanowi to żadnego ograniczenia, a uchroni przed trudnymi do
Znaki < oraz > mają wewnątrz dokumentu HTML specjalne znaczenie:
odnalezienia błędami. Zamiast:
rozpoczynają i kończą znaczniki. Nie wolno ich używać w treści
dokumentu. Jeśli chcemy zawrzeć w dokumencie znaki < lub >, wówczas
KOTtrzeba wykorzystać znaki specjalne < oraz >.
>
piszmy:
KOT Zagnieżdżanie znaczników
Konieczność stosowania białych znaków wewnątrz znaczników będzie
Elementy HTML możemy zagnieżdżać. Oznacza to, że jeden
nieunikniona, ale dopiero wówczas, gdy będziemy określali atrybuty
element HTML może zawierać inny element:
znaczników.
W powyższym przykładzie występują dwa elementy: element P
TABELA 1. ZESTAWIENIE WSZYSTKICH POPRAWNYCH ELEMENTÓW
oraz element STRONG, przy czym element STRONG jest zawarty
JZYKA HTML 4.01 W WERSJI STRICT
wewnątrz elementu P. Zwróćmy uwagę na sposób otwierania
lp. Znaczenie Znaczniki liczba
i zamykania znaczników. Jest on podobny do zasad stosowanych
1. Definicja DOCTYPE, HTML, HEAD, TITLE, 6
dokumentu BODY, ADDRESS
w wyrażeniach arytmetycznych. Wyrażenie 2*(1/[2+3]) jest
2. Dane dodatkowe META 1
poprawne, natomiast wyrażenie 2*(1/[2)+3] jest błędne. Podobnie
o dokumencie
3. Elementy ogólne DIV, SPAN 2 niepoprawny jest kod:
4. Nagłówki H1, H2, H3, H4, H5, H6 6
5. Tekst dokumentu EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, 19
PRZYKŁAD NIEPOPRAWNY
ABBR, ACRONYM, Q, BLOCKQUOTE, SUB, SUP, P, BR,
PRE, INS, DEL
6. Listy UL, OL, LI, DL, DT, DD 6
Poprawna wersja przedstawionego przykładu jest następująca:
7. Tabelki TABLE, TR, TD, TH, CAPTION, THEAD, TFOOT, 10
TBODY, COL, COLGROUP
8. Hiperłącza A, LINK, BASE 3
O ile powyższa kwestia poprawnego rozmieszczania
9. Obrazy i obiekty IMG, OBJECT, PARAM, MAP, AREA 5
znaczników otwierających i zamykających jest przez swoją
10. Style STYLE 1
11. Formularze FORM, INPUT, BUTTON, SELECT, OPTION, OPTGROUP, 10 analogię do notacji nawiasowej znanej z matematyki doSć
TEXTAREA, LABEL, FIELDSET, LEGEND
oczywista, to sprawa dopuszczalnoSci danego zagnieżdżenia jest
12. Skrypty SCRIPT, NOSCRIPT 2
o wiele bardziej skomplikowana. Na przykład element SPAN
RAZEM 71
może być zawarty wewnątrz komórki tabelki definiowanej
elementem TD:
Znaki specjalne Pomidor?
Z uwagi na to, że znaki < oraz > otaczają znaczniki, wprowadzenie Natomiast zagnieżdżenie elementu DIV wewnątrz elementu
do tekstu poniższych nierównoSci: TITLE jest niedopuszczalne:
104 INTERNET.lipiec.2004
CMYK
WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD
HTML
PRZYKŁAD NIEPOPRAWNY elementami pustymi (ang. empty elements). Przykładem elementu
Każdy element HTML ma SciSle zdefiniowaną dopuszczalną element jest pusty, nie możemy napisać:
zawartoSć. Niedozwolone jest tworzenie kwiatków w postaci:
PRZYKŁAD NIEPOPRAWNY
PRZYKŁAD NIEPOPRAWNY
RED
GREEN
BLUE
usunięte:
Wprawdzie przedstawione cztery elementy EM, BODY, TITLE
RED
GREEN
BLUE
oraz PRE są poprawnie pootwierane i pozamykane przypominają Jak sobie radzić z tymi czterema skomplikowanymi
wyrażenie ([{/ UFF! /}]) jednak zagnieżdżenia takie nie są kategoriami? Rozwiązanie jest bardzo proste. Wystarczy
dopuszczalne w składni HTML. Po pierwsze element EM nie może zapamiętać elementy puste, a tych jest niewiele. HR, BR, IMG,
zawierać elementu BODY. Po drugie element BODY nie może META oraz LINK to w miarę kompletna lista pustych znaczników
zawierać elementu TITLE. Wreszcie element TITLE nie może stosowanych na co dzień. Wszystkie inne znaczniki piszemy
zawierać żadnego elementu, w szczególnoSci PRE. w pełnej postaci.
Zasady dotyczące poprawnoSci zagnieżdżania elementów Zauważmy jeszcze, że w odniesieniu do elementów pustych
HTML poznamy w miarę przyswajania nowych elementów. zamienne stosowanie terminów element oraz znacznik nie
Najlepiej nie stosować zagnieżdżeń, których nie jesteSmy pewni. prowadzi do niejasnoSci.
Znaczniki wymagane, opcjonalne oraz elementy puste Białe znaki w dokumencie HTML
PoSród wielu znaczników występujących w języku HTML częSć Obserwując przykład przedstawiający elementy HTML, HEAD
jest opcjonalna, natomiast częSć konieczna. Są i takie, które są oraz BODY, prezentujący podział kodu na linie i wcięcia
zabronione. przypominające formatowanie programów komputerowych,
Przykładami znaczników opcjonalnych są znaczniki otwierające należy się zastanowić, czy jest to poprawne? Jak przeglądarki
i zamykające elementów HTML, HEAD oraz BODY. Oznacza to, powinny interpretować białe znaki pomiędzy elementami
że pełny kod: HTML?
TABELA 3. BIAłE ZNAKI JZYKA HTML
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)
możemy również napisać: Dokumentacja mówi, że białe znaki nie mają wpływu na
poprawnoSć kodu HTML i nie powinny mieć wpływu na to, jak
i będzie on znaczył dokładnie tyle samo. Elementom HEAD oraz przeglądarka dany dokument wySwietli. O ile uwaga dotycząca
HTML usunęliSmy znacznik zamykający, zaS element BODY został poprawnoSci kodu jest jak najbardziej prawdziwa (przynajmniej
pozbawiony obydwu znaczników. z punktu widzenia oprogramowania walidującego kod HTML
Tak liberalne zasady, pozwalające usunąć zarówno znacznik udostępnianego przez W3C), to graficzna prezentacja strony przez
otwierający, jak i zamykający, dotyczą tylko niewielu elementów. przeglądarki może zostać zakłócona przez białe znaki.
Drugą klasę stanowią elementy, które muszą posiadać znacznik Specyfikacja HTML przestrzega przed umieszczaniem białych
otwierający, zaS znacznik zamykający jest opcjonalny. Przykładem znaków wewnątrz znaczników. Na przykład kod:
takiego elementu jest LI:
W przypadku elementu LI, otwierający znacznik
automatycznie zamyka niezamknięte wczeSniej elementy LI. Kod NajczęSciej spotykanym przykładem potwierdzającym, że białe
ten jest równoważny poniższemu: znaki mogą wpływać na wygląd strony jest seria obrazów
Kolejna kategoria elementów to takie elementy, które muszą alt= PIES >
posiadać oba znaczniki: otwierający i zamykający. Przykładem jest wówczas obrazy będą się stykały. Natomiast umieszczenie
element EM. Zatem kod: elementów IMG w osobnych liniach:
PRZYKŁAD NIEPOPRAWNY
Miała Baba Koguta spowoduje, że pomiędzy obrazami pojawi się drobny odstęp.
jest niepoprawny i powinien być zapisany: OczywiScie istnieją sposoby osiągnięcia dokładnie zamierzonego
Miała Baba Koguta rozkładu elementów, jednak przytoczony przykład wskazuje, że
Ostatni rodzaj elementów to takie elementy, które nie posiadają białe znaki mogą niekiedy wpływać na sposób graficznego
znacznika zamykającego ani żadnej treSci. Nazywamy je przedstawienia strony przez przeglądarkę.
INTERNET.lipiec.2004 105
CMYK
NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML
JeSli chodzi o umieszczenie białych znaków wewnątrz tekstu, na apostrofów jest dopuszczalne jedynie w przypadku, gdy wartoSć
przykład: atrybutu składa się wyłącznie z liter, cyfr, mySlników, kropek,
Kto znaków podkreSlenia oraz dwukropków. Jednak i wówczas
to autorzy specyfikacji zalecają stosowanie cudzysłowów lub
taki? apostrofów:
Kasztaniaki!
to ich rola sprowadza się do separacji wyrazów. Identyczny efekt PRZYKŁAD NIEZALECANY
osiągniemy pisząc:
Kto to taki? Kasztaniaki! JeSli w wartoSci atrybutu chcemy zawrzeć cudzysłów, wówczas
Zarówno spacje, jak i znaki złamania wiersza zostaną wartoSć otaczamy znakami apostrofu, jeSli wartoSć zawiera znak
potraktowane jako pojedyncze separatory wyrazów. JeSli koniecznie apostrofu, wówczas stosujemy cudzysłów. Ewentualnie możemy
zależy nam na umieszczeniu w tekScie spacji lub znaku złamania również znaki zacytować: " (znak ) oraz ' (znak ).
wiersza, wówczas należy się posłużyć znakiem specjalnym WartoScią częSci atrybutów może być nazwa pliku lub adres
(spacja) oraz znacznikiem
(złamanie wiersza). Kod: strony WWW. Zatem wielkoSć liter ma znaczenie w częSci
LIS ZAJĄC przypadków.
spowoduje oddzielenie wyrazów LIS oraz ZAJĄC czterema Niektóre atrybuty posiadają wartoSci logiczne. ObecnoSć
spacjami. Ponieważ spacja to tzw. twarda spacja (ang. atrybutu okreSla daną cechę jako TRUE. Brak atrybutu oznacza
non breakable space), zatem przeglądarka nie powinna złamać wartoSć FALSE.
wiersza pomiędzy słowami LIS oraz ZAJĄC :