Kurs języka HTML - poradnik webmastera: Odsy³acze

Tematy: Istota odsyłaczy | Etykieta | Odsyłacze | Mapy
odsyłaczy na obrazkach
Odsyłacze
O rozdziale: Rozdział Odsyłacze wyjaśnia, w jaki sposób za pomocą odsyłaczy
hipertekstowych wiążemy ze sobą rozmaite zasoby w World Wide Web, dzięki
czemu możemy za pomocą kliknięć przenosić się w inne miejsca w Internecie
lub w tym samej witrynie, pobierać pliki, uruchamiać pocztę itd.
Istota odsyłaczy
Odsyłacze (inaczej: hiperłącza, łącza hipertekstowe, odnośniki, linki) są chyba
najbardziej charakterystycznym elementem dokumentów w światowej sieci
World Wide Web. Bez odsyłaczy nie istniałyby powiązania między dokumentami
na tym samym serwerze, w tym samym mieście, kraju czy kontynencie. Dzięki
odsyłaczom można wiązać ze sobą poszczególne strony, a doskonałym
przykładem ich roli jest choćby niniejszy kurs, który został opracowany na wielu,
powiązanych ze sobą stronach. Gdyby nie było odsyłaczy, cała treść kursu
musiałaby zostać przedstawiona na jednej stronie, która byłaby dość uciążliwa
w czytaniu.
Odsyłacz jest niczym innym, jak wskazaniem jakiegoś innego miejsca. Kliknięcie
na takim wskazaniu przenosi użytkownika do docelowego miejsca, przy czym
może to być z powodzeniem miejsce na tej samej stronie, inna strona w ramach
tego samego, złożonego dokumentu, a nawet strona na drugim końcu świata.
Użytkownik nie musi nawet w gruncie rzeczy wiedzieć, że powiązane ze sobą
tematycznie informacje znajdują się w miejscach oddalonych od siebie nawet o
tysiące kilometrów. Najważniejsze jest ich tematyczne powiązanie, a nie
lokalizacja. Gdy na przykład czytamy stronę zawierającą opis jakiejś choroby,
możemy sięgnąć do całkiem innego miejsca w poszukiwaniu jej etiologii, a do
jeszcze innego, gdy będziemy chcieli przeczytać o jej ogniskach.
Hipertekstowe odsyłacze w World Wide Web można porównać ze spisem treści
czy odsyłaczami w książce. Informacja, że na stronie 154 znajduje się rozdział
pod jakimś tytułem, a na stronie 87 tabela, na którą powołujemy się w jakimś
miejscu książki, jest de facto odsyłaczem, choć czytelnik musi wykonać "skok"
samodzielnie, wertując po prostu kartki. Elektroniczne odsyłacze są znacznie
wygodniejsze w obsłudze. Odsyłacz można też potraktować jak swoistą
dygresję. Warto jednak zwrócić uwagę, że zbyt duża liczba odsyłaczy, zwłaszcza
w tekście o charakterze na poły "beletrystycznym", może rozpraszać czytelnika,
chyba że strona zawiera po prostu z założenia odsyłacze do jakichś źródeł.
Warto je jednak stosować z umiarem.
Etykieta
Można wyróżnić dwa rodzaje konstrukcji odsyłaczowych: do etykiet i do stron.
Etykieta (zwana też zakładką lub kotwicą - ang. anchor) jest znakiem, swoistą
elektroniczną zakładką, podobną do zakładek w książce, która zaznacza jakieś
miejsce w tekście. Gdy utworzymy etykietę, będziemy mogli się odwoływać nie
tylko do zawierającej ją strony, ale i do konkretnego miejsca na stronie. W ten
sposób czytelnik będzie mógł natychmiast skoczyć do wskazanego punktu.
Konstrukcja etykiety jest następująca:
<a name="nazwa_etykiety"> </a>
Zauważmy, że w taki właśnie sposób zostały utworzone etykiety na stronach
kursu. Umożliwiło to zbudowanie czegoś w rodzaju spisów treści na
poszczególnych stronach, u góry, które pozwalają szybko skoczyć do opisu
wybranego zagadnienia.
Możemy utworzyć w dokumencie dowolną liczbę etykiet, które będą służyć jako
punkty docelowe dla różnych odsyłaczy. Jest to szczególnie wygodne w
przypadku dużych objętościowo stron, wymagających podzielenia na pewne
logiczne fragmenty, aby były łatwiejsze w czytaniu. Spis zagadnień z
wykorzystaniem odsyłaczy do etykiet-zakładek jest bardzo często stosowany w
Internecie.
Konieczne jest stosowanie cudzysłowu obejmującego etykiety, podobnie jak i
adresów w odsyłaczach. Gdy etykieta zawiera kilka wyrazów, ich użycie jest
wręcz niezbędne, aby definicja była poprawna. Należy też zwracać uwagę na
wielkość liter, gdyż są one na ogół rozróżniane. Należy zalecać używanie małych
liter zarówno w etykietach, jak i odsyłaczach do nich.
Uwaga: wielowyrazowe zakładki, nawet ujęte w cudzysłowy, są ignorowane
przez niektóre przeglądarki, np. Lynx. Można temu zaradzić, łącząc wyrazy, np.
"to_jest_zakładka_dla_pewnego_tematu".
Odsyłacze
Czym jest odsyłacz?
Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i
pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej budowę
można obrazowo przedstawić w postaci:
<a href="miejsce_docelowe">Tekst, na którym należy kliknąć</a>
Gdy utworzymy odsyłacz, ciąg znaków "tekst, na którym należy kliknąć" będzie
zaznaczony innym kolorem, zazwyczaj niebieskim, i podkreślony (choć można to
zmienić). Na przykład odsyłacz do miesięcznika PC World Komputer:
<a href="http://www.pcworld.pl">Tutaj znajdziesz miesięcznik PC World
Komputer</a>
Tutaj znajdziesz miesięcznik PC World Komputer
Gdy przesuniesz kursor myszki nad odsyłacz, kursor przyjmie postać rączki,
natomiast w wierszu statusu przeglądarki powinna się pojawić informacja
http://www.pcworld.pl. Kliknięcie spowoduje natychmiastowy skok do
wskazanego miejsca ("natychmiastowość" jest pojęciem względnym - niekiedy
trwa to całkiem długo, jeśli łącza są przeciążone...).
ISTOTNA UWAGA: przy tworzeniu odsyłaczy należy zwracać uwagę na
wielkość liter w odsyłaczach. Dla wielu serwerów internetowych ta sama
wielka i mała litera są dwoma różnymi znakami, więc "MojaFirma" nie jest tym
samym co "mojafirma". Praktyka pokazuje, że wiele osób nie zwraca na to
uwagi, wskutek czego nie można wczytać strony albo obrazka czy pliku
dźwiękowego na konkretnej stronie - gdy plik na serwerze zawiera jakieś wielkie
litery, koniecznie należy to uwzględnić w odsyłaczu.
Informacje o A
Do jakich miejsc mo ż emy si ę odwoływać?
Oczywiście najczęściej stosujemy odsyłacze do stron WWW, których
charakterystycznym elementem jest ciąg http://. Konstrukcja może więc mieć
postać:
<a href="http://host.domena">tekst odsyłacza</a>.
W pokazanym wyżej przykładzie PC World Komputera posłużyliśmy się adresem
http://www.pcworld.pl, gdzie host=www, a domena=pcworld.pl. Konieczne jest
oczywiście użycie w adresie na początku http://.
Zauważmy od razu, że taki adres powoduje wywołanie głównej (domyślnej)
strony WWW. Nazwy strony nie podawaliśmy. Dlatego zaleca się, aby strona
główna serwisu była plikiem o nazwie index.htm lub index.html. Naturalnie
pomijamy tutaj sytuację, gdy w serwisie stosowany jest język skryptowy serverside, np. PHP - wtedy rozszerzenie pliku ma zwykle postać .php.
Gdy zamieszczamy w naszym dokumencie jakiś odsyłacz do strony znajdującej
się gdzieś w świecie, należy po prostu przepisać ten adres w trakcie sesji w
Internecie. Często jednak będziemy się odwoływali do stron samodzielnie
sporządzonych i wtedy wystarczy po prostu podawać nazwy samych plików, bez
konieczności definiowania adresu http. Najwygodniej jest wówczas oczywiście
ulokować wszystkie strony i niezbędne pliki graficzne, którymi upstrzyliśmy nasz
dokument, w jednym katalogu. Znacznie uprości to życie w trakcie
konstruowania dokumentu. Jeśli jednak prowadzimy większy serwis, lepiej jest
utworzyć w naszym komputerze i na serwerze odrębne katalogi tematyczne, a
dla grafiki wyznaczyć nawet osobny folder, dzięki czemu będziemy się mogli do
nich wygodnie odwoływać, jeśli zajdzie taka potrzeba.
Praktyczna uwaga: gdy chcemy wstawić do dokumentu jakiś adres,
który znaleźliśmy w Internecie, nie jest konieczne ręczne
przepisywanie adresu. Można postąpić w następujący sposób:
•
•
Jeśli używasz Firefoksa lub Operę, ustaw kursor na odsyłaczu, kliknij
prawym przyciskiem myszki i wybierz opcję Kopiuj adres odnośnika.
Przejdź do redagowanego dokumentu i wstaw ze schowka skopiowany
adres.
Jeśli używasz Internet Explorera PL, ustaw kursor nad odsyłaczem, kliknij
prawym przyciskiem myszki i wybierz opcję Kopiuj skrót. W redagowanym
dokumencie wstaw ze schowka skopiowany adres.
W dokumencie możemy zamieszczać odsyłacze do różnych typów plików.
Najczęściej jest to dokument HTML, choć równie dobrze może to być plik
tekstowy (TXT), obrazek GIF lub JPG, plik dźwiękowy WAV, MID, AU czu AIFF,
dokument Worda, plik Acrobata. Przeglądarki są uwrażliwione na pewne typy
plików, zawierając wbudowane wewnętrzne przeglądarki (odtwarzacze) danych
plików. Na przykład w Firefoksie, Operze czy Internet Explorerze zostanie bez
kłopotu zaprezentowany obrazek GIF czy plik tekstowy.
Ponieważ jednak nierzadko w dokumentach internetowych są umieszczane
odsyłacze do innych plików, konieczne się stało zaangażowanie do ich obsługi
albo zewnętrznych aplikacji, albo specjalnych wtyczek (plug-ins), które
pozwalają obejrzeć dany dokument bezpośrednio z poziomu przeglądarki, z
użyciem pojawiającego się dodatkowego menu (na ekranie lub pod prawym
klawiszem myszki). Doczekaliśmy się już wielu "wtyczek" - VR, VRML, EVY, PDF,
CMX itd. Są one bezpłatnie dostępne w Internecie. Jest jednak także faktem, że
same przeglądarki coraz częściej samodzielnie obsługują rozmaite nietypowe
formaty.
Jeśli przeglądarka nie zawiera wbudowanej obsługi pliku danego typu ani nie
istnieje stosowny plug-in, możemy się także posłużyć aplikacją w naszym
komputerze. Na przykład plik Worda można obejrzeć za pomocą Worda lub
Word Viewera, a nowsze wersje Internet Explorera potrafią bezpośrednio
wczytać plik Worda, jeśli edytor jest obecny na dysku. Przeglądarkę można
nauczyć reagowania na określone typy plików, co zwykle odbywa się w oknie
dialogowym preferencji.
Odsyłacze absolutne i wzgl ę dne
Warto wiedzieć, że rozróżniamy odsyłacze absolutne i względne (relatywne).
Pierwsze zawierają pełny adres internetowy strony, natomiast drugie jedynie
fragment ścieżki dostępu.
Adresem absolutnym jest np. strona PC World Komputera:
http://www.pcworld.pl
Adresem relatywnym jest np. adres jakiejś wiadomości w numerze miesięcznika
PC World Komputer:
/news/96251.html
Adres relatywny korzysta z pełnego adresu strony, na której się znajduje. Skoro
strona główna PC World Komputera ma adres:
http://www.pcworld.pl
to automatycznie odsyłacz relatywny wiadomości jest interpretowany jako:
http://www.pcworld.pl/news/96251.html
Wiadomość jest położona o szczebel niżej w hierarchii katalogów.
Stosowanie odsyłaczy relatywnych jest charakterystyczne dla danego serwisu.
Autor nie musi się troszczyć o podawanie pełnego adresu - wystarczy, że poda
tylko niezbędny fragment, gdyż resztę przeglądarka doda sama. Odsyłacze
absolutne są (absolutnie :-)) konieczne, gdy wskazujemy miejsca na innych
serwerach.
Przypomnijmy sobie w tym miejscu uwagi dotyczące polecenia <base> w
nagłówku strony <head>. w rozdziale Struktura dokumentu. Wpisanie adresu
strony bazowej w nagłówku może nas uchronić od konieczności przepisywania
wszystkich adresów relatywnych, gdy z jakichś powodów przenosimy stronę w
inne miejsce i grozi nam utrata aktualności odsyłaczy względnych.
Kilka prostych przykładów:
Odsyłacz do innej strony HTML (w tym samym katalogu):
<a href="nazwa_strony.html">Edytor Pajączek</a>
Edytor Pajączek
Odsyłacz do innej strony w katalogu podrzędnym
<a href="katalog_podrzędny/nazwa_strony.html">Inna strona</a>
Odsyłacz do strony w innym katalogu, równorzędnym w hierarchii:
<a href="../katalog_równorzędny/nazwa_strony.html">Jeszcze inna strona</
a>
Dwie kropki w adresie nakazują przeglądarce "zajrzeć wyżej" w hierarchii
katalogów, "zejść" do nowego katalogu i przywołać żądaną stronę.
Odsyłacz do pliku tekstowego TXT
<a href="plik_tekstowy.txt">Plik tekstowy TXT</a>
Plik tekstowy TXT
Odsyłacz do pliku graficznego GIF
<a href="plik_graficzny.gif">Plik graficzny GIF</a>
Plik graficzny GIF
Odsyłacz do pliku dźwiękowego
<a href="../multimed/pinkpant.mid">Plik dźwiękowy</a>
Plik dźwiękowy
Odsyłacz do pliku PDF
<a href="licence.pdf">dokument PDF</a>
Dokument PDF ukazuje się zwykle bezpośrednio w przeglądarce (Internet
Explorer i Firefox) i jest opatrzony narzędziami nawigacyjno-zarządzającymi
Acrobat Readera. Sam Reader uruchamia się także w tle (odrębna "instancja"),
jeśli jest to wersja 3, natomiast w wersji 4 uruchamia się wyłącznie jako wtyczka
w przeglądarce. Ponadto wersja 4 Readera pozwala zapisywać plik PDF
bezpośrednio z poziomu przeglądarki (ikonka dyskietki w menu Readera), na co
nie pozwala wersja 3. Opera uruchamia osobną instancję Acroba Readera.
dokument PDF - dokument ma objętość 9 KB
Obszerniejsze informacje o sposobach dołączania plików multimedialnych do
dokumentów WWW są zawarte na stronie Multimedia.
Odsyłacze do etykiet
Powiedzieliśmy wyżej, jak tworzyć odsyłacze do innych dokumentów. Ale nieco
wcześniej mówiliśmy także o etykietach, więc warto teraz powiedzieć, jak
tworzyć odsyłacze do etykiet. Konstrukcja jest bardzo prosta:
<a href="strona.htm#nazwa_etykiety">Tekst</a>
Zwróć uwagę na znak # oddzielający nazwę strony od nazwy etykiety.
Jeśli tworzymy odsyłacz do etykiety na tej samej stronie, wystarczy użyć samej
nazwy etykiety, czyli:
<a href="#nazwa_etykiety">Tekst, na którym należy kliknąć</a>
Uwaga: należy zwrócić uwagę na wielkość liter w etykiecie. Gdy
etykieta rozpoczyna się z wielkiej litery, także odsyłacz powinien
zawierać nazwę etykiety pisaną z wielkiej litery.
Poniższy przykład pozwoli skoczyć do punktu poświęconego istocie odsyłaczy,
na początku tej strony. Użyto tu odwołania do etykiety #istota , umieszczonej
wcześniej przy punkcie Istota odsyłaczy.
Przeczytaj uwagi o istocie odsyłaczy
Informacje o odsyłaczach w dokumencie zawierającym ramki są podane na
stronie poświęconej ramkom.
Odsyłacze do poczty elektronicznej i FTP
Często stosowanym odsyłaczem jest konstrukcja pozwalająca czytelnikowi
strony wysłać do jej autora (lub jakiejkolwiek innej osoby) pocztę elektroniczną.
Jej konstrukcja wygląda następująco:
<a href="mailto:imie_nazwisko@adres">Tutaj kliknij</a>
Przykładowa zachęta do wysłania listu mogłaby wyglądać następująco:
<a href="mailto:[email protected]">Jeśli chcesz mi nawrzucać, kliknij w
tym miejscu</a>
co w praktyce przybrałoby postać:
Jeśli chcesz mi nawrzucać, kliknij w tym miejscu
albo, w bardziej stonowanej formie:
Wyślij list do autora strony
Oczywiście w miejscu, gdzie należy kliknąć, można też po prostu podać adres
poczty, aby był widoczny bezpośrednio na ekranie przeglądarki.
Możemy jeszcze dodatkowo opatrzyć odsyłacz stosownym obrazkiem. W tym
miejscu zastosujemy obrazek email.png, wstawiając definicję przed adresem.
Wyślij list do autora strony
Zauważ, że gdy przesuniesz kursor nad odsyłacz, w wierszu statusu
przeglądarki pojawi się kontrolna informacja
mailto:[email protected] (Firefox i Opera)
lub
Wysyła pocztę do: mailto:[email protected] (Internet Explorer)
Do kategorii sztuczek można zaliczyć technikę wstępnego
opatrywania listu predefiniowanymi informacjami. Gdybyśmy sobie
zażyczyli, aby w momencie wysyłania poczty przez czytelnika
strony w polu tematu listu pojawiła się jakaś domyślna treść,
możemy zdefiniować odsyłacz na przykład tak:
<a href="mailto:[email protected]?subject=Panie Wimmer,
mam taką sprawę:">
W podobny sposób można predefiniować adres odbiorcy, do
którego idzie kopia listu:
<a href="mailto:[email protected][email protected]">
albo tzw. ślepa lub ukryta kopia, czyli BCC (żaden inny odbiorca
listu nie zobaczy tego adresu):
<a href="mailto:[email protected][email protected]">
Można też zdefiniować fragment ciała listu, a więc już
bezpośrednio w oknie edycji:
<a href="mailto:[email protected]?body=Panie Wimmer, ja w
takiej sprawie...">
Pocztę może też otrzymać kilka osób jednocześnie, adresowanych
w polu głównym. Adresy trzeba rozdzielić po prostu średnikami:
<a href="mailto:[email protected];[email protected]">
Powstaje pytanie, czy można połączyć wszystkie te elementy "do
kupy". Otóż można i robi się to prosto, stosując jako łącznik ciąg
&amp;.
<a href="mailto:[email protected][email protected]&amp;
[email protected]&amp;subject=Bardzo ważny
list&amp;
body=Witajcie Panowie">Wyślij pocztę</a>
No to wypróbujmy - proszę, kliknij, ale nie wysyłaj :-)
Przy definiowaniu adresu poczty (a nawet szerzej, pełnego adresu) możesz się
także posłużyć znacznikiem logicznym <address> </address>, który
automatycznie nada odpowiedni atrybut (zazwyczaj interpretowany przez
przeglądarki jako kursywa), a całość umieścić w obramowanym bloku div.
<div style="border: 3px double olive; width:250px; ">
<address>
dane adresowe
</address>
</div>
Paweł Wimmer
Dziennikarz prasy komputerowej
Warszawa
E-mail: [email protected]
Równie często stosowaną usługą jest FTP, który pozwala sięgnąć do serwera FTP
w poszukiwaniu jakichś plików - można w ten sposób wskazać położenie
jakiegoś shareware'owego programu. Nasze wydawnictwo posiada swój własny
serwer, z którego można skopiować np. listingi zamieszczane w dziale Dla
Praktyków w PCkurierze, publikacje elektroniczne czy oprogramowanie.
Korzystamy tutaj z protokołu File Transfer Protocol - stąd nazwa FTP.
Odpowiednia konstrukcja wskazująca na FTP ma postać:
<a href="ftp://ftp.adres">Jakiś tekst</a>
Gdybyśmy chcieli sięgnąć do serwera Wydawnictwa Lupus, możemy podać
odsyłacz (już nieaktualny):
<a href="ftp://ftp.polbox.com.pl/library/!lupus">Tutaj znajdziesz listingi Dla
Praktyków</a>
Możemy także dać bezpośredni odsyłacz do pliku:
<a href="ftp://ftp.polbox.com.pl/library/!lupus/hpauthor.zip">Podręcznik
Home Page Author</a>
Zauważ, że na końcu adresu znalazł się ciąg hpauthor.zip. Jest to nazwa pliku,
który zawiera podręcznik. W ten sposób można od razu sięgnąć do konkretnego
pliku, a nie tylko do katalogu z plikami. Przeglądarka WWW zapyta wówczas, co
zrobić z plikiem. Wystarczy wybrać opcję zapisania na dysku, aby program
przystąpił do ściągania pliku na dysk naszego komputera.
Dobrym (wręcz bardzo dobrym!) obyczajem jest podawanie przy odsyłaczu do
pliku wielkości pobieranego materiału. Czytelnik strony nie powinien być
zaskakiwany dużymi plikami, a przede wszystkim ma prawo wiedzieć, jak długo
będzie trwać jego kopiowanie. Tę samą zasadę można zresztą stosować, gdy
podajemy odsyłacz do strony, której wczytanie trwa dość długo, gdyż zawiera
dużo tekstu i/lub obrazków. Można tu przyjąć granicę 100-200 KB, aczkolwiek
problem ten traci szczęśliwie na znaczeniu w miarę rozwoju stałych łączy
internetowych.
Odsyłacze do innych usług
Niektóre z tych usług są już niezmiernie rzadko używane.
Plik na dysku lokalnym
<a href="file:///ścieżka/plik"></a>,
Gopher
<a href="gopher://..."></a>,
Telnet
<a href="telnet://..."></a>,
Wais
<a href="wais://..."></a>
Grupy dyskusyjne
<a href="news://..."></a>,
Jeśli podasz np. nazwę konkretnej grupy dyskusyjnej, kliknięcie na odsyłaczu do
niej spowoduje uruchomienie domyślnego programu obsługi grup, np. Outlook
Express w Internet Explorerze) i ustawienie kursora na na danej grupie. Na
przykład:
<a href="news:pl.comp.www"></a>
Odsyłacz do grupy dyskusyjnej pl.comp.www
Zauważmy, że uruchamiany jest domyślny serwer newsów.
Nigdy nie wiemy, który serwer newsów zaabonował nasz czytelnik. Jeśli chcemy
skierować naszego gościa do ściśle określonego serwera, możemy podać w
odsyłaczu adres serwera, np.:
Odsyłacz do samego serwera news://news.tpi.pl.
Mało tego, możemy także skierować od razu do wskazanej grupy:
<a href="news://news.tpi.pl/pl.comp.www">grupa dyskusyjna
pl.comp.www</a>
grupa dyskusyjna pl.comp.www
Mapy odsyłaczy na obrazkach
Na zakończenie warto jeszcze podać sposób definiowania odsyłaczy na
obrazkach. Jest to o tyle przydatne, że możemy w ten sposób wykorzystać
grafikę. Taki sposób definiowania odsyłaczy jest już powszechnie spotykany w
World Wide Web, aczkolwiek warto także stosować równoległe odsyłacze
tekstowe, gdyż nie wszyscy stosują przeglądarki graficzne i byliby w ten sposób
pozbawieni możliwości wykonania skoku.
W tym miejscu pokażemy tzw. mapowanie po stronie klienta, a więc
nowocześniejszy sposób, akceptowany przez różne wersje Navigatora i Internet
Explorera.
Wyobraźmy sobie, że mamy obrazek, na który chcielibyśmy nałożyć mapę
odsyłaczy (niech Czytelnik łaskawie przymknie oko na brak precyzji).
Zaznaczone prostokąty mają ilustrować zakres map.
Na razie jest to grafika bez odsyłaczy.
Poniżej widać obrazek z mapą odsyłaczy. Gdy Czytelnik przesunie kursor myszki
nad zaznaczone prostokąty, kursor przyjmie postać "rączki", sygnalizującej
istnienie odsyłacza. W wierszu statusu przeglądarki pojawią się adresy stron. Są
to adresy fikcyjne, więc kliknięcie nie spowoduje skoku do tak nazwanej strony.
A oto pełna treść polecenia:
<img src="odsylacz.gif " usemap="#mapa1">
<map name ="mapa1">
<area shape="rect" coords="1, 1, 50, 50" href="1.html" alt="strona 1">
<area shape="rect" coords="51, 1, 100, 50" href="2.html" alt="strona 2">
<area shape="rect" coords="1, 51, 51, 100" href="3.html" alt="strona 3">
<area shape="rect" coords="51, 51, 100, 100" href="4.html" alt="strona
4">
</map>
•
•
•
•
Pierwszy wiersz polecenia przywołuje obrazek. USEMAP informuje
przeglądarkę, że obrazek "odsylacz.gif" jest mapowany, i że mapa nosi
nazwę "mapa1".
Drugi wiersz zapoczątkowuje definicję mapy.
Wiersze 3-6 wprowadzają cztery kolejne fragmenty mapy odsyłaczy,
odpowiadające prostokątom na rysunku. SHAPE=RECT mówi, że chodzi
tutaj o prostokąty (RECT=rectangle). COORDS informuje o współrzędnych,
przy czym pierwsze dwie liczby w wierszu podają lewy górny róg
prostokąta, a następne dwa - prawy dolny. Warto unikać nakładania na
siebie obszarów map, choć przeglądarka akceptuje nakładanie. HREF=
stanowi przywołanie jakiegoś dokumentu HTML.
Ostatni wiersz stanowi zakończenie definicji mapy.
Oprócz prostokątów (kwadratów) możemy tworzyć mapy z użyciem okręgów i
obszarów nieregularnych.
W przypadku okręgu stosujemy polecenie:
<area shape="circle" coords=" 25, 25, 19" href="dokument.html">
Proszę zwrócić uwagę na shape="circle" oraz przykładowe liczby 25,25,19.
Pierwsze dwie liczby informują o położeniu środka okręgu, ostatnia - o długości
promienia.
Gdybyśmy chcieli użyć obszaru nieregularnego, musielibyśmy podać
przykładowe polecenie, zawierające przynajmniej trzy pary współrzędnych,
definiujących "rogi" obszaru:
<area shape="polygon" coords=" 23, 33, 82, 16, 82, 80"
href="dokument.html">
Ręczne tworzenie map odsyłaczy jest dość uciążliwe i lepiej jest się posługiwać
programami, które oferują narzędzia graficzne - takie wbudowane narzędzia
posiada m.in. Pajączek.
Informacje o MAP
Informacje o AREA