Odsylacze (linki) mapy odsylaczy i zakotwiczenia\374

KURS HTML
11. ODSYŁACZE (LINKI), MAPY ODSYŁACZY I
ZAKOTWICZENIA
ŚcieŜki dostępu juŜ znamy. Co to za witryna, która nie ma Ŝadnych linków? To taka
witryna, której treść składa się z jednej strony (tzn. albo bardzo mało treści, albo godzina
wczytywania) i nie zna Ŝadnych stron internetowych, które warto uwzględnić. Oczywiście na
jednej witrynie (witryna to zbiór wszystkich stron danego serwisu) jest kilkaset, jak nie kilka
tysięcy linków (oczywiście licząc, Ŝe ten sam link jest liczony na kaŜdej stronie).
Podstawowe informacje dotyczące odsyłczy
Odsyłacz tworzy się uŜywając znacznika <A> obowiązkowo z atrybutem HREF, którego
wartość to ścieŜka do danego dokumentu. ŚcieŜka moŜe prowadzić do:
•
podstrony danego serwisu
•
pliku do ściągnięcia, lub pokazania
•
konta e-mail wraz z tematem wiadomości
•
strony/podstrony innego serewisu (z protokołem)
•
zakotwiczenia na danej stronie
•
zakotwiczenia na innej stronie
Link domyślnie są koloru niebieskiego, po wciśnięciu i najechaniu nie zmieniają koloru,
ale są ciemniejsze jeŜeli strona, do której prowadzi link została zapisana w historii naszej
przeglądarki. Znacznik <A> jest opcjonalny – pomiędzy nim umieszczamy to, na co klikamy
myszką, aby zobaczyć informację, do której prowadzi link. Przykładowym linkiem do
podstrony naszego serwisu moŜe być:
<A HREF="od_autora.htm">Od autora</A>
W celu otwarcia jakiegoś pliku (ewentualnie ściągnięcia) konstrukcja linku jest taka sama,
ale to przeglądarka mając pod uwagę rozszerzenie sama decyduje co zrobić z tym
dokumentem – moŜe go wyświetlić, odsłuchać, pokazać i ściągnąć. JeŜeli chcemy, aby
automatycznie została ściągnięta grafika po kliknięciu na link najlepiej umieścić plik w
archiwum programu kompresującego.
www.INFORMATYKA.cba.pl
KURS HTML
Mailto: - czyli list do autora
JeŜeli internauta korzysta z programu pocztowego wpisując atrybutowi HREF wartość
jaką jest e-mail autora strony poprzedzoną wyraŜeniem mail:, to po kliknięciu na taki link
otworzy się program pocztowy z juŜ wpisanym adresem np.:
<A HREF="mailto:login @witryna.pl"> login @witryna.pl </A>
Mało sam e-mail, moŜna tak zrobić link, aby temat był takŜe automatycznie wpisany
(przydatne, jeŜeli chcemy łatwo rozpoznać, jakie maile zostały wysłane przy pomocy witryny,
a jakie standardową metodą). Konstrukcja odsyłacza do poczty elektronicznej wraz z tematem
to:
<A HREF="mailto:login @witryna.pl?subject=Temat maila"> login @witryna.pl
</A>
Link do strony/podstrony innego serwisu jest chyba najprostszy. Kopiujemy po prostu
link z przeglądarki odwiedzając daną stronę, moŜe w niej być znak zapytania, znak &
(chociaŜ zaleca się zmienić go uprzednio na &), hashe, slashe i inne znaki np.:
<A HREF="http:/ /witryna.pl/dingo.php#koniec">prehistoria</A>
Zakotwiczenia czyli nawigacja po dokumencie
Bardzo waŜnym elementem na witrynie są zakotwiczenia. Są to specjalnie zrobione linki,
które po kliknięciu odwołują się do konkretnego miejsca na jakiejś stronie przewijając go.
Aby stworzyć zakotwiczenie musimy najpierw wymyślić dla niej jakąś nazwę i w miejscu
kotwicy (czyli w miejscu, które po kliknięciu na link odwołujący się do danej kotwicy pokaŜe
się w lewym górnym rogu), a następnie zapisać ją w atrybucie NAME znacznika <A>,
pomiędzy którym nic nie umieszczamy np.:
<A NAME="kotwica"></A>
Następnie tworzymy odsyłacz przypominający wszystkie inne jakie stworzyliśmy do tej
pory z tym, Ŝe, jeŜeli zakotwiczenie jest w tym samym dokumencie umieszczamy je po prostu
w atrybucie HREF poprzedzając hashem (tak jak w kolorach szesnastkowych – #) np.:
<A HREF="#kotwica">Zakotwiczanie statków</A>
JeŜeli odwołujemy się do kotwicy znajdującej się na innej stronie, znak hash i nazwę
kotwicy umieszczamy na końcu adresu. Zaprezentuję to na dwóch przykładach:
<A HREF="od_autora.htm#kotwica">Kotwica autora</A>
www.INFORMATYKA.cba.pl
KURS HTML
<A HREF="http:/ /witryna.pl/titanic.php#kotwica">Zakotwiczanie inaczej</A>
Gdzie otwieramy link, czyli parametr TARGET
Mam nadzieję, Ŝe jest to juŜ w jakimś stopniu opanowane. Teraz przyjrzyjmy się czemuś
łatwiejszemu – atrybutowi TARGET. Odpowiada on za miejsce otworzenia nowego
dokumentu. Wartości godne opisania to:
•
_blank – otwarcie nowego okienka przeglądarki
•
_top – całkowite zamienienie okna przeglądarki (ujrzymy zmianę w ramkach)
•
nazwa - otwarcie w ramce o danej nazwie
Proszę nie martwić się, Ŝe nic nie wiemy o ramkach, jakiekolwiek rozwiązania tej
dolegliwości poznamy w odpowiednim czasie. JeŜeli atrybut TARGET coś zawiera to
przewaŜnie jest to _blank. Najczęściej uŜywa się tego do otwarcia strony innego serwisu
internetowego. Przykładowa konstrukcja linku z tą wartością to:
<A HREF="http:/ /witryna.pl" TARGET="_blank">witryna.pl</A>
Informacje o linku - atrybut TITLE
Jeszcze jest jeden atrybut linków, który warto poruszyć. Mam na myśli tekstowa
informację, która działa na wielu innych znacznikach, ale dla linków jest ona
najpopularniejsza. Tekstowa informacja pojawi się po chwili, kiedy najedziemy i nie
będziemy poruszać kursorem myszy nad określonym elementem. Jest to atrybut TITLE,
którego wartość to dana informacja np.:
<A HREF="http:/ /witryna.pl" TITLE="Info o Tytanicu, prehistorii
itp.">witryna.pl</A>
Manipulowanie linkami za pomocą CSS
Linki tekstowe robić juŜ umiemy, ale na pewno nie podobają się nam. Ich kolor na
stronach o ciemnym tle popsuje całą nawigację więc trzeba coś z tym zrobić. Jak zwykle
posłuŜymy się językiem CSS. Czy pamiętacie jeszcze róŜnice pomiędzy selektorem akapitu, a
pierwszej litery akapitu? JeŜeli nie, to oby dwa zaczynają się tak samo, a bardziej
szczegółowe informacje są po dwukropku. Tak samo jest w linkach. Są cztery selektory
linków:
www.INFORMATYKA.cba.pl
KURS HTML
•
a:link - nie odwiedzony (nie zapisany w historii przeglądarki)
•
a:visited - odwiedzony (zapisany w historii przeglądarki)
•
a:hover - link najechany kursorem myszy
•
a:active - link kliknięty (efekt moŜna lepiej zobaczyć przytrzymując klawisz
myszy)
Aktywny link takŜe na niektórych przeglądarkach będzie widoczny, jeŜeli otworzył nam
stronę w nowym oknie, a do strony macierzystej wróciliśmy np. przez pasek zadań, nie
klikając uprzednio na samą zawartość strony. Dla potrzeb własnych zalecam uŜywanie tylko
pozostałych trzech.
Link moŜna dekorować prawie tak samo jak sam tekst. Według mnie najlepiej ustawić jest
czcionkę, kolor, krój i, czy ma być widoczne podświetlenie. Pamiętajmy, Ŝe aby przetestować
poprawnie link nie odwiedzony i odwiedzony musimy najpierw umieścić ścieŜkę do pliku,
którego nie odwiedziliśmy (wartość atrybutu HREF moŜe być np. http:/ /a_a_a_a_a_a.pl pomysłów jest nieskończoność), a następnie do pliku, którego odwiedziliśmy, czyli np.
ścieŜkę do pliku z danym linkiem.
Pamiętajmy, Ŝe hiperłącza powinny odróŜniać się od tekstu. Mogą być zupełnie innego
koloru, dodatkiem moŜe być np. podkreślenie. Nie ma nic bardziej Ŝenującego niŜ kliknięcie
na link, który tak naprawdę nim nie jest... PoniŜej bardzo porządny przykład linków, które nie
powinny zmylić internauty:
www.INFORMATYKA.cba.pl
KURS HTML
<STYLE TYPE="text/css">
a
{
font-size: 11px;
font-family: verdana, arial
}
a:link
{
color: #006699;
text-decoration: none
}
a:visited
{
color: #009699;
text-decoration: none
}
a:hover
{
color: #AA9699;
text-decoration: underline
}
</STYLE>
<A HREF="index.htm">link odwiedzony</A><BR>
<A HREF="http:/ /a_a_a.pl">link nieodwiedzony</A>
Grafika jako link
Link tekstowy to nie wszystko. Co powiecie na link reagujący na kliknięcie na grafikę?
To jest prostsze niŜ myślisz – kod grafiki, który poznałeś w poprzedniej lekcji umieszczasz
wewnątrz znaczników <A> z atrybutem (do <IMG>) BORDER o wartości 0, aby pozbyć się
zbędnego brzydkiego obramowania.
Pamiętajmy, Ŝe atrybuty ALT i TITLE to dwie odrębne rzeczy mylone przez
programistów przeglądarek. Dla przypomnienia ALT to wiadomość alternatywna
www.INFORMATYKA.cba.pl
KURS HTML
wyświetlająca się zamiast obrazka, a TITLE to wiadomość pojawiająca się po najechaniu,
którą moŜna przypisać większości znaczników – nawet akapitowi! Przykład graficznego
odsyłacza, z wykorzystaniem obu informacji:
<A HREF="http:/ /witryna.pl" TITLE="Serwis o adresie witryna.pl">
<IMG SRC="reklama/witryna.gif" ALT="obrazek byłby bardzo ładny"
WIDTH="100" HEIGHT="50">
</A>
Mapy odsyłaczy na obrazku
Często witryna składa się z jakiegoś duŜego obrazka, z pozoru będącego jednym plikiem
(naprawdę za pomocą tabelek jest połączonych z licznych prostokącików w całość), który w
róŜnych jego częściach prowadzi do róŜnych podstron. Rozwiązanie to ma jedną zaletę i dwie
wady.
Zaletą jest to, iŜ pojedyncze prostokąty, ewentualnie kwadraty mogą być róŜnych
formatów, tak więc na niektórych prostokątach moŜna oszczędzić miejsca i szybkości
wczytywania strony.
Wadą jest to, Ŝe link nie moŜe być innego kształtu niŜ prostokąt, tak więc pole, na które
musimy kliknąć, aby zostać przeniesieni głębiej jest w kątach prostych. Wadą jest to... Ŝe
obraz złoŜony jest z wielu prostokątów. Często dwa razy większy rysunek jest mniejszy
objętością niŜ taki sam obrazek podzielony na dwie części. Dlaczego tak jest? Bo programy
często do zapisanych projektów dodają ukryte informacje o nich samych, ale to są naprawdę
malutkie informacje... ale są... Najlepszym rozwiązaniem jest stworzyć mapę odsyłaczy, czyli
tzw. zespół aktywnych fragmentów na jednym pliku graficznym.
Co prawda rozwiązanie to jest czasochłonne, ale późniejszy efekt jest doskonały. Na
początku musimy przygotować jakiś obrazek, na którym będziemy testować to, co uda nam
się sklecić.
Uwaga: to co zaraz się dowiemy nie umieszczamy wcale pomiędzy znacznikami <A>! Na
początku musimy uŜyć atrybutu USEMAP do znacznika <IMG>, co oznacza, Ŝe dokument
uŜywa mapy o takiej nazwie, jaka jest umieszczona w wartości tego atrybutu i tak samo jak w
przypadku zakotwiczeń jest ona poprzedzona hashem. Pamiętajmy, aby w kodzie obrazka
były informacje o wymiarach i, Ŝe jest to własne mapa np.:
<IMG SRC="atlas.gif" WIDTH="120" HEIGHT="85" ALT="mapa odsyłaczy"
USEMAP="#mapa">
www.INFORMATYKA.cba.pl
KURS HTML
Następnie pod znacznikiem <IMG> umieszczamy opcjonalny znacznik <MAP> wraz z
atrybutem (tak samo jak w zakotwiczeniach) NAME o wartości nazwy mapy, oczywiście bez
znaku hash - #. Wewnątrz znacznika <MAP> umieszcza się znaczniki <AREA> (ang. strefa),
które to określają połoŜenie odsyłaczy na obrazku. KaŜdy inny aktywny obszar na obrazku to
nowy znacznik <AREA>. Znacznik ten składa się z kilku atrybutów. Pierwszym jakim
poznamy jest SHAPE (ang. kształt) i określa kształt danej mapy. Jego wartości to:
•
rect - (ang. rectengular – prostokąt) prostokątny obszar aktywny
•
circle - (ang. okrąg) okrągły obszar aktywny
•
polygon - (ang. wielokąt) obszar aktywny o nieregularnym kształcie.
Kolejnym waŜnym elementem jest COORDS, który przechowuje wszystkie punkty. Jego
wartości to liczby oddzielane od siebie przecinkami zawierające informacje o miejscach
mapy. Oto schemat, jak powinno wypełniać się ten atrybut [X (X1, X2, X3) - poziome
połoŜenie piksela, Y (Y1, Y2, Y3) - pionowe połoŜenie piksela, R - długość promienia w
pikselach]:
Dla SHAPE="rect" - X1,Y1,X2,Y2 – X1 - lewy górny wierzchołek licząc od lewej
krawędzi, Y1 - lewy górny wierzchołek licząc od górnej krawędzi, X2 - prawy dol ny
wierzchołek licząc od lewej krawędzi, Y2 - prawy dolny wierzchołek licząc od lewej
krawędzi. Dla SHAPE="circle" - X,Y,R - X - środek okręgu licząc od lewej krawędzi, Y środek okręgu licząc od górnej krawędzi, R - długość promienia Dla SHAPE="circle" X1,Y1,X2,Y2,X3,Y3... - kaŜde dwie liczby prezentują połoŜenie kolejnych pikseli, które są z
sobą łączone i tak powstaje kształt mapy (pierwszy piksel z ostatnim jest automatycznie
łączony).
Inne waŜne atrybuty znacznika <AREA> to:
•
HREF - adres odsyłacza
•
TITLE - tekst, który pojawi się po najechaniu kursorem myszy nad daną danym
obszarem
JeŜeli jeszcze dokładnie nie wiemy jakie wartości wstawiać w atrybut COORDS to
powiem, Ŝe bardzo wiele programów graficznych, po najechaniu pędzelkiem, czy innym
wskaźnikiem na dany punkt podają jego współrzędne (choćby MS Paint). Oto przykład mapy
odsyłaczy + jej kod, z wykorzystaniem trzech pól, które prezentowane są na rysunku (punkty
www.INFORMATYKA.cba.pl
KURS HTML
2 i 3 nie są potrzebne, ale zostały stworzone do upewnienia się, czy pozostałe dwa boki
prostokąta mają odpowiednie wartości):
<IMG WIDTH="310" HEIGHT="160" SRC="mapa.gif" USEMAP="#mapa"
BORDER="0" TITLE="pole nieaktywne" ALT="mapa odsyłaczy">
<MAP NAME="mapa">
<AREA SHAPE="rect" BORDER COORDS="7,7,42,40" HREF="http://
prostokat.pl" TITLE="prostokąt">
<AREA SHAPE="circle" COORDS="31,73,25" HREF="http:/ /okrag.pl"
TITLE="okrąg">
<AREA SHAPE="polygon" COORDS="49,7,49,42,66,59,66,82,50,98,193,99,193,7"
HREF="http:/ /wielokat.pl" TITLE="wielokąt">
</MAP>
www.INFORMATYKA.cba.pl