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:

Oto odnośnik do HTML.net

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):

Odnośnik do nagłówka 1

Odnośnik do nagłówka 2

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:

Wyślij e-mail do nikogo w HTML.net

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:

HTML.net

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