Rozdział 5. u Wszystko o połączeniach              117

Rozdział 5.
Wszystko o połączeniach

Po zakończeniu lektury poprzedniego rozdziału powinieneś mieć już kilka gotowych stron z nagłówkami, jakimś tekstem i listami. Strony te są jak najbardziej poprawnie zbudowane, ale raczej mało interesujące. Prawdziwa zabawa zacznie się wtedy, gdy nauczysz się tworzyć połączenia hipertekstowe i włączać strony do sieci WWW. W tym rozdziale będziemy uczyć się właśnie tego, a konkretnie:

n   wszystkiego o znaczniku <A> i różnych jego składnikach,

n   jak tworzyć połączenia do innych stron na dysku lokalnym za pomocą ścieżek względnych i bezwzględnych,

n   jak tworzyć połączenia do innych stron w Internecie za pomocą URL-i,

n   jak korzystać z połączeń i odnośników do tworzenia połączeń wewnątrz strony,

n   wszystkiego o URL-ach: z jakich części się składają i jakie są ich rodzaje.

Tworzenie hiperpołączeń

Do utworzenia połączenia w języku HTML potrzebne są następujące informacje:

n   nazwa pliku (lub jego URL), do którego będzie prowadziło połączenie,

n   tekst, który będzie wyróżniony przez przeglądarkę i po wybraniu którego nastąpi realizacja połączenia.

Na stronie widoczna będzie tylko ta druga część. Gdy czytelnik wybierze ją za pomocą myszy lub w jakiś inny sposób, przeglądarka odczyta z pierwszej części adres pliku, do którego powinna „przeskoczyć”.

Znacznik <A>

Do kreowania hiperpołączeń na stronach HTML służy znacznik <A>¼</A>. Jest często nazywany odnośnikiem, bowiem może być również używany do tworzenia specjalnych miejsc wewnątrz stron, do których prowadzą inne połączenia (więcej na ten temat opowiem w dalszej części rozdziału). Jednakże, najpowszechniejszym zastosowaniem tego znacznika są hiperpołączenia i tym tematem zajmiemy się w tej chwili.

W przeciwieństwie do prostych znaczników, o których mówiliśmy w poprzednim rozdziale, możliwości <A> są nieco szersze. Znacznik otwierający <A> oprócz nazwy („A”) zawiera szczegółowe informacje o połączeniu. Te dodatkowe cechy nazywane są atrybutami znacznika (po raz pierwszy zetknąłeś się z atrybutami przy omawianiu list w poprzednim rozdziale „Zaczynamy od podstaw”). Rozszerzony znacznik połączenia <A> wygląda następująco:

<A NAME="Up" HREF="menu.html" TITLE="Dwunastu Cezarów">

Dodatkowe atrybuty (w tym przykładzie są to NAME, HREF i TITLE) stanowią opis połączenia. Najczęściej używanym z nich jest HREF, który jest skrótem od ang. Hypertext REFerence (odnośnik hipertekstowy). Służy on do określenia URL pliku, wskazywanego przez dane połączenie.

Podobnie jak większość znaczników HTML, także <A> posiada swój znacznik zamykający </A>. Cały tekst, który znajdzie się pomiędzy nimi, (podświetlony w zależności od przeglądarki może być wyróżniony kolorem niebieskim lub czerwonym i dodatkowo podkreślony), będzie widoczny na stronie jako hiperpołączenie. Na ten tekst czytelnicy będą klikali, aby przeskoczyć do miejsca, opisanego atrybutem HREF.

Na rysunku 5.1 widoczne są części typowego hiperpołączenia, zdefiniowanego za pomocą znacznika <A>, czyli HREF, tekst połączenia oraz znacznik zamykający.

Znacznik otwierający Tekst, który będzie podświetlony Plik do wczytania Znacznik zamykający Rysunek 5.1. Hiperpołączenie z użyciem znacznika <A>

<A HREF="menu.html">Powrót do Menu Głównego</A>

Poniższe przykłady demonstrują proste połączenie i jego efekt końcowy w Internet Explorerze (rysunek 5.2).

Ćwiczenie 5.1: Łączenie dwóch stron

Spróbujmy stworzyć prosty przykład połączenia dwóch stron HTML na dysku lokalnym. Do wykonania tego ćwiczenia potrzebny będzie edytor tekstu i przeglądarka. Nie jest tu wymagane podłączenie do Internetu, bowiem obydwa łączone pliki znajdują się na dysku lokalnym (do ćwiczeń z siecią przejdziemy w dalszej części rozdziału; bądź cierpliwy).

Na wstępie utwórz dwie strony HTML i zapisz je w osobnych plikach. Oto kod źródłowy dwóch plików, które stworzyłam na potrzeby tego rozdziału: menu.html i klaudiusz.html. To, jak nazwiesz swoje strony i o czym będą one traktowały właściwie nie jest ważne, pamiętaj tylko, że nazwy plików mają tu duże znaczenie.

Pierwszy plik, menu.html, jest następujący:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Żywoty cezarów</title>

</head>

<body>

<h1>"Żywoty cezarów" według Swetoniusza</u></h1>

<p>Swetoniusz (lub Caius Suetoniusz Tranquillus) urodził się około

70 naszej ery, a zmarło około roku 130. Jest on autorem historii dwunastu

cezarów poczynając od Juliusza a kończąc na Dominicjanie (który zmarł
w roku 96). Jego praca w znacznej mierze przyczyniła się do powstania

bestsellerowej powieści "Ja, Klaudiusz" oraz filumu nakręconego na jej

podstawie. Praca Swetoniusza zawiera biografie następujących władców

Rzymu:</p>

<ul>

  <li>Julisz Cezar</li>

  <li>August</li>

  <li>Tyberiusz</li>

  <li>Gajusz (Kaligula)</li>

  <li>Klaudiusz</li>

  <li>Neron</li>

  <li>Galba</li>

  <li>Otho</li>

  <li>Vitelliusz</li>

  <li>Vespazjan</li>

  <li>Tytus</li>

  <li>Dominicjan</li>

</ul>

</body>

</html>

Elementy listy (Juliusz Cezar, August, itp.) będą połączeniami do innych stron. Na razie zapisz je jak zwykły tekst, później zamienimy je w hiperpołączenia.

Drugi plik, klaudiusz.html przedstawia się tak:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Żywoty cezarów: Klaudiusz</title>

</head>

<body>

<h2>Klaudiusz zostaje Cezarem</h2>

<p>Klaudiusz został Cezarem w wieku 50 lat. Obawiając się ataku

morderców Kaliguli, Klaudiusz ukrył się za zasłoną. Gdy strażnicy

odnaleźli go, Klaudiusz padł na podłogę, a w chwilę później został

ogłoszony Cezarem.</p>

<h2>Klaudiusz został otruty</h2>

<p>Większość osób uważa, iż Klaudiusz został otruty. Niektórzy sądzą,

że żona Klaudiusza - Agrypina - zatruła jego ulubione danie - grzyby.

Jego śmierć nastąpiła po tym, gdy ustalono, że syn Agrypiny - Neron - zostanie kolejnym Cezarem.</p>

<p>Powrót do Menu Głównego.</p>

</body>

</html>

Upewnij się, czy obydwa pliki znajdują się w tym samym katalogu lub folderze. Jeżeli nazwałeś je inaczej niż ja, miej to na uwadze, bowiem za chwilę nazwy okażą się bardzo ważne.

Na początek utwórzmy połączenie z pliku menu do pliku z informacjami o cezarze Klaudiuszu. W tym celu ustaw kursor w poniższej linii:

<li>Klaudiusz</li>

Znaczniki połączeń nie zawierają żadnych informacji o formatowaniu tekstu, tak więc pozostaw znacznik elementu listy i wstaw połączenie wewnątrz niego. Umieść <A> i </A> przed i za tekstem, który chcesz wykorzystać jako połączenie:

<li><a>Klaudiusz</a></li>

Teraz, korzystając z atrybutu HREF, dodaj nazwę pliku, do którego ma prowadzić połączenie. Ujmij ją w cudzysłów (z obu stron cudzysłów górny), a pomiędzy HREF i nazwę wstaw znak równości (=). Pamiętaj, że wielkość liter ma znaczenie w przypadku nazwy pliku, tak więc zwróć na tę kwestię szczególną uwagę (klaudiusz.html to nie to samo co Klaudiusz.html — każda litera musi się dokładnie zgadzać). W moim przykładzie nazwą będzie klaudiusz.html, ale jeżeli utworzyłeś swoje własne pliki, wstaw nazwę jednego z nich.

<li><a href="klaudiusz.html">Klaudiusz</a></li>

W tej chwili możesz już uruchomić przeglądarkę. Wybierz opcję „Otwórz plik” (lub jej odpowiednik w przeglądarce, której używasz) i otwórz plik menu.html. Element listy, który wybrałeś na połączenie, powinien zostać wyświetlony innym kolorem, podkreślony lub wyróżniony w jakiś inny sposób. Rysunek 5.3. pokazuje, jak wyglądała ta strona po jej wyświetleniu w Internet Explorerze dla Windows 98.

Jeżeli teraz klikniesz wyróżnione połączenie, przeglądarka powinna wczytać i wyświetlić stronę klaudiusz.html, jak pokazano na rysunku 5.4.

Jeżeli zdarzy się, że przeglądarka po wybraniu połączenia nie będzie mogła znaleźć pliku, sprawdź, czy na pewno nazwa, wpisana w atrybucie HREF jest w stu procentach zgodna z nazwą uprzednio utworzonego pliku i czy obydwa pliki znajdują się w tym samym katalogu. Pamiętaj o tym, że tekst połączenia należy zamknąć za pomocą znacznika </A> oraz o tym, aby ująć nazwę pliku w cudzysłów z obu stron (naprawdę bardzo łatwo o tym zapomnieć). Wszystkie te, z pozoru drobne, pomyłki mogą wprowadzić przeglądarkę w błąd i sprawić, że nie odnajdzie ona pliku, który powinna wczytać lub też niepoprawnie wyświetli tekst połączenia na ekranie.

Utwórzmy teraz połączenie z pliku klaudiusz.html z powrotem do pliku menu.html. Akapit na końcu tej strony został tam umieszczony właśnie po to:

<p>Powrót do Menu Głównego</p>

Dodaj to tej linii znacznik połączenia wraz z atrybutem HREF, gdzie nazwą pliku będzie menu.html, czyli wyjściowy plik menu:

<p><a href="menu.html">Powrót do Menu Głównego</p>

Niektóre przeglądarki mogą niepoprawnie odczytywać tego typu błędny zapis, tak więc zawsze uważnie sprawdź, czy znaczniki się ze sobą nigdzie nie przeplatają.

Odczytaj ponownie stronę biografii Klaudiusza. Połączenie powinno być już aktywne, klikając je, bez problemów musisz przejść z powrotem do strony menu.

Łączenie stron lokalnych
przy użyciu ścieżek względnych i bezwzględnych

Przykład z poprzedniego podpunktu pokazuje, jak połączyć ze sobą pliki, znajdujące się w tym samym katalogu (folderze) na lokalnym dysku. Dalej będziemy łączyć ze sobą pliki lokalne, lecz tym razem będą one umiejscowione w różnych katalogach (folderach).

Jeżeli po HREF podasz w cudzysłowie tylko nazwę pliku, tak jak robiliśmy to w poprzednich przykładach, przeglądarka będzie szukała tego pliku w tym samym katalogu, w którym znajduje się aktualnie oglądana strona. Dzieje się tak zawsze, niezależnie od tego, czy przeglądane pliki umieszczone są na dyskach lokalnych, czy na serwerach w Internecie — obydwa pliki powinny znajdować się w tym samym katalogu. Jest to najprostsza forma określania ścieżki względnej.

Ścieżki względne mogą również zawierać nazwy katalogów lub też wskazywać na pewną ścieżkę z punktu widzenia bieżącego katalogu. Ścieżka może określać miejsce w drzewie katalogów w stosunku do bieżącej pozycji, na przykład, żądany plik może znajdować się dwa poziomy katalogów w górę lub w dół.

Do określania ścieżek względnych w połączeniach można używać zapisu znanego z systemu Unix, bez względu na używany system operacyjny. I tak nazwy plików i katalogów oddzielone są od siebie ukośnikiem (/), a dwie kropki (..) zawsze wskazują na katalog znajdujący się bezpośrednio powyżej bieżącego. Tabela 5.1 zawiera kilka przykładów ścieżek względnych wraz z opisem ich znaczenia.

Tabela 5.1.

Ścieżki względne