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:
<p>Na stronie <a href="Programowanie%20Podstawy_HTML-a" >Programowanie → Podstawy HTML-a</a> znajdują się tematy związane z HTML-em</p>
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:
<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:
<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:
<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ę:
Domyślne formatowanie znaczników lików można zmienić w CSS-ie w następujący sposób:
/* style dla linka nie odwiedzonego */
a:link
{
color:black; /* zmienia domyślny kolor */
background-color:transparent;
text-decoration:none; /* usuwa podkreślenie */
}
/* style dla linka odwiedzonego */
a:visited
{
color:black;
background-color:transparent;
text-decoration:none;
}
/* style dla linka gdy kursor myszy znajdzie się nad nim */
a:hover
{
color:red;
background-color:transparent;
text-decoration:underline;
}
/* dla linka aktywowanego przez użytkownika */
a:active
{
color:yellow;
background-color:transparent;
text-decoration:underline;
}