Przykład 1

Obrazek p1.gif , obrazek p1.jpg
Różnice w kolorystyce wynikają z zmiany koloru przy zapisie gif. Program wykonujący to zmienił paletę na 256 kolorową.

Przykład 2

Obrazek p1.gif powiększony do 50% rozmiarów ekranu (na szerokość).

Przykład 3

Obrazek p2.gif wykadrowany i powiększony do 50% rozmiarów ekranu. Tu widać wyraźnie ziarnistość obrazu źródłowego. W takiej sytuacji należałoby obraz źródłowy zrobić w większej rozdzielczości.

Przykład 4

Obrazek p2.gif w wielkości naturalnej. Wyraźnie widać, że tło jest przeźroczyste.

Przykład 5

Obrazek p200.gif wykonany ze złożenia kilku obrazków.

Przykład 8

Obrazek p1.gif umieszczony został z prawej. Obrazek został wklejony znacznikiem <img src="p1.gif" align="right" width=70%> Wielkość została dobrana tak duża aby pokazać jak tekst oblewa rysunek.

Przykład 9

Tutaj powyżej słów "Przykład 9" musiałem dać <br clear="all">. Inaczej tekst byłby w dalszym ciągu obok obrazka z przykładu 8.

tekst przed obrazkiem

tekst pod obrazkiem.

Przykład jest w całości wycentrowany dzięki użyciu znacznika <center>

Przykład 10

A tu daję umieszczenie obrazka, którego nie ma: tu powinien być obrazek

Przykład 11

<img src="p1.gif" border=0>

<img src="p1.gif" border=1>

<img src="p1.gif" border=2>

Przykład 12

Tu poniżej znajduje się malutki obrazek typu GIF o rozmiarach 1x1. Rozciągnięty został znacznikiem: <img src="p5.gif" height=5 width=100%>

Przykład 13

A teraz odwrotnie, linia pozioma. <img src="p5.gif" height=300 width=5 align="left">

Jak pokazałem powyżej, aby zlikwidować oblewanie obrazka tekstem (czyli przejść poniżej obrazka) należy użyć znacznika <br clear="all">. A tu jest jeszzcze obrazek p1.gif