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

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 3814 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:

<p>Na stronie <a href="Programowanie%20Podstawy_HTML-a" >Programowanie → 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:

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

<p>Należy skorzystać z wzoru [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:

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:

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

/* 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; }
Propozycje książek