Przejdź do treści

Odsyłacze - HTML

Do etykiety <a id>

Jak stworzyć formę elektronicznej zakładki na stronie?

Etykieta - inaczej zakładka lub kotwica (ang. anchor) - to pewne zaznaczone miejsce na stronie. Jeśli zdefiniujemy taką zakładkę, będziemy mogli się później do niej bezpośrednio przenosić. Etykiety są wykorzystywane, gdy w jednym dokumencie znajduje się więcej ważnych miejsc - podrozdziałów, a wstawienie ich do osobnych plików, byłoby uciążliwe, ze względu na ich liczbę.

Tak jak w książce - każdy rozdział składa się z mniejszych podrozdziałów - tak samo na każdej osobnej stronie HTML definiuje się zakładki. Dzięki takiej konstrukcji, nawigacja w serwisie staje się dużo łatwiejsza. Po kliknięciu odsyłacza do etykiety, przeglądarka internetowa przenosi użytkownika bezpośrednio do podrozdziału, a nie na początek strony, przez co nie jest on zmuszony do samodzielnego odszukania wybranego tematu (co w przypadku obszernych dokumentów mogłoby długo potrwać). Etykietę można zdefiniować w dowolnym miejscu strony - również wewnątrz zwykłego tekstu.

Jeśli chcemy używać etykietę, najpierw należy ją zdefiniować w wybranym miejscu strony za pomocą polecenia:

<a id="nazwa_etykiety"></a>

Następnie możemy się do niej odwoływać, zarówno z tej samej jak i z innej strony, za pomocą zwykłych odsyłaczy:

<a href="(ścieżka do strony)#nazwa_etykiety">opis odsyłacza</a>

Istnieją dwa rodzaje odsyłaczy do etykiet:

  1. Etykieta zdefiniowana na tej samej stronie
    <a href="#nazwa_etykiety">opis odsyłacza</a>
    (...)
    <a id="nazwa_etykiety">(opis etykiety)</a>
    lub
    <a id="nazwa_etykiety">(opis etykiety)</a>
    (...)
    <a href="#nazwa_etykiety">opis odsyłacza</a>
  2. Etykieta zdefiniowana na innej stronie
    <a href="ścieżka dostępu lub adres internetowy#nazwa_etykiety">opis odsyłacza</a>

    UWAGA! Na podanej stronie musi zostać zdefiniowana etykieta - polecenie:
    <a id="nazwa_etykiety">(opis etykiety)</a>

We wszystkich przypadkach <a id="nazwa_etykiety">...</a> oznacza etykietę, do której nastąpi przeniesienie, po kliknięciu odsyłacza <a href="(ścieżka dostępu)#nazwa_etykiety">...</a>.

Polecenie powoduje przejście do innego miejsca (etykiety) na tej samej lub innej stronie. Zasady wpisywania ścieżki dostępu są takie same jak w przypadku odsyłacza do podstrony. Należy jedynie pamiętać, że nazwa etykiety w poleceniu odsyłacza: <a href="#... oraz w definicji etykiety: <a id="... musi być bezwzględnie taka sama (włączając w to wielkość liter), jedynie w odsyłaczu nazwę należy poprzedzić znakiem # (krzyżyk)!

Można również zauważyć, że kolejność wpisywania odsyłacza <a href="#... oraz etykiety <a id="... na stronie jest dowolna, tzn. etykieta może znajdować się wcześniej niż odsyłacz do niej (powodując np. przeniesienie na samą górę strony). Dodatkowo opis etykiety nie jest konieczny (ale konieczny jest opis odsyłacza, bo w przypadku gdy go nie podamy, odsyłacz nie pojawi się na ekranie).

Na stronach WWW bardzo często umieszcza się etykiety bez opisu (ale należy pamiętać o zamknięciu znacznika). Chociaż zakładka taka nie jest widoczna na ekranie, to znajduje się w kodzie źródłowym strony i można się do niej odnosić.

Etykietę (czyli atrybut id="nazwa_etykiety") można ustawiać nie tylko na znaczniku A, ale na prawie wszystkich elementach (oprócz: BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE). Można do tego również wykorzystać istniejące wcześniej na stronie znaczniki. Idealnym przykładem są tytuły. Zwykle naturalnie wyznaczają on ważne miejsca na stronie, do którym prawdopodobnie możemy chcieć wstawić bezpośrednie odsyłacze.

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

Dodatkowo należy bezwzględnie pamiętać, że na tej samej stronie nie mogą się znajdować dwie identyczne etykiety! Można natomiast umieścić takie same etykiety na różnych stronach.

Przykład <a id>

Odsyłacz pierwszego rodzaju (do etykiety "#testowa_etykieta" na tej stronie):
Przejdź do testowej etykiety...

...
...
...
...
...
...
...
...
...
...

...testowa etykieta


Odsyłacz drugiego rodzaju (do etykiety "#wstep" na stronie "przegladarki.html" - spójrz na pasek stanu przeglądarki po wskazaniu odsyłacza myszką):
Przeglądarki - wstęp...

Pytania i odpowiedzi

W jaki sposób przejść do etykiety w innym dokumencie?

Wystarczy w odnośniku po adresie strony wstawić znak krzyżyka (skrót klawiaturowy Shift+3), a po nim nazwę etykiety, która znajduje się na stronie docelowej. Ten sposób działa zarówno z odsyłaczami do podstron w obrębie tego samego serwisu (np. <a href="podstrona.html#etykieta">...</a>) jak i w przypadku odsyłaczy do adresu internetowego w innej witrynie (np. <a href="http://example.com/podstrona.html#etykieta">...</a>).

Jak dodać kotwicę HTML?

Kotwica (inaczej etykieta) to oznaczone miejsce w dokumencie HTML, do którego można odsyłać użytkownika za pomocą odnośników hipertekstowych. Aby wstawić kotwicę w określonym miejscu dokumentu można się posłużyć następującym kodem: <a id="nazwa-kotwicy"></a>. Można również nadać atrybut id="nazwa-kotwicy" dowolnemu istniejącemu już znacznikowi - np. wybranemu tytułowi nagłówkowemu tworząc w ten sposób spis treści dokumentu: <h1 id="tytul-rozdzialu">...</h1>.

Ile może być identycznych etykiet w jednym pliku?

W tym samym dokumencie HTML można wstawić dowolną liczbę etykiet, ale każda z nich musi mieć inną nazwę. W przeciwnym razie przeglądarka nie wiedziałaby, do której z nich przenieść użytkownika po kliknięciu w odnośnik zawierający taką etykietę.

Komentarze

Zobacz więcej komentarzy

Facebook