1. Pripremila: Andrijana Skelić, prof.
Izrada web - stranica
Pripremila: Andrijana Skelić, prof.

2. Osnove weba
Hipertekstualni dokumenti – web stranice dostupne na internetu putem WWW (Web)
Hipertekst – element hipertekstualnog dokumenta koji uključuje hiperveze
Hiperveze – poveznice prema drugim dijelovima teksta/dokumenta
Web – stranica može sadržavati:
tekst
zvuk
sliku
animaciju
video,...

3. Osnove weba Web stranice su pohranjene na web – poslužiteljima
Do određene web stranice dolazimo upisivanjem URL adrese ili poveznicom ( linkom )
URL i poveznica sadrže informacije na kojem je poslužitelju stranic pohranjena
Web preglednik je namijenska aplikacija koja otvara i prikazuje web – stranice ( npr. Chrome,... )

4. Hipertekst i hiperprostor u informatici?!
HTTP protokol – pronalazi web – stranicu, učita povezani sadržaj i prikaže objedinjeni dokument u njegovom prozoru
Hiperprostor – pojam posuđen iz znanstvene fantastike
Hipertekst – ( Ted Nelson, sociolog )- sadrži posebno označene dijelove kojim se dolazi do drugih tekstova i podataka

5. Web – stranica i web - mjesto
Web – stranica ( Web page ):
dokument pohranjen u datoteci sa nastavkom .html ili .htm
dosotupan na webu putem jedinstvene web adrese
namijenjen prikazivanju u web – pregledniku

6. Web mjesto Web – mjesto ( Web site ili site ):
internetska lokacija koja sadrži i objedinjuje više međusobnih tematskih povezanih web – stranica
ta lokacija se naziva domena i ima svoj FQDN ( Fully Quallified Domain Name )
web - stranice jednog web – mjesta su organizirane hijerarhijski
na vrhu je početna stranica web mjesta ( Home Page ) koja ima zadano ime np. Index ili default
do ostalih stranica posjetitelji dolaze slijedom poveznica koje započinju na početnoj stranici

7. Uvod u Expression Web Nasljednik je FrontPagea Inačica 4
Aplikacija je besplatna na
Aplikaciju Expression Web možemo pokrenuti na dva načina:
Klikom na prečicu
Odabirom naredbe Start/Programs/Microsoft Expression Web 4

8. Struktura web-stranica
Web-stranice su hipertekstualni dokumenti
Sadrže:
tekst
naredbe (koje opisuju izgled teksta) – oznake ( Tags )
Naredbe su dio HTML ( Hyper Text Markup Language ) jezika kojim se izrađuju i uređuju web-stranice
Zbog navedenog web – stranice nazivamo HTML dokumentima
Web – stranice imaju datotečni nastavak .html ili .htm
HTML je prezentacijski jezik

9. Konačan izgled web -stranice
Izvorna web – stranica napisana u HTLM jeziku
Konačan izgled web -stranice

10. Načini izrade web - stranica
Web – stranice možemo izrađivati i uređivati na dva načina:
pisanjem teksta i HTML naredbi u tekstualnom uređivaču npr. Bloku za pisanje
teži način
zahtjeva poznavanje naredbii sintakse HTML jezika
izgled web – stranice vidimo tek kad je otvorimo u web pregledniku
Oblikovanjem elemenata stranice vizualnim HTML uređivačem
ugodniji za rad
odmah vidimo i konačni izgled web - stranice

11. Vježba 2 Dokažimo da je web – stranica izvorno HTML dokument.
Otvorite u web - pregledniku početnu stranicu Wikipedije (
Naredbom Datoteka>Spremi kao pohranite je na radn površinu (Wikipedia.htm)
Pokrenite Blok za pisanje i u njemu otvorite datoteku Wikipedia.htm

12. Uporaba vizualnog HTML uređivača
Vizualni, grafički HTML uređivači web stranica omogućava uređivanje stranica kao u Wordu
Grafičko sučelje uređivača omogućuje tekst, umećemo slike, dodajemo zvuk, videozapise ,...
HTML u pozadini automatski stvara HTML kod ( koji možemo uređivati )
Popularni vizualni HTML uređivači su:
Dreamweaver
Visua Web
Developer Express
Expression Web

13. Osnovni djelovi sučelja Expression Web-a
1. Traka sa izbornicima
2. Alatna traka
3. Kartica stranice
7. Okno mapa
4. Točka unosa
9. Okna za rad s HTML uređivačem
5. Radni prostor
6. Način prikaza stranice
10. Statusna traka
8. Okno svojstava

14. Okna ( panele ) možemo prema potrebi isključiti Početni rasopred možemo vratiti naredbom Panels/Reset Current Workspace
Nakon pokretanja Espression Weba automatski se otvara prazna web – stranica koja ima zadani naziv Untitled_1.html
Promjena boje sučelja – Tools/Application Options/General označimo opciju Use your current Windows color scheme.
Preporučljivo je uklučiti Standard i Formatting alatnu traku, a isključiti Common traku ( zbog preglednosti)

15. Upisivanje i oblikovanje teksta
Postupak oblikovnja teksta je sličan kao i u programima za oblikovanje teksta
Učinak oblikovanja odmah vidljiv
Za oblikovanje teksta služi alatna traka Formatting
Zad 3.
Provjerite je li odabran design pogled na stranicu i je li pokazivač točke unosa postavljen na početak stranice
Upišite teksat: Moj profil
Pritisnite Shift + Enter
U retku ispod dodajte tekst: osobne web - stranice My Face
Rečenicu Moj profil podebljajte (B),
Riječi My Face nakosite (I)

16. Spremanje web - stranice
File / Save As Postoji razlika između naziva datoteke stranice ( polje File Name ) i naslova stranice ( polje Page Title ) Naslov stranice se prikazuje u naslovnoj traci web – preglednika i ne mora biti jednak nazivu datoteke u koju smo spremili stranicu Nakon spremanja web – stranice u okviru Folder List ispiše se puni naziv i sadržaj mape u kojoj je pohranjena stranica

17. Umetanje slike
Osim teksta, web – stranica može sadržavati i razne druge multimedijalne sadžaje:
sliku
animaciju
zvuk
Sliku umećemo naredbom: Insert/Picture/From File
Slika se kao i ostali multimediski sadržaj ne ugrađuje u web stranicu, nego se pamti putanja slikovne datoteke
Tijekom spremanja stranice u koju smo umetnuli novu sliku otvara se dialoški okvir Save Embedded Files, koji omogućuje promjenu osnovnih parametara slike
Postupak Save Embedded Files osgurava da se u web- stranici upamti putanja do umetnute slike Slikovna datoteka zadano se sprema u zasebnu slikovnu datoteku
Slika se automatski sprema u formatu prikladnom za oblikovanje na Webu ( npr. Smanjenje slikovne datoteke zbog bržeg učitavanja na Web ) *.gif

18. Umetanje poveznice
Poveznice nam omogućuju navigaciju kroz web-stranice
Pri izradi web-stranice moramo ispalnirati poveznice
Početna stranica pokazuje na ostale stranice, pa je nazivamo i indeksnom stranicom
Indeksnu stranicu imenujemo zadanim imenima: index, default, home ili welcome

19. Izgled i značajke poveznica
Obilazak web-stranice započinje indeksnom web-stranicom
Poveznice nam omogućuju obilazak unutar web-stranice
Poveznice prepoznajemo:
podcrtani dio teksta obojen nekom istaknutom bojom (npr. plavom)
pokazivač miša nad poveznicom se mijenja u ruku s ispruženim kažiprstom
Poveznice najčešće vode do drugih web-stranica, poveznice po dodegu mogu biti:
Poveznice na neko mjesto iste web-stranice
Poveznica na neku drugu web-stranicu istog web-mjesta
Poveznica na web-stranicu nekog drugog web-mjesta

20. Otvaranje nove stranice
Za provjeru učinka poveznice moramo:
osigurati dostupnost web- stranice
Otvaranje nove web-stranice:
File/New/HTML
ili
klikom na lijevi dio ikone New Document
Ikona za stavarnje novog web-mjesta

21. Tekst kao poveznica Označite riječ
Klikni desnom klikom miša, otvara se iskočni izbornik
Odaberi naredbu Hyperlink
U dijaloškom okviru Hyperlink odaberemo ciljnu datoteku poveznice
Klikni na OK
Označena riječ će biti ispisana plavo – postaje poveznica
Spremite stranicu
Aktiviranje poveznice: Ctrl (Control) + klik miša

22. Slike kao poveznica Označite sliku
Klikni desnom klikom miša, otvara se iskočni izbornik
Odaberi naredbu Hyperlink
U dijaloškom okviru Hyperlink odaberemo ciljnu datoteku poveznice
Klikni na OK
Spremite stranicu
Aktiviranje poveznice: Ctrl (Control) + klik miša

23. Navigacija poveznica Poveznice je potrebno pažljivo isplanirati
Složenija web – mjesta mogu imati više web-stranica i stotine poveznica
Kartica Hyperlinks – grafički pregled poveznica
Site View/Hyperlinks

24. Zatvaranje web-stranice
Naredbom File/Close
ili
Klikom na X na kartici stranice

25. Dodatni elementi stranice
Web-stranice sadrži gotovo sve elemente kao i Wordov dokument
Web-stranica sadriži elemente karakteristične samo za web-stranice
Sadržaj web-stranice se automatski priloagođava širini prozora web- preglednika
Potrebno je pažljivo ispalnirati razmještaj elemenata na stranici

26. Oblikovanje pozadine
Web-stranice nisu namjenjene ispisu na pisaču, što omogućuju oblikovanje pozadine
Pozadinu možemo oblikovati tako da:
je obojimo
dodati pozadinsku sliku
metnuti vodeni žig,...

27. Promjen boje pozadine web- stranice: Format/Background/Colors
Ako pozadinu želimo postaviti u boju koje nema u prvih 16 odaberemo More Colors, prikazuje se izbornik sa više boja, u polju Value učitamo RGB heksadekadske vrijednosti i kliknemo na OK

28. Dodatna oblikovanja Teksta Tablica
Promjena boje i veličine teksta: Formatting/Default font i Default Size
Promjena boje poveznice Formatting/Hyperlink
Sadržaj web-stranice se automatski prilagođava širini prozora preglednika
Širina web-stranice se iskazuje u % širine prozora web-preglednika, ovisno tome mijenja se i vrijednost širine web stranice
Tablice mogu imati stalnu širinu
Tablice postavljamo naredbom: Table/Insert Table

29. Postavke jezika
Da bi se pokazala hrvatska dijakritička slova , mora biti uključeno enkodiranje znakova (HTML encoding)
Za Hrvatski jezik koristimo standarde:
Central European (ISO )
UTF-8 (temelji se na UNICODE standardu)

30. HTML-jezik web-stranica
Web–stranice sadrže i upute pregledniku kako će prikazati sadržaj stranice
Upute su pisane HTML jezikom
Naredbe upisane u web-stranici nazivamo HTML oznake, tagovi (engl. Tags)
HTML oznake su:
ključne riječi HTML jezika
pišu se unutar <>
uključuju i isključuju određeno oblikovanje
pišu se u paru:
početna oznaka uključuje npr. <em>
završna oznaka isključuje npr. </em>

31. HTML struktura web-stranica
Blok <html>... </html> - označava da se radi o HTML dokumentu tj. web-stranici
Blok <head>...</head> zaglavlje dokumenta, opisuje njegove karakteristike
Blok <body>...</body>- objedinjuje sadržaj koji će se prikazati u prozoru web- preglednika, ovaj blok je vidljiv nakon učitavanja preglednika

32. HTML struktura web-stranice
Statičke web-stranice
Skriptni jezici
Web-stranice mogu sadržavati i druge elemente
HTML jezik stvara statičke web- stranice
Skriptni jezici (npr. ASP, PHP) za izradu dinamičkih web-stranica
Te stranice imaju različite datotečne nastavke npr. *.asp, .*php
Dinamičke web-stranice nastaju u interakciji posjetiteljima web- stranice ili nekim događajem (npr. objava vijesti i sl.)
Stranice nastale skriptnim jezicima imaju osnovnu HTML strukturu

33. Izrada web-mjesta
Web-mjesto ima razrađenu strukturu i hijerarhijsku organizaciju stranica
Na „vrhu” je početna stranica (engl. Home Page)
Početna stranica ima zadana imena (index, default, home ili welcome)
Upisivanjem FQDN adrese nekog web-mjesta otvramo njegovu početnu stranicu, sve ostale stranice web-mjesta su povezane poveznicama sa njom
Ujednačenost stranica unutar web-mjesta

34. Objavljivanje web-mjesta
Web-objava ili web-publiciranje – postavljanje podataka lokalnog web mjesta na web-poslužitelj
Kopiranje sadržaja mape s lokalnog računala u mapu web-poslužitelja
FTP (File Transfer Protocol)-služi za objavljivanje web-mjesta s lokalnog računala na neki od poslužitelja
Za FTP prijenos podataka koristimo specijalizirane FTP programe
Za pristup FTP poslužitelju moramo imati korisničke podatke

35. Objavljivanje iz Expression Weba
Expression Web ima ugrađen FTP klijent što omogućava izravno postavljanje podataka na web-poslužitelj:
Pokrenemo Expression Web/otvorimo web-mjesto/Site/Publishing Settings
Sinkronizacija podataka - postupak ujednačavanja podataka na lokalnom računalu i udaljenom web-mjestu
Udaljeno web-mjesto – web-mjesto smješteno na web-poslužitelju, što korisnicima interneta omogućuje pregledavanje web-mjesta
Udomljavanje web-stranice (Web-hosting) – usluga iznajmljivanja mape za smještaj web-mjesta na web-poslužitelju
Web predložak (Template) – premljena datoteka prema kojoj možemo stvarati nove web-stranice

36. Literatura:
V. Galešev, M. Korać, Z. Soldo; Informatika i računalstvo; udžbenik za gimnazije i srednje strukovne škole; SysPrint, Zagreb, 2014.