Odwołania wewnątrz dokumentu

W tej lekcji dowiesz się w jaki sposób utworzyć spis treści obszernego dokumentu HTML i jak szybko znaleźć dany rozdział strony korzystając ze zbioru łączników (linków),  tym razem odsyłać one Cię będą do określonych miejsc tego samego dokumentu. (Hiperłącza wewnątrz dokumentu)

Poniżej przedstawiony jest kod źródłowy przykładowego dokumentu - należy zwrócić uwagę na sposób tworzenia tak zwanych kotwic, to jest punktów docelowych wybranych miejsc dokumentu (tytułów rozdziałów). Kotwicę definiuje atrybut znacznika A - Name i jego wartość będąca nazwą danej kotwicy.

Poniższy fragment tekstu przedstawia przykład kodu źródłowego HTML umożliwiającego włączenie do dokumentu spisu treści z odsyłaczami do wskazanych miejsc w dokumencie.
<hr color="red" size="23">           <!-- linia pozioma  koloru czerwonego o grubości 23piksele--> - to jest komentarz umieszczony w znaczniku<!--    --> nie będzie widoczny na wyświetlanej stronie.
 

<font size=6><b><center> Utwory muzyczne zespołu Czerwone Gitary</font>

W dokumencie wstawione są słowa utworów zespołu Czerwone Gitary

Menu dokumentu (spis treści): - menu wyśrodkowane czcionka 5

| Dziesięć w skali Beauforta | Anna Maria | Biały Krzyż |  Historia pewnej znajomości | Ciągle pada | Jest taki dzień | Kwiaty we włosach | Matura | Nie spoczniemy | Płoną góry płoną lasy | Powiedz, stary, gdzieś ty był? | Słowo jedyne TY | Tak bardzo się starałem |
 

<a name="z0"> <!--kotwica "początek" dla spisu treści danego dokumentu--> <font size=6><center> Utwory zespołu Czerwone Gitary</font><br></a>
 

<font size=5><center>

<a href="#z1">Dziesięć w skali Beauforta</a><!--skrót do kotwicy "z1", czyli słowa utworu  Dziesięć w skali Beauforta-->
<a href="#z2">Anna Maria</a> <!--skrót do kotwicy "z2", czyli słowa utworu  Anna Maria-->
<a href="#z3"> Biały Krzyż</a> <!--skrót do kotwicy "z1", czyli słowa utworu  Dziesięć w skali Beauforta-->
<a href="#z4">Historia pewnej znajomości</a> <!--skrót do kotwicy "z1", czyli słowa utworu  Dziesięć w skali Beauforta-->
<a href="#z5">Ciągle pada </a><!--skrót do kotwicy "z1", czyli słowa utworu  Dziesięć w skali Beauforta-->
<a href="#z6">Jest taki dzień</a> <!--skrót do kotwicy "z1", czyli słowa utworu  Dziesięć w skali Beauforta-->
<a href="#z7">Kwiaty we włosach</a><!--skrót do kotwicy "z1", czyli słowa utworu  Dziesięć w skali Beauforta-->
<a href="#z8">Matura</a> <!--skrót do kotwicy "z1", czyli słowa utworu  Dziesięć w skali Beauforta-->
<a href="#z9">Nie spoczniemy</a> <!--skrót do kotwicy "z1", czyli słowa utworu  Dziesięć w skali Beauforta-->
<a href="#z10">Płoną góry płoną lasy </a> <!--skrót do kotwicy "z1", czyli słowa utworu  Dziesięć w skali Beauforta-->

</center>

<hr color="red" size="23">

<a name="z1"><!--skrót do kotwicy "z1", czyli słowa utworu  Dziesięć w skali Beauforta-->
 <font size=6>Dziesięć w skali Beauforta</font></a>

<br>

Kołysał nas zachodni wiatr,<br>
Brzeg gdzieś za rufą został.<br>
I nagle ktoś jak papier zbladł:<br>
Sztorm idzie, panie bosman!<br><br>

A bosman tylko zapiął płaszcz<br>
I zaklął: - Ech, do czorta!<br>
Nie daję łajbie żadnych szans!<br>
Dziesięć w skali Beauforta!<br><br>

Z zasłony ołowianych chmur<br>
Ulewa spadła nagle.<br>
Rzucało nami w górę, w dół,<br>
I fala zmyła żagle.<br><br>

A bosman tylko zapiął płaszcz<br>
I zaklął: - Ech, do czorta!<br>
Nie daję łajbie żadnych szans!<br>
Dziesięć w skali Beauforta! - Hej!<br><br>

Gdzie został ciepły, cichy kąt<br>
I brzegu kształt znajomy?<br>
Zasnuły mgły daleki ląd<br>
Dokładnie, z każdej strony.<br><br>

A bosman tylko zapiął płaszcz<br>
I zaklął: - Ech, do czorta!<br>
Nie daję łajbie żadnych szans!<br>
Dziesięć w skali Beauforta!<br><br>

O pokład znów uderzył deszcz<br>
I padał już do rana.<br>
Piekielnie ciężki to był rejs,<br>
Szczególnie dla bosmana.<br><br>

A bosman tylko zapiął płaszcz<br>
I zaklął: - Ech, do czorta!<br>
Przedziwne czasem sny się ma!<br>
Dziesięć w skali Beauforta! / *3<br><br>


 <a href="#z0"> Utwory zespołu Czerwone Gitary</a> <!-- skok do początku strony kotwica "z0" utwory Czerwone Gitary-->
<hr size=5 color=red>
 

<a name="z2">
<font size=6>Anna Maria</font></a>  <!--skrót do kotwicy "z2", czyli słowa utworu  Anna Maria-->

<br>

Tylko o niej ciągle myślę <br>
I jednego tylko pragnę, <br>
Żeby chciała choć z daleka, <br>
Choć przez chwilę spojrzeć na mnie. <br><br>

Anna Maria smutną ma twarz, <br>
Anna Maria wciąż patrzy w dal. <br><br>

Jakże chciałbym ujrzeć kiedyś, <br>
Swe odbicie w pięknych oczach, <br>
Jakże chciałbym móc uwierzyć w to, <br>
Że kiedyś mnie pokocha. <br><br>

Anna Maria smutną ma twarz, <br>
Anna Maria wciąż patrzy w dal. <br><br>

Lat minionych, dni minionych, <br>
Żadne modły już nie cofną, <br>
Ten, na kogo ciągle czeka, <br>
Już nie przyjdzie pod jej okno. <br><br>


Anna Maria smutną ma twarz, <br>
Anna Maria wciąż patrzy w dal, <br>
Anna Maria smutną ma twarz, <br>
Anna Maria wciąż patrzy w dal .<br><br>

Anna Maria... <br>
 

<a href="#z0"> Utwory zespołu Czerwone Gitary</a> <!-- skok do początku strony kotwica "z0" utwory Czerwone Gitary-->
<hr size=5 color=red>


 <a name="z3">  <font size=6> Biały Krzyż</font></a> <!--skrót do kotwicy "z3", czyli słowa utworu  Biały krzyż-->

Gdy zapłonął nagle świat,<br>
Bezdrożami szli<br>
Przez śpiący las.<br>
Równym rytmem młodych serc<br>
Niespokojne dni<br>
Odmierzał czas.<br><br>

Gdzieś pozostał ognisk dym,<br>
Dróg przebytych kurz,<br>
Cień siwej mgły ...<br>
Tylko w polu biały krzyż<br>
Nie pamięta już,<br>
Kto pod nim śpi ...<br><br>

Jak myśl sprzed lat,<br>
Jak wspomnień ślad<br>
Wraca dziś<br>
Pamięć o tych, których nie ma.<br><br>

Żegnał ich wieczorny mrok,<br>
Gdy ruszali w bój,<br>
Gdy cichła pieśń.<br>
Szli, by walczyć o twój dom<br>
Wśród zielonych pól -<br>
O nowy dzień.<br><br>

Jak myśl sprzed lat,<br>
Jak wspomnień ślad<br>
Wraca dziś<br>
Pamięć o tych, których nie ma.<br><br>

Bo nie wszystkim pomógł los<br>
Wrócić z leśnych dróg,<br>
Gdy kwitły bzy.<br>
W szczerym polu biały krzyż<br>
Nie pamięta już,<br>
Kto pod nim śpi<br><br>

W szczerym polu biały krzyż<br>
Nie pamięta już,<br>
Kto pod nim śpi ...<br><br>
 

 

<a href="#z0"> Utwory zespołu Czerwone Gitary</a> <!-- skok do początku strony kotwica "z0" utwory Czerwone Gitary-->
<hr size=5 color=red>


 

<a name="z4"><font size=6>Historia pewnej znajomości</font></a><br>

Sia la la la la la-a-a-aa 2x<br><br>

Morza szum, ptaków śpiew<br>
Złota plaża pośród drzew<br>
Wszystko to, w letnie dni<br>
Przypomina Ciebie mi, przypomina Ciebie mi<br>
Sia la la la la la-a-a-aa<br><br>

Szłaś przez skwer, z tyłu pies<br>
"Głos Wybrzeża" w pysku niósł<br>
Wtedy to pierwszy raz<br>
Uśmiechnęłaś do mnie się, uśmiechnęłaś do mnie się<br>
Sia la la la la la-a-a-aa<br><br>

Odtąd już, dzień po dniu<br>
Upływały razem nam<br>
Rano skwer, plaża lub<br>
Molo gdy zapadał zmierzch, molo gdy zapadał zmierzch<br>
Sia la la la la la-a-a-aa<br><br>

Płynął czas, letni czas<br>
Aż wakacji nadszedł kres<br>
Przyszedł dzień, w którym już<br>
Rozstać musieliśmy się, rozstać musieliśmy się<br>
Sia la la la la la-a-a-aa<br><br>
 Morza szum, ptaków śpiew, złota plaża pośród drzew...<br><br>

<a href="#z0"> Utwory zespołu Czerwone Gitary</a> <!-- skok do początku strony kotwica "z0" utwory Czerwone Gitary-->
<hr size=5 color=red>


</body>
</html>

Plik z tekstami utworów

 

 

UWAGA:
 objaśnienia wypisywane kolorem czerwonym nie są częścią kodu źródłowego HTML omawianego dokumentu. Zostały one zamieszczone w celu łatwiejszego zrozumienia logiki omawianego dokumentu.


Poniżej możesz poćwiczyć.

W oknie edytora możesz wprowadzić zmiany w tekście kodu HTML, a po naciśnięciu przycisku "Pokaż wygląd strony" zobaczysz efekt działania zmodyfikowanego kodu, który sam dokonałeś pozmieniaj w ramce dane i obejrzyj je.