Uniform Resource Locator (URL) to adres dokumentu (lub innych zasobów) w sieci WWW. Ogólna postać adresu WWW, na przykład: http://www.mojastrona.com/html/strona.htm spełnia następujące reguły składni:
protokół://host.domena:port/ścieżka/nazwa_pliku
q Nazwa protokołu określa typ usługi internetowej – w przypadku stron WWW jest to http. Inne nazwy to na przykład file, ftp, gopher, news, telnet.
q Domena to nazwa domeny internetowej, na przykład microsoft.com.
q Host to oczywiście host domeny. Domyślnym hostem dla http jest www.
q :port definiuje numer portu hosta – zazwyczaj go pomijamy. Domyślny numer dla serwerów http to 80.
q Ścieżka określa ścieżkę dostępu na serwerze. Jeśli nie jest podana, dokument musi znajdować się w katalogu głównym witryny WWW.
q Nazwa pliku definiuje nazwę dokumentu. Nazwa domyślna to index.html lub default.asp, co zależy od ustawień serwera sieciowego.
Zrozumienie relacji między adresem lokalnym dokumentu, w którym połączenie jest tworzone, a adresem dokumentu, do którego ono prowadzi, jest niezwykle istotne z punktu widzenia zrozumienia procesu definiowania połączeń.
Każda strona WWW ma swój unikatowy adres URL (ang. Uniform Resource Locator). Jednak w przypadku połączeń lokalnych – a więc z dokumentu do dokumentu tej samej witryny – nie ma potrzeby wprowadzania całego adresu URL. Wystarczy określić położenie pliku względem dokumentu bieżącego lub względem katalogu głównego witryny.
Ścieżki dostępu mogą być więc następujące:
q bezwzględne (np. http:/www.magsoft.com.pl/~rsokol/nmr/index.html)
q względne
o zdefiniowane względem dokumentu (np.katalog/katalog.html)
o zdefiniowane względem foldera głównego (np. /katalog/katalog.html)
Adres bezwzględny to po prostu pełny adres URL, wraz z nazwą protokołu. Jeśli więc odwołujesz się do dokumentu na innym serwerze, musisz podać pełny adres. Lokalnie nie ma potrzeby definiowania połączeń absolutnych – jest to wręcz szkodliwe.
Adresy zdefiniowane względem dokumentu to najlepsze rozwiązanie dla prezentacji lokalnych. Szczególnie wówczas, gdy dokumenty – bieżący oraz te, których prowadzą połączenia – znajdują się w jednym folderze. Nawet jeśli są w innym, wystarczy wskazać hierarchię folderów startując od bieżącego dokumentu.
Tak więc, w przypadku odwoływania się do dokumentu w tym samym folderze wystarczy podać nazwę pliku. Jeśli odwołanie ma prowadzić do dokumentu w folderze podrzędnym, adres składa się z nazwy foldera podrzędnego i nazwy pliku rozdzielonych prawym ukośnikiem.
Oto przykłady adresów względnych:
q Aby utworzyć połączenie prowadzące od pliku a1.html do pliku a2.html w tym samym folderze A, wystarczy podać nazwę pliku: a2.html (patrz rysunek 6.1).
Rys. 6.1.
Połączenie z pliku a.html do pliku b.html umieszczonego w folderze podrzędnym B
q Aby utworzyć połączenie z pliku a.html do pliku b.html (umieszczonego w folderze podrzędnym B), zdefiniuj adres względny: B/b.html (patrz rysunek 6.2).
q Aby utworzyć połączenie od pliku b.html (folder podrzędny B) do pliku a.html (folder nadrzędny A), zdefiniuj adres jako ../a.html (../ oznacza przejście o poziom wyżej w hierarchii folderów).
Rys. 6.2.
Połączenie z pliku b.html do pliku a.html umieszczonego w folderze nadrzędnym A
q Aby utworzyć połączenie z pliku c.html (folder podrzędny C) do pliku b.html (w innym folderze podrzędnym, o nazwie B), zdefiniuj adres jako ../B/b.html (../ spowoduje przejście do foldera nadrzędnego, a / przejście w dół hierarchii, do foldera podrzędnego B).
Rys. 6.3.
Połączenie z pliku c.html do pliku b.html – oba w folderach podrzędnych względem A
W przypadku przesuwania całej grupy plików, bez naruszania powiązań między nimi, połączenia względne nie wymagają aktualizacji. Przesunięcie pojedynczych plików taką konieczność spowoduje.
W tym przypadku adres pliku to ścieżka dostępu od foldera nadrzędnego witryny do dokumentu.
Adres rozpoczyna się od ukośnika, który oznacza folder witryny. Adres tego rodzaju: /A/a.html jest adresem pliku a.html z foldera A, który jest folderem podrzędnym foldera całej witryny.
Korzystanie z tego typu adresów jest trudniejsze. Jeśli sprawia Ci ono kłopot, stosuj adresowanie względem dokumentu.
Ten typ adresowania sprawdza się najlepiej, gdy pliki witryny są często przemieszczane. Jeśli połączenia zostały zdefiniowane względem foldera prezentacji, zachowają swoją poprawność.
Połączenia definiowane względem foldera nadrzędnego są interpretowane przez serwery, a nie przeglądarki.
Połączenie to narzędzie nawigacji, które możesz wbudować w swoje strony, aby umożliwić czytelnikom przemieszczanie się do innych miejsc na tej samej stronie, do innych stron w obrębie prezentacji lub do zupełnie obcych, lecz ciekawych stron w sieci. Funkcję połączenia może pełnić wyraz, fraza, a nawet obraz.
Znacznik HTML, za pomocą którego tworzone jest połączenie nosi nazwę znacznika zakotwiczenia i ma taką postać:
<a href=”url_dokumentu.html”>Tekst połączenia</a>
Znacznik ten oprócz atrybutu href może mieć także inne atrybuty.
Zanim zabierzemy się za definiowane połączeń, jeszcze kilka istotnych informacji na temat połączeń. Ich możliwości są ogromne:
q Połączenia mogą prowadzić do innych dokumentów, w tym również do obrazów, plików dźwiękowych, sekwencji wideo.
q Zakotwiczenia można definiować także w obrębie tej samej strony WWW (jeśli oznaczysz w dokumencie cele, będziesz mógł sterować sposobem odbioru strony).
q Dzięki połączeniom e-mail (które już poznałeś), ułatwisz użytkownikom nawiązanie kontaktu.
q Listy menu to nic innego jak listy połączeń stanowiące ciekawy element strony.
q Połączenia skryptowe pozwalają przypisać obiektom określone zachowanie. Powodują one wykonanie określonego kodu języka JavaScript.
Wiesz to na pewno. Połączenia mają postać niebieskiego podkreślonego tekstu (w przypadku, gdy są tekstowe), którego kliknięcie wywołuje określoną akcję – przejście do wskazanego miejsca. Strona WWW, do której prowadzi kliknięte połączenie zostanie wyświetlona w bieżącym oknie przeglądarki, chyba że ustawienia dodatkowe stanowią inaczej.
Na rysunku 6.4 pokazany jest przykład strony, która z racji funkcji zbudowana jest w znacznej mierze z połączeń.
Rys. 6.4.
Oto portal internetowy, w którym połączenia pełnią dominującą rolę
Do tworzenia połączeń służy, jak się już dowiedziałeś, para znaczników <a> </a>. Element a nazywa się zakotwiczeniem. Podstawowym jego atrybutem jest href – Hypertext REFerence.
Wartością atrybutu href jest adres URL (Uniform Resource Locator). W najprostszej sytuacji, gdy obie łączone strony znajdują się w tym samym katalogu, stosuje się tylko nazwę pliku. Na przykład:
Wyświetl <a href="dane.html">dodatkowe informacje</a> na ten temat.
Znacznik <a> definiuje też styl – powoduje podkreślenie tekstu i zmianę jego koloru na niebieski. Można go umieszczać w dowolnym elemencie HTML. Z oczywistych względów nie można zagnieżdżać znaczników <a> w sobie.
Struktura adresu URL zgodna jest z formatami systemu UNIX. Oznacza to, że wszystkie nazwy i ścieżki dostępu są czułe na wielkość znaku (za wyjątkiem nazw komputerów i adresów e-mail). Aby utworzyć połączenie do pliku w katalogu podrzędnym bieżącego pliku, należy skorzystać z prawego ukośnika, /, który umieszczany jest między nazwą katalogu a nazwą pliku. Oto przykład:
Lista
<a href="1999/wszystkie.html">moich publikacji wydanych w 1999r</a>.
Aby odwołać się do pliku w katalogu nadrzędnym, zastosujesz taką oto składnię:
Powrót do
<a href="../xxx.html">Spisu treści</a>.
W tym przypadku wykorzystywane są ścieżki względne. Ścieżki bezwzględne zawsze rozpoczynają się od ukośnika, co różni je od ścieżek względnych. Po ukośniku pojawiają się nazwy wszystkich katalogów, od katalogu najwyższego poziomu po nazwę pliku, do którego tworzone jest łącze.
Adresowanie względne jest wygodniejsze i bezpieczniejsze – umożliwia swobodne przenoszenie stron między katalogami i systemami.
Jeśli w adresie URL na końcu nie pojawia się nazwa pliku (a jedynie nazwa katalogu), serwer będzie szukał pliku o nazwie domyślnej – najczęściej jest to plik index.html. Jeśli nie znajdzie takiego pliku, zwróci listę plików w katalogu.
Innym ważnym atrybutem elementu a jest atrybut name. Stosowany jest on do zdefiniowania odnośnika:
<a name="słowniczek">Terminy i definicje</a>
Wartością tego atrybutu jest słowo kluczowe. W przeciwieństwie do połączeń, odnośniki nie są widoczne na stronie. Żeby skierować połączenie na wybrany odnośnik, skorzystamy z elementu <a> o podobnej składni jak w przypadku zwykłych połączeń. Przed nazwą należy jednak dodać znak #:
Patrz <a href="#słowniczek">Dodatek A</a>.
Zakotwiczenia o zdefiniowanych nazwach są często stosowane do utworzenia czegoś w rodzaju „spisu treści strony WWW” – w poszczególnych sekcjach dokumentu umieszczane są zakotwiczenia o zdefiniowanych nazwach, a na początku strony pojawiają się połączenia do oznaczonych nazwami fragmentów.
Specjalne połączenie – także je już poznałeś – umożliwia czytelnikowi przesłanie listu e-mail do autora strony. Składnia jest tutaj następująca:
<a href="mailto:me@myserver.com">Wyślij do mnie list</a>
Kliknięcie połączenia poprowadzi Cię do dokumentu, który jest dostępny pod adresem wskazanym przez atrybut href. Dokument ten wyświetlony zostanie w bieżącym oknie Twojej przeglądarki, zastępując wcześniejszą zawartość. Czy możemy to zmienić? Jak najbardziej. Służy do tego atrybut target.
Atrybut ten może przyjmować jedną z czterech wartości: _blank, _parent, _self (jest to wartość domyślna) lub _top. Szczegółowy opis wpływu poszczególnych ustawień znajdziesz w dodatku A. Najczęściej wykorzystuje się wartość _blank, która pozwala otwierać nową stronę w nowym oknie.
Jeśli chcesz otworzyć stronę w nowym oknie, postać kodu html jest następująca:
<a href="http://www.naszastrona.com/" target="_blank">Odwiedź tę stronę!</a>
W dalszej części rozdziału poświęcimy atrybutom znacznika <a> więcej miejsca. Sprawdzimy różne sposoby jego wykorzystania w dokumentach html.
Zaopatrzony we wstępne informacje na temat tworzenia połączeń możesz spróbować utworzyć połączenie prowadzące ze strony głównej do innego dokumentu html.
Witryna to zestaw kilku stron powiązanych ze sobą połączeniami. Jedna ze stron pełni w niej rolę centrum dowodzenia – nazywamy ją stroną główną, ale wielu użytkowników stosuje też określenie strona domowa. Zazwyczaj strona główna zawiera informacje ogólne, które rozwijane są na stronach podrzędnych.
Aby zdefiniować połączenie spinające dwie strony, musimy więc zacząć od przygotowania dwóch plików html. Wykorzystamy w naszych eksperymentach z połączeniami stronę o zwierzakach, z poprzedniego rozdziału. To będzie strona główna. Strona podrzędna będzie zawierała dodatkowe informacje na temat określony tekstem połączenia.
Przyjrzyj się postaci strony WWW i zastanów się, w jakich miejscach chciałbyś umieścić połączenia (patrz rysunek 6.5).
Rys. 6.5.
Przekształcimy w połączenia nazwy gatunków kotów – będą prowadziły do stron poświęconych im konkretnie
Wybierz fragmenty tekstu, które w najbardziej reprezentatywny sposób będą charakteryzowały punkt docelowy. W przykładzie przekształcimy w połączenia nazwy gatunków kotów, na razie wyróżnione czcionką pogrubioną – połączenia te poprowadzą do stron poświęconych im tematycznie.
Wyświetl w oknie edytora kod źródłowy swojej strony głównej – kod tego przykładowego dokumentu znajdziesz w rozdziale 5., na wydruku 5.2. Zamień w nim wszystkie elementy b na elementy a, zgodnie ze składnią:
<a href=”nazwa_dokumentu.html”>Tekst połączenia</a>
Oczywiście jeśli w swoim pliku nie stosowałeś znaczników <b>, obejmij znacznikami <a> </a> żądany tekst.
Wartościami atrybutu href będą nazwy poszczególnych plików html, do których wiodą połączenia (tak będzie, jeśli wszystkie podrzędne pliki html umieścisz w tym samym folderze, w którym znajduje się plik strony głównej – patrz rozważania na temat adresowania, na początku rozdziału). Przygotuj pliki html w taki sam sposób jak plik strony głównej i zapisz.
Zapisz kod strony głównej i sprawdź działanie połączeń wczytując stronę główną do przeglądarki i klikając je (patrz wydruk 6.1 oraz rysunki 6.6 i 6.7).
Wydruk 6.1. Połączenia prowadzące ze strony głównej do stron podrzędnych
<html>
<head>
<title>Zwierzaki</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>
<body>
<!-- to jest nagłówek poziomu h1, w którym umieszczono obraz-->
<h1 align="center"><img src="images/lampart.gif" alt="Lampart" width="75" height="100">Koty duże</h1>
<!-- to jest pierwszy akapit tekstu i połączenia-->
<p><a href="lew.html">Lwa</a>, <a href="tygrys.html">tygrysa</a>, <a href="pantera.html">panterę</a>, <a href="gepard.html">geparda</a> i <a href="jaguar.html">jaguara</a> nazywamy <big>wielkimi kotami</big>.
<br>
<br> Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych (<i>Felidae</i>). Do tej rodziny należą też małe koty: <a hrefpuma, <a href="rys.html">ryś</a>, <a href="ocelot.html">ocelot</a>, <a href="serwal.html">serwal</a>. W sumie rodzina kotowatych obejmuje 40
gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.</p>
<!—tu wstawimy linię poziomą-->
<hr>
<!-- to jest nagłówek poziomu h2, w którym umieszczono obraz-->
<h2 align="center"><img src="images/kot.gif" alt="Kotek" width="75" height="75"> Koty małe</h2>
<!-- to jest drugi akapit tekstu i kolejne połączenia-->
<p><a href="kot_domowy.html">Kot domowy</a> najprawdopodobniej pochodzi od dwóch gatunków: od <a href="nubijski.html">kota nubijskiego</a> (<i>Felis silvestris lybica</i>) i od <a href="azjatycki.html">azjatyckiego kota stepowego</a> (<i>Felis silvestris ornata</i>).
<br>Do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.</p>
</body>
</html>
Rys. 6.6.
Wszystkie nazwy zostały przekształcone w połączenia do innych dokumentów html tej samej witryny
Rys. 6.7.
Kliknięcie połączenia powoduje wyświetlenie w oknie przeglądarki pliku kot_domowy.html
Połączenia do stron WWW znajdujących się na innych serwerach definiuje się korzystając z tego samego elementu a. Cała tajemnica tkwi w adresie url...
karkur