Przy tworzeniu własnego serwisu WWW, zwykle nie chcemy się ograniczyć wyłącznie do stworzenia pojedynczej strony - no chyba że ma to być tzw. strona-wizytówka. Jednak nawet wtedy możemy odczuć potrzebę umieszczenia na stronie kilku odnośników do innych stron Internetowych, które z jakiegoś powodu chcemy polecić innym osobom, które odwiedzą naszą stronę. Z uwagi na istnienie owych linków można powiedzieć iż usługa WWW (World Wide Web - ogólnoświatowa pajęczyna) została nazwana odpowiednio - ogromna ilość linków łączy ze sobą podstrony w obrębie serwisów oraz poszczególne serwisy Internetowe ze sobą, co jednoznacznie nasuwa skojarzenie z gigantyczną pajęczyną.
Do tworzenia odnośnika używa się znacznika <a>. Jako jego parametr href podaje się adres pliku który ma być wyświetlony po kliknięciu na linku. Zasady tworzenia adresów zostały opisane w lekcji Wstawianie grafiki na stronę WWW, więc jeżeli nie pamiętasz tych zasad tam znajdziesz wyjaśnienie. Pomiędzy znacznikiem otwierającym a zamykającym umieszcza się zaś opis danego odnośnika. Odnośnik do strony zawierającej listę wszystkich lekcji tego kursu może wyglądać następująco:
<a href="http://www.poradnik-webmastera.com/kursy/html/">Kurs języka HTML</a>
W tym przykładzie plik ma rozszerzenie .php z uwagi na używanie na tej witrynie technologii PHP - ty jednak na razie powinieneś(aś) tworzyć pliki z rozszerzeniem .html lub .htm.
Utworzony odnośnik ma wygląd określony przez arkusz stylów kaskadowych używany na stronie - jeżeli chcesz zobaczyć jak wyglądałby on gdyby style nie były używane, kliknij tutaj. Pozostałe przykłady jednakże nie będę prezentował na osobnych stronach, z wyjątkiem tych gdzie istotny będzie wygląd tak stworzonego odnośnika.
Zasady tworzenia adresówPrzy podawaniu adresu pliku do którego będzie prowadził odnośnik można wyróżnić następujące sytuacje:
- plik znajduje się na tym samym serwerze, gdzie znajduje się plik w którym jest umieszczony odnośnik, i dostępny jest poprzez ten sam protokół - zasady tworzenia takich adresów podane były powyżej;
- plik znajduje się na innym serwerze, protokół ten sam lub inny - trzeba podać pełny adres dostępu do pliku, zawierający nazwę protokołu, adres serwera i w końcu położenie pliku;
- plik znajduje się na tym samym serwerze, ale dostępny jest poprzez inny protokół - wtedy także należy podawać pełny adres dostępu do pliku, jak powyżej.
Można używać następujących protokołów, dla których obowiązują następujące zasady tworzenia adresów:
http- protokół za pomocą którego przesyłane są pliki z serwerów WWW, postać adresu była już podawana, ale ją przypomnę. Można podać sam adres serwera - wtedy wczytany zostanie domyślna strona z katalogu głównego serwera:
http://www.serwer.pl
Można także podać nazwę katalogu - wtedy wczytany zostanie domyślny plik z tego katalogu:
http://www.serwer.pl/katalog
Można także podać nazwę konkretnego pliku o który nam chodzi:
http://www.serwer.pl/katalog/plik;https- szyfrowana wersja protokołuhttp, używana głównie do przesyłania poufnych danych. Zasady tworzenia adresu są identyczne jak powyżej, zmienia się tylko oznaczenie protokołu:
https://www.serwer.pl/katalog/plik;ftp- w oparciu o ten protokół stawiane są serwery których celem jest udostępnianie innym różnych plików. Protokół ten pozwala także na wysyłanie plików na serwer - za pomocą tego protokołu wysyłał(a) będziesz stworzone przez siebie strony na serwer (no chyba, że na serwerze są zainstalowane specjalne skrypty które pozwalają zarządzać plikami na koncie z poziomu przeglądarki WWW, to wtedy nie będziesz musiał(a) posługiwać się tym protokołem do tego celu). Adres tworzy się identycznie jak w powyższych przykładach, zmienia się tylko oznaczenie protokołu:
ftp://serwer.pl/katalog/plik
Jeżeli do serwera należy się logować na konto inne niż anonimowe, to nazwę konta i ew. hasło można także podać w adresie, stosując jeden z zapisów:
ftp://konto@serwer.pl/katalog/plik
ftp://konto:hasło@serwer.pl/katalog/plik
Ten zapis jednak nie wszystkie programy interpretują poprawnie;gopher- poprzednik protokołu http, obecnie prawie całkowicie zapomniany. Adres do serwera używającego tego protokołu tworzy się następująco:
gopher://gopher.serwer.pl;mailto- nie jest to typowy protokół, ale raczej polecenie dla przeglądarki aby po kliknięciu na link uruchomił domyślny program pocztowy. Podstawowa postać adresu jest następująca:
mailto:jan.kowalski@serwer.pl
List można także wysłać równocześnie do kilku osób, rozdzielając ich adresy średnikiem:
mailto:jan.kowalski@serwer.pl;artur.nowak@serwer.pl
Za adresem e-mail można umieścić po znaku "?" dodatkowe parametry, które zostaną przesłane do programu pocztowego:
- adres(y) osób, które mają otrzymać kopię listu - parametr
cc
mailto:jan.kowalski@serwer.pl?cc=artur.nowak@serwer.pl; - adres(y) osób, które mają otrzymać kopię listu, przy czym ich adres(y) e-mail nie będą podane w listach otrzymanych przez poszczególnych adresatów - parametr
bcc
mailto:jan.kowalski@serwer.pl?bcc=szef@serwer.pl; - temat (tytuł) listu - parametr
subject
mailto:jan.kowalski@serwer?subject=Zamówione materiały; - treść listu - można podać całą treść listu lub jej fragment, jako parametr
body. Jeżeli będzie konieczność wstawienia znaku przejścia do nowej linii, można go wstawić zakodowany jako "%0A" - niestety nie działa to poprawnie z przeglądarką Netscape (sprawdzane na wersji 6).
mailto:jan.kowalski@serwer.pl?body=Najlepsze życzenia z okazji urodzin!%0AJan Kowalski.
<a href="mailto:jan.kowalski@serwer.pl?cc=artur.nowak@serwer.pl&bcc=szef@serwer.pl&subject=Zamówione materiały&body=Przesyłam zamówione materiały.%0A%0AJan Kowalski">Wyślij list</a>
- adres(y) osób, które mają otrzymać kopię listu - parametr
news- protokół ten umożliwia podanie nazwy jednej z grup dyskusyjnych, do której chcemy odesłać osobę przeglądającą stronę, np. grupy pl.comp.www:
news:pl.comp.www
Jeżeli chcemy podać także adres serwera na którym ta grupa jest, gdyż np. grupa znajduje się na firmowym serwerze, i jej tematyka dotyczy wyłącznie produktów firmy, można także w adresie umieścić nazwę serwera. W ten sposób można np. utworzyć odnośnik prowadzący do grupy dyskusyjnej pl.comp.www na serwerze news.tpi.pl:
<a href="news://news.tpi.pl/pl.comp.www">pl.comp.www</a>
Po kliknięciu na taki odnośnik uruchomiona zostanie domyślna przeglądarka grup dyskusyjnych;telnet- umożliwia podane adresu serwera który umożliwia pracę zdalną. Adres ma postać:
telnet://serwer.pl
W adresie można także uwzględnić numer portu na którym uruchomiona jest usługa telnet, jeżeli ten numer nie jest standardowy:
telnet://serwer.pl:22
W ten sposób (serwer:port)można także podawać numer portu dla omówionych wyżej protokołów, jeżeli na serwerze dostępne są one na niestandardowych portach;view-source- to nie jest protokół, lecz podanie adresu z użyciem tego "protokołu" może posłużyć jako wygodny skrót do wyświetlenia kodu źródłowego tej strony. Internet Explorer (min. wersja 4) wyświetla go w Notatniku, a Netscape w wewnętrznej przegądarce. Niestety Opera nie interpretuje poprawnie tego "protokołu".
<a href="view-source:http://www.poradnik-webmastera.com/kursy/html/linki.php">Źródło tej strony</a>
file- za pomocą tego "protokołu" można zmusić przeglądarkę do otworzenia określonego pliku lub katalogu. Składnia jest następująca:
file:C:\katalog\plik.txt
Jeżeli nazwa pliku nie jest podana, to otwarty zostanie katalog. Ten "protokół" niestety nie jest wspierany przez Netscape;res- "protokół" ten pojawił się poraz pierwszy w Internet Explorerze 4 i umożliwia wyświetlenie strony (lub innego pliku) który jest zapisany jako tzw. zasób w pliku wykodywalnym (EXE) lub bibliotece (DLL). Nie będę tutaj opisywał zasad używania tego protokołu, osoby które chciałyby używać tego protokołu w swoich programach odsyłam do MSDN lub innej dokumentacji;javascript- to także nie jest protokół w ścisłym tego słowa znaczeniu. Umożliwia on po kliknięciu na link wykonanie pewnego kodu w języku JavaScript. Więcej szczegółów podam w Kursie JavaScript.
Oprócz tego w systemie mogą być także obsługiwane inne protokoły, które są instalowane w systemie dzięki mechanizmowi APP (Application Pluggable Protocols), który pojawił się po raz pierwszy w IE4. Protokoły te jednakże obsługiwane są wyłącznie przez Internet Explorera i aplikacje zbudowane na jego podstawie. Przykładami takich protokołów jest np. protokół about, który powoduje w oknie przeglądarki tekstu podanego jako parametr (z wyjątkiem formy about:blank, która powoduje wyświetlenie pustej strony), czy mk używany wewnętrznie przez HTML Help.
Odnośniki do miejsc na stronie
Odnośnik może też prowadzić do określonego miejsca w dokumencie, także w tym który jest właśnie wyświetlany w oknie przeglądarki. Można to wykorzystać to utworzenia odnośnika pozwalającego na szybki powrót z końca strony na jej początek, czy też gdy strona jest dłuższa umieszczenie na jej początku krótkiego spisu treści zawierającego odnośniki za pomocą których można przenieść się do odpowiedniej części strony poświęconej określonemu zagadnieniu. Aby jednak taki "skok" był możliwy, najpierw w dokumencie w odpowiednim miejscu należy umieścić tzw. kotwicę (zakładkę), wykorzystując do tego parametr name znacznika <a>
<a name="protokoly"></a>
Tego typu polecenie umieszczone jest w kodzie tej strony na początku listy opisującej poszczególne protokoły Internetowe. Aby przenieść się do tak oznaczonego punktu w obrębie tego samego dokumentu, należy stworzyć odnośnik, w którym miejscem docelowym będzie zdefiniowana nazwa kotwicy poprzedzona znakiem "#"
<a href="#protokoly">Lista protokołów</a>
W przypadku gdy odnośnik ma prowadzić do miejsca umieszczonego w innym dokumencie niż bieżący, należy stworzyć odnośnik z uwzględnieniem wszystkich zasad podanych powyżej, na końcu adresu dodając jedynie nazwę docelowego miejsca w dokumencie poprzedzoną znakiem "#". Poniższy przykład pozwoli na bezpośrednie przeniesienie się do lekcji poświęconej wstawianiu grafiki, do miejsca gdzie omawiane jest otaczanie obrazka ramką:
<a href="grafika.php#ramka">Otaczanie obrazka ramką</a>
Sposób otwierania odnośnika - atrybut target
Docelowy dokument nie musi się także otwierać w tym samym oknie - jak zauważyłeś(aś), przykłady do lekcji tego kursu które były umieszczone w dodatkowych plikach, otwierały się w nowym oknie przeglądarki. Do uzyskania tego efektu należy użyć parametru target znacznika <a>. Parametr ten pozwala na określenie miejsca gdzie ma się załadować podana strona. Dostępne są następujące wartości specjalne (wszystkie rozpoczynają się od znaku podkreślenia oraz są pisane małymi literami - to jest ważne):
_blank- link otwiera się w nowym oknie;_top- link otwiera się w głównym oknie przeglądarki; ten sposób jest przydatny jeżeli strona otwiera się w ramce - dzięki niemu można "wyskoczyć" z wszystkich ramek;_parent- podobny nieco do_top, ale wyskakuje tylko z jednej ramki (ramki mogą być zagnieżdżone);_self- link otwiera się w tym samym oknie (lub w tej samej ramce jeżeli korzystasz z ramek). Jest to wartość domyślna.
Poza tym można podać jeszcze nazwę docelowej ramki - dokładnie jest to opisane w lekcji Ramki w HTML.
Atrybut target jest oznaczony jako niezalecany w HTML 4.01 i XHTML. Od momentu stworzenia tych standardów minęło jednak już sporo czasu i okazało się, że ten atrybut przydaje się jednak w wielu sytuacjach, co obecnie zmuszało osoby starające się przestrzegać standardów do tworzenia różnych obejść w języku JavaScript. Dlatego też atrybut ten powróci w nadchodzącym standardzie HTML 5.
Poniższy przykład pokazuje jak utworzyć link do strony głównej tego kursu, dzięki czemu będzie się ona otwierała w nowym oknie:
<a href="/kursy/html/" target="_blank">Kurs języka HTML</a>
Kolory linków
Do zmiany kolorów utworzonego odnośnika tekstowego można użyć parametrów znacznika <body>. Dostępne są trzy parametry:
link- określa kolor odnośnika nieodwiedzonego;alink- określa kolor odnośnika aktywnego, czyli np. klikniętego. Kolor ten odnośnik przyjmuje po kliknięciu na nim, a przed załadowaniem się kolejnej strony. Niekiedy też po wykorzystaniu przycisku "Wstecz" w przeglądarce ostatnio kliknięty link niekiedy ma nadal status "aktywny" i jest wyświetlany w tym kolorze;vlink- określa kolor odnośnika odwiedzonego.
Wszystkie te trzy atrybuty są oznaczone jako niezalecane - zamiast nich powinno stosować się odpowiednie polecenia kaskadowych arkuszy stylów CSS.
Jako wartości tych parametrów podaje się nazwę lub kod szesnastkowy koloru którego chcemy użyć. Przykładową listę kodów kolorów podanych w systemie szesnastkowym znajdziesz w artykule Bezpieczna paleta kolorów. Zastosowanie tych atrybutów w praktyce może wyglądać następująco:
<body link="green" alink="yellow" vlink="blue">
Na stronie na której znalazłby się powyższy znacznik odnośniki nieodwiedzone byłyby wyświetlane na zielono, aktywne na żółto a odwiedzone na niebiesko. Jak to by w praktyce wyglądało, możesz się przekonać klikając tutaj
Można także ustawić kolor odnośników w taki sposób jak ustawia się kolor tekstu, czyli za pomocą znacznika <font>. Znacznik ten jest jednak niezalecany, dlatego zamiast niego powinno się stosować odpowiednie polecenia kaskadowych arkuszy stylów CSS:
<a href="/kursy/html/"><font color="green">Kurs języka HTML</font></a>
<a href="/kursy/html/" style="color: green">Kurs języka HTML</a>
Stosując tą metodę, dla każdego odnośnika należałoby osobno ustawiać kolor. W przypadku tej metody nie ma także możliwości rozróżnienia stanu odnośnika, czyli odnośnik nieodwiedzony będzie miał ten sam kolor co odwiedzony.
Obrazki jako odnośniki graficzne
W HTML-u odnośniki tekstowe nie są jedynym typem odnośników jakie można tworzyć - możliwe jest także tworzenie odnośników graficznych, stosując zamiast opisu tekstowego obrazek wstawiony z użyciem znacznika <img>. Poniższy przykład pokazuje jak stworzyć odnośnik graficzny prowadzący do strony głównej tego kursu:
<a href="/kursy/html/"><img src="webdir.gif" width="101" height="77" alt="Kurs języka HTML"></a>
Jak widać, wokół obrazka pojawiła się ramka, która symbolizuje iż obrazek ten jest odnośnikiem. Jednak taka ramka zwykle jest niepożądana, dlatego można ją usunąć za pomocą parametru border znacznika <img>. Atrybut ten jest jednak oznaczony jako nie zalecany, dlatego zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<a href="/kursy/html/"><img src="webdir.gif" width="101" height="77" alt="Kurs języka HTML" border="0"></a>
<a href="/kursy/html/"><img src="webdir.gif" width="101" height="77" alt="Kurs języka HTML" style="border-width: 0"></a>
Przy tworzeniu odnośników graficznych ważne jest aby podać opis obrazka jako parametr alt - jeżeli tego parametru nie będzie, to osoba odwiedzająca stronę nie będzie wiedziała gdzie prowadzi odnośnik w przypadku gdy obrazek nie zostanie wczytany.
Możliwe jest także tworzenie odnośników które będą zawierały równocześnie grafikę i tekst:
<a href="/kursy/html/"><img src="webdir.gif" width="101" height="77" alt="Kurs języka HTML" border="0" align="middle"> <big><b>Kurs języka HTML</b></big></a>
<a href="/kursy/html/"><img src="webdir.gif" width="101" height="77" alt="Kurs języka HTML" style="border: 0; vertical-align: middle"> <big><b>Kurs języka HTML</b></big></a>
Tworzenie graficznej mapy odsyłaczy
Podane powyżej przykłady nie wyczerpują możliwości tworzenia graficznych odsyłaczy - do dyspozycji są jeszcze tzw. mapy odsyłaczy. Mapa taka pozwala na określenie obszarów obrazka, które będą "aktywne" i określić jakie pliki ma przeglądarka załadować po ich kliknięciu. Mapę odsyłaczy tworzy się następująco:
- do znacznika
<img>dodaje się dodatkowy parametrusemap, którego wartością jest nazwa mapy odsyłaczy poprzedzona znakiem "#"; - dodaje się do strony znacznik <map> z atrybutem
name, który określa nazwę tworzonej mapy odsyłaczy; - w obrębie znacznika
<map>definiuje się poszczególne aktywne obszary za pomocą znaczników <area>.
Pierwsze dwa kroki nie wydają się trudne, omówienia wymaga punkt trzeci, a dokładniej parametry które można ustawić dla znacznika <area>:
shapeorazcoords- pierwszy parametr określa kształt obszaru, zaś drugi jego współrzędne. Dostępne są następujące kształty obszarów:
rect- prostokąt, jako współrzędne podaje się współrzędne x i y lewego górnego oraz prawego dolnego narożnika obszaru. Współrzędne liczy się od jeden, początek układu współrzędnych znajduje się w lewym górnym rogu obrazka, zaś oś Y jest odwrócona (dodatnie wartości są liczone "w dół"). Aby pomiędzy dwoma prostokątnymi obszarami nie było przerwy, należy współrzędne podać tak, aby "poprzedni" prostokąt miał tą samą np. prawą współrzędną co "następny" prostokąt lewą;circle- koło, jako współrzędne podaje się współrzędne środka oraz długość promienia;poly- wielokąt, jako współrzędne podaje się pary współrzędnych x, y kolejnych wierzchołków tego wielokąta.
href- adres dokumentu który ma się załadować po kliknięciu na danym obszarze;alt- opis odsyłacza, który może zostać wyświetlony przez przeglądarkę gdy kursor zatrzyma się nad danym obszarem;title- tytuł odsyłacza, za jego pomocą można zmusić Netscape do wyświetlenia tekstu pomocy przy zatrzymaniu kursora nad danym obszarem;nohref- w pewnych wypadkach możemy zechcieć aby zdefiniowany obszar nie był odsyłaczem, wtedy przy jego definicji oprócz parametrówshapeicoordsnależy podać ten parametr.
Uzbrojeni w tą wiedzę, możemy stworzyć przykładową mapę odsyłaczy. Zostanie ona zbudowana w oparciu o podany powyżej obrazek, który zostanie podzielony na dwie części: górną (będącą odnośnikiem do strony głównej kursu) oraz dolną (będącą odnośnikiem do pierwszej lekcji kursu, czyli wstępu). Dodatkowo pośrodku będzie pewien obszar który nie będzie odnośnikiem:
<img src="webdir.gif" width="101" height="77" alt="książka" title="książka" border="0" usemap="#mapa"> <map name="mapa"> <area shape="rect" coords="1, 1, 101, 30" href="/kursy/html/" alt="Kurs języka HTML" title="Kurs języka HTML"> <area shape="rect" coords="1, 48, 101, 77" href="wstep.php" alt="Wstęp" title="Wstęp"> </map>
<img src="webdir.gif" width="101" height="77" alt="książka" title="książka" style="border-width: 0" usemap="#mapa"> <map name="mapa" id="mapa"> <area shape="rect" coords="1, 1, 101, 30" href="/kursy/html/" alt="Kurs języka HTML" title="Kurs języka HTML"> <area shape="rect" coords="1, 48, 101, 77" href="wstep.php" alt="Wstęp" title="Wstęp"> </map>
Według dostępnej dla mnie dokumentacji wszystkie wersje Internet Explorera, Netscape i Opery poprawnie interpretują ten znacznik, jednak pomimo tego zalecane jest stworzenie alternatywnej metody nawigacji na stronie niż tylko za pomocą map odnośników, gdyż inne przeglądarki mogą nie potrafić poprawnie zinterpretować tego typu obiektów, dotyczyć to także może oprogramowania zbierającego informacje o stronach dla wyszukiwarek Internetowych. Jeżeli używane są wyłącznie obszary prostokątne, rozważyć można podzielenie całego obrazka na części, dla których niezależnie będzie można przyporządkować odnośniki, i ułożenie całości na stronie za pomocą tabeli (tworzenie tabel jest opisane w lekcji Tabele).
Brak komentarzy:
Prześlij komentarz