Strony internetowe nie przypominają żadnego medium komunikacyjnego, które pojawiłoby się przed nimi. Jedną z głównych rzeczy, które odróżniają strony internetowe od poprzednich formatów mediów, takich jak druk, radio, a nawet telewizja, jest koncepcja "hiperłącza".
Hiperłącza, również powszechnie znane jako "linki", są tym, co czyni sieć tak dynamiczną. W przeciwieństwie do drukowanej publikacji, która może odwoływać się do innego artykułu lub innego zasobu, strony internetowe mogą korzystać z tych linków w celu rzeczywistego wysyłania odwiedzających do tych innych stron i zasobów. Żadne inne medium transmisji nie może tego zrobić. Możesz słuchać reklamy w radiu lub oglądać w telewizji, ale nie ma linków, które mogą prowadzić do firm w tych reklamach w sposób, w jaki strona może łatwo zrobić. Linki naprawdę są niesamowitym narzędziem komunikacji i interakcji!
Często linki znajdujące się na stronie internetowej to treść tekstowa, która kieruje użytkowników do innych stron tej samej witryny. Nawigacja w witrynie jest jednym z przykładów linków tekstowych w praktyce, ale linki nie muszą być oparte na tekście. Możesz także łatwo połączyć zdjęcia w swojej witrynie. Spójrzmy, jak to się robi, a następnie kilka przykładów, w których chcesz użyć hiperłączy opartych na obrazie.
Jak połączyć obraz
Pierwszą rzeczą, którą musisz zrobić, to umieszczenie samego obrazu w dokumencie HTML. Często używanym łączem opartym na obrazie jest grafika logo witryny, która jest następnie łączona z powrotem do strony głównej witryny. W naszym przykładowym kodzie poniżej plik, którego używamy, to SVG dla naszego logo. Jest to dobry wybór, ponieważ pozwoli nam skalować obraz dla różnych rozdzielczości, zachowując przy tym jakość obrazu i niewielki ogólny rozmiar pliku.
Oto, jak umieścić obraz w dokumencie HTML:
Wokół znacznika obrazu można teraz dodać link zakotwiczenia, otwierając element zakotwiczenia przed obrazem i zamykając zakotwiczenie po obrazie. Jest to podobne do tego, jak można połączyć tekst, ale zamiast owijać słowa, które mają być łączami do znaczników zakotwiczających, zawijamy obraz. W poniższym przykładzie odwołujemy się do strony głównej naszej witryny, która nazywa się "index.html".
Dodając ten kod HTML do swojej strony, nie umieszczaj spacji między znacznikiem zakotwiczenia a tagiem graficznym. Jeśli to zrobisz, niektóre przeglądarki dodadzą małe tikki obok obrazu, który będzie wyglądał dziwnie.
Obraz logo będzie teraz również działał jako przycisk strony głównej, który jest obecnie standardem sieciowym. Zwróć uwagę, że w naszym kodzie HTML nie uwzględniamy żadnych stylów wizualnych, takich jak szerokość i wysokość obrazu. Zostawimy te style wizualne CSS i zachowamy czysty rozdział struktury HTML i stylów CSS.
Po przejściu do CSS style, które napiszesz, aby kierować tę grafikę logo, mogą obejmować zmianę rozmiaru obrazu, w tym stylów reagujących na obrazy przyjazne dla wielu urządzeń, a także dowolne elementy wizualne, które chcesz dodać do obrazu / łącza, takie jak ramki lub CSS. cienie. Możesz również podać obraz lub połączyć atrybut klasy, jeśli potrzebujesz dodatkowych "haczyków" do użycia ze stylami CSS.
Użyj przypadków dla linków graficznych
Dodanie linku do obrazu jest więc łatwe. Jak już widzieliśmy, wszystko, co musisz zrobić, to owinąć obraz odpowiednimi znacznikami kotwicy. Twoje następne pytanie może brzmieć: "kiedy faktycznie zrobiłbyś to w praktyce poza wymienionym powyżej linkiem logo / strony głównej?"
Oto kilka myśli:
- Obrazy miniatur w galerii, które zawierają linki do większych wersji tych zdjęć.
- Obrazy używane samodzielnie do reprezentowania treści, np. Zdjęcia produktów w witrynie e-commerce.
- Obrazy zwiastuna, które są częścią innych treści, takich jak artykuł na blogu lub komunikat prasowy, które zachęcają ludzi do zauważenia, że zawartość zapewnia im obszar docelowy do kliknięcia lub kliknięcia w celu przeczytania całego artykułu.
- Obrazy ikon, które są używane jako przyciski do łączenia się z określoną funkcją lub stronami w witrynie.
- Łącza w mediach społecznościowych wykorzystujące rozpoznawalne logo różnych witryn społecznościowych, które są ważne dla tej witryny lub firmy.
- Obrazy używane jako przyciski do niektórych funkcji, takie jak przesyłanie formularzy (najważniejsze informacje o praktyce - z perspektywy wydajności witryny, przyciski stylizowane wyłącznie na CSS są lepszym wyborem niż przyciski obrazów).
Przypomnienie podczas korzystania z obrazów
Obrazy mogą odgrywać ważną rolę w sukcesie witryny. Jeden z wyżej wymienionych przykładów wykorzystuje obrazy wraz z innymi treściami, aby zwrócić uwagę na tę treść i skłonić ludzi do jej przeczytania.
Podczas korzystania z obrazów należy pamiętać o wyborze odpowiedniego obrazu do swoich potrzeb, w tym o poprawnej tematyce obrazu, formacie, a także upewnieniu się, że wszystkie obrazy używane w witrynie są odpowiednio zoptymalizowane pod kątem dostarczania witryny. To może wydawać się dużo pracy tylko po to, aby dodać zdjęcia, ale warto to zrobić! Obrazy naprawdę mogą tak wiele dodać do sukcesu witryny.
Nie wahaj się użyć odpowiednich obrazów na swojej stronie i połącz te zdjęcia, gdy potrzebujesz, aby dodać interaktywne treści, ale pamiętaj również o tych najlepszych praktykach graficznych i używaj tych grafik / linków poprawnie i odpowiedzialnie w swoich pracach nad projektowaniem stron internetowych.
