Elementy (tagi, znaczniki) HTML, dokumentacja HTML

Alfabetyczny spis tagów HTML

Alfabetyczny spis elementów HTML, lista znaczników HTML, przykłady podstawowych tagów HTML, ściąga HTML.

– niezalecany.

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)
img	Tak	Tak	Tak	Tak	Tak

Przykładowe zastosowania elementu (tagu) img

<p><strong>vertical-align: bottom</strong></p>
<p>Wyrównanie obrazu do dolej części elementów.</p>
<p>To jest tekst. <img src="/images/kurs-style-css/smiley.png" alt="Buźka" width="42" height="42" style="vertical-align: bottom;" /> To jest tekst. To jest tekst. To jest tekst.</p>

<p><strong>vertical-align: middle</strong></p>
<p>Wyrównanie obrazu do środkowej części elementów.</p>
<p>To jest tekst. <img src="/images/kurs-style-css/smiley.png" alt="Buźka" width="42" height="42" style="vertical-align: middle;" /> To jest tekst. To jest tekst. To jest tekst.</p>

<p><strong>vertical-align: top</strong</p> yrównanie obrazu do górnej części elementów.</p>
<p>To jest tekst. <img src="/images/kurs-style-css/smiley.png" alt="Buźka" width="42" height="42" style="vertical-align: top;" /> To jest tekst. To jest tekst. To jest tekst.</p>

<p><strong>float: right</strong><p>
<p>Ustawienie obrazu z prawej strony.</p>
<p>To jest tekst. <img src="/images/kurs-style-css/smiley.png" alt="Buźka" width="42" height="42" style="float: right;" /> To jest tekst. To jest tekst. To jest tekst.</p>

<p><strong>float: left</strong></p>
<p>Ustawienie obrazu z lewej strony.</p>
<p>To jest tekst. <img src="/images/kurs-style-css/smiley.png" alt="Buźka" width="42" height="42" style="float: left;" /> To jest tekst. To jest tekst. To jest tekst.</p>

<h4>Przykład 2</h4>
<p>Dodanie obramowania obrazu z CSS:</p>
<img src="/images/kurs-style-css/smiley.png" alt="Buźka" width="42" height="42" style="border: 1px solid black;" />

<h4>Przykład 3</h4>
<p>Dodadanie lewego i prawego marginesu do obrazu z CSS:</p>
<img src="/images/kurs-style-css/smiley.png" alt="Buźka" width="42" height="42" style="vertical-align: middle; margin: 0px 50px;" />

<h4>Przykład 4</h4>
<p>Dodadanie górnego i dolnego marginesu do obrazu z CSS:</p>
<img src="/images/kurs-style-css/smiley.png" alt="Buźka" width="42" height="42" style="vertical-align: middle; margin: 25px 0px;" />

<h4>Przykład 5</h4>
<p>Jak wstawić obrazy z innego folderu lub z innej witryny internetowej?</p>
<img src="/images/kurs-style-css/smiley.png" alt="Buźka" width="42" height="42" /> 
<img src="https://tworzenie-stron-www-wroclaw.pl/images/kurs-style-css/smiley.png" alt="Buźka" width="42" height="42" />

<h4>Przykład 6</h4>
<p>Jak dodać link do obrazu?</p>
<a href="https://tworzenie-stron-www-wroclaw.pl/"> <img src="/images/kurs-style-css/smiley.png" alt="Buźka" width="42" height="42" /> </a>