Jak zakotwiczać HTML. Kotwica HTML na stronie

Internet od dawna stanowi integralną część codziennego życia. Ludzie chętnie odwiedzają różne witryny, aby czytać wiadomości, udostępniać zdjęcia, spędzać trochę czasu oglądając śmieszne filmy lub robiąc zakupy.

I mimo, że nadchodzi era mobilnych technologii i aplikacji, techniki tworzenia pięknych i przyciągających uwagę stron internetowych wciąż się poprawiają. Niewielu użytkowników zdaje sobie sprawę, co kryje się za kulisami ich ulubionej przeglądarki i co się dzieje, gdy płacą na stronie za zakupy za pomocą swoich kart kredytowych. Ale w rzeczywistości, za tym wszystkim, istnieją tysiące linii kodu, które zostały opracowane i ulepszone przez lata, aby zapewnić najwygodniejsze i przyjemniejsze korzystanie z usług internetowych. Kotwica HTML, hiperłącze, znaczniki, tytuły - te i wiele innych pojęć zostanie dokładniej opisanych w tym artykule.

Podstawa strony internetowej

Aby tworzyć strony internetowe i strony w Internecie, które mogłyby otwierać się i wyglądać tak samo w dziesiątkach różnych przeglądarek na kilku platformach jednocześnie, konieczne było stworzenie jednej specyfikacji dla tego rodzaju dokumentów. Ta specyfikacja była HTML (z angielskiego. HyperText Markup Language).
Przetłumaczone, oznacza "hipertekstowy język znaczników". I ten termin dość dokładnie opisuje jego cel. Struktura dokumentu HTML nie opisuje samej zawartości strony internetowej, lecz jedynie "zaznacza" różne sekcje, nadając im pewne cechy lub właściwości. Ten znacznik umożliwia dokumentowi wyglądać tak samo z przeglądarki do przeglądarki, a także jest kluczem do obecnych protokołów przesyłania danych w sieci globalnej - HTTP i HTTPS.

Struktura dokumentu HTML

Podstawą dowolnego dokumentu HTML jest parzysta liczba tagów. Są to specjalne uwagi, które nadają treściom pewne właściwości. Kluczową cechą tagów jest to, że muszą być umieszczone w parach - pierwszy znacznik to "otwarcie", a "zamknięcie" musi zawsze za nim podążać.

W ten sposób przeglądarka dokładnie wie, jakie są granice atrybutów określonych przez znacznik. Jednak tag może być pusty (nie zawiera żadnych treści w środku). Przykładem tego ostatniego jest element nowej linii. Tagi, które nie zawierają żadnych tekstów ani innych danych, nie trzeba ich zamykać. Za pomocą znaczników można nadać tekstowi określony kolor lub styl lub osadzić w dokumencie specjalne elementy (tabele, pliki multimedialne, łącza).

Kotwica HTML i łącza do dokumentów

Aby umożliwić odwiedzającym witrynę nawigację między różnymi stronami lub na jednej stronie, możesz użyć linków. Do poruszania się w obrębie jednej witryny lub kilku hiperłączy są używane. Zwykle są używane do komunikacji między dwoma całkowicie różnymi obszarami zasobu.

Jedną z zasad dobrego projektowania stron internetowych jest zasada potrzeby scalania w jednym miejscu tylko jednorodnego pod względem rodzaju lub celu treści. Jeśli strona staje się bardzo duża lub jest podzielona na sekcje logiczne, to ma sens, aby umożliwić użytkownikowi szybkie poruszanie się między sekcjami strony. I tutaj bardzo przydatna będzie tak zwana kotwica HTML. Często technika ta jest używana w projekcie nagłówka, aby połączyć go z docelową informacją. Ten rodzaj nawigacji jest wyjątkowo wygodny w użyciu w celach promocyjnych, kierując użytkownika do określonej treści, omijając wszystkie pozostałe.

Aby użyć kotwicy HTML z płynnym przewijaniem, programista musi umieścić w strukturze dokumentu link do biblioteki JavaScript.

Jak tworzyć

Aby umieścić kotwicę HTML na stronie, używany jest standardowy tag linku. Jest to jeden z głównych znaczników w strukturze dokumentu HTML.
Może mieć wiele atrybutów, takich jak href lub nazwa, które wskazują typ łącza opisywany przez ten znacznik. Link do kotwicy HTML różni się od hiperłącza za pomocą symbolu "#". Następnie należy podać unikalną nazwę kotwicy, aby przeglądarka mogła jednoznacznie określić cel przejścia. Niezwykle ważne jest, aby nie zapominać, że w tym samym dokumencie nie można przypisać dwóch identycznych nazw, jednak jest to dopuszczalne na różnych stronach witryny.

Przykład tworzenia kotwicy w strukturze dokumentu

Jak zakotwiczać HTML na stronie? Najpierw musisz wybrać obszar dokumentu, który będzie służył. Może to być podtytuł w dużym tekście. Takie podpozycje są zwykle oznaczone.

Identyfikator kotwicy jest zwykle ustawiany w tagu otwierającym, a atrybut id = służy do jego opisania. Następnie pojawia się unikalna nazwa samej kotwicy. Ten atrybut może być zawarty w prawie każdym otwierającym tagu. Po zakotwiczeniu znacznika HTML na stronie, musimy tylko utworzyć odsyłacz do niego w innej części dokumentu lub w innym dokumencie.

Podpozycje te są zwykle oznaczone.

. Identyfikator kotwicy jest zwykle ustawiany w tagu otwierającym, a atrybut "id =" jest używany do jego opisania. Następnie pojawia się unikalna nazwa samej kotwicy. Ten atrybut może być zawarty w prawie każdym otwierającym tagu. Po ustaleniu nazwy kotwicy html, wszystko co musimy zrobić, to utworzyć łącze do niej w innej części dokumentu lub w innym dokumencie. Odsyłacz do zakotwiczenia w tym samym dokumencie jest często nazywany lokalnym, podczas gdy link do różnych dokumentów jest nazywany absolutnym.

Jednak korzystanie z samego HTML jest trudne do uzyskania płynności w przejściach między kotwicami. Ale takie podejście prowadzi do tego, że użytkownik jest zaplątany w nawigację na stronie lub między stronami, co psuje wrażenie korzystania z zasobu. W przypadku lokalnych punktów kontrolnych znacznie korzystniej jest używać kotwicy HTML z płynnym przewijaniem, aby odwiedzający witrynę mógł wizualnie monitorować kierunek, w którym administracja prowadzi go przez zasób.

Aby stworzyć ten efekt, musisz odwołać się do JavaScript. Zasada działania małego skryptu będzie następująca: przede wszystkim musimy zablokować standardowe zachowanie kotwicy HTML na stronie. Jest to konieczne, aby przeglądarka nie zdecydowała się na przekierowanie użytkownika za pomocą linku. Następnie nasz skrypt przetwarza identyfikator zawarty w tagu . Nazwa zakotwiczenia HTML jest zachowywana, jest wyszukiwana w dokumencie, aby znaleźć miejsce docelowe naszej animacji. Po znalezieniu celu skrypt oblicza odległość od początku strony do najwyższego punktu elementu, do którego się odwołaliśmy. Ta odległość będzie używana do płynnego animowania przewijania strony. Musimy tylko określić szybkość przewijania dla siebie.

Zasada specjalna

Projektując strony internetowe, projektanci powinni zawsze pamiętać, że niewłaściwe jest przeładowanie strony informacjami, ponieważ może to negatywnie wpłynąć na jej postrzeganie. A jeśli chcesz dać użytkownikowi możliwość szybkiego przejścia do ważnej części strony, to nie ma nic prostszego i lepszego do tego celu niż użycie kotwicy HTML. Animacja przejścia między różnymi częściami strony jest realizowana za pomocą kilku linii kodu JavaScript, a jej efekt jest znaczący - użytkownik zawsze będzie wiedział, w której części dokumentu jest i gdzie musi iść dalej.