7. Hiperłącza i kotwice

Hiperłącza

Hiperłącza są to inaczej odsyłacze. Używa się ich po to, aby użytkownik mógł nacisnąć na fragment tekstu bądź obrazek i to przeniesie go do danej strony. Jeszcze nie omawiałam obrazków na stronie, więc jeśli chcesz to przejdź do kolejnej lekcji, gdzie są one omówione i dopiero tutaj wróć ☺

Oto przykład takich hiperłączy:

www.interia.pl

Do storny www.interia.pl zostaniemy przeniesieni zarówno po kliknięciu obrazka, jak również po kliknięciu linka. Aby osiągnąc takie działanie musimy użyć nowego znacznika a , który przyjmuje jeden atrybut href="..." gdzie podajemy ścieżkę dokąd ma się odnosić.

Tak prezentuje się kod:

 
			<a href="http://www.interia.pl/#iwa_source=calendar_logo " ;> www.interia.pl </a>

Napis znajdujący się pomiędzy początkowym, a końcowym znacznikiem to tekst który po kliknięciu przeniesie nas do danej strony. Wyżej napisany kod jest odnośnikiem dla tekstu, jednak nie zawsze musi to być tekst, może być także obrazek. Jak należy to zrobić, aby obrazek stał się naszym odnośnikiem? Otóż jest to bardzo proste! W miejsce gdzie wcześniej znajdował się tekst wystarczy wstawić znacznik img

W taki sposób:

 
			<a href="  "> <img src="../Obrazki/interia.png " alt="logo_onet"/></a>

Warto również tutaj wspomnieć o pewnej rzeczy, a mianowicie zmianie koloru hiperłącza. Dzielimy je na trzy rodzaje: nieodwiedzone, odwiedzone i aktywne, czyli te, z którymi dzieję się coś po najechaniu na nie. Nie omawialiśmy jeszcze CSS, więc jeśli chcesz możesz dopiero później do tego wrócić lub spróbować zobaczyć jak to się dzieje.

Pamiętasz coś takiego jak struktura strony? Jeśli nie to nie przyznawaj się i szybko sprawdź w drugiej lekcji naszego kursu. Było tam coś takiego jak <style>...</style> . Jest to właśnie to magiczne miejsce, w którym umieszczamy arkusze stylów .
A teraz sprawdźmy działanie tego o czym napisałam. Wpisz właśnie pomiedzy <style>...</style> podane własności:

			a:visited {
				color: blue;   -kolor odwiedzonego hiperłącza, zamiast koloru fioletowego
			}
			a:hover {
				color: pink;   -kolor po najechaniu na hiperłącze
			}

Oto przykład jak działają powyższe właściwości:

www.facebook.com

Kotwice

Skoro już wiemy co to jest i jak używać hiperłącza, to naależy również wspomnieć, iż dzięki hiperłączom możemy również tworzyć "kotwice", które umożliwiają przenoszenie się w inne miejsce elementu np. na dole strony możemy umieścić kotwice do przenoszenia na górę strony. Zobacz jak działa:

Góra ♥

Aby stworzyć taką kotwicę należy najpierw wybrać miejsce, do którego będzię się odnosić np. nagłówka. Tak należy to zapisać:

 
			<h2 id="id kotwicy  "> Nagłowek do którego będziemy się przenosić< /h2>

Następnie tworzymy naszą kotwicę poprzez umieszczenie "id" miejsca, do którego ma nas przenieść w href . Popatrz jak to zrobić:

 
			<a href=" id kotwicy " >  Przycisk < /a>

Możemy również stworzyć kotwice do elementu na innej stronie. Aby to zrobić musimy to zapisać w następujący sposób:

 
			<a href=" nazwa_dokumentu.html#id kotwicy " >  Przejdź na inną stronę < /a>

Kontakt

Tel: 512-345-287
Palcza 15
34-211 Palcza

Strone wykonała

Paulina Pasternak
E-mail: paula.pasternak@wp.pl