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 Bug w IE

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 HTTP Content-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

Odnośniki do e-mail

Istnieje specjalny protokół mailto pozwalający tworzyć odnośniki do wysyłania e-maili. Kliknięcie na taki odnośnik spowoduje otworzenie nowego okna kompozycji listu w domyślnym kliencie poczty. 

 <a href="mailto:przyklad@example.com'">Wyślij mi e-mail na adres przyklad@example.com</a>

Spamboty (tzw. harvestery) zbierają wszystkie adresy e-mail znalezione na stronach WWW i wysyłają na nie spam. Project Honeypot zajmuje się łapaniem spambotów i radzi jak ukryć adres przed nimi.

W query string odnośnika mailto można używać parametrów odpowiadających niektórym nagłówkom MIME:

Pamiętaj, że tekst w parametrach zawsze musi być zakodowany przez urlencode. Polskie znaki, spacje i przejścia do nowej linii muszą wystąpić w postaci %XX.

Subject
Sugerowany temat wiadomości.
Body
Sugerowana treść wiadomości.
CC
Dodatkowy adres, na który ma być wysłana kopia wiadomości.

Do specjalnych zastosowań mogą być przydatne inne nagłówki z RFC 2822, np. Message-ID i In-Reply-To, jednak należy pamiętać, że przeglądarki mają prawo zignorować podane nagłówki. 

 <a href="mailto:przyklad@example.com?Subject=List%20ze%20strony%20WWW">Wyślij mi e-mail</a>

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.

Elementy liniowe | Grafika
Zmodyfikowano: 03.11.2007, 01:29
submit