Hiperłącza spotykane we współczesnym wydaniu Internetu są podstawowym narzędziem do nawigacji na stronach internetowych. Ciężko sobie wyobrazić portal internetowy, który na stronie głównej składa się z ciągu niekończącego się tekstu.Hiperłącza są jednym z niezbędnych konstrukcji językowych w htmlu.
Oczywiście można zbudować stronę, która nie posiada hiperłącz do zasobów witryny. Wyobraź sobie stronę główną jakiegoś dużego serwisu informacyjnego gdzie wszystkie informacje znajdują się w jednym ciągu. Prawda, że wygląda to nieciekawie?
Z pomocą przychodzą hiperłącza, które można podzielić na trzy główne grupy:
- Hiperłącza tekstowe
- Hiperłącza graficzne
- Mapy odsyłaczy
Hiperłącza tekstowe
Zacznę opis od hiperłącz tekstowych gdyż są one używane w przeważającej części na każdej stronie internetowej. Hiperłącza tekstowe nazywane popularnie przez użytkowników linkiem tworzy się w bardzo prosty sposób. Spotkałeś się zapewne z tym nie raz:
Jak widać konstrukcja linku tekstowego jest bardzo łatwa, ale należy pamiętać o jednym ważnym elemencie. Pierwszym ważnym elementem konstrukcji tego znacznika jest pamięć o jego zamknięciu. Mianowicie jak już otworzymy <a> to należy też zamknąć </a>. W przypadku kiedy tego nie zrobisz rezultatem okaże się, że odnośnikiem na stronie jest cały tekst, który znajduje się za otwartym znacznikiem.
Za pomocą hiperłączy tekstowych możesz nie tylko przenieść użytkownika do innej podstrony, ale również możesz wskazać na lokalizację pliku tekstowego, graficznego lub adresu serwera ftp.
Spotyka się również zastosowanie linków tekstowych do wysyłania poczty e-mail. Polega to na tym, że w miejscu umieszczania adresu, umieszcza się następujący fragment:
mailto:
Umieszczając powyższy fragment w miejscu adresu użytkowniku, który kliknie w odnośnik na stronie pojawi się okno umożliwiające wysłanie wiadomości elektronicznej. W wymienionej formie kontaktu użytkownika z osobą tworzącą stronę jest jedno ograniczenie. Osoba, która chce wysłać wiadomość z tak skonstruowanego odnośnika musi mieć w swoim systemie operacyjnym skonfigurowanego klienta poczty e-mail, np. Thunderbird, Windows Mail.
Lepszym rozwiązaniem jest umieszczenie adresu e-mail na stronie w postaci zwykłego tekstu. Umożliwi to wysłanie wiadomości przez użytkownika za pomocą narzędzia, którego używa w swoim systemie operacyjnym.
Hiperłącza graficzne
Czym by były strony internetowe bez nie znikającej i wszechogarniającej grafiki w każdej postaci. Także w hiperłączach można umieszczać grafikę zamiast zwykłego opisu tekstowego linka. Umieszczenie linka graficznego na stronie jest możliwe dzięki już poznanemu w poprzednich częściach kursu znacznika <img>. W całości wygląda to tak:
Tak jak w przypadku linków tekstowych tutaj także należy pamiętać o zamknięciu znaczników, ale nie tylko. Ważnym elementem jest znacznik alt, który służy do opisu pliku graficznego. Brak umieszczenia tego znacznika w konstrukcji hiperłącza graficznego nie spowoduje generalnie żadnej poważnej szkody w wyświetlaniu. Użycie znacznika znajduje swoje zastosowanie w przypadku kiedy z jakiegoś bliżej nieokreślonego powodu plik graficzny nie wyświetli się podczas ładowania strony. Wtedy zamiast pliku pojawi się opis, który został umieszczony w znaczniku alt.
W tak dużym medium jakim jest Internet znajdą się także osoby, które wyłączają obsługę plików graficznych w swoich przeglądarkach internetowych lub używają przeglądarek tekstowych. W takim przypadku jeśli zapomniałeś umieścić opis w znaczniku alt użytkownik nie skorzysta z materiałów znajdujących się na stronie.
Jak widzisz konstrukcja jest bardzo prosta więc nie powinna stanowić dla Ciebie problemu.
Mapy odsyłaczy
Konstrukcja mapy odsyłaczy jest nieco bardziej skomplikowana od zwyczajnych hiperłączy tekstowych i graficznych. Mapa odsyłaczy stosowana jest w przypadkach kiedy na stronie w np. jednym miejscu znajdują się loga różnych producentów. Oczywiście można rozwiązać to korzystając z hiperłącz graficznych, a wszystkie loga producentów zapisać w osobnym pliku graficznym. Takie rozwiązanie może przysporzyć problemów z idealnym połączeniem wcześniej pociętej grafiki.
W celu uniknięcia dodatkowego problemu stosuje się mapę odsyłaczy. Poniżej przedstawiam opis konstrukcji. Znacznikiem, który służy do utworzenia mapy jest <map></map>. Obowiązkowym znacznikiem do umieszczenia w znaczniku <map> jest name. Znacznik ten pozwala na utworzenie więcej niż jednej mapy odsyłaczy w jednym dokumencie html.
Wewnątrz znacznika <map></map> znajduje się znacznik <area></area>, który zawiera następujące artrybut:
- Href
- Coords – służy do określenia współrzędnych początku i końca aktywności na wybranym pliku graficznym
- Shape – określa czy wybrany obraz jest kołem, prostokątem czy też dowolną figurą geometryczną. W tym miejscu możemy jako właściwości tego atrybutu użyć:
- Circle – koło
- Rect – kwadrat
- Poligon
- Title – odpowiednik alt z hiperłączy tekstowych i graficznych
W rzeczywistości aby określić współrzędne aktywności obrazka należy otworzyć program graficzny, który umożliwia określenie współrzędnych po najechaniu myszy w dowolnym miejscu pliku graficznego. Poniżej przykład mapy odsyłaczy:
<map name="mapa">
<area shape="rect" coords="14,16,116,114" href="/1.html"/>
<area shape="circle" coords="194,221,47" href="/3.html"/>
<area shape="poly" oords="249,271, 386,299, 393,366, 349,391, 315,370, 223,375"
href="3.html"/>
</map>
<img src="/mapa.gif" usemap="#mapa"/>
Wybierając jako obszar aktywny figurę koła musisz zdefiniować środek oraz jego promień w celu poprawnego funkcjonowania. Natomiast definiując obszar aktywny w postaci kwadratu lub innej figury prostokątnej musisz zdefiniować lewy górny róg oraz prawy dolny róg. Tak jak wcześniej już wspomniałem do tego celu najlepiej użyć programu graficznego.