Przejdź do treści

Odsyłacze

Do podstrony

(w obrębie tego samego serwisu)

Tak jak każda książka składa się z rozdziałów, tak samo serwisy internetowe składają się zwykle z podstron. Każda podstrona jest osobnym plikiem HTML i zawiera treść, która dość znacznie różni się tematycznie od pozostałych. Taka organizacja ułatwia użytkownikowi nawigację oraz zapobiega niepotrzebnemu wczytywaniu całego serwisu od razu (co trwałoby prawdopodobnie bardzo długo).

<a href="względna ścieżka dostępu">opis</a>
gdzie jako "względna ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się podstrona, do której chcemy się przenieść.
W miejsce wyrazu "opis" wpisujemy krótki tekst, który pojawi się na ekranie i po kliknięciu którego nastąpi uruchomienie odsyłacza (ścieżka dostępu pojawia się jedynie na pasku statusu przeglądarki).

Praktycznie każdy serwis internetowy składa się z pewnej ilości podstron, zapisanych w osobnych plikach HTML. Aby umożliwić w nich nawigację, wstawia się właśnie takie polecenia, odnoszące się do wszystkich podstron serwisu. Jest to pomocne przy tworzeniu spisu treści, chociaż hiperłącza mogą znajdować się również w zwykłym tekście, odsyłając użytkownika do miejsca, gdzie dany temat jest szerzej opisany. Odsyłacz taki może odnosić się do innej podstrony, ale tylko w obrębie tego samego dysku (ten sam serwis internetowy).

Ponieważ sposób przełamywania wierszy w przeglądarce nie zależy od sposobu wpisania tekstu w edytorze, czasami może się zdarzyć, że pojedynczy odsyłacz zostanie przedzielony na dwie kolejne linijki. Może się to wydawać nieestetyczne. Aby tego uniknąć, należy w opisie odsyłacza zastąpić wszystkie spacje znakami &nbsp; [zobacz: Znaki specjalne]. Nie dotyczy to jednak tekstu, w którym znajdują się: "%" (procent) lub "-" (myślnik). W takim przypadku można użyć blokady przełamania wiersza.

UWAGA!
Bardzo ważne: w nazwach plików lepiej nie używać:
  • wielkich liter
  • znaków, np.: \ / : * ? " < > |
  • spacji (jeśli musisz, w zamian używaj podkreślnika "_")
  • polskich liter (ą, ć, ę, ł, ń... itd.)

Jeśli nie zastosujesz się do tych zaleceń, może się okazać, że po wprowadzeniu strony do Internetu, pliki takie nie wczytają się (nawet jeśli na Twoim komputerze wszystko jest w porządku)!

Za pomocą tego typu odsyłacza można się odnosić do dowolnego pliku znajdującego się na koncie FTP razem ze stroną. Dzięki temu można zbudować dział download, tzn. odsyłacze do pobierania plików.

Przykład:

To jest odsyłacz do strony głównej kursu HTML: Strona główna

Dymek narzędziowy

Dobrym pomysłem może się również okazać, zastosowanie atrybutu title="...". Powoduje on, że po wskazaniu odsyłacza myszką, wyświetli się tekst pomocniczy w "dymku" narzędziowym. Można tam podać np. szerszy opis strony, do której ma nastąpić przeniesienie, np. po wpisaniu:

<a href="../index.html" title="Do strony głównej">Strona&nbsp;główna</a>

Otrzymamy (wskaż odsyłacz myszką, aby zobaczyć opis):

Strona główna

Pasek statusu (stanu)

Po wskazaniu odsyłacza myszką, w pasku statusu przeglądarki domyślnie pojawia się adres strony, do której ma nastąpić przeniesienie (atrybut HREF). Można jednak to zmienić i sprawić, aby pojawił się tam inny napis. Należy jednak pamiętać, że na pasku statusu nie zmieści się zbyt długi tekst.

<a href="../index.html" onmouseover="window.status='Do strony głównej'; return true" onmouseout="window.status=''; return true">Strona&nbsp;główna</a>

Wskaż poniższy odsyłacz myszką i popatrz na pasek stanu przeglądarki:

Strona główna

Nowe okno

Jeśli chcesz, aby po kliknięciu odsyłacza otwarło się nowe okno, wpisz następujący kod (dotyczy to również pozostałych typów odsyłaczy przedstawionych na tej stronie):

<a target="_blank" href="adres">opis</a>

kliknij tutaj

[Aby określić wygląd nowego okna (rozmiar, położenie, pokazanie/ukrycie pasków menu, narzędzi, statusu itd.), zobacz: Otwarcie nowego okna].

UWAGA!
Atrybut TARGET nie wchodzi w skład Strict DTD. Natomiast można go bez przeszkód używać wykorzystując Transitional DTD.

Istnieją co najmniej dwie drogi rozwiązania tego problemu:

  1. JavaScript

    Tworzymy plik o dowolnej nazwie z rozszerzeniem *.js - np. target.js i zapisujemy w nim następujący kod:

    function aTarget(el, name)
    {
    	var wnd = window.open(typeof el == 'string' ? el : el.href, typeof name != 'undefined' ? name : '', 'menubar=yes,toolbar=yes,location=yes,directories=no,status=yes,scrollbars=yes,resizable=yes');
    	if (!wnd) return false;
    	wnd.focus();
    	return true; 
    }

    Następnie w nagłówku dokumentu (sekcja HEAD) umieszczamy:

    <script type="text/javascript" src="target.js"></script>

    W wyróżnionym miejscu należy podać lokalizację utworzonego przed momentem pliku *.js. Jeżeli znajduje się w tym samym katalogu, wystarczy podać jego nazwę wraz z rozszerzeniem.
    Ostatecznie linki, które mają się otwierać w nowym oknie, tworzymy następująco:

    <a href="adres" onclick="return !aTarget(this)">opis</a>

    Przykład:

    www.google.pl w nowym oknie

  2. DTD

    Wykorzystując modularyzację języka XHTML, można utworzyć własną wersję DTD, czyli plik zawierający definicję wszystkich znaczników i atrybutów języka, łączącą w sobie podstawową wersję DTD XHTML oraz moduł XHTML Target 1.0, w którym zawiera się atrybut target="...". Należy utworzyć plik pod nazwą xhtml11-target1.dtd i zapisać go na swoim koncie FTP w katalogu DTD (uwaga na wielkość liter!):

    <!ENTITY % XHTML.version
    	"-//W3C//DTD XHTML 1.1 + XHTML Target 1.0//EN">
    <!ENTITY % xhtml11.dtd
    	PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    %xhtml11.dtd;
    <!ENTITY % xhtml-target.mod
    	PUBLIC "-//W3C//ELEMENTS XHTML Target 1.0//EN"
    	"http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-target-1.mod">
    %xhtml-target.mod;

    Pomysł: Dave H

    Dokumenty XHTML tworzymy przy użyciu następującego szablonu:

    <?xml version="1.0" encoding="iso-8859-2"?>
    <!DOCTYPE html
    	PUBLIC "-//W3C//DTD XHTML 1.1 + XHTML Target 1.0//EN"
    	"URL/DTD/xhtml11-target1.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
    <head>
    <title>Tytuł dokumentu</title>
    </head>
    <body>
    
    Tu wpisuje się treść strony
    
    </body>
    </html>
    Jako URL/DTD trzeba wpisać pełny adres do katalogu, w którym znajduje się utworzony przed chwilą plik xhtml11-target1.dtd, np. http://www.example.com/DTD

    Należy przy tym zauważyć, że mamy tutaj do czynienia z dokumentem XHTML 1.1, a więc nie można w nim stosować znaczników i elementów zdeprecjonowanych! Ponadto powinniśmy zadbać o przesyłanie takiego dokumentu z odpowiednim typem MIME. W rozdziale Typy MIME dokumentów XHTML dowiesz się więcej na ten temat. Znajdziesz tam również skrypt PHP negocjacji zawartości, dzięki któremu dokumenty XHTML mogą się wyświetlać poprawnie w każdej przeglądarce (Microsoft Internet Explorer 7.0 nie potrafi wyświetlić dokumentu XHTML z typem MIME application/xhtml+xml!). Dla omawianego tutaj rozwiązania, wystarczy ustawić w tym skrypcie preferowaną wersję DTD jako XHTML 1.1 i drugą preferowaną DTD (w przypadku braku pełnej interpretacji XHTML 1.1) - XHTML 1.0 Transitional, a następnie w pliku "mime/XHTML 1.1.inc.php" zapisać:

    <!DOCTYPE html
    	PUBLIC "-//W3C//DTD XHTML 1.1 + XHTML Target 1.0//EN"
    	"URL/DTD/xhtml11-target1.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
    <head>

    Opis instalacji znajdziesz we wskazanym wcześniej rozdziale. Trzeba jednak zdawać sobie sprawę, że w przestarzałych przeglądarkach (np. MSIE 7.0) nie uzyskamy w ten sposób XHTML 1.1 ani XHTML 1.0 Strict! W takim przypadku skrypt automatycznie dobierze XHTML 1.0 Transitional, ponieważ tylko w nim domyślnie można wykorzystywać atrybut target="...".

Zobacz także

Komentarze

Zobacz więcej komentarzy