Możliwość stworzenia łącza w dokumencie, który przenosi cię do innego dokumentu, być może w sieci na całym świecie, jest prawdopodobnie najważniejszym powodem, dla którego wynaleziono Internet. Te linki, zwane hiperlinkami, to "H" w HTML (HyperText Markup Language). Bez hiperłączy internet nie byłby zbyt użyteczny. Nie byłoby wyszukiwarek, mediów społecznościowych ani reklam banerowych (ok, większość z nas mogłaby się z nimi zapoznać).
Kiedy tworzysz własne strony internetowe, będziesz chciał tworzyć hiperlinki, a KompoZer ma narzędzia, które ułatwiają dodawanie linków dowolnego typu. Przykładowa strona przedstawiona w tym samouczku będzie zawierać łącza do innych witryn w czterech kategoriach, do innych części tej samej strony internetowej i do rozpoczęcia wiadomości e-mail. Zacznę od nagłówka i czterech
H3 nagłówki dla każdej kategorii. Na następnej stronie dodamy kilka linków. 01 z 05
Tworzenie hiperłącza za pomocą KompoZer
Dostęp do narzędzi hiperłączy KompoZer można uzyskać, klikając przycisk Link na pasku narzędzi. Aby utworzyć hiperlink:
- Umieść kursor na stronie, na której ma się pojawić hiperłącze.
- Kliknij przycisk Link na pasku narzędzi. Wyświetlone zostanie okno dialogowe Właściwości łącza.
- Pierwsze pole, które należy wypełnić, to pole Link Text. Wpisz tekst, który ma się pojawić na stronie hiperłącza.
- Drugie pole, które należy wypełnić, to pole Link Location. Wpisz adres URL strony, którą kliknie hiperlink po kliknięciu. Dobrym pomysłem jest skopiowanie i wklejenie adresu URL z paska adresu przeglądarki. O wiele mniej prawdopodobne jest, że popełnisz błąd w ten sposób i wiesz, przynajmniej w momencie tworzenia linku, że strona jest żywa, a link nie jest zepsuty.
- Kliknij przycisk OK, a okno dialogowe Właściwości łącza zostanie zamknięte. Twój link pojawi się teraz na Twojej stronie.
W większości przeglądarek hiperłącze będzie domyślnie wyświetlane w niebieskim, podkreślonym tekście. Możesz zastosować własne style do hiperłączy z KompoZerem, ale na razie pozostaniemy przy podstawowym hiperłączu. Warto wyświetlić podgląd strony w przeglądarce i kliknąć linki, aby upewnić się, że działają.
02 z 05Tworzenie połączenia kotwicy z KompoZerem
Istnieje inny rodzaj hiperłącza, który po kliknięciu przenosi użytkownika do innej części tej samej strony internetowej. Ten rodzaj hiperłącza nazywa się łączem zakotwiczenia, a obszar strony, do której zostaniesz przeniesiony po kliknięciu tego łącza, nazywany jest kotwicą. Jeśli kiedykolwiek korzystałeś z linku "z powrotem na górę" u dołu strony, klikniesz link do kotwicy.
KompoZer umożliwia tworzenie kotwic, do których można się łączyć za pomocą narzędzia Zakotwiczenie na pasku narzędzi.
- Kliknij obszar strony, na której chcesz zakotwiczyć. To znaczy, gdy chcesz, aby przeglądarka stron była przekierowywana po kliknięciu linku kotwicy. W tym przykładzie kliknąłem tuż przed "F" w nagłówku Ulubiona muzyka.
- Kliknij przycisk Zakotwiczenie na pasku narzędzi. Wyświetlone zostanie okno dialogowe nazwanych właściwości kotwicy.
- Każda kotwica na stronie wymaga unikalnej nazwy. Dla tej kotwicy użyłem nazwy "muzyka".
- Kliknij OK, a powinieneś zobaczyć, a symbol zakotwiczenia pojawi się w miejscu, które chciałeś zakotwiczyć. Ten symbol nie pojawi się na twojej stronie, tak właśnie KompoZer pokazuje, gdzie są twoje kotwice.
- Powtórz procedurę dla innych obszarów strony, na których użytkownicy mogą się przeskakiwać. Jeśli masz dużo tekstu na stronie oddzielonej nagłówkami lub inną logiczną sekcją, kotwice to łatwy sposób na poruszanie się po stronie.
Następnie utworzymy linki, które poprowadzą czytelnika do zakotwiczonych przez ciebie kotwic.
03 z 05Tworzenie nawigacji po stronie za pomocą KompoZer
Teraz, gdy masz już zakotwiczenia na swojej stronie, stwórzmy linki, które będą używane jako skróty do tych zakotwiczeń. W tym samouczku utworzyłem 1 wiersz, 4 kolumny tabeli poniżej górnego nagłówka strony. Każda komórka tabeli zawiera ten sam tekst, co nagłówki kategorii używane do oddzielenia linków na stronie. Uczynimy tekst w każdej z tych komórek tabeli linkiem do odpowiedniej kotwicy.
04 z 05Tworzenie hiperłączy do kotwic z KompoZer
Teraz, gdy mamy już gotowe kotwice i tekst, który wykorzystamy do nawigacji po stronach, możemy zamienić te fragmenty zwykłego tekstu w linki. Ponownie użyjemy przycisku Link, ale tym razem będzie działać nieco inaczej.
- Wybierz tekst, który chcesz przekształcić w link. W tym przykładzie wybrałem tekst "Ulubiona muzyka", który znajduje się w pierwszej komórce tabeli u góry strony.
- Kliknij przycisk Link na pasku narzędzi. Otworzy się okno dialogowe Właściwości łącza.
- W tym przypadku wybraliśmy tekst przed kliknięciem przycisku Link, więc sekcja Tekst linku w oknie jest już wypełniona i nie można jej edytować. Kliknij strzałkę w dół w sekcji Lokalizacja łącza. Zostanie wyświetlona lista zakotwiczeń utworzonych w poprzednich krokach. W tym przykładzie wybieram kotwicę #music.
- Kliknij OK. Tekst "Ulubiona muzyka" na pasku nawigacyjnym zamienia się w link, który po kliknięciu powoduje przejście przeglądarki do tej sekcji na stronie.
Zauważysz, że każda nazwana kotwica w rozwijanym menu ma przed sobą znak "#". W ten sposób utworzysz link do kotwicy w HTML. "#" Przed nazwą zakotwiczenia informuje przeglądarkę, że ten link prowadzi do innego miejsca na tej samej stronie.
05 z 05Tworzenie hiperłącza z obrazu za pomocą KompoZer
Czy wiesz, że możesz utworzyć łącze z obrazów, a także z tekstu? KompoZer pozwala to zrobić za pomocą zaledwie kilku kliknięć. Tutaj wstawiłem mały obrazek przedstawiający strzałkę skierowaną ku górze i tekst "TOP" na dole strony. Zamierzam użyć tego obrazu jako linku, aby przeskoczyć z powrotem na górę strony.
- Kliknij obraz prawym przyciskiem myszy i wybierz Obraz i Właściwości łącza z etykiety kontekstowej. Otworzy się okno dialogowe Właściwości obrazu.
- Na karcie Lokalizacja zostanie wyświetlona nazwa pliku obrazu i widok miniatury już wpisany. Powinieneś wpisać tekst w polu tekstowym Alternate. Pojawia się on po przesunięciu kursora myszy nad obrazem, a także odczytywaniu go przez czytnik ekranu, gdy osoba niedowidząca odczytuje stronę internetową.
- Kliknij zakładkę Link. Tutaj możesz wybrać kotwicę z menu, tak jak zrobiliśmy to z linkami zakotwiczonymi. W rzeczywistości ten obraz jest używany jako link do kotwicy. Wybrałem zakotwiczenie #Links_Of_Interest, które przeniesie nas z powrotem na szczyt.
- Kliknij OK. Po kliknięciu obraz jest teraz przekierowywany z powrotem na górę strony.
