Kotwica w witrynie jest bardzo przydatna, jeśli chcesz, aby artykuły w witrynie miały wygodne przejście między elementami listy. Przewracają stronę do żądanego punktu lub otwierają żądaną stronę, pomagając użytkownikowi szybko znaleźć potrzebne mu informacje.
Jeśli piszesz własną witrynę, powinieneś pomyśleć o tym, jak ułatwić nawigację po witrynie. Aby użytkownik nie musiał szukać potrzebnych mu informacji na wszystkich stronach Twojej witryny, najlepiej jest użyć techniki „kotwicy”. Utworzy link do dowolnej informacji lub dokumentu w dowolnym miejscu w witrynie.
Teoria
Aby utworzyć kotwicę, potrzebujesz dwóch elementów:
- Część kodu, która wskazuje link do naszej kotwicy, pozostawiona w innej części serwisu.
- Dowolna część kodu, w której można podać identyfikator, jest naszą kotwicą.
Najpierw musisz utworzyć pierwszą część kotwicy - link do niej. Link do kotwicy składa się z dwóch części: link do strony i link do kotwicy.
- Utwórz tag „a” lub dowolny inny tag, który obsługuje atrybut „href”
- W tym tagu utwórz atrybut „href”
- Podaj link do strony serwisu w wartości atrybutu.
- Po łączu wskaż łącze do kotwicy za pomocą symbolu „#” i dowolnej nazwy kotwicy (pisanej razem, na przykład: „#kotwica”)
Jeśli pominiesz punkt 3 i nie podasz linku do strony serwisu, kotwica zostanie przeszukana na bieżącej stronie. Oznacza to, że jeśli chcesz utworzyć łącze do kotwicy znajdującej się na tej samej stronie, możesz pominąć łącze do samej strony.
Pozostaje stworzyć drugą część kotwicy - identyfikator. Odnosi się do dowolnego tagu w kodzie witryny, który obsługuje atrybut id. Aby utworzyć kotwicę, potrzebujesz:
- Utwórz atrybut „id” w wymaganym tagu.
- W atrybucie „id” określ wartość nazwy kotwicy, która została określona w poprzednim kroku. (przykład:)
Po tych dwóch krokach na stronie pojawi się link, który przeniesie Cię do określonej kotwicy.
Ćwiczyć
Zastanówmy się, jak utworzyć kotwicę na konkretnym przykładzie.
Mamy prostą stronę taką jak ta:
Mamy tekst na górze i na dole strony, mnóstwo tagów „br”, które tworzą przestrzeń między tekstami. Musimy stworzyć kotwicę, abyśmy mogli szybko spojrzeć na tekst na dole.
Aby to zrobić, utwórz nowy tag - "a" po napisie "tekst na górze". W nim tworzymy atrybut „href”. Aby kotwica była wygodniejsza, napiszemy „w dół” w linku.
Teraz podajemy w atrybucie wartość "#yakor" - będzie to link do nazwy kotwicy.
Pierwsza część kotwicy - link do niej - jest gotowa. Teraz pozostaje tylko stworzyć samą kotwicę. Przechodzimy do żądanej części strony. W tym przypadku jest to „tekst na dole”. Ponieważ jest to prosty tekst bez tagu, musimy go stworzyć. Aby to zrobić, zawrzyj tekst w „akapit” - tag „p”.
W tym tagu tworzymy atrybut „id” i wpisujemy do niego wartość „yakor”. Wartość „yakor” odpowiada nazwie kotwicy określonej w łączu.
Teraz nasza kotwica działa tak, jak powinna.
