HTML

HTML

C

M

Y

K

HTML

INTERNET.lipiec.2004

102

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.

Jednak

do tworzenia

atrakcyjnych,

a zarazem

poprawnych

dokumentów

HTML

nie wystarczy

pobie¿na

znajomoϾ kilku

znaczników.

W³odzimierz

Gajda

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT



– język znaczników

C

M

Y

K

Strony WWW

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

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ê ze specjalnymi napisami
nazywanymi znacznikami (z ang. tag). Ogólnie znaczniki spe³niaj¹
trzy funkcje:

X

nadaj¹ dokumentowi strukturê, definiuj¹c ró¿ne jego elementy,
takie jak rozdzia³y, podrozdzia³y czy akapity,

X

okreœlaj¹ cechy prezentacyjne, takie jak kolor i krój czcionki,

X

definiuj¹ semantyczne znaczenie fragmentów dokumentu.

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.

Składnia języka HTML 4.01

Poznawanie jêzyka HTML rozpoczniemy od sk³adni. Kolejno
omówimy czym s¹ znaczniki oraz elementy, jak równie¿ zbiór
znaków, które mog¹ wyst¹piæ w dokumencie (szczególn¹ uwagê
poœwiêcimy bia³ym znakom); scharakteryzujemy zagnie¿d¿anie
elementów uwzglêdniaj¹c znaczniki wymagane, opcjonalne oraz
elementy puste; przyjrzymy siê atrybutom znaczników.

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:

X

HTML, XHTML (http://www.w3c.org/MarkUp/)

X

XML (http://www.w3c.org/XML/)

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
został dołączony do czasopisma na płycie CD.

Rozwa¿ania dotycz¹ce sk³adni zakoñczymy omówieniem
komentarzy.

Niektóre przyk³ady wystêpuj¹ce w dalszej czêœci artyku³u bêd¹

przedstawia³y poprawne zapisy, a niektóre – 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 i elementy

Znaczniki to napisy otoczone znakami < i >. 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 /:

</STRONG>

Znaczniki otwieraj¹cy i zamykaj¹cy otaczaj¹ pewien fragment

tekstu, nadaj¹c mu odpowiednie znaczenie. Na przyk³ad znacznik
STRONG powoduje, ¿e dany fragment dokumentu bêdzie
wyœwietlony pogrubion¹ czcionk¹.

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 zostanie
wyœwietlone pogrubion¹ czcionk¹.

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>

HTML

INTERNET.lipiec.2004

103

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD



Vademecum

dla początkujących

C

M

Y

K

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 tej zasady bêdziemy siê trzymali
w dalszych przyk³adach.

Wewn¹trz znaczników mog¹ pojawiæ siê bia³e (puste) 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:
tabela nie zawiera ¿adnych elementów, które zosta³y wycofane
z jêzyka (ang. deprecated). Przestarza³ymi elementami s¹ miêdzy
innymi CENTER, I oraz B:

PRZYK£AD NIEPOPRAWNY

<B>Baltazar <I>G¹bka</I></B>

Znaki specjalne

Z uwagi na to, ¿e znaki < oraz > otaczaj¹ znaczniki, wprowadzenie
do tekstu poni¿szych nierównoœci:

TABELA 1. ZESTAWIENIE WSZYSTKICH POPRAWNYCH ELEMENTÓW
JĘZYKA HTML 4.01 W WERSJI „STRICT”

lp. Znaczenie

Znaczniki

liczba

1. Definicja

DOCTYPE, HTML, HEAD, TITLE,

6

dokumentu

BODY, ADDRESS

2. Dane dodatkowe

META

1

o dokumencie

3. Elementy ogólne

DIV, SPAN

2

4. Nagłówki

H1, H2, H3, H4, H5, H6

6

5. Tekst dokumentu EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE,

19

ABBR, ACRONYM, Q, BLOCKQUOTE, SUB, SUP, P, BR,
PRE, INS, DEL

6. Listy

UL, OL, LI, DL, DT, DD

6

7. Tabelki

TABLE, TR, TD, TH, CAPTION, THEAD, TFOOT,

10

TBODY, COL, COLGROUP

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,

10

TEXTAREA, LABEL, FIELDSET, LEGEND

12. Skrypty

SCRIPT, NOSCRIPT

2

RAZEM

71

Najlepiej nie umieszczać białych znaków wewnątrz znaczników. Nie
stanowi to żadnego ograniczenia, a uchroni 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.

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, by zosta³ on potraktowany jako
fragment tekstu? S³u¿¹ do tego znaki specjalne (ang. character
references).

Zamiast znaku <, nale¿y u¿yæ napisu &lt;, a zamiast znaku >,

napisu &gt;. 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&lt;b a&gt;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 &#229; (kod dziesiêtny) lub &#xE5; (kod
szesnastkowy).

Œrednik umieszczany na koñcu znaków specjalnych jest

opcjonalny, jednak specyfikacja zaleca jego stosowanie:

PRZYK£AD NIEZALECANY

7 &lt a

Zagnieżdżanie znaczników

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:

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 &lt; oraz &gt;.

TABELA 2. NAJCZĘŚCIEJ STOSOWANE ZNAKI SPECJALNE

lp.

Znak drukowany

Znak specjalny

1.

<

&lt;

2.

>

&gt;

3.

&

&amp;

4.

©

&copy

5.

twarda spacja

&nbsp;

6.

”

&quot;

HTML

INTERNET.lipiec.2004

104

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT



PRZYK£AD NIEPOPRAWNY

<TITLE><DIV>Kartofel!</DIV></TITLE>

Ka¿dy element HTML ma œciœle zdefiniowan¹ dopuszczaln¹

zawartoœæ. Niedozwolone jest tworzenie „kwiatków” 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 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 poznamy w miarê przyswajania nowych elementów.
Najlepiej nie stosowaæ zagnie¿d¿eñ, których nie jesteœmy pewni.

Znaczniki wymagane, opcjonalne oraz elementy puste

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
element EM. Zatem 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 niewiele. HR, BR, IMG,
META oraz LINK to w miarê kompletna lista pustych znaczników
stosowanych na co dzieñ. 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.

Białe znaki w dokumencie HTML

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?

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ê.

TABELA 3. BIAłE ZNAKI JĘZYKA HTML

lp.

Nazwa

Znak specjalny

1.

spacja

&#x0020;

2.

tabulacja

&#x0009;

3.

wysunięcie papieru

&#x000C;

4.

spacja o zerowej szerokości

&#x200B;

5.

powrót karetki (CR)

&#x000D;

6.

złamanie wiersza (LF)

&#x000A;

HTML

INTERNET.lipiec.2004

105

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD



C

M

Y

K

C

M

Y

K

HTML

INTERNET.lipiec.2004

106

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT



NA CD

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 &nbsp;
(spacja) oraz znacznikiem <BR> (z³amanie wiersza). Kod:

LIS&nbsp;&nbsp;&nbsp;&nbsp;ZAJ¥C

spowoduje oddzielenie wyrazów „LIS” oraz „ZAJ¥C” czterema
spacjami. Poniewa¿ spacja &nbsp; to tzw. twarda spacja (ang.
non–breakable space), zatem przegl¹darka nie powinna z³amaæ
wiersza pomiêdzy s³owami „LIS” oraz „ZAJ¥C”:

LISZAJ¥C

Atrybuty znaczników

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 = ”próba”>
<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 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æ: &#34; (znak ”) oraz &#39; (znak ’).

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.

Komentarze w HTML

Analizê sk³adni zakoñczymy omówieniem komentarzy
stosowanych w jêzyku HTML. Komentarze w jêzyku HTML
rozpoczynamy napisem <!––, koñczymy zaœ ––>

<!–– komentarz ––>

Komentarzy nie mo¿na zagnie¿d¿aæ.

Struktura dokumentu HTML

Poprawny, pusty dokument w jêzyku HTML zosta³ przedstawiony
na listingu 1. Sk³ada siê on z trzech czêœci:

X

definicji typu dokumentu (element DOCTYPE),

X

nag³ówka dokumentu (element HEAD),

X

treœci dokumentu (element BODY).

Listing 1. Pusta, polska strona WWW w jêzyku HTML 4.01 strict

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

Wersje języka HTML: ścisła, przejściowa
oraz dopuszczająca ramki

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:

X

œcis³y (ang. strict),

X

przejœciowy (ang. transitional),

X

zawieraj¹cy ramki (ang. frameset).

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
elementem 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.

Dalsza czêœæ artyku³u bêdzie poœwiêcona wy³¹cznie jêzykowi

HTML 4.01 w wersji œcis³ej.

Nagłówek strony WWW

Drugim elementem strony WWW jest jej nag³ówek. Nag³ówek
dokumentu jest zawarty 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 „podpowiedzi dnia” (ang. tip of
the day) dostêpnych na stronach konsorcjum W3C mówi: TITLE
– najwa¿niejszy element dobrej witryny WWW.

Jeœli chodzi o polskie znaki, to pewne zamieszanie powoduje

fakt, ¿e istniej¹ dwa sposoby kodowania. Pierwszy z nich to sposób
propagowany niegdyœ 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

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 stron
w wyszukiwarkach.

Każdy dokument w języku HTML musi zawierać element DOCTYPE.
Brak elementu DOCTYPE powoduje, że dokument nie jest poprawny!

standardach s¹ przedstawione w dokumencie polskieznaki.html na
p³ycie CD.)

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 naraz; 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 m.in. 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), 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), 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.

Treść dokumentu

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>

Podsumowanie

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 tego jêzyka 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 wklepywanie znaczników. Ale i na to znajdzie siê
rada. Jaka? O tym opowiem za miesi¹c.

n

HTML

INTERNET.lipiec.2004

107

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD



C

M

Y

K