Wstawianie linków i kotwic na stronie za pomocą znacznika a w HTML-u
Stronę tą wyświetlono już: 2852 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 [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:
- <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;
- }