logo-tworzenie-stron-legnica

config

Strona w trakcie modernizacji

Zapraszamy wkrótce

Elementy (tagi, znaczniki) HTML

Tag (znacznik) img

Definicja elementu (tagu), przeznaczenie i użycie img

Znacznik img służy do osadzania obrazu na stronie HTML.

Obrazy nie są technicznie wstawiane na stronę internetową; obrazy są połączone ze stronami internetowymi. Znacznik img tworzy przestrzeń do przechowywania przywoływanego obrazu.

Tag img ma dwa wymagane atrybuty:

  • src - określa ścieżkę do obrazu.
  • alt - określa alternatywny tekst dla obrazu, jeśli obraz z jakiegoś powodu nie może zostać wyświetlony.

Uwaga: Zawsze określaj również szerokość i wysokość obrazu. Jeśli szerokość i wysokość nie zostaną określone, strona może migotać podczas ładowania obrazu.

Tip: Aby połączyć obraz z innym dokumentem, wystarczy zagnieździć znacznik img wewnątrz znacznika a (patrz przykład poniżej).

Atrybuty elementu (tagu) img

Atrybut Wartość Opis
alt text Określa alternatywny tekst dla obrazu.
crossorigin anonymous
use-credentials
Zezwala na używanie obrazów z witryn innych firm, które umożliwiają dostęp między źródłami w kanwie.
height pixels Definiuje wysokość obrazu.
ismap ismap Definiuje obraz jako mapę obrazu po stronie serwera.
loading eager
lazy
Określa, czy przeglądarka powinna wczytywać obraz natychmiast, czy też odkładać ładowanie obrazów do czasu spełnienia pewnych warunków.
longdesc URL Określa adres URL do szczegółowego opisu obrazu
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
Definiuje, które informacje o stronie odsyłającej mają być używane podczas pobierania obrazu.
sizes sizes Definuje rozmiary obrazów dla różnych układów stron.
src URL ustala ścieżkę do obrazu.
srcset URL-list Definiuje listę plików graficznych do użycia w różnych sytuacjach.
usemap #mapname Określa obraz jako mapę obrazu po stronie klienta.
width pixels Ustawia szerokość obrazu.

 

Wsparcie przeglądarek dla elementu (tagu) img

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą element img.

Element (tag) chrome edge firefox safari opera
img Tak Tak Tak Tak Tak

 

Przykładowe zastosowania elementu (tagu) img

 

Przykłady elementu img

Przykład 1

Wyrównanie obrazu z CSS:

vertical-align: bottom
Wyrównanie obrazu do dolej części elementów.

To jest tekst. Buźka To jest tekst. To jest tekst. To jest tekst.

 

vertical-align: middle
Wyrównanie obrazu do środkowej części elementów.

To jest tekst. Buźka To jest tekst. To jest tekst. To jest tekst.

 

vertical-align: top
Wyrównanie obrazu do górnej części elementów.

To jest tekst. Buźka To jest tekst. To jest tekst. To jest tekst.

 

float: right
Ustawienie obrazu z prawej strony.

To jest tekst. Buźka To jest tekst. To jest tekst. To jest tekst.

 

float: left
Ustawienie obrazu z lewej strony.

To jest tekst. Buźka To jest tekst. To jest tekst. To jest tekst.

 

Przykład 2

Dodanie obramowania obrazu z CSS:

Buźka

 

Przykład 3

Dodadanie lewego i prawego marginesu do obrazu z CSS:

Buźka

 

Przykład 4

Dodadanie górnego i dolnego marginesu do obrazu z CSS:

Buźka

Przykład 5

Jak wstawić obrazy z innego folderu lub z innej witryny internetowej?

Buźka Buźka

 

Przykład 6

Jak dodać link do obrazu?

Buźka

 

Witold Czuba Tworzenie stron Warszawa, Wrocław i Legnica | Grafik | Strony , , Marynarska 54, 59-220, Legnica, dolnośląskie, Polska, tel. +48 780 060 995, Pon. - pt. 8:00 - 17:00

 

 

Witold Czuba

Tworzenie stron Warszawa, Wrocław i Legnica | Grafik | Strony

Marynarska 54
59-220, Legnica,
dolnośląskie, Polska,
tel. +48 780 060 995,
Pon. - pt. 8:00 - 17:00