linkowanie obrazu w HTML: jak tworzyć linki z obrazów
przyjrzymy się początkującym, jak tworzyć linki do obrazów na swojej stronie internetowej.
przyjrzymy się, jakich znaczników HTML należy użyć w kodzie.
Jeśli nigdy wcześniej tego nie robiłeś, nie martw się! Poprowadzę Cię przez cały proces.
pod koniec tego artykułu będziesz tworzyć linki do obrazów na całej swojej stronie internetowej i w Internecie.,
pod koniec artykułu przyjrzymy się również bardziej zaawansowanym technikom, jeśli czujesz się odważny.
napij się kawy, zanurz się!
Jak utworzyć hiperłącze?
aby uzyskać linki na stronie głównej musisz utworzyć hiperłącze. Aby to zrobić w HTML musisz użyć znacznika <a>. Każdy znacznik <a> ma dwie części znacznika otwarcia i zamknięcia.,
oto przykład:
<a href="..."> ...</a>w powyższym przykładzie można zobaczyć, że otwarty tag:
<a href="...">
tworzy początek hiperłącza. Następnie zamykamy znacznik za pomocą:
</a>
każdy tekst, który piszemy między znacznikiem Otwórz i zamknij, jest tekstem Twojego linku. Na przykład:
<a href="..."> My Great Link</a>aby zamienić to w link musimy dodać URL. W tym celu dodajemy adres URL do atrybutu href., Adres URL może wskazywać na dowolne miejsce w Internecie. W tym przykładzie użyjemy strony głównej PageDart:
<a href="https://pagedart.com"> My Great Link</a>upewnij się, że zawiera pełny adres URL z HTTPS z przodu.
to wszystko, co istnieje, aby utworzyć link tylko tekstowy w HTML. Następnie przyjrzyjmy się, jak możemy dodać obraz do strony internetowej za pomocą HTML.
Jak stworzyć obrazek w HTML?
aby dodać obrazek do swojej strony użyj znacznika img.,
ten znacznik różni się nieco od znacznikaa tym, że nie ma znacznika otwierania i zamykania.
aby utworzyć znacznikimg należy nadać znacznikowi plik źródłowy. Użyj atrybutu src aby to zrobić:
<img src="https://pagedart.com/favicon-32x32.png">spowoduje to dodanie obrazu na ekranie w następujący sposób:
teraz mamy obrazek, który musimy przekształcić w link., Aby to zrobić, musimy dodać znacznik<img> wewnątrz znaczników<a> tworząc obraz łączący w HTML.
przyjrzyjmy się dalej przykładowi.
obraz jako łącze
aby zamienić obraz w łącze, musisz dodać znacznik<img> wewnątrz znacznika<a>., Więc biorąc nasz wcześniejszy przykład kod źródłowy wyglądałby tak:
<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"></a>który stworzyłby ten kod HTML:
dodając <img> znacznik wewnątrz znacznika <a> przeglądarka może zobaczyć, że obraz powinien być klikalny. Zamieniłeś obraz w link!
Jeśli korzystasz z WordPressa, możesz dodać ten kod HTML do swojej strony za pomocą widoku tekstowego w edytorze stron.
Możesz również dodać tekst i obrazy wewnątrz linku, spójrzmy na to.,
obraz i tekst jako Link
powyższy przykład pokazał, jak dodać tylko obraz jako link.
Co by było gdybyśmy chcieli dodać do linku obrazek i tekst.
dobrze, w tym przypadku, musimy upewnić się, że dodajemy tekst przed zamknięciem <a> tag:
<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"> PageDart Home </a>w powyższym dodaliśmy „PageDart Strona główna” wewnątrz znacznika <a> wraz z znacznikiem <img>., Gdy wyświetlany w przeglądarce internetowej na stronie będzie wyglądał tak:
na znaczniku<img> jest jeszcze jeden atrybut, o którym nie rozmawialiśmy i którego powinieneś używać.
jest to atrybutalt.
linki do obrazów i atrybut Alt
obrazy w Internecie powinny mieć atrybutalt. Jest to tekstowy opis obrazu.
czytniki ekranu korzystają z tekstu alternatywnego, aby pomóc użytkownikom niedowidzącym. Czytniki ekranu odczytają opis tekstowy, gdy znajdzie obraz.,
aby to zrobić, dodajemy atrybut alt atrybut img znacznik taki:
<a href="https://pagedart.com"> <img alt="PageDart.com" src="https://pagedart.com/favicon-32x32.png"></a>teraz jak czytnik ekranu przeczyta ten obrazek to powie „PageDart.com” na głos.
ważne jest, aby stosować się do najlepszych praktyk podczas pisania tekstu alt obrazu.
upewnij się, że myślisz o osobie, która korzysta z czytnika ekranu. Napisz dla nich opis tekstu alternatywnego i opisz obraz najlepiej jak potrafisz.
to wszystko, czego potrzebujesz, aby utworzyć obrazy łączące w HTML., Jednak istnieje kilka bardziej zaawansowanych technik, które można wykorzystać. Jeśli czujesz się odważny, przyjrzymy się tym następnym.
Technika zaawansowana: obraz jako Link za pomocą CSS
bardziej zaawansowaną techniką jest użycie CSS. CSS oznacza kaskadowy arkusz stylów i pozwala zmienić wygląd strony HTML.
za pomocą CSS możesz ustawić obraz tła na elemencie takim jak nasz znacznik <a>.,
tutaj mamy HTML, który wygląda tak:
<style> a { background-image: url("https://pagedart.com/favicon-32x32.png"); display: block; height:32px; width:32px; }</style><a href="https://pagedart.com"></a>więc tym razem nie ma nic wewnątrz znacznika <a> ale obraz jest ustawiony za pomocą stylu CSS. W przeglądarce wyświetli się następujący tekst:
możemy użyć podobnej techniki z tagiem<button>.
Technika zaawansowana: użycie przycisku
w tym przykładzie użyjemy znacznika<button> zamiast znacznika<a>.,
możemy utworzyć to samo wyjście jak w powyższym przykładzie używając tego HTML:
który tworzy to wyjście:
tutaj używamy JavaScript, aby otworzyć nową kartę przeglądarki. Wysyłanie użytkownika na stronę główną PageDart.
nie mam pojęcia, dlaczego w ogóle to zrobiłeś! Ale chciałem pokazać, co jest możliwe i jak elastyczny może być HTML, CSS i JavaScript.
ostatni przykład, który pokażę, to użycie mapy obrazkowej.
Technika Zaawansowana: mapa obrazów
mapy obrazów to pojedyncze obrazy z klikalnymi obszarami., Straciły popularność na przestrzeni lat, ale nadal są częścią specyfikacji HTML5. Oznacza to, że przeglądarki takie jak Internet Explorer, Chrome i Safari będą je obsługiwać.
wykresy są dobrymi przykładami map graficznych, takich jak wykresy organizacyjne, takie jak:
następnie, aby każdy Różowy obszar był klikalnym linkiem, utworzymy map w ten sposób:
dodaliśmy atrybut usemap do znacznika img.,
następnie wmap znacznik mamyarea znacznik. Każdy z tych obszarów tworzy obszar klikalny, który działa jak przycisk.
Korzystanie z obrazu łączącego w HTML
przyjrzeliśmy się pięciu różnym sposobom dodawania obrazu jako łącza na twojej stronie internetowej:
- obraz jako łącze
- obraz i tekst jako łącze
- używanie CSS do ustawiania obrazu jako łącza
- używanie przycisku jako łącza
- korzystanie z map obrazów
wszystko to może zmienić obrazy w łącza. Powinieneś teraz mieć pewność siebie, aby spróbować tego samemu.,
przyjrzeliśmy się również dostępności i sposobowi ustawiania tekstu alternatywnego, aby pomóc osobom niedowidzącym.