Wprowadzenie do Image Link w HTML

Link do obrazu w HTML znajduje się na prawie wszystkich stronach, ponieważ pomagają nam przechodzić z jednej strony na drugą w witrynie. Popularną kombinacją jest użycie znacznika kotwicy HTML ze znacznikiem img HTML . Dzięki tej kombinacji możemy zezwolić na przenoszenie użytkowników z jednej strony na drugą poprzez kliknięcie obrazu. Zanim przejdziemy dalej na ten temat, najpierw zrozummy działanie i renderowanie elementów kotwicy i obrazu osobno, a następnie połączmy je, aby uzyskać połączony obraz.

Tag kotwicy HTML

Tag HTML Anchor służy do tworzenia hiperłączy HTML do innych stron internetowych lub treści multimedialnych hostowanych w Internecie. Odwołajmy się do poniższej składni, aby zrozumieć, jak działają tagi kotwiczne i ich podstawowe atrybuty

Kliknij tutaj!!

W powyższym przykładzie atrybut „href” określa adres URL strony, na którą chcielibyśmy przekierować użytkownika, klikając tekst „Kliknij tutaj !!”.

Zobaczmy pełny kod poniżej:

Wynik

->

Na powyższym przykładzie będziesz mógł dokonać następujących obserwacji

  1. Nieodwiedzony link pojawi się podkreślony i na niebiesko. Na przykład To jest nieodwiedzony link
  2. Odwiedzony link pojawi się podkreślony i w kolorze fioletowym. Na przykład To jest już odwiedzony link
  3. Aktywny link jest podkreślony i ma czerwony kolor. Na przykład To jest aktywny link

Tag obrazu HTML

Podczas przeglądania Internetu jestem pewien, że musiałeś natknąć się na kilka stron internetowych, które zawierają różne formy multimediów. Zwłaszcza obrazy są popularną formą multimediów, które można dziś znaleźć na prawie wszystkich interaktywnych stronach internetowych. Pozwól nam zrozumieć tag obrazu i jego implementację w HTML na poniższym przykładzie:

Składnia

Pozwól nam zrozumieć, jak działa każdy z atrybutów w znaczniku img:

  1. src: Atrybut src określa ścieżkę do pliku obrazu, który próbujemy załadować za pomocą tego znacznika. Może to być link do obrazu hostowanego w Internecie w formacie np. Przyklad.com/images/dummy.png.webp lub plik obrazu hostowany lokalnie na tym samym serwerze, co strona internetowa.
  2. alt: atrybut alt określa tekst i opis obrazu, który chcielibyśmy wyświetlić w przypadku, gdy obrazy nie zostaną załadowane z powodu połączenia sieciowego lub innego problemu.
  3. Szerokość i wysokość: szerokość i wysokość obu atrybutów określają szerokość i wysokość obrazu, który chcielibyśmy wyświetlić na stronie internetowej. W przeciwnym razie obraz będzie działał z domyślnie 100% wysokością i szerokością.

Zobaczmy teraz pełny kod HTML wymagany do załadowania obrazu na stronie internetowej. Zapisz następujący obraz pod nazwą „sunset.png.webp” w folderze o nazwie „image_test” na dysku lokalnym.

Teraz w tym samym folderze utwórzmy plik HTML o nazwie sunset.html z następującym kodem HTML:

Teraz przejdź do przeglądarki na swoim komputerze i wpisz ścieżkę do pliku .html. Moje pliki są przechowywane na dysku D, więc ścieżka będzie dla mnie

D: /image_test/sunset.html

A teraz widzimy, że renderowana strona HTML załadowała obraz zachodu słońca w naszej przeglądarce. Z pomocą CSS i

tag, możemy również wyświetlać tekst zgodnie z naszymi wymaganiami wokół obrazu. Zarówno tagi anchor, jak i img są kompatybilne ze wszystkimi przeglądarkami, takimi jak Google Chrome, Safari, Microsoft Edge, Firefox i Internet Explorer.

Połączone obrazy w HTML

Po zapoznaniu się z przykładami, w jaki sposób tag zakotwiczenia i tag graficzny działają indywidualnie, pozwól nam zrozumieć, w jaki sposób możemy połączyć te dwie funkcje, aby osiągnąć scenariusz, w którym użytkownicy powinni zostać przekierowani na nową stronę internetową po kliknięciu obrazu . Aby obraz można było kliknąć i przekierować użytkownika na inną stronę, wystarczy zagnieździć obraz w tagu kotwicy. W poniższym przykładzie postaramy się zapisać 3 najlepsze wyszukiwarki internetowe używane na całym świecie. Na naszej liście pokażemy logo 3 wyszukiwarek, a po kliknięciu dowolnego z logo użytkownik zostanie przekierowany na odpowiednią stronę wyszukiwarki. Utwórzmy folder o nazwie „test przekierowania” i w tym samym folderze zapiszmy poniższe obrazy

1. Google

2. Yahoo

3. Bing

Teraz utworzymy plik .html o nazwie imageredirection.html w tym samym pliku. Plik imageredirection.html będzie zawierał następujący kod

Teraz musimy uzyskać dostęp do strony HTML z przeglądarki, dla której wpiszę ścieżkę lokalną „D: / redirectiontest / imageredirection.html”. przeglądarka wyświetli plik HTML, aby wygenerować następujący wynik:

->

Użytkownicy będą mogli przejść do odpowiedniej wyszukiwarki, klikając swoje logo. Z powyższego przykładu możemy zauważyć, że HTML jest prostym i elastycznym językiem, który pozwala nam łączyć wiele tagów razem i osiągnąć tak złożoną funkcjonalność. Kombinacja używania img i tagu kotwicy jest popularną kombinacją. Dzięki dodatkowemu kodowaniu HTML możemy również dodawać różne elementy HTML, takie jak wyświetlanie połączonych obrazów na uporządkowanej lub nieuporządkowanej liście przy użyciu

    lub
      . Niezwykła elastyczność i prostota, jaką zapewnia HTML przy każdej wydanej wersji, pomaga projektantom interfejsu użytkownika i interfejsu użytkownika w projektowaniu interaktywnych i intuicyjnych stron internetowych, które widzimy podczas przeglądania Internetu podczas codziennych czynności.

      Polecany artykuł

      To był przewodnik po Image Link w HTML. Tutaj omawiamy różne typy tagów HTML wraz ze składnią. Możesz także przejrzeć nasze inne sugerowane artykuły, aby dowiedzieć się więcej -
      1. Atrybuty HTML
      2. Tagi w formacie HTML
      3. Zalety HTML
      4. Tagi graficzne HTML
      5. Ramki HTML
      6. Bloki HTML
      7. Ustaw kolor tła w HTML za pomocą przykładu
      8. Lista uporządkowana HTML | Rodzaje atrybutów ze składnią

Kategoria:

Narzędzia programistyczne