У давна времена, на самим својим почецима, интернет је био само суви текст, и као такав, био је поприлично незанимљив и досадан за данашње укусе. На сву срећу, појављују се недуго затим слике и други интересантни садржаји. Слике су важан и најчешћи део веб странице одмах након текста.

Данас, свака веб локација коју посетите их има. Оне побољшавају изглед веб странице и привлаче публику. То нам је и циљ, зар не? Да бисте једноставно додали или убацили слику на вашу веб страницу, користите ознаку или таг <img>. На томе се, међутим, ваш посао не завршава. Слика треба да има правилно поравнање, положај и величину.

<img> таг

Ознака <img> има следећу синтаксу.

<img src=“име_слике.jpg“ alt=“алтернативни текст“ >

На пример

<img src=“basketlopta.jpg“ alt=“Кошаркашка лопта“>

Ознака <img> је празан елеменат, нема затварајући таг. Глави делови <img> су његови атрибути или додатна својства src и alt.

Атрибут src је обавезан јер садржи URL адресу слика. Слика се може налазити у рачунару и тада говоримо о њеној локалној присутности, или може бити негде на интернету, на другом серверу. Хајде сад да поразговарамо о томе како додати локалне слике у HTML документ.

Слика се налази у фасцикли „img“. Она може бити на истој локацији као и HTML датотека, или у посебном фолдеру као на горњој слици. Где год да се налази, морате навести исправну путању (path) или се слика неће појавити на екрану. Штавише, проширење или екстензија слике такође треба да стоји иза њеног имена.

На сличан начин можемо додати слике са другог сервера.

Величина слика

Обратите пажњу на следећу слику.

Погледајмо на који начин се ова слика појављује у претраживачу.

Овако не би требало да изгледа, зар не? Дакле, шта мислите да је погрешно овде? По дифолту, величина слике која се појављује на екрану је иста као њена стварна величина. Ова слика је огромне величине и зато се на екрану појављује само део. Цела слика се може видети само скроловањем или померањем нагоре и надоле.

Да би одговорио на одговарајући начин на овакве ситуације, <img> таг има два атрибута за подешавање ширине и висине слике. Они се једноставно зову ширина и висина – width и height.

Висина и ширина су на горњој слици подешене на 700 и 700.

Сада већ изгледа боље. Овде можемо користити CSS за стилизовање слика о чему ћемо разговарати када будемо обрађивали одељак о CSS-у.

Alt атрибут

Атрибут alt је опционалан, али се препоручује да га користите у сваком <img> тагу. Претпоставимо да се слика из неког разлога не учитава. Да сте је грешком обрисали. Да је пао фејсбук а ви сте баш слику са фејсбука поставили. Шта се у таквим случајевима догађа? Хајде да видимо.

Додао сам неколико карактера у локалну адресу слике да би била неважећа.

Не, не. Ово никако не изгледа лепо, зар не?

Дакле, када слика не успе да се учита, вредност атрибута alt појављује се на за то предвиђеном месту.

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

Слике као линкови

Као што је објашњено у претходном поглављу, слике могу да раде и као везе или линкови. Једноставно додајте слику унутар ознаке <a>. Остатак поступка је исти.

Закључак

● Слике се у HTML додају помоћу <img> тага.

● Атрибут src садржи URL или путању до слике.

● За промену величине слике, користимо height и width атрибуте.

● Атрибут alt садржи вредност која ће бити приказана уколико слику није могуће учитати.  

● Слике се такође могу користити као хиперлинкови у HTML.

Претходно:

HTML хиперлинкови