MULTIMEDIJI I GLOBALNI MEDIJI
HTML I CSS
dipl.ing. Aleksandar Rikalović M.Sc.
Ubacivanje slika, medijalnog sadržaja i skirptova
multimediji i globalni mediji
Uvod
Slike, medijalni sadržaj i skriptovi mogu da pomognu da sajt postane “dinamički i bogat”. Termin dinamički dolazi odatle što mnoge od ovih karakteristika nude posetiocima mogućnost da komuniciraju sa sajtom. Kada kažemo termin bogat, mislimo na to da će sajt bolje izgledati. Slike se u ovom poglavlju
odnose na slike koje ćete ubacivati na stranu, kao deo dizajna ili za proširenje sadržaja, kao što je slučaj sa fotografijama. Slike se za Web prave na specifičan
način, pri čemu se obično koristi neki editor slika. Ubzo ćete se upoznati sa detaljima.
NAPOMENA
Grafika za Web se može napraviti u različitim programima, ali se obično koristi neki editor slika, kao što je Photoshop. Postoje i drugi grafički programi za
Web, a informacije o njima možete pronaći ako u pretraživač unesete termin “web graphics sofhvare”.
Postoje dva osnovna formata za grafiku na Webu. To su GIF i JPEG. GIF format je bolji za slike sa manje boja, kao i crteže sa linijama. JPEG je bolji za
slike sa puno boja i prelaza između boja, kao što su fotografije. Treći tip formata za web grafiku je PNG, ali neki pretraživači ne podržavaju taj format, tako da
to nije siguran izbor.
Medijalni sadržaj se odnosi na različite stvari, uključujući animirane GIF slike, Flash animacije, audio, video i Java aplete. Skriptovi se odnose na JavaScript i DHTML efekte koje možete ubaciti u svoje dokumente, tako da korisnik dobije bogatiji doživljaj.
NAPOMENA
lako slike, medijalni sadržaj i skriptovi vašem sajtu donose nove mogućnosti, mogu da donesu i nepotrebnu zbrku i da povećaju vreme učitavanja. Većinu
sadržaja ovog tipa smatram dekorativnim. Kao što ne biste voleli da preterate sa dekoracijom kuće, tako ne treba da preterate ni sa dekoracijom strane.
dipl.ing. Aleksandar Rikalović M.Sc.
Ubacivanje slika, medijalnog sadržaja i skirptova
multimediji i globalni mediji
Element img
Element koji ćete koristiti kada radite sa slikama je img. Ovo je prazan element, odnosno ne sadrži nikakav tekst. Kao rezultat, ne zahteva nikakvu
oznaku za zatvaranje. U XHTML-u se piše na sledeći način:
<img />
Kada se postavi unutar tela dokumenta, ovaj element ne radi ništa. Zajedno sa elementom img morate da zadate i lokaciju slike. Ovo se radi pomoću
atributa src, što je skraćenica za “source”.
Kao vrednost ovog atributa treba da zadate lokaciju i ime datoteke sa grafikom, zajedno sa ekstenzijom. U primeni 3.1 je pokazano kako izgleda kompletan
dokument sa ubačenom slikom.
Primer 3.1 Ubacivanje slike u telo dokumenta
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtvnl1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<title>Galerija</title>
</head>
<body>
<img src=”images/tvrdjava.jpg” />
</body>
NAPOMENA
Primetili ste da sam za skladištenje mojih slika koristio podfasciklu images. To je standardno mesto za smeštanje slika, odnosno slike se obično smeštaju ispod
fascikle sa dokumentima u kojima se koriste. Ako imate neki mali sajt, onda možete fasciklu sa slikama staviti i ispod korene fascikle.
U pretraživaču će se prikazati slika (videti sliku 3.1).
dipl.ing. Aleksandar Rikalović M.Sc.
Ubacivanje slika, medijalnog sadržaja i skirptova
multimediji i globalni mediji
Slika 3.1 Slika se pojavila u prozoru pretraživača.
Ako u dokumentu nema nikakvog drugog sadržaja, slika se automatski postavlja u gornji levi ugao. Da bi slika postala upotrebljivija, sa njom morate da
uradite još ponešto. Na primer:
•
Da pomognete pretraživaču u boljem prikazivanju
•
Da obezbedite korisne informacije za one koji slike ne mogu da vide
•
Da date link na sliku
NAPOMENA
Prvo ćele naučiti kako se ovo radi u XHTML-u, a kasnije“Slike i boje u CSS-u”, upoznaćete se sa naprednim načinima za kontrolu slika pomoću CSS-a.
dipl.ing. Aleksandar Rikalović M.Sc.
Ubacivanje slika, medijalnog sadržaja i skirptova
multimediji i globalni mediji
Definisanje visine i širine
Naredna stvar koju treba uraditi je da slici dodate vrednosti za visinu (height) i širinu (width). Ovim se pretraživaču pomaže da efikasnije prikaže sliku,
tako da te informacije uvek treba da zadate.
Širinu i visinu slike možete pronaći na više načina. Prvi način je da sliku pogledate u editoru za izradu slika (videti sliku 3,2).
Drugi način za pronalaženje visine i širine slike je da sliku otvorite u svom pretraživaču.
Na slici 3.3 je prikazana je sama slika (ne u HTML datoteci). Možete primetiti da su u liniji naslova prikazane i visina i širina.
Slika 3.2 Slika 3.3
Visinu i širinu u pikselima možete pronaći u editoru slika. Otvorio sam sliku u svom pretraživaču a njena visina
Photoshop prikazuje visinu i širinu na vrhu okvira za dijalog. i širina su se pojavile u liniji naslova.
Kada dobijete dimenzije slike, u ovom slučaju to je širina od 598 piksela i visina od 395 piksela, možete to da zadate u kodu:
<img src=’’images/tvrdjava” width= “598” height=”395” />
NAPOMENA
Uvek treba da zadajete pravu visinu i širinu. Ako su vrednosti veće nego prave vrednosti, onda će pretraživač razvući sliku. Ako zadate manje vrednosti,
pretraživač će smanjiti sliku.
dipl.ing. Aleksandar Rikalović M.Sc.
Ubacivanje slika, medijalnog sadržaja i skirptova
multimediji i globalni mediji
Alternativni tekst
Aternativni tekst se prikazuje kada se iznad slike postavi miš. Ovo se radi pomoću atributa alt i opisa, kao štoje prikazano u primeru 3.2.
Primer 3.2 Ubacivanje alt teksta i opisa
<img src=’’images/tvrdjava” width= “598” height=”395” alt=”Zalazak sunca na Petrovaradnskoj tvrdjavi” />
Ovo pomaže svakome, pošto su u pitanju informacije o tome na šta se slika odnosi (videti sliku 3.5).
Slika 3.5
Alternativni tekst kao opis, prilikom postavljanja miša iznad slike.
dipl.ing. Aleksandar Rikalović M.Sc.
Ubacivanje slika, medijalnog sadržaja i skirptova
multimediji i globalni mediji
Povezivanje slike
Puno puta će biti potrebno da linkom povežete sliku i drugi html dokument ili detaljniju verrziju te slike. U ovom drugom slučaju, postavljanje linka na
sliku funkcioniše na isti način kao postavljanje tekstualnog linka. Kod za ubacivanje slike treba okružiti elementom anchor i dodati referencu, isto kao da je u
pitanju tekstualni sadržaj (videti primer 3.3).
Primer 3.3 Postavljanje linka na sliku
<a href=”vezbe.html”>
<img src=”images/tvrdjava.jpg” width= “598” height=”395” alt=”Zalazak sunca na Petrovaradnskoj tvrdjavi” />
</a>
Sada je postavljen link na sliku, tako da kada se ta slika izabere mišem, posetilac odlazi na stranu vezbe.html. Elementu možete da dodate i atribut title
ako želite da posetiocu pružite više informacija. Podrazumevano, pretraživači postavljaju okvvir oko slike da bi istakli činjenicu da je slika sa linkom. Kada se
iznad slike postavi kursor, on dobija okvir ruke. Ako želite da izbrišete ovir samo dodajte border=”0”
Slika 3.6
Slika sa linkom
dipl.ing. Aleksandar Rikalović M.Sc.
Ubacivanje slika, medijalnog sadržaja i skirptova
multimediji i globalni mediji
Linkovi na audio i video datoteke
Ako želite da na svom sajtu date link na medijalni sadržaj, to se radi isto tako jednostavno kao postavljanje linka na sliku. Za video i audio zapise
postoje različiti tipovi datoteka, a najpopularniji su MP3, QuickTime, Real i Windows Media.
Prvo treba da medijalnu datoteku postavite u podfasciklu. Kao i sa slikama, i ovde treba pratiti konvenciju o organizaciji datoteka. U ovom slučaju sam
podfasciklu nazvao media (kako je ovo briljantno) i u nju postavio dve datoteke, jednu MP3 audio datoteku i drugu .avi video datoteku. Primer 3.5 prikazuje
moj dokument i kako se postavljaju linkovi na medijalni sadržaj.
Primer 3.5 Postavljanje linkova na audio i video datoteke
<!D0CTYPE html PUBLIC “-//VV3C//DTD XHTML 1.B Transitional//EN”
“http://www.w3.org/TR/xhtmlf/DTD/xhtml1-transi.tianal.dtd”
xmlns=”http://www.w3,org/1999/xhtml” xml:lang=”en”>
<head>
<title>Muzika i Film</title>
</head>
<body>
<a href=”media/Blue Lines.mp3”>Link do pesme</a><br />
<a href=”media/3-D ANIMACIJA.avi”>Link do filma</a>
</body>
</html>
Unutar linkova sam dodao tekst i postavila novi red između linkova, tako da se prikazuju jedan iznad drugog, a ne jedan pored drugog. Rezultat je prikazan na
slici 3.8.
Slika 3.8
Linkovi na audio i video datoteke
dipl.ing. Aleksandar Rikalović M.Sc.
Ubacivanje slika, medijalnog sadržaja i skirptova
multimediji i globalni mediji
Ugrađivanje datoteka pomoću elementa object
Na primer, ako se radi o Flash datotekama, element object možete upotrebiti za ubacivanje direktno u dokument, kao što se može videti iz primera 3.7.
Primer 3.7 Ugrađivanje datoteke sa filmom iz Flasha (SWF) u stranu korištenje
<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 width=”750”
height=”200” codebase=”http://active.macromedia.com/flash8/cabs/
swflash.cab#version=8,0,0,0” >
<param name=”movie”value”media/panoramica.swf” />
<param name=”play” value=”true” />
<param name=”loop” value=”true” />
<param name=”quality” value=”high” />
</object>
Kod većine standardnih pretrazivaca, kod kojih je uključena opcija za podršku Flasha, datoteka se prikazuje odmah nakon učitavanja, kao što se vidi na
slici 3.11.
Slika 3.11
Flash animacija se prikazuje u pretraživaču
dipl.ing. Aleksandar Rikalović M.Sc.
Ubacivanje slika, medijalnog sadržaja i skirptova
multimediji i globalni mediji
Ali vaša visosti, ja sam objekat
U redu, ceo poslednji odeljak je ispunjen lažima. Nisam želela da vas uputim pogrešnim putem; pokušala sam upravo suprotno. Svim spoljasnjim medijalnim sadržajima se može pristupiti pomoću elementa object ako želite da koristite markup koji je ispravan.
Ipak, postoji kamen spoticanja kada se koristi element object, a to je da podrška za ovaj element nije konzistentna u svim pretraživacima i platformama.
Sa stanovišta puritanaca to je veoma uznemirujuće, pošto unutar specifikacije nema druge alternative.
KVANTNI SKOK:
Rukovanje objektima u XHTML-u 2,0
U Verziji XHTML 2.0, element object postaje sveprisutan. Drugim rečima, svi drugi elementi za spoljašnje objekte, uključujući i element img, zastareli su.
Očigledno je da se ne može koristiti XHTML 2.0 pošto će rezultat biti ograničen na samo nekoliko pretraživača, koji podržavaju element object, umesto elementa img. Ipak, to može do pruži ideju o tome u kom se pravcu kreće XHTML.
Jednostavno rečeno, sve se svodi na to da ako želite da se medijalni sadržaj prikaže na isti način u različitim pretraživacima, onda ga morate staviti u
odgovrajući element, a to je element embed. Ovaj element nikad nije postojao u nekim formalnim specifikacijama, ali ga većina pretraživača podržava. Iako
ove strane javljaju grešku kod pro-vere ispravnosti, ipak će raditi.
Uobičajena mudrost je da se zajedno koriste i object i embed. Ako bismo sa istom Flash datotekom koristili takav pristup, dobili bismo kod iz primera 3.8
Primer 3.8 Ugrađivanje Flash filma (SWF) na stranu pomoću elemenata <object> i ...
<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 width=”750”
height=”200” codebase=”http://active.macromedia.com/flash8/cabs/
swflash.cab#version=8,0,0,0” >
<param name=”movie”value”media/panoramica.swf” />
<param name=”play” value=”true” />
<param name=”loop” value=”true” />
<param name=”quality” value=”high” />
<embed src=”media/panoramica.swf” width=’750” height=”200” play=”true”
loop=”true” quality=”high”></embed>
Flash film će se sada prikazivati u skovo svim pretraživačima
dipl.ing. Aleksandar Rikalović M.Sc.
Ubacivanje slika, medijalnog sadržaja i skirptova
multimediji i globalni mediji
Ubacivanje skriptova
Još jedan način da na svoje strane donesete interaktivnost i zainteresujete posetioce je da na njih ubacite skript. Kada se pomenu skriptovi, obično se
misli na JavaScript ili nešto što je poznato pod imenom Dinamički HTML ili DHTML. U pitanju je kombinacija različitih tehnologija, uključujući HTML, CSS,
JavaScript i Document Object Model. Kombinacija ovih tehnologija daje lepe mogućnosti, kao što su padajući meniji ili interaktivne igre.
KVANTNI SKOK
Document Object Model
Objektni model dokumenta (Dacument Objed Model - DOM) je interfejs koji postoji u pretraživačima i koji omogućava da skriptove pridružite određenim elementima. Jedan od razloga što je DHTML lako kontraverzan i problematičan je u tome da pretraživati implementiraju nestandardne DOM modele, što dovodi
do nekonzistentnosti. Kada budete tražili DHTML skriptove, treba da budete sigurni cla ste pronašli one koji rade u većem delu pretraživača. DOM je standardizovan i svi savremeni pretraživači zasnovani na standardu rade na tome da efikasno implementiraju DOM.
Skriptove u svoje dokumente možete da ubacite na dva načina, jedan je da skript postavite u zaglavlje svog dokumenta. Ovo ]e tzv. ugrađeni skript.
Drugi način je da svoj skript postavite u spoljasnji dokument, koji se onda referencira kao linkovani skript.
dipl.ing. Aleksandar Rikalović M.Sc.
Ubacivanje slika, medijalnog sadržaja i skirptova
multimediji i globalni mediji
Ugrađivanje skripta
JavaScript ćete u zaglavlje dokumenta ugraditi pomoću elementa script, koji sadrži taj skript (videti primer 3.9).
Primer 3.9 Ugrađivanje skripta u zaglavite
<html>
<head>
<script type=”text/javascript”>
function open_win()
{
window.open(“images/tvrdjava.jpg”)
}
</script>
</head>
<body>
<form>
<input type=button value=”Slika Petrovaradinska tvrdjava
” onclick=”open_win()”>
</form>
</body>
</html>
Na slici 3.12 je prikazano kako se, u slučaju da se izabere link, otvara novi prozor sa slikom u sebi.
Slika 3.12
Rezultat ugrađenog skripta
dipl.ing. Aleksandar Rikalović M.Sc.
Ubacivanje slika, medijalnog sadržaja i skirptova
multimediji i globalni mediji
Linkovanje skripta
U skladu sa preporukama, što više možete da iz svog dokumenta izvadite i stavite u spoljašnje datoteke (misli se na skriptove i stilove), to bolje. Možete
da imate puno strana koje ukazuju na jedan skript, tako da ako je potrebno da promenite skript, možete da menjate na jednom mestu, umesto u svakom dokumentu u koji ste taj skript ugradili.
Da biste na skript postavili link, prvo treba da postavite kod (bez HTML-a) u posebnu datoteku. Datoteci dajte ime sa ekstenzijom .js, na primer, popup.
js. Tu datoteku možete da postavite u podfasciklu po imenu scripts (kao Što smo radili sa slikama i medijalnim sadržajem), a da onda pomoću elementa script
linkujete tu datoteku sa dokumentom (videti primer 3.10).
Primer 3.10 Linkovanje skripta
<head>
<script src=”scripts/popup.js” type=”text/javascript”></script>
</head>
Popup.js
function open_win()
{
window.open(“images/tvrdjava.jpg”)
}
Kod linka, u telu dokumenta, treba da bude isti kao ranije, a rezultat će biti potpuno isti kao onaj sa slike 3.12.
dipl.ing. Aleksandar Rikalović M.Sc.
Ubacivanje slika, medijalnog sadržaja i skirptova
multimediji i globalni mediji
Zamislite...
U ova tri kratka poglavlja, prešli ste dugačak put od strukture i dobro formatiranog teksta do slikovitog izlaganja i interaktivnih karakteristika.
Naravno, razumljivo je ako ste frustrirani, jer vam se čini kao da pravite kuću, a razmišljate o tome kako ćete je ukrasiti. Važno je da imate na umu da kreiranje
lepih web strana u savremenom svetu traži dodatno vreme za organizaciju materijala i da morate imati jasne ciljeve u oblikovanju dokumenata.
Kao i sa kućom, što je bolji temelj, što je bolja građa i finija struktura, to je lakše uraditi estetska doterivanja. To je ono što smo uradili pošto smo utrošili
ovoliko vremena da pravilno napravimo strane. Nešto tako jednostavno, kao što je postavljanje svih slika u fasciklu sa slikama, skriptova u fasciklu sa skriptovima i medijalnog sadržaja u odgovarajuće fascikle, ipak predstavlja internu strukturu sajta, tako da on može da izdrži sve ono što ćemo dalje dodavati.
Zamislite da niste potrošili vreme da pravilno napravite strukturu. Primite savet od profesionalaca koji su to saznali na teži način: Ako infrastrukturu
niste dobro napravili, onda će naići skupi, vremenski zahtevni i veoma neprijatni problemi.
Nakon što ste dobro organizovali svoje dokumente, slike i medijalni sadržaj, vreme je da počne zabava. U narednom poglavlju ćete naučiti kako da
napravite efikasne tabele. Tabele su sveti gral vizuelne organizacije strana.
Naučili ste da je CSS mnogo efikasniji i fleksibilniji kada se radi o aspektima izgleda sajta, ali tabele mogu biti izuzetno korisne za efikasno prikazivanje
različitih informacija. U zavisnosti od potreba, možda ćete zaključiti da su tabele sjajan način za rukovanje podacima i za dalju pomoć posetiocima da lako
dobiju i shvate informacije koje delite sa njima.
dipl.ing. Aleksandar Rikalović M.Sc.
Download

Vežba 3