Kurs z HTML dla początkujących

Kotwice na stronie HTML – odsyłacze i etykiety

kursy tutoriale

Kategoria wpisu Kurs HTML, Kursy Tagi: , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (1 głosów, średnia: 5,00 z 5)
Loading...

Reading Time: 2 minutes

Kotwice ang. anchor (etykiety, zakładki) służą do oznaczenia specjalnych obszarów podobnie jak zakładka w książce. Odsyłacz (zakładka) prowadzi do kotwicy (konkretnego fragmentu tekstu). Dzięki zastosowaniu kotwic oraz odsyłaczy do nich prowadzących możliwe jest np. tworzenie stron typu „one page”.

Przykładowy szablon z kotwicami i odsyłaczami

 

Jak wygląda kotwica i odsyłacz

Przykładowy odsyłacz:

Przykładowy odsyłacz

Odsyłacz składa się np. „nazwa-edykiety” oraz poprzedzającego ją symbolu #.

Przykładowa kotwica

Lub w HTML5

W HTML5 kotwice tworzymy już trochę inaczej zamieniając „name” na „id”

Jak widać kotwice czyli docelowe miejsca możemy tworzyć na różne sposoby.

Nazwa etykiety odsyłacza musi być taka sama jak nazwa kotwicy tylko wtedy skrypt zacznie działać. Nazwą etykiety może być praktycznie dowolne słowo.

 

 

Tutaj cię przeniesie
Jak widać na poniższym przykładzie docelowy link w cale nie musi wyglądać jak link:

Jak to działa

W odnośnik „href” zawiera wartość, link np:

Zasada jest podobna jak przy zwykłych linkach np. w menu strony. Po kliknięciu element zawierający go nazwa ta dopisze się on na końcu adresu naszej strony internetowej (lub też nie jeśli skorzystamy z kodu javascript). Następnie sprawdzi czy na stronie nie znajduje się obszar posiadający taki sam znacznik tylko bez „#”. Po czym przeniesie nas do niego. W podstawowej wersji (o ile taki punkt istniej) po kliknięciu zostaniemy odrazu przeniesieni do właściwej lokalizacji.

Kotwice i odsyłacze są obecnie bardzo popularne. Spotkać je można praktycznie na wszystkich nowoczesnych stronach internetowych.

W większości przypadków są one jednak rozbudowane o kod JavaScript (jQuery) dzięki czemu przesuwanie pomiędzy punktami jest np. bardziej płynne co ułatwia poruszanie się pomiędzy poszczególnymi działami strony.

Efekt ten spotykany jest szczególnie na stronach typu One Page.


Działający przykład kotwic

Poniżej zamieściłam link do przykładowej prostej strony z działającymi odsyłaczami i etykietami.

Demo bez animacji

Kod przedstawia się następująco:
Sekcja menu składająca się z kilku obrazków:

Powyższe odnośniki odnoszą się do poniższego kodu

Kod nie jest zbyt skomplikowany a do jego ułożenia użyłam

Tak jak zaznaczyłam stronka pozbawiona jest animacji w postaci płynnego przewijania – jest jednak dobrym przykładem działania.


Uwaga: przy tworzeniu kotwic i etykiet nie należy używać

  • polskich znaków typy: ą, ć, ę, ł, ń… itd.
  • wielkich liter
  • znaków takich jak np.: \ / : * ? ” < > |
  • spacji (jeśli już musisz, skorzystaj z podkreślnika „_”)

8 thoughts on “Kotwice na stronie HTML – odsyłacze i etykiety

  1. Krystyna Kareta

    A w jaki sposób do witryny jednostronnej z kotwicami w menu dodac kolejne podstrony tak żeby menu działało z podstrony na kotwicę? Dokładnie chodzi mi mi o strone one page i dodatkowe podstrony. jak z podstrony wrócić na dana kotwicę.

    1. Aurelia

      Możesz spróbować zmodyfikować odnośniki w swoim menu

      Jeśli masz odnośnik do innej strony:
      <a href=”strona-2.html”> Strona druga</a>

      Po kliknięciu w taki link strona otworzy się u góry strony.

      Jeżeli chcesz przenieść się w kreślone miejsce strony modyfikujemy go:
      <a href=”strona-2.html#odnosnik”> Strona druga<//a>

      W przypadku strony głównej (jeżeli znajduje się na głównej domenie) wystarczy:
      <a href=”/#odnośnik”> Strona druga</a>

      Przykład:
      http://www.radiojachting.pl/WC/formularz.php

      1. Krystyna Kareta

        Dzięki za sugestie ale nie o to chodzi. moja strona to ateliermlodosci.pl jest jako jednostronicowa ale…. w zakładce zabiegi można wejść w każdy zabieg i przeczytać o nim. Ale nie ma możliwości powrotu do zakładki zabiegi tylko do HOME. Strona na wordpresie .

          1. Krystyna Kareta

            Działa wielkie dzięki próbowałam Home/#portfolio i nie zadziałao ale o samym /#portfolio juz nie :)))) jeszcze raz dzięki

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *