Informatika9 - Pripreme - Odlično

PREDMET : OSNOVI INFORMATIKE
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.
U računarstvu postoje tri grupe softvera:

 Operativni softveri
 Dijagnostički softveri
 Softveri za razvoj i pisanje programa
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.
Editor služi za pisanje programa u višem i asemblerskom jeziku

Faze programiranja:
1. Analiza problema
2. Izrada algoritma-dijagrama toka
3. Pisanje programskog koda
4. Unos programskog koda u računar i pokretanje programa
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
Osnovni elementi dijagrama toka kod BASIC-a su:
početak/ kraj programa

ulaz
obrada
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
INPUT “Kolika je brzina v:“, v v, t
INPUT “Koliko je vrijeme t:“, t

s=v*t
s=v*t
PRINT “Predjeni put je =“; s; „km“ s
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
ISTINA uslov LAŽ

Naredba uslovnog prelaska – opšti oblik:
IF (uslov) THEN (naredba
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
IF uslov THEN naredba1 ELSE naredba2 ISTINA uslov LAŽ
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
Nastavna jedinica: QBasic-okruženje,osnovne naredbe i ugrađene funkcije
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa QBasic okruženjem , naredbama i ugrađenim
funkcijama
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

Programski jezik QBasic
BASIC je skraćenica izraza u engleskom jeziku Beginner’s All-purpose Simbolic Instruction Code, što u
slobodnom prijevodu znači: programski jezik opšte namjene za početnike. Nastao je 1963.godine na
Darmouth College. Autori su mu Tom Kurtz i John Kemeny. Iako se do sada dosta mijenjao, osnovne
karakteristike su mu zadržane, a i napravljen je standard za njega. Postoji više varijanti BASIC-a. one se
razlikuju samo u nekim elementima.
Korisnički interfejs programskih jezika
Prva verzija ovog programskog jezika se pojavila 1963 godine. Danas je najviše u upotrebi Microsoftov
Quick Basic, poznatiji kao Qbasic, za računare koji rade pod DOS operativnim sistemom. Inače ljuska
(Shell) koju koristi Qbasic je DOS pa su i prozori takvi (i editor ali i komandni prozor).
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
SGN(x) funkcija određivanja predznaka brojnog izraza 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)
FIX(x) pretvara decimalni broj u cijeli broj odbacivanjem decimalnog dijela
CINT(X) zaokružuje vrijednost brojnog izraza x na najbliži cijeli broj
INT(x) pretvara pozitivan decimalni broj u cijeli odbacivanjem decimalnog dijela, a
negativan zaokružuje na prvi manji cijeli broj,
LEN(x$) daje dužinu znakovnog izraza x$
CHR$ n) pretvara brojnu vrijednost u znakovnu (napr: CHR (66) = D)
LEFT$(x$,n) daje lijevi dio znakovne promjenjive x$ u dužini n znakova
MID$(x$, n, m) daje dio stringa koji se nalazi unutar stringa x$ počev od pozicije n i u dužini m
RIGHT$(x$,n) daje desni dio znakovne promjenjive x$ u dužini od n znakova
SPACE$(n) daje kao rezultat string od n blanko znakova
STR$(x) pretvara brojnu vrijednost u znakovnu
VAL(x$) daje brojnu vrijednost znakovnog izraza x$, tj.pretvara broj koji je bio opisan
kao znakovna vrijednost u brojnu vrijednost kojom se mogu obavljati aritmetičke
operacije
TAB(n) služi za ubacivanje n praznih znakova u liniju za štampanje
VAL(x$) daje brojnu vrijednost znakovnog izraza x$, tj.pretvara broj koji je bio opisan
kao znakovna vrijednost u brojnu vrijednost kojom se mogu obavljati aritmetičke
operacije
RND(x) funkcija za generisanje slučajnog broja. Vrijednost funkcije je neki broj
slučajno izabran iz skupa brojeva čiji je opseg vrijednosti decimalni broj u
intervalu između 0 i 1. Ako se želi generisanje pseudoslučajnih brojeva iz
intervala (a, b) to se može postići izračunavanjem a + (b – a) * RND

Nastavna jedinica:Vježba-Rješavanje problema primjenom linijskih i razgranatih alg.struktura
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa rješavanjem programa iz linijskih i razgranatih
algoritamskih struktura
Očekivani rezultati:Učenici će znati rješavati programe iz linijskih i razgranatih algoritamskih struktura.
TOK ČASA
Uvodni dio časa:
 Osnovne naredbe u QBasic programskom jeziku
 Funkcije
1.Napisati program koji učitava temperaturu izraženu u 0C a zatim ispisuje koliko je to Kelvina
00C=273,150K
REM: KONVERZIJA STEPENI U KELVINE Start

CLS
INPUT "UNESITE STEPENE CELZIJUSA:"; C
C
K = C + 273.15
K=C+273.15
PRINT "KELVINI="; K
END K
UNESITE STEPENE CELZIJUSA:? 35
KELVINI= 308.15 KRAJ
2.Napiši program koji će računati zbir cifara bilo koga dvocifrenog broja!
REM Zbir cifara dvocifrenog broja Start

CLS
INPUT "Unesi dvocifren broj:"; a a
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
PRINT "Trazeni zbir je="; z z
END KRAJ
Unesite dvocifreni broj:? 35
Traženi zbir je=8
3.Napiši program koji ispisuje apsolutnu vrijednost nekog broja!

REM: Apsolutna vrijednost broja
CLS
INPUT "Unesi broj"; a
PRINT ABS(a)
END
Unesi broj:? -25
25
4.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
6.Data su tri btoja A, B, C. Napisati program za određivanje najvećeg broja.
REM: Najveci broj
CLS
INPUT”Unesi tri broja:”; A,B,C
V=A
IF A<B THEN V=B
IF V<C THEN V=C
PRINT”Najveci broj je:”;V
END
7.Napisati program koji za učitani broj provjerava je li broj nula , paran ili neparan
REM: BROJ
CLS
INPUT „N=“;N
IF N=0 THEN
PRINT“BROJ JE NULA“
ELSEIF N MOD 2=0 THEN
PRINT“BROJ JE PARAN“
ELSE
PRINT“BROJ JE NEPARAN“
END IF
END
Nastavna jedinica: Ciklične algoritamske strukture (Programske petlje-For petlja)
Zadaci nastave:
а)Obrazovno-vaspitni:Upoznavanje učenika sa cikličnim alg. strukturama i For brojačkom petljom
Očekivani rezultati:Učenici će znati šta su ciklične alg. strukture i rješavati programe iz For petlji
TOK ČASA
Uvodni dio časa:
 Šta je softver i podijela operativnog softvera
 Nabrojati sistemske softvere
 Nabrojati korisničke ili aplikativne softvere
 Šta je program
Ciklične algoritamske strukture
FOR . . . NEXT PETLJA

Ovo je brojačka petlja, koja obično ima fiksni broj izvršavanja. Na početku se dodijeli početna
vrijednost a zatim krajnja vrijednost, a iza nje može se dodati korak (STEP) koji može biti
pozitivan ili negativan.
Opšti oblik FOR …NEXT petlje je: brojač=poč, kraj,korak
FOR I = A TO B STEP P
blok naredbi Blok naredbi
NEXT I
FOR-službena riječ (za)
I-brojna promjenjiva (brojač)
A-brojni izraz koji predstavlja početnu vrijednost ciklusa
B-brojni izraz koji predstavlja krajnu vrijednost ciklusa
STEP-službena riječ(korak)
P-brojni izraz koji predstavlja priraštaj ciklusa
NEXT-službena riječ (sljedeći)
I-brojna promjenjiva (brojač)
Znači u prvom prolazu promjenljiva uzima početnu vrijednost zatim prelazi u red bloka naredbi i dolazi
poslije u red naredbe NEXT koja vraća promjenljivu na početak i uzima sledeću vrijednost i sve dok
promjenljiva ne poprimi vrijednost kraj, kada se petlja završava. Pri svakom prolazu promjenljive kroz
petlju prati se i brojna vrijednost koraka. Ako se ne navede korak tada petlja račuina da je korak 1.
1. Napiši program za ispis prvih N prirodnih brojeva!
REM Ispis N prirodnih brojeva Start

CLS
INPUT “Do kog broja N=”; N
FOR I = 1 TO N N
PRINT “N=”; I
NEXT I
END I=1,N
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
Nastavna jedinica: WHLE...WEND petlja
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa principom rada While..WEND petljom
Očekivani rezultati:Učenici će znati primjeniti WHILE...WEND petlju za pisanje određenih programa
TOK ČASA
Uvodni dio časa:
 Ciklične algoritamske strukture
 For brojačka petlja
WHILE . . . WEND PETLJA

Prethodna petlja(For) ima tačno utvđen broj ponavljanja, međutim često imamo problem koji
nema tačan broj ponavljanja već se ciklus mora ponavljati dok se neki uslov ispuni, odnosno
dok se neki uslov ne ispuni. Jedna od tih petlji je WHILE … WEND petlja.
Opšti oblik ove naredbe je:
WHILE uslov Laž

blok naredbi uslov
WEND
Istina
Blok naredbi
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!
REM Suma prvih n prirodnih brojeva

CLS
INPUT "Do kog broja:", n
s=0
i=1
WHILE i <= n
s=s+i
i=i+1
WEND
PRINT "Trazena suma je "; s
END
2. Napisati program koji računa sumu cifara nekog broja n!
REM: Zbir cifara nekog broja n

CLS
REM naredbom WHILE WEND
INPUT "Unesi prirodan broj"; n
S=0
WHILE n > 0
C = n MOD 10
S=S+C
n = n \ 10
WEND
PRINT "Zbir cifara je="; S
END
3. Dat je interval od A do B. Napisati program, koji koristi WHILE ... WEND petlju, da računa
proizvod brojeva u tom intervalu!
REM Proizvod brojeva u intervalu AB

CLS
INPUT "Unesi granice intervala:", A, B
p=1
i=A
WHILE i <= B
p=p*i
i=i+1
WEND
PRINT "Trazeni proizvod je "; p
END

Nastavna jedinica: DO....LOOP petlje
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa principom rada DO....LOOP brojačkih petlji
Očekivani rezultati:Učenici će znati primjeniti DO..LOOP petlje pri pisanju određenih programa.
TOK ČASA
Uvodni dio časa:
 For-petlja
 WHILE...WEND petlja
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, pa tako imamo osnovna četiri oblika ovih petlji i to:
DO WHILE uslov
blok naredbi Blok naredbi će se izvršavati
LOOP sve dok je uslov ispunjen –
ne mora ni jedanput
DO UNTIL uslov
blok naredbi Blok naredbi će se izvršavati
LOOP sve dok uslov nije ispunjen
DO – ne mora ni jedanput
blok naredbi
Blok naredbi će se izvršavati
LOOP WHILE uslov
sve dok je uslov ispunjen -
DO bar jedanput
blok naredbi
LOOP UNTIL uslov Blok naredbi će se izvršavati sve
dok uslov nije ispunjen -bar
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
S=0
P=1
I=1
DO
PRINT I
S=S+I
P=P*I
I=I+1
LOOP WHILE I <= N
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
S=0
P=1
I=1
DO UNTIL I > N
INPUT BROJ
S = S + BROJ
P = P * BROJ
I=I+1
LOOP
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
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
Nastavna jedinica: Nizovi
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa nizovima i njihovom primjenom u rješavanju određenih
zadataka
Očekivani rezultati:Učenici će znati šta niz i rješavati zadatke primjenom nizova
TOK ČASA
Uvodni dio časa:
 Ciklične algoritamske strukture

 For brojačka petlja
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
REM:ARITIMETICKA SREDINA NIZA I CLANOVI MANJI I VEĆI OD AR. SREDINE

CLS
10 INPUT "BROJ ELEMENATA NIZA:"; N
IF N<1 THEN GOTO 10
FOR I = 1 TO N
INPUT A(I)
NEXT I
PRINT: PRINT "ARITIMETICKA SREDINA:"
S=0
FOR I = 1 TO N
S = S + A(I)
NEXT I
A=S/N
PRINT "A="; A
PRINT: PRINT "CLANOVI NIZA MANJI OD AR.SREDINE SU:"
M=0
FOR I = 1 TO N
IF A(I) < A THEN
M=M+1
PRINT A(I); "";
END IF
NEXT I
PRINT: PRINT "BROJ CLANOVA MANJI OD AR.SREDINEM="; M
PRINT: PRINT "CLANOVI NIZA VECI OD AR. SREDINE SU:"
V=0
FOR I = 1 TO N
IF A(I) > A THEN
V=V+1
PRINT A(I); "";
END IF
NEXT I
PRINT: PRINT "BROJ CLANOVA VECI OD AR.SREDIME="; V
END
5.Dat je niz od n brojeva. Napisati program koji računa razliku proizvoda i zbira brojeva tog niza.
Brojevi su proizvoljni.
REM Razlika proizvoda i zbira

CLS
INPUT "Koliko brojeva"; n
DIM a(n)
s=0
p=1
FOR i = 1 TO n
PRINT i; " ";
INPUT x
s=s+x
p=p*x
NEXT i
r=p-s
PRINT "Trazena razlika je="; r
END

Nastavna jedinica: Rad sa znakovnim podacima ( stringovi )
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa sa znakovnim podacima i njihovom primjenom
Očekivani rezultati:Učenici će znati rješavati zadatke koristeći stečeno znanje iz znakovnih podataka.
TOK ČASA
Uvodni dio časa:
 Vrste podataka
 Broni podaci
 Znakovni podaci
Rad sa NISKAMA (stringovima)

Riječ se sastoji od niza slova, takav niz na engleskom se kaže string, a kod nas niska znakova. Niska
znakova se po pravilu piše između znakova navoda
“Banja Luka“ , “Sava“, “učenik“
Poslije naredbi PRINT i INPUT tekst u navodnicima se doslovno prenosi na ekran.
Pošto u programiranju koristimo znakovne promjenljive njih imenujeno najčešće jednim slovom (A, B,
C...) iza koga stoji znak $, što računaru daje do znanja da iza takve promjenljive dolazi string odnosno
niz slova ispisanih između znakova navoda.
Npr. ako stavimo A= računar očekuje broj, a ako stavimo A$= računar očekuje znakovni podatak.
Primjer:
A$=“Banja“
B$=“Luka“
C$=A$+B$
PRINT C$
Imat ćemo rezultat BanjaLuka.
Računar u ovom slučaju nije izvršio sabiranje već je izvršio spajanje dva znakovna podatka.
Naredba LEN
Ova naredba potiče od engleske riječi LENGHT što znači dužina.
Primjer:
a$ = "informatika"
a = LEN(a$)
PRINT a
Za rezultat imamo 11.
Primjer:
a$ = "Banja Luka"
a = LEN(a$)
PRINT a
Rezultat je 10, a imamo 9 slova, prema tome računar i prazno mjesto računa kao znak.
Opšti oblik funkcije za izdvajanje je:
MID$ (A$, I, K)
A$ – predstavlja riječ;
I – redni broj slova u riječi A$ od koga počinje da se izdvajaju znaci ili znak;
K – predstavlja broj znakova koje treba izdvojiti iz riječi.
Primjer:
a$ = "informatika"
m$ = MID$(a$, 3, 4)
PRINT m$
Za rezultat imamo form.
Funkcije LEFT$ i RIGHT$ za izdvajanje
LEFT$ ( A$,n)- izdvaja n znakova s lijeve strane niza A$
Primjer:
A$=”ANA”
B$=LEFT$ (A$,2)
PRINT B$  REZULTAT JE “AN”
RIGHT$ (A$,n)- izdvaja n znakova s desne strane niza A$
Primjer:
A$=”ANA”
B$=RIGHT$ (A$,2)
PRINT B$  REZULTAT JE “NA
1.Napisati program koji učitava neko ime ,a zatim ispisuje koliko slova ima u tom imenu
REM:ISPIS IMENA
CLS
INPUT "UNESITE IME:"; IME$
PRINT LEN(IME$)
END
PRIMJER:
UNESITE IME:? MARKO
5
2. Napisati program koji učitava neko ime a zatim ispisuje broj slova i prva tri slova imena.
REM: ISPIS IMENA I PRVA TRI SLOVA
CLS
PRINT LEN(IME$)
N% = 3
PRINT LEFT$(IME$, N%)
END
PRIMJER:
UNESITE IME:? DRAGANA
7
DRA
. 4.Napisati program koji učitava neko ime a zatim ispisuje prvih N slova imena.
REM:ISPIS IMENA I PRVIH N SLOVA IMENA
CLS
PRINT LEN(IME$)
10 INPUT "UNESITE CEO BROJ:"; N%
IF N > LEN(IME$) THEN GOTO 10
PRINT LEFT$(IME$, N%)
END
PRIMJER:
UNESITE IME:? MATEA
5
UNESITE CEO BROJ:? 3
MAT

Nastavna jedinica: Rad sa grafikom,slučajni brojevi
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa primjenom grafike u QBasic-u i slučajnim brojevima
Očekivani rezultati:Učenici će znati rješavati zadatke koristeći stečeno znaje iz grafike.
TOK ČASA
Uvodni dio časa:
 Šta je niz
 Unos članova niza
 Ispis članova niza
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
PSET (X,Y) [ ,boja]
PSET- Ključn riječ

(X,Y)- koordinate tačke
boja-numerički ekvivalent boje kojom se tačka želi prikazati.Ako se parametar boja izostavi tačka će biti
prikazana bijelom bojom (4-crvena)
Primjer 1:
SCREEN 12
PSET (100,100),4
END
Krug,elipsa i kružni luk
Ovi geometrijski likovi mogu se nacrtati naredbom CIRCLE čiji je opšti oblik :
CIRCLE [STEP] (x,y), R[,[C] [ ,[ p ] [, [ k ] [,S] ] ]
CIRCLE I STEP –ključne riječi

X,Y-koordinate centra
R-poluprečnik
C-numerički ekvivalent boje
p i k- početni i krajni ugao ako se želi nacrtati kružni luk
s-spoljašnost elipse
1.Napisati program koji crta krug poluprečnika 100
SCREEN 12
CIRCLE(300,300) ,100,4
END
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
Nastavna jedinica: Programiranje i programski jezici-sistematizacija
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa provjerom stečenog znanja iz programiranja u QBasic
jeziku
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
3. Napisati program koji proizvodi zvučni efekt
REM:SIRENA
CLS
FOR A = 1 TO 3
FOR I = 440 TO 1000 STEP 5
SOUND I, I / 1000
NEXT I
FOR I = 1000 TO 440 STEP -5
SOUND I, I / 1000
NEXT I
NEXT A
END
4.Program ispisuje jeli broj savršen.
REM:SAVRSEN BROJ
CLS
10 INPUT "N="; N
S=1
FOR I = 2 TO N / 2
IF N MOD I = 0 THEN
S=S+I
END IF
NEXT I
IF N = S THEN
PRINT N; "JESTE SAVRSEN"
ELSE
PRINT N; "NIJE SAVRSEN"
END IF
END
PRIMJER:
N=? 28
28 JESTE SAVRSEN
N=? 14
14 NIJE SAVRSEN
5.Uraditi program koji ispisuje broj reči u rečenici
REM : BROJ RECI U RECENICI
CLS
INPUT "UCITAJ RECENICU:"; C$
S=1
FOR I = 1 TO LEN(C$)
IF MID$(C$, I, 1) = " " THEN S = S + 1
NEXT I
PRINT "BROJ RECI ="; S
END
PRIMJER:
UCITAJ RECENICU:? MATEA I DRAGANA
BROJ RECI = 3
6.Učitati riječ sa tastature a zatim izdvojiti po dva znaka vertikalno.
REM : ISPIS PO DVA ZNAKA
CLS
INPUT "UCITAJ IME:"; C$
X = LEN(C$)
FOR I = 1 TO X - 1
PRINT MID$(C$, I, 2)
NEXT I
END
PRIMJER:
UCITAJ IME:? NIKOLA
NI
IK
KO
OL
LA
Nastavna oblast: Uvod u grafički dizajn
Nastavna jedinica: Rasterska i vektorska grafika
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa rasterkom i vektorskom grafikom
Očekivani rezultati:Učenici će znati šta je rasterka a šta je vektorska grafika i razliku između rasterske i
vektorske grafike
TOK ČASA
Uvodni dio časa: ‚
 Podijela softvera
 Aplikativni ili korisnički softveri
Vektorska i rasterska grafika
 Vektorska grafika ili geometijsko oblikovanje je način prikazivanja slike pomoću geometrijskih
oblika kao što su tačke, linije, krive i poligoni, a koji su temeljeni na matematičkim jednačinama.
U vektorskoj grafici slika se predstavlja i čuva kao kolekcija figura, zajedno sa njihovim podacima
(parametrima) koji definišu kako će figura biti iscrtana i gde će biti locirana.
 Rasterska grafika ili bitmap je podatak koji predstavlja pravougaonu mrežu piksela ili obojenih
tačaka, na nekom grafičkom izlaznom uređaju kao što je monitor ili na papiru
Pojam vektorska grafika je većinom korišćen u kontekstu dvo-dimenzionalne računarske grafike. Skoro
svako 3D prikazivanje je izvršeno pomoću 4D vektorske tehnike (pomoću tačaka, linija i poligona). Skoro
svi današnji računarski grafički prikazi prevode vektorsku sliku u rasterski format. Proces transformacije
iz jednog oblika u drugi naziva se rendering (senčenje). Na slici je prikazana šema transformacije
vektorskog modela u niz tačaka (piksela).
Recimo, navedimo krug kao primer jedne vektorske slike. Glavni podaci koje računarski program treba
da zapamti da bi iscrtao krug su:
1. poluprečnik;
2. koordinatnu poziciju centralne tačke kruga;
3. stil i boju linije;
4. stil i boju unutrašnjosti objekta.
Prednosti ovakvog načina crtanja nad rasterskom grafikom:
 ovako mala količina informacija omogućuje mnogo manju veličinu datoteke;
 mogućnost približavanja (zoom) bez gubitka na kvalitetu;
 sve ove informacije su zapamćene i mogu se kasnije menjati, što znači da pomeranje, okretanje,
popunjavanje itd. nemaju negativnih uticaja na kvalitet crteža kao kod rasterske slike.
Postoje brojni grafički programi za vektorsku obradu, kao što su: Adobe Illustrator, CorelDRAW, Cenon,
ImPress, ACD Canvas, Elgorithms MagicTracer i mnogi drugi
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.

Nastavna jedinica: Pokretanje,izgled ,osnovna podešavanja i eiementi programskog
prozora CorelDraw
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa pokretanjem programa i elementima programskog
prozora CorelDRAW
Očekivani rezultati:Učenici će znati elemente programskog prozora CorelDRAW
TOK ČASA
Uvodni dio časa:
 Šta je vektorska grafika
 Šta je rasterska grafika

Corel Draw
Corel Draw je glavni program iz programskog paketa Corel Draw kanadske firme Corel Corporation i
namjenjen je za izradu vektorskih dokumenata u 2D grafici.Namenjen je za dizajn i za pripremu štampe.
Veoma je praktičan i popularan, a svojom najnovijom verzijom ispravlja greške prethodnih verzija i nudi
širi dijapazon mogućnosti.
Pokretanje programa: Start-Programs- Corel Draw
Radna površina –elementi
prozora aplikacije kod
Corela X5
Kad se pokrene Corel
aplikacioni prozor sadrži
prozor aplikacija sa
prostorom za crtanje:
drawing window.Osnovni
elementi za rad na koje
treba obratiti pažnju su
označeni brojevima na slici
sa osnovnim opisom u
tabeli ispod slike.
Nastavna jedinica: Alati za crtanje linija , tačaka i geometrijskih figura -Toolbox
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa alatkama za crtanje linija,tačaka i geometrijskih figura
Očekivani rezultati:Učenici će znati alatke za ctanje linija,tačaka i geometrijskih figura
TOK ČASA
Uvodni dio časa:
 Ponoviti elemente programskog prozora

Pick tool-Služi za selektovanje objekata
Shape tool-Služi za editovanje čvorova i krivih
Zoom Tool-Za kontrolu zumiranja
Freehand tool-Olovka za crtanje slobodnom rukom
Rectangle tool-Crtanje pravougaonika
Elipse tool-Crtanje elipsa i krugova
Polygon tool-Crtanje pligona
Text tool-Rad sa tekstom
Fill tool-Za editovanje fill-a(ispunjenja) objekata
Outline tool-Konturne linije objekata

Shapes tool-Crtanje raznih oblika
Table tool-Crtanje tabela
Spirale tool-Crtanje spirale

Nastavna jedinica: Alati za crtanje geometrijskih figura i druge alatke,rad sa čvorovima
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa alatkama za crtanje geometrijskih figura ,čvorovima i
koriščenjem palete boja
Očekivani rezultati:Učenici će znati alatke za ctanje geometrijskih figura , čvorove i njihovu primjenu
kao koristiti paletu boja
TOK ČASA
Uvodni dio časa:
 Ponoviti elemente programskog prozora

 Crtanje pravougaonika i kvadrata
Alatka –Rectangle , 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 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 raznih oblika

Alatka – Shapes, a zatim pritisnite lijevi taster miša i držite ga dok vučete po
podlozi.
 Crtanje elipse i kruga
Alatka – Elipse 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
 Rad sa čvorovima
Dvoklik na duž formira se čvor ,selektovani čvor ima izgled crvenog kvadrata a zatim izabrati

Nastavna jedinica: Vježba-Crtanje tačke ,linije ,duži i figura,rad sa čvorovima
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa crtanjem tačaka,linija ,duži i figura u CrelDRAW
Očekivani rezultati:Učenici će znati primjeniti alatke za crtanje tačaka,duži,linila i figura
TOK ČASA
Uvodni dio časa:
 Alati za crtanje geometrijskih figura i druge alatke
Završni dio : Ponoviti nastavnu jedinicu i ukazati na eventualne greške

Nastavna jedinica: Rad sa tekstom,uvozi izvoz grafike , snimanje i štampanje
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa unosom teksta , uvozom i izvozm grafike kao i sa
snimanjem i štampanjem grafike u CrelDRAW-u
Očekivani rezultati:Učenici će znati unositi i vršiti obradu teksta, izvoziti i uvoziti grafiku i dokument
snimiti i štampati.
TOK ČASA
Uvodni dio časa:

Postavljanje teksta na putanju:
Selektovati tekst-Text-Fil Text To
Iskošenje teksta:Dvoklik na tekst-Bočne

tačke selekcije će se pretvoriti u stelice
Pomjeranje slova:Selektovati tekst i

izabrati alatku oblik i pomjerati slova
Sjene teksta:Selektovati tekst-Drop

Shadov tool
Uvoz i izvoz grafike
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
Otvaranje dokumenta: File-Open
Snimanje dokumenta: File -Save As
Pregled prije štampnja : File –Document Propertis
Štampanje dokumenta: File-Print

Nastavna jedinica: Uvod u grafički dizajn -Sistematizacija
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa unosom teksta , uvozom i izvozm grafike kao i sa
snimanjem i štampanjem grafike u CrelDRAW-u
Očekivani rezultati:Učenici će znati unositi i vršiti obradu teksta, izvoziti i uvoziti grafiku i dokument
snimiti i štampati.
TOK ČASA
 Rasterska i vektorska grafika
 Pokretanje,izgled ,osnovna podešavanja i eiementi programskog prozora CorelDraw
 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
 Uvozi izvoz grafike
 Snimanje i štampanje dokumenta

Nastavna oblast: Osnove HTML jezika
Nastavna jedinica: Uvod u HTML ,struktura HTML dokumenta,boje i snimanje dokumenta
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa HTML jezikom i strukturom jezika
Očekivani rezultati:Učenici će znati primjenu i strukturu HTML jezika
TOK ČASA
Uvodni dio časa:

 Šta je Web-servis
 Šta je jedinstvena adresa
 Šta je link
Uvod
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.

Nastavna jedinica: Dokument sa tagovima za tekst-Uređivanje teksta
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa unosom i uređivanjem teksta u HTML dokument
Očekivani rezultati:Učenici će znati unositi i uređivati tekst u HTML dokumentu
TOK ČASA
Uvodni dio časa:

 Ponoviti strukturu HTML dokumenta

Uređivanje teksta
Stavimo neki naslov na Web stranicu (npr. „HTML-osnove“).
HTML razlikuje šest nivoa (veličina) naslova, a slijedeća tablica prikazuje svih 6 tagova i odgovarajuće
naslove:
<h1>HTML-osnove</h1>
HTML-osnove
<h2>HTML-osnove</h2> HTMAL-osnove
<h3>HTML-osnove</h3> 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:
veličina 1,veličina 3, veličina 4,veličina 5

2,veličina ,veličina 6,veličina7
Atributom color kojim možemo mijenjati boju teksta (kao što je napravljeno u ovom odjeljku). Za
ovaj atribut važi isto pravilo kao i kod definiranja boja <body>tagom. Dakle, ako želimo da u
nekom dijelu teksta promijenimo boju fonta u crvenu stavit ćemo:
<font color=“#ff0000“> Ovdje ide tekst. </font>
Toliko o korištenju <font> taga. Naravno mogućnosti uređivanja teksta se ne završavaju na
ovom tagu. U HTML dokumentima postoji mogućnost pisanja podebljanim (bold ili strong) slovima i
kurzivom (italic), kao i mogućnost podvlačenja (underline) i precrtavanja (strike) teksta. Slijedeća tablica
prikazuje odgovarajuće tagove kao i rezultate njihove primjene:
<b>bold</b> bold
<strong>strong</strong> strong
<i>italic</i> italic
<u>underline</u> underline
<strike>strike</strike> strike
Osim toga mogu se pisati i slova u indeksu ili eksponentu. Indeks se dodaje pomoću taga <sub>, a
eksponent pomoću taga <sup>. Slijedeća tablica prikazuje primjer njihove primjene:
H<sub>2</sub>O H2O
2<sup>2</sup>=4 22=4
Tekst se u browser-u automatski lomi na kraju reda. To može biti nezgodno ako želimo da neke
fraze budu cijele u jednom redu. Ovo se može postići umetanjem tog dijela teksta izmedju
tagova:
<nobr> Ovdje ide tekst koji se neće prelomiti na kraju reda </nobr>
Ukoliko želimo dozvoliti našem redu da se prelomi, ali na točno određenom mjestu, to možemo postići
korištenjem <wbr> taga. Ovaj tag ne zahtijeva završni tag. Za razliku od <br> taga koji će obvezno
prelomiti red, ovaj tag će prelomiti red samo ako je to neophodno tj. ako je tekst prije njega predugačak
da bi stao u jedan red. Ovaj tag vam također omogućava da prelomite neku dugačku riječ na kraju reda.
Tag za prelazak u novi red je <br> tag. On ne zahtijeva odgovarajući završni tag (što je i razumljivo).
Prelazak u novi odjeljak postiže se <p> tagom.
Centriranje odjeljka ili poravnanje odjeljka uz desnu marginu se postiže align atributom. Align atribut
može imati tri vrijednosti:
left
center
right
Dakle, odgovarajući tagovi za svako od navedenih poravnanja trebaju izgledati ovako:
<p align="left">
<p align="center">
<p align="right">
<html>
<head>
<title>SKOLA</title>
</head>
<body>
<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>

Nastavna jedinica: Vježba-Izrada HTML dokumenta sa tagovima za tekst
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa tagovima za tekst u HTML dokumentu
Očekivani rezultati:Učenici će znati uraditi HTML dokument koristeći tagove za tekst
TOK ČASA
Uvodni dio časa:
 Ponoviti tagove za tekst

<html>
<head>
</head>
<body>
<body ghostwhite="yellow">
<center><h1>Osnove iz HTML</h1></center>
<font face=“Arial“><font size=“7“><center> Moj prva Web stranica</center></font>
<b><i>Ja se ucim praviti Web stranicu i mislim da cu imati uspjeha!<i></b>
<img src="DSC01977.jpg" width="476" height="556">
</body>
</html>

Nastavna jedinica: Liste i tabele u HTML jeziku
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa tagovima za liste i tabele u HTML jeziku
Očekivani rezultati:Učenici će znati koristiti tagove za liste i tabele u HTML dokumentu
TOK ČASA
Uvodni dio časa:

 Ponoviti strukturu HTML

 Liste
Slijedeća stvar koju možemo koristiti u web stranicama su brojevne i nebrojevne liste. Brojevne liste se
ubacuju pomoću <ol> taga, a nebrojevne liste pomoću<ul> taga. Pojedine stavke liste se definiraju
pomoću <li> taga (ovaj tag ne zahtijeva završni tag). Osnovna razlika između ove dvije vrste listi je ta što
će u brojevnim listama ispred pojedinih stavki liste stajati redni brojevi, a u nebrojevnoj listi će stajati
dugmad.
Primjer brojevne liste:
Godišnja doba su:
1. proljeće
2. ljeto
3. jesen
4. zima
koja se dobiva slijedećim HTML kodom:
<p><font face="Arial">Godišnja doba su:</font>
<ol>
<li><font face="Arial">proljeće</font>
<li><font face="Arial">ljeto</font>
<li><font face="Arial">jesen</font>
<li><font face="Arial">zima</font></li>
</ol>
Kao što vidimo ne moramo sami unositi redne brojeve. Browser će ih sam staviti ispred svake stavke
liste. Ako nismo zadovoljni arapskim brojevima koje ovaj tag koristi po default-u, možemo upotrijebiti
atribut type. Ovaj atribut može imati slijedeće vrijednosti:
A - velika slova
a - mala slova
I - rimski brojevi
i - mali rimski brojevi
I. proljeće
II. ljeto
III. jesen
IV. zima
a odgovarajući HTML kod:
<ol type="I">
<li>proljeće
<li>ljeto
<li>jesen
<li>zima
</ol>
Evo sada primjera nebrojevne liste:
Godišnja doba su:
 proljeće
 ljeto
 jesen
 zima
koja se dobija HTML kodom:
<ul>
<li>proljeće
<li>ljeto
<li>jesen
<li>zima
</ul>
Ako nismo zadovoljni sa okruglim dugmićima i to se može regulirati odgovarajućim atributom. Atribut je i
ovaj put type samo što u ovom slučaju može uzimati vrijednosti:
circle - okruglo dugme
disc - ispunjeno okruglo dugme
square - kvadratno dugme
Evo iste liste i sa kvadratnim dugmićima:
 proljeće
 ljeto
 jesen
 zima
a odgovarajući HTML kod je:
<ul type="square">
<li>proljeće
<li>ljeto
<li>jesen
<li>zima
</ul>
 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">Nadimak :</font></th>
</tr>
<tr>
<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>
Nastavna jedinica: Vježba-Izrada HTML dokumenta sa tagovima za liste i tabele
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa tagovima za liste i tabele u HTML dokumentu
Očekivani rezultati:Učenici će znati uraditi HTML dokument koristeći tagove za liste i tabele
TOK ČASA
Uvodni dio časa:

 Ponoviti tagove za liste i tabele

<html>
<head>
</head>
<body>
<center><h1><b>Osnove iz HTML</b></h1></center>
<font face=“Arial“><font size=“7“><center><b> Moj prva Web stranica</b></center></font>
<b>Liste!</b>
<ul type="square">
<li>proljeće
<li>ljeto
<li>jesen
<li>zima
</ul>
<b>Tabela!</b>
<table border="2">
<tr>
<th><font face="Verdana" size="2">Razred :</font></th>
</tr>
<tr>
<td><font face="Verdana" size="2">IX-2</font></td>
</tr>
<tr>
<td><font face="Verdana" size="2">Marko</font></td>
<td><font face="Verdana" size="2">Marković</font></td>
<td><font face="Verdana" size="2">IX-1</font></td>
</tr>
</table>
</body>
</html>
Nastavna jedinica: Grafika , linkovi i forme u HTML - jeziku
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa tagovima za grafiku , linkove i forme u HTML-jeziku
Očekivani rezultati:Učenici će znati koristiti tagove za grafiku, linkove i forme u HTML dokumentu
TOK ČASA
Uvodni dio časa:
 Ponoviti strukturu HTML
 Ponoviti tagove za tekst
 Ponoviti tagove za liste i tabele

 Unos slike
<html>
<head>
</head>
<body>
<b>Unos slike!</b>
<center><img src="DSC01977.jpg" width="476" height="556"></center>
</body>
</html>
 Linkovi
<html>
<head>
</head>
<body>
<b><font face=“Arial“><font size=“7“> Linkovi!</font></b>
<a href="http://www.google.com/"> Google </a>
</body>
</html>
<html>
<head>
</head>
<body>
<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>
</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>
</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>
</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>
VALUE="Šiljo"> Šiljo <BR>
VALUE="Miki"> Miki Maus<P>
</form>
</body>
</html>

Nastavna jedinica:Vježba- Izrada HTML dokumenta sa tagovima za grafiku,linkove i forme
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa tagovima za grafiku,linkove i forme
Očekivani rezultati:Učenici će znati koristiti tagove za grafiku, linkove i forme u HTML dokumentu
TOK ČASA
Uvodni dio časa:

 Struktura HTML dokumenta
 Tagovima za grafiku,linkove i forme
<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>
</form>
<a href="http://www.google.com/"> Google </a></h2>
</body>
</html>
Nastavna jedinica: Osnove HTML jezika -Sistematizacija
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)
Očekivani rezultati:Učenici će znati uraditi dokument u HTML koji sadrži odgovarajuće tagove
TOK ČASA
Uvodni dio časa:

 Ponoviti tagove za tekst,liste,tabele,gragiku linkove i forme
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>
</form>
<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

Nastavna oblast: Izrada Web sajta
Nastavna jedinica: Pojam i struktura Web sajta
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa pojmom ,vrstom , strukturom i Web servisa
Očekivani rezultati:Učenici će znati šta je Web servis,wrste i strukturu web servisa
TOK ČASA
Uvodni dio časa:

 Šta je Internet
 Nabrojati pretraživače
Web-sajt predstavlja jednu ili više stranica koje sadrže slike, tekst, blogove (web dnevnici) , video
materijale i druge načine komunikacije potrebne da bi se informisali klijenti i posjetioci tog sajta.
Podela web sajtova prema interaktivnosti sa posetiocima:
− statički web sajtovi
− dinamički web sajtovi
Statički web sajtovi su najjednostavniji, najbrže se rade, te su obično i najjeftiniji. Najčešće se rade u
HTML-u, odnosno u XHTML-u u kombinaciji sa CSS-om. Mogu imati animacije i java skripte, ali nemaju
interaktivnost sa posetiocima.
Sva aktivnost posetioca ovakvog web sajta svodi se na pregledavanje sadržaja i eventualno korišćenje
kontakt forme. Ne zahtevaju bazu podataka. Celokupan HTML kôd izvršava se u browser-u posetioca.
Obično se brže učitavaju i lakše ih je optimizovati za pretraživače. Pogodni su za manje zahtevne web
sajtove, sa manje podataka i gde interakcija sa posetiocima nije neophodna.
Dinamički web sajt omogućava manju ili veću interakciju sa posetiocima, prikuplja podatke o
posetiocima i njihovim interesovanjima, omogućava ili onemogućava pristup delovima sajta određenim
kategorijama posetioca, automatski šalje obaveštenja ili vesti posetiocima koji to žele, te može da
omogućava pronačaženje i sortiranje podataka... Obično se rade u nekom programskom jeziku (php,
asp...) i kod im se izvršava na serveru, pa tek potom šalje browser-u.
Kreiranje sajta:
 Putem gotovih šablona (Templates)
 Samostalna izrada –Dizajn
Faze izrade sajta:
 Planiranje i razvoj sajta
 Dizajniranje sajta
 Programiranje sajta
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

Nastavna jedinica: Program za izradu Web sajta Dreamweawer ,izrada početne stranice
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa programom za izradu Web sajta(Dreamweawer) i
kreiranjem početne stranice
Očekivani rezultati:Učenici će znati elemente programa Dreamweawera i kreirati početnu stranicu
TOK ČASA
Uvodni dio časa:

 Šta je Web sajt
 Elementi programa Dreamweawera
Program Dreamweaver se pokreće preko ikone ili startnog menija
Pokretanjem Dreamweaver, pojaviće se prozor dobrodošlice sa informacijama za nove korisnike, kao i
skup novih mogućnosti za one koji već poznaju program. Otvaranje novog HTML dokumenta vrši se
preko opcije
HTML
iz opcije
Create
New.
Snimanje Web stranice

1. Iz File menija izaberite File / Save As.
2. U dijalog prozoru Save As u polju Save in izabrati folder na koji snimamo prvu sranicu
3. U polju File name upis imena (Ime.html)
4. U polju Save as type izabrati All files
5. Save
6. U tekst polju Title na vrhu dokumenta upišite naslov stranice (npr.proba)
Podešavanje svojstva Web stranice (Page Properties)
Naslov stranice, boja pozadine, pozadinska slika, tekst, boje linkova, margine su osnovna
svojstva svakog web dokumenta. Podešavanje ili promenu ovih svojstava možete izvršiti
preko opcije Page Properties u prozoru Properties. Drugi način je otvaranjem odgovarajuće
komande iz File menija.
1. Izaberite komandu Modify / Page Properties iz File menija, ili klikinite na Page
Properties dugme u prozoru
Properties.
2. Otvoriće se dijalog prozor Page
Properties
3. Iz liste Category izaberite opciju

Appearance.
4. U opciji Page font, Size, Color
možete podesiti vrstu, veličinu i boju
fonta.
5. U opciji Background color birate
boju pozadine.
6. U opciji Background image birate
pozadinsku sliku. Ako je za pozadinu
izabaranaslika onda ona treba da
predstavlja mali grafički objekat, čijim
kopiranjem sepopunjava cela strana.
Strana može imati definisanu boju i
sliku za pozadinu.
7. Opcija Repeat omogućava podešavanje načina ponavljanja pozadinske slike.
8. Pri otvaranju novog dokumenta u Design modu položaj kursora je po default-upodešen na 10 pixela
od vrha, odnosno leve strane prozora dokumenta. Da bi seizvršilo podešavanje položaja kursora na web
dokumentu u poljima za margine Left margin, Right margin, Top margin, Bottom margin upisuje se
odgovarajuća vrednost.Ukoliko želimo da početak web stranice bude u koordinatnom početku (gornji levi
ugao) potrebno je margine podesiti na vrednost 0.
9. U okviru dijalog prozora Page Properties vrši se i podešavanje kodnog rasporeda Web stranice.
10. Iz liste Category izaberite opciju Title/Encoding.
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).

Nastavna jedinica: Unos tabela na Web stranicu
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa unosom i dimenzionisanjem tabela na web stranici
Očekivani rezultati:Učenici će znati unositi i dimenzionisati tabele i uraditi strukturu Web sajta
TOK ČASA
Uvodni dio časa:

 Struktura Web sajta

Ubacivanje tabela na web stranicu
Jednostavne Web strane brzo se prave smeštanjem teksta i slika neposredno na stranu.
Međutim, tabele pružaju više mogućnosti za razmeštanje elemenata na strani. One
omogućavaju predstavljanje informacija na organizovan način, jer sadrže redove i kolone
ćelija u koje se smešta sadržaj.
Tabele su podeljene na redove, koji prolaze horizontalno kroz tabelu i kolone koje se protežu vertikalno
kroz tabelu
1. Iz File menija izaberite komandu Insert / Table.
2. Otvara se dijalog prozor Table
3. U okviru dijalog prozora Table treba izvršiti sledeća
podešavanja:
o Rows – broj redova.
o Columns – broj kolona tabele.
o Width – širina tabele u pikselima ili procentima širine
prozora browsera.
o Border – debljina ivice tabele. Podrazumevana
vrednost je 1.
o Cell Padding – razmak između sadržaja tabele i
njenih ivica. Ako uopšte
nećete razmak između sadržaja ćelija tabele i njenih
ivica upišite 0 u ovo polje.
o Cell Spacing – razmak između ćelija tabele, ne
računajući ivice. Ako uopšte
nećete razmak između ćelija tabele upišite 0 u ovo polje.
4.Nakon upisavanja vrednosti kao na slici kliknite Ok u Design prikazu dobićete tabelu kao na slici
5. Da biste odselektovali tabelu klikinite mišem sa strane.
6. Pozicionirajte se ispod prve tabele i ubacite drugu tabelu postavljajući iste parametre kao i kod prve.
7. Na kraju ubacite i zadnju tabelu-treću koja treba da ima jedan red, jednu kolonu ,širina je 960 px ,
cellpadding i cellspacing = 0.
8. Nakon ubacivanja sve tri tabele vaša stranica će da izgleda 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.
Podešavanje parametara tabele
Pre nego što počnete sa podešavanjem svojstava tabele, uključite tzv. Expanded Tables mde,
karakteristiku koja privremeno doddaje cell padding i spacing tabeli i povećava bordere kako
bi se lakše pozicionirali u pravu ćeliju.
1. Iz File menija izaberite opciju View / Table Mode / Expanded Table Mode.
Expanded Table Mode nije WYSIWYG (ono što vidiš je ono što dobiješ) okruženje,
tako da posle podešavanja parametara tabele treba da se vratite u Standardni mod.
Podešavanje širine i visinu kolone ili reda tabele

1. Postavite kursor u ćeliju tabele čije dimenzije želite da podesite.
2. U donjem levom uglu prozora Document nalazi se birač HTML oznaka – Tag Selector. U njemu se
hijerarhijski prikazuju HTML oznake koje pripadaju trenutno izabranom elementu. Ova alatka omogućuje
brzo kretanje kroz kod strane, elemente sa kojima radite i lako biranje ostalih elemenata. Početna HTML
oznaka je uvek tag za telo stranice - <body>.
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)
Podešavanje pozadinske boje kolone ili reda tabele
1. Postavite kursor u ćeliju čiju pozadinsku boju želite da podesite.

2. Pomoću tag selektora selektujete red ili kolonu koju podešavate.
3. U Properties prozoru kliknite na ikonu za podešavanje pozadinske boje
4. Podešavanje pozadinske boje se može vršiti i upisivanjem heksadecimalnog koda u

tekstualnom polju pored opcije Background Color.

Nastavna jedinica: Unos teksta na Web stranicu
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa unosom teksta na Web stranicu
Očekivani rezultati:Učenici će znati unositi i formatirati tekst na Web stranici
TOK ČASA
Uvodni dio časa:
 Ponoviti unos tabela na Web stranicu
 Dimenzionisanje tabela

Rad sa tekstom
Tekst se može dodati kopiranjem i prenošenjem iz drugog dokumenta. Na primer,Dreamweaver može
da otvori Microsoft Word dokument, ako je bio snimljen kao tekstualna datoteka (sa ekstenzijom .txt) ili
kao HTML dokument. Tekst u Microsoft Word dokumentu možete sačuvati kao HTML izborom opcije
Save as Web page iz padajućeg menija File. Kada otvorite tekstualnu datoteku u Dreamweaveru, tekst
možete kopirati i preneti na vašim stranicama. Ukoliko želite da posetioci čitaju vaš sadržaj stranica,
obezbedite razdvajanje pasusa i dovoljno belog prostora pošto “odmara” oči. Tekst ne treba da bude ni
predugačak ni preširok (“kratka” forma), gde sa malo reči treba saopštiti najbitnije informacije.
Istraživanja su pokazala da čovek čita 25% sporija na monitoru, nego što to radi na papiru. Nikad ne
podvlačite reči, jer takvo formatiranje navodi na fontove. Pet vrsta fontova imaju najbolju čitljivost na
ekranu i zastupljenost na računarima, a to su: Arial, Verdana, Times New Roman, Tahoma i Courier.
Serif fontovi ( Times New Roman, Georgia,...) se uglavnom koriste za naslove i veće natpise. Sans-Serif
(Helvetica, Verdana, Arial,…) koriste se za tekst sadržaja. Korišćenje više različitih fontova na
stranicama pravi nered i konfuziju Web strane će biti zanimljivije i lakše za čitanje ako primenjujete font
kojim se prikazuje tekst. Da bi posetilac vašeg sajta video stranu onako kako ste je napravili, mora na
svom računaru imati instaliran font koji ste koristili. Nemojte misliti da svi korisnici imaju sve
fontove. Kombinacije instaliranih fontova čine da browser prikazuje tekst u drugom fontu. Ako nijednog
od tih fontova nema na korisnikovom računaru, tekst se prikazuje u podrazumevanom fontu browsera.
Takođe u Properies prozoru možete promeniti i veličinu fontova u polju Size. Da biste istakli određene
stavove, reči ili izraze, u Dreamweaveru možete natekst primeniti više opcija formatiranja.
To su:
• polucrni (podebljani) ispis - bold,
• kurzivni ispis – italic,
• podvlačenje – underline.
Pri svakoj promeni teksta, Dreamweaver 8 automatski kreira stilove dodajući im imena
Style 1, Style 2, Style 3,...Na slici je prikazano kako se deo teksta „NAZIV SAJTA“ nalazi
unutar oznaka <span class=“Style 1“> i </span>.
Ovu opciju Dreamweavera 8 – da prilikom formatiranja teksta se automatski kreiraju CSS

stilovi možete da isključite pomoću opcije Edit/Preferance/General-odselektovati opciju
Use CSS instead HTML tag
Dreamweaver omogućuje pravljenje dve vrste spiskova (listi):

• neuređenu – unorder list,
• uređenu – order list.
Uređena lista sadrži stavke odvojene rednim brojevima ili slovima abecede, i poređene u numerisanim,
odnosno abecednim spisak. Mogu da se koriste arapski ili rimski brojevi, odnosno velika ili mala slova
abecede. U neuređenoj listi ili listi nabrajanja svaka stavka počinje znakom za nabrajanje (bulletom).
Podrazumevani znak za nabrajanje je pun krug.

Nastavna jedinica: Otvarane nove web stranice i uspostavljanje veza između stranica
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa otvaranjem nove Web stranice i uspostavljanje veza
između stranica
Očekivani rezultati:Učenici će znati otvoriti novu Web stranicu i uspostaviti veze između stranica
TOK ČASA
Uvodni dio časa:

 Ponoviti unos teksta na Web stranicu
 Ponoviti unos tabela

Otvaranje nove Web stranice
1. Izaberite iz fajl menija opciju File / New.
2. Sa kartice General dijaloga prozora New Document, u listi Category izaberite opciju Basic Page.
3.Nakon prikaza liste Basic Page, izaberite prvu opciju odnosno HTML i kliknite na dugme Create.
5. U dijalog prozoru Save As sačuvajte stranicu pod nazivom proba.html.
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).
Slika 2 - Drugi način kreiranja linka

3.Označiti tekst-Insert –Hiperlink-Otvara se prozor Hiperlink-Kliknuti na ikonu-Otvara se prozor
Select File-Selektovati stranicu sa kojom želimo uspostaviti vezu-Ok-Ok
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.
Slika 3 Prozor za formiranje Email linka
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.
Slika 4 Unos linka za Email

Nastavna jedinica: Vježba-Izrada Web stranice
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa izradom Web stranice koja treba da sadrži tabele,
tekst i grafičke elemente
Očekivani rezultati:Učenici će znati uraditi Web stranicu koja sadrži tabele,tekst i grafičke elemente
TOK ČASA
Uvodni dio časa:

1.Da bi Dremweaver znao da se u određenom direktorijumu nalazi web sajt, kao i
elementi istog, mi moramo da ga definišemo kao takvog unutar samog Dremweaver-a. To radimo na
sledeci nacin:
- Kreiramo direktorijum koji se naziva WEB
i u njega smeštamo sve fajlove koji su nam potrebni za sajt
(images, CSS, tekst).
-Pokrenemo Dreamweaver (dvostruki klik na ikonicu ili sa start dugmeta).
-Otvaranje novog HTML dokumenta vrši se preko opcije HTML iz opcije Create New.
Snimanje Web stranice
5. Save
Podešavanje svojstva Web stranice (Page Properties)

Naslov stranice, boja pozadine, pozadinska slika, tekst, boje linkova, margine su osnovna svojstva
svakog web dokumenta. Podešavanje ili promenu ovih svojstava možete izvršiti preko opcije Page
Properties u prozoru Properties. Drugi način je otvaranjem odgovarajuće komande iz File menija.
1. Izaberite komandu Modify / Page Properties iz File menija, ili klikinite na Page
Properties dugme u prozoru Properties.
2. Otvoriće se dijalog prozor Page Properties
Tabelarni razmještaj
Iz File menija izaberite komandu Insert / Table. Otvara se dijalog prozor Table
Podešavanje parametara tabele

Iz File menija izaberite opciju View / Table Mode / Expanded Table Mode. Expanded Table Mode nije
WYSIWYG (ono što vidiš je ono što dobiješ) okruženje, tako da posle podešavanja parametara tabele
treba da se vratite u Standardni mod.
Postavite kursor u ćeliju tabele čije dimenzije želite da podesite.
Upisati širinu W i visinu H
Nastavna jedinica: Vježba-Izrada Web sajta prema izboru
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa izradom Web sajta koji mora da sadrži sve potrebne
elemente i uspostavljanje veza između stanica
Očekivani rezultati:Učenici će znati uraditi Web sajt
TOK ČASA
Uvodni dio časa:

Kreiranje Web sajta
- Kreiramo direktorijum koji se naziva WEB
i u njega smeštamo sve fajlove koji su nam potrebni za sajt
(images, CSS, tekst).
-Pokrenemo Dreamweaver (dvostruki klik na ikonicu ili sa start dugmeta).
-Otvaranje novog HTML dokumenta vrši se preko opcije HTML iz opcije Create New.
Snimanje 1. Web stranice
5. Save
Otvaranje novog Web dokumenta-2 Web stranice
5. U dijalog prozoru Save As sačuvajte stranicu pod nazivom moca.html.
6. U tekst polju Title na vrhu dokumenta upišite naslov stranice (npr.moca)
Otvaranje novog Web dokumenta-3 Web stranice

5. U dijalog prozoru Save As sačuvajte stranicu pod nazivom sale.html.
6. U tekst polju Title na vrhu dokumenta upišite naslov stranice (npr.sale)
Uspostavljanje veza između stanica-Linkovi
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.
3 2 4

Nastavna jedinica: Izrada Web sajta u Microsoft FrontPage
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa načinom izrade Web sajta u Microsoft FrontPage
Očekivani rezultati:Učenici će znati uradit sajt u Microsoft FrontPage
TOK ČASA
Uvodni dio časa:
 Šta je Web sajt
 vrste sajtova
Microsoft FrontPage
Pokretanje programa
Start –Programs –Microsoft Office-Microsoft FrontPage 2003
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
-Da bi se vratili za u tzv. mod dva puta kliknuti na ikonicu index.html
-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
2.Označiti tekst ili sliku-Insert-Hiperlink-Existing File or Web Page-Curent Folder-Označiti

index.htm (Home strana moje prezentacije)- Ok

Nastavna jedinica: Sistematizacija gradiva
Zadaci nastave:
а) Obrazovno-vaspitni: Upoznavanje učenika sa pređenim gradivom u toku školske godine
Očekivani rezultati:Učenici će znati pređeno gradivo
TOK ČASA
Sadržaj časa
 Programiranje i programski jezici-QBasic

 Linijske algoritamske strukture
 Razgranate algoritamske strukture
 Brojačke petlje
 Nizovi
 Znakovni podaci
 grafika u QBasc-u
 Uvod u grafički dizajn
 Elementi programskog prozora CorelDraw
 Alati za crtanje geometrijskih figura i druge alatke,rad sa čvorovima
 Rad sa tekstom,uvozi izvoz grafike , snimanje i štampanje
 Osnove HTML jezika
 Uvod u HTML ,struktura HTML dokumenta,boje i snimanje dokumenta
 Liste i tabele u HTML jeziku
 Grafika , linkovi i forme u HTML – jeziku
 Izrada Web sajta
 Pojam i struktura Web sajta
 Program za izradu Web sajta Dreamweawer ,izrada početne stranice
 Unos tabela na Web stranicu
 Unos teksta na Web stranicu
 Otvarane nove web stranice i uspostavljanje veza između stranica

Informatika9 - Pripreme - Odlično

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Informatika9 - Pripreme - Odlično

Uploaded by

Copyright:

Available Formats

PREDMET : OSNOVI INFORMATIKE

U računarstvu postoje tri grupe softvera:

Editor služi za pisanje programa u višem i asemblerskom jeziku

Osnovni elementi dijagrama toka kod BASIC-a su:

početak/ kraj programa

INPUT “Kolika je brzina v:“, v v, t

INPUT “Koliko je vrijeme t:“, t

PRINT “Predjeni put je =“; s; „km“ s

ISTINA uslov LAŽ

IF uslov THEN naredba1 ELSE naredba2 ISTINA uslov LAŽ

Centralni dio časa:

Završni dio : Ponoviti nastavnu jedinicu

Centralni dio časa:

REM: KONVERZIJA STEPENI U KELVINE Start

REM Zbir cifara dvocifrenog broja Start

INPUT "Unesi dvocifren broj:"; a a

PRINT "Trazeni zbir je="; z z

3.Napiši program koji ispisuje apsolutnu vrijednost nekog broja!

Centralni dio časa:

Ciklične algoritamske strukture

FOR . . . NEXT PETLJA

REM Ispis N prirodnih brojeva Start

Centralni dio časa:

WHILE . . . WEND PETLJA

Opšti oblik ove naredbe je:

WHILE uslov Laž

REM Suma prvih n prirodnih brojeva

2. Napisati program koji računa sumu cifara nekog broja n!

REM: Zbir cifara nekog broja n

REM Proizvod brojeva u intervalu AB

Završni dio : Ponoviti nastavnu jedinicu

Centralni dio časa:

 Ciklične algoritamske strukture

Centralni dio časa:

REM:ARITIMETICKA SREDINA NIZA I CLANOVI MANJI I VEĆI OD AR. SREDINE

REM Razlika proizvoda i zbira

Završni dio : Ponoviti nastavnu jedinicu

Centralni dio časa:

Rad sa NISKAMA (stringovima)

Završni dio : Ponoviti nastavnu jedinicu

Centralni dio časa:

PSET (X,Y) [ ,boja]

PSET- Ključn riječ

CIRCLE I STEP –ključne riječi

Završni dio : Ponoviti nastavnu jedinicu

 Šta je rasterska grafika

Centralni dio časa:

Centralni dio časa:

Shape tool-Služi za editovanje čvorova i krivih

Zoom Tool-Za kontrolu zumiranja

Freehand tool-Olovka za crtanje slobodnom rukom

Rectangle tool-Crtanje pravougaonika

Elipse tool-Crtanje elipsa i krugova

Polygon tool-Crtanje pligona

Text tool-Rad sa tekstom

Fill tool-Za editovanje fill-a(ispunjenja) objekata

Outline tool-Konturne linije objekata

Table tool-Crtanje tabela

Spirale tool-Crtanje spirale

Završni dio : Ponoviti nastavnu jedinicu

Centralni dio časa:

 Crtanje raznih oblika

Završni dio : Ponoviti nastavnu jedinicu