GAJDAW


MOJE KSIĄŻKI

Książka pt. Git. Recipes
Książka pt. Git. Rozproszony system kontroli wersji
Książka pt. PhpStorm Starter
Książka pt. Symfony w przykładach
Książka pt. GIMP. Praktyczne projekty. Wydanie II
Książka pt. PHP, MySQL i MVC. Tworzenie witryn WWW opartych na bazie danych
Książka pt. PHP. Praktyczne projekty

PROGRAMY

1 2 3 4 5 6


Hiperłącza

Włodzimierz Gajda

4. 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). Natomiast dotychczas omówione hiperłącza pełnią rolę odnośników wskazujących konkretną książkę. Po kliknięciu hiperłączy z ćwiczeń 1,2 lub 3 wyświetlony zostanie początek dokumentu, tak jak byśmy otworzyli nową książkę na pierwszej stronie.

Jeśli chcemy przeskoczyć do innego miejsca w tekście, to musimy to miejsce w jakiś sposób oznaczyć. W języku HTML istnieją dwie metody oznaczania fragmentów. Jedna z nich, preferowana, wykorzystuje atrybut id. Atrybut ten możemy zdefiniować w odniesieniu do dowolnego elementu, na przykład:

<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 element A. Atrybut name ustala nazwę, za pomocą której możemy się odwoł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 ekrenie nie będą one widoczne. Takie użycie elementu A służy jedynie identyfikacji miejsca, a nie tworzeniu 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 # (hashmark). 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).

Aktywacja hiperłącza Miś uszatek spowoduje otwarcie pliku tv.html, a następnie przewinięcie dokumentu do miejsca, w którym pojawia się identyfikator.

4.1 Ćwiczenie 4

Przygotuj stronę WWW przedstawiającą pięć wierszy Jana Brzechwy. Wszystkie wiersze umieść w jednym pliku i poprzedź je spisem treści zawierają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, poprzedzają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. Dobrym wyborem będzie umieszczenie identyfikatorów id w znacznikach zawierają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 przygotowania spisu treści. W jaki sposób będą wyglądały adresy wskazujące początki wierszy? Przyjrzyjmy się jak powstaje adres wiersza pt. Arbuz. Plik nazywa się brzechwa.html, stąd atrybut href rozpocznie się href="brzechwa.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 wskazują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, multimedialne jak i dowolne inne mogą być wskazywane przez hiperłącze. Akcje podejmowane przez przeglądarkę są różne dla różnych typów plików i zależą od oprogramowania zainstalowanego na komputerze.

4.2 Ćwiczenie 5

Przygotuj stronę WWW publikującą informacje na temat algorytmu MD5. Na stronie umieść hiperłącza do pliku tekstowego rfc1321.txt zawierającego szczegółowy opis algorytmu oraz do archiwum md5.zip, w którym znajduje się program md5.

Rozwiązanie ćwiczenia składa się z jednego pliku md5.html. W pliku tym wpisujemy opis algorytmy, po czym dodajemy na końcu dwa odnośniki:

<A href="rfc1321.txt">Opis algorytmu MD5</A>
<A href="md5.zip">Program md5</A>

Reklama

Szkolenia z Zend Framework 2.0


1 2 3 4 5 6