Izrada webstranica Pripremila Andrijana Skeli prof 1 Osnove

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

1. Osnove Weba • Web stranice su: o hipertekstualni dokumenti o dostupni na internetu o putem www usluge o hipertekst uključuje hiperveze (poveznice)

Struktura web stranica • web stranice su: o pohranjene na Web – poslužiteljima o URL adresa ili poveznica • HTML – jezik za izradu web-stranica • HTML dokument se sastoji od teksta i tagova, koji definraju izgled stranice • HTML nedostatan na području dinamike web stranica – nadoknađuje se npr. Java. Scriptom • web stranice napravljene na našem računalu se ne nalaze na internetu

Postavljanje web stranice na Internet 1. gotova web stranica 2. web prostor (zakupiti) 3. uz pomoć FTP-a postavljamo svoju web stranicu na svoj web prostor - Internet

Struktura web stranica • Web stranice možemo izrađivati i uređivati: 1. pisanjem teksta i HTML naredbi u tekstualnome uređivaču (npr. Note. Pad) o zahtjeva poznavanje naredbi i sintakse HTML jezika o izgled web stranice vidimo tek kad je otvorimo u web pregledniku 2. oblikovanjem elemenata stranice vizualnim HTML uređivačem o ugodniji rad o odmah vidimo njen konačan izgled

Vizualni HTML uređivač • omogućuje uređivanje stranica kao u Wordu • grafičko sučelje uređivača omogućava: o pisanje teksta, umetanje slika, dodavanje zvuka, videozapisa, . . . o ne moramo poznavati HTML jezik koji u pozadini stvara HTML kod (kojeg je moguće uređivati) • popularniji vizualni HTML uređivači: o Dreamwever o Visual Web o Developer Express o Expression Web

Expression Web • nasljednik Microsoft Front. Pagea • besplatan (www. microsoft. com/en-us/download) • pokretanje: o odabirom naredbe Microsoft Expression Web 4 o klikom na ikonu

Sučelje Expression Weba 3 1 2 7 4 9 8 10 5 6

• nakon pokretanja se otvara prazna web-stranica zadani naziv Untitled_1. html • promjena boja sučelja: Tools/Application Optios/General/ Use your current Windows color scheme • preporučava se uključiti View/Toolbars/Standard i Formatting • preporučava se isključiti View/Toolbars/ Common • okna možemo privremeno isključivati zbog preglednosti, početni raspored okana vraćamo naredbom: Panels/Reset Current Workspace

Upisivanje i oblikovanje teksta • upis i oblikovanje teksta su slični kao i u Wordu • oblikovanje je odmah vidljivo – prednost HTML uređivača • alatna traka Formatting:

Spremanje web-stranice • File/Save As • razlika između: o naziva datoteke stranice File Name o naslova stranice (Page Title) • naslov stranice – na naslovnoj traci webpreglednika • nakon spremanja - u okviru Folder List ispiše se puni naziv i sadržaj mape

Umetanje slika • Insert/Picture/From File • Otvara se dijaloški okvir u koje opisujemo sliku (nije nužno) • spremanja stranice u koju je umetnuta slika – Save Embedded Files o možemo mijenjati parametre slike o pamti putanju do umetnute slike o slikovna datoteka se sprema u istu mapu u kojoj je i web stranica o slika se automatski sprema u formatu prikladnom za prikazivanje na webu (smanjuje se, npr. *. wmf u. *. gif) o slika se sprema odvojeno od web-stranica, u zasebnu slikovnu datoteku

Umetanje poveznice • navigiranje kroz web-stranice • početna ili indeksna stranica (lat. index-pokazivač) • indeksne stranice imenujemo: index, default, home ili welcome • poveznice prepoznajemo: o podcrtani tekst o pokazivač miša u obliku ruke s ispruženim kažiprstom

Vrste poveznica 1. poveznica na neko mjesto iste web-stranice(na dnu str vraćanje na početak) 2. poveznica na drugu web-stranicu istog web-mjesta 3. poveznica na drugu web-stranicu drugog web-mjesta

Otvaranje nove web-stranice 1. File/New/HTML 2. Klikom na

Poveznice Tekst kao poveznica Slika kao poveznica • označimo riječ • Učitamo sliku i označimo je • desni klik mišem • odaberemo naredbu Hyperlink/Insert Hyperlink • biramo ciljanu datoteku poveznice • desni klik mišem • odaberemo naredbu Hyperlink/Insert Hyperlink • ok • biramo ciljanu datoteku poveznice • rezultat (provjera CTRL + pokazivač miša): • ok Sonja

Navigacija poveznica • Pregled nad poveznicama kartica Hyperlink u Site View

Zatvaranje web stranice • File/Close • ili klikom na kartici stranice

Dodatni elementi stranice • Web stranica nije namijenjena ispisivanju • što znači da je možemo obojati, dodati joj pozadinsku sliku, vodeni žig i sl. Format/Background/Formatting/ Colors/Background – odaberemo boju • na sličan način mijenjamo boju teksta Format/Background/Formatting/ Colors/Text – odaberemo boju

Tablice • sadržaj web-stranica se automatski prilagođava širini prozora preglednika • tablica sa stalnom širinom – eliminira problem rasporeda elemenata na stranici Table/Insert Table • nepromjenjiva širina tablice 600 pixela

Postavke jezika • hrvatska dijakritička slova • Standardi: – Central European (ISO 8859 -2) – UTF-standard (temelji se na Unicode standardu) Pogled Design/New Page/desni klik mišem/Page Properties/Language

HTML-jezik web stranica

Osnovni HTML tagovi • Tagovi – određuju kako će elementi stranice biti prikazani • < početni tag > završni tag Tagovi u paru: Npr. <html> početak dokumenta </html> kraj dokumenta • Tagovi za separaciju Npr. <hr> za crtanje vodoravne linije

• HTML dokument možemo pisati u bilo kojem programu za pisanje teksta • Npr. Notepad

<html> i <body> • <html> i <body> - osnovni tagovi – sadrži ih svaka stranica • Svaka stranica zpočinje tagom <html> i završava </html> • Tagom <html> dajemo do znanja da slijedi HTML kod, </html> označava kraj HTML koda • Svaka web stranica se sastoji od: – Zaglavlja (Head) – Tijela (Body)

<body> početak tijela stranice </body> kraj tijela stranice • Tijelo stranice: – sadržaj koji se ispisuje u središnjem dijelu preglednika – najčešće poistovjećujemo sa samom stranicom

Primjer 3. 1 <html> Spremanje: <body> 1. File/Save As Ovo je moja prva stranica </body> </html> 2. Save in/mapa učenik/ 3. File name – *. html 4. Save As type/ All Files (*. *) 5. Save

Primjer 3. 1 Ovako spremljenu web stranicu otvaramo iz Widows Explorera

Primjer 3. 1 1. Otvara se prozor Internet Explorera 2. Izgled programa

Pojmovnik • Browser – preglednik • CGI (Common Gateway Interface) – standardni načn komunikacijeizmeđu poslužitelja i drugih programa koje izvodi računalo poslužitelj (server) • CSS (Cascade Style Sheet) – jednostavan način definiranja stilova na web stranici (npr. boje slova) • FTP (File Transfer Protocol) – skup pravila za prijenos datoteka s jednog računala na drugo • Hiperprostor • Hipertekst (hypertext) – veza ili poveznica prema drugim dokumentima

Popis važnijih pojmova • HTML (Hyper Text Markup Language) – programski jezik za izradu hipertekstualnih dokumenata • HTTP (Hyper Text Transfer Protocol) – protokol za prijenos hipertekstualnih dokumenata • Klijent (client) – računalo koje se priključuje na mrežu i pristupa poslužitelju te koristi dostupne resurse • Poslužitelj (server) – glavno računalo u mreži, na čijem je hard disku pohranjena sva mrežna, namjenska, uslužna i ostala programska oprema • Pretraživači (Search engine)– web stranice koje omogućuju pretraživanje drugih stranica prema ključnim riječima (Google, Altavista, . . . )

Popis važnijih pojmova • Preglednik (Browser): – – program koji čita i prevodi HTML oznake predočava sadržaj web stranice pokreće Java. Script-e Microsoft Internet Explorer, Google Chrome, Netscape Navigator • Tag – naredba za formatiranje HTML dokumenta • Telnet – standardni Inteernet protokol za projavu rada na mreži s udaljenog računala • URL (Uniform Resource Locator) – jedinstvena adresa izvora podataka (određuje mjesto na Internetu na kojem se nalazi neki dokument)

Popis važnijih pojmova • Veza (link) – sličica ili riječ ili. . . u dokumentu na internetu koje taj dokument povezuju s nekim drugim dokumentom ili datotekom • Web stranica (web page)- hipertekstualni dokument na www • WWW (World Wide Web) – multimedijski, uslužni program koji se temelji na hipertekstu. . .