Слике на Интернету најчешће се налазе у једном од следећа два
формата:
У JPEG формату се обично чувају квалитетније фотографије јер овај формат подржава 16 милиона боја, а фајлови су добро компримовани, тако да се фотографије релативно брзо учитавају. Са друге стране GIF формат има само 256 боја, али он има ту предност да му се може задати транспарентност (провидност) и да се може анимирати. Слике се у HTML документ убацују помоћу <img> тага. Овај
таг мора имати бар један атрибут, а то је src атрибут који дефинише назив (и евентуално локацију) графичког
фајла који желимо убацити у веб странице. Ако смо графички фајл снимили у исти
фолдер у којој се налази и одговарајући ХТМЛ
фајл, довољно је да као вриедност src атрибута ставимо само назив одговарајућег фајла. <img src="slika.jpg"> чиме се добија следећи ефекат: ![]() По дифолту слике су поравнате са текстом на доњу ивицу (као што се види из
горњег примера). Одговарајући таг гласи:
right - поставља слику уз десну маргину: Одговарајући таг гласи:
top - поравнава слику са врхом слова у текућој линији (следећа линија текста почиње испод слике): Одговарајући таг гласи:
bottom - поравнава слику са доњом ивицом слова (default):
Одговарајући таг гласи: middle - поставља слику тако је доња ивица слова на средини слике (следећа линија текста почиње испод слике): Одговарајући таг гласи: <img src="slika.jpg" align="middle"> absmiddle - поставља слику тако да се средина слике и средина слова поклапају (следећа линија текста почиње испод слике): Одговарајући таг гласи: <img src="slika.jpg" align="absmiddle"> Ако желимо да слика буде центрирана користимо center таг. На пример: што се постиже слиједећим HTML кодом:<center><img
src="slika.jpg"></center> Величину слике можемо дефинирати помоћу два атрибута: width и height.
Вредност ширине и висине странице се може задати
или у пиксекима или у процентима. <img src="slika.jpg" width="440" height="440"> Ако задамо само height или само width атрибут, друга димензија ће бити увећана пропорционално са заданом тако да се слика неће деформисати. Слика се може и "уоквирити" помоћу атрибута border
чија се вриједност задаје у пикселима. што се постиже слиједећим тагом: <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"> Слика није пронађена. Када мишем станемо на слику појави се опис слике. ВежбаОтворите програм Notepad (Start->Accessories->Notepad)У њему унесите следећи код
|