pripreme za ix razredosmladenstojanovic.com/wp-content/uploads/2016/10/9-razred.pdfzadaci nastave:...

PREDMET : OSNOVI INFORMATIKE

PRIPREME ZA IX RAZRED

Nastavnik:

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.

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

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 INPUT "SATI="; H INPUT "MINUTE="; M INPUT "SEKUNDE="; S S = H * 3600 + M * 60 + S H = S / 3600 PRINT "SEKUNDE="; S PRINT "SATI="; H END Izvršni dio programa: SATI=? 4 MINUTE=? 35 SEKUNDE=? 45 SEKUNDE= 16545

SATI= 4.595833 2.Automobil se kreće brzinom v za vrijeme t, koliki će put preći automobil?

REM: Pređeni put

CLS

INPUT “Kolika je brzina v:“, v

INPUT “Koliko je vrijeme t:“, t

s = v * t

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

END

Start

H,M,S

S=H*3600+M*60+S

S,H

Kraj

Start

v, t

t

s

KRAJ

s=v*t

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

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


Šta je program Faze programiranja Šta je algoritam i algoritamske strukture

Centralni dio časa:

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




Nastavna jedinica: QBasic-okruženje,osnovne naredbe i ugrađene funkcije








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


Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa rješavanjem programa iz linijskih i razgranatih algoritamskih struktura b) Funkcionalni: Sticanje praktičnih znanja i primjena istih Očekivani rezultati:Učenici će znati rješavati programe iz linijskih i razgranatih algoritamskih struktura.


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 CLS INPUT "UNESITE STEPENE CELZIJUSA:"; C K = C + 273.15 PRINT "KELVINI="; K END Izvršni dio programa: UNESITE STEPENE CELZIJUSA:? 35 KELVINI= 308.15




Nastavna jedinica:Vježba-Rješavanje problema primjenom linijskih i razgranatih alg.struktura








Start

C

K

KRAJ

K=C+273.15

Start

a

z

KRAJ

2.Napiši program koji će računati zbir cifara bilo koga dvocifrenog broja! REM Zbir cifara dvocifrenog broja CLS INPUT "Unesi dvocifren broj:"; 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 END Izvršni dio programa: 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

Izvršni dio programa: 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


Zadaci nastave: а)Obrazovno-vaspitni:Upoznavanje učenika sa cikličnim alg. strukturama i For brojačkom petljom b) Funkcionalni: Sticanje praktičnih znanja i primjena istih Očekivani rezultati:Učenici će znati šta su ciklične alg. strukture i rješavati programe iz For petlji


Š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.




Nastavna jedinica: Ciklične algoritamske strukture (Programske petlje-For petlja)








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

I

I

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


Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa principom rada While..WEND petljom b) Funkcionalni: Sticanje praktičnih znanja i primjena istih Očekivani rezultati:Učenici će znati primjeniti WHILE...WEND petlju za pisanje određenih programa


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




Nastavna jedinica: WHLE...WEND petlja








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


Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa principom rada DO....LOOP brojačkih petlji b) Funkcionalni: Sticanje praktičnih znanja i primjena istih Očekivani rezultati:Učenici će znati primjeniti DO..LOOP petlje pri pisanju određenih programa.


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 LOOP DO UNTIL uslov blok naredbi LOOP DO blok naredbi LOOP WHILE uslov DO blok naredbi LOOP UNTIL uslov




Nastavna jedinica: DO....LOOP petlje








Blok naredbi će se izvršavati

sve dok je uslov ispunjen –

ne mora ni jedanput


sve dok je uslov ispunjen -

bar jedanput

Blok naredbi će se izvršavati sve

dok uslov nije ispunjen -bar

jedanput


sve dok uslov nije ispunjen

– ne mora ni 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

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


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




Nastavna jedinica: Nizovi








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


Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa sa znakovnim podacima i njihovom primjenom b) Funkcionalni: Sticanje praktičnih znanja i primjena istih Očekivani rezultati:Učenici će znati rješavati zadatke koristeći stečeno znanje iz znakovnih podataka.


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.




Nastavna jedinica: Rad sa znakovnim podacima ( stringovi )








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 INPUT "UNESITE IME:"; IME$ 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 INPUT "UNESITE IME:"; IME$ 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


Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa primjenom grafike u QBasic-u i slučajnim brojevima b) Funkcionalni: Sticanje praktičnih znanja i primjena istih Očekivani rezultati:Učenici će znati rješavati zadatke koristeći stečeno znaje iz grafike.


Š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




Nastavna jedinica: Rad sa grafikom,slučajni brojevi








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


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




Nastavna jedinica: Programiranje i programski jezici-sistematizacija








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 IF N < 1 THEN GOTO 10 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 N I I K KO OL LA


Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa rasterkom i vektorskom grafikom b) Funkcionalni: Sticanje praktičnih znanja i primjena istih 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

Centralni dio časa: 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



Nastavna oblast: Uvod u grafički dizajn

Nastavna jedinica: Rasterska i vektorska grafika








http://imi.pmf.kg.ac.rs/dokuwiki/lib/exe/detail.php?id=vektorska-i-rasterska-grafika&media=vekras01.jpg

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.


http://imi.pmf.kg.ac.rs/dokuwiki/lib/exe/detail.php?id=vektorska-i-rasterska-grafika&media=vekras02.jpg

Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa pokretanjem programa i elementima programskog prozora CorelDRAW b) Funkcionalni: Sticanje praktičnih znanja i primjena istih Očekivani rezultati:Učenici će znati elemente programskog prozora CorelDRAW


Š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: Pokretanje,izgled ,osnovna podešavanja i eiementi programskog prozora CorelDraw








Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa alatkama za crtanje linija,tačaka i geometrijskih figura b) Funkcionalni: Sticanje praktičnih znanja i primjena istih 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





Nastavna jedinica: Alati za crtanje linija , tačaka i geometrijskih figura -Toolbox








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


Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa alatkama za crtanje geometrijskih figura ,čvorovima i koriščenjem palete boja b) Funkcionalni: Sticanje praktičnih znanja i primjena istih Očekivani rezultati:Učenici će znati alatke za ctanje geometrijskih figura , čvorove i njihovu primjenu kao koristiti paletu boja


Ponoviti elemente programskog prozora

Centralni dio časa: 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.




Nastavna jedinica: Alati za crtanje geometrijskih figura i druge alatke,rad sa čvorovima








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 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


Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa crtanjem tačaka,linija ,duži i figura u CrelDRAW b) Funkcionalni: Sticanje praktičnih znanja i primjena istih Očekivani rezultati:Učenici će znati primjeniti alatke za crtanje tačaka,duži,linila i figura


Alati za crtanje geometrijskih figura i druge alatke


Završni dio : Ponoviti nastavnu jedinicu i ukazati na eventualne greške




Nastavna jedinica: Vježba-Crtanje tačke ,linije ,duži i figura,rad sa čvorovima








Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa unosom teksta , uvozom i izvozm grafike kao i sa snimanjem i štampanjem grafike u CrelDRAW-u b) Funkcionalni: Sticanje praktičnih znanja i primjena istih Očekivani rezultati:Učenici će znati unositi i vršiti obradu teksta, izvoziti i uvoziti grafiku i dokument snimiti i štampati.



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




Nastavna jedinica: Rad sa tekstom,uvozi izvoz grafike , snimanje i štampanje








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


Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa unosom teksta , uvozom i izvozm grafike kao i sa snimanjem i štampanjem grafike u CrelDRAW-u b) Funkcionalni: Sticanje praktičnih znanja i primjena istih 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 jedinica: Uvod u grafički dizajn -Sistematizacija








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

Uvodni dio časa:

Šta je Web-servis

Šta je jedinstvena adresa

Šta je link Centralni dio časa:

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>



Nastavna oblast: Osnove HTML jezika

Nastavna jedinica: Uvod u HTML ,struktura HTML dokumenta,boje i snimanje dokumenta








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

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 <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“>




Nastavna jedinica: Dokument sa tagovima za tekst-Uređivanje teksta








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 2,veličina 3, veličina 4,veličina 5,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> <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>


Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa tagovima za tekst 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 tekst


Ponoviti tagove za tekst

Centralni dio časa: <html> <head>

<title>SKOLA</title>

</head>

<body>

<body ghostwhite="yellow">

<body bgcolor="#ffff00" text="#008000">

<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: Vježba-Izrada HTML dokumenta sa tagovima za tekst








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

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




Nastavna jedinica: Liste i tabele u HTML jeziku








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">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

s a t i

1. francuski programiranje tjelesni kemija francuski

2. matematika francuski tjelesni kemija francuski

3. tjelesni matematika programiranje biologija engleski

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>


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

Uvodni dio časa:

Ponoviti tagove za liste i tabele

Centralni dio časa: <html> <head> <title>SKOLA</title> </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">Ime :</font></th> <th><font face="Verdana" size="2">Prezime :</font></th> <th><font face="Verdana" size="2">Razred :</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">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: Vježba-Izrada HTML dokumenta sa tagovima za liste i tabele








Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa tagovima za grafiku , linkove i forme u HTML-jeziku b) Funkcionalni: Sticanje praktičnih znanja i primjena istih Očekivani rezultati:Učenici će znati koristiti tagove za grafiku, linkove i forme u HTML dokumentu


Ponoviti strukturu HTML Ponoviti tagove za tekst Ponoviti tagove za liste i tabele


Unos slike <html> <head> <title>SKOLA</title> </head> <body> <b>Unos slike!</b> <center><img src="DSC01977.jpg" width="476" height="556"></center> </body> </html>




Nastavna jedinica: Grafika , linkovi i forme u HTML - jeziku








Linkovi <html> <head> <title>SKOLA</title> </head> <body> <b><font face=“Arial“><font size=“7“> Linkovi!</font></b> <a href="http://www.google.com/"> Google </a> </body> </html>

<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>


Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa tagovima za grafiku,linkove i forme b) Funkcionalni: Sticanje praktičnih znanja i primjena istih 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

Centralni dio časa: <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> </body> </html>




Nastavna jedinica:Vježba- Izrada HTML dokumenta sa tagovima za grafiku,linkove i forme








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

Uvodni dio časa:

Ponoviti tagove za tekst,liste,tabele,gragiku linkove i forme

Centralni dio časa: 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>




Nastavna jedinica: Osnove HTML jezika -Sistematizacija








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


Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa pojmom ,vrstom , strukturom i Web servisa b) Funkcionalni: Sticanje praktičnih znanja i primjena istih Očekivani rezultati:Učenici će znati šta je Web servis,wrste i strukturu web servisa


Šta je Internet

Nabrojati pretraživače Centralni dio časa: 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

Razred i odjeljene: IX Datum: Redni br. časa:26 Predmet: OSNOVI INFORMATIKE

Nastavna oblast: Izrada Web sajta

Nastavna jedinica: Pojam i struktura Web sajta

TIP ČASA OBLICI RADA NASTAVNE METODE NASTAVNA SREDSTVA

a)obrada a)frontalni a)monološka a)tekst







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

Uvodni dio časa:

Šta je Web sajt

Elementi programa Dreamweawera Centralni dio časa: 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)



Nastavna jedinica: Program za izradu Web sajta Dreamweawer ,izrada početne stranice









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). Završni dio : Ponoviti nastavnu jedinicu

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

Uvodni dio časa:

Struktura Web sajta Centralni dio časa: 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



Nastavna jedinica: Unos tabela na Web stranicu









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.


Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa unosom teksta na Web stranicu b) Funkcionalni: Sticanje praktičnih znanja i primjena istih Očekivani rezultati:Učenici će znati unositi i formatirati tekst na Web stranici


Ponoviti unos tabela na Web stranicu Dimenzionisanje tabela

Centralni dio časa: 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.



Nastavna jedinica: Unos teksta na Web stranicu









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. Završni dio : Ponoviti nastavnu jedinicu

Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa otvaranjem nove Web stranice i uspostavljanje veza između stranica b) Funkcionalni: Sticanje praktičnih znanja i primjena istih 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

Centralni dio časa: 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. 4. Iz File menija izaberite File / Save As. 5. U dijalog prozoru Save As sačuvajte stranicu pod nazivom proba.html. 6. U tekst polju Title na vrhu dokumenta upišite naslov stranice (npr.proba)

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.



Nastavna jedinica: Otvarane nove web stranice i uspostavljanje veza između stranica









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

- Završni dio : Ponoviti nastavnu jedinicu

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


Ponoviti unos teksta na Web stranicu Ponoviti unos tabela

Centralni 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 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



Nastavna jedinica: Vježba-Izrada Web stranice









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

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 b) Funkcionalni: Sticanje praktičnih znanja i primjena istih Očekivani rezultati:Učenici će znati uraditi Web sajt


Ponoviti unos teksta na Web stranicu Ponoviti unos tabela

Centralni 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 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)



Nastavna jedinica: Vježba-Izrada Web sajta prema izboru









Otvaranje novog Web dokumenta-2 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. 4. Iz File menija izaberite File / Save As. 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 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. 4. Iz File menija izaberite File / Save As. 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. 1 3 2 4 5 Završni dio : Ponoviti nastavnu jedinicu i ukazati na eventualne greške

Zadaci nastave:

а) Obrazovno-vaspitni: Upoznavanje učenika sa načinom izrade Web sajta u Microsoft FrontPage

b) Funkcionalni: Sticanje praktičnih znanja i primjena istih

Očekivani rezultati:Učenici će znati uradit sajt u Microsoft FrontPage


Šta je Web sajt vrste sajtova

Centralni dio časa: 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



Nastavna jedinica: Izrada Web sajta u Microsoft FrontPage









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


Zadaci nastave: а) Obrazovno-vaspitni: Upoznavanje učenika sa pređenim gradivom u toku školske godine b) Funkcionalni: Sticanje praktičnih znanja i primjena istih 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



Nastavna jedinica: Sistematizacija gradiva









pripreme za ix razredosmladenstojanovic.com/wp-content/uploads/2016/10/9-razred.pdfzadaci nastave:...

Documents