Aplikacje internetowe

Łącza hipertekstowe

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.

• Jednakże, najpowszechniejszym zastosowaniem tego znacznika są hiperpołączenia

Znacznik <a>

• W przeciwieństwie do prostych znaczników, o których mówiliśmy w poprzednio, 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ą atrybutami znacznika (po raz pierwszy zetknęliśmy się z atrybutami przy omawianiu list).

• Rozszerzony znacznik połączenia <a> wygląda następująco:

<a name="up" href="menu.html" TITLE="Dwunastu">

Znacznik <a>• 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 atrybutem href.

Części typowego hiperłącza

a href a

Łączenie stron przy użyciu ścieżek względnych

• Jeżeli po href podamy w cudzysłowie tylko nazwę pliku, przeglądarka będzie szukała tego pliku w tym samym katalogu, w którym znajduje się aktualnie oglądana strona. Dzieje się tak zawsze, niezależnie od tego, czy przeglądane pliki umieszczone są na dyskach lokalnych, czy na serwerach w Internecie — obydwa pliki powinny znajdować się w tym samym katalogu. Jest to najprostsza forma określania ścieżki względnej.

• Ścieżki względne mogą również zawierać nazwy katalogów lub też wskazywać na pewną ścieżkę z punktu widzenia bieżącego katalogu. Ścieżka może określać miejsce w drzewie katalogów w stosunku do bieżącej pozycji, na przykład, żądany plik może znajdować się dwa poziomy katalogów w górę lub w dół.

Łączenie stron przy użyciu ścieżek względnych

• Ścieżka względna określa położenie pliku z punktu widzenia bieżącej pozycji w drzewie katalogów.

• Do określania ścieżek względnych w połączeniach można używać zapisu znanego z systemu Unix (Linux), bez względu na używany system operacyjny. I tak nazwy plików i katalogów oddzielone są od siebie ukośnikiem (slesh) (/), a dwie kropki (..) zawsze wskazują na katalog znajdujący się bezpośrednio powyżej bieżącego.

Łączenie stron przy użyciu ścieżek względnych

Ścieżka Znaczenie

href="file.html" Plik file.html znajduje się w bieżącym katalogu.

href="files/file.html" file.html znajduje się w katalogu który z kolei umieszczony jest w bieżącym katalogu.

href="files/morefiles/file.html"

file.html znajduje się w katalogu morefiles, który jest podkatalogiem files, a ten z kolei umieszczony jest w katalogu bieżącym.

href="../file.html" file.html znajduje się w katalogu mieszczącym się o poziom wyżej niż bieżący.

href="../../files/file.html" file.html znajduje się o dwa poziomy wyżej, w katalogu files.

Ścieżki bezwzględne

• Połączenie do strony, znajdującej się na lokalnym dysku, możemy również utworzyć w oparciu o ścieżkę bezwzględną. Ścieżka względna wskazuje na pozycję innego pliku z punktu widzenia bieżącej pozycji w drzewie katalogów, natomiast ścieżka bezwzględna to pełna ścieżka dostępu do pliku.

• Zawiera ona w sobie nazwy wszystkich katalogów, znajdujących się po drodze do żądanego pliku, począwszy od najwyższego punktu hierarchicznej struktury drzewa katalogów.

Ścieżki bezwzględne

Ścieżki bezwzględne zawsze rozpoczynają się od ukośnika — właśnie w ten sposób są one odróżniane od ścieżek względnych. Po ukośniku następują nazwy wszystkich katalogów, począwszy od najwyższego poziomu, a kończąc na nazwie pliku, do którego tworzymy połączenie.

href="/u1/lemay/file.html"Plik file.html znajduje się w katalogu /u1/lemay/

Z którego rodzaju ścieżek powiniśmy korzystać?

• Do tworzenia połączeń pomiędzy swoimi własnymi stronami, w większości przypadków, będziemy korzystać ze ścieżek względnych.

• Ścieżki bezwzględne mogą wydawać się bardziej przejrzyste, szczególnie w przypadku skomplikowanych połączeń pomiędzy wieloma stronami, ale są one bardzo mało elastyczne.

• Jeżeli będziemy wszędzie używać ścieżek bezwzględnych, a potem przeniesiemy pliki gdzieś indziej lub zmienimy nazwę katalogu, połączenia przestaną funkcjonować i będziesz zmuszony do żmudnej edycji wszystkich plików i poprawiania ścieżek. Wiąże się to z faktem, że ścieżki bezwzględne bardzo utrudniają proces przenoszenia plików z lokalnego systemu na serwer WWW.

Połączenia do dokumentów w sieci WWW

Do tworzenia połączeń ze zdalnymi stronami służy dokładnie taki sam kod, jakiego używaliśmy do łączenia ze sobą stron lokalnych. Będziemy używać tego samego znacznika <a> i atrybutu href wraz z tekstem, który będzie wskazywał stronę w sieci. Ale tym razem tekstem tym nie będzie ścieżka, ale URL danej strony WWW.

a href a

Połączenia do określonych miejsc w dokumencie

• Połączenia, które tworzyliśmy wspólnie do tej pory, prowadziły od pewnego miejsca w dokumencie wyjściowym do innej strony. Ale co zrobić, jeżeli chcemy utworzyć połączenie nie tylko ogólnie do strony, ale do konkretnego jej miejsca, przypuśćmy do czwartego akapitu?

• HTML daje taką możliwość, służą do tego odnośniki, które mogą być umieszczane w kodzie strony. Połączenie, które jest tworzone na stronie wyjściowej musi w takim wypadku zawierać nie tylko nazwę pliku, ale także nazwę odnośnika. Po wybraniu tego połączenia przeglądarka odczyta stronę, do której ono prowadzi, a następnie przesunie ją na ekranie, tak że będzie wyświetlana od miejsca oznaczonego za pomocą odnośnika.

Tworzenie połączeń i odnośników• Do tworzenia odnośników używany jest ten sam znacznik,

który poznaliśmy już przy okazji połączeń, czyli <a>.

• Odnośniki tworzy się prawie tak samo, z tym, że zamiast atrybutu href używany jest atrybut name. Atrybut ten zawiera słowa kluczowe, które będą stanowiły nazwę odnośnika.

a name a

• W przeciwieństwie do połączeń, odnośniki nie są w żaden sposób widoczne na normalnie wyświetlanej stronie. Dopóki więc nie przeskoczymy do danego odnośnika za pomocą jakiegoś połączenia, nie dowiemy się, że on tam jest.

• Żeby skierować połączenie na wybrany odnośnik, używamy takiej samej składni, z jakiej korzystaliśmy, tworząc „zwykłe” połączenia do stron, łącznie z atrybutem href, który określa nazwę pliku lub URL strony docelowej.

• Różnica polega na tym, że po nazwie pliku wstawiamy znak # (hash) i nazwę odnośnika, która musi być, dokładnie taka sama jak ta, która została wpisana po atrybucie name w kodzie odnośnika (z dokładnością do małych i wielkich liter):

<a href="mybigdoc.html#Part4">Idź do Części Czwartej</a>

Tworzenie połączeń i odnośników

Połączenia wewnątrz tej samej strony• A co zrobić, jeżeli prezentacja składa się tylko z jednej dużej strony i

chcielibyśmy utworzyć połączenia pomiędzy poszczególnymi jej częściami?

• Także w takim przypadku możemy skorzystać z odnośników. W wypadku naprawdę dużych stron tego typu połączenia mogą okazać się niezbędne, aby można było w sensowny sposób poruszać się po nich. Same odnośniki należy umieścić w początkowych punktach odpowiednich sekcji dokumentu w taki sam sposób, jak robiliśmy to do tej pory. Połączenie natomiast różni się tym, że pomijana jest część określająca ścieżkę dostępu i nazwę strony, zostaje tylko znak # i nazwa odnośnika.

• Jeżeli więc chcemy utworzyć połączenie wewnątrz tej samej strony do odnośnika o nazwie Section5, powinno ono wyglądać następująco:

Idź do <A HREF=#Section5>Sekcji Piątej</A>