Dodawanie kotwic w treści wyświetlanej na stronie sklepu internetowego

Kotwice HTML (ang. anchors) to elementy HTML, które tworzą odnośniki do określonych miejsc w treści strony. Najczęściej są wykorzystywane do tworzenia sekcji na tej samej stronie lub różnych zasobów, takich jak obrazy czy dokumenty. Kotwice są definiowane za pomocą tagu a.

Kotwice są przydatne przy tworzeniu np. spisów treści, gdzie każdy element listy prowadzi do konkretnego fragmentu strony, umożliwiając użytkownikowi szybkie przejście do interesujących go treści. Dzięki temu klient nie musi przewijać treści strony, tylko po kliknięciu w odnośnik z kotwicą automatycznie zostaje przeniesiony do konkretnej treści na stronie (pasek przewijania przeglądarki automatycznie ustawia się na określonej treści powiązanej z kotwicą).
 

Tworzenie kotwicy

Kotwice są tworzone w oparciu o tag a. Tag a w HTML to element służący do tworzenia hiperłączy (linków). Jest jednym z najważniejszych elementów HTML, ponieważ pozwala na nawigację między stronami internetowymi, dokumentami, plikami, a także umożliwia odwoływanie się do określonych sekcji na tej samej stronie. Każda kotwica na danej podstronie musi mieć unikalną nazwę.

Edytor w oprogramowaniu shopGold posiada funkcję tworzenia linków, dzięki której nie trzeba wstawiać ręcznie kodu, tylko wystarczy kliknąć ikonkę tworzenia odnośnika.

Żeby kotwica działała poprawnie na stronie, muszą być dodane dwa połączone ze sobą elementy. Pierwszy to odnośnik, który będzie prowadził do wybranego elementu opisowego na stronie. Druga część to blok opisu, do którego będzie prowadził utworzony odnośnik. Oba te elementy muszą być połączone ze sobą przez wspólny identyfikator.

Żeby utworzyć odnośnik, który będzie prowadził do wybranego fragmentu w treści strony, trzeba zaznaczyć tekst, który ma być odnośnikiem oraz kliknąć w ikonę tworzenia odnośników w belce nawigacyjnej edytora tekstu.
 
Po kliknięciu ikonkę otworzy się okno popup tworzenia nowego odnośnika.
 
W pozycji "wyświetlany tekst" trzeba wpisać tekst, który będzie odnośnikiem do tekstu powiązanego z kotwicą. W to pole wstawia się tekst, który wcześniej zostanie zaznaczony do tworzenia odnośnika. W polu "typ odnośnika" trzeba wybrać opcję "adres URL". W polu "protokół" wartość "inny". I najważniejszy element to "adres URL" - czyli nazwa etykiety (bloku tekstu), do którego ma przenosić odnośnik. W tym polu trzeba wpisać nazwę linku strony, na której tworzona jest etykieta (można go skopiować z paska przeglądarki - bez adresu strony i http - tylko sama nazwa linku) oraz podać nazwę etykiety (unikalną nazwę, która będzie łączyła odnośnik z blokiem tekstu, do którego ma przenosić odnośnik). Nazwa etykiety może składać się z liter i cyfr (nie jest ona widoczna w tekście). Musi on być dodana po nazwie linku i musi zaczynać się od znaku #. W opisywanym przykładzie nazwa etykiety to #nazwa_etykiety.

Po utworzeniu odnośnika trzeba stworzyć blok tekstu, do którego ma przenosić odnośnik. W tym celu trzeba zaznaczyć wybrany tekst oraz w oknie edytora kliknąć ikonkę "utworzenia pojemnika DIV". Po kliknięciu zostanie wyświetlone okno popup.
 
W oknie popup trzeba przejść do zakładki "Zaawansowane" i w polu "id" wpisać nazwę utworzonej wcześniej etykiety. Wpisuje się samą nazwę bez znaku #. Po zatwierdzeniu poprzez wciśniecie przycisku "OK" utworzony zostanie element o id "nazwa_etykiety", który poprzez swoje id będzie powiązany z utworzonym wcześniej odnośnikiem. Tekst, który będzie dodawany jako "pojemnik DIV" powinien być rozdzielony z innymi tekstami np. tytułem, który będzie np. nagłówkiem H2 lub H3 (tak jak na screenie powyżej gdzie nad i pod zaznaczonym tekstem są nagłówki tekstu).

W ten sposób po utworzeniu obu elementów, gdy użytkownik strony kliknie w utworzony odnośnik - zostanie przeniesiony dla treści strony oznaczonej jako id "nazwa_etykiety". Strona automatycznie przewinie się tekstu powiązanego z klikanym odnośnikiem.

W podany powyżej sposób można utworzyć w treści strony wiele odnośników (kotwic) i powiązanych z nimi bloków tekstu.