Jak zapewne pamiętasz, odnośnik w dokumencie XHTML/HTML może odnosić się do strony zewnętrznej lub do wybranego elementu bieżącej strony. Odnośnik wewnętrzny wykorzystuje symbol # i bywa nazywany również kotwicą.
Przyjrzyjmy się prostemu listingowi kodu XHTML/HTML, w którym wykorzystałem dwa rodzaje odnośników — zewnętrzny do innej strony oraz wewnętrzny do wybranego nagłówka witryny.
<ul>
<li><a href="http://helion.pl">Przykładowy odnośnik do helion.pl</a></li>
<li><a href="#pierwszy">Przykładowy odnośnik wewnętrzny - pierwszy</a></li>
<li><a href="#drugi">Przykładowy odnośnik wewnętrzny - drugi</a></li>
</ul>
<h1><a name="pierwszy">Pierwszy nagłówek</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci.</p>
<h1><a name="drugi">Drugi nagłówek</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci.</p>
Kliknięcie pierwszego odnośnika spowoduje otwarcie strony Wydawnictwa Helion. Wybór drugiego odnośnika z listy przeniesie nas do pierwszego nagłówka na stronie. Natomiast wybór trzeciego odnośnika przeniesie nas do drugiego nagłówka umieszczonego na przykładowej stronie.
Stosując pseudoklasę :target, możemy wymusić formatowanie elementów będących kotwicami na stronie. Mówiąc prościej, w naszym przykładzie po kliknięciu drugiego lub trzeciego odnośnika formatowaniu zostanie poddany pierwszy lub drugi nagłówek na stronie. Odpowiedni arkusz stylów może mieć następującą postać:
*:target
{
text-decoration:none;
color:green;
}
Natomiast poniżej zamieszczam przykład działania. Klikając poszczególne odnośniki, sprawdź, jak zachowują się nagłówki widoczne na stronie.
<<przykład>>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">
<title>Tytuł Strony WWW</title>
<style type="text/css">
*:target
{
text-decoration:none;
color:green;
}
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="http://helion.pl">Przykładowy odnośnik do helion.pl</a></li>
<li><a href="#pierwszy">Przykładowy odnośnik wewnętrzny - pierwszy</a></li>
<li><a href="#drugi">Przykładowy odnośnik wewnętrzny - drugi</a></li>
</ul>
<h1><a name="pierwszy">Lorem ipsum dolor sit amet</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci.</p>
<h1><a name="drugi">Lorem ipsum dolor sit amet</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci.</p>
</div>
</body>
</html>
<</przykład>>
Pseudoklasa :target nie działa w przeglądarce Internet Explorer. Natomiast pozostałe przeglądarki biorące udział w porównaniu dostępnym na końcu niniejszego kursu radzą sobie poprawnie z obsługą tego nowego elementu.
