Hipertekst (hypertext)
Esencją HTML jest Hipertekst, czyli łączenie dokumentów ze sobą poprzez odnośniki (linki, hiperłącza, ang. anchor — kotwice).
Wygląd odnośników ustala się za pomocą CSS. Można z nich zrobić „przyciski” do menu. Ich wygląd (np. tło, podkreślenie) po najechaniu myszą zmienia się dzięki selektorowi
:hover
.
Odnośniki: <a>
Wstawia odnośnik do innego dokumentu lub innego miejsca w tym samym dokumencie. Atrybut href
zawiera adres dokumentu. Wnętrze elementu jest widocznym tekstem odnośnika i warto dla niego
dobrać odpowiednią treść.
<a href="http://browsehappy.pl">
Surfuj bez obaw!</a>
Odnośnik do strony browsehappy.pl<a href="#fragment">
Zobacz sekcję o fragmentach</a>
Odnośnik do elementu mającego ID „fragment”, który jest w tym samym dokumencie<a href="http://browsehappy.pl/slownik#java">
Co to jest Java?</a>
Odnośnik do elementu mającego ID „java” na stronie browsehappy.pl/slownik
Nie można umieszczać <a>
w <a>
, ani otaczać nim elementów blokowych, można jedynie elementy liniowe. Z tego powodu nie można zrobić odnośnikiem np. całego wiersza tabeli bez powtarzania <a>
w każdej
komórce.
Samo otworzenie strony wskazanej przez <a>
nie powinno mieć efektów ubocznych. Jeśli używasz skryptów, które wykonują jakieś
akcje (np. dodawanie/usuwanie wpisów), to użyj metody POST i przycisków
formularzy zamiast odnośników.
Adresy internetowe: URI
Różnica między URL, URI i URN jest subtelna. Najpopularniejsza jest nazwa URL, choć ściśle rzecz biorąc w dokumentach HTML używa się URI.
Wszystkie dokumenty w Sieci wskazuje się za pomocą URI (Universal Resource Identifier — Uniwersalny Identyfikator Zasobu). Najprościej mówiąc jest to adres strony, który widzisz w przeglądarce.
Składnia URI
W Internecie nigdy nie używa się ścieżek MS Windows/DOS. Adresy typu C:\plik
są błędne. W adresach w żadnym wypadku nie powinno się używać znaku backslash
(\
). Do oddzielania katalogów służy slash (/
) (pochylony do przodu).
Typowy adres w Internecie:
http://www.example.com/moje/pliki/dokument.html?foo=bar#rozdzial2
składa się z następujących części:
- http://www.example.com/moje/pliki/dokument.html?foo=bar#rozdzial2
- Protokół. W tym przypadku HTTP. Poza jego bezpieczną wersją (HTTPS = SSL/TLS) jest jedynym powszechnie używanym do stron WWW.
- http://www.example.com/moje/pliki/dokument.html?foo=bar#rozdzial2
- Poddomena, część domeny. Z technicznego punktu widzenia przedrostek www nie ma specjalnego znaczenia. Działanie domeny z/bez www zależy od konfiguracji serwera DNS.
- http://www.example.com/moje/pliki/dokument.html?foo=bar#rozdzial2
-
Domena. Ostatni człon (tu:
.com
) jest domeną najwyższego rzędu (TLD — Top Level Domain). Wielkość liter w domenie nie ma znaczenia. Domeny używające znaków narodowych nazywają się IDN. - http://www.example.com/moje/pliki/dokument.html?foo=bar#rozdzial2
-
Ścieżka na serwerze. Często ścieżki URI odzwierciedlają rzeczywiste ścieżki do plików na serwerze, ale wcale to nie jest konieczne (np. serwer może czytać strony z bazy danych).
Rozszerzenie nazwy pliku (tu: .html) nie ma żadnego znaczenia z punktu widzenia URI — o typie pliku decyduje wysyłany przez serwer nagłówek HTTPContent-Type
.
Zazwyczaj wielkość liter w ścieżce ma znaczenie (choć istnieją serwery ignorujące wielkość liter). - http://www.example.com/moje/pliki/dokument.html?foo=bar#rozdzial2
- Query String. Jeśli ten sam dokument jest dostępny w kilku wersjach (np. zawierający dane posortowane rosnąco lub malejąco), jego wersja powinna być wybrana w Query String. W praktyce służy do przekazywania parametrów do skryptów.
- http://www.example.com/moje/pliki/dokument.html?foo=bar#rozdzial2
- Fragment (hash). Wskazuje miejsce wewnątrz dokumentu. W przypadku dokumentów HTML wskazuje element o takim ID. Fragment działa tylko po stronie klienta i nie jest przesyłany do serwera.
Dodatkowo może być jeszcze nazwa użytkownika i hasło umieszczone przed domeną:
ftp://użytkownik:hasło@example.com
Adresy relatywne
W HTML i CSS nie trzeba podawać pełnych URI — można używać ścieżek relatywnych do danego dokumentu/arkusza.
Każdy adres, który nie zaczyna się od protokołu (np. http://
) traktowany jest jako relatywny, dlatego <a href="www.example.com">
zostanie zinterpretowane jako
nazwa pliku, a nie adres cudzej strony. Nie zapominaj o dodawaniu http://
, gdzie trzeba.
Przykładowe ścieżki i ich rozwinięcie, gdyby były w dokumencie http://www.example.com/moje/pliki/dokument.html?foo=bar:
Ścieżka | Cel i przykładowe zastosowanie | Rozwinięcie |
---|---|---|
tutaj |
Plik w tym samym katalogu Ilustracje do dokumentu, inne dokumenty |
http://www.example.com/moje/pliki/tutaj |
../tam |
Plik w nadrzędnym katalogu Pliki (obrazki, arkusze) wspólne dla zbioru dokumentów |
http://www.example.com/moje/tam |
../../cudzy/plik | Plik w podkatalogu katalogu będącego dwa poziomy wyżej | http://www.example.com/cudzy/plik |
/główny |
Plik w głównym katalogu (tzw. ścieżka absolutna) Arkusze stylów i grafiki dla całej witryny |
http://www.example.com/główny |
/ |
Strona główna domeny Link do strony głównej |
http://www.example.com/ |
(pusta) |
Ten sam plik Formularze wysyłające dane z powrotem do tej samej strony |
http://www.example.com/moje/pliki/dokument.html?foo=bar |
Znaki specjalne w URI
Tylko nieliczne znaki są dopuszczalne bezpośrednio w adresach. Wszystkie pozostałe muszą być zakodowane w postaci
%XX
gdzie XX to kod szesnastkowy kodowanego bajtu. Bajty mają reprezentować znaki w kodowaniu UTF-8. np. spacja to %20.
Zazwyczaj wystarczy otworzyć w przeglądarce dany adres, aby uzyskać jego odpowiednio zakodowaną formę. Jeśli potrzebujesz generować adresy ze znakami specjalnymi, zobacz funkcje PHP urlencode, iconv i dodatkowo do umieszczenia odnośnika w HTML: htmlspecialchars
Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.
Zmodyfikowano: 07.02.2007, 00:56