Slike Images img tag Koristimo za umetanje slike

  • Slides: 13
Download presentation
Slike Images

Slike Images

<img> tag Koristimo za umetanje slike u HTML dokument <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=„URL”> src skraćeno od

<img> tag Koristimo za umetanje slike u HTML dokument <img src=„URL”> src skraćeno od source (izvor) src pišemo u obliku relativne ili apsolutne adrese Grafički format <img src=„/images/planina. jpg”>

Grafički formati Mora biti točno napisan Na web-u se radi brzine prijenosa najčešće koriste

Grafički formati Mora biti točno napisan Na web-u se radi brzine prijenosa najčešće koriste tri formata: . jpg . gif . png

. jpg Ne podržava prozirnost Moguća optimizacija s minimalnim gubitkom kvalitete Pogodan za fotografije

. jpg Ne podržava prozirnost Moguća optimizacija s minimalnim gubitkom kvalitete Pogodan za fotografije s velikim brojem boja Nije pogodan za jednobojne slike (pozadina)

. gif Dobar za slike s manje boja i jednostavne animacije Nije dobar za

. gif Dobar za slike s manje boja i jednostavne animacije Nije dobar za fotografije Podržava prozirnost Najčešće se koristi za crteže

. png Najbolji format Pogodan za fotografije s velikim brojem boja Podržava prozirnost i

. png Najbolji format Pogodan za fotografije s velikim brojem boja Podržava prozirnost i alpha prozirnost (meki rubovi) Dobar za jednobojne plohe

Atribut alt Alt je tekst koji opisuje sliku ako se slika ne učita koristan

Atribut alt Alt je tekst koji opisuje sliku ako se slika ne učita koristan za slabovidne i gluhe osobe Koristan za SEO optimizaciju <img src=„planina. jpg” alt=„Biokovo”>

Atributi width i height Postavljaju širinu i visinu slike <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=„planina. jpg” width=„ 450”

Atributi width i height Postavljaju širinu i visinu slike <img src=„planina. jpg” width=„ 450” height=„ 320”> Stilovi width i height <img src=„planina. jpg" style="width: 304 px; height: 228 px; „ >

Postavljanje stila u tag-u <tag style=„svojstvo: vrijednost; ”> </tag>

Postavljanje stila u tag-u <tag style=„svojstvo: vrijednost; ”> </tag>

Atribut align Poravnava sliku u odnosu na tekst <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=„planina. jpg” align=„middle”> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=„planina.

Atribut align Poravnava sliku u odnosu na tekst <img src=„planina. jpg” align=„middle”> <img src=„planina. jpg” align=„top”> <img src=„planina. jpg” align=„bottom”> NAPOMENA. Slike je bolje poravnavati CSS-om…

Atribut style="float: " Poravnava sliku lijevo ili desno u odnosu na odlomak <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=„planina.

Atribut style="float: " Poravnava sliku lijevo ili desno u odnosu na odlomak <img src=„planina. jpg” style=„float: left; ”> <img src=„planina. jpg” style=„float: right; ”>

Atribut border Ne stvara okvir ako sliku proglasimo linkom <a href=„ivana. html"> <img border="0"

Atribut border Ne stvara okvir ako sliku proglasimo linkom <a href=„ivana. html"> <img border="0" src="smiley. gif" > </a>

Zadaci. Na stranicu planinarenje. html umetni slike iz mape Slike. Postavi opisne tekstove, linkove

Zadaci. Na stranicu planinarenje. html umetni slike iz mape Slike. Postavi opisne tekstove, linkove do stranica sadržajno povezanima sa slikama, veličine slika i poravnaj slike na stranici po želji. Na početnu stranicu umetni sliku po želji.