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

Przykłady odnośników:

www.onet.pl

Do strony www.onet.pl przeniesie nas zarówno napis jak i obrazek. Do osiągnięcia takiego działania potrzebny jest nam kolejny znacznik: a który przyjmuje jeden atrybut href="..." czyli ścieżkę dokąd ma odnosić. Tak wygląda kod:

		<a href="http://www.onet.pl/"> www.onet.pl </a>
					

Napis znajdujący się pomiędzy początkowym a końcowym znacznikiem to tekst który jak klikniemy to nas przeniesie do danej strony. Odsyłaczem oczywiście nie musi być zawsze tekst, równie dobrze może być to obrazek. Jak należy to zrobić? W miejsce gdzie wcześniej znajdował się tekst wystarczy wstawić znacznik img w ten oto sposób:

		<a href="http://www.onet.pl/"> <img src="../img/onet.jpg" alt="logo_onet"/></a>
					

---

W tej części kursu warto wspomnieć o jeszcze jednej rzeczy, czyli o zmianie koloru hiperłącza. Trzeba je też podzielić na trzy rodzaje: nieodwiedzone, odwiedzone i aktywne (czyli te na które właśnie najeżdża użytkownik kursorem). Dowiemy się teraz jak edytować kolor każdego z nich, będzie to wstęp do CSS.

Pamiętasz podstawową strukturę strony? Było tam coś takiego jak <style>...</style>. Jest to miejsce w którym umieszczamy arkusze stylów (co to jest i do czego służy dowiesz się w następnym rozdziale). Chciałbym abyś umieścił tam poniższy tekst:

		a:visited {
			color: red;
		}
		a:hover {
			color: green;
		}
					

Dzięki temu, każde odwiedzone hiperłącze, zamiast standardowego fioletowego, będzie miało kolor czerwony, a każdy najechany kursorem link, będzie zielony. Sprawdź jak to działą na poniższym przykładzie:

www.wp.pl

Dlaczego i jak to działa dowiesz się w następnym rozdziale, a konkretniej podczas omawiania tak zwanych pseudo-klas