Embed Size (px)
Citation preview
4. Linkovi
Elektronsko poslovanje
Elektronsko poslovanje
Riječ koju
vidi korisnik
Otvarajući tag sa atributom
Stranica na koju vodi link
Linkovi ka drugim sajtovima Linkovi se kreiraju korištenjem <a> taga. Korisnici mogu
kliknuti na sadržaj koji se nalazi između otvarajućeg <a>
i zatvarajućeg </a> taga. I ovaj tag se precizira atributom
“href” tj.stranicom na koju vodi link.
Zatvarajući tag
Elektronsko poslovanje
Primjer
Elektronsko poslovanje
Konbinacija liste i linkova
Elektronsko poslovanje
Lokacije strana
u “podfolderima”
Otac
unuk
djed
sin
Elektronsko poslovanje
Riječ koju
vidi
korisnik
Otvarajući tag sa
atributom
Stranica
na istom
sajtu
Linkovi ka drugim stranicama na istom sajtu
Linkovi se kreiraju i na druge stranice istog sajta.
Prvo moramo imati kreiranu drugu stranu da bismo
napravili link ka njoj.
Zatvarajući
tag
Elektronsko poslovanje
Riječi koje
vidi
korisnik
Otvarajući tag sa
atributom
E-mail na
koji se
šalje
Linkovi za E-mail
Ova vrsta link omogućava pokretanje slanja email-a
klikom na link. Primjer u nastavku
Zatvarajući
tag
Elektronsko poslovanje
Riječ koju
vidi
korisnik
Otvarajući tag sa
atributom
Stranica
na istom
sajtu
Otvaranje linkova u novom blank prozoru
Linkovi se mogu otvoriti u istom i novom prozoru.
Možete koristiti desni klik mišem ali možete koristiti i tag
za linkove sa podešavanjem parametra.
Zatvarajući
tag
Novi
atribut
target
5. Ubacivanje
slika
Elektronsko poslovanje
Kakve slike trebaju biti?
Elektronsko poslovanje
•Bitne
• Povezane sa informacijama ili da sadržavaju
informacije
• Prepoznatljive
•Prilagođene bojana sajta
Izvori
• Vlastite fotografifje
• Društvene mreže
• Sajtovi (stock images)
1. http://www.istockphoto.com/
2. http://www.veer.com/
3. http://eu.fotolia.com/
4. http://www.freeimages.com/
Elektronsko poslovanje
Naslov
slike
Otvarajući
tag img
Tekst.
objašnjenje
Dodavanje slika (JPEG)
Za dodavanje slika koristimo element <img>. Ovo je “prazni” tj.
samozatvarajući element i nema zatvarajućeg taga. Ovaj element
ima sledeće atribute:
1. src – informacija o tome gdje se slika nalazi
2. alt – tekstualno objašnjenje slike kada ju ne možemo vidjeti
3. Title – informacija o slici kada ih ne vidimo u tekstu pored
Nema
zatvarajućeh
samo /
Izvor slike
i tip
Elektronsko poslovanje
Visina Širina
Dodatni atributi
Često ćete koristiti i dva dodatna atributa
1. Height – specizirate visinu fotografije u pikselima
2. Width – specizirate širinu fotografije u pikselima
Elektronsko poslovanje
Pozicija slike
u odnosu na
tekst
Elektronsko poslovanje
Poravnanje kao atribut slike
U HTML se isključivo u CSS-u podešava poravnanje.
Ovjde ćemo preći zbog slučaja “starijih” verzija
1. Lijevo poravnanje align=“left”
2. Desno poravnanje align=“right”
3. Gornje poravnanje align=“top”
4. Srednje poravnanje align=“middle”
5. Donje poravnanje align=“bottom”
Bitne napomene za slike
Elektronsko poslovanje
•Sačuvajte slikeu odgovarajućem formatu
•Sačuvajte slike u odgovarajućoj veličini
•Koristite odgovarajuću rezoluciju
•Pazite kdo isjecanja
•Osvjetljenost i transparentnost
Alati za pripremu slika
• Paint
• Adobe PhotoShop
•Paint.net
1. http://www.photoshop.com/
2. http://www.pixlr.com/
3. http://www.splashup.com/
4. http://www.ipiccy.com/
Elektronsko poslovanje
Figurecaption je unutar
figure elementa!
Figure element
Figure element
HTML 5 je uveo novi <figure> element koji se sastoji od slike i
njenog opisa a jedan naslov/natpis u okviru ovog elementa se može
vezati za više slika.
<figurecaption> element je takođe dodan u HTML5 da bi autori
mogli dodati naslov slikama. Stariji browser-i ga ne prepoznaju.
