R_05_07.PDF

(917 KB) Pobierz
Wstêp
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:
wszystkiego o znaczniku <A> i różnych jego składnikach,
jak tworzyć połączenia do innych stron na dysku lokalnym za pomocą ścieżek
względnych i bezwzględnych,
jak tworzyć połączenia do innych stron w Internecie za pomocą URL-i,
jak korzystać z połączeń i odnośników do tworzenia połączeń wewnątrz strony,
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:
nazwa pliku (lub jego URL), do którego będzie prowadziło połączenie,
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 opo-
wiem w dalszej części rozdziału). Jednakże, najpowszechniejszym zastosowaniem tego
znacznika są hiperpołączenia i tym tematem zajmiemy się w tej chwili.
27144297.008.png
88
Część 1. Informacje wstępne
W przeciwieństwie do prostych znaczników, o których mówiliśmy w poprzednim roz-
dziale, 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ą atry-
butami 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 atrybut
em 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
.
Rysunek 5.1.
Hiperpołączenie
z użyciem znacznika <A>
Plik do wczytania
Tekst, który będzie
podświetlony
<A HREF="menu.html">Powrót do Menu Głównego</A>
Znacznik otwierający
Znacznik
zamykający
Poniższe przykłady demonstrują proste połączenie i jego efekt końcowy w Internet
Explorerze (rysunek 5.2).
Powrót do <a href="../menu.htm">Menu Głównego</a>
Rysunek 5.2.
Wynik
w Internet Explorerze
27144297.009.png 27144297.010.png 27144297.011.png 27144297.001.png
Rozdział 5. Wszystko o połączeniach
89
Ć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ło-
wy dwóch plików, które stworzyłam na potrzeby tego rozdziału: menu.html i klau-
diusz.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>
27144297.002.png
90
Część 1. Informacje wstępne
</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ę bar-
dzo 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 na-
zwą będzie klaudiusz.html, ale jeżeli utworzyłeś swoje własne pliki, wstaw nazwę jed-
nego 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ślo-
ny 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świe-
tlić stronę klaudiusz.html , jak pokazano na rysunku 5.4.
27144297.003.png
Rozdział 5. Wszystko o połączeniach
91
Rysunek 5.3.
Plik menu.htm
z hiperpołączeniem
Rysunek 5.4.
Strona klaudiusz.html
Jeżeli zdarzy się, że przeglądarka po wybraniu połączenia nie będzie mogła znaleźć pli-
ku, 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ą znacz-
nika </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.
Nie denerwuj się tym, że o wielkich i małych literach raz mówię tak, a innym razem inaczej.
Znaczniki HTML-a nie rozróżniają wielkich i małych liter, ale nazwy odnoszą się do plików,
znajdujących się na serwerach WWW. Większość z tych serwerów pracuje w systemach
operacyjnych, które rozróżniają wielkość liter (np. Unix), więc w przypadku nazw plików
27144297.004.png 27144297.005.png 27144297.006.png 27144297.007.png
Zgłoś jeśli naruszono regulamin