R 05 07, HTML
[ Pobierz całość w formacie PDF ]
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.
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
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"
<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"
<html>
<head>
<title>Żywoty cezarów: Klaudiusz</title>
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.
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
[ Pobierz całość w formacie PDF ]