Aplikacje internetowe Łącza hipertekstowe. Tworzenie hiperpołączeń Do utworzenia połączenia w języku HTML potrzebne są następujące informacje: nazwa pliku.

Prezentacja na temat: "Aplikacje internetowe Łącza hipertekstowe. Tworzenie hiperpołączeń Do utworzenia połączenia w języku HTML potrzebne są następujące informacje: nazwa pliku."— Zapis prezentacji:

1 Aplikacje internetowe Łącza hipertekstowe

2 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ć”.

3 Znacznik Do kreowania hiperpołączeń na stronach HTML służy znacznik …. 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

4 Znacznik W przeciwieństwie do prostych znaczników, o których mówiliśmy w poprzednio, możliwości są nieco szersze. Znacznik otwierający 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 wygląda następująco:

5 Znacznik 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 posiada swój znacznik zamykający. 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.

6 Części typowego hiperłącza a hrefa

7 Łą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ół.

8 Łą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.

9 Łączenie stron przy użyciu ścieżek względnych ŚcieżkaZnaczenie 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.ht ml" 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.

10 Ś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.

11 Ś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/

12 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.

13 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 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 hrefa

14 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.

15 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. 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

16 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): Idź do Części Czwartej Tworzenie połączeń i odnośników

17 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 Sekcji Piątej