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 .



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 „_”)

Przeczytaj również

Kolorowanie co drugiego wiersza css i jQuery ̵... Istnieje wiele metod kolorowania obiektów HTML takich jak tabela czy div. W tym wpisie postaram się przedstawić kilka z nich Standardowo chcąc poko...
Gradient z wykorzystaniem CSS3 jako tło strony Słowo gradient kojarzy nam się zwykle z obrazkiem posiadającym bardzo ciekawą kolorystykę np. przechodzącym z jednej barwy w drugą. Jeszcze niedawn...
Charakterystyka właściwości clip CSS Z pomocą własność CSS clip możemy określić, który fragment danego obiektu (np. grafiki) ma być widoczny lub też nie. W ten sposób możemy nadać obiekto...
Przekreślenie Tekstu HTML/CSS W HTML istnieje kilka metod służących do przekreślania tekstu  i . Między oboma sposobami przekreślenia istnieją pewne różnice ...