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ż

Zmiana koloru obrazka z użyciem CSS – właści... Obecnie istnieje kilka sposobów na zmianę koloru obrazka bez użycia programów do obróbki grafiki. Jedną z takich metod jest zastosowanie filtrów grafi...
Budujemy prostą stronę internetową cz. 1 Dziś zaczynam na blogu cykl, który powinien znaleźć się tutaj wcześniej czyli "Budujemy prostą stronę internetową". Do tej pory omówiłam wiele aspektó...
Podstawowe kolory na stronie W przypadku budowy strony internetowej dość ważne jest użycie odpowiednich kolorów. O ile dzięki CSS możemy użyć ich kilka set a może nawet kilka tysi...
Właściwość CSS empty-cells Właściwość CSS empty-cells w dużym skrócie służy do ukrywanie niewypełnionych pól. Innymi słowy empty-cells informuje przeglądarkę o tym, że jeśli dan...