HTML & CSS dla początkujących

HTML & CSS dla początkujących (Część 11): Definiowanie hiperłączy (1)

Wszystkie filmy z tutorialu

Definicja odniesień w HTML odbywa się za pomocą elementu a. Zanim pokażę wam jego użycie, kilka ogólnych wskazówek dotyczących hiperłączy. Koniecznie dobrze przemyślcie teksty odniesień. Zwykłe powrót zazwyczaj nie pomaga nikomu. (Jeśli odwiedzający przyszli z zewnętrznej strony, zazwyczaj nie wiedzą, co oznacza powrót). Starajcie się wybierać opisowe teksty odniesień.

Hiperłącza w HTML zawsze podążają tym samym zasadom.

<a href="videos.html">Aktuelle Videos</a></pre>



Elementowi a przypisuje się atrybut href. Atrybut href oczekuje jako wartości celu odniesienia. W poprzednim przykładzie odniesiono się do pliku videos.html. Ten plik znajduje się w tym samym katalogu co plik HTML, w którym zdefiniowano hiperłącze.

HTML & CSS dla początkujących (Część 11): Definiowanie hiperłączy (1)

Przy definiowaniu hiperłączy obowiązują zasady, które zostały również przedstawione w kontekście dołączania grafik.

Możecie również definiować nie tylko odnośniki wewnętrzne projektu. Hiperłącza mogą być ustawiane również do plików zewnętrznych i domen.

<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a></pre>





Tekst znajdujący się między otwierającym <a> a zamykającym </a> jest ostatecznie tekstem odniesienia. Domyślnie ten tekst jest wyświetlany przez przeglądarki podkreślony.

HTML & CSS dla początkujących (Część 11): Definiowanie hiperłączy (1)

Określenie okna docelowego

Jeśli kliknie się na hiperłącze, cel odniesienia zostanie otwarty w bieżącym oknie przeglądarki. W zwykłych przypadkach to w zupełności wystarczające. Może jednak zdarzyć się, że na przykład ustawiono odnośnik do zewnętrznej domeny. Kiedy odwiedzający klikną na ten odnośnik, cel odniesienia powinien zostać otwarty w nowym oknie przeglądarki lub karcie. Zaletą takiego rozwiązania jest to, że Wasza strona internetowa pozostaje otwarta w tle.

HTML i CSS dla początkujących (część 11): Definiowanie hiperłączy (1)

Niemniej jednak nie powinno się otwierać każdego hiperłącza Waszej strony w nowym oknie, ponieważ odwiedzający mogą się tym szybko zirytować.

Poprzez atrybut target elementu a można określić, w jakim oknie docelowym powinien zostać otwarty cel odniesienia. W tym kontekście HTML oferuje trzy wartości domyślne dla atrybutu target.

_blank – Cel odniesienia zostanie wyświetlony w nowym oknie przeglądarki.

_self – Otwiera cel odniesienia w bieżącym oknie przeglądarki.

_parent – Pozwala wyjść z ramki. (Zauważcie proszę, że ramki nie są obsługiwane w HTML5. W każdym razie ta technika nie powinna być już stosowana, ponieważ istnieją teraz lepsze alternatywy. Osoby zainteresowane zagadnieniem ramek mogą znaleźć więcej informacji na stronie http://de.wikipedia.org/wiki/Frame_(HTML)).

_top – Również używane w kontekście ramek. Pozwala otworzyć cel odniesienia poza zbiorem ramek.

Poniżej przykład wykorzystania atrybutu target:

<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a></pre>





W tym przypadku cel odniesienia http://www.psd-tutorials.de zostanie otwarty w nowym oknie/karcie. Ten sam efekt można osiągnąć, stosując nazwę zamiast zarezerwowanej nazwy _blank. Jednakże przy użyciu atrybutu target, zaleca się rzeczywiście korzystanie z jednej z zarezerwowanych nazw.

Określenie bazy odnośników

W obszarze head pliku HTML można zdefiniować tzw. bazę odnośników. Taka baza odnośników powoduje, że wszystkie cele odniesienia są wyświetlane w określonym oknie przeglądarki. Jest to oczywiście interesujące przede wszystkim w kontekście ramek.

Mimo to ta funkcja jest również praktyczna, gdy chcecie na przykład zawsze otwierać wszystkie odnośniki w nowym oknie przeglądarki za pomocą _blank. Wyobraźcie sobie listę linków. Jeśli ich cele odniesienia mają zawsze otwierać nowe okno, wyglądałoby to tak:

<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a>
<br />
<a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a>
<br />
<a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a></pre>





Trzeba byłoby zatem przypisać atrybut target do każdej definicji a.

To nie jest zbyt wydajne, jak widać. Jeszcze mniej efektywne będzie to, gdy za kilka miesięcy zdecydujecie, że jednak nie chcecie otwierać celów odniesienia w nowym oknie. Wtedy musielibyście dostosować atrybuty target wszystkich odnośników. Można temu przeciwdziałać właśnie za pomocą wspomnianej bazy okien docelowych. Można ją zdefiniować za pomocą elementu base w sekcji head. Elementowi base przypisuje się atrybut target z pożądaną wartością. Poniżej przykład, jak to może wyglądać:

<!DOCTYPE html>
 <html lang="de">
 <head>
 <title>PSD-Tutorials.de</title>
 <meta charset="UTF-8" />
 <base target="_blank">
 </head>
 <body>
 <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a>
 <br />
 <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a>
 <br />
 <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a>
 </body>
 </html>



To oszczędza sporo pisania.

Definiowanie kotwic

Jak już widzieliście, jak można tworzyć hiperłącza do innych plików. Jednak w pliku HTML można również definiować tzw. kotwice i następnie tworzyć odwołania do tychże kotwic. Jest to praktyczne zwłaszcza przy rozległych stronach. Można na początku dokumentu zdefiniować spis treści, dzięki któremu odwiedzający mogą skakać do dla nich istotnych miejsc, nie przewijając okna przeglądarki.

HTML i CSS dla początkujących (Część 11): Definiowanie hiperłączy (1)

Kotwice tworzy się za pomocą elementu a. Jednak definicja kotwic nie otrzymuje atrybutu href, ale atrybut name.

<a name="seitenanfang">Zawartość</a>
<a name="kapitel1">Zawartość rozdziału 1</a>
<p>Tu jest dużo tekstu.</p>
<a name="kapitel2">Zawartość rozdziału 2</a>
<p>Tu jest dużo tekstu.</p>



Nazwy kotwic możecie nadawać dowolnie. Zalecam jednak, aby były one możliwie krótkie, używać tylko małych liter i unikać znaków specjalnych.

Aby odwołać się do kotwicy, definiuje się normalne hiperłącze, tak jak pokazano na początku tego samouczka.

<a href="#seitenanfang">Do góry strony</a>



Atrybutowi href nadaje się wartość nazwy kotwicy. Istotne jest jednak, aby przed nazwą kotwicy umieścić znak krzyżyka.

Możecie również ustawić odwołania do kotwic międzyplikowo. W poniższym przykładzie zakładam, że istnieje plik news.htm, który znajduje się w tym samym katalogu co właściwy plik HTML. Wewnątrz pliku news.htm została zdefiniowana kotwica o nazwie seitenanfang. Aby się do niej odwołać, za nazwą pliku docelowego (news.htm) należy umieścić znak krzyżyka. Następnie podaje się nazwę kotwicy.

<a href="news.htm#seitenanfang">Do góry strony</a>



Tak łatwo możecie więc ustawić odwołania do kotwic w dowolnym pliku.