Grafika jest ważnym elementem na stronach WWW, gdyż ubarwia i uprzyjemnia ich przeglądanie. Należy pamiętać, że duża ilość odpowiednio dobranej grafiki bardzo dobrze wpływa na atrakcyjność strony w odbiorze. Jednak to właśnie grafika jest przyczyną zmniejszenia szybkości ładowania się strony. W sieci internetowej najczęściej spotykanymi typami plików graficznych są GIF i JPG, które charakteryzują się znaczną kompresją i niewielkimi rozmiarami.
1. Umieszczanie elementów graficznych w dokumencie HTML
Aby umieścić dowolny element graficzny należy wpisać
<IMG SRC="plik_graficzny">
Znacznik IMG jest skrótem od ang. Image (obraz) i określa miejsce w dokumencie HTML, w którym powinna znaleźć się grafika, natomiast atrybut SRC powinien zawierać nazwę źródłowego pliku graficznego.
Powyższe polecenie automatycznie zmienia wysokość i szerokość obrazka.
b) zmiana rozmiaru grubości ramki wokół obrazka jest realizowana przy pomocy atrybutu BORDER, który podobnie jak w przypadku rozmiaru obrazu posiada wartość podaną w pikselach.
Przykład:
<IMG SRC="foot.gif" BORDER=5>
c) określenie odległości obrazka od pozostałych otaczających elementów poprzez użycie atrybutów VSPACE (vertical space) oraz HSPACE (horizontal space).
Można także umieścić go wewnątrz tabeli wstawiając go między znaczniki <td> </td>. W ten sposób można w łatwy sposób tworzyć efektownie wyglądające obramowania.
2. Animacja MARQUEE
Efektownym elementem graficznym, obsługiwanym tylko przez przeglądarkę Internet Explorer firmy Microsoft jest animacja Marquee. Jest to "płynący" w poprzek ekranu napis. Przykład:
<MARQUEE>Płynący tekst</MARQUEE>
i wygląda to tak:
Znacznik posiada wiele atrybutów. Oto one:
BEHAVIOR=SCROLL - powoduje, że tekst przemieszcza się od jednego brzegu strony do drugiego, po czym znika za nim i następnie wypływa ponownie zza pierwszego BEHAVIOR=SLIDE - powoduje, że tekst przemieszcza się od pierwszego brzegu, dociera do drugiego i zatrzymuje się BEHAVIOR=ALTERNATE - powoduje, że tekst przemieszcza się od pierwszego brzegu, dociera do drugiego i wraca z powrotem (odbija się) BGCOLOR=kolor - określa kolor tła; wartość koloru (kolor) można być podana w postaci numerycznej (np. #00FF77) lub słownej (Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua) DIRECTION=LEFT - określa początkowy kierunek ruchu jako kierunek w lewo DIRECTION=RIGHT - określa początkowy kierunek ruchu jako kierunek w prawo LOOP=x określa ilość powtórzeń ruchu tekstu x razy HEIGHT=x - wymiary elementu, w którym przesuwa się napis; x może przyjmować wartości wyrażone w pikselach lub procentach wysokości ekranu WIDth=y - wymiary elementu, w którym przesuwa się napis; y może przyjmować wartości wyrażone w pikselach lub procentach szerokości ekranu HSPACE=x - określa odległość elementu MARQUEE w poziomie od sąsiadujących elementów, np. tekstu, grafiki; akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu <P> lub końca wiersza <BR> VSPACE=y - określa odległość elementu MARQUEE w pionie od sąsiadujących elementów, np. tekstu, grafiki; akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu <P> lub końca wiersza <BR> SCROLLAMOUNT=x - określa szybkość przemieszczania się napisu; wartość x określa długość pojedynczego skoku wyrażoną w pikselach SCROLLDELAY=x - określa odstępu czasowe między kolejnymi skokami (szybkość przemieszczania się napisu); wartość x jest wyrażona w milisekundach