Do wstawiania ilustracji na stronę WWW służy znacznik <IMG>.

<IMG SRC="lokalizacja grafiki">, gdzie lokalizacja grafiki to ścieżka dostępu oraz nazwa pliku znajdującego się na serwerze.

Bez dodatkowych atrybutów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Można użyć wiele parametrów, które zmienią położenie, wielkość i inne cechy obrazka.

Dzięki atrybutowi BORDER można ustalić grubość obramowania.

<IMG SRC="obrazek.gif" BORDER=0>

Przykład:

<IMG SRC="obrazek.gif" BORDER="0">

<IMG SRC="obrazek.gif" BORDER="2">

UWAGI:
• Do zlikwidowania cienkiego niebieskiego obramowania wokół grafiki wykorzystywanej w połączeniach należy podać wartość BORDER=0.
• Kolor obramowania nie możne być zmieniony.

W przeglądarkach, które nie obsługują grafiki lub użytkownik sam wyłączy taką funkcję, zamiast ilustracji mogą wyświetlać się teksty zastępcze. Służy do tego atrybut ALT w znaczniku IMG. W systemie Windows tekst zastępczy (ang. alternative text) jest wyświetlany w postaci "dymku", po tym jak wskaźnik myszy zatrzyma się na obrazkiem.

<IMG SRC="obrazek.jpeg" ALT="">, pomiędzy cudzysłowami należy wpisać tekst, który ma być wyświetlony

Przykład:

<IMG SRC="obrazek.jpeg" ALT="To jest obrazek ">

Czasem umieszczenie na stronie WWW ilustracji o dużych rozmiarach może nie być korzystne dla użytkowników, którzy nie mają szybkich łącz internetowych. Dlatego dobrym rozwiązaniem jest stworzenie miniatury ilustracji, która będzie się szybko wyświetlać, i dopisać do niej hiperłącze do dużego obrazka.

<A HREF="lokazlizacja obrazka"><IMG SRC="lokalizacja miniatury"></A>

Można otaczać obrazek tekstem dzięki atrybutowi ALIGN przybierającemu wartości left lub right.

<IMG SRC="lokalizacja obrazka" ALIGN=otaczanie>

ALIGN=right, aby dosunąć obrazek do prawej krawędzi strony i otoczyć go tekstem z lewej.

<IMG SRC="obrazek.gif" ALIGN=right>

ALIGN=left, aby dosunąć obrazek do lewej krawędzi strony i otoczyć go tekstem z prawej

<IMG SRC="obrazek.gif" ALIGN=left>

Obrazek otoczony tekstem przesuwa cały następujący po nim tekst, dopóki linia nie zostanie w specjalny sposób zakończona znacznikiem BR z atrybutem CLEAR. Powoduje on przerwanie otaczania obrazka z wybranej strony i wyświetlenie kolejnego tekstu w następnej linii.

<BR CLEAR=left>, tekst nie będzie wypisywany aż do końca ilustracji przesuniętej w lewo.

Przykład:

<BR CLEAR=right>, tekst nie będzie wypisywany aż do końca ilustracji przesuniętej w prawo.

Przykład:

<BR CLEAR=all>, aby tekst nie był wypisywany aż do końca ilustracji (przesunietych w lewo i w prawo).

Przykład:

Zarówno przeglądarka Netscape jak i Internet Explorer mają skłonność do zbyt bliskiego wyświetlania tekstu i obrazków. Aby tego uniknąć należy użyć atrybutów HSAPCE i VSPACE w znaczniku IMG:

<IMG SRC="lokalizacja obrazka" HSPACE=h VSPACE=v>, gdzie h to szerokość odstępu po obu stronach obrazka; a v  to szerokość odstępu nad i pod obrazkiem (wyrażone w pikselach).

Przykład:

<IMG SRC="obrazek.gif">

<IMG SRC="obrazek.gif" HSPACE=10 VSPACE=20>

<IMG SRC="obrazek.gif" HSPACE=40 VSPACE=10>

UWAGI:
• IE domyślnie zostawia 4 piksele odstępu po prawej stronie obrazka
• Atrybuty te nie muszą być stosowane razem.

Po natrafieniu na wskaźnik IMG przeglądarka musi ściągnąć ilustrację, aby ustalić jej wymiary i ilość miejsca, które musi dla niej zarezerwować na stronie. Po określeniu wymiarów przez autora strony przeglądarka będzie mogła poprawnie wypisać tekst już w trakcie ściągania obrazka.

Określenie wielkości obrazka odbywa się następująco:

Przykład:

<IMG SRC="obrazek.gif" ALT="To jest obrazek." WIDTH="181" HEIGHT="219" BORDER="0">

Mając obrazek, który ma być umieszczony na stronie WWW możemy w ten sposób zmienić jego wielkość, chociaż zmniejszanie nie jest wskazane. Aby zachować proporcje obrazka najlepiej pomnożyć prawdziwe wymiary przez tą samą liczbę.

Przykład:

<IMG SRC="obrazek.gif" WIDTH="100" HEIGHT="219">

<IMG SRC="obrazek.gif" WIDTH="100" HEIGHT="119">

Wyrównywanie obrazka względem tekstu jest możliwe dzięki atrybutowi ALIGN znacznika IMG. Pozwala on na własne ustalenie pozycji ilustracji względem tekstu. Istnieje kilka rodzajów wyrównań obrazka względem pojedynczej linii tekstu wewnątrz akapitu.

ALIGN przybiera wartości:

Texttop - obrazek wyrównany do najwyższego tekstu w linii

<IMG SRC="obrazek.gif" ALIGN=TEXTTOP>

Top - obrazek wyrównany do najwyższego elementu w linii

<IMG SRC="obrazek.gif" ALIGN=TOP>

Middle - środek obrazka wyrównany do linii bazowej

<IMG SRC="obrazek.gif" ALIGN=MIDDLE>

Absmiddle - środek obrazka wyrównany do środka najwyższego elementu w linii

<IMG SRC="obrazek.gif" ALIGN=ABSMIDDLE>

Absbottom - dolna krawędź obrazka wyrównana jest do najwyższego elementu w linii

<IMG SRC="obrazek.gif" ALIGN=ABSBOTTOM>

Bottom lub baseline - dolna krawędź obrazka wyrównana jest do linii bazowej

<IMG SRC="obrazek.gif" ALIGN=BOTTOM>

UWAGI:
• Obrazka nie można jednocześnie wyrównywać względem tekstu i otaczać go tekstem.
• IE traktuje texttop jak top, absmiddle jak middle, a absbottom jak bottom.

Powszechne jest stosowanie na stronach WWW poziomych linii, które przyjęły się już we wszystkich przeglądarkach. Do wstawiania poziomych linii służy znacznik <HR>. Może on być uzupełniany kilkoma atrybutami:

SIZE=n, gdzie n to grubość linii (w pikselach)

WIDTH=w, gdzie w to szerokość linii (w pikselach lub %)

ALIGN=x, gdzie x oznacza sposób umieszczenia linii na stronie; są do wyboru wartości: left (po lewej), right (po prawej), center (na środku); (Atrybut ten brany jest pod uwagę jeżeli linia jest szersza od strony).

NOSHADE - linia, która jest trójwymiarowym prostokątem.

Przykład:

<HR SIZE=3 WIDTH=60% ALIGN=left NOSHADE>

<HR SIZE=7 WIDTH=90% ALIGN=right>

<HR SIZE=10 WIDTH=300 ALIGN=CENTER>

UWAGI:
• Znacznik HR automatycznie kończy poprzednią linię, a za sobą zaczyna nowy akapit.