Lekcja 8: Odnośniki
W tej lekcji nauczysz się jak tworzyć odnośniki do innych stron.
Co potrzebuję do zrobienia odnośnika?
Do zrobienia odnośnika będziemy używać tego samego co zawsze używamy w kodzie HTML: elementu. Prosty element z jednym atrybutem i już możesz umieścić odnośnik na swojej stronie. Tutaj przedstawie przykład jak może wyglądać odnośnik do strony HTML.net:
Przykład 1:
<a href="http://www.html.net/">Oto odnośnik do HTML.net</a>
Będzie wyglądał następująco w przeglądarce:
Element a oznacza "anchor" czyli kotwica. Natomiast atrybut href
jest skrótem od "hypertext reference" czli odnośnik hyper tekstowy, określający do kąd prowadzi odnośnik - najczęściej adres pliku w internecie.
W powyższym przykładzie atrybut href posiada wartość "http://www.html.net", która jest pełnym adresem prowadzącym do HTML.net i nazywa się URL (Uniform Resource Locator). Zapamiętaj że "http://" musi zawsze zawierać się w URLu. Zdanie "Oto odnośnik do HTML.net"jest tekstem ukazującym się jako odnośnik. Pamiętaj aby zamknąć element kotwicy znacznikiem </a>.
Co z odnośnikami pomiędzy moimi stronami?
Jeżeli chcesz umieścić odnośnik do swoich własnych stron Internetowych, nie musisz picać pełnego adresu (URL) dokumentu. Na przykład, jeżeli zrobiłeś dwie strony (nazwijmy je strona1.htm i strona2.htm) i zapisałeś je w tym samym katalogu możesz utworzyć odnośnik na jednej stronie do drugiej poprzez wpisanie tylko nazwy pliku jako adres strony. W takich okolicznościach odnośnik ze strony strona1.htm do strona2.htm może wyglądać następująco:
Przykład 2:
<a href="strona2.htm">Kliknij tutaj aby przejść do strony 2</a>
Jeżeli strona 2 została umieszczona w podfolderze (nazwanym "podfolder"), odnośnik może wyglądać tak:
Przykład 3:
<a href="podfolder/strona2.htm">Kliknij tutaj aby przejść do strony 2</a>
Natomiast gdy strona 2 (umieszczona w podfolderze) ma posiadać odnośnik do strony 1, odnośnik będzie wyglądał tak:
Przykład 4:
<a href="../strona1.htm">Odnośnik do strony 1</a>
"../" wskazuje na folder o jeden poziom wyższy od folderu, w którym znajduje się dokument z odnośnikiem. Tym samym sposobem, możesz wskazać plik dwa lub trzy poziomy wyżej poprzez wielokrotne powtarzanie sekwencji "../" (np. dla odnośnika w folderze dwa poziomy wyżej należy napisać "../../").
Czy już jest wszystko jasne? Alternatywnie, możesz umieścic kompletny adres strony (URL) jeżeli masz problem z krótkimi odnośnikami.
Co z wewnętrznymi odnośnikami na stronie?
Możesz także utworzyć wewnętrzny odnośnik we wnętrzu strony - na przykład tabelę ze spisem odnośników do nagłówków na stronie. Wszystko co musisz użyć to atrybut id (identyfikator) i symbol "#".
Używaj atrybutu id aby oznaczyć element do którego chcesz zrobić odnośnik:
<h1 id="heading1">nagłówek 1</h1>
Możesz teraz utworzyć odnośnik do elementu przy wykorzystaniu "#" w atrybucie odnośnika. Za symbolem "#" musi być umieszczona wartość atrybutu id elementu dla którego zrobiłeś odnośnik. Na przykład:
<a href="#heading1">Odnośnik do nagłówka 1</a>
Wszystko się wyjaśni w tym przykładzie:
Przykład 5:
<html>
<head>
</head>
<body>
<p><a href="#naglowek1">Odnośnik do nagłówka 1</a></p>
<p><a href="#naglowek2">Odnośnik do nagłówka 2</a></p>
<h1 id="naglowek1">Nagłówek 1</h1>
<p>Tekst tekst tekst tekst</p>
<h1 id="naglowek2">Nagłówek 2</h1>
<p>Tekst tekst tekst tekst</p>
</body>
</html>
będzie wyglądał tak w przeglądarce (kliknij na oba odnośniki):
Nagłówek 1
Tekst tekst tekst tekst
Nagłówek 2
Tekst tekst tekst tekst
(Pamiętaj: Atrybut id musi zaczynać się tylko literą)
Do czego jeszcze mogę zrobić odnośnik?
Możesz także zrobić odnośnik do adresu e-mail. Robisz to prawie tak samo jak dla dokumentu HTML:
Przykład 6:
<a href="mailto:nobody@html.net">Wyślij e-mail do nikogo w HTML.net</a>
Będzie tak wyglądał w przeglądarce:
Jedyną różnicą pomiędzy odnośnikiem do adresu e-mail a do pliku, jest umieszczenie mailto:
przed adresem e-mail. Kiedy klikniesz na odnośnik, otworzy się standardowy program do obsługi wiadomości e-mail z pustą treścią i umieszczonym wstawionym adresem e-mail. Funkcja zadziała tylko gdy na komputerze jest już zainstalowany taki program. Spróbujmy!
Czy są inne atrybuty o których powinienem wiedzieć?
Do tworzenia odnośników, musisz zawsze używać atrybutu href. Dodatkowo, możesz umieścic title w odnośniku:
Przykład 7:
<a href="http://www.html.net/" title="Odwiedź HTML.net i naucz się HTML">HTML.net</a>
będzie wyglądał następująco w przeglądarce:
Atrybut title jest wykorzystywany do krótkiego opisu odnośnika. Jeżeli - bez klikania - umieścisz kursor nad odnośnikiem, zobaczysz tekst "Odwiedź HTML.net i naucz się HTMLa".
