Jak używać obrazu jako linku w HTML

HTML to język używany w projektowaniu i tworzeniu stron internetowych. Według użycia jedynego HTML możemy tworzyć statyczne strony internetowe. Wyrównanie i projektowanie odbywa się za pośrednictwem CSS. Podobnie jak inne języki programowania, istnieją również kody/polecenia znane jako znaczniki. Te tagi są napisane w nawiasach kątowych.

Możemy znaleźć niektóre interaktywne wbudowane modułowe strony internetowe, które wykorzystują tylko podejście przeciągnij i upuszczają, które składają się z HTML. Możemy dodać wiele elementów w HTML, takich jak tekst, obrazy, filmy itp. Każdy element ma osobny znacznik napisany wewnątrz korpusu znacznika HTML. HTML ma wiele funkcji do zastosowania. Jeden z nich jest linkiem. Link to funkcja, która zamienia bieżącą stronę w inną. Linkiem stojącym za obrazem jest dzisiejszy temat, który należy wyjaśnić tutaj.

Wymagane niezbędne

Istnieją dwa podstawowe narzędzia używane do wdrażania kodu HTML.

• Edytor tekstu
• Przeglądarka

Jedno narzędzie jest używane jako narzędzie wejściowe, podczas gdy drugi działa jako oprogramowanie wyjściowe. W edytorze tekstu piszemy kod, który ma zostać uruchomiony na drugim oprogramowaniu. Ten edytor działa jako narzędzie wejściowe. Z drugiej strony przeglądarka działa jako narzędzie wyjściowe. Jest to platforma, która uruchamia kod HTML zapisany w edytorze.

Ponieważ wykonujemy to zadanie w systemie Windows, edytor tekstu jest domyślnie Notatnik. Możesz użyć wzniosłego, notatnika ++ itp. podczas gdy przeglądarka jest Internet Explorer. Ale w naszym przewodniku użyjemy Google Chrome i Notate, które są łatwo dostępne.

Podręcznik HTML

Jeśli chcemy rozwinąć koncepcję linku na obrazie, najpierw musimy zrozumieć działanie HTML. Ciało HTML jest podzielone na dwie części. Jeden to głowa, a druga to ciało. Część główna jest napisana jako pierwsza. W tej części dołączamy tytuł strony internetowej. Część funkcjonalna jest znana jako część ciała HTML. Ponieważ wszystkie właściwości HTML są tutaj zdefiniowane.

Wszystkie znaczniki, w tym HTML, mają znaczniki otwierające i zamykające. Kod HTML zapisany w notatnikach jest zapisywany zarówno w rozszerzeniach Notate, jak i Przeglądarki. .rozszerzenie TXT, jest zapisywane jako kod, podczas gdy w przypadku HTML jest zapisywane dla przeglądarki. Plik edytora tekstu musi być zapisany z rozszerzeniem HTML. Na przykład link.html. Następnie zobaczysz, że plik jest zapisywany z ikoną bieżącej przeglądarki, której używasz do tego celu.

…
… .

Poniższy obraz to przykładowy kod HTML. W części głównej dodaliśmy nazwę tytułu strony. A w części ciała dodaje się zwykły tekst.

Tworzenie prostego hiperłącza

Być może zaobserwowałeś linki na stronach internetowych w postaci tekstu lub obrazu. Są one opracowywane przy użyciu hiperłączy w kodzie HTML. To jest cecha zarówno statycznych, jak i dynamicznych stron internetowych. Ma zarówno tagi otwierania, jak i zamykające. jest znany jako znacznik kotwicy. Składnia jest podana poniżej.

…

HREF jest w celu odniesienia do strony. Tutaj piszemy adres tej konkretnej witryny lub strony internetowej, na której chcemy iść, klikając link. Podczas gdy wewnątrz ciała znacznika kotwicy piszemy tekst, z którym chcemy połączyć. Na przykład użyliśmy tekstu poniżej.

https: // linuxhint.com”>
Mój wspaniały link

Pisząc adres, widać, że jest on automatycznie podkreślony, a jego kolor jest zmieniany. Implikuje różnicowanie między prostym tekstem a hiperłączem. Podczas gdy w ciele użyliśmy prostego zdania. Rozważ powyższy przykład w stanie roboczym.

Jak napisaliśmy ten kod w notatniku, teraz uruchomimy go, aby uzyskać wyjście z przeglądarki.

Ze wyjścia możesz zauważyć, że dodany tekst jest podkreślony, co pokazuje, że jest to link. Gdy unosimy wskaźnik myszy do łącza, wskaźnik jest przekonwertowany w symbol dłoni.

Znacznik obrazu w HTML

Obraz jest podstawową zawartością HTML. Jest używany określony tag. Tag obrazu jest nieco inny niż inne tagi. Ponieważ nie zawiera w nim tagów otwierających i zamykania. Obraz może być dodany bezpośrednio z systemu lub Internetu. Źródło obrazu jest wspomniane. W źródle dodajesz lokalizację/adres obrazu, albo jest on w dowolnym folderze, albo umieszczony na dowolnej stronie internetowej.

< img src = “c:\users\USER\DESKTOP\13.png”>

Tutaj znacznik obrazu jest . „SRC” oznacza źródło. To jest ścieżka obrazu z rozszerzeniem pliku.

Zobacz dane wyjściowe poniżej.

Obraz i link

Połącz stronę internetową z obrazem

Musiałeś natknąć się na strony internetowe, szczególnie w sklepach internetowych lub na stronach internetowych zakupów. Istnieje mnóstwo obrazów, które otwierają się na innej stronie po kliknięciu. Dodajemy link do obrazu lub łącząc dwie strony za pomocą linku. Ta strona może być stroną statyczną lub dynamiczną. Potrzebujemy w nim dwóch elementów. Jeden to znacznik obrazu, a drugi to znacznik linku.

Kod obrazu jest dodawany do znacznika kotwicy, ponieważ chcemy, aby obraz działał jak link. Poniżej znajduje się kompletny kod HTML.

Teraz wykonamy ten kod w Google Chrome.

Przez obraz nie będzie możliwe dokładne wyjaśnienie. Ale kiedy ćwiczysz, zobaczysz, że po unoszeniu myszy obraz pokazuje rękę wskaźnika, pokazując go jako link. Po kliknięciu obrazu otworzy się na stronie internetowej, której adres jest wspomniany w części odniesienia. Poniższa strona internetowa zostanie otwarta.

Połącz statyczną stronę internetową z obrazem

Jeśli chcesz dodać statyczną stronę internetową w kodzie, po prostu zastąp adres strony internetowej na stronie obecnej w systemie.

< a href = “sample.html”>

W przeglądarce zobaczysz, że otwierana jest statyczna strona próbki, której adres został podany wewnątrz znacznika.

Atrybut alt i link do obrazu

Ten atrybut pomaga w opisaniu czegoś na temat obrazu. Jest to wyświetlane tylko wtedy, gdy z jakiegoś powodu obraz nie jest ładowany lub połączenie internetowe może być powolne. Wyświetlany jest więc ten opis, który pomaga czytelnikowi wiedzieć coś o obrazie lub stronie internetowej.

< img alt= “image is not available” src= “C:\users\USERS\DESKTOP\13.png”>

To jest tag. Atrybut alt jest zapisany wewnątrz znacznika IMG.

Dane wyjściowe pokazano poniżej, które pokazuje tekst alternatywy dla obrazu.

Wniosek

W tym artykule użyliśmy prostych tagów zarówno linku, jak i obrazu. Używamy również obrazu jako linku z wieloma przykładami. Może istnieć wiele sposobów rozwinięcia tej koncepcji. W tym przewodniku wspomnieliśmy kilka łatwych przykładów.