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

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

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,... )

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

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

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

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

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

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

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

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

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

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

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)

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)

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

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

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

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

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

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

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

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

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

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

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

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

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

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 8859-2) UTF-8 (temelji se na UNICODE standardu)

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>

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

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

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

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

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

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