Wstawianie linków i kotwic na stronie za pomocą znacznika a w HTML-u

Stronę tą wyświetlono już: 2660 razy

Wstawianie linków do stron za pomocą znacznika <a href>

Adres odwołania w linku może być względny (gdy odwołuje się on do pliku na tej samej domenie), lub zewnętrzny, gdy odwołuje się do pliku z innej domeny. Względne odwołanie może wyglądać następująco:

Listing 1
  1. <p>Na stronie <a href="Programowanie%20Podstawy_HTML-a" >Programowanie &rarr; Podstawy HTML-a</a> znajdują się tematy związane z HTML-em</p>

Wynik powyższego kodu:

Na stronie Programowanie → Podstawy HTML-a znajdują się tematy związane z HTML-em

Powyżej wykorzystane został adres względny do pliku, który znajduje się w atrybucie tutaj. Bezwzględne odwołanie będzie wyglądało tak:

Listing 2
  1. <p>Na stronie <a href="https://commons.wikimedia.org/wiki/Strona_g%C5%82%C3%B3wna">Wikimedia Commons</a> znajdują się różne grafiki dostępne na licencjach umożliwiających ich wykorzystanie komercyjne.</p>

Wynik powyższego kodu:

Na stronie Wikimedia Commons znajdują się różne grafiki dostępne na licencjach umożliwiających ich wykorzystanie komercyjne.

Wstawianie kotwicy (etykiety) za pomocą znacznika <a name> i linkowanie do niej

Wstawienie etykiety na stronie umożliwia odwołanie się później do konkretnego miejsca w danej stronie. Oto przykład utworzenia etykiety:

Listing 3
  1. <p><a name="I_zasada_Newtona">I zasada dynamiki Newtona:</a> <dfn>w inercjalnym układzie odniesienia, jeśli na ciało nie działa żadna siła lub siły działające równoważą się, to ciało pozostaje w spoczynku lub porusza się ruchem jednostajnym prostoliniowym.</dfn></p>

Wynik działania powyższego kodu:

I zasada dynamiki Newtona: w inercjalnym układzie odniesienia, jeśli na ciało nie działa żadna siła lub siły działające równoważą się, to ciało pozostaje w spoczynku lub porusza się ruchem jednostajnym prostoliniowym.

Odwołanie się do znacznika na tej samej stronie wyglądać będzie następująco:

Listing 4
  1. <p>Spójrzmy jeszcze raz na I zasadę dynamiki Newtona <a href="#I_zasada_Newtona">tutaj</a>.</p>

Wynik działania powyższego kodu:

Spójrzmy jeszcze raz na I zasadę dynamiki Newtona tutaj.

Odwołanie do innej strony podpiętej pod tą samą domenę:

Listing 5
  1. <p>Należy skorzystać z wzoru [link attributes="href:579;anchor:[1]" settings="text:[1]"/].</p>

Wynik:

Należy skorzystać z wzoru [1].

Sterowanie sposobem wyświetlania strony za pomocą atrybutu target

Atrybut target (który jest opcjonalny) może przyjmować następujące wartości:

  • _blank - sprawia, że strona zostanie otwarta w nowej zakładce przeglądarki;
  • _top - jeżeli strona docelowa została zamknięta w ramce, to po kliknięciu na ten link zostanie wyświetlona bez ramki;
  • _parent - jeżeli strona docelowa została zagnieżdżona w kilku ramkach, to opuszcza jedną z nich;
  • nazwa_ramki - otwiera stronę w nazwanej ramce;
  • _self - otwiera stronę w tym samym oknie i karcie przeglądarki.

Linkowanie z wykorzystaniem elementu graficznego

W pomiędzy znacznik <a href="adres_strony"> a </a> można wstawić grafikę, np w taki oto sposób:

Listing 6
  1. <p style="text-align:center"><a href="index.php"><img src="Loga/logotyp.png"/></a></p>

Wynik działania powyższego kodu:

Sterowanie stylem wyświetlania znacznika w CSS-ie

Domyślne formatowanie znaczników lików można zmienić w CSS-ie w następujący sposób:

Listing 7
  1. /* style dla linka nie odwiedzonego */
  2. a:link
  3. {
  4. color:black; /* zmienia domyślny kolor */
  5. background-color:transparent;
  6. text-decoration:none; /* usuwa podkreślenie */
  7. }
  8. /* style dla linka odwiedzonego */
  9. a:visited
  10. {
  11. color:black;
  12. background-color:transparent;
  13. text-decoration:none;
  14. }
  15. /* style dla linka gdy kursor myszy znajdzie się nad nim */
  16. a:hover
  17. {
  18. color:red;
  19. background-color:transparent;
  20. text-decoration:underline;
  21. }
  22. /* dla linka aktywowanego przez użytkownika */
  23. a:active
  24. {
  25. color:yellow;
  26. background-color:transparent;
  27. text-decoration:underline;
  28. }
Propozycje książek
tytuł: HTML i CSS. Zaprojektuj i zbuduj witrynę WWW. Podręcznik Front-End Developera autor: Jon Duckett

Tytuł:

HTML i CSS. Zaprojektuj i zbuduj witrynę WWW. Podręcznik Front-End Developera

Autor:

Jon Duckett

Komentarze