HTML слике

Објави Душко

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

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

<img> таг

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

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

На пример

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

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

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

HTML слике: <img width=

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

HTML слике: <img loading=

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

HTML слике: URL слике.

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

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

HTML слике: величина слика.

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

HTML слике: величина слика.

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

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

HTML слике: величина слика.

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

HTML слике: величина слика.

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

Alt атрибут

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

HTML слике: Alt атрибут.

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

HTML слике: Alt атрибут.

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

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

HTML слике: Alt атрибут.
HTML слике: Alt атрибут.

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

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

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

Закључак

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

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

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

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

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

Претходно:

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

Категорије: HTMLWeb дизајн

0 коментара

Оставите одговор

Avatar placeholder

Ваша адреса е-поште неће бити објављена.