Wszystkie przykłady opisane w artykule

znajdują się na dołączonej

płycie CD w katalogu Warsztat_HTML.

HTML

HTML

C

M

Y

K

HTML

INTERNET.listopad.2004

106

Jednym

z g³ównych

powodów

ogromnego

zainteresowania

Internetem

u schy³ku

XX wieku by³a

funkcjonalnoϾ

hipertekstu.

Oto bez

znajomoœci

¿adnych

tajemniczych

komend

przeciêtny

u¿ytkownik móg³

wêdrowaæ po

zasobach
Internetu,

pod¹¿aj¹c œcie¿k¹

hiper³¹czy.

W artykule

przyjrzymy siê

nieco bli¿ej

internetowym

odnoœnikom

i przygotujemy

kilka prostych

witryn

wyjaœniaj¹cych

tworzenie

hiper³¹czy.

W³odzimierz

Gajda

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

!

– hiperłącza

C

M

Y

K

H

iper³¹cza, w ¿argonie internautów zwane linkami, kotwicami czy na-
wet – nieco ¿artobliwie – sznurkami, s¹ interaktywnymi odsy³acza-
mi, które znajduj¹ siê w treœci dokumentu. Same odsy³acze nie s¹ ni-

czym nowym. Nowoœci¹ jest ich interaktywnoœæ.

W ksi¹¿kach i innych publikacjach drukowanych mamy do czynienia

z kilkoma rodzajami odsy³aczy. Jednym z nich s¹ zdania: dodatkowe infor-
macje podano w rozdziale trzecim na stronie 234. W celu pod¹¿enia za ta-
kim odsy³aczem, czytelnik musi przekartkowaæ ksi¹¿kê, by dotrzeæ do po-
danej strony. Odsy³acze takie mog¹ siê ró¿niæ dok³adnoœci¹ wskazania do-
celowej informacji, umiejscowieniem w tekœcie oraz formatem. £¹cz¹ je
natomiast nastêpuj¹ce wspólne cechy:

!

wskazuj¹ inne Ÿród³o informacji,

!

zawieraj¹ adres umo¿liwiaj¹cy odnalezienie tego Ÿród³a.

G³ówn¹ cech¹, która odró¿nia hiper³¹cza internetowe od odsy³aczy

ksi¹¿kowych jest to, ¿e przeniesienie do wskazywanych materia³ów jest
natychmiastowe. Nie musimy nic szukaæ ani kartkowaæ. Wystarczy klikn¹æ
mysz¹, a bie¿¹cy dokument zostanie zast¹piony dokumentem wskazywa-
nym przez odsy³acz! Kto wie, czy ta wygoda i prostota w przechodzeniu
od dokumentu do dokumentu nie by³a najistotniejszym czynnikiem warun-
kuj¹cym lawinowy wzrost popularnoœci WWW.

W ten sposób nieco okrê¿n¹ drog¹ dotarliœmy do elementu A jêzyka

HTML. Element ten ma postaæ:

<A href=”adres dokumentu”>informacje o treœci</A>

Wartoœci¹ atrybutu href (ang. hypertext reference – odwo³anie hipertek-

stowe) jest adres dokumentu, zaœ zawartoœæ elementu, umieszczana pomiê-
dzy znacznikami <A ...> oraz </A>, informuje o treœci.

W poni¿szych æwiczeniach praktycznych nale¿y zwróciæ uwagê na

fakt, ¿e witryny zawieraj¹ce hiper³¹cza zazwyczaj (choæ nie zawsze!) sk³a-
daj¹ siê z kilku osobnych plików. W celu unikniêcia zamieszania najlepiej
ka¿de z æwiczeñ wykonywaæ w osobnym folderze.

Æ

WICZENIE

1

Przygotuj dwie strony WWW. Strony te zatytu³uj „Zielona” oraz „Czerwona”.
Na stronie zielonej umieœæ hiper³¹cze odwo³uj¹ce siê do strony czerwonej.

Hiper³¹cze ze strony zielonej do czerwonej

Pracê rozpoczniemy od doœæ oczywistej uwagi: na æwiczenie to sk³ada-

j¹ siê dwa pliki. Jeden z nich bêdzie zawiera³ stronê czerwon¹, a drugi
– zielon¹. Pliki te nazwiemy zielona.html oraz czerwona.html.

Rozpoczynamy od wstawienia szablonu pustej strony (w programie NotH,

przedstawionym w poprzednim artykule dotycz¹cym jêzyka HTML, aktywu-
jemy skrót Ctrl+S+A), po czym w treœci strony umieszczamy tytu³, dowolny
tekst oraz modyfikujemy kolor t³a. Uwagê koncentrujemy na hiper³¹czu.

Hiper³¹cze wstawiamy do dokumentu zielona.html, stosuj¹c skrót

Ctrl+P+A. Odwo³anie to ma nas przenosiæ do strony czerwonej. Zatem ja-
ko wartoœæ parametru href nale¿y podaæ nazwê pliku zawieraj¹cego stronê
czerwon¹, czyli czerwona.html. Informacje o zawartoœci dokumentu, do
którego przenosi nas hiper³¹cze podamy umieszczaj¹c na stronie tekst:

Dodatkowe informacje znajdziesz na stronie czerwonej.

Hiper³¹cze to bêdzie mia³o postaæ:

Dodatkowe informacje znajdziesz na stronie

!

<A href=”czerwona.html”>czerwonej</A>.

Jeœli teraz internauta odwiedzaj¹cy tak przygotowan¹ stronê umieœci

wskaŸnik myszy ponad napisem czerwonej, wtedy kursor myszy przyjmie
postaæ d³oni. Klikniêcie mysz¹ spowoduje wyœwietlenie w oknie przegl¹-
darki treœci dokumentu zapisanego w pliku czerwona.html.

Zwróæmy uwagê na zdanie informuj¹ce o hiper³¹czu Dodatkowe...

Oczywiœcie w zdaniu tym zasiêg elementu A mo¿e byæ inny. Treœci¹ ele-
mentu A mo¿e byæ ca³e zdanie:

<A href=”czerwona.html”>Dodatkowe informacje

!

znajdziesz na stronie czerwonej</A>.

jego fragment:

Dodatkowe informacje znajdziesz

!

<A href=”czerwona.html”>na stronie czerwonej</A>.

lub tak jak to zrobiliœmy na pocz¹tku – jedynie ostatni wyraz. Mo¿emy
równie¿ zmieniæ treœæ zdania, czy nawet zast¹piæ je lakonicznym komuni-
katem: Nastêpna strona czy Dalej:

<A href=”czerwona.html”>Dalej</A>

Przyjmuj¹c jedno z powy¿szych rozwi¹zañ, powinniœmy d¹¿yæ do tego,

by podana informacja o odnoœniku by³a jasna, zwiêz³a i czytelna. Dodajmy,
¿e oba pliki, zielona.html oraz czerwona.html nale¿y, umieœciæ w tym sa-
mym folderze.

Æ

WICZENIE

2

Przygotuj strony WWW prezentuj¹ce trzy wiersze Juliana Tuwima.

Strona zawieraj¹ca hiper³¹cza do trzech podstron

Æwiczenie to pokazuje, w jaki sposób wykonaæ spis treœci zawieraj¹cy

hiper³¹cza. Jak wynika z rysunku 2, mamy wykonaæ cztery dokumenty.
Pierwszy z nich to spis treœci, a pozosta³e trzy strony prezentuj¹ konkretne
wierszyki.

Najpierw przygotujemy strony zawieraj¹ce treœæ wierszy. Pierwsz¹

z nich, zawieraj¹c¹ wiersz pt. Lokomotywa, zapisujemy w pliku o nazwie
lokomotywa.html, wiersz Pan Hilary umieszczamy w pliku hilary.html,
wiersz S³oñ Tr¹balski zapisujemy w pliku slon.html.

Strona g³ówna æwiczenia ma zawieraæ trzy hiper³¹cza. Nazwijmy j¹

wiersze.html. Spis treœci utworzymy umieszczaj¹c nastêpuj¹cy kod HTML:

HTML

INTERNET.listopad.2004

107

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD

"

C

M

Y

K

<A href=”lokomotywa.html”>Lokomotywa</A><BR>
<A href=”hilary.html”>Pan Hilary</A><BR>
<A href=”slon.html”>S³oñ Tr¹balski</A><BR>

Jak widaæ, ka¿de z tych hiper³¹czy zawiera tytu³ wiersza. Jeœli w tak

przygotowanym spisie wierszy klikniemy dowolny tytu³, wówczas na
ekranie pojawi siê nowy dokument zawieraj¹cy wybrany wiersz. Na
przyk³ad hiper³¹cze <A href=”hilary.html”>Pan Hilary</A> powoduje,
¿e osoba odwiedzaj¹ca stronê zobaczy w oknie przegl¹darki napis Pan
Hilary. Napis ten informuje o zawartoœci strony, do której przenosi akty-
wacja hiper³¹cza.

Kolejnoœæ w jakiej tworzymy strony sk³adaj¹ce siê na to æwiczenie

nie jest istotna. Jako pierwsz¹ mo¿emy utworzyæ stronê ze spisem treœci.
W takim przypadku nie powinien dziwiæ fakt, ¿e mimo utworzenia strony
startowej hiper³¹cza nie bêd¹ dzia³a³y a¿ do momentu przygotowania po-
zosta³ych plików.

Równie¿ nazwy plików w æwiczeniu odgrywaj¹ rolê drugoplano-

w¹. Zamiast wiersze.html mo¿emy u¿yæ nazwy glowna.html, zaœ wier-
sze mo¿emy ponumerowaæ: 1.html, 2.html oraz 3.html. Wa¿ne jest, by
wartoœciami atrybutów href by³y faktyczne nazwy plików.

Æ

WICZENIE

3

Przygotuj strony WWW prezentuj¹ce biografiê oraz trzy wiersze Nor-
wida. Na stronie g³ównej umieœæ spis treœci, zaœ na podstronach dodaj
hiper³¹cza powrotne do strony g³ównej.

Struktura serwisu z wierszam i Norwida

Struktura serwisu jest przedstawiona na rys. 3.
Strona g³ówna zosta³a oznaczona liter¹ G, stro-
na zawieraj¹ca bibliografiê – liter¹ B, zaœ stro-
ny z wierszami – cyframi 1, 2, 3. Strza³ki ozna-
czaj¹ po³¹czenie stron hiper³¹czami, natomiast
groty strza³ek mówi¹ o kierunku powi¹zania.
Strza³ki dwukierunkowe nale¿y rozumieæ jako
powi¹zanie w obie strony: na stronie g³ównej
znajduje siê odnoœnik do danej podstrony, zaœ
na podstronie jest umieszczony odnoœnik po-
wrotny do strony g³ównej.

Omówienie æwiczenia rozpoczniemy od ustalenia nazw plików. Stronê

g³ówn¹ nazwiemy ckn.html (od inicja³ów poety), plik zawieraj¹cy biblio-
grafiê – bibliografia.html, a dokumenty przedstawiaj¹ce wiersze – czu-
losc.html, modlitwa.html oraz mojpsalm.html. Jak widaæ, serwis tworzy
piêæ plików.

Strona g³ówna ma zawieraæ spis treœci sk³adaj¹cy siê z hiper³¹czy.

Oto kod, który nale¿y umieœciæ w pliku ckn.html:

<H1>Cyprian Kamil Norwid</H1>
<P><A href=”biografia.html”>Biografia</A></P>
<H2>Utwory</H2>
<P>

<A href=”modlitwa.html”>MODLITWA</A><BR>
<A href=”mojpsalm.html”>MÓJ PSALM</A><BR>
<A href=”czulosc.html”>CZU£OŒÆ</A><BR>

</P>

Kod ten zawiera cztery odnoœniki. Na stronie WWW widoczne bêd¹

napisy Biografia, MODLITWA, MÓJ PSALM oraz CZU£OŒÆ. Aktywa-
cja powy¿szych hiper³¹czy bêdzie zastêpowa³a stronê g³ówn¹ jednym
z plików tworz¹cych serwis. Powrót do strony g³ównej wykonamy w na-
stêpuj¹cy sposób:

<A href=”ckn.html”>Powrót do strony g³ównej</A>

Hiperłącza wewnętrzne

Nieco innym rodzajem hiper³¹czy s¹ hiper³¹cza wewnêtrzne. Odnosz¹
siê one do konkretnego miejsca w dokumencie. Wracaj¹c do analogii
dotycz¹cej odnoœników w tekstach drukowanych, mo¿emy porównaæ
hiper³¹cze wewnêtrzne do wskazania konkretnego miejsca w ksi¹¿ce
(np. pierwszego wyrazu w trzecim akapicie na stronie 14).

Jeœli chcemy przejœæ do innego miejsca w tekœcie, musimy to miejsce

w jakiœ sposób oznaczyæ. W jêzyku HTML istniej¹ dwie metody oznacza-
nia fragmentów. Jedna z nich, preferowana, wykorzystuje atrybut id. Atry-
but ten mo¿emy zdefiniowaæ w odniesieniu do dowolnego elementu, np.:

<H1 id=:wierzby”>O czym szumi¹ wierzby</H1>

lub

<P id=”wa”>
W moich snach,<BR>
Wci¹¿ Warszawa,<BR>
Pe³na ulic...
</P>

W pierwszym przyk³adzie nag³ówek H1, zawieraj¹cy tytu³ O czym

szumi¹ wierzby, zosta³ oznaczony identyfikatorem wierzby. Drugi
przyk³ad przedstawia fragment piosenki zespo³u Lady Pank. Akapit
z tekstem utworu otrzyma³ identyfikator wa.

Druga metoda identyfikowania fragmentu tekstu wykorzystuje ele-

ment A. Atrybut name ustala nazwê, za pomoc¹ której mo¿emy siê od-
wo³aæ do danego miejsca strony WWW:

<H1><A name=”wierzby”></A>O czym szumi¹

!

wierzby</H1>

lub

<P>
<A name=”wa”></A>
W moich snach,<BR>
Wci¹¿ Warszawa,<BR>
Pe³na ulic...
</P>

Zwróæmy uwagê na zawartoœæ elementów A w dwóch powy¿szych

przyk³adach. Poniewa¿ pomiêdzy znacznikami <A href=””> oraz </A>
nie umieszczono ¿adnej treœci, zatem na ekranie nie bêd¹ one widoczne.
Takie u¿ycie elementu A s³u¿y jedynie identyfikacji miejsca, a nie two-
rzeniu hiper³¹czy. Oczywiœcie element A mo¿e posiadaæ oba atrybuty:

<A name=”drama” href=”shakespeare.html”>Dramaty

!

W. Szekspira</A>

Wtedy jest on zarówno kotwic¹, jak i identyfikatorem miejsca.

Pamiêtajmy, by identyfikatory stosowane na jednej stronie by³y

unikalne (atrybuty id oraz name wspó³dziel¹ przestrzeñ nazewnicz¹!).

Wiemy zatem w jaki sposób zaznaczyæ miejsce na stronie WWW. A jak siê

do niego odwo³aæ? S³u¿y do tego znak #. Umieszczamy go w adresie WWW po
nazwie pliku, a przed identyfikatorem miejsca. Na przyk³ad odnoœnik:

<A href=”tv.html#dobranocka”>Miœ uszatek</A>

wskazuje miejsce oznaczone identyfikatorem dobranocka w pliku
tv.html. Na stronie tv.html powinien znajdowaæ siê identyfikator:

<P id=”dobranocka”>Na dobranoc, dobry wieczór,

!

miœ pluszowy...</P>

(identyfikator ten mo¿e wystêpowaæ obok dowolnego znacznika, np.
H1, BR czy STRONG).

HTML

INTERNET.listopad.2004

108

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

!

Aktywacja hiper³¹cza Miœ uszatek spowoduje otwarcie pliku

tv.html, a nastêpnie przewiniêcie dokumentu do miejsca, w którym po-
jawia siê identyfikator.

Æ

WICZENIE

4

Przygotuj stronê WWW przedstawiaj¹c¹ piêæ wierszy Jana Brzechwy.
Wszystkie wiersze umieœæ w jednym pliku i poprzedŸ je spisem treœci zawie-
raj¹cym hiper³¹cza wewnêtrzne. Rozwi¹zanie zapisz w pliku brzechwa.html.

Tym razem zadanie polega na przygotowaniu jednego dokumentu

HTML. Wszystkie piêæ wierszy mamy zapisaæ w jednym pliku, po-
przedzaj¹c je spisem treœci wed³ug nastêpuj¹cego schematu:

spis treœci
wiersz pierwszy
wiersz drugi
...
wiersz pi¹ty

Ka¿dy z wierszy umieszczamy na stronie, stosuj¹c element PRE. Treœæ

wiersza poprzedzamy tytu³em umieszczonym wewn¹trz elementu H2. Klikniê-
cie tytu³u wiersza w spisie treœci ma nas przenosiæ do tekstu utworu. Musimy
wiêc oznaczyæ te fragmenty strony, od których rozpoczynaj¹ siê wiersze. Do-
brym wyborem bêdzie umieszczenie identyfikatorów id w znacznikach zawie-
raj¹cych tytu³y wierszy. Zatem wierszyk Arbuz otrzyma identyfikator arbuz:

<H2 id=”arbuz”>Arbuz</H2>
<PRE>
W owocarni arbuz le¿y
I z³oœliwie pestki szczerzy;
...

Natomiast pocz¹tek wierszyka pt. ¯uk zaznaczymy identyfikatorem zuk:

<H2 id=”zuk”>¯uk</H2>
<PRE>
Do biedronki przyszed³ ¿uk,
W okieneczko puk - puk - puk.
...

Podobnie postêpujemy w stosunku do pozosta³ych wierszy.

Teraz wracamy na pocz¹tek dokumentu i przystêpujemy do przygoto-

wania spisu treœci. W jaki sposób bêd¹ wygl¹da³y adresy wskazuj¹ce po-
cz¹tki wierszy? Przyjrzyjmy siê, jak powstaje adres wiersza pt. Arbuz. Plik
nazywa siê brzechwa.html, st¹d atrybut href rozpocznie siê href=”brze-
chwa.html. Po nazwie pliku umieszczamy znak #, po którym nastêpuje
identyfikator fragmentu. W przypadku wiersza Arbuz identyfikatorem jest
napis arbuz. Czyli atrybut href bêdzie mia³ postaæ:

href=”brzechwa.html#arbuz”

natomiast ca³e hiper³¹cze bêdzie nastêpuj¹ce:

<A href=”brzechwa.html#arbuz”>Arbuz</A>

A zatem spis treœci utworzymy umieszczaj¹c na pocz¹tku strony

poni¿sze piêæ hiper³¹czy:

<H2><A href=”brzechwa.html#arbuz”>Arbuz</A></H2>
<H2><A href=”brzechwa.html#chrzaszcz”>

!

Chrz¹szcz</A></H2>
<H2><A href=”brzechwa.html#foka”>Foka</A></H2>
<H2><A href=”brzechwa.html#zaba”>¯aba</A></H2>
<H2><A href=”brzechwa.html#zuk”>¯uk</A></H2>

Dodajmy, ¿e z racji na to, i¿ hiper³¹cza dotycz¹ tego samego pliku, w któ-

rym siê znajduj¹, u¿ycie nazwy pliku nie jest konieczne. Spis treœci w tym
konkretnym przypadku mo¿emy utworzyæ z nieco krótszych hiper³¹czy:

<H2><A href=”#arbuz”>Arbuz</A></H2>

Jeœli chcielibyœmy po ka¿dym wierszu umieœciæ odnoœnik wskazu-

j¹cy spis treœci, to nale¿y ustaliæ identyfikator spisu treœci:

<H1 id=”spis”>Jan Brzechwa</H1>

zaœ wiersze zakoñczyæ znacznikiem:

<A href=”brzechwa.html#spis”>Spis treœci</A>

Rozwi¹zanie takie jest zapisanie w pliku brzechwa2.html.

Internetowe odsy³acze mog¹ wskazywaæ pliki ró¿nych formatów. Nie

jest wymagane, by plik, którego nazwê podajemy jako wartoœæ atrybutu
href, by³ stron¹ internetow¹. Zarówno pliki tekstowe, spakowane, multi-
medialne, jak i dowolne inne mog¹ byæ wskazywane przez hiper³¹cze.
Akcje podejmowane przez przegl¹darkê s¹ ró¿ne dla ró¿nych typów pli-
ków i zale¿¹ od oprogramowania zainstalowanego na komputerze.

Odwołania do stron w Internecie

Odnoœnik hipertekstowy mo¿e wskazywaæ dowolny dokument znajdu-
j¹cy siê w Internecie. Jako twórcy stron internetowych nie jesteœmy
ograniczeni do plików przygotowanych w³asnorêcznie. Ka¿da strona
w Internecie mo¿e stanowiæ cel naszych odnoœników.

Na przyk³ad firma Lego publikuje informacje dotycz¹ce serii Bionic-

le na stronie http://www.bionicle.com. Jeœli chcemy skierowaæ pod ten adres
goœci naszej witryny, wystarczy przygotowaæ nastêpuj¹cy odnoœnik:

Moje ulubione <A href=”http://

!

www.bionicle.com”>klocki</A>.

Podobnie, na stronê Bia³ej Gwiazdy trafi¹ wszyscy, którzy klikn¹ odsy³acz:

Jazda! Jazda!
<A href=”http://www.wisla.krakow.pl”>Bia³a Gwiazda</A>

Oczywiœcie, w powy¿szych przyk³adach adres strony, do której zo-

stanie odes³ana osoba klikaj¹ca hiper³¹cze, nie jest widoczny w oknie
przegl¹darki (widaæ go jedynie na pasku stanu przegl¹darki w momen-
cie naprowadzenia kursora myszy nad odnoœnik). W jaki sposób przy-
gotowaæ hiper³¹cze, które bêdzie zawiera³o informacjê o adresie? Wy-
starczy w treœci hiper³¹cza powtórzyæ adres, na przyk³ad:

<A href=”http://www.onet.pl”>http://www.onet.pl</A>

Podsumowanie

Dziêki hiper³¹czom publikacje w Internecie stanowi¹ now¹ jakoœæ
w stosunku do materia³ów drukowanych. Media elektroniczne umo¿li-
wiaj¹ tworzenie indeksów, bibliografii i odnoœników w taki sposób, by
czytelnik nie musia³ traciæ czasu na b³¹dzenie miêdzy rega³ami i prze-
wracanie kartek. A¿ dziwnym wydaje siê fakt, ¿e wszystko to za-
wdziêczamy znacznikowi A, który przetrwa³ w niezmienionej postaci
od pocz¹tków hipertekstu. Mam nadziejê, ¿e dzisiejsza seria æwiczeñ
pomo¿e pocz¹tkuj¹cym webmasterom opanowaæ umiejêtnoœci po-
trzebne do samodzielnego wykorzystywania hiper³¹czy.

n

Ćwiczenia przedstawione w artykule są dostępne na stronie domowej autora
pod adresem

http://www.gajdaw.pl

HTML

INTERNET.listopad.2004

109

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD

"

C

M

Y

K