Napravi svoju Web - T-com

SADRŽAJ:
Napravi svoju Web stranicu __________________________ 3
Što je to Web stranica ____________________________ 3
Početak ________________________________________ 3
Boje podloge____________________________________ 8
Postavljanje boja brojčano _______________________ 9
Uređivanje slova (teksta) i crte ___________________
Veličina i boja slova ___________________________
Vodoravne crte _______________________________
Označeni popisi _______________________________
11
13
14
14
Slike _________________________________________ 15
Veličine slika_________________________________ 18
Slike u podlozi________________________________ 20
Linkovi _______________________________________ 20
Tablice _______________________________________
Boje polja i redova u tablici _____________________
Slike u tablici_________________________________
Nevidljive tablice _____________________________
Spajanje polja u tablici _________________________
24
26
27
29
31
Pokretna slova _________________________________ 33
Podijeljena stranica_____________________________ 35
Glazba na stranici ______________________________ 39
Video zapisi na stranici __________________________ 40
Crtanje u Wordu _______________________________ 41
Napredne tehnike ______________________________ 43
On-mouse-over _______________________________ 43
Apsulutni položaj _____________________________ 46
1
Tipke ________________________________________ 47
Okvir s drugom stranicom _______________________ 47
Java script _____________________________________ 48
Računanje ____________________________________ 48
Položaj miša __________________________________ 50
Animacija miša ________________________________ 51
Slide show____________________________________ 53
Animacija pomicanjem__________________________ 55
CSS ___________________________________________ 57
Filteri u CSS-u ________________________________ 64
Kako na Internet________________________________ 66
Metodičke napomene ____________________________ 72
2
Napravi svoju Web stranicu
Što je to Web stranica
Web ili WWW (World Wide Web) stranica se sastoji od slika i
teksta (glazbe, videa itd.), a može se objaviti na Internetu.
WWW stranice su pisane u posebnom jeziku koji se zove
HTML.
Znači, kako bi naučili praviti WWW stranice moramo naučiti
HTML jezik.
Kao i svaki jezik on ima svoja pravila, a naš je zadatak da ih
naučimo i pravilno primjenjujemo.
Početak
Najbolje je da sve stvari koje ćemo stavljati na našu stranicu
budu u istom folderu. Zato ćemo prvo napraviti
novi folder.
Možemo ga napraviti na disku C:
kliknite (2 puta) na My Computer
kliknite (2x) na Disk (C:)
kada se otvori Disk (C:) iz izbora New
birajte Folder
upišite ime: Moja stranica.
Isto tako možete napraviti novi folder na desktopu (možda je
malo jednostavnije).
kliknite desnom tipkom na prazan prostor u desktopu
(tamo gdje nema ikona) i iz izbornika koji se pojavi
izaberite New, a zatim Folder.
3
upišite ime foldera: Moja stranica.
Sada otvorite svoj folder (2x klik na njegovu sličicu).
Vidimo, naravno, prazan folder (još nismo ništa napravili u
njemu).
Prije nego što nastavimo moramo još nešto provjeriti! Iz izbora
Tools izaberite Folder Options.
Ovdje (u izboru View) moramo
provjeriti je li uklonjena kvačica
pored: Hide file extension for
known file tipes
Ova kvačica
mora biti
uklonjena
inače nećemo
vidjeti
nastavke u
imenima
zapisa
4
Dobro, završili smo s pripremama (tipnite još na OK u Folder
Options) i idemo nešto napraviti: iz izbora File izaberite, opet
New, ali ovaj puta ne Folder, nego Text Document.
Sada i njemu treba promijeniti ime:
Prvoj stranici obično dajemo ime index (to je zbog Internet
servera koji po tome prepoznaje početnu stranicu). Naravno za
probu možemo dati bilo koje ime, ali dobro je stvarati navike
pa ćemo ipak dati ime index .
Pazite ovo je važno: mora imati nastavak HTM ili HTML. To
je jedini način da naša stranica bude prepoznata kao Web
stranica!
Dakle našem tekst dokumentu dajte ime:
index.html
Nakon toga (kada tipnete Enter ili kliknete mišem izvan njega)
računalo nas još pita jesmo li sigurni:
Naravno, tipnite Yes.
Sada je naš dokument promijenio sličicu i izgleda
ovako:
5
Kliknite 2 puta na njega i
otvorit će se Internet
Explorer.
Kao što vidite stranica je
prazna, ali to smo i
očekivali – još ništa nismo
napisali.
Iz izbora View izaberite
Source1 pa ćemo na taj
način pokrenuti Notepad u
kojem možemo pisati
izvorni tekst2 naše stranice.
Dakle sada pišemo u
HTML jeziku. On se sastoji od riječi unutar "zagrada" koje su
načinjene od znakova < i > (manje i veće), a to se zovu tagovi.
Tako na primjer svaka WWW stranica počinje s tagom <html>
i završava s </html>.
Obratite pozornost da završni tag ima kosu crtu ispred riječi.
To je opće pravilo pa ćemo ga zapamtiti.
Vanjski tag
Drugi tag koji ćemo naučiti je <body> i naravno njegov završni
par </body>. Ono što napišemo između tih tagova čini tijelo3
stranice (ono što se vidi).
Napišite:
1
Unutarnji
tag
Source znači izvor.
Source file – izvorni kod
3
Body -tijelo
2
6
<html>
<body>
Ovo je tekst moje
prve stranice.
</body>
</html>
Dakle tag <body> i </body> nalazi se unutar taga <html> i
</html>. To je još jedno opće pravilo:
Unutarnji tag se završava prije vanjskoga.
Sada iz izbora File (pazite Notepadovog izbora) tipnite
na Save kako bi se promjene koje smo napravili (tekst koji
smo napisali) snimile na disk.
Na dnu ekrana na Task Baru4 vidimo otvorena dva programa (i
jedan folder – Moja stranica):
Kliknemo mišem na onaj sa sličicom:
dobit ćemo Explorer,
, opet se
a ako kliknemo na onaj Notepadov:
vratimo na pisanje teksta. Dakle kliknite na Explorerovu
tipkicu u Task Baru tako da on dođe u prvi plan. Sada još treba
osvježiti (ponovno učitati) stranicu, pa zato kliknite na:
Na
ekranu
vidimo
svoju
prvu
stranicu!
4
Task Bar je siva traka na dnu ekrana na kojoj se s lijeve strane nalazi
nacrtana tipkica Start.
7
Boje podloge
U drugom poglavlju ćemo naučiti kako postaviti boju podloge
tj. boju stranice.
To je zapravo vrlo jednostavno. Prvo se moramo vratiti na
izvorni tekst (Notepad). Sjećate se, treba kliknuti na Task Baru
.
nacrtanu tipkicu:
Dopunimo naš tekst u sklopu taga body:
<html>
<body bgcolor="red">
Ovo je tekst moje prve stranice.
</body>
</html>
Naravno, opet treba iz izbornika File kliknuti na Save kako bi
se i ova promjena spremila na disk, a zatim se ponovo
prebacujemo na Explorer:
Klik!
Opet treba osvježiti učitanu stranicu s:
Stranica je postala crvena.
Boja podloge se postavlja unutar početnog taga body s
instrukcijom bgcolor="naziv_boje". Naziv boje je na
engleskom i mora biti u navodnicima.
Na primjer za žutu stranicu cijeli tag bi izgledao ovako:
<body bgcolor="yellow">
8
Ovo je tablica samo nekih boja, s njihovim
nazivima, koje možete koristiti kada postavljate
boju podloge, a kasnije ćemo vidjeti da iste
nazive boja možemo koristiti i za boje slova, pa i
drugih elemenata Web stranice.
Postavljanje boja brojčano
Osim po nazivu boje možemo postaviti i
brojčano. Zašto ih postavljati brojčano kada
možemo po imenu? Osnovni razlog je veći izbor
boja. Na primjer hoćemo za podlogu postaviti
nježno crvenu.
U tom slučaju moramo se koristiti kombinacijom
od 3 boje koje će miješanjem dati ono što nam
treba.
Te boje zadajemo brojčano i to u redoslijedu: crvena, zelena,
plava.
Ali ne zadajemo ih običnim brojevima nego heksadekadskim.
Obični brojevi (desetični) imaju deset znamenaka
(0,1,2,3,4,5,6,7,8 i 9), heksadekadski imaju 16 znamenaka i one
su: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
A je zapravo 10, B je 11, C je 12 itd. F najveća znamenka ovog
sustava je 15. Osim toga u desetičnom sustavu smo naučili da
je svako slijedeće težinsko mjesto veće za 10 od prethodnog.
Na primjer 156 ima jedinicu na mjestu stotica, 5 na mjestu
desetica i 6 na mjestu jedinica.
U heksadekadskom sustavu svako slijedeće mjesto nije veće za
deset nego za 16.
Tako na primjer heksadekadski broj 1A ima jedinicu na mjestu
šesnaestica i A tj. 10 na mjestu jedinica pa iznosi:
1*16+A = 1*16+10 = 26.
9
Broj BC ima jedanaest (B) na brojnom mjestu šesnaestica
(dakle 11*16) i dvanaest (C je dvanaest) na mjestu jedinica ili:
B*16+C = 11*16+ 12 = 176+12 =188
Naravno, ne morate sve ovo zapamtiti kako bi mogli koristiti
heksadekadske brojeve za određivanje boje, za početak
dovoljno je znati da je veći broj svjetlija boja, računajući tu i
znamenke A, B, C, D, E i F. F je, ponovimo to još jednom
najveća znamenka.
Tri boje koje sudjeluju u miješanju određuju se parovima
znamenaka, dakle ukupna boja se određuje s 3 para znamenaka
pri čemu je prvi par crvena, drugi zelena, a treći plava.
Što je par koji određuje neku boju veći to je ta boja svjetlija. Na
primjer:
"#FF0000" je čista crvena (znak # ukazuje računalu da se radi o
heksadekadskom sustavu);
"#00FF00" je čista zelena (dva FF – najveće znamenke na
mjestu para koji određuje zelenu);
"#0000FF" je plava.
Kako kombiniramo boje:
"#FFFF00" je žuta zato što u ovom miješanju crvena i zelena
daju žutu.
"#FFFFFF" svih 6 F je bijela, a svih 6 nula je crna "#000000".
Rekli smo na početku kako, na primjer, želimo nježno crvenu,
probajte u izvornom tekstu svoje stranice upisati:
<html>
<body
bgcolor="#FFBBBB">
Ovo je moja prva stranica.
</body>
</html>
Uz malo eksperimentiranja vjerujem kako ćete pronaći točno
onu boju koja vam treba.
10
Ne zaboravite: nakon svake promjene u tekstu morate iz File
izabrati Save (kako bi se tekst snimio na disk), a zatim u
Exploreru:
za ponovno učitavanje stranice.
Uređivanje slova (teksta) i crte
Prva stvar koju moramo naučiti o pisanju teksta je da kod
pisanja na WWW stranici tekst neće prijeći u novi red ako smo
pritisnuli tipku Enter, kao što je to inače uobičajeno u drugim
programima.
Tamo gdje želimo prijelaz moramo postaviti tag <br>. Ovo je
jedan od tagova koji nema svoga para s kosom crtom za
zatvaranje nego stoji samostalno.
Na stranici s kojom isprobavamo možemo dodati nove redove:
<html>
<body
bgcolor="#FFBBBB">
Ovo je moja prva stranica.<br>
drugi red <br> treći red <br>
četvrti red
</body>
</html>
Namjerno sam drugi i treći red napisao u istom redu kako bi
vidjeli da položaj redova nije bitan nego samo gdje se nalazi
tag <br>. Na stranici to izgleda ovako:
Ovo je moja prva stranica.
drugi red
treći red
četvrti red
11
Drugi način prijelaza u novi red se koristi kada želimo pojedine
ulomke odvojiti. Tada koristimo tag <p> i njegov završni par
</p>. Sve što se nalazi između ta dva <p></p> smatra se
jednim paragrafom ili ulomkom i odvojeno je od ostalog teksta
ne samo prijelazom u novi red, nego i malo razmaknuto.
Možemo to isprobati:
<html>
<body
bgcolor="#00FFFF">
<p>Ovo je moja prva stranica.</p>
<p>drugi red </p>
<p> treći red </p>
<p>četvrti red</p>
</body>
</html>
Stranica sada izgleda ovako:
Ovo je moja prva stranica.
drugi red
treći red
četvrti red
Uočite da su razmaci između redova veći. Usput, obratite
pozornost, promijenio sam i boju podloge.
Paragraf ili ulomak može biti postavljen u sredini ili desno:
<p align="right"> ovaj tekst je desno</p>
<p align="center"> ovaj tekst je u sredini</p>
Dopišite ova dva reda na svoju stranicu poslije četvrtog reda5, a
prije </body>, pa pogledajte kako to izgleda.
Tag <b>daje debela slova</b>, a tag <i> kosa slova </i>.
5
Kliknite mišem desno od taga </p>, koji je iza riječi: "četvrti red", pa Enter
kako bi umetnuli redak.
12
Veličina i boja slova
Sa <font size="5"> određujemo veličinu slova. Naravno tag
moramo završiti s </font>. Tekst koji bude između ta dva taga
biti će zadane veličine.
<html>
<body
bgcolor="#DDFFFF">
<font size="1">Ovo je moja
stranica.</font><br>
<font size="2">Ovo je moja
stranica.</font><br>
<font size="3">Ovo je moja
stranica.</font><br>
<font size="4">Ovo je moja
stranica.</font><br>
<font size="5">Ovo je moja
stranica.</font><br>
<font size="6">Ovo je moja
stranica.</font><br>
<font size="7">Ovo je moja
stranica.</font><br>
</body>
</html>
prva
prva
prva
prva
prva
prva
prva
Pazite, opet sam promijenio boju!
Kako ne bi morali više puta pisati isti ili sličan tekst napišite
samo jedan red:
<font size="1">Ovo je moja prva stranica.</font><br>
zatim ga označite (povucite mišem preko njega – neka pocrni).
Držite jednim prstom tipku Ctrl i kratko tipnite C.
Zatim pomaknite kursor u novi red, stisnite opet Ctrl i ovaj puta
V. Tako smo kopirali red, ako to ponovite više puta dobit ćete
više istih redova. Još je samo preostalo da promijenite brojeve i
gotovo.
Boja se određuje u istom tagu pa možemo odmah dopisati:
<html>
13
<body bgcolor="#000000">
<font size="1" color="red">Ovo je moja prva stranica.</font><br>
<font size="2" color="orange">Ovo je moja prva stranica.</font><br>
<font size="3" color="yellow">Ovo je moja prva stranica.</font><br>
<font size="4" color="lime">Ovo je moja prva stranica.</font><br>
<font size="5" color="green">Ovo je moja prva stranica.</font><br>
<font size="6" color="blue">Ovo je moja prva stranica.</font><br>
<font size="7" color="violet">Ovo je moja prva stranica.</font><br>
</body>
</html>
Boja podloge!
Vodoravne crte
One služe za razdvajanje ili naglašavanje dijelova teksta (ili
jednostavno za ukras).
Imaju samo jedan tag: <hr>.
Probajte to negdje ubaciti na stranicu, na primjer prije prvoga
reda s tekstom i iza zadnjega reda teksta.
Moguće im je odrediti i boju: <hr color="neka boja">, ali onda
gube svoju trodimenzionalnost. Isto kao i fontu određujemo im
debljinu (visinu): <hr size="12">.
Ali najbolje su kada ih "ne diramo" tj. ostavimo samo
jednostavno <hr>.
Označeni popisi
<ul>
<li>prvi
<li>drugi
</ul>
14
Označeni popis izgleda na stranici ovako:
• prvi
• drugi
Slike
Ako želimo koristiti slike na svojoj stranici preporučljivo je
prvo staviti slike u isti folder sa stranicom.
Slike prepoznajemo po nastavcima bmp, gif, jpg, pcx, wmf itd.
Za početak treba nam jedna slika! Možemo se poslužiti već
gotovim slikama koje ćemo naći u folderu Windows.
Dakle:
otvorite folder Windows (My Computer, disk (C:),
Windows); nađite neku sliku, kliknite jedanput na nju;
Edit Æ Copy;
zatvori sve;
nađi svoj folder, otvori ga i:
Edit Æ Paste.
Sada otvorite svoju stranicu i njen izvorni tekst (ViewÆ
Source) i dopišite (unutar tagova <body>):
<img src="imeslike">
Morate paziti da ime slike bude točno napisano. Na primjer ako
ste kopirali sliku koja se zove circles.bmp, onda bi stranica
mogla izgledati ovako:
<html>
<body bgcolor="#BBFFDD">
Ovo je moja prva stranica sa slikom.<br>
<img src="circles.bmp">
</body>
</html>
Probajmo sada sami napraviti sliku i staviti je na svoju stranicu.
15
Budući da slike obično zauzimaju najviše memorije (a time
usporavaju učitavanje stranice na Internetu) dobro je nastojati
da budu što manje (ne samo po površini, nego po zauzeću
memorijskog prostora). Memorijska veličina slike ovisi o tipu
slike (*.gif i *.jpg zauzimaju najmanje mjesta), a ovisi i o
kvaliteti (razlučljivosti, broju boja itd.).
Napravite sliku u programu Paint.
Iz StartÆProgramsÆAccessoriesÆ Paint
Cilj nam je napraviti manju sliku nego što je inače daje
program Paint.
Nacrtajte nešto, a zatim to odrežite s alatom za označavanje:
tipni
pa označi dio slike:
Sada iz izbora Edit izaberi
Treba još dati ime slici i
spremiti je u naš folder.
Idemo za jedan ili više foldera
gore dok ne nađemo naš
folder.
Jedan folder gore.
Na primjer, ako nam je radni folder (Moja stranica) na
desktopu onda idemo do vrha gore, a zatim dvaput kliknemo na
svoj folder kako bi se otvorio. Sada još samo upišemo ime slike
(npr. lopta) i to je to!
Klik na Save
16
Kada na svoju stranicu stavite više slika onda za njih vrijedi
pravilo kao i za tekst. Ako su dovoljno male smjestit će se u
istom redu. Kako bi slike postavili u nove redove upotrijebite
tag za novi red <br> ili za odlomak <p> i </p>.
Na primjer:
<html>
<body bgcolor="#BBFFDD">
Ovo je moja prva stranica.<br>
<img src="circles.bmp"><br>
<img src="lopta.bmp"><br>
</body>
</html>
Naravno, pod uvjetom da smo napravili sliku koja se zove
lopta.bmp i da je u našem folderu.
Potražite na svom disku još slika:
Iz izbora
Start
izaberite
Search,
a zatim
For Files or
Folders.
Sada u pretraživaču zadajte
traženje slika. Tražimo sve što
ima nastavak jpg, pcx i bmp.
Znači pišemo u rubriku
Search for files or folders named:
*.jpg;*.pcx;*.bmp
i zatim:
Klik
17
U popisu ćemo dobiti sve zapise na našem disku koji su slike.
Lijevo
vidimo ime
slike,
a
desno
u
kojem se
folderu
nalazi.
Naravno, ovdje možemo direktno kopirati sliku: Kliknemo
jedanput na nju i biramo Edit Æ Copy, otvorimo svoj folder i
tamo EditÆPaste.
Zapamtite! U pretraživanju zvjezdicu koristimo kao zamjenu za
bilo koji niz slova. Na primjer ako postavimo uvjet traženja:
A*.* dobit ćemo sve zapise koji počinju slovom A.
Veličine slika
Ponekad je slika prevelika ili jednostavno želimo uskladiti
veličine dvije ili više slika koje se nalaze u istom redu. Tada
moramo zadavati veličine. To radimo unutar taga za sliku.
Postoje dva osnovna načina promjene veličine:
<img src="lopta.bmp" width="100">
i
<img src="lopta.bmp" width="50%">.
U prvom načinu širinu (width) zadajemo u broju točkica na
ekranu, a u drugom načinu u postotcima širine prozora. Znači u
drugom primjeru slika bi zauzimala pola širine prozora(50%).
18
Možemo zadavati i visinu:
<img src="lopta.bmp" height="20">
i
<img src="lopta.bmp" height="80%">.
U ovom slučaju slika zauzima 20 točkica po visini ili (drugi
primjer) 80% visine prozora u kojem se vidi.
Probajte smanjiti veličinu prozora:
, pa pogledajte
kako se mijenja slika čija je veličina postavljena s postotcima.
Ako zadamo istovremeno visinu i širinu možemo promijeniti
proporcije slike:
<img src="lopta.bmp" width="100" height="20">
Dobro je zadavati veličine slika čak i kada im ne mijenjamo
veličine, stranica se tada učita kao tekst, a tek onda slike što
ubrzava čitanje.
Slici možemo dodati i okvir:
<img src="lopta.bmp" height="50%" border="1">
Ako smo ime slike napisali netočno onda se slika neće učitati
nego ćemo dobiti samo ovakav znak:
To je jedna od najčešćih grešaka u
postavljanju slike, zato dobro
prekontrolirajte kako se slika zove i
jeste li je postavili u isti folder sa
stranicom.
Slici možemo dodati i tekst koji će se pojavljivati kada korisnik
zadrži pokazivač miša iznad slike:
<img src="lopta.bmp" alt="Ovo je lopta">
19
Slike u podlozi
Umjesto boje možemo postaviti sliku u podlogu stranice. Slika,
ako je manja će se ponavljati onoliko puta koliko ima mjesta
dok ne popuni cijelu stranicu.
To ćemo napraviti tako što ćemo u početni tag <body> dodati:
<body background="imeslike">
npr.
<body background="lopta.bmp">
Evo primjera za cijelu stranicu:
<html>
<body background="lopta.bmp">
Ovo je moja prva stranica.<br>
</body>
</html>
Linkovi
Sa jedne na drugu stranicu prelazi se pomoću linkova. Link
izgleda ovako:
<a href=”druga.htm”> tekst </a>
Riječ tekst je ono što će se vidjeti na stranici kao link. Naravno
prije toga treba napraviti drugu stranicu. Podsjetimo se kako se
to radi. Otvorimo svoj folder i u njemu kliknemo desnom
tipkom miša na prazan prostor, a zatim iz izbornika koji se
pojavi izaberemo New Æ Text Document. Promjeno mu ime u
npr. druga.htm i još kliknemo na Yes kada nas računalu upita
želimo li to!
20
Sada otvorimo drugu stranicu (klik, klik na njenu sličicu). Iz
izbornika View izaberemo Source i napišemo:
<html>
<body>
Ovo je druga stranica.<br>
Za povratak na prvu stranicu kliknite
<a href=”index.html”> ovdje </a>
</body>
</html>
Sada sve to zatvorimo, otvorimo prvu stranicu (klik,klik na
index.html) i naravno idemo u njoj dopisati link za prijelaz na
drugu stranicu:
<a href=”druga.htm”>Druga stranica</a>
Kada sad otvorimo prvu stranicu vidimo:
Druga stranica
Pokazivač miša ima
oblik šake kada ga
postavimo na link i tada
treba: "klik" i odmah smo
na drugoj stranici!
Ovo je link, plave je
boje i podcrtan. Kada
ga
prvi
puta
upotrijebimo on će
promijeniti boju.
Po tome znamo da
smo neki link koristili.
21
Kada kliknemo na link prelazimo na drugu stranicu, a na njoj
smo isto napravili link s kojim se vraćamo na prvu stranicu:
druga.htm
Ovo je druga stranica.
Za povratak na prvu stranicu kliknite ovdje
Linkovi imaju svoju standardnu boju, međutim i to možemo
promijeniti ako u tag <body> dodamo:
<body link="red" alink="green" vlink="blue">
Pri tome je samo link="boja neaktiviranog linka", alink="boja u
trenutku aktiviranja", vlink="boja nakon prve uporabe".
Naravno, boje možemo postavljati i brojčano.
Slika – link
Umjesto teksta često se koristi slika kao link. Princip je
jednostavan: tamo gdje bi upisali tekst linka upišemo tag za
sliku.
Povratak na početnu stranicu se često označava kao povratak
kući (engleski home). Zato ćemo na drugoj stranici napraviti
sličicu kuće i postaviti je kao link za povratak na prvu stranu
(na index.html).
Dakle na drugoj stranici pišemo (odmah poslije taga <body>):
<a href="indeks.html"> <img src="kuca.bmp"> </a>
Sada još samo treba nacrtati kućicu i dati joj ime kuca.bmp.
Pokrenite Paint, nacrtajte kuću (što manju – ljepše izgleda),
označite je s alatom za označavanje i snimite s EditÆCopy To.
Pogledajte na 14. stranici kako se to radi!
Ne zaboravite: slika mora biti u istom folderu kao i stranica.
22
Kada pokrenete stranicu (ako je već otvorena samo
trebala bi izgledati ovako:
)
Uočite da slika ima okvir neupotrijebljenog linka (ili
upotrijebljenog, kada ga prvi puta upotrijebimo).
Za svaki slučaj (ako ste negdje pogriješili) evo i cijelog teksta
druge stranice:
<html>
<body link="red" alink="green" vlink="blue">
<a href="indeks.html"> <img src="kuca.bmp"> </a><br>
Ovo je druga stranica.<br>
Za povratak na prvu stranicu kliknite
<a href="index.html"> ovdje </a><br>
</body>
</html>
Napravite na drugoj stranici link na treću, pa ćemo naučiti kako
se prave tablice.
Prije zadnjeg </body> dodajte:
<a href="treća.htm">treća</a>
Link može biti i na neki dio na istoj stranici. Na primjer link
koji pokazuje na kraj iste stranice se sastoji od dva dijela:
23
<a href="#kraj"> na kraj stranice</a>
je prvi dio tj. sam link,
<a name="kraj">Kraj stranice</a>
je drugi dio koji pošemo na primjer na kraju stranice. Između
ova dva linka mora biti dosta tekst (ili slika) kako bi uopće
vidjeli neki efekt.
Često se ovakvi linkovi koriste za odlazak s kraja na početak
stranice. Pokušajte!
Tablice
Prvo moramo napravit
treću stranicu. Otvorite
svoj folder, klik desnom,
izaberite NewÆ Text
Document i promijenite
mu ime u treca.htm
(naravno, još i klik na
Yes).
Klik, klik, otvorimo treću –
praznu stranicu i iz izbora ViewÆ Source kako bi dobili
izvorni tekst stranice.
Sada napišite:
<html>
<body>
<table border="1">
<tr><td>tablica</td></tr>
</table>
</body>
</html>
24
Prvo, objašnjenje:
<table> je početak tablice, border="1" se može i izostaviti, ali
onda ćemo dobiti nevidljivu (bez okvira) tablicu.
<tr> i njegov par </tr> je red tablice,
<td> sa svojim </td> je polje (ili ćelija) tablice i on ide unutar
para <tr></tr>.
Između <td> i </td> mora nešto pisati inače se polje neće
vidjeti. Ako baš moramo napraviti prazno polje onda između
ubacujemo <td>&nbsp</td> .Ovo &nbsp označava jedan
razmak.
Napravili smo tablicu koja ima samo jedno polje (to baš i nije
neka tablica). Veću tablicu ćemo napraviti kopiranjem, najprije
unutar redova, a zatim redova.
Označite kao u primjeru:
<tr><td>tablica</td></tr>
Zatim držite stisnutu tipku Ctrl i tipnite tipku C .
Sada je računalo zapamtilo što hoćete kopirati, pomaknite
kursor između </td> i </tr>.
Držite stisnutu tipku Ctrl i tipnite tipku V .
Zapamćeni tekst se pojavljuje na novom mjestu.
Ponovite Ctrl i V još jedanput.
Sada bi red trebao izgledati ovako:
<tr><td>tablica</td><td>tablica</td><td>tablica</td></tr>
Označite cijeli red, upotrijebite Ctrl i
C , (računalo zapamti
tekst) postavite kursor na kraj reda, a zatim s Enterom
napravite novi red.
25
U novom redu ponovite Ctrl i V
, još jedanput novi red i
opet Ctrl i V .
Sada imamo tri reda sa po tri ćelije tablice. Snimite
(FileÆSave) pa pogledajte kako to izgleda, a zatim se opet
vratite na tekst. U svakom polju piše riječ "tablica" što naravno
možemo promijeniti i upisati proizvoljan tekst, polje će se širiti
prilagođavajući se novom tekstu.
Pokušajte prema zadanom primjeru napraviti tablicu rasporeda
sati:
ponedjeljak utorak srijeda
1. Hrv
Gla Hrv
2. Mat
Hrv Tzk
3. Lik
Mat Mat
4. Tzk
Pri
Pov
5. Pri
Zem Eng
Kako napraviti tablicu koja ide preko cijele stranice?
To je jednostavno, samo treba u početni tag tablice dodati
width="100%". Ovako:
<table border="1" width="100%">
Ako napišete "50%" imate stranicu na pola širine prozora itd.
Boje polja i redova u tablici
Svaki red tablice može imati neku zadanu boju, dovoljno je u
početnom tagu tog reda dodati npr. <tr bgcolor="silver">
Isto tako možemo postaviti i boju pojedinog polja ako u
njegovom početnom tagu napišemo npr. <td bgcolor="red">.
26
Napravite šahovnicu!
Ideja! Napravi prvi red, zatim ga kopiraj i obriši prvo
polje (tako će se drugo koje je bijelo pomaknuti na
njegovo mjesto), dodaj zadnje bijelo.
Zatim označi ta dva reda i kopiraj ih dva puta i na kraju
obriši šesti, nepotreban red.
Prazna polja sadrže &nbsp.
Postotkom širine tablice odredi širinu polja!
Slike u tablici
Tablice često sadrže i slike. Postavljamo ih jednostavno tako da
upišemo tag slike u polje tablice tj. između dva <td></td>.
Evo primjera:
<table>
<tr>
<td><img src="prva.bmp"></td>
<td><img src="druga.bmp"></td>
<td><img src="treća.bmp"></td>
</tr>
</table>
Obratite pozornost, slike su u istom redu bez obzira što smo ih
u izvornom tekstu napisali u tri reda, jer su između dva <tr> što
određuje red.
Naravno, prije nego što ovo pogledate, morate napraviti slike
("prva.bmp", "druga.bmp", "treća.bmp") i snimiti ih u svoj
folder.
Kako postaviti da sve slike budu iste visine?
Najjednostavnije je zadati visinu (ne u postotcima):
<td><img src="prva.bmp" height="100"></td>
<td><img src="druga.bmp" height="100"></td>
<td><img src="treca.bmp" height="100"></td>
27
Slika može biti i podloga tablice, reda ili polja u tablici.
Za ovu priliku napravite (s programom za crtanje) neku malu
sličicu, na primjer jabuku.bmp
. Ne zaboravite, treba je
označiti (što bliže jabuci) i snimiti s EditÆ Copy To, a ne s
uobičajenim načinom FileÆSave. Isto tako treba obratiti
pozornost za je snimimo u svoj folder, onaj gdje nam je
stranica.
Za vježbu napravite još jednu sličicu i snimite je na isti način.
.
Na primjer kruška.bmp
Sada napišemo kod stranice:
<html>
<body>
<table border="1" width="100%" height="50%">
<tr>
<td background="jabuka.bmp">1</td>
<td background="kruška.bmp">2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
Obratite pozornost:
Tablica je postavljena na 100% širine stranice i 50%
visine stranice.
U poljima su upisani brojevi: 1, 2 i 3 tek toliko da nešto
piše inače se polja ili ne vide ili su nepravilno prikazana.
28
U trećem polju nisam postavio nikakvu sličicu da
vidimo razliku između praznog polja i onog sa sličicom.
Sličice se umnožavaju prema veličini polja - da su polja
veća bilo bi više sličica.
Na sličan način možete postaviti sličice u podlogu cijele
tablice. Tada treba u tagu <table> dopisati:
<table … background="jabuka.bmp">
Na mjestu tri točkice je ono što smo do sada već napisali u tom
tagu.
Nevidljive tablice
Osim vidljivih često se koriste i nevidljive tablice. Njih je još
jednostavnije napraviti nego vidljive: dovoljno je u tagu
<table> napisati border="0". Još jednostavnije ne napisati
uopće border, dakle jednostavno: <table> i to je nevidljiva
tablica.
Za što to služi?
Prva stvar je tekst u više stupaca. Već smo rekli da se polje
tablice "rasteže" prema tome koliko teksta upišemo u njega.
Napravimo tablicu s dva polja (jedan red) i ono što hoćemo da
nam bude u lijevom stupcu upišemo između tagova prvog
polja, a ono što će biti u desnom stupcu između tagova drugog
polja:
<html>
<body>
<table width="100%">
<tr>
<td><h1>naslov</h1>tekst u lijevom stupcu </td>
<td>desni stupac i njegov tekst</td>
</tr>
</table>
29
</body>
</html>
Kao što se iz primjera vidi u polju, uz tekst možemo postavljati
i različite elemente za formatiranje (oblikovanje) teksta kao što
je <h1> za naslov, <format…> itd.
Druga stvar koju možemo ostvariti s nevidljivom tablicom je
postavljanje slike lijevo ili desno od teksta. Uostalom možemo
postaviti sliku na bilo koje mjesto u tekstu, pri čemu je slika u
jednom polju tablice, a tekst u ostalim poljima.
Drugi primjer je postavljanje crte između stupaca teksta.
Znamo da je vodoravnu crtu lako dobiti s <hr>, ali kako
postaviti okomitu crtu?
<html>
<body>
<table width="50%">
<tr>
<td><h1>naslov</h1>tekst u lijevom stupcu </td>
<td bgcolor="silver" width="1"></td>
<td valign="top">desni stupac i njegov tekst</td>
</tr>
</table>
</body>
</html>
Srednje polje tablice, čija je boja postavljena na "silver" i širina
na "1" predstavlja zapravo crtu između stupaca.
U drugom <td> dopisno je valign="top" što je zapravo
vertikalno poravnanje (align) postavljeno na vrh (top).
30
Ako vam se čini predebela crta probajte ovo: u Paintu nacrtajte
tanku crticu, odrežite je i snimite s EditÆCopy To i postavite u
srednje polje tablice kao sliku u podlozi:
<td background="crtica.bmp" width="5"></td>
Ako odmah ne dobijete crtu morate malo eksperimentirati sa
širinom (width). Postavite veći broj ako ne dobijete crtu, ili
manji broj ako ste dobili dvostruku crtu.
Spajanje polja u tablici
Za spajanje polja u tablici koristimo se s rowspan i colspan
unutar taga td. Riječ span se može prevesti kao prespojiti ili
premostiti, pa tako s rowspan="2" spajamo dva "row-a",
odnosno stupca:
<table border="1" width="100%">
<tr><td rowspan="2">1</td><td>2</td></tr>
<tr><td>3</td></tr>
</table>
rezultat je:
1
2
3
Dakle, u polju broj 1 postavljeno je rowspan="2" što znači da
se ono spaja tj. premošćuje dva susjedna retka.
Ako želimo spajanje po stupcima onda u slijedećem redu
moramo imati odgovarajući broj polja (da se ima što
premostiti).
31
<table border="1" width="100%">
<tr><td colspan="2">1</td></tr>
<tr><td>2</td><td>3</td></tr>
</table>
Sada to izgleda ovako:
1
2
3
I na kraju kombinacija:
<table border="1" width="100%">
<tr><td rowspan="3">1</td><td>2</td><td>3</td></tr>
<tr><td colspan="2">4</td></tr>
<tr><td colspan="2">5</td></tr>
</table>
što daje rezultat:
1
32
2
4
5
3
Pokretna slova
To se ponekad zove i "trčeća slova". Radi se o tekstu koji ide s
desna u lijevo ili na neki drugi način preko stranice.
Tag je jednostavan:
<marquee> ovaj tekst trči </marquee>
Možemo ga staviti bilo gdje na stanici, a obično se stavlja
negdje u gornjem dijelu.
Ako ga stavite u polje tablice, onda će se tekst kretati samo u
tom polju (pazite da je polje dovoljno široko).
<html>
<body>
<table width="100%">
<tr>
<td><h1>naslov</h1>tekst u lijevom stupcu </td>
<td background="crtica.bmp" width="5"></td>
<td width="50%"><marquee>desni stupac i njegov
tekst</marquee></td>
</tr>
</table>
</body>
</html>
Kretanje ne mora biti samo s desna u lijevo, obrnuto je:
<marquee direction="right">tekst</marquee>
33
Odozdo prema gore je direction="up", a prema dolje
direction="down".
Ako vam se čini kako tekst ide prebrzo možete ga usporiti s na
primjer:
<marquee scrolldelay="1000">tekst</marquee>
Naravno, možete ga i ubrzati ako smanjite broj.
U slučaju kada želite da tekst prođe samo jedanput i zatim stane
postavite:
<marquee behavior="slide">text</marquee>
Za tekst koji se kreće lijevo – desno napišite:
behavior="alternate"
Ako hoćete da tekst lagano klizi dodajte:
scrollamount="1"
ali to ga dosta uspori.
I na kraju, boju podloge za "trčeća slova" postavljamo s
bgcolor, na primjer:
<marquee bgcolor="aqua" >proba</marquee>
Boju, veličinu i druge osobine slova možemo regulirati unutar
taga <marquee> na uobičajeni način tagom <font> ili <h1> i
slično:
<marquee><font color="red"> tekst</font></marquee>
34
Podijeljena stranica
Svoju stranicu možemo podijeliti u više dijelova stranica.
Smisao ovakve podjele je u tome što u jedan dio ovako
podijeljene stranice možemo učitavati nove stranice dok se
drugi dio ne mijenja. Obično prvi dio koristimo kao izbornik (s
linkovima), a u drugi dio učitavamo izabrane stranice.
Za ovakvu organizaciju stranice moramo napraviti 4
stranice:
podjela.htm – stranica u kojoj je određena podjela
izbornik.htm – stranica iz koje biramo slijedeće dvije
prva.htm
druga.htm
Krenimo redom. Podjelu određujemo tagom <frameset>
u kojem dodajemo koliko će biti široki stupci:
<frameset cols="20%,80%">
U ovom primjeru imamo podjelu na dva stupca, od kojih
prvi zauzima 20% širine prozora, a drugi 80%.
Zatim moramo odrediti koje stranice se učitavaju u stupce
tagom <frame src=”ime_stranice”>.
I na kraju, završavamo s </frameset>.
Pogledajmo primjer:
podjela.htm
<html>
<frameset cols="20%,80%">
<frame src="izbornik.htm">
<frame src="prva.htm" name="glavna">
</frameset>
</html>
Prvi stupac (lijevi) je širok 20%, a u njega se učitava
stranica izbornik.htm. Drugi stupac je širok 80% i u njega se
35
učitava prva.htm. Drugom stupcu smo još dodijelili i ime:
name=”glavna”. To radimo u onom slučaju kada želimo iz
jednog stupca (u našem primjeru izbornik.htm) mijenjati
stranice u drugom stupcu.
Sada napravite 4 stranice:
Otvorite stranicu podjela.htm i u njen source upišite
gornji tekst. Obratite pozornost da ova stranica nema svoj
<body>, dakle ona služi samo za određivanje podjele, a sama
ne sadrži ništa.
U stranici izbornik.htm napravimo dva linka za stranice
prva.htm i druga.htm.
izbornik.htm
<html>
<body>
<a href="prva.htm" target="glavna">prva</a><br>
<a href="druga.htm" target="glavna">druga</a>
</body>
</html>
U tagu <a href=... dodali smo nešto novo:
target=”glavna”. Riječ target označava cilj, kamo će se učitati
izabrana stranica (sjećate se – drugom stupcu smo dali ime
“glavna”). Bez ovoga stranice prva i druga bi se učitale na
mjesto izbornika.
Sada još ostaje samo napraviti stranice prva i druga kako
bi vidjeli razliku između njih.
Evo primjera za prva.htm:
36
<html>
<body bgcolor="aqua">
prva stranica
</body>
</html>
I za druga.htm:
<html>
<body bgcolor="#ffffaa">
druga stranica
</body>
</html>
Otvorite stranicu podjela.htm i pogledajte kako to izgleda!
Naravno izbornik možemo proširiti uvođenjem novih stranica,
a isto tako i njega možemo malo urediti dodavanjem različitih
elemenata.
Ako je izbornik malo veći, kako bi skratili pisanje, možemo se
koristiti tagom <base target="glavna"> koji dodajemo prije
linkova i onda za sve važi isti ciljani okvir.
Ovako bi, na primjer, izgledao preuređeni izbornik.htm:
<html>
<body bgcolor="silver">
<hr>
<base target="glavna">
<a href="prva.htm" >prva</a><br>
<a href="druga.htm">druga</a>
<hr size="5">
</body>
</html>
Bitno je uočiti <base target="glavna">, ostalo su “kozmetički”
dodaci.
Ponekad želimo podijeliti stranicu vodoravno. Za to je dovoljno
promijeniti riječ cols u rows u tagu
37
<frameset rows="20%,80%"> i to naravno na početnoj stranici
koja postavlja podjelu, dakle u našem primjeru: podjela.htm.
Sada ona izgleda ovako:
<html>
<frameset rows="20%,80%">
<frame src="izbornik2.htm">
<frame src="prva.htm" name="glavna">
</frameset>
</html>
Kada pogledate stranicu vidite vodoravnu podjelu, međutim
izbornik se ne vidi dobro pa ćemo i njega promijeniti tako što
ostavljamo linkove u istom redu, s jednim razmakom između
(&nbsp).
Izbornik sada izgleda ovako:
<html>
<body bgcolor="silver">
<base target="glavna">
<center>
<a href="prva.htm" >prva</a> &nbsp
<a href="druga.htm">druga</a>
</center>
</body>
</html>
Obratite pozornost i na tag <center> koji do sada nismo
koristili, a koji postavlja tekst u sredinu (centralno poravnanje).
Naravno moguće je koristiti obje podjele (vodoravnu i
okomitu) na istoj stranici. Obično u tom slučaju u gornji
vodoravni dio stavimo neku reklamu, sličicu i tekst (tzv.
baner).
Stranica podjela.htm:
38
<html>
<frameset rows="20%,80%">
<frame src="treca.htm">
<frameset cols="20%,80%">
<frame src="izbornik.htm">
<frame src="prva.htm" name="glavna">
</frameset>
</html>
<frameset rows="20%,80%"> dijeli stranicu po visini, a
<frameset cols="20%,80%"> dijeli po širini.
Ne zaboravimo napraviti i stranicu koja se zove treca.htm jer
nam ona treba za gornji vodoravni dio.
Glazba na stranici
Svoju stranicu možemo i ozvučiti, tj. dodati joj glazbu. Prije
svega, naravno moramo pronaći odgovarajući glazbeni zapis.
Potražite ga na svom disku. O traženju pogledajte poglavlje
Slike, strana 15.
Glazbeni zapisi imaju nastavak mid pa ćemo u pretraživaču
napisati:
Search for files or folders named:
*.mid
Kada pronađete neki mid zapis kopirajte ga u svoj folder isto
kao što smo i slike kopirali.
Zatim pišemo stranicu:
<html>
39
<head>
<bgsound src="testsnd.mid" loop="infinite">
</head>
<body>
<center> ovo je glazbena stranica </center>
</body>
</html>
Tag koji aktivira glazbu sastoji se od dva dijela:
<bgsound src="testsnd.mid" postavlja koji će se zapis slušati,
a - loop="infinite"> koliko će to trajati (u ovom slučaju
beskonačno –infinite).
Video zapisi na stranici
Video zapise možemo staviti na svoju stranicu, ali s njima treba
biti oprezan jer zauzimaju dosta mjesta i zbog toga se preko
Interneta sporo učitavaju. Savjet je: video-da, ali što kraći.
Za probu možete ih naći na instalacijskom CD-u Windowsa i
naravno treba ih kopirati u svoj folder. Nastavak im je *.mpg ili
*.avi.
Postavljaju se slično kao slika:
<img dynsrc="gogs.mpg" start="fileopen" width="40%"
loop="infinite">
Dakle:
dinasrc="ime_zapisa"
start="fileopen"
- zapis se odmah pokreće
width="40%"
- zauzima 40% širine prozora
loop="infinite"
- beskonačno se ponavlja. Inače ovdje
umjesto infinite možete staviti broj ponavljanja npr. 1.
40
Crtanje u Wordu
Do sada smo za crtanje koristili program Paint, međutim crtati
možemo i u programu za pisanje Word. Pokrenite Word
(StartÆProgramsÆMicrosoft Word).
Ako nije uključen izbornik za crtanje uključite ga s tipkom
ili iz izbornika PogledÆAlatne trakeÆCrtanje (u engleskoj
verziji ViewÆToolbarsÆDrawing).
Alatna traka za crtanje izgleda ovako:
Ovi simboli
predstavljaju redom: crtu, strelicu,
pravokutnik i elipsu.
Izaberite npr. crtu i povucite je mišem po prostoru ekrana. Kada
pustite tipku crta će ostati.
Elipse (krugove), strelice ili pravokutnike pravimo na sličan
način. Ukoliko držimo tipku Shift prilikom crtanja, umjesto
elipse dobijemo krug i umjesto pravokutnika – kvadrat.
Oblik koji smo nacrtali ima kvadratiće na krajevima za koje ih
možemo rastezati –
povećavati
ili
smanjivati.
Ako
nacrtani oblik držimo
za sredinu možemo ga
premještati po stranici.
Boju objekta mijenjamo
.
iz izbornika:
Promjena će se odnositi
na objekt koji je
označen tj. ima kockice
oko sebe. Kada kliknemo na trokutić pored kantice otvara se
izbornik boja.
41
Osim što možemo izabrati iz palete boju
iz Efekti ispune možemo birati različite
efekte:
Pogledajte što se krije u ostalim
izborima!
Ako nacrtani objekt ima boju ili debljinu
okolne crte koja vam ne odgovara to
možete promijeniti iz izbora:
za
za debljinu crte.
boju i
Pazite, ni jedan od ovih izbornika nije aktivan ako neki objekt
nije označen (nema kvadratiće oko sebe).
Izbornik
dodaje sjenu, a pomoću
pretvoriti u 3D tijelo.
svoj objekt možete
Iz izbornika
možete pisati ukrasnim slovima.
Isprobajte i ostale izbornike s trake alata za crtanje!
Kada smo nešto nacrtali to još treba prilagoditi za uporabu na
web stranici.
Neka objekt bude označen. Iz izbornika UređivanjeÆKopiraj
ili u engleskoj verziji EditÆCopy. Sada pokrenite program za
crtanje: StartÆProgramsÆAccessoriesÆ
.
Iz Paint-a izaberite EditÆPaste. Slika će se tu pojaviti.
Ona je označena (ima isprekidane crtice oko sebe) i tako
moramo i ostaviti. Sada izaberite EditÆ Copy To i na taj način
snimite sliku u svoj folder (dajte joj ime).
42
Napredne tehnike
On-mouse-over
Kako napraviti da se slika promijeni kada mišem pređemo
preko nje? Ovo se najčešće koristi za pravljenje dinamičkih
tipki tj. onih koje će se promijeniti kada dođemo mišem na njih.
Za primjer napravite dvije sličice. Pazite da one budu iste
veličine:
"sl1.bmp"
"sl2.bmp"
Zatim napravite novu web stranicu i napišite slijedeći tekst:
<html>
<body>
<img src="sl1.bmp" name="tipka"
onmouseover="tipka.src='sl2.bmp'"
onmouseout="tipka.src='sl1.bmp'">
</body>
</html>
Obratite pozornost na slijedeće:
• Slici dajemo ime, u našem primjeru "tipka".
• Naziv slike koja se mijenja je pod jednostrukim
navodnicima.
• U onmouseout treba vratiti prvu sliku.
43
Kako postići isti efekt ali kada se pređe mišem preko linka koji
je tekst? To je ona situacija kada se uz tekstni izbornik nalazi
sličica kao grafička oznaka. Princip je zapravo isti, samo što se
onmouseover stavlja u tag linka <a>.
<img src="sl1.bmp" name="tipka">
<a href="druga.htm"
onmouseover="tipka.src='sl2.bmp'"
onmouseout="tipka.src='sl1.bmp'">druga</a>
Budući da se veza između slike koja se mijenja i teksta
ostvaruje preko imena (u ovom primjeru "tipka") tekst i slika ne
moraju uopće biti blizu. Možemo zamisliti tekst koji objašnjava
nešto, a ovisno o dijelu teksta na koji dođemo mišem mijenja se
popratna slika uz tekst.
Ako dođemo mišem na subjekt upali se crvena, a za predikat
zelena žarulja:<br>
<a onmouseover="tipka.src='sl3.bmp'"
onmouseout="tipka.src='sl1.bmp'">Marko</a>
<a onmouseover="tipka.src='sl2.bmp'"
onmouseout="tipka.src='sl1.bmp'">ide</a>
u školu.
Za ovaj primjer napravite još i "sl3.bmp" koja će biti crvena.
Ovu tehniku je zgodno upotrijebiti za promjenu boje podloge u
tablici. Tako se može realizirati izbornik u tablici koji bi
mijenjao boju kada se dođe mišem na polje tablice:
44
<table border=1>
<tr><td onmouseover="style.backgroundColor='red'"
onmouseout="style.backgroundColor='white'">tekst
</td></tr>
</table>
Slično možemo napraviti i promjenu slike u podlozi tablice:
<table border=1>
<tr><td background="sl1.bmp"
onmouseover="background='sl2.bmp'"
onmouseout="background='sl1.bmp'">tekst</td></tr>
</table>
Slika u podlozi tablice se višestruko ponavlja ako je manja od
ćelije što može dati zanimljive efekte:
kada miš nije na polju tablice i
kada jeste.
Za ovo su korištene slijedeće dvije sličice:
"sl1.bmp"
"sl2.bmp"
Možemo promijeniti i više osobina odjednom:
<table border=1>
<tr><td onmouseover="style.color='yellow';
style.backgroundColor='blue'"
onmouseout="style.color='black';
style.backgroundColor='white'">
tekst</td></tr>
</table>
45
Kada koristimo style moramo obratiti pozornost na slijedeće:
• višestruki style se odvaja s ; (točka-zarez)
• moramo paziti na velika i mala slova, dakle:
backgroundColor, a ne backgroundcolor.
Apsulutni položaj
Svaki tekst ili sliku možemo postaviti u apsulutni položaj na
stranici određujući im udaljenost od lijevog ruba (left) i od vrha
stranice (top).
Za sliku koristimo:
<img src="zelena_jabuka.bmp"
style="position='absolute';top='100';left='200'">
a za tekst:
<div style="position='absolute';top='120';left='220'">
tekst</div>
Najbolja stvar je što na taj način možemo staviti tekst preko
slike ili manju sliku na veću. Gornje je uvijek ono što je prvo
napisano.
Zadatak:
• Nacrtajte kartu Hrvatske, a zatim postavite na mjestima
većih gradova linkove na slijedeće stranice.
• Poredajte linkove
izbornika polukružno.
• Postavi dva ista teksta
malo pomaknuta tako da
izgleda kao tekst sa
sjenom.
46
Tipke
Tipke je praktično koristiti kao izbornik za linkove na svoje
stranice. Evo primjera:
<FORM Action="druga.htm" >
<INPUT Type=submit Value="Druga stranica" style="width:
100" >
</FORM>
Rezultat je:
Savjet: tipke je najbolje organizirati u tablicu, tako ćete lakše
kontrolirati njihov položaj i međusobnu udaljenost.
Zadatak:
• Postavite nekoliko tipki u vodoravni niz.
• Postavite nekoliko tipki u okomiti niz.
Okvir s drugom stranicom
Na svoju stranicu možemo staviti okvir u kojem će se
prikazivati sadržaj druge stranice.
<html><body>
<center><iframe src="proba.htm" width="100">
Vaš browser ne podržava Iframe
</iframe></center>
</body></html>
Tekst između tagova <iframe> vidjet će samo oni čiji brovser
ne podržava ovaj tag.
47
Java script
Java script je programski jezik koji možemo koristiti na web
stranicama. Funkcije ovog jezika pišemo u tagu <script> i to
unutar oznaka za komentar.
U tagu <script> moramo naznačiti o kojem skriptnom jeziku se
radi kako bi računalo "znalo s čim ima posla":
<script Language=javascript>.
Zatim slijedi oznaka za komentar kako bi spriječili interpreter
za html da funkcije java scripta tretira kao dio stranice:
<!—
Računanje
Svaka funkcija počinje s function i imenom funkcije, na primjer
napišimo funkciju za zbrajanje:
function zbroj()
Ime funkcije je proizvoljna riječ iza koje slijede zagrade ().
Početak izvršnog dijela funkcije označen je otvorenom
vitičastom zagradom {, a njen kraj zatvorenom vitičastom
zagradom }.
Unutar tih zagrada pišemo što će funkcija raditi. U našem
primjeru zbrajamo brojeve koje smo upisali u polja text1 i
text2, a rezultat stavljamo u text3:
text3.value=text1.value*1+text2.value*1
Vrijednosti (value) text1 i text2 množimo s 1 kako bi računalo
shvatilo da želimo zbrajanje brojčanih vrijednosti. Radi se o
tome da znak + služi i za nastavljanje tekstova pa bi bez ovog
množenja s 1 zbrajajući 2 i 2 dobili 22.
Pogledajmo sada primjer:
48
<script Language=javascript>
<!-function zbroj(){
text3.value=text1.value*1+text2.value*1}
//-->
</script>
<html>
<body>
<input name=text1><br>
<input name=text2><br>
<input name=tipka1 type=button value="Zbrajanje"
language="javascript"
onclick="return zbroj()"><br>
<input name=text3><br>
</body>
</html>
<input name=text1> je tag koji služi za unos teksta (ili broja,
kao u našem primjeru).
Za zbrajanje koristimo tipku čiji tag počinje isto kao kod polja
za unos ali ima odrednicu type=button što joj zapravo daje
izgled tipke. Vrijednost value u slučaju tipke je ono što će
pisati na njoj. Zatim pišemo kojim jezikom ćemo se služiti:
language="javascript"
i na kraju slijedi poziv funkciji:
onclick="return zbroj()"
Onclick je događaj nakon kojeg se poziva funkcija (dakle kada
kliknemo tipku).
Zadatak:
• Napišite program za oduzimanje, množenje i dijeljenje.
• Napišite program koji upisano ime i prezime piše
zajedno u jednom polju s razmakom između.
49
Položaj miša
U drugom primjeru napisat ćemo program koji određuje
položaj miša na stranici.
<script language=javascript>
<!-function mis(){
text1.value=event.x;
text2.value=event.y;}
document.onmousemove=mis;
//-->
</script>
<html><body>
<input name=text1>
<input name=text2>
</body></html>
Funkcija se zove mis(). Vrijednosti event.x i event.y što je
zapravo položaj miša, dodjeljuju se u polja text1 i text2 pa tako
prikazuju na stranici. Obratite pozornost na točku zarez iza reda
instrukcije u funkciji. Zadnji red (u našem slučaju drugi) ne
mora imati ; iza sebe.
Izvan funkcije je napisano:
document.onmousemove=mis;
Taj red zapravo poziva funkciju mis i to kada se na dokumentu
tj. web stranici dogodi događaj onmousemove odnosno kada
pomaknemo miša na stranici.
50
Animacija miša
Zapravo mislimo na pojavu kada se oko pokazivača miša nešto
"vrti" dok miša mičete po stranici..
Za početak napravite malu sličicu, na primjer 10x10 točkica
(pixela) na primjer malo srce ♥ (ja sam sliku nazvao
"sl5.bmp"). Zatim napravimo stranicu:
<script language=javascript>
<!-a=0;r=50;
function mis(){
a=a+0.1;
document.slika.style.left=event.x+r*Math.sin(a);
document.slika.style.top=event.y+r*Math.cos(a)}
//-->
</script>
<html>
<body onmousemove=mis()>
<img src="sl5.bmp" name="slika"style="position:absolute">
</body>
</html>
Na početku smo postavili dvije varijable a=0 i r=50.
One su definirane izvan funkcije pa će se u memoriju učitati
odmah na početku i ostat će stalno u memoriji. Inače kada
definiramo varijable u funkciji one se pri svakom pozivu
funkcije ponovo postavljaju u memoriju. Tako bi se a=0
postavljen u funkciju svaki puta ponovo postavio na nulu, a to
nam u ovom slučaju ne odgovara jer ta vrijednost određuje
položaj sličice na orbiti oko miša i ona se mora stalno
povećavati kako bi srce kružilo oko miša. Osim toga ovako
51
definirane varijable dostupne su svim funkcijama. To zovemo
globalna varijabla.
U funkciji mis() povećavamo a za 0.1, a zatim dva slična reda:
document.slika.style.left=event.x+r*Math.sin(a);
U dokumentu (web stranici), objektu koji smo nazvali slika,
postavljamo osobinu stila koja se zove left tj. udaljenost od
lijevog ruba stranice = položaj miša po x-u (event.x) + radijus*
Math.sin(a). Ova funkcija - Math.sin(a) izračunava sinusnu
funkciju od, u ovom slučaju varijable a. Ako ne znate što su
sinusna i kosinusna funkcija evo kratkog objašnjenja:
Zakrivljena strijelica pokazuje kut a
a
Vrijednost sin(a)
Vrijednost cos(a)
Kako se kut a povećava funkcije sin(a) i cos(a) se mijenjaju
tako da se srce stalno vrti po krugu. Budući da se vrijednost
ovih funkcija mijenja od 0 do 1 množimo to s r-radijusom te
tako dobijamo vrtnju po kružnici odgovarajućeg poluprečnika r.
Ovo je zgodan način koji možete koristiti kada želite da se
nešto vrti po krugu. I to naravno ne mora biti oko miša. Ako
event.x i event.y zamijenite s nekim stalnim koordinatama npr.
200,300 onda će se srce (ili koja druga sličica) vrtiti oko te
točke. Ili ako zadate dva različita radijusa r1=50 i r2=100, pa
vrijednost sin množite s jednim, a vrijednost cos s drugim,
onda će se vrtiti po elipsi.
Zadatak:
• Napravite sliku Zemlje i Mjesec koji se vrti oko nje.
52
Slide show
Slide show je automatsko prikazivanje slika koje se smjenjuju
svakih nekoliko sekundi.
U ovom primjeru pokazat ćemo i kako napisati program u
javascriptu kao posebnu js datoteku.
To se radi kao i pravljenje nove web stranice!
Kliknimo desnom tipkom na prazno ( u folderu u kojem ćemo
pisati našu stranicu) i izaberemo New-> Text Document.
Dajmo mu ime show.js . Zatim napišemo slijedeći tekst:
grafika=new Array("sl1.bmp","sl2.bmp","sl3.bmp");
/*predučitavanje grafike*/
a1=new Image();a1.src="sl1.bmp";
a2=new Image();a2.src="sl2.bmp";
a3=new Image();a3.src="sl3.bmp";
/*kraj predučitavanje grafike*/
var i=0;
function prezentacija()
{ setInterval("animacija()",3000);}
function animacija()
{ document.images.slika.src=grafika[i];
i=i+1;
if (i>(grafika.length-1)) {i=0}
}
Prvi red: grafika=new Array("sl1.bmp","sl2.bmp","sl3.bmp");
stvara niz koji se zove grafika i ima tri varijable koje sadrže
imena slika koje ćemo prikazivati. Dakle time smo zapravo
napravili varijable: grafika[0], grafika[1] i grafika[2].
53
Predučitavanje slika ima smisla samo ako su u pitanju veće
slike. To je zapravo način da prebacimo u memoriju slike tako
da prikazivanje ide bez zastoja. Inače kod manjih slika ovaj
cijeli dio o predučitavanju možete slobodno izbaciti.
Zatim slijedi deklaracija varijable i koja će služiti kao brojač
slika:
var i=0;
function prezentacija()
{ setInterval("animacija()",3000);}
Ovu funkciju ćemo pozivati s naše web stranice. Ona ima samo
jednu instrukciju setInterval koja ima dva argumenta. Prvi je
zapravo poziv funkciji "animacija()", a drugi određuje svakih
koliko milisekundi će se ona pozivati. U našem primjeru 3000,
dakle svake 3 sekunde.
function animacija()
{ document.images.slika.src=grafika[i];
i=i+1;
if (i>(grafika.length-1)) {i=0}
}
Prvi red postavlja na document (našu web stranicu) images
(sliku) koja se zove slika (tako ćemo joj ime dati na stranici),
njen src (source-izvor) na grafika[i]. Budući da je varijabla i na
početku 0 učitava se grafika od nula (grafika[0]) tj. "sl1.bmp".
Zatim se i povećava za jedan:
i=i+1;
Kontrolira se:
"ako je( i>broja elemenata u nizu grafika-1) neka i postane 0"
if (i>(grafika.length-1)) {i=0}
54
Izraz grafika.lenght je broj elemenata u nizu, u našem primjeru
3, a kako niz ide od 0 do 2 potrebno je i ono –1.
U istom folderu napravimo i html dokument koji će prikazivati
naše slike:
<html>
<head>
<script language="JavaScript" src="show.js"></script>
</head>
<body onload="prezentacija()">
<img src="sl1.bmp" name="slika">
</body>
</html>
Vezu s datotekom javascripta obično uspostavljamo tagom
umetnutim između tagova <head>.
Poziv funkciji koja pokreće prezentaciju stavljamo u tag
<body> i definiramo da će se on pokrenuti onload tj kada se
stranica učita.
I samo još obratite pozornost na ime slike (name="slika") koje
mora odgovarati imenu u javascriptu.
Zadatak:
• Napravite animiranog čovječuljka koji hoda preko
stranice (za pomicanje upotrijebite <marquee>).
Animacija pomicanjem
Animaciju pomicanjem smo zapravo već imali, ali to je bilo
vezano za miša. Pogledajmo sada kako to izgleda neovisno o
pomicanju miša.
55
Napravimo nešto slično tagu marquee ali pod našom potpunom
kontrolom.
Napišimo javascript i nazovimo ga pad.js.
p=10
function padaj(){
p=p+5;
document.slika.style.top=p;
if(p>500) {p=0;}
}
function postavi(){
setInterval("padaj()",100)
}
Zatim napravimo stranicu:
<html>
<head>
<script language="JavaScript" src="pad.js"></script>
</head>
<body onload="postavi()">
<img src="sl5.bmp" name="slika" style="position:absolute">
</body>
</html>
56
CSS
Uvod u CSS
CSS- Cascading Style Sheet ili kako oblikovati stil na našim
web stranicama.
Koja je svrha? Pa evo nekih razloga:
• Na jednom mjestu se oblikuju sve stranice.
• Jednom promjenom možemo uređivati više stranica
odjednom.
• Sve stranice imaju isti stil što je dobro u dizajnerskom
smislu.
Ako na primjer imamo pet ili deset stranica i zaključimo kako
bi bolje bilo da imamo žuta slova na crnoj podlozi nego crna na
bijeloj to možemo jednim potezom riješiti. Ili postaviti svim
slikama plavi okvir, ili da linkovi budu zeleni itd.
Pođimo redom. Prvo: gdje se postavlja taj CSS?
Postoje tri načina:
• style elementi se mogu dodati direktno u HTML tag što
se zove "inline" style sheet.
• style sheet može biti dio HTML dokumenta
("internal" style sheet), a to podrazumijeva upisivanje
u HTML dokument u <head> područje.
• odvojeni "external" style sheet (kao datoteka) te će se
pozivati pomoću web adrese (URL-a) svaki puta kad se
HTML dokument bude učitavao. Link za odvojeni external style sheet također će se smjestiti između
<head> tagova.
57
Pogledajmo kako se to radi na slijedeća tri primjera:
Inline stil
Ovaj način smo zapravo već koristili kada smo govorili o
promjeni boje u podlozi tablice (u lekciji On-mouse-over).
pogledajmo sada samo princip:
<p style=“stil se tu definira">
Na primjer:
<p style="BACKGROUND-COLOR: limegreen">
Ovo je tekst</p>
Vidimo da se stil definira unutar nekog taga i on vrijedi do
zatvaranja tog taga.
Internal stil (definiran u <head>):
<html>
<head>
<style type="text/css">
BODY{
FONT-SIZE: 20px;
BACKGROUND: #000000;
COLOR: yellow;
FONT-FAMILY: Arial}
</style>
</head>
<body>
Tekst u dokumentu
</body>
</html>
Prvo određujemo na koji tag html-a će se odnostiti stil, u ovom
slučaju na BODY što znači praktično na cijelu stranicu. U
vitičastim zagradama pišemo što se postavlja FONT-SIZE
(veličina slova) na 20px (pixela – točkica). BACKGROUND se
58
odnosi na boju podloge, a COLOR na boju slova. I jedno i
drugo možemo postavljati brojčano ili nazivima boja.
Na kraju FONT-FAMILY: određuje vrstu fonta.
External stil (definiran u posebnoj datoteci):
Napravite tri dokumenta u Notepadu i postavite za dva
nastavak *.htm, a za treći *.css
Otvorite prvi dokument u Notepadu i napišite:
<html>
<head>
<TITLE>Naslov</TITLE>
<link href="stil.css" type=text/css rel=stylesheet>
</head>
<body>
ovo je tekst na stranici<br>
<a href="drugi.htm">link na drugu stranicu</a>
</body>
</html>
U drugom dokumentu napišite isto to (možete jednostavno
kopirati cijeli tekst) samo promijenite redak s linkom na drugu
stranicu.
<a href=“prvi.htm">link na prethodnu stranicu</a>
59
U datoteci stil.css napišite:
BODY
{ FONT-SIZE: 20px;
BACKGROUND: #000000;
COLOR: yellow;
FONT-FAMILY: Arial }
A:hover
{ COLOR: green;
BACKGROUND-COLOR: gray }
A:link
{ COLOR: white}
A:visited
{ COLOR: red }
Prvi dio (BODY) isti je kao primjer koji smo upotrijebili u
internal stilu.
A: hover je stil koji se aktivira kada mišem pređemo preko
linka, slično kao onmouseover.
A:link je stil linka, i na kraju A:visited je posjećeni link.
Evo još nekih primjera za uređenje stila:
Stil podloge:
–plava podloga, bijeli tekst:
body { background:#00ff00; color:#ffffff }
–slika u podlozi:
body { background-image: url("image.gif")}
–pozadina će ostati "statična" dok sadržaj bude scrollirao:
body { background-image: url("image.gif");
background-attachment: fixed }
60
Stil naslova:
–crna podloga, crvena slova za naslov (h1)
h1 { background:#000000; color:red }
–svi naslovi crveni
h1, h2, h3, h4, h5, h6 { background:#000000; color:red }
Uočite neke opće principe:
• prvo navodimo tag na koji će se stil odnositi,
• može se navesti više tagova u istoj definiciji;
• zatim u vitičastim zagradama definiramo stil,
• pojedine stavke stila se odvajaju s točka zarez.
Stil linkova:
A:link { color: red }
A:visited { color: blue }
A:hover { color: green }
A:active { color: lime }
Tekst oblikovan u paragrafu:
P{
FONT-SIZE: 11pt;
COLOR: #0000a0;
FONT-STYLE: normal;
FONT-FAMILY: verdana}
61
Tablica općenito:
TABLE {
BORDER-WIDTH: 10px;
border-color:#0000ff;
WIDTH: 50%
}
Polje – ćelija tablice:
TD {
FONT-SIZE: 12px;
FONT-FAMILY: Verdana, Helvetica, Geneva, Arial;
FONT-STYLE: italic;
COLOR: #ff0000;
TEXT-ALIGN: justify
}
Sve do sada navedeno odnosi se na definiranje stila pojedinih
HTML tagova, međutim možemo odrediti i svoje definicije
stila. To se zove definicija klase (class):
.naslov
{color:blue;
font-size:20pt;
font-family:arial;
text-align:center
}
.ostalo
{color:green;
font-size:10pt;
font-family:times;
text-align:justified
}
Kada ovako napisan CSS spremimo pod nazivom: nesto.css
možemo napisati HTML stranicu:
62
<html>
<head>
<link href="nesto.css" type=text/css
rel=stylesheet>
</head>
<body>
<p class=naslov>naslov</p>
<p class=ostalo>Ovo je ostali tekst,</p>
</body>
<html>
U CSS-u definiramo pojedinu klasu tako što ispred imena klase
stavimo točku.
Klasu koristimo upisujući je u tag na koji želimo da se odnosi:
<p class=naslov>Naslov</p>
63
Filteri u CSS-u
Filteri su jedna od zanimljivijih stvari u oblikovanju web
stranica. Jedna od najčešćih primjena je situacija kada u nekom
programu za crtanje napravite naslov ukrasnim slovima, a u
podlozi stranice vam je slika ili određena boja. Normalno,
želite da se podloga vidi između slova, a ne da ukrasni naslov
bude u bijelom pravokutniku. Dakle treba vam prozirnost slike
za određenu boju.
To, ali i mnoge druge stvari, mogu se riješiti filterima.
Filter:
Alpha
Blur
Chroma
Drop
Shadow
FlipH
FlipV
Glow
Grayscale
Invert
Light
Mask
Shadow
Wave
XRay
Djelovanje:
Stupanj prozirnosti.
Stvara utisk brzog kretanja.
Postavlja određenu boju prozirnu.
Sjena. Koristi se zajedno s Chroma
Okrene zrcalno-vodoravno sliku.
Okrene zrcalno-okomito sliku.
Dodaje zrakast obrub.
Pretvori u crno-bijelu sliku.
Negativ slike
Projecira svjetlost na objekt.
Napravi prozirnu masku na objektu.
Silueta oku objekta.
Valovi po x-osi ili y-osi.
Slika kao crtež.
Najbolje ćete naučiti iz primjera, napravite jednu manju sliku,
ja sam nacrtao autić i sliku nazvao "auto.bmp".
64
Primjeri filtera:
<html>
<body bgcolor="teal">
<img src="auto.bmp" style="filter:
Alpha(Opacity=50)"> Alpha
<img src="auto.bmp" style="filter:
Blur(Strength=100)"> Blur<br>
<img src="auto.bmp" style="filter:
Chroma(Color=white),Drop Shadow">
Chroma i Drop Shadow
<img src="auto.bmp" style="filter: FlipH">FlipH<br>
<img src="auto.bmp" style="filter: Invert">
Invert<br>
<table>
<tr><td style="font-size:50px">Tekst</td></tr>
<tr>
<td style="font-size:50px;filter: FlipV">
Tekst</td></tr></table>
<img src="auto.bmp" style="filter:
Wave(Add=1,Strength=1)">
<img src="auto.bmp" style="filter: XRay">XRay
<table>
<tr><td style="filter: mask(color=White);"> Filter
MASK</td>
<td style="filter: Shadow">Shadow</td>
<td style="filter: Glow(Color=red,Strength=4)">
Glow</td>
</tr>
</table>
</body>
</html>
65
Kako na Internet
Napravili smo svoju stranicu i sada je želimo postaviti na
Internet, to nam je i cilj. Za to ima više načina, a ja ću ovdje
pokazati jedan od njih.
Prvo nam treba mjesto. Mnogi davatelji usluga na Internetu
omogućavaju svojim korisnicima nekoliko megabajta
slobodnog prostora za web stranicu.
Na primjer:
Ako imate e-mail adresu otvorenu kod T-Com-a odite na:
www.t-com.hr/privatni/internet/dodatneusluge/freeweb.asp
i slijedeći upute otvorite si web prostor na njihovom serveru.
Kada to napravite treba vam još i neki program za FTP (File
Transfer Protocol). Ima ih besplatnih na Internetu ili na CD-ima
časopisa koji se bave računalima.
Kada ga prvi puta pokrenete morate postaviti osnovne
postavke:
Kliknite na Add.
66
Zatim upišite:
• Profil Name: bilo kakvo ime (nije važno)
• Host Addres: adresa servera, to je onaj dio adrese s kojom
počinje vaša web adresa, ako ste iz Zagreba i ako je adresa
kod T-Com-a onda je to: free-zg.t-com.hr (ostatak adrese
server prepoznaje po korisničkom imenu i passwordu.
• Port: ostavite 21
• Login: tu upišite svoje korisničko ime (User Name).
• Password: vaša zaporka s kojom i inače pristupate
Internetu.
• Download Path: upišite put do foldera gdje vam je stranica
na vašem disku ili ga pronađite s tipkom Browse.
Ostalo ostavite nepromijenjeno.
Sada još kliknite na Save kako bi se postavke spremile.
Prije spajanja provjerite još jednom vašu stranicu:
• jesu li svi otvoreni tagovi i zatvoreni;
• posebnu pozornost obratite na linkove i slike, serveri
obično razlikuju mala i velika slova pa se npr. slika koja se
u tagu zove "primjer.bmp", a zapravo se na disku zove
primjer.BMP neće vidjeti na Internetu (dok se na vašem
računalu vidi);
• izbacite iz foldera sve što je nepotrebno za prikaz stranice.
Često u folderu ostane slika i tekstova koje smo koristili u
pravljenju stranice, a nema smisla da sve to "smeće"
prebacujemo na server;
• provjerite veličinu foldera, većina davatelja usluga
postavlja ograničenja, pogotovo za besplatne stranice.
Sada konačno možemo na Internet. Moj je savjet da prvo
uspostavite vezu s Internetom nekim drugim programom (npr.
u Internet Exploreru - nije bitno na kojoj ste stranici). Sada
smanjite Explorer i možemo na posao.
67
U FTP-u, ako ste ga u međuvremenu zatvorili, izaberite
novostvorenu
konekciju i
kliknite na
Connect.
Sada dobijemo
prozor u kojem
vidimo folder na
serveru.
Sada možemo ili kliknuti na Upload
(strijelica prema gore)
ili paralelno otvoriti svoj folder s napravljenom stranicom i
jednostavno "odvući" mišem potrebne datoteke u folder
servera.
Upload – na server,
Download – sa servera na naš
disk.
68
Program će još neko vrijeme raditi (ovisno o veličini datoteka i
brzini vaše veze), a vi ćete vidjeti kako se pojavljuju datoteke u
folderu servera.
Kada to bude gotovo možete prekinuti vezu FTP-a sa serverom:
i zatvorit program, a zatim u Exploreru upisati punu adresu
svoje stranice i vidjeti kako izgleda na Internetu.
Sada još ostaje da svojim prijateljima objavite vašu web adresu
i to je to.
69
INDEKS:
<
D
<a href.............................20
<br> .11, 13, 14, 15, 17, 20,
21, 23, 36, 37, 44, 49
<hr> ................................14
<img src ..........................19
<li>..................................14
<marquee> ......................33
<p>............................12, 17
<table ..............................24
<ul>.................................14
debela slova ................... 13
A
Animacija miša ...............51
Animacija pomicanjem...55
Apsulutni položaj............46
B
bgcolor .....8, 10, 11, 12, 13,
14, 15, 17, 26, 30, 34, 37,
38
boja brojčano ....................9
boja slova ........................13
Boje podloge.....................8
C
crtanje .................28, 41, 42
CSS .....................57, 62, 63
70
F
folder 3, 4, 7, 15, 16, 18, 19,
20, 24, 27, 28, 39, 40, 42
Folder Options .............. 4, 5
font size .................... 13, 14
function.. 48, 49, 50, 51, 53,
54, 56
G
Glazba na stranici ........... 39
H
heksadekadski................... 9
hover .............................. 60
I
index ............... 5, 21, 22, 23
input................................ 50
J
Java script ....................... 48
K
kopiranje ......................... 25
kosa slova ....................... 13
L
R
Link na istu stranicu ....... 23
Linkovi ........................... 20
Računanje....................... 48
M
Nevidljive tablice ........... 29
novi red.. 11, 12, 13, 17, 25,
26
setInterval....................... 54
Slide show ...................... 53
Slika – link ..................... 22
slike ................................ 15
Slike u podlozi ............... 20
Slike u tablici ................. 27
Spajanje polja................. 31
O
T
okomita crta.................... 30
On-mouse-over............... 43
Označeni popisi .............. 14
Tablice............................ 24
Tipke .............................. 47
P
Veličine slika.................. 18
veza s css-om ................. 63
veza s javascriptom ........ 55
Video zapisi.................... 40
Vodoravne crte............... 14
Math ............................... 51
N
Paint................................ 16
Podijeljena stranica ........ 35
podloga tablice ............... 28
Pokretna slova ................ 33
Položaj miša ................... 50
prazno polje .................... 25
S
V
W
Web .......................... 3, 5, 9
71
Metodičke napomene
Knjiga je namjenjena učenicima od petog razreda do prvog
srednje škole (što naravno ne znači da je i drugi ne mogu
koristiti). Za rad nisu potrebni nikakvi dodatni programi, pa
učenici koji kod kuće imaju računalo mogu i sami vježbati.
Osnovni smisao nije samo naučiti praviti web stranice, to služi
samo kao motivacija, osnovno je zapravo učenje rada na
računalu, odnosno informatike. Jedan od temeljnih problema
didaktike, pa i metodike, je kako poučavati neke opće stvari, ali
tako da učenici odmah vide praktičnu primjenu onoga što uče.
To je vrlo snažan motivirajući faktor. Osim toga u procesu
pamćenja novi pojmovi ili vještine moraju se vezati za nešto
drugo (znate onu anegdotu kako matematičari pamte broj
telefona: 3 2 , 64 , log 10, itd.).
Dakle cilj je stvoriti veze u procesu pamćenja (FF0000 =
heksadekadski broj = crvena boja itd.), a rezultat možemo
odmah vidjeti na ekranu, što je bitno za motivaciju.
U prvoj lekciji ("Početak") zapravo govorimo o osnovama rada
s računalom. Novi pojmovi: My Computer, disk, folder6...
Zatim stvaranje novog foldera, dodjela imena, otvaranje
foldera, stvaranje novog tekstnog dokumenta, pitanje nastavaka
(ekstenzija) i njihov značaj (i značenje), spremanje i otvaranje
dokumenta.
Druga lekcija ima zgodnu korelaciju7 s engleskim jezikom –
nazivi boja na engleskom. U drugom dijelu iste lekcije
6
U knizi se koristim engleskim izrazima polazeći od pretpostavke kako je
lakše onima koji imaju hrvatsku verziju programa prevesti engleske izraze
na hrvatski nego obrnuto.
7
Korelacije su bitne i treba ih stalno naglašavati u nastavi jer olakšavaju
učenje (veze u pamćenju!).
72
govorimo o brojevnim sustavima. Korelacija s matematikom,
ali i s likovnim (aditivno miješanje boja – boja kao svjetlost).
Treća lekcija se odnosi na tekst i njegovo uređenje. Pojmovi
font, veličina fonta, paragraph – ulomak, označeni popisi.
Korelacija s engleskim jezikom.
U lekciji o slikama učimo o kopiranju i lijepljenju datoteka iz
jednog foldera u drugi. Zatim govorimo o nastavcima za slike,
traženju datoteka na disku i zamjenskim znakovima. Zgodna je
korelacija s matematikom u postavljanju veličine objekata
(koliko je 50%, a 25% ili 33% ?).
U priči o linkovima ponavljamo neka ranije usvojena znanja.
Kod tablica opet ponavljanje, ali neka nova znanja i vještine iz
računalstva o tipkovnim prečicama za kopiranje. Korelacija je s
engleskim, matematikom i likovnim (crtanje sličica).
S glazbom i videom na stranicama uključujemo i multimediju.
Izrada crteža u Wordu je prilika za obradu jedne specifične
teme iz rada s tekstnim procesorom. Osim toga tu je i prijenos
podataka iz jednog programa u drugi (iz Worda u Paint).
Napredne tehnike su uvod u programiranje.
Postupno, korak po korak uvodimo učenike u svijet
programiranja.
73

Download Report