Professional Documents
Culture Documents
9 Razred Informatika Pripreme
9 Razred Informatika Pripreme
PRIPREME ZA IX RAZRED
Nastavnik:
Razred i odjeljene: IX Datum: Redni br. časa:1
Predmet: OSNOVI INFORMATIKE
Nastavna oblast: Programiranje i programski jezici
Nastavna jedinica: Algoritam (pojam i osbine), faze programiranja,linijske i razgranate
algoritamske strukture
TIP ČASA OBLICI RADA NASTAVNE METODE NASTAVNA SREDSTVA
a)obrada a)frontalni a)monološka a)tekst
b)utvrđivanje b)grupni b) dijaloška b) slike
c)vježbanje c)individualni c)demonstrativna c) modeli
d)sistematizacija d)rad u parovima d)tekst d) projekcije
e) e) e)kombinovana e) udžbenik
f) f) f)istraživačka f) računar
g) g) g) g)projektor
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa programiranjem ,fazama programiranja, programskim
jezicima, algoritmima i algoritamskim strukturama
b) Funkcionalni: Sticanje praktičnih znanja i primjena istih
Očekivani rezultati:Učenici će znati šta je program,faze programiranja, programske jezike ,programe
prevodioce i algoritam i algoritamske strukture.
TOK ČASA
Uvodni dio časa:
Šta je softver i podijela operativnog softvera
Nabrojati sistemske softvere
Nabrojati korisničke ili aplikativne softvere
Šta je program
Centralni dio časa:
Program je skup naredbi u računaru napisanih po utvrđenim pravilima po kojima računar vrši
zadanu obradu podataka. Program u suštini predstavlja redoslijedndi niz instrukcija koje računar
izvršava da bi obavio zadaću prema zadanom postupku rješavanja , tj.po izrađenom algoritmu.
Program se piše u programskom jeziku. Programski jezik je sredstvo pomoću kojeg programer kreira
softver, sistemski ili aplikativni. Dakle, programski jezici omogućavaju programerima, a i iskusnijim
korisnicima, da kažu računaru šta da uradi. Svi programski jezici, kao što su npr. BASIC,COBOL,
FORTRAN, PASCAL, C, C++, itd.
Programirati znači stvarati (pisati) program u nekom od programskih jezika kao što su Pascal,
BASIC, C++ itd.
Algoritam je tačno definisan tok izvođenja nekog postupka koji se primjenjuje na skupu
podataka radi rješavanja nekog zadatka.
Osnovne osobine algoritma su :definisanost,konačnost,posjedovanje ulaza i izlaza, efikasnost i
rezultativnost.
Algoritam se prestavlja :govorom ,tabelom i dijagramom toka.
Dijagram toka prestavljaju simboli povezani usmjerenim linijama
ispitivanje uslova
vezni element
izlaz
Algoritamske strukture:
linijske algoritamske strukture
razgranate algoritamske strukture
ciklične algoritamske strukture
Linijske algoritamske strukture
1.Napisati program koji učitava vrijeme izraženo u satima ,minutama i sekundama ,a zatim
ispisuje koliko je to ukupno sekundi odnosno sati.
REM:KONVERZIJA VREMENA
CLS Start
INPUT "SATI="; H
INPUT "MINUTE="; M
INPUT "SEKUNDE="; S H,M,S
S = H * 3600 + M * 60 + S
H = S / 3600 S=H*3600+M*60+S
PRINT "SEKUNDE="; S
PRINT "SATI="; H
END
Izvršni dio programa:
SATI=? 4 S,H
MINUTE=? 35
SEKUNDE=? 45
SEKUNDE= 16545 Kraj
SATI= 4.595833
2.Automobil se kreće brzinom v za vrijeme t, koliki će put preći automobil?
REM: Pređeni put Start
CLS
v, t
INPUT “Kolika je brzina v:“, v
END t
KRAJ
Razgranati algoritami i programi
Kod razgranatih algoritamskih struktura postoje koraci koji se jedanom izvršavaju , a postoje
koraci koji se ne izvršavaju.Kod razgranate algoritamske strukture postoji korak, u kome je
potrebno donijeti odluku da li je uslov koji je postavljen, ispunjen ili nije. Kod razgranatih
algoritamskih struktura algoritam se razvija po grani.
Uslovna naredba IF
1.Napiši program kojim ćeš ustanoviti da li su dva broja jednaka ili različita!
REM poredjenje brojeva
CLS
INPUT “Unesi dva broja”; x,y
IF x<>y THEN PRINT”Razliciti su”
IF x=y THEN PRINT”Jednaki su”
END
Naredba 1 Naredba2
Često se treba izvršiti više naredbi ako je uslov ispunjen ili nije. Tada te naredbe nazivamo složenim
naredbama ili blok naredbama čiji je opšti oblik:
IF uslov THEN
blok1
ELSEIF uslov2 THEN
blok2
...
ELSEIF uslovN THEN
blokN
ELSE
blok0
END IF
1.Napisati program koji ispituje djeljivost dva broja A i B?
REM :DJELJIVOSTV DVA BROJA
CLS
INPUT "A="; A
INPUT "B="; B
IF A = 0 OR B = 0 THEN
PRINT "GRESKA"
ELSEIF A MOD B = 0 THEN
PRINT "BROJEVI SU DJELJIVI"
ELSE
PRINT "BROJEVI NISU DJELJIVI"
END IF
END
Završni dio : Ponoviti nastavnu jedinicu
Razred i odjeljene: IX Datum: Redni br. časa:2
Predmet: OSNOVI INFORMATIKE
Nastavna oblast: Programiranje i programski jezici
Nastavna jedinica: QBasic-okruženje,osnovne naredbe i ugrađene funkcije
TIP ČASA OBLICI RADA NASTAVNE METODE NASTAVNA SREDSTVA
a)obrada a)frontalni a)monološka a)tekst
b)utvrđivanje b)grupni b) dijaloška b) slike
c)vježbanje c)individualni c)demonstrativna c) modeli
d)sistematizacija d)rad u parovima d)tekst d) projekcije
e) e) e)kombinovana e) udžbenik
f) f) f)istraživačka f) računar
g) g) g) g)projektor
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa QBasic okruženjem , naredbama i ugrađenim
funkcijama
b) Funkcionalni: Sticanje praktičnih znanja i primjena istih
Očekivani rezultati:Učenici će znati osnovne naredbe i funkcije u programskom jeziku QBasic
TOK ČASA
Uvodni dio časa:
Šta je program
Faze programiranja
Šta je algoritam i algoritamske strukture
Nardbe U QBacic-u
Program je spisak naredbi, napisanih jasno, precizno i u određenom redoslijedu, spremnih na
izvršenje. Program treba napsiati tako da obezbjeđuje laku čitljivost od strane korisnika
programa.
Naredba REM
Naredba REM ne predstavlja izvršni dio programa, već služi da pojasni program korisniku i ne
odnosi se na računar.Komentar se piše u obliku.
REM:tekst
Naredba CLS
Naredba CLS se koristi za brisanje sadržaja ekrana
Naredba INPUT
Naredba INPUT služi za unošenje podataka pomoću tastature u memoriju računara. Podaci koje
unosimo dodjeljuju se promjenjivim onako kako su navedene u ovoj naredbi.
Oblik naredbe ulaza:
INPUT “Komentar” ; promjenjiva,promjenjiva….
Primjer Izlaz iz programa( prikaz na ekranu)
INPUT”Unesite broj”;broj Unesite broj?_
INPUT”Unesite broj”,broj Unesite broj_
INPUT”R=” , R=
INPUT”Unesite dva broja:” x,y Unesite dva broja: _
Naredba LET
Naredba obrade omogućava izračunavanje vrijednosti izraza i dodjeljivanje izračunate vrijednosti
promjenjivoj.
Oblik naredbe:
LET promjenjiva=izraz
LET A=8+6/2
LET Z$=“BEOGRAD”
Naredba LET se može izostaviti pri pisanju BASIC-programa
Naredba PRINT
Naredbom izlaza PRINT možemo štampati tekst naveden između znakova navoda i brojeve.
Standardne (ugrađene) funkcije u Basicu
FUNKCIJA KOMENTAR
ABS(n) funkcija daje apsolutnu vrijednost broja n
|x| = x, ako je x≥0 |x| = -x, ako je x≤0
funkcija određivanja predznaka brojnog izraza x:
SGN(x) 1, ako je x>0
SGN(x) = 0, ako je x = 0
-1, ako je x<0
SQR(x) daje vrijednost kvadratnog korijena brojnog izraza x (brojni izraz x mora biti
pozitivan, inače će se pojaviti greška u programu)
1.Napisati program koji učitava temperaturu izraženu u 0C a zatim ispisuje koliko je to Kelvina
00C=273,150K
Start
REM: KONVERZIJA STEPENI U KELVINE
CLS
INPUT "UNESITE STEPENE CELZIJUSA:"; C C
K = C + 273.15
K=C+273.15
PRINT "KELVINI="; K
K
END
Izvršni dio programa:
UNESITE STEPENE CELZIJUSA:? 35 KRAJ
KELVINI= 308.15
2.Napiši program koji će računati zbir cifara bilo koga dvocifrenog broja!
k = a / 10 k =a/10
b = INT(k) b=INT(k)
c = a MOD 10 c=a MOD 10
z=b+c z=b+c
END KRA
Izvršni dio programa: J
Unesite dvocifreni broj:? 35
Traženi zbir je=8
Kraj
2.Uraditi program koji ispisuje N prirodnih brojeva i računa sumu i proizvod ispisanih brojeva
pomopću FOR-petlje
REM:ISPIS,SUMA I ZBIR PRVIH N PRIRODNIH BROJEVA
CLS
10 INPUT "N="; N
IF N < 1 THEN GOTO 10
S=0
P=1
FOR I = 1 TO N
PRINT I
S=S+I
P=P*I
NEXT I
PRINT "S="; S
PRINT "P="; P
END
3.Uraditi program koji ispisuje brojeve u intervalu od K do N i računa proizvod i zbir ispisa
pomoću FOR-petlje
REM:ITERVAL,ISPIS,SUMA I ZBIR
CLS
10 INPUT "UNESITE INTERVAL"; K, N
IF K >= N OR K < 1 OR N < 1 THEN GOTO 10
S=0
P=1
FOR I = K TO N
PRINT I
S=S+I
P=P*I
NEXT I
PRINT "S="; S
PRINT "P="; P
END
Završni dio : Ponoviti nastavnu jedinicu
1. Napisati program koji ispisuje prvih n prirodnih brojeva, koristeći WHILE ... WEND petlju!
REM: Ispis n prirodnih brojeva
CLS
10 INPUT "Do kog broja:", n
IF n < 1 THEN GOTO 10
b=1
WHILE b <= n
PRINT b;
b=b+1
WEND
END
1. Napisati program koji računa sumu prvih n prirodnih brojeva, koristeći WHILE ... WEND
petlju!
3. Dat je interval od A do B. Napisati program, koji koristi WHILE ... WEND petlju, da računa
proizvod brojeva u tom intervalu!
DO . . . LOOP PETLJA
Sa ovom petljom moguće je realizovati petlju sa izlazom na vrhu i sa izlazom na dnu.
Primjenom kvalifikatora WHILE odnosno UNTIL, omogućavamo ponavljanje ciklusa dok je uslov
ispunjen, odnosno dok uslov nije ispunjen,
naredbipa
ćetako imamo osnovna četiri oblika ovih petlji i to:
Blok se izvršavati
DO WHILE uslov sve dok je uslov ispunjen –
blok naredbi ne mora ni jedanput
LOOP
Blok naredbi će se izvršavati
DO UNTIL uslov sve dok uslov nije ispunjen
blok naredbi
– ne mora ni jedanput
LOOP
Blok naredbi će se izvršavati
DO sve dok je uslov ispunjen -
blok naredbi
LOOP WHILE uslov bar jedanput
Blok naredbi će se izvršavati sve
DO
blok naredbi dok uslov nije ispunjen -bar
LOOP UNTIL uslov jedanput
1.Program koji ispisuje brojeve u intervalu A do B i računa zbir i proizvod pomoću DO WHILE petlje
REM:INTERVAL NIZA PRIRODNIH BROJEVA ZBIR I SUMA
CLS
10 INPUT "UNESITE INTERVAL:"; A, B
IF A => B OR A < 1 OR B < 1 THEN GOTO 10
S=0
P=1
I=A
DO WHILE I <= B
PRINT I
S=S+I
P=P*I
I=I+1
LOOP
PRINT "PROIZVOD P="; P
PRINT "ZBIR S="; S
END
2. Uraditi program koji ispisuje prirodne brojeve do N i računa proizvod i zbir pomoću DO WHILE petlje
REM:ISPIS NIZA PRIRODNIH BROJEVA, ZBIR I SUMA
CLS
10 INPUT "N="; N
IF N < 1 THEN GOTO 10
S=0
P=1
I=1
DO
PRINT I
S=S+I
P=P*I
I=I+1
LOOP WHILE I <= N
PRINT "PROIZVOD P="; P
PRINT "ZBIR S="; S
END
3.Uraditi program koji računa proizvod i zbir brojeva pomoću DO UNTIL petlje
REM:PROIZVOD I ZBIR BROJEVA
CLS
10 INPUT "N="; N
IF N < 1 THEN GOTO 10
S=0
P=1
I=1
DO UNTIL I > N
INPUT BROJ
S = S + BROJ
P = P * BROJ
I=I+1
LOOP
PRINT "PROIZVOD P="; P
PRINT "ZBIR S="; S
END
4.Uraditi program koji računa aritimetičku sredinu pomoću DO UNTIL petlje
REM:ARITIMETICKA SREDINA
CLS
10 INPUT "N="; N
IF N < 1 THEN GOTO 10
S=0
I=1
DO
INPUT BROJ
S = S + BROJ
I=I+1
LOOP UNTIL I > N
A=S/N
PRINT "ARITIMETICKA SREDINA A="; A
END
Završni dio : Ponoviti nastavnu jedinicu
Razred i odjeljene: IX Datum: Redni br. časa:7
Predmet: OSNOVI INFORMATIKE
Nastavna oblast: Programiranje i programski jezici
Nastavna jedinica: Nizovi
TIP ČASA OBLICI RADA NASTAVNE METODE NASTAVNA SREDSTVA
a)obrada a)frontalni a)monološka a)tekst
b)utvrđivanje b)grupni b) dijaloška b) slike
c)vježbanje c)individualni c)demonstrativna c) modeli
d)sistematizacija d)rad u parovima d)tekst d) projekcije
e) e) e)kombinovana e) udžbenik
f) f) f)istraživačka f) računar
g) g) g) g)projektor
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa nizovima i njihovom primjenom u rješavanju određenih
zadataka
b) Funkcionalni: Sticanje praktičnih znanja i primjena istih
Očekivani rezultati:Učenici će znati šta niz i rješavati zadatke primjenom nizova
TOK ČASA
Uvodni dio časa:
NIZOVI
Često u programiranju imamo problema, kada treba da obradimo veliki broj podataka npr. uspjeh
učenika u razredu uzimajući sve ocjene za svakog učenika. To predstavlja veliki problem jer na ulazu se
javlja veliki broj podataka. Ako u razredu imamo 25 učenika i svaki učenik ima 12 predmeta to znači da
na ulazu imamo 25*12=300 podataka. Ista situacija je i kod obrade srednje godišnje temperature kao
npr.
1 2.5; 2 3.8; 3 6.7 ....... 12 5.4
Svaki mjesec predstavlja jednu grupu podataka i ima vrijednost srednje temperature. Ako grupu
obilježimo sa T, tada prvi podatak u grupi ima popziciju T(1). Broj u zagradi naziva se indeks. Prema
tome
T(1)=2.5; T(2)=3.8 ......T(12)=5.4
U programiranju grupe podataka iste vrste se nazivaju nizovi.
Da bi se radilo sa nizovima, potrebno je znati sledeće:
1. Kako se daje ime nizu,
2. Šta može biti indeks niza,
3. Koliko je veliki niz.
Veličina niza se zadaje naredbom DIM i opšti oblik je:
DIM ime niza(cijeli broj) npr. DIM A(15)
Naredbom DIM A(15) u memoriji se rezerviše 16 mjesta, zato što vrijednosti indeksa polaze od 0 pa do
navedene vrijednosti. Pod naredbom DIM se pože definisati i više nizova kao na primjer:
DIM A(15),B(10),B$(14)
Prilikom obavljanja operacija sa indeksnim promjenljivima moramo koristiti cikluse.
Ako unaprijed znamo koliko članova ima niz onda se podaci unose u unutrašnju memoriju na sledeći
način:
DIM A(15)
FOR I=1 TO 15
INPUT A(I)
NEXT I
Ako neznamo koliko članova ima niz onda se podaci unose u unutrašnju memoriju na sledeći način:
INPUT “Broj clanova niza:“; N
DIM A(N)
FOR I=1 TO N
INPUT A(I)
NEXT I
Znači prvo preko naredbe INPUT omogućimo da se odredi broj članova niza, to činimo preko neke
promjenljive.
Program koji izdaje elemente niza na ekran ima izgled:
DIM A(15)
FOR I=1 TO 15
PRINT A(I)
NEXT I
Prilikom rješavanja problema sa nizovima u programu su jasno izdvojeni dijelovi za unošenje podataka,
njihovu obradu i za izdavanje.
1. Napiši program koji omogućava unošenje n elemenata niza i njihovo izpis!
REM:NIZ
CLS
10 INPUT”N=”;N
IF N<1 THEN GOTO 10
PRINT”UNOS ELEMENATA NIZA”
DIM A(N)
FOR I = 1 TO N
INPUT A(I)
NEXT I
PRINT“ISPIS ELEMENATA NIZA“
FOR I = 1 TO N
PRINT A(I)
NEXT I
END
2. Napiši program koji omogućava unošenje 5 elemenata programa i njihovo izdavanje!
REM:NIZ
CLS
DIM A(5)
FOR I = 1 TO 5
INPUT A(I)
NEXT I
FOR I = 1 TO 5
PRINT A(I)
NEXT I
END
3.Napisati program koji ispisuje parne elemente niza od n elemenata
REM : PARNI CLANOVI NIZA
CLS
10 INPUT "BROJ CLANOVA NIZA:"; N
IF N<1 GOTO 10
DIM A(N)
FOR I = 1 TO N
INPUT A(I)
NEXT I
PRINT: PRINT "PARNI CLANOVI NIZA"
FOR I = 1 TO N
IF A(I) MOD 2 = 0 THEN
PRINT A(I); "";
END IF
NEXT I
END
4.Program računa aritimetičku sredinu niza i upoređuje manje i veće članove niza sa ar.sredinom
5.Dat je niz od n brojeva. Napisati program koji računa razliku proizvoda i zbira brojeva tog niza.
Brojevi su proizvoljni.
Rad sa grafikom
Najmanji grafički objekat je tačka, odnosno piksel. Svaki piksel određen je svojim kordinatama , koje se
navode u obliku uređenog para (x,y)
Tačku crtamo koristeći naredbu PSET, u obliku
Linija
Line(X,Y)-(X1,Y1)
1.Napisati program koji crta liniju
SCREEN 12
LINE(100,100)-(200,100)
END
2.Napisati program koji crta pravougaonik
SCREEN 12
LINE(100,100)-(200,100),4
LINE STEP(0,50),4
LINE(200,150)-(100,150),4
LINE STEP(0,-50),4
END
3. Napisati program koji crta pravougaonik
SCREEN 12
LINE(100,100)-(200,100),4
LINE(200,100)-(200,150),4
LINE(100,150)-(100,150),4
LINE(100,150)-(100,100),4
END
Slučajni brojevi RND
RND je specijalna funkcija koja nam daje nasumičan broj između 0 i 1. Možemo koristiti ovo u igrama da malo
začinimo atmosferu. RND je savršen za bacanje kockica ili novčića. Najpre da vidimo RND u akciji:
CLS
PRINT RND
PRINT RND
Ovaj program će štampati RND dva puta. Primetite da ćete dobiti dva broja koji deluju nepredvidivo i nasumično.
Ali pokušajte da ponovo pokrenete program. Dobićete iste "nasumične" brojeve. Ovo znači da bi vaše igre uvek
bile iste svaki put kada ih korisnik pokrene. Srećom, postoji način da se ovo sredi.
RANDOMIZE TIMER
Upotreba RANDOMIZE TIMER-a postaraće se da nasumični brojevi koje dobijate budu drugačiji svaki
put kada pokrenete. Probajte ovo:
CLS
RANDOMIZE TIMER
PRINT RND
PRINT RND
Korisni nasumični brojevi
Nasumični brojevi između 0 i 1 nisu baš naročito korisni. Za igru će vam možda trebati nasumični broj između 1 i 6,
kao kada bacate kockice. Da biste dobili nešto korisnije, koristićemo matematiku. Srećom, kompjuteri su veoma
dobri u matematici.
Postoje dva problema koja moramo da rešimo da bismo dobili rezultate koje želimo. Prvo, niz nasumičnih brojeva
mora da bude proširen od 0 do 1 u od 1 do 6. To je lako uraditi na ovaj način:
CLS
RANDOMIZE TIMER
PRINT RND * 6 + 1
PRINT RND * 6 + 1
Množenjem sa 6, povećavamo opseg na 0 do 5. Dodavanjem 1 menjamo opseg u 1 do 6. Međutim, još uvek
postoji problem. Sve to vezano za decimale. QBASIC-ova INT funkcija može da se koristi za pretvaranje
decimalnog broja u ceo broj.
CLS
RANDOMIZE TIMER
PRINT INT(RND * 6 + 1)
PRINT INT(RND * 6 + 1)
Kocka je bačena
Evo programa koji baca dve kockice i štampa vrednost obe. Promenljive Kocka1 i Kocka2 koriste se za držanje
vrednosti svake kocke pre štampanja. U pravoj igri, Kocka1 i Kocka2 iskoristiće se na neki pametan način da se
promeni ishod igre.
CLS
RANDOMIZE TIMER
INPUT "Press ENTER to roll dice...", A$
PRINT
Die1 = INT(RND * 6 + 1)
Die2 = INT(RND * 6 + 1)
PRINT "Die 1: "; Die1
PRINT "Die 2: "; Die2
Završni dio : Ponoviti nastavnu jedinicu
Razred i odjeljene: IX Datum: Redni br. časa:10
Predmet: OSNOVI INFORMATIKE
Nastavna oblast: Programiranje i programski jezici
Nastavna jedinica: Programiranje i programski jezici-sistematizacija
TIP ČASA OBLICI RADA NASTAVNE METODE NASTAVNA SREDSTVA
a)obrada a)frontalni a)monološka a)tekst
b)utvrđivanje b)grupni b) dijaloška b) slike
c)vježbanje c)individualni c)demonstrativna c) modeli
d)sistematizacija d)rad u parovima d)tekst d) projekcije
e) e) e)kombinovana e) udžbenik
f) f) f)istraživačka f) računar
g) g) g) g)projektor
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa provjerom stečenog znanja iz programiranja u QBasic
jeziku
b) Funkcionalni: Sticanje praktičnih znanja i primjena istih
Očekivani rezultati:Učenici će znati pisati programe u QBasicu iz linijskih , razgranatih i cikličnih
algoritamskih struktura ,nizova i znakovnih podataka.
TOK ČASA
1.Napisati progran koji ispisuje činioce učitanog broja
REM:CINIOCI BROJA
CLS
INPUT "UNESI BROJ"; N
FOR I = 2 TO N / 2
B=0
FOR D = 2 TO I / 2
IF I MOD D = 0 THEN B = B + 1
NEXT D
IF B = 0 THEN
WHILE N MOD I = 0
PRINT I;
N=N/I
WEND
END IF
NEXT I
END
PRIMJER:
UNESI BROJ? 14
2 7
2.Napisati program za određivanje zajedničkog sadržioca dva broja
REM:ZAJEDNICKI SADRZIOC
CLS
10 INPUT "X,Y"; X, Y
IF X = 0 OR Y = 0 THEN GOTO 10
NZS = X * Y
M = NZS
FOR I = 1 TO M
IF I MOD X = 0 AND I MOD Y = 0 THEN NZS = I: GOTO 20
NEXT I
20 PRINT "NZS("; X; ","; Y; ")= "; NZS
END
PRIMJER:
X,Y? 0,4
X,Y? 2,0
X,Y? 3,4
NZS( 3 , 4 )= 12
Rasterska grafika
Kvalitet jedne rasterske slike određuje ukupan broj piksela (rezolucija slike) kao i broj vrednosti za svaki
pojedinačni piksel (dubina boje). Ako je dubina boje veća, više se nijansi može prikazati, što znači da
time dobijamo bolju sliku kao i verodostojniji prikaz iste. Slike zahtevaju mnogo memorije, pa se zbog
toga koriste razne vrste kompresije. Svaka boja pojedinog piksela je posebno definisana tako da
(primera radi) RGB - Red Green Blue slike sadrže tri bajta po svakom pikselu, a svaki bajt sadrži jednu
posebno definisanu boju.
Rasterska slika se ne može povećati bez gubitka kvaliteta, što nije slučaj sa vektorskom grafikom.
Rasterska grafika je više praktičnija nego vektorska grafika za fotografe i obične korisnike. Vektorsku
grafiku koriste grafički dizajneri i DTP (Desktop Publishing) urednici. Rasterizacija predstavlja proces
renderovanja iz vektorskog oblika slike u rasterski i ona je prilično jednostavna. Nasuprot tome,
vektorizacija (renderovanje iz rasterskog u vektorski oblik slike) je prilično veliki posao, jer zahveva
mukotrpno praćenje kontura i oblika na bitmapi, na bazi razlike boja piksela.
Među editorima za rasterske slike najpoznatiji je čuveni Photoshop kompanije Adobe. Naravno, postoje i
mnogi drugi: PhotoStudio, KDE, GIMP, GrafX2, imageMagick, Ulead PhotoImpact itd.
TOK ČASA
Uvodni dio časa:
Ponoviti elemente programskog prozora
Crtanje mnogougla
Alatka-Polygon, a zatim pritisnite lijevi taster miša i
držite ga dok vučete po podlozi. Za dorade potrebno je
selektovati objekati ,a zatim izabrati alatku na liniji
alatki za kontrolisanje
Crtanje linija
Alatka- Freehand tool, a zatim pritisnite lijevi taster miša i držite ga dok vučete po podlozi. Za
dorade potrebno je selektovati objekati ,a zatim izabrati alatku na liniji alatki za kontrolisanje
Rad sa čvorovima
Dvoklik na duž formira se čvor ,selektovani čvor
ima izgled crvenog kvadrata a zatim izabrati
alatku na liniji alatki za kontrolisanje
Uvoz grafike
File –Import- Otvara se prozor Import-Izbor grafike-
Import-Kliknuti na radnu površinu
Izvoz grafike
Selektovati objekat-File –Export-izbor lokacije-Export
Otvaranje novog dokumenta:File-New
Alati za crtanje-Toolbox
Pick tool
Shape tool
Zoom Tool
Freehand tool
Rectangle tool
Elipse tool
Polygon tool
Text tool
Fill tool
Outline tool
Shapes tool
Table tool
Spirale tool
Rad sa čvorovima
Rad sa tekstom
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa HTML jezikom i strukturom jezika
b) Funkcionalni: Sticanje praktičnih znanja i primjena istih
Očekivani rezultati:Učenici će znati primjenu i strukturu HTML jezika
TOK ČASA
Razred i odjeljene: IX Datum: Redni br. časa:18
Predmet: OSNOVI INFORMATIKE
Nastavna oblast: Osnove HTML jezika
Nastavna jedinica: Uvod u HTML ,struktura HTML dokumenta,boje i snimanje dokumenta
TIP ČASA OBLICI RADA NASTAVNE METODE NASTAVNA SREDSTVA
a)obrada a)frontalni a)monološka a)tekst
b)utvrđivanje b)grupni b) dijaloška b) slike
c)vježbanje c)individualni c)demonstrativna c) modeli
d)sistematizacija d)rad u parovima d)tekst d) projekcije
e) e) e)kombinovana e) udžbenik
f) f) f)istraživačka f) računar
g) g) g) g)projektor
HTML je programski jezik koji se koristi za kreiranje dokumenata na World Wide Web-u ( www ). HTML
se koristi za stvaranje hipertekstualnih datoteka (datoteka koje sadržavaju linkove). HTML komande se
pišu u vidu tzv. tag - ova.
Jedan tag je u komanda koja govori našem browseru što i kako napraviti tj. na koji način prikazati
sadržaj naših stranice. HTML tagovi su "case insensitive" tj. svejedno je da li ih pišemo malim ili velikim
slovima.
Tagovi se pišu unutar oznaka "<" i ">" (bez znakova navoda) npr: <html>. Ovaj tag se nalazi na početku
svakog HTML dokumenta i on govori našem browseru da je datoteka koju je upravo počeo učitavati baš
HTML dokument i da kao takvog treba i prikazati.
Na kraj HTML dokumenta se stavlja završni HTML tag:</html>. Ovaj tag govori browseru da je to kraj
našeg HTML dokumenta. Većina tagova ima i početni i završni tag.
Završni tag se dobiva dodavanjem znaka "/" i označava mjesto na kojem prestaje djelovanje početnog
taga.
Svaki HTML dokument se sastoji od dva dijela: zaglavlja (engl. head) i tijela (engl. body). Zaglavlje se
odvaja tagovima <head> i </head>, a tijelo dokumenta tagovima: <body> i </body>. Tako ćemo u
okviru našeg zaglavlja svakako staviti tagove: <title> i </title> između kojih ćemo staviti naslov naše
stranice
To nije naslov koji će se pojaviti u tijelu naše stranice već onaj naslov koji se pojavljuje u naslovnoj liniji
browsera. Pogledajmo naslovnu liniju našeg browsera - ispred imena browsera
vidjećemo da piše: "HTML-Uvod". To je zato što smo u zaglavlju ovog dokumenta napisali:
Dakle, svaki HTML dokument mora imati slijedeću strukturu
<title>HTML-Uvod</title>
<html>
<head>
<title>Ovdje stavimo naziv naše Web stranice</title>
</head>
<body>
Ovdje unosimo sve ono što želimo da se prikazuje na stranici
</body>
</html>
Otvorimo novi dokument u Notepad-u i upišimo gornju strukturu HTML dokumenta u kojem ćemo staviti
naslov po želji (npr. naše osobno ime), a između body tagova stavimo neki tekst (npr. "Moj prva Web
stranica"):
<html>
<head>
<title>Ucenik</title>
</head>
<body>
Moj prva Web stranica
</body>
</html>
Sad spremimo ovaj dokument. U File - Save as dijalog prozoru prvo odaberemo folder u kojem ćemo
spremiti našu Web stranicu. U polje File name upišimo ime naše prve stranice, a kao ekstenziju
otkucajmo .htm ili .html (npr. "prva.htm"). U padajućoj listi Save as type odaberimo All Files. Stisnite
OK i naš prvi Home page je spreman da ga otvorimo u našem web browseru.
Boje
Na primjer, ako želimo promijeniti boju pozadine u žutu tada ćemo unutar <body> taga dodati:
<body bgcolor="#ffff00">
ili:
<body bgcolor="yellow">
što daje isti krajnji efekat.
Dakle, vidimo da se boja pozadine određuje bgcolor atributom koji je dio <body> taga. Poslije svakog
atributa se stavlja znak jednakosti koji služi za dodijelu vrijednosti datom atributu, a vrijednost atributa se
obvezno stavlja između znakova navoda.
Boja teksta se određuje text atributom. Ako želimo da naša stranica ima zelena slova na žutoj pozadini
stavit ćemo:
<body bgcolor="#ffff00" text="#008000">
Ono što HTML čini izuzetnim, i što je uvjetovalo njegovu veliku popularnost jesu tzv. linkovi. Linkovi u
HTML dokumentu su one riječi koje se pojavljuju u drugoj boji i podvučene su radi lakšeg uočavanja, a
omogućavaju vam da se jednim klikom miša nađemo na nekoj sasvim drugoj stranici koja se može
nalaziti i na drugom kraju svijeta.
Boje linkova se mogu definirati pomoću tri atributa: link, vlink i alink. Na primjer, ako želimo da na
našim Web stranicama linkovi budu plavi, posjećeni linkovi ljubičasti, a aktivni linkovi crveni stavimo:
<body link="#0000ff" vlink="#ee82ee" alink="#ff0000">
Na primjjer, ako želimo da kao pozadinu stavite sliku "pozadina1.jpg" tada će body tag izgledati ovako:
<body background="pozadina1.jpg" bgcolor="#000000">
Kao što vidimo ubacili smo i background i bgcolor tag, i to ne slučajno. O čemu se radi? Pa mnogi ljudi
sa sporijim modemima prilikom surfovanja Internetom isključuju u svojim browserima automatsko
učitavanje grafike.
To znaci da se neće učitati ni pozadina koju ste vi dodijelili toj stranici. Problem nastaje u slučajevima
kada smo tekstu dodijelili neku svijetlu (ili bijelu boju), a browser ne učita pozadinu, već i
pozadina ostane bijela.
Blijeda (ili bijela) slova na bijeloj pozadini se jednostavno neće vidjeti. Zbog toga uvijek dodijelimo i neku
bojuj pozadini tako da u gore opisanoj situaciji slova i dalje budu čitljiva.
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa unosom i uređivanjem teksta u HTML dokument
b) Funkcionalni: Sticanje praktičnih znanja i primjena istih
Očekivani rezultati:Učenici će znati unositi i uređivati tekst u HTML dokumentu
TOK ČASA
<h1>HTML-osnove</h1>
HTML-osnove
<h2>HTML-osnove</h2> HTMAL-osnove
<h3>HTML-osnove</h3> HTML-osnove
<h4>HTML-osnove</h4> HTML-osnove
<h5>HTML-osnove</h5> HTML-osnove
<h6>HTML-osnove</h6> HTML-osnove
Po defaultu tekst je poravnat uz lijevu marginu. Ako želimo da naš naslov, ili bilo koji drugi element
stranice, bude centriran, trebamo ga staviti između tagova<center> i </center>:
<center>OVO JE CENTRIRAN TEKST</center>
što će dati slijedeći rezultat:
OVO JE CENTRIRAN TEKST
Ukoliko posebno ne naglasimo kojim fontom želimo da bude ispisan tekst na našoj stranici,
browser će koristiti default font (to je obično Times New Roman).
Osnovni tag kojim možemo mijenjati font na HTML stranici je <font> tag, a on može
imati tri atributa: face, size i color.
Atributom face definiran je tip fonta kojim želimo da naš tekst bude ispisan. Na jednoj stranici možemo
koristiti i više različitih fontova, ali vodimo računa da ne pretjeramo u „ukrašavanju“. Osim toga, vodimo
računa da korisnik koji učitava našu stranicu mora imati instaliran taj font na svom računalu. U
suprotnom njegov browser će prikazati tekst u default fontu. Zato na svojim stranicama nemojmo koristiti
neke egzotične fontove, već koristimo samo široko rasprostranjene fontove.
Ako želimo da naša stranica bude ispisana recimo „Arial“ fontom (kojim je ispisana i ova stranica koju
upravo čitamo), onda trebamo napisati:
<font face=“Arial“> Ovdje staviti tekst. </font>
Ako koristimo neke egzotičnije fontove onda bi bilo dobro da navedemo i nekoliko alternativnih fontova,
jedan za drugim, odvojenih zarezom. Ako posjetilac naše stranice na svom računalu nema instaliran prvi
font sa liste, on će ga prikazati u slijedećem sa liste, i tako dalje. Na primjer:
<font face=“Comic Sans MS,Arial,Courier“>
Evo primjera nekoliko popularnih fontova koje možemo koristiti na svojim stranicama:
Verdana
Arial
Courier
Bedrock
Times New Roman
Comic Sans MS
Slijedeća stvar koja se može mijenjati je veličina slova, a ona se definira preko size atributa. HTML
razlikuje 7 veličina slova koje nose vrijednosti od 1 do 7. Podrazumijevana (default) veličina je 3. Ako su
slova veličine 3 suviše mala možemo zadati veličinu fonta od recimo 5, na slijedeći način:
<font size=“5“>
Evo liste sa veličinama fonta od 1 do 7 pa odaberimo veličinu koja nam odgovara:
<html>
<head>
<title>SKOLA</title>
</head>
<body>
<body bgcolor="#ffff00" text="#008000">
<center><h1>Osnove iz HTML</h1></center>
<font face=“Arial“><font size=“7“><center><b> Moj prva Web stranica</b></center></font>
<br>
<font face=“Arial“> <font size=“6“><b><i>Ja se ucim praviti Web stranicu i mislim da cu imati
uspjeha!</i></b></font></br>
<b>Ja se ucim praviti Web stranicu i mislim da cu imati uspjeha!</b>
<p align="right"><font size=“7“><i>Ja se ucim praviti Web stranicu i mislim da cu imati
uspjeha!</i></center>
</body>
</html>
Završni dio : Ponoviti nastavnu jedinicu
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa tagovima za liste i tabele u HTML jeziku
b) Funkcionalni: Sticanje praktičnih znanja i primjena istih
Očekivani rezultati:Učenici će znati koristiti tagove za liste i tabele u HTML dokumentu
TOK ČASA
Razred i odjeljene: IX Datum: Redni br. časa:21
Predmet: OSNOVI INFORMATIKE
Nastavna oblast: Osnove HTML jezika
Nastavna jedinica: Liste i tabele u HTML jeziku
TIP ČASA OBLICI RADA NASTAVNE METODE NASTAVNA SREDSTVA
a)obrada a)frontalni a)monološka a)tekst
b)utvrđivanje b)grupni b) dijaloška b) slike
c)vježbanje c)individualni c)demonstrativna c) modeli
d)sistematizacija d)rad u parovima d)tekst d) projekcije
e) e) e)kombinovana e) udžbenik
f) f) f)istraživačka f) računar
g) g) g) g)projektor
Tabele
Tablice predstavljaju veoma koristan alat za predstavljanje podataka na web stranici. Pored klasičnog načina
upotrebe tablica, u HTML-u se tablice koriste i da bi se lakše kontrolirao razmeštaj teksta i slika na stranici. Ako ste
već pokusali napraviti neku web prezentaciju, sigurno znate o čemu govorim. Ma koliko se trudili da poravnate tekst
i slike na vašoj stranici one vam uvijek nekako izmiču kontroli, naročito kad pređete u neku drugu rezoluciju od one
u kojoj ste prvobitno izradili vašu stranicu. Smještanje elemenata stranice u polje tablice predstavlja osnovni
oslonac web dizajnera. U polje tablice možemo smjestiti tekst, slike, linkove, druge tablice itd.
Osnovni tag koji označava početak i kraj tablice je:
<table>Sadržaj tablice</table>
Sadržaj tablice stavlja se unutar taga kojim se definira jedno polje tablice:
<td> Sadržaj polja </td>
Tablica ne mora sadržavati <th> tag, ali mora sadržavatii bar jedan <td> tag, u koji ćemo staviti
sadržaj tablice.
Redovi tablice definiraju se pomoću taga:
<tr> <td> Sadržaj polja </td> <td> Sadržaj polja </td> ... </tr>
Unutar njega se umeću <td> ili <th> tagovi koji defeniraju polje tablice sa odgovarajućim sadržajem.
Da bi dodijelili našoj tabeli graničnu liniju odgovarajuće debljine, u <table> tag se stavlja atribut border, a
vrijednost debljine linije zadaje se u pikselima.
Primjer tablice:
Ime : Prezime : Nadimak :
Petar Petrovic Pepe
Odgovarajući HTML kod glasi:
<table border="2">
<tr>
<th><font face="Verdana" size="2">Ime :</font></th>
<th><font face="Verdana" size="2">Prezime :</font></th>
<th><font face="Verdana" size="2">Nadimak :</font></th>
</tr>
<tr>
<td><font face="Verdana" size="2">Petar</font></td>
<td><font face="Verdana" size="2">Petrovic</font></td>
<td><font face="Verdana" size="2">Pepe</font></td>
</tr>
</table>
Osnovna razlika između teksta koji se nalazi unutar <th> i <td> tagova je u tome što je tekst u prvom
slučaju podebljan (bold) i centriran unutar polja, a u drugom slučaju tekst nije podebljan i poravnat je uz
lijevu ivicu polja. Ivica tablice se priljubljuje uz sadržaj polja maksimalno koliko je moguće. Širina stupca
određena je prvim poljem u svakom stupcu.
Ovim se ne iscrpljuje mogućnost formatiranja tablica. U tu svrhu koriste se razni atributi od kojih ćemo u
daljnjem tekstu neke obraditi. Treba spomenuti da tablica uopće ne mora biti jednako formatirana, tj.
svakom se polju može dodijeliti neko drugo svojstvo pomoću atributa koji se umeću u njen <td> tag.
Prije svega, da bi tablici dodijelili odgovarajuće dimenzije koristit ćemo atribute width i height. Vrijednost
ovih atributa se kao i kod <img> taga mođe zadati ili u pikselima ili u postocima veličine prozora HTML
browser-a.
Ovaj drugi način definiranja je preporučljiv jer onda ne moramo razmišljati o rezoluciji ekrana.
Slijedeći primjer predstavalja tablicu sa širinom od 80% i visinom od 300 piksela:
Ime : Prezime : Nadimak :
Petar Popovic Pepe
a odgovarajući HTML kod je:
<table border="2" width="80%" height="300" >
<tr>
<th><font face="Verdana" size="2">Ime :</font></th>
<th><font face="Verdana" size="2">Prezime :</font></th>
<th><font face="Verdana" size="2">Nadimak :</font></th>
</tr>
<tr>
<td><font face="Verdana" size="2">Petar</font></td>
<td><font face="Verdana" size="2">Petrovic</font></td>
<td><font face="Verdana" size="2">Pepe</font></td>
</tr>
</table>
Često je potrebno da se pojedina polja tablice protežu duž više redova ili stupaca tablice. Ovo se može
postići pomoću atributa colspan i rowspan koji se ubacuju u <td> ili <th> tag onog polja koje želimo
posebno formatirati. Vrijednost ovih atributa zadaje se brojem stupaca ili redova tablice duž kojih se
treba prostirati dano polje. U slijedećem primjeru izrade rasporeda sati objašnjena je upotreba ovih
atributa:
Dani u nedjelji :
ponedjeljak utorak srijeda četvrtak petak
1. francuski programiranje tjelesni kemija francuski
s 2. matematika francuski tjelesni kemija francuski
a
3. tjelesni matematika programiranje biologija engleski
t
i 4. tjelesni matematika fizika informatika engleski
5. fizika razredni geografija informatika matematika
HTML kod rasporeda sati izgleda ovako (u kojem smo radi preglednosti izostavili tag <font>, a koji
se mora staviti u svako polje tabele posebno kako bi i Netscape Navigator prikazao tekst u
odgovarajućem fontu) :
<table border="2" width="100%">
<tr>
<th rowspan="2" colspan="2"><img src="space.gif"></th>
<th colspan="5"> Dani u nedjelji :</th>
</tr>
<tr>
<th width="20%">ponedjeljak</th>
<th width="20%">utorak</th>
<th width="20%">srijeda</th>
<th width="20%">četvrtak</th>
<th width="20%">petak</th>
</tr>
<tr>
<th rowspan="5"><br><br>s<p>a<p>t<p>i<p></th>
<th>1.</th>
<td>francuski</td>
<td>programiranje</td>
<td>tjelesni</td>
<td>kemija</td>
<td>francuski</td>
</tr>
<tr>
<th>2.</th>
<td>matematika</td>
<td>francuski</td>
<td>tjelesni</td>
<td>kemija</td>
<td>francuski</td>
</tr>
<tr>
<th>3.</th>
<td>tjelesni</td>
<td>matematika</td>
<td>programiranje</td>
<td>biologija</td>
<td>engleski</td>
</tr>
<tr>
<th>4.</th>
<td>tjelesni</td>
<td>matematika</td>
<td>fizika</td>
<td>informatika</td>
<td>engleski</td>
</tr>
<tr>
<th>5.</th>
<td>fizika</td>
<td>razredni</td>
<td>geografija</td>
<td>informatika</td>
<td>matematika</td>
</tr>
</table>
Završni dio : Ponoviti nastavnu jedinicu
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa tagovima za liste i tabele u HTML dokumentu
b) Funkcionalni: Sticanje praktičnih znanja i primjena istih
Očekivani rezultati:Učenici će znati uraditi HTML dokument koristeći tagove za liste i tabele
TOK ČASA
<html>
<head>
<title>SKOLA</title>
</head>
<body>
<b><font face=“Arial“><font size=“7“> Linkovi!</font></b>
<a href="http://www.etf.unibl.org"> ETF BanjA Luka </a>
</body>
</html>
Obrasci-form
Obrazac je zasebni dio HTML stranice, cesto prikazan kao jedna cjelina ili odvojena stranica. On može
sadržavati različite tipove polja u koje ubrajamo tekstualne okvire i polja za unos podataka, padajuće
izbornike, kružne izbornike, kontrolne kvadratiće i gumbe. Interaktivni obrasci omogućavaju primanje
različitih informacija od posjetitelja stranica. Po svojoj strukturi slični su pisanim obrascima i sama
procedura njihovog ispunjavanja je poprilično jednostavna. Korisnik upisuje informacije u polja koja su
sadržana unutar obrasca. Kada završi sadržaj obrasca se šalje na obradu skripti koja se nalazi na
poslužitelju. Poslužitelj obrađuje sadržaje obrasca i u ovisnosti od dobivenih podataka izvršava određenu
akciju.
Pomoću input elemenata moguće je, ovisno o vrijednosti atributa type definirati nekoliko različitih vrsta
polja obrazaca:
1. Tekstualni element je jednostavni element od jednog reda ili tekstualno polje za unos lozinke.
Atributu type pridjeljuje se vrijednost text kako bi dobili polje za unos teksta, a password za
unos lozinke
2. Kružni izbornici se koriste kada se želi postići funkcionalnost da posjetitelj odabere samo jednu
vrijednost nekog konačnog popisa koji mu je ponuđen.
3. Kontrolni kvadratići se koriste kada se posjetitelju želi omogućiti izbor od nijedne, jedne ili vise
ponuđenih mogućnosti.
4. Dugmad. Postoje tri vrste dugmadi, dugmad za prihvati podataka, dugmad za čišćenje obrasca i
obična dugmad koja nemaju unaprijed definiranu akciju.
-Dugme start
<html>
<head>
<title>SKOLA</title>
</head>
<body>
<b><font face=“Arial“><font size=“7“> Komandno dugme!</font></b>
<form>
<INPUT TYPE="button" name="dugme"
Value="Start" onClick="Akcija">
</form>
</body>
</html>
-Radio dugme
<html>
<head>
<title>SKOLA</title>
</head>
<body>
<b><font face=“Arial“><font size=“7“> Radio dugme!</font></b>
<form>
<INPUT TYPE=RADIO NAME="NAJBOLJI DRUG" VALUE="Pera"> Pera Perić<BR>
<INPUT TYPE=RADIO NAME="NAJBOLJI DRUG" VALUE="Mika"> Mika Mikić<BR>
<INPUT TYPE=RADIO NAME="NAJBOLJI DRUG" VALUE="Đoka"> Đoka Đokić<P>
</form>
</body>
</html>
-Dugme potvrde(Checkbox)
Omogućava izbor više ponuđenih opcija
<html>
<head>
<title>SKOLA</title>
</head>
<body>
<b><font face=“Arial“><font size=“7“> Check Box !</font></b>
<form>
Tko su tvoji prijatelji??<BR>
<INPUT TYPE=RADIO NAME="NP"
VALUE="Pajo" CHECKED> Pajo Patak<BR>
<INPUT TYPE=RADIO NAME="NP"
VALUE="Šiljo"> Šiljo <BR>
<INPUT TYPE=RADIO NAME="NP"
VALUE="Miki"> Miki Maus<P>
</form>
</body>
</html>
TOK ČASA
<h2><left><b>Hobi!</b></left>
<ul type="square">
<li>Muzika
<li>Plivanje
<li>Putovanja
</ul>
<form>
Prijatelji??<BR>
<INPUT TYPE=RADIO NAME="NP"
VALUE="Pajo" CHECKED> Pajo Patak<BR>
<INPUT TYPE=RADIO NAME="NP"
VALUE="Šiljo"> Šiljo <BR>
<INPUT TYPE=RADIO NAME="NP"
VALUE="Miki"> Miki Maus<P>
</form>
<b><font face=“Arial“><font size=“7“> Linkovi!</font></b>
<a href="http://www.google.com/"> Google </a></h2>
</body>
</html>
Završni dio : Ponoviti nastavnu jedinicu
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa izradom dokumenta u HTML koji sadrži odgovarajuće
tagove (tekst,liste,tabele,gragiku linkove i forme)
b) Funkcionalni: Sticanje praktičnih znanja i primjena istih
Očekivani rezultati:Učenici će znati uraditi dokument u HTML koji sadrži odgovarajuće tagove
TOK ČASA
Razred i odjeljene: IX Datum: Redni br. časa:25
Predmet: OSNOVI INFORMATIKE
Nastavna oblast: Osnove HTML jezika
Nastavna jedinica: Osnove HTML jezika -Sistematizacija
TIP ČASA OBLICI RADA NASTAVNE METODE NASTAVNA SREDSTVA
a)obrada a)frontalni a)monološka a)tekst
b)utvrđivanje b)grupni b) dijaloška b) slike
c)vježbanje c)individualni c)demonstrativna c) modeli
d)sistematizacija d)rad u parovima d)tekst d) projekcije
e) e) e)kombinovana e) udžbenik
f) f) f)istraživačka f) računar
g) g) g) g)projektor
prva.html
<html>
<head><title>MLADEN</title></head>
<body>
<h2>MLADEN.html</h2><br>...
<br>
<center><img src ="DSC00135.jpg" height=" 50%" width =" 50%" ></center>
<br/>
<p><h4>
MLADEN rodjen 10.12.1989 u Zagrebu,zavrsio Medicinsku skolu i ima hobi
</h4></p>
<h2><left><b>Hobi!</b></left>
<ul type="square">
<li>Muzika
<li>Plivanje
<li>Putovanja
</ul>
<form>
Prijatelji??<BR>
<INPUT TYPE=RADIO NAME="NP"
VALUE="Pajo" CHECKED> Pajo Patak<BR>
<INPUT TYPE=RADIO NAME="NP"
VALUE="Šiljo"> Šiljo <BR>
<INPUT TYPE=RADIO NAME="NP"
VALUE="Miki"> Miki Maus<P>
</form>
<b><font face=“Arial“><font size=“7“> Linkovi!</font></b>
<a href="http://www.google.com/"> Google </a></h2>
<br>
<a href="druga.html">Veza <b>druga.html</b></a>
</body>
</html>
druga.html
<html>
<head><title>MAJA</title></head>
<body>
<h2>MAJA.html</h2><br>...
<br>
<center><img src ="DSC00015.jpg" height=" 50%" width =" 50%" >
<br/>
<p><h4>
Maja rodjena 10.12.1989 u Zagrebu,zavrsila Medicinsku skolu
<left><h4>Maja ima brata blizanca Mladena
</h4></left></p>
<br>
<center><img src ="DSC00112.jpg" height=" 50%" width =" 50%" >
<br/>
<br>
<a href="prva.html">Veza <b>prva.html</b></a>
</br>
</body>
</html>
prva.html-Mladen
druga.html-Maja
Završni dio : Ponoviti nastavnu jedinicu i ukazati na eventualne greške
Struktura sajta
Dreamweaver 8 je program za izradu Web sajtova, koji nam omogućava da
grafičkim okruženjem kreiramo web strane. On naše strane kreirane vizuelno,
generiše u HTML kod. Opcijom Code u Dreamweaver-u, mozemo videti kako nasa
strana izgleda u html-u. Namenjen je prevashodno za izradu statičkih strana1, ali
ima mogućnost prepoznavanja i alata za izradu dinamičkih strana (PHP, SQL), gde
se jednostavnim umetanjem koda ovih programski jezika u odgovarajuće telo
(body) HTML-a, dobija mogućnost i izvršavanja aplikacija na našem sajtu dinamike
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa programom za izradu Web sajta(Dreamweawer) i
kreiranjem početne stranice
b) Funkcionalni: Sticanje praktičnih znanja i primjena istih
Očekivani rezultati:Učenici će znati elemente programa Dreamweawera i kreirati početnu stranicu
TOK ČASA
Razred i odjeljene: IX Datum: Redni br. časa:27
Predmet: OSNOVI INFORMATIKE
Nastavna oblast: Izrada Web sajta
Nastavna jedinica: Program za izradu Web sajta Dreamweawer ,izrada početne stranice
TIP ČASA OBLICI RADA NASTAVNE METODE NASTAVNA SREDSTVA
a)obrada a)frontalni a)monološka a)tekst
b)utvrđivanje b)grupni b) dijaloška b) slike
c)vježbanje c)individualni c)demonstrativna c) modeli
d)sistematizacija d)rad u parovima d)tekst d) projekcije
e) e) e)kombinovana e) udžbenik
f) f) f)istraživačka f) računar
g) g) g) g)projektor
11. U polju Title možemo upisati naslov stranice ukoliko to nije urađeno u okviru Title tekstualnog polja
koji se nalazi na vrhu Document prozora
12. Za kodni latinični raspored koristimo Central European (Windows). Ako želimo da ne
zavisimo od klijentskog računara i njegovog kodnog rasporeda onda biramo Unicode
(UTF-8) koji omogućava čitanje bilo kog pisma (ćirilice, glagoljice, kineskog i dr).
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa unosom i dimenzionisanjem tabela na web stranici
b) Funkcionalni: Sticanje praktičnih znanja i primjena istih
Očekivani rezultati:Učenici će znati unositi i dimenzionisati tabele i uraditi strukturu Web sajta
TOK ČASA
4.Nakon upisavanja vrednosti kao na slici kliknite Ok u Design prikazu dobićete tabelu kao na slici
Prateći pravila efikasnog i dobrog dizajna, stranicu treba podelili na logičke celine
Prva tabela je tabela u koju se uobičajno ubacuje slika koja predstavlja baner i slika koja predstavlja logo
tako da u ovom slučaju ova tabela ima jedan red i jednu kolonu. Širina tabele je podešena na 960
piksela jer monitori sada dostižu rezoluciju i do 1024x768 piksela. Visinu tabela nemojte podešavati
povlačenjem ivica. Kada se ubaci bilo koji objekat, tabela će sama da podesi svoju visinu prema visini
tog objekta. Jedino terna da imate na umu da zaglavlje stranice (prva tabela) treba da ima visinu do 80
piskela.
3. Pomoću selektora tagova izvršiti selekciju kolone čiju širinu želite da podesite
4. U Properties prozoru u polje W upišite odgovarajuću vrednost.
5. Ukoliko želite da podesite visinu reda ili kolone postupak je isti samo što vrednost
upisujete u polje H u Properties prozoru
Polja za podešavanje visine i širine (H, W)
Linkovi
1.Hiperveze vode posetioca do drugih dokumenata unutar tekuće Web strane ili do strana na drugim
lokacijama. Postoje dva opšta pristupa kreiranja hiperveza (linkova): napraviti set praznih strana, zatim
ih povezati, i na kraju stavljti sadržaj u njih; ili kreirati link na stranu koja još ne postoji, pa je tek kasnije
formirati i dati joj ime koje ste već naveli pri kreiranju linka. Napraviti hipertekstualnu vezu je veoma
jednostavno (slika 1.). Treba označiti određen deo teksta (1), na panou Properties pritisnuti drugu
ikonicu desno od polja link (2). Otvoriće se prozor Select File u kome treba izabrati stranu sa kojom
želimo da napravimo vezu (3). Pritisnite OK (4) i ime te strane pojaviće se u polju Link, a tekst koji ste
izabrali biće označen kao hiperveza (5) i imaće boju koju ste mu odredili u Page Properties-u.
Slika 1 2
2.Postoji još jedan, jednostavniji, način za kreiranje linka (slika 2). Kao i pre označite željeni
tekst (1), a zatim na panelu Properties pritisnite prvu ikonicu (2) do polja Link (Point to File),
zadržati taster miša pritisnut i prevući pokazivač do Site Panela (3). Pustite taster tačno iznad
strane sa kojom želite da napravite link (4). I link je napravljen (5).
Ikona
Pravljenje hiperveza za slanje elektronske pošte je veoma značajno, jer na taj način olakšavate
posetiocima da se povežu sa vama. Označite mesto na strani gde želite da umetnete hipervezu
za slanje Emaila. Insert- Email Link . Pojaviće se prozor Email Link (slika 3), gde unosite tekst
(koji će se prikazati na strani kao hiper veza) i Email adresu. Ako prethodno izaberete tekst koji
se već nalazi na strani i zatim otvorite prozor Email Link izabrani tekst će se pojaviti u polju
tekst.
U polje Link na panou Properties upišite mailto: i zatim bez razmaka Email adresu (slika 4).
Tako ste 'ručno' napravil vezu sa slanje Email pošte.
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa izradom Web stranice koja treba da sadrži tabele,
tekst i grafičke elemente
b) Funkcionalni: Sticanje praktičnih znanja i primjena istih
Očekivani rezultati:Učenici će znati uraditi Web stranicu koja sadrži tabele,tekst i grafičke elemente
TOK ČASA
Uvodni dio časa:
Ponoviti unos teksta na Web stranicu
Ponoviti unos tabela
3 2 4
File-New-One Page Web Site-Otvara se prozor i kliknuti na ikonicu One Page Web Site
-Kliknuti na dugme Browse –Otvara se prozor New Web Site Location-U polju Lock In izabrati
disk na koji se snima prezentacija-Open – Ok
Otvara se prozor i formiraju se dva foldera Private i Image (služi za smještaj slika) i Web strane , pod
imenom index.htm
-Ispisati tekst
-Unos fotografije-
Insert-Picture –From File ili Clip Art
-Formatirane slik
Desni taster-Picture Propertis-Izbor opcije-Ok
Dodavanje nove stranice
File-New—More Page Templates-U prozoru koji se pojavljuje kliknuti na ikonicu Photo Galery-Ok
Snimanje strane
File –Save As-Program će ponuditi folder u kome se smješta prezentacija-U polje File Name ukucati
ime stranice –Save-Ok
Otvaranje Web sajta
File-Open Site-U polu Lock In pronaći folder na kome je je smješten Web sajt-Open
Osobine ili atributi strane
Desni taster na stranicu koju uređujemo-Page Propertis-(Format-Page Propertis)
Na kartici general u polje Title unesti ime (Home strana moje prezentacije)-Ok
Pravljenje hiperveza(Hiperlinkovi)
1.Označiti tekst ili sliku-Insert-Hiperlink-Existing File or Web Page-Curent Folder-Označiti Druga
stranica- Ok
Sadržaj časa