• JPEG (или JPG)
• GIF

У JPEG формату се обично чувају квалитетније фотографије јер овај формат подржава 16 милиона боја, а фајлови су добро компримовани, тако да се фотографије релативно брзо учитавају. Са друге стране GIF формат има само 256 боја, али он има ту предност да му се може задати транспарентност (провидност) и да се може анимирати.

Слике се у HTML документ убацују помоћу <img> тага. Овај таг мора имати бар један атрибут, а то је src атрибут који дефинише назив (и евентуално локацију) графичког фајла који желимо убацити у веб странице. Ако смо графички фајл снимили у исти фолдер у којој се налази и одговарајући ХТМЛ фајл, довољно је да као вриедност src атрибута ставимо само назив одговарајућег фајла.
Нпр. ако желимо ставити слику "slika.jpg" тада ће одговарајући таг гласити:

<img src="slika.jpg">

чиме се добија следећи ефекат:

По дифолту слике су поравнате са текстом на доњу ивицу (као што се види из горњег примера).
Положај слике у односу на текст странице се може дефинисати убацивањем align атрибута u <img>таг. Вредности овог атрибута и одговарајуће ефекте можемо видети из следећег примера :

left - поставља слику уз леву маргину:

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx xxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxx xxxxxx x xxxxx

 

Одговарајући таг гласи:

<img src="slika.jpg" align="left">

right - поставља слику уз десну маргину: 

Оквир за текст

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx xxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxx xxxxxx x xxxxx

Одговарајући таг гласи:

<img src="slika.jpg" align="right">

top - поравнава слику са врхом слова у текућој линији (следећа линија текста почиње испод слике):

Одговарајући таг гласи:

<img src="slika.jpg" align="top">

Одговарајући таг гласи:

<img src="slika.jpg" align="bottom">

middle - поставља слику тако је доња ивица слова на средини слике (следећа линија текста почиње испод слике):

Одговарајући таг гласи:

<img src="slika.jpg" align="middle">

absmiddle - поставља слику тако да се средина слике и средина слова поклапају (следећа линија текста почиње испод слике):

Одговарајући таг гласи:

<img src="slika.jpg" align="absmiddle">

Ако желимо да слика буде центрирана користимо center таг. На пример:

xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx xxxxxx xxxxxxxx xxxxxxxx

xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx xx xxxxxx xxxx xxxxx xxxx x

што се постиже слиједећим HTML кодом:

Вредност ширине и висине странице се може задати или у пиксекима или у процентима. 
Горње слика има следеће вредности атрибута: width="220" и height="220".
Ако желимо да слика из претходних примера буде пропорционално два пута већа  написаћемо:

<img src="slika.jpg" width="440" height="440">

Ако задамо само height или само width атрибут, друга димензија ће бити увећана пропорционално са заданом тако да се слика неће деформисати.

Слика се може и "уоквирити" помоћу атрибута border чија се вриједност задаје у пикселима.

Ако задамо дебљину оквира 5 пиксела добит ћемо слиједећу слику:

што се постиже слиједећим тагом:

<img border="5" src="slika.jpg">

Слику можемо поставити као линк на следећи начин:

<a href="stranica1.htm"><img src="slika.jpg"></a>

Броузер ће аутоматски уоквирити слику која представља линк са оквиром оне боје коју сте задали link и vlink атрибутима у нашем <body> тагу. Ако не желимо да наша слика буде уоквирена морамо јој задати border="0" у оквиру <img> тага.

Постоји још један користан атрибут <img> тага. То је alt атрибут. Овај атрибут ће у случају да броузер посетиоца наше странице из било ког разлога не учита слику, на оном месту где би требала стајати слика приказати текст који напишемо као вредност овог атрибута. Ово је корисно нарочито ако сте слику поставили као линк, јер ће онда и у случају неучитавања слике посетилац знати где води тај линк. Употребићемо увек овај атрибут и да у њега уписујемо текст који укратко описује дану слику. На примјер:

<img src="slika.jpg" alt="Slika">

Слика није пронађена. Када мишем станемо на слику појави се опис слике.

Вежба

• Промените боју позадине заменом кода боје Light Blue (светло плава) (користитие кодове на страни).
• Замените текст Име и презиме својим именом и презименом а текст е-пошта вашом е-маил адресом .
• Замените адресу слике неком другом по жељи коју ћете наћи на интернету
  
• Сачувајте на диск рачунара фајл под својим именом и презименом користећи енглеску латиницу без размака са екстензијом  html.
• Отворите у свом броузеру ову датотеку.
• Позовите наставника