Linki w HTML są kluczowym elementem stron internetowych, umożliwiającym nawigację pomiędzy różnymi stronami i zasobami w sieci. Linki mogą prowadzić do innych stron internetowych (zewnętrzne), do innych części tej samej strony (wewnętrzne), a także można je umieszczać w ramach obrazków czy kotwic. W tej lekcji omówimy różne rodzaje linków oraz nauczymy się je implementować.
Linki zewnętrzne
Linki zewnętrzne prowadzą do stron internetowych poza naszą witryną. Stosujemy je, gdy chcemy odwołać się do innej witryny. Do tworzenia linków używamy znacznika <a>, a adres strony internetowej podajemy w atrybucie href.
Przykład:
<a href="https://www.example.com">Odwiedź Example.com</a>
Ćwiczenie 1: Tworzenie linków zewnętrznych
Utwórz prostą stronę HTML, na której zamieścisz linki prowadzące do trzech różnych zewnętrznych stron internetowych. Użyj opisów tekstowych dla każdego linku, które będą wyjaśniać, do jakiej strony prowadzi dany link, zadbaj aby jeden z linków otwierał się w nowej karcie.
Linki wewnętrzne
Linki wewnętrzne prowadzą do innych podstron tej samej witryny lub innego miejsca na tej samej stronie. Są one przydatne w nawigacji wewnątrz witryny, umożliwiając użytkownikowi łatwe poruszanie się pomiędzy różnymi częściami serwisu.
Przykład:
<a href="strona2.html">Przejdź do Strony 2</a>
Ćwiczenie 2: Tworzenie linków wewnętrznych
Stwórz dwie strony HTML. Na pierwszej stronie umieść link, który przekieruje użytkownika do drugiej strony. Na drugiej stronie umieść link, który powróci na pierwszą stronę.
Kotwice (anchor links)
Kotwice to specjalny rodzaj linków wewnętrznych, które pozwalają na przejście do konkretnej sekcji tej samej strony. Są szczególnie przydatne na długich stronach, gdzie użytkownik chce szybko przejść do wybranego miejsca.
Przykład:
Najpierw musimy stworzyć element, do którego odwołujemy się za pomocą kotwicy:
<a id="sekcja1"></a>
<h2>Sekcja 1</h2>
Następnie tworzymy link, który przenosi nas do tej sekcji:
<a href="#sekcja1">Przejdź do Sekcji 1</a>
Ćwiczenie 3: Tworzenie kotwic
Utwórz stronę HTML, która zawiera trzy różne sekcje tekstu. Dodaj linki na początku strony, które pozwolą na szybkie przejście do każdej z tych sekcji. Dodaj również linki powrotne na każdej sekcji, aby użytkownik mógł wrócić na górę strony.
Linki pod obrazkiem
Linki mogą być również osadzone w obrazkach, co oznacza, że kliknięcie w obrazek przeniesie użytkownika do określonej strony. Aby to osiągnąć, wystarczy wstawić obrazek wewnątrz znacznika <a>.
Przykład:
<a href="https://www.example.com">
<img src="obrazek.jpg" alt="Kliknij, aby przejść do Example.com">
</a>
Ćwiczenie 4: Tworzenie linków pod obrazkiem
Utwórz stronę HTML, na której zamieścisz trzy różne obrazy. Każdy z nich będzie prowadził do innej zewnętrznej strony internetowej. Zadbaj o poprawne użycie atrybutu alt, opisującego każdy z obrazów.
Podsumowanie
W tej lekcji nauczyliśmy się, jak tworzyć różne rodzaje linków w HTML. Przedstawione zostały linki zewnętrzne, wewnętrzne, kotwice oraz linki osadzone w obrazkach. Teraz czas, abyś przećwiczył te techniki, wykonując odpowiednie ćwiczenia.