Što je web stranica?

Web stranica je spoji teksta, slike, animacije i zvuka na jednom mjestu smještana na nekom
od velikog broja računala povezanih u najveću mrežu na svijetu - Internet.

Internet danas broji na milijarde web stranica i svakim danom ih je više i više. Sve te web
stranice cijeloga svijeta (eng. World Wide Web - WWW) medusobno su povezane hyper-
linkovima (eng. link - veza) koji ostvaruju vezu izmedu različitih web stranica.

Primjer izgleda web stranice (HTTP://4OSNOVNA-VZ.HR)

Kao što vidite web stranice obiluju slikama, tablicama, izbornicima, efektno ukršenim i
animiranim tekstom pa čak i muzikom u podlozi. Naravno za sve te "sitnice" potrebno je
mnogo truda i vještine!

Izgled sučelja programa MS FrontPage XP

Unos teksta na web stranicu - ništa lakše...

Na web stranicu unosimo tekst, obradujemo ga na vrlo jednostavan način - jednako kako i to
radimo u Word-u ili nekom sličnom programu za obradu teksta.

Za uredivanje teksta koristimo alate iz alatne trake ispod glavnog izbornika.

Prisjetimo se Word-a - stvar je 99% ista...

Kako ubaciti sliku na web stranicu?

Kad želimo ubaciti sliku na našu web stranicu koristiti ćemo sličicu - ikonu INSERT PICTURE
na traci s alatima.

Na web stranicu možemo postaviti samo one slike koje zajedno s web stranicom kasnije
postavljamo (upload) na server ili bilo koju drugu sliku koja je već na Internetu (na nekoj web
stranici)!
A sad ono pravo - povezivanje web stranica!!!

Kad želimo povezati dvije web stranice moramo označiti tekst ili sliku i napraviti tzv.
hyperlink(primjer: HTTP://FREE-VZ.T-COM.HR/DAMIR.VRBANEC/INDEX.HTML) ili kraće
link desnim klikom na označenom mjestu i s padajućeg izbornika odaberemo hyperlink.
Zatim odaberemo iz ponudene liste stranica na koju stranicu želimo napraviti link (vezu) ili
utipkamo potpunu URL adresu bilo koje web stranice koja se nalazi na Internetu.

Spremanje (Save As -> Save) web stranice!!!

Web stranice nazovite imenom koja ne sadrže hrvatske palatale (č,ž,š itd.) niti
razmake(prazna mjesta)!

Preporučam da prvu (glavnu ili početnu) web stranicu nazovete index.html ili index.htm kako
bi bilo omogućeno kasnije pretraživanje u tražilicama na Internetu (npr. Google-u).

Sve web stranice snimajte u istu mapu (direktorij) kao i sve slike u posebnu mapu kako bi
održali preglednost i jednostavnost kasnijih izmjena i samog uplaod-a web stranica na
Internet.

Kako napraviti svoju prvu web stranicu

Da bi ste počeli s izradom svoje prve stranice potrebno je da na svom računalu imate
instaliran program (aplikaciju) MS FrotnPage! Ako nemate taj program morate dograditi ili
instalirati paket uredskih programa MS Office Professional u kojem je uklučen program Ms
FrontPage.

Naravno da postoje i drugi programi za izradu i uredeivanje web stranica.

Jedan od često korištenih i vrlo dobrih i naprednih alata za izradu web stranica je i
Macromedia Dreamweaver MX!

Stoga odlučite sami koji program želite koristiti.

Za početnike preporučam da to bude program MS FrontPage.

Unos teksta na web stranicu - ništa lakše...

Na web stranicu unosimo tekst, obradujemo ga na vrlo jednostavan način - jednako kako i to
radimo u Word-u ili nekom sličnom programu za obradu teksta.
Za uredivanje teksta koristimo alate iz alatne trake ispod glavnog izbornika.
Prisjetimo se Word-a - stvar je 99% ista...

Kako ubaciti sliku na web stranicu?

Kad želimo ubaciti sliku na našu web stranicu koristiti ćemo sličicu - ikonu INSERT PICTURE
na traci s alatima.

Na web stranicu možemo postaviti samo one slike koje zajedno s web stranicom kasnije
postavljamo (upload) na server ili bilo koju drugu sliku koja je već na Internetu (na nekoj web
stranici)!

A sad ono pravo - povezivanje web stranica!!!

Kad želimo povezati dvije web stranice moramo označiti tekst ili sliku i napraviti tzv.
hyperlink(primjer: HTTP://FREE-VZ.T-COM.HR/DAMIR.VRBANEC/INDEX.HTML) ili kraće
link desnim klikom na označenom mjestu i s padajućeg izbornika odaberemo hyperlink.
Zatim odaberemo iz ponudene liste stranica na koju stranicu želimo napraviti link (vezu) ili
utipkamo potpunu URL adresu bilo koje web stranice koja se nalazi na Internetu.

Spremanje (Save As -> Save) web stranice!!!

Web stranice nazovite imenom koja ne sadrže hrvatske palatale (č,ž,š itd.) niti
razmake(prazna mjesta)!

Preporučam da prvu (glavnu ili početnu) web stranicu nazovete index.html ili index.htm kako
bi bilo omogućeno kasnije pretraživanje u tražilicama na Internetu (npr. Google-u).

Sve web stranice snimajte u istu mapu (direktorij) kao i sve slike u posebnu mapu kako bi
održali preglednost i jednostavnost kasnijih izmjena i samog uplaod-a web stranica na
Internet.

Izrada animacija za web stranice

Svatko od nas bi želio imati što bolje uredene web stranice!!??
Jelda?

Da bi nam se ti "snovi" ostvarili trebamo se poprilično potruditi.

Koliko truda - toliko će i naše web stranice biti lijepše i kvalitetnije!
Kad jednom napravimo "kostur" naših web stranica, podesimo sve linkove i provjerimo
ispravnost svih sadržaja vrijeme je da web stranice krenemo vizualno uljepšati. Kad to želimo
uraditi moramo pribaviti i odredene besplatne (ili ako smo u mogućnosti originalne) programe
za animiranje web stranica...

Animacija teksta

Teksta na web stranici možemo animirati na različite načine. Ako je riječ o odredenim
djelovima teksta koje želimo posebno naznačiti animaciju možemo izvesti pomoć
programakao što su Macromedia Flash ili SwishMax (koji je jednostavniji i preporučam ga!),
a ako je riječ o linkovima koje želimo animirati možemo jednostavije pomoću raznoraznih
besplatnih skripti koje možete ubaciti u svoj HTML kod web stranice! za animiranje

Neke simpa skripte možete pronaći na web stranicama kao što su:
HTTP://WWW.SCRIPTWIZ.COM/ , HTTP://WWW.BRAVENET.COM/ ili mnogim drugim
sajtovima (jednostavno u Google-u upišite free web scripts i to je to!)

Animacija slike, pozadine, pozadinska glazba...

Slično kao i tekst možemo animirati slike na način kao što je gore opisano za tekst!!! Postoji
"gomila" skript koje ubacite u svoj HTML kod i možete učiniti čuda!

Da bi u pozadini svirala MIDI ili MP3 glazba - za to postoje takoder skripte morate na svoj
server dodati datoteke s glazbom ili ih preuzeti s drugih veb stranica! Postoji mnoštvo
muzičkih datoteka koje možete koristiti kao glazbu za svoj web (npr.
HTTP://RESOURCES.BRAVENET.COM/AUDIO_CLIPS/)!

Postavljanje web stranice na Internet

Kad provjerimo ispravnosti linkova na našim web stranicama koje smo napravili u FrontPage
ili DreamWeaver-u i uvjerimo se da se sve stranice ispravno prikazuju kad ih pregledavamo
u IE-u, Operi ili Mozill naše web stranice su spremne da ih postavimo na Internet kako bi one
postale dostupne svima na svijetu!

Da bi mogli postaviti web stranice na Internet moramo imati slobodnog prostora naserveru
(računala koja su stalano spojena na Internet i pružaju razne usluge korisnicima Interneta)
ISP-a (davatelja Internet usluga) kao što su T-Com, Iskon, Carnet ili drugi. nekom
Večina ISP-a danas nudi 10-tak Mb web prostora na svojim serverima kad postanemo njihovi
korisnici, odnosno kad od njih dobijemo e-mail adresu i podatke za pristup na Internet.

Upravo ti pristupni podaci ISP-a na m trebaju kako bi se mogli spojiti na server

i postaviti (upload) svoje web stranice na Internet.

Za upload naših web stranica poželjno je koristiti i neke programe koji imaju tu namjenu.
Jednostavan programa za upload web stranica je Total Commander (naravno ima ima i
drugih...) u kojem jednostavno možemo podestiti postavke za pristup svom serveru na
Internetu.

Kad napravimo upload svojih web stranica obavezno se moramo ješ jednom uvjeriti da su
stranice i linkovi ispravno postavljeni.

Ovdje završava procedura postavljanja web stranica na Internet ali ne zauvijek! Web stranice
treba s vremenom ažurirati, dogradivati i osvježavati novi sadržajima tako da i dalje privlače
"surfere" i budu od barem nekakve koristi i značaja...

Osnovne naredbe QBasic-a

Programiranje kao umjetnost

“Programiranje računala je umjetnost jer primjenjuje stečeno znanje na svijet, jer zahtijeva
vještinu i domišljatost, a naročito zato što stvara predmete ljepote.” (Donald Knuth)

Osnovni sastavni dio svakog programa je naredba (instrukcija)!

Naredbe možemo grubo podjeliti u tri grupe:

a) naredbe za obavljanje računskih operacija

( +, -, * (množenje), / (djeljenje) itd.)

b) naredbe za odredivanje toka programa

(ispitivanje, grananje, skok itd.)

c) naredbe za ulaz i izlaz podataka

(ispis na ekran i unos preko tipkovnice)

Osnovne naredbe za početak:

1) PRINT - naredba za ispis teksta na zaslon (ekran)

Primjer:
PRINT “Pa to već znamo!”
PRINT
PRINT “Jednostavno!”, “ i lako!”;
PRINT ;
PRINT “Za malu dječicu, jelda?”

2) INPUT x$ - naredba za unos teksta preko tipkovnice

Nepoznanica x$ pamti znakovnu vrijednost i zovemo ju varijablom!

Primjer:
INPUT ime$
PRINT “Dobar dan ”, ime$

Naredbe odlučivanja i skoka u QBasic-u

Naredbe odlučivanja u QBasic-u su:

1) IF – THEN naredba
2) IF – THEN – ELSE naredba
3) složena IF – THEN naredba i
4) CASE naredba

Naredba skoka je GOTO naredba

1) IF uvjet THEN naredba

Uvjet kojeg čini testiranje određene varijable može biti istinit (TRUE) ili lažan (FALSE). Ako je uvjet
istinit izvršiti će se naredba iza THEN, a ako uvjet nije istinit, računalo će prijeći na sljedeću
programsku naredbu.

Upišimo sljedeći program:

CLS
INPUT “Upiši cijeli broj”, x
IF x>0 THEN PRINT x; “ je veći od 0”
IF x=0 THEN PRINT x; “ je jednak 0”
IF x<0 THEN PRINT x; “ je manji od 0”

2) IF uvjet THEN naredba ELSE naredba

Ako je uvjet istinit izvršiti će se naredba iza THEN, a ako uvjet nije istinit, tada će se izvršiti naredba
iza ELSE. Naredbu IF THEN ELSE obavezno pišemo u istom redu!

Primjer:

CLS
INPUT “Upiši cijeli broj”, x
IF x>0 THEN PRINT x; “ je veći od 0” ELSE PRINT x; “ nije veći od 0”

3) Složena konstrukciju IF – THEN – ELSE (- END IF) naredbe.

Složena IF naredba može se pisati u jednom redu, ali isto tako i u više redova (radi bolje preglednosti)
pri ćemu mora završiti s ključnom riječi End If (što znači: kraj IF naredbe)

Ako iza ELSE dolazi nova IF naredba, tada pišemo kao jednu riječ ELSEIF, a ne ELSE IF.

Naredbe iza ELSE i THEN pišu se u novi red.

Primjer:

CLS

INPUT “Upiši cijeli broj”, x

IF x>0 THEN

PRINT x; “ je veći od 0”

ELSEIF x=0 THEN

PRINT x; “ je jednak 0”

ELSE

PRINT x; “ je manji od 0”

END IF

4) CASE naredba

CASE naredba zamjenjuje niz uzastopnih IF – THEN naredbi.

Naredbu CASE pišemo u slijedećem obliku:

SELECT CASE vrijednost nepoznanice x

CASE vrijednost 1

CASE vrijednost 2

END SELECT

Postoji nekoliko načina navođenja vrijednosti nepoznanice u CASE naredbi:

iza CASE slijedi jedan broj CASE 7

iza CASE slijedi više vrijednosti CASE 1,2,4,8

iza CASE slijedi interval CASE 10 to 15

iza CASE slijedi logički izraz CASE IS > 20

za sve prethodno nenavedeno (zadnji uvjet) CASE ELSE

GOTO naredba je bezuvjetna naredba - program bezuvjetno prelazi s jedne linije izvođenja na drugu.

Primjer programa koji učitava 10 brojeva i računa njihov zbroj pretipkajte sa sljedeće slike:

Naredba ponavljanja (petlja)

Naredba ponavljanja (petlja) je FOR TO NEXT naredba za ponavljanje određenog dijela programa s
unaprijed određenim brojem ponavljanja i automatskim brojačem koji prilikom svakog ponavljanja
povečava vrijednost brojača za jedan (1).

Na sljedećoj slici je program koji ispisuje broje od 1 do 10:

Kad želimo koristiti našu naredbu

FOR TO NEXT kao brojač ponavljanja između početne i završne vrijednosti s korakom različitim od 1
koristimo slijedeći oblik te naredbe:

FOR TO NEXT STEP X

Rad sa znakovnim nizom (stringom)

Stringovi su znakovni tip podataka koji pamte slova, riječi, rečenice i ostale specijalne znakove! Sa
stringovima ne možemo računati kao sa brojevima ali ih možemo spajati, dijeliti, uspoređivati itd..
Uz ime varijable za koju želimo da nam pamti znakove obavezno na kraju stavljamo znak $!

Potrebne naredbe za rad sa stringovima jesu:

LEN (A$) - naredba koja daje broj znakova koje sadrži željeni string

LEFT$ (A$, X) - naredba koja izdvaja lijevi dio znakova željenog stringa

RIGHT$ (A$, X) - naredba koja izdvaja desni dio znakova željenog stringa

MID$ (A$, X,Y) - naredba koja izdvaja središnji dio znakova željenog stringa

Primjer kratkog program korištenjem navedenih naredbi za rad sa znakovnim nizom...

Pokušajte dovršiti sljedeći program za brojanje samoglasnika i suglasnika u nekoj riječi:

Grafika u QBasic-u

QBasic nam omogućuje i crtanje jednostavnih geometriskih likova poput linija, pravokutnika, kružnica
i elipsa!

Da bi smo mogli crtati takve likove moramo uključiti grafički način rada u Qbasic-u pomoću naredbe

SCREEN 12

Naredba pomoću koje u QBasic-u crtamo ravne linije ima slijedeći oblik:

Line (X1, Y1) – (X2, Y2), boja

Primjer:

Kako nacrtati pravokutnik u QBasic-u? Rješenje je jednostavno:

Line (X1, Y1) – (X2, Y2), boja, B

ili bojom ispunjen pravokutnik

Line (X1, Y1) – (X2, Y2), boja, BF

Kružnicu u QBasic-u crtamo pomoću slijdeće naredbe:

Circle (X, Y), r, boja

Pomoću naredbe za crtanje kružnice lako nacrtamo i elipsu! Novost je dodavanje nove varijable -
omjera izduženost. Vidi sliku:

Upoznavanje s programskim jezikom QBasic-om

Općenito o programskim jezicima

Programski jezici su programi koji nam služe za izradu drugih programa na računalu s ciljem
rješavanja odredenih zadataka.
Prvi jezici za pisanje programa bili su strojni jezici koji su bili teško razumljivi i vrlo neprikladni
za čovjeka jer su se programi pisali nizom nula i jedinica!!!

Stoga su napravljeni umjetni jezici (nalik našem govornom jeziku) koje nazivamo
višimprogramskim jezicima kao što su: Basic, Pascal, C, Visual C, Delphi itd.

Upoznavanje s programskim jezikom QBasic-om

Basic (eng. Beginners All-purpose Symbolic Instruction Code)

je jednostavni programski jezik u kojem se svaka naredba izvršava zasebno (interpreter).
Naredbe upisujemo u jednostavnom tekstualnom editoru.

Poziv glavnog izbornika možemo napraviti kombinacijom tipki ALT + istaknuto slovo -
otvaramo pojedine izbore...

Isprobajmo kombinacije tipki:

ALT + F

ALT + R

Tipkom ESC napuštamo izbornike!

Sve radnje poziva izbornika, označavanje sadržaja i kretanje kroz prozore, dostupne su i
pomoću miša.

Spremanje programa (Save/Save As)

Program spremamo na disk ovako:

držimo ALT i pritisnemo F i zatim A

Nalazimo se u okviru File Name i upišemo ime programa s maksimalno 8 znakova te

pritisnemo tipku ENTER.

Tipkom TAB postavimo pokazivač u okvir Dirs/Drives te strelicama označimo gdje želimo
spremiti program i pritisnemo ENTER.

Sve to možemo i pomoću miša. Isprobajmo!

Kad jednom spremimo program pod odredenim imenom dovoljno je svaku promjenu snimiti
kombinacijom tipki ALT + F i S (File /Save).

Kad želimo krenuti pisati novi program odabrati ćemo ALT + F i N (New Program).

Ako imamo ispisanu kakvu naredbu QBasic nas pita dali želimo spremiti i taj postojeći
program!!!

Ako želimo otvoriti već postojeći program s diska koristiti ćemo kombinaciju tipki

ALT + F i O (File / Open)

te iz ponudene liste programa odabrati željeni program.

Tablice na web stranicama

1) Ubacivanje tablice na web stranicu

Tablicu ubacujemo na web stranicu pomoću glavnog izbornika

Table / Insert / Table ( )

ili kraće razvlačenjem pomoću ikone na alatnoj traci ( )

Zadatak
Na jedan od načina napravimo tablicu koja će imati 3 stupca i 2 retka!
Ako pogledamo u HTML kod primječujemo da je za tablicu otvoren posebni tag u kojem naziremo

debljinu ruba tablice (border) veličine 1px ( )

u kojem naziremo debljinu ruba tablice (border) veličine 1px ()

2) Izmjena svojstva tablice

Krenimo mjenjati svojstva naše tablice!

Desnim klikom miša na tablici ( ) otvaramo svojstva tablice (Table properties) (

Zadatak
Promjenimo debljinu okvira tablice na 4.

Zadatak
Ispunimo ćelije tablice tekstom i slikom…

3) Završna obrada tablice

Sad naša tablica izgleda ovako: ( )

Širine i visine redaka i stupaca možemo urediti prema želji povlačenjem mišem ili promjenama u
svojstvima tablice i ćelije (Cell Properties).

Uređivanje tablica na web stranici naoko izgleda vrlo slično uređivanju tablica u Wordu. To je istina
ali postoji jedna velika prednost rada s tablicama na web stranicama. Naime, tablice na web
stranicama mogu poslužiti kao vrlo dobri “kosturi” razmještanja teksta, slika i svih drugih sadržaja na
našim web stranicma. U to smo se uvjerili s našom tablicom iz gornjeg primjera. Do pravog izražaja
dolaze i one tablice koje ne vidimo – tablice koji su skrivene! Kako sakriti tablicu na web stranica da
bude nevidljiva???

Cijela je poanta je u debljini okvira teblice (Border) kojega treba postaviti na vrijednost 0 čime naše
tablica doista postaje “kostur” koji razmješta sve druge elemente web stranice na njoj.

4) Skrivene tablice – “kosturi” web stranica

Uvjerimo se zajedno – postavimo debljinu okvira tablice na nulu!

Kad je debljina okvira tablice jednaka nuli naša tablica ima crtkane okvire koji nestanu kad web

stranicu pogledamo u našem web pregledniku… ( )

Naučili smo koristiti tablice na web stranicama.

Tablice nam služe kao vrlo jednostavan način razmještanja ostalih podataka na web stranici (teksta,
slike, animacije, poveznica…)

Tablice kojima postavimo debljinu okvira na nulu postaju nevidljive – “kosturi” kojima razmještamo
ostale elemente web stranica

Grafika u QBasic-u - napredno

Prisjetimo se za početak naredbi za crtanje SCREEN, LINE i CIRCLE, ali i prije naučenih naredbi. Jedna
od njih je naredba skoka GoTo uz dopunu korištenja oznaka u programu tzv. labela. Labele nam
koriste kao mjesta u programu na koje se možemo pozvati – “skočiti”.
A sad slijede nove naredbe:

1) SLEEP je naredba čekanja koja pravi stanku određeni broj sekundi koji navodimo iza same naredbe.

2) END je naredba za bezuvjetni prekid programa

Program koji slijedi (slika pri dnu paragrafa) ispisuje izbornik u grafičkom modu koji omogućuje
odabir crtanja željenih geometrijskih likova (linija, pravokutnika, kružnica i elipsa) čije parametre
unosim po želji nakon pokretanja programa. Varijabla meni$ služi kao izbornik, a za testiranje izbora
koristimo složenu IF THEN END IF naredbu.

Programski kod nije cijeli! Na mjestu tri točkice morate dopuniti program za ispis ostalih
geometrijskih likova. Krenite na posao... :)

3) Bojanje zatvorenih površina pomoću naredbe PAINT

Do sad smo naučili obojiti bojom ispune samo prvaokutnike i kvadrate naredbom LINE. Naredbom
PAINT možemo obojiti svaki zatvoreni lik koji nacrtamo u grafičkom modu. To može biti zatvorena
površina crtanja raznih drugih likova!

PAINT (X,Y), Bi, Br

(X,Y) je točka unutar zatvorenog lika

Bi je boja kojom želimo ispuniti lik

Br je boja ruba zatvorenog lika

Nacrtajmo dvije kružnice kao na slici , a zatim ispunimo bojom zatvorene

površine. Rješenje je tu

HTTP://WWW.BUG.HR
HTTP://WWW.PCCHIP.HR/
HTTP://WWW.VIDILAB.COM/INDEX.PHP
HTTP://WWW.ENTER.BUG.HR/
HTTP://WWW.CARNET.HR/CASOPIS/