OBRADA TEKSTA - MICROSOFT WORD 2010 - … edukacija/web_dizajn/Web...5.1.3.Razumjeti strukturu CSS...

ITdesk.info – projekt računalne e-edukacije

sa slobodnim pristupom

- Priručnik za digitalnu pismenost

pokret računalnog

opismenjavanja

izgradnja modernog

društva

e - učenje

e - inkluzija

slobodan

pristup

ljudska prava na edukaciju i

informacije

WEB DIZAJN

Priručnik

Autorica: Mariza Maini

Autorica:

Mariza Maini

Glavni naslov:

ITdesk.info – projekt računalne e-edukacije sa slobodnim pristupom - Priručnik za digitalnu

pismenost

Podnaslov:

Web dizajn

Naslovnica:

Silvija Bunić

Nakladnik:

Otvoreno društvo za razmjenu ideja (ODRAZI), Zagreb

Mjesto i godina izdavanja:

Zagreb, 2015.

Autorsko pravo:

Slobodno kopirajte, tiskajte i dalje distribuirajte cijelu ili dio ove publikacije, uključujući i u svrhu organiziranih školovanja, bilo u javnim ili u privatnim edukacijskim organizacijama, ali isključivo u nekomercijalne svrhe (dakle bez naplate krajnjim korisnicima/cama za korištenje publikacije) te uz navođenje izvora (izvor: www.ITdesk.info - projekt računalne e-edukacije sa slobodnim pristupom). Izvedeni (derivirani) radovi nisu dopušteni bez prethodnog odobrenja nositelja autorskih prava (udruga Otvoreno društvo za razmjenu ideja - ODRAZI). Kontakt za traženje dozvole: [email protected]

http://www.itdesk.info/

mailto:[email protected]

ITdesk.info – projekt računalne e-edukacije sa slobodnim pristupom

ITdesk.info is licensed under a Creative Commons Attribution-

Noncommercial-No Derivative Works 3.0 Croatia License 0/52

Predgovor

Današnje društvo obilježeno je naglim rastom i razvojem informacijske tehnologije

(IT), što je rezultiralo velikom ovisnošću društva, u širem smislu, o znanju i

kompetencijama osobe u IT području. I premda ta ovisnost raste iz dana u dan,

ljudsko pravo na obrazovanje i informacije nije prošireno i na IT područje. Pojavili

su se problemi koji utječu na društvo u cjelini, koji stvaraju prepreke i udaljavaju

ljude od glavnog razloga i motivacije za napredak, od prilike. Biti računalno

nepismena osoba, danas znači biti osoba koja nije u mogućnosti sudjelovati u

modernom društvu, biti osoba bez prilike. Unatoč priznanju Europske komisije,

UNESCO-a, OECD-a i ostalih relevantnih institucija o neophodnosti i korisnosti

informatičke pismenosti, još uvijek postoje grupe ljudi s otežanim pristupom

osnovnoj računalnoj naobrazbi (npr. osobe s invaliditetom, osobe s poteškoćama

u učenju, radnice/i migranti, nezaposlene osobe, osobe koje žive na udaljenim

mjestima gdje nemaju pristup računalnoj edukaciji).

Ovaj priručnik, zajedno s ostalim materijalom objavljenim na stranici ITdesk.info,

predstavlja naš doprinos realizaciji i promociji ljudskog prava na edukaciju

i informacije u IT području. Nadamo se da će Vam ova edukacija pomoći u

savladavanju osnovnih računalnih vještina i s tom nadom želimo Vam da naučite

što više i tako postanete aktivni/a član/ica modernog IT društva.

Iskreno Vaši,

ITdesk.info team




SADRŽAJ:

1. Web koncepti .................................................................................................................. 5

1.1. Ključni pojmovi .............................................................................................................. 5

1.1.1. Razumijevanje da Internet podržava niz usluga kao što je World Wide Web (WWW),

prijenos datoteka, e-mail, instant messagging (IM). ................................................................ 5

1.1.2. Razumjeti termin: klijent/server te razumjeti funkcionalnost i odnos između

preglednika i web servera ....................................................................................................... 5

1.1.3. Razumjeti pojmove domene, Uniform Resource Locator (URL), hiperveza, web hosting,

tražilice ................................................................................................................................... 5

1.1.4. Razumjeti korištenje osnovnih protokola: Transmission Control Protocol/Internet

Protocol (TCP/IP), Hypertext Transfer Protocol (HTTP), File Transfer Protocol (FTP) ............... 7

1.2. Web objavljivanje .......................................................................................................... 7

1.2.1. Identificirati glavne prednosti web stranica: pristup velikom broju ljudi, jednostavnost

ažuriranja, interaktivnost publike, troškovne uštede .............................................................. 7

1.2.2. Razumjeti procese stavljanja web stranice online: registracija domena, odabir web

hosting usluga ........................................................................................................................ 8

1.2.3. Prepoznati tehnike optimizacije tražilica, npr. uključivanje relevantnih meta podataka,

uključivanje mape stranice i web linkova, registracija na tražilice. ......................................... 8

1.2.4. Prepoznati faktore koji utječu na brzinu skidanja podataka sa web stranice npr. zvuk,

video, grafički formati, animacije, kompresije podataka ......................................................... 9

1.3. Zakonska pitanja ........................................................................................................... 9

1.3.1. Razumjeti izraz autorsko pravo i njegove implikacije na tekst, sliku, zvuk, video na web

stranicama .............................................................................................................................. 9

2. HTML ............................................................................................................................. 10

2.1. Osnove HTML-a ........................................................................................................... 10

2.1.1. Razumjeti izraz Hypertext Markup Language (HTML) ................................................... 10

2.1.2. Razumjeti ulogu W3C konzorcija u razvijanju HTLM preporuka, razumjeti pogodnosti

tih preporuka, npr. interna operativnost web stranica preko pretraživača, pojačana

dostupnost, dosljedne deklaracije tipova dokumenata. ........................................................ 10

2.2. Korištenje HTML-a ....................................................................................................... 10

2.2.1. Korištenje preglednika za gledanje izvornog koda web stranica ................................... 10

2.2.2. Korištenje markiranih oznaka za strukturu rasporeda web stranice: <html>, <head>,

<title> i <body> .................................................................................................................... 11




2.2.3. Korištenje markiranih oznaka za razvijanje raspored web stranice: <h1>, <p> <br/>, <a

href>, <img/>. ....................................................................................................................... 12

3. Izrada web stranica ....................................................................................................... 13

3.1. Dizajn .......................................................................................................................... 13

3.1.1. Prepoznati planiranje i tehnički dizajn, npr. evaluacija potrebe za ciljanu publiku,

kreiranje okvirne priče, organiziranje strukture stranice, kreiranje predloška za raspored

stranice, donošenje odluke za navigacijsku shemu. .............................................................. 13

3.1.2. Prepoznati dobar font. Korištenje fontova, npr. Arial, Courier, Helvetica ..................... 13

3.2. Korištenje aplikacije ..................................................................................................... 14

3.2.1. Otvoriti, zatvoriti aplikaciju za izradu web stranica. Otvoriti, zatvoriti web stranicu. .... 14

3.2.2. Kreirati, pohraniti novu web stranicu na lokaciju na tvrdom disku ............................... 15

3.2.3. Kreirati, pohraniti novu web stranicu baziranu na dostupnom predlošku .................... 16

3.2.4. Dodati, promijeniti opisni naslov na stranici. ............................................................... 16

3.2.5. Primijetiti razliku iz pogleda izvornog koda u dizajnerski pogled. ................................. 17

3.3. Poboljšanje produktivnosti........................................................................................... 18

3.3.1. Postaviti osnovne opcije u aplikaciji: zadani preglednik, zadani tip dokumenta,

kodiranje, fontovi ................................................................................................................. 18

3.3.2. Korištenje dostupnih Help funkcija .............................................................................. 19

3.4. Unos teksta i oblikovanje ............................................................................................. 20

3.4.1. Umetnuti, izmijeniti, obrisati tekst .............................................................................. 20

3.4.2. Razumjeti i upotrijebiti relativnu veličinu fonta ........................................................... 21

3.4.3. Primijeniti oblikovanje teksta: bold, italic, tip fonta i boju. .......................................... 21

3.5. Oblikovanje odlomaka ................................................................................................. 22

3.5.1. Postaviti svojstva odlomka .......................................................................................... 22

3.5.2. Umetnuti, ukloniti pauzu u odlomku ili rečenici ........................................................... 22

3.5.3. Kreirati, izmijeniti numeriranu (numbered), grafičku (bulleted) listu ........................... 23

3.6. Oblikovanje stranica .................................................................................................... 25

3.6.1. Postaviti margine na stranici: gornja, donja, lijeva, desna. ........................................... 25

3.6.2. Dodati, izmijeniti, ukloniti boju stranice ili slike ........................................................... 25

3.6.3. Promijeniti boju hiperveze na stranici: visited, active, unvisited. ................................. 26




3.7. Hiperveze .................................................................................................................... 27

3.7.1. Razumjeti termine apsolutna i relativna hiperveza ...................................................... 27

3.7.2. Umetnuti, promijeniti, ukloniti hipervezu: tekst, slika. ................................................. 27

3.7.3. Umetnuti, promijeniti, ukloniti e-mail hipervezu: tekst, slika. ...................................... 28

3.7.4. Definirati cilj hiperveze: same window, new window .................................................. 28

3.7.5. Postaviti polazišnu točku (anchor), umetnuti link do polazišne točke .......................... 29

3.8. Tablice ......................................................................................................................... 30

3.8.1. Umetnuti, obrisati tablicu ............................................................................................ 30

3.8.2. Umetnuti, promijeniti naslov tablice............................................................................ 31

3.8.3 Poravnati tablicu: lijevo, desno, centar ........................................................................ 32

3.8.3. Umetnuti, obrisati stupce i retke ................................................................................. 33

3.8.4. Izmijeniti širinu stupca, visinu retka ............................................................................. 33

3.8.5. Spojiti, razdvojiti ćelije ................................................................................................. 34

3.8.6. Izmijeniti širinu rubova tablice, širinu ćelije, razmak ćelije. .......................................... 35

3.8.7. Promijeniti boju pozadine, sliku pozadine, slike unutar ćelije i cijele tablice ................ 35

4. Korištenje objekata ....................................................................................................... 37

4.1. Grafički objekti ............................................................................................................ 37

4.1.1. Dodati, ukloniti sliku sa web stranice ........................................................................... 37

4.1.2. Postaviti, izmijeniti atribute slike: size, border, alignment, alternative text. ................ 37

4.2. Forme .......................................................................................................................... 39

4.2.1. Umetnuti formu na web stranicu. ................................................................................ 39

4.2.2. Dodati, ukloniti jednu liniju, više linija ......................................................................... 39

4.2.3. Dodati, ukloniti polje forme (form field): drop-down, check box, radio button. ........... 41

4.2.4. Postaviti, izmijeniti postavke polja forme: text field, drop-down, check box, radio

button. ................................................................................................................................. 43

4.2.5. Dodati, ukloniti tipke za predaju (submit), resetiranje (reset). ..................................... 44

4.2.6. Postaviti, izmijeniti postavke za tipke predati, resetirati. ............................................. 44

4.2.7 Postaviti, izmijeniti akciju forme (form action) za slanje izlazne forme putem mail-a. .. 45

5. Stilovi ............................................................................................................................. 46

5.1. Css koncepti ................................................................................................................. 46

5.1.1. Razumjeti pojam Cascading Style Sheets (CSS), njihovu uporabu i korist. ..................... 46




5.1.2. Prepoznati glavne pristupe primjeni stilova: inline, internal, external. ......................... 46

5.1.3. Razumjeti strukturu CSS pravila: selector i declaration (property, value). .................... 47

5.2. Korištenje CSS .............................................................................................................. 47

5.2.1. Kreirati, pohraniti novu CSS datoteku. ......................................................................... 47

5.2.2. Kreirati, izmijeniti CSS pravila: boja, pozadina, font. .................................................... 48

5.2.3. Staviti u privitak eksterni (vanjski) CCS na web stranici ................................................ 49

6. Pripremiti učitavanje ..................................................................................................... 50

6.1. Provjera ....................................................................................................................... 50

6.1.1. Identificirati i popraviti neispravne linkove na web stranici ......................................... 50

6.1.2. Prepoznati pravilnu uporabu sadržaja na web stranici: uključujući datum zadnjeg

ažuriranja, detalji softvera potrebnog za otvaranje, gledanje podataka, osiguravajući

kompatibilnost sadržaja sa drugim web pretraživačima. ....................................................... 50

6.1.3. Provjeriti pravopis web stranice i izvršiti potrebne ispravke......................................... 50

6.2. Publikacija ................................................................................................................... 50

6.2.1. Razumjeti proces učitavanja (upload), preuzimanja (download) web stranice na web

server i sa web servera ......................................................................................................... 50

6.2.2. Ucitati (upload), preuzeti (download) web stranicu na server i sa servera. .................. 51

Opći uvjeti korištenja ........................................................................................................... 52




1. WEB KONCEPTI

1.1. Ključni pojmovi

1.1.1. Razumijevanje da Internet podržava niz usluga kao što je World Wide Web

(WWW), prijenos datoteka, e-mail, instant messagging (IM).

Internet ili „mreža svih mreža“ je javna mreža koja preko zajedničkog protokola (IP)

povezuje računala i računalne mreže diljem svijeta. Sva spojena računala i mreže

međusobno razmjenjuju informacije i koriste razne usluge. Dakle, Internet nije samo

WWW, ili stranice i sadržaji dostupni preko preglednika. WWW je samo jedna od, iako

vjerojatnog najviše korištena, usluga koju Internet nudi korisnicima.

U ostale usluge dostupne preko Interneta spadaju i:

File transfer (prijenos datoteka) – prebacivanje datoteka sa jednog računala na

drugo.

Email (elektronička pošta) - predstavlja najstariju uslugu Interneta, a omogućava

razmjenu digitalnih poruka između jedne ili više osoba.

Instant messaging (IM) – omogućava razmjenu elektroničkih poruka u stvarnom

vremenu između dvije ili više osoba. Radi se dakle o popularnim chatovima (GTalk,

MSN, Skype itd.) koji uz razmjenu poruka danas podržavaju i video/audio

komunikaciju.

1.1.2. Razumjeti termin: klijent/server te razumjeti funkcionalnost i odnos između

preglednika i web servera

Internet je vjerojatno najpoznatiji primjer klijent/poslužitelj odnosa. Između klijenta i

poslužitelja postoji velika razlika. Radi se o odnosu između dva računala/programa pri

čemu je klijent onaj koji šalje zahtjeve prema poslužitelju, a poslužitelj zahtjeve obrađuje i

vraća rezultate klijentu. Poslužitelj je obično neko udaljeno računalo kojeg korisnik fizički

ne vidi.

Odnos između web poslužitelja i web preglednika:

Web poslužitelj: to je računalo/server na kojem se nalazi sav sadržaj koji se može

vidjeti na nekoj stranici u web pregledniku. Web poslužitelji su stalno spojeni na

Internet, a na njih se spaja korištenjem URL-a. Tako ukoliko se primjerice u web

preglednik unese www.google.com u biti se pristupa Google poslužitelju.

Web preglednik: omogućava pregledavanje web stranica. On u sebi sadrži

mehanizme koji omogućavaju da se sadržaj dohvaćen sa poslužitelja prikaže na

ispravan i razumljiv način. Kao takav u principu predstavlja posrednika između

korisnika i poslužitelja.

1.1.3. Razumjeti pojmove domene, Uniform Resource Locator (URL), hiperveza,

web hosting, tražilice

Domena predstavlja jedinstveno ime na Internetu. Mogli bi reći da ono što je fizičkim

osobama OIB, web stranicama je ime domene. Ona jedinstveno identificira neku stranicu

na Internetu.

http://www.google.com/




URL (Uniform Resource Locator) je drugo ime za web adresu. URL se sastoji od dva dijela:

Ime protokola (npr. http)

Ime domene (odnosno adresa poslužitelja na kojeg se korisnik želi spojiti), npr.

www.google.com

Kada se tako u polje za adrese u web pregledniku unese http://www.google.com nalaže

se pregledniku da se korištenjem http protokola spoji na poslužitelja koji sadrži domenu

www.google.com.

Hiperveza predstavlja pojedine posebno označene riječi, slike i druge elemente web

stranice koji su posredna veza prema dodatnim informacijama. Najčešće se klikom miša

na hiperveze otvaraju druge stranice. Između ostalog može se otvarati neki drugi dio iste

stranice, omogućiti skidanje nekog sadržaja, pokretati aplikacije.

Na slici niže je dan prikaz hiperveze koje su u tekstovima, kako bi se naglasile, obično,

obojene u plavo, a ponekad i podcrtane.

Web hosting: kada se kreira stranica potrebno ju je pohraniti na neko mjesto otkud će biti

stalno dostupna korisnicima. Za to se obično koriste web hosting servisi, odnosno

kompanije koje posjeduju web poslužitelje na koje se sadržaj može pohraniti.

Tražilica: tražilica je alat koji omogućava pretragu Interneta za informacijama, slikama i

ostalim vrstama datotekama pohranjenim na raznim mjestima dostupnima preko mreže.

Tražilice rade prema određenim algoritmima pomoću kojih na upit korisnika prikazuju

relevantne rezultate pretrage. Prije toga se prikupljaju i pohranjuju informacije o raznim

web stranicama te se zatim analiziraju kako bi se indeksirale i spremile u bazu podataka za

buduće potrebe. Kada korisnik unese upit u tražilicu, pretražuje se baza prema indeksima

te se korisniku prikazuju rezultati koji najbolje odgovaraju unesenim pojmovima pretrage.

Bitno je dakle razumjeti da se korištenjem tražilice ne pretražuje cijeli Internet već baza

podataka koju određena tražilica ima. Zato se i dešava da se u različitim tražilicama mogu

dobiti različiti rezultati. Ovo je važno s aspekta vlasnika stranice koji bi se po završetku

izrade stranice trebao osigurati da se njegova stranica plasira na raznim tražilicama, u

suprotnom će pristup njegovoj stranici biti moguć samo kada korisnik izravno u mjesto za

adresu u web pregledniku unese adresu njegove stranice. Trenutno najpoznatija tražilica

je Google.com.






1.1.4. Razumjeti korištenje osnovnih protokola: Transmission Control

Protocol/Internet Protocol (TCP/IP), Hypertext Transfer Protocol (HTTP), File

Transfer Protocol (FTP)

TCP/IP protokol: ovaj protokol je glavni protokol za komunikaciju Internetom. On je taj

koji definira pravila kojima računala moraju udovoljavati kako bi mogla komunicirati sa

drugim računalima preko mreže.

TCP dio je zadužen za rastavljanje poruka koje se šalju preko mreže u manje pakete koji se

onda na odredištu sastavljaju kako bi se dobila poslana poruka. To znači na primjer da

poslani e-mail ne putuje mrežom u komadu već se rastavlja na sitne dijelove koji odvojeno

putuju mrežom, ne nužno istim kanalom, a onda se na odredištu po podacima koje svaki

paket nosi sastavljaju. Svaki paket u sebi nosi informaciju na koju adresu treba biti

isporučen (IP adresu). IP protokol je taj koji zadužen za to da svaki paket dođe na

odredište.

HTTP protokol: HTTP je mrežni protokol koji omogućava razmjenu gotovo svih vrsta

resursa na WWW-u. Pod resursima se misli na datoteke, stranice, slike, rezultati

pretraživanje itd. U suštini je to jezik kojim web preglednik šalje zahtjeve poslužitelju.

Postoji i HTTPS inačica koja predstavlja sigurnu, kriptiranu verziju HTTP komunikacije.

FTP protokol: FTP protokol se koristi kako bi se učitale (upload) odnosno dohvatile

(download) datoteke u komunikaciji između klijenta i poslužitelja, ili između dva računala

na Internetu. Drugim riječima, ova protokol je zadužen za razmjenu datoteka preko

Interneta.

1.2. Web objavljivanje

1.2.1. Identificirati glavne prednosti web stranica: pristup velikom broju ljudi,

jednostavnost ažuriranja, interaktivnost publike, troškovne uštede

U današnje vrijeme se sve više osoba/kompanija odlučuje za posjedovanjem web stranice.

Razlozi koji idu u prilog izradi i posjedovanju vlastite stranice su:

Na jednostavan način je moguće doći do široke publike,

Informacije je moguće u vrlo kratkom roku mijenjati praktički od bilo kuda. Ukoliko

se primjerice radi o stranici koja nudi neke proizvode u samo nekoliko klikova je

moguće ažurirati cijene,

Web stranice omogućavaju puno bolji odnos sa korisnicima u odnosu na klasične

tiskane materijale ili reklame na televiziji ili radiju. Korisnik ima mogućnost na

jednostavan način doći do dodatnih informacija, odgovora na pitanja, razmijeniti

iskustava preko foruma (ukoliko stranica isti posjeduje) i slično,

Održavanje web stranice košta puno manje nego oglašavanje preko drugih medija

pa online poslovanje može znatno smanjiti troškove osoblja, poslovnog prostora i

slično.




1.2.2. Razumjeti procese stavljanja web stranice online: registracija domena, odabir

web hosting usluga

Proces stavljanja web stranice online se sastoji od nekoliko koraka:

Nakon što je stranica gotova potrebno je registrirati domenu, odnosno registrirati

jedinstveno ime koje će predstavljati stranicu na Internetu. Poželjno je pri odabiru

domene voditi računa da domena ne bude preduga, da bude dobro osmišljena i da

ju korisnici mogu jednostavno zapamtiti.

Registracijom domene još uvijek nije rezerviran prostor na Internetu za stranicu

već je samo definirana njena adresa. Korak koji slijedi je odabir web hosting usluge,

odnosno pronalazak kompanije koja nudi servere na kojima će se stranica nalaziti.

Postoji široka ponuda hosting ponuditelja i na vlasniku stranice je da odabere onog

tko nudi uslugu koja mu najviše odgovara.

Jednom dovršena ova dva koraka stranica, stranicu je potrebno učitati na server web

hosting kompanije i ona postaje dostupna na Internetu.

1.2.3. Prepoznati tehnike optimizacije tražilica, npr. uključivanje relevantnih meta

podataka, uključivanje mape stranice i web linkova, registracija na tražilice.

Tehnike optimizacije tražilica se svode na to da se postigne čim veća mogućnost da se

upravo vaša stranica pojavi na što višoj poziciji među rezultatima pretraživanja. Činjenica

je da se kod pretraživanja najviše otvaraju rezultati pretrage na prvih nekoliko stranica

rezultata, što se ide dalje vjerodostojnost rezultata opada, a samim time i posjećenost tih

stranica.

Neke od tehnika koje stoje na raspolaganju su:

Uključivanje relevantnih meta podataka: meta podaci se koriste kako bi se naveli važni

podaci o stranici. Ti se podaci ne vide na stranici, a njihova je zadaća pružanje relevantnih

podataka tražilicama za lakše indeksiranje stranica što znači da pomažu tražilicama u

rangiranju stranica.

Osnovna sintaksa izgleda:

Sukladno imenima meta elemenata oni dakle sadrže ime autora, opis stranice te ključne

riječi koje se mogu povezati sa sadržajem stranice.

Uključivanje mape stranica i web linkova: mapa stranica je lista svih stranica koje web

stranica sadrži. Uključivanje mape osigurava da su sve stranice prijavljene na tražilice.

Registracija na tražilice: kako je ranije navedeno, nije dovoljno samo izraditi i objaviti

stranicu, već je potrebno tražilicama dati do znanja da stranica postoji.

Neke od opcija koje primjerice nudi Google su:

Add your URL – dodavanje URL-a

App crawling – indeksiranje

Search Console- prijavljivanje mape stranica

http://www.google.com/addurl/?continue=/addurl

https://developers.google.com/app-indexing/

http://www.google.com/webmasters/tools




1.2.4. Prepoznati faktore koji utječu na brzinu skidanja podataka sa web stranice

npr. zvuk, video, grafički formati, animacije, kompresije podataka

Ukoliko stranica osim teksta sadrži i razne druge komponente kao što su video, zvuk,

animacije i slično to utječe na brzinu učitavanja stranice pa te komponente ukoliko se

izaberu pogrešni formati, ili ukoliko se stranica prenatrpa sadržajima mogu dovesti do

sporosti otvaranja. Brzina otvaranja stranica je od ključne važnosti za osiguravanje

pozitivnog korisničkog iskustva, a postaje još važnija sve većom upotrebom mobilnih

uređaja.

Kod odabira formata preporuke su slijedeće:

Audio – .mp3 format

Video - .flv format

Grafički formati - .jpg za slike općenito, .gif i .png za slike sa malo boja kao što su

pozadinske slike.

Kompresija podataka također utječe na brzinu učitavanja stranice. Preporuka je napraviti

kompresiju HTML i CSS datoteka prije no što ih se stavi na web server kako bi se njihova

veličina smanjila, a samim time se povećava brzina skidanja sadržaja i učitavanja stranice.

1.3. Zakonska pitanja

1.3.1. Razumjeti izraz autorsko pravo i njegove implikacije na tekst, sliku, zvuk,

video na web stranicama

Činjenica je da se mnogi sadržaji mogu lako skinuti sa raznih stranica, no to ne znači da se

svi sadržaji na stranicama mogu dalje slobodno koristiti već upravo suprotno, u većini

slučajeva sadržaji podliježu određenim pravima zaštite vlasništva. Sadržaje sa tuđih

stranica je moguće slobodno koristiti samo ukoliko je tako eksplicitno navedeno, u

suprotnom svakako treba provjeriti pod kojim uvjetima se sadržaji smiju skidati i koristiti.




2. HTML

2.1. Osnove HTML-a

2.1.1. Razumjeti izraz Hypertext Markup Language (HTML)

HTML je prezentacijski jezik za izradu web stranica. Radi se o opisnom jeziku kojim se

opisuje izgled dokumenta, pozicije slika, veličina teksta, boja slova itd. HTML nije

programski jezik i njime se ne može izvršiti nikakva zadaća u programskog smislu,

odnosno ne može izvršiti nikakvu pa ni najjednostavniju programsku logiku kao što je

primjerice operacija zbrajanja.

HTML stranice nisu ništa drugo nego obične tekstualne datoteke sa ekstenzijom .html ili

.htm sa uputama kako prikazati stranicu. Obzirom da se radi o običnim tekstualnim

datotekama može ih se izrađivati u bilo kojem tekstualnom editoru kao što je primjerice

Notepad. Naravno, postoje i naprednije varijante vizualnih editora koji se nazivaju

WYSIWYG editori – „What you see is what you get“ ili „Ono što vidiš to i dobiješ“. To su

editori koji imaju mogućnost tijekom izrade stranice odmah prikazivati izgled stranice.

Za opis stranica koriste se markirane oznake (tagovi) koji se pišu unutar < i >. Svaki tag je

naredba koja govori pregledniku što i kako treba napraviti, odnosno na koji način treba

prikazati sadržaj.

2.1.2. Razumjeti ulogu W3C konzorcija u razvijanju HTLM preporuka, razumjeti

pogodnosti tih preporuka, npr. interna operativnost web stranica preko

pretraživača, pojačana dostupnost, dosljedne deklaracije tipova dokumenata.

W3C konzorciji je međunarodna organizacija sa ciljem postavlja standarda za korištenje

HTML-a.

Neke od njihovih preporuka odnose se na:

Interna operativnost web stranica preko pretraživača: odnosi se na preporuke o

tome kako koristiti HTML da bi stranice bile jednako prikazane u raznim

pretraživačima

Dosljedne deklaracije tipova dokumenata: obzirom da se radi o međunarodnim

standardima znači da se može koristiti bilo koji HTML editor za izradu web stranica

Pojačana dostupnost: W3C razvija preporuke imajući na umu i slabovidne osobe.

2.2. Korištenje HTML-a

2.2.1. Korištenje preglednika za gledanje izvornog koda web stranica

Svi preglednici pružaju mogućnost pregleda izvornog koda web stranice. Na slici niže

prikazano je kako se u Internet Exploreru može vidjeti kod.

Otići na View -> Source ili desni klik na stranicu u odabrati View source.




Nakon toga će se otvoriti dokument u kojem je moguće vidjeti kod stranice.

2.2.2. Korištenje markiranih oznaka za strukturu rasporeda web stranice: <html>,

<head>, <title> i <body>

<html> element definira cijeli dokument. To je korijenski element unutar kojeg se nalaze

svi ostali elementi. Kao i većina ostalih elemenata ima početni i završni tag <html> i

</html>. Kako većina elemenata ima završni tag, u priručniku se to neće posebno navoditi

za svaki element. Bit će napomenuto samo ukoliko neki element nema završni tag.

Preporuka je <html> tag koristiti za ubacivanje oznake jezika koju zatim koriste

pretraživači.

Za hrvatski jezik bi se tako definiralo <html lang= „hr“>.

<head> element se koristi za spremanje meta podataka o kojima je bilo riječi nešto ranije

u priručniku.

<title> element koristi se za definiranje naslova dokumenta. To je naslov koji se pojavljuje

kao naziv otvorene stranice pretraživača ili kada se stranica doda u Favorites.

<body> element definira tijelo dokumenta i u njemu se nalazi sav sadržaj kao što je tekst,

slike, tablice, liste itd.

Sukladno HTML5 standardu <html>, <body> i <head> tagovi nisu obavezni, ali je svakako

preporuka ih koristiti jer može doći do nepredviđenih rezultata u nekim preglednicima.

Problem je naime u tome što još uvijek ne postoji standard koji bi vrijedio za sve

preglednike i sve njihove verzije. Ulaže se veliki trud kako bi se postigla unificiranost




izgleda stranica, i u tome se uspijeva za novije verzije preglednika, no starije verzije i dalje

mogu dovesti do problema nekompatibilnosti. Kod izrade web stranica valja uvijek imati

na umu da korisnici koriste razne preglednike i sukladno tome treba nastojati izraditi

stranicu koju će većina preglednika moći ispravno prikazati.

2.2.3. Korištenje markiranih oznaka za razvijanje raspored web stranice: <h1>, <p>

<br/>, <a href>, <img/>.

Oznake <h1> i <h2> se odnose na naslove unutar stranica. Raspon oznaka se kreće od

<h1> do <h6> i posložene su prema važnosti pri čemu <h1> označava naslov najveće

važnosti, a <h6> naslov najmanje važnosti. U većini slučajeva se najviše koriste <h1> i <h2>

za naslove i podnaslove.

Naslovi su važni jer ih tražilice koriste kako bi analizirale sadržaj stranice i po riječima u

naslovima analiziraju o čemu se radi na stranici. Ni u kom slučaju ne koristiti oznake za

naslove kako bi se isticao neki drugi tekst unutar stranice jer to može rezultirati

smanjivanjem ranga stranice na tražilicama.

Tražilice svoju popularnost temelje na tome koliko točne rezultate pretraživanja daju te

svaki pokušaj da se rang stranice podigne korištenjem metoda koje nisu u skladu sa

standardima se kažnjava na način da se stranica označi kao nepouzdana.

<p> je oznaka za odlomak i koristi se kako bi se odvojile pojedine cjeline teksta.

<br/> je oznaka za novi red. Spada u skupinu oznaka koje nemaju početnu i završnu

oznaku, pa je stoga njen izgled nešto drugačiji i sadrži znak / na kraju oznake.

<a href> element se sastoji od oznake a koja predstavlja hipervezu koja se koristi kao

poveznica na neku drugu stranicu ili neki element unutar stranice, a href oznaka sadrži

lokaciju na koju hiperveza pokazuje.

<img/> element se koristi za uključivanje slika u dokument.

Gornji kod bi u web pregledniku bio prikazan kako slijedi:




3. IZRADA WEB STRANICA

3.1. Dizajn

3.1.1. Prepoznati planiranje i tehnički dizajn, npr. evaluacija potrebe za ciljanu

publiku, kreiranje okvirne priče, organiziranje strukture stranice, kreiranje

predloška za raspored stranice, donošenje odluke za navigacijsku shemu.

Kao što je sa svim poslovima, tako je i prije početka izrade stranice potrebno izvršiti neka

planiranja i pripreme:

Potrebno je odrediti koja će biti ciljana publika. Naime stranica koja sadrži

informacije o kuhanju će se vjerojatno bitno razlikovati od stranice sa dječjim

sadržajem

Potrebno je kreirati nacrt okvirne priče, odnosno odrediti glavne smjernice onoga

što će stranica sadržavati

Struktura stranice mora biti smislena i korisniku olakšati navigaciju stranicom

smislenim poveznicama

Predložak rasporeda stranice vezan je za općeniti izgled stranici. Uključuje sve

informacije o dizajnu kao što je primjerice izgled tablica, pozadine, boja naslova i

slično

Navigacijska shema omogućava korisnicima da pronađu ono što traže na stranici

na brz i jednostavan način.

3.1.2. Prepoznati dobar font. Korištenje fontova, npr. Arial, Courier, Helvetica

Obzirom da u većini slučajeva tekst zauzima veliki dio stranice, odabir fonta može imati

veliki utjecaj na dizajn. Generalno se razlikuju dva tipa fontova: Serif i Sans-serif. Njihova

razlika se može vidjeti na slijedećoj slici. Naime serif fontovi imaju dodatne ukrase na

slovima.

Zbog čitkosti teksta serif fontovi se ne preporučuju za duže tekstove već za naslove i

slično.

Arial, Courier i Helvetica su predstavnici sans serif fontova i kao takvi su pogodni za

sadržaj stranice. Njihova je odlika da izgledaju dobro u skoro svim veličinama.




3.2. Korištenje aplikacije

3.2.1. Otvoriti, zatvoriti aplikaciju za izradu web stranica. Otvoriti, zatvoriti web

stranicu.

Aplikacija koja će se koristiti za praktični dio ovog priručnika je KompoZer i besplatno se

može skinuti sa stranice http://www.kompozer.net/download.php. Jednom skinuta

aplikacija ne zahtjeva nikakvu instalaciju, dovoljno je raspakirati sadržaj na mjesto po

izboru i za pokretanje dvaput kliknuti na kompozer.exe.

Za zatvaranje aplikacije kliknuti na X u gornjem desnom kutu aplikacije.

Za otvaranje web stranice odabrati File -> Open File te iz izbornika odabrati željenu

stranicu.

http://www.kompozer.net/download.php




Za zatvaranje stranice kliknuti na X označen na slici niže.

3.2.2. Kreirati, pohraniti novu web stranicu na lokaciju na tvrdom disku

Za kreiranje nove stranice odabrati File -> New. Otvorit će se dijaloški okvir sa opcijama

kao na slijedećoj slici. Odabrati opciju „A blank document“ i kliknuti na Create.

Za spremanje stranice odabrati File -> Save. Ukoliko stranica još nema ima pojavit će se

dijaloški okvir u kojeg je potrebno unijeti ime stranice. Nakon unosa imena kliknuti na OK.




U slijedećem koraku će se otvoriti dijaloški okvir u kojem je potrebno odabrati mjesto gdje

će se stranica spremiti te kao format odabrati HTML files.

3.2.3. Kreirati, pohraniti novu web stranicu baziranu na dostupnom predlošku

Odabrati File -> New te u dijaloškom okviru odabrati „A new document based on a

template“ te potom odabrati predložak i kliknuti na Create.

Za pohranu stranice koraci su isti kao u sekciji 3.2.2.

3.2.4. Dodati, promijeniti opisni naslov na stranici.

Odabrati Format -> Page Title and Properties. Otvorit će se dijaloški okvir kao na slici niže

u kojeg je potrebno unijeti naslov (Title) te kliknuti na OK.




Za provjeru kliknuti na gumb Browse nakon čega će se otvoriti web preglednik.

3.2.5. Primijetiti razliku iz pogleda izvornog koda u dizajnerski pogled.

U dnu aplikacije nalaze se opcije koje omogućavaju promjenu pregleda stranice. Klikom na

Source dobije se pregled koda stranice dok se klikom na gumb Preview može vidjeti

izgled stranice (dizajnerski pogled).




3.3. Poboljšanje produktivnosti

3.3.1. Postaviti osnovne opcije u aplikaciji: zadani preglednik, zadani tip dokumenta,

kodiranje, fontovi

Zadani preglednik:

Otići na Tools -> Options -> Applications te sukladno slici niže postaviti željene parametre.

U ovom slučaju je kao zadani preglednik odabran Chrome.

Zadani tip dokumenta i kodiranje:

Otići na Tools -> Options -> Advanced te u Markup odjeljku definirati postavke po

želji/potrebi.




Fontovi:

Za definiranje fontova otići na Tools -> Options -> Fonts te odabrati željene postavke.

3.3.2. Korištenje dostupnih Help funkcija

Funkcije za pomoć su dostupne ukoliko se klikne na Help u glavnom izborniku. Nakon

toga se otvara novi dijaloški okvir u kojem se mogu pretraživati informacije po raznim

kriterijima.




3.4. Unos teksta i oblikovanje

3.4.1. Umetnuti, izmijeniti, obrisati tekst

Za manipulaciju tekstom odabrati Preview u dnu aplikacije te zatim unositi tekst kao da se

radi o običnom uređivaču teksta.




3.4.2. Razumjeti i upotrijebiti relativnu veličinu fonta

Veličina fonta se može postaviti relativno u odnosu na ostale elemente na stranici čime se

postiže bolja čitljivost. Postavljanje relativne veličine ujedno omogućava korisnicima da

sami mijenjaju veličinu teksta u preglednicima.

Za postavljanje relativne veličine odabrati tekst kojeg se želi formatirati te zatim otići na

Format -> Size i odabrati neku od ponuđenih veličina.

3.4.3. Primijeniti oblikovanje teksta: bold, italic, tip fonta i boju.

Oblikovanje teksta bold: označiti željeni tekst te odabrati Format -> Text Style -> Bold

Oblikovanje teksta italic: označiti željeni tekst te odabrati Format -> Text Style -> Italic

Promjena fonta: označiti željeni tekst te odabrati Format -> Font -> željeni font

Promjena boje: označiti željeni tekst te odabrati Format -> Text Color -> željena boja




3.5. Oblikovanje odlomaka

3.5.1. Postaviti svojstva odlomka

Postavke odlomka se nalaze pod Format:

Increase/Decrease Indent – povećavanje/smanjivanje uvlake

Align – poravnanje

Za postavljanje svojstva odabrati paragraf te odabrati željene postavke.

3.5.2. Umetnuti, ukloniti pauzu u odlomku ili rečenici

Pauza u odlomku će biti prikazana kroz slijedeći primjer.

Unijeti 2 proizvoljne rečenice, označiti ih te ih definirati kao paragraf.

Postaviti se kursorom ispred druge rečenice te stisnuti ENTER. Rezultat toga je pauza

odlomka, odnosno dvije rečenice sada predstavljaju 2 odlomka.




Za uklanjanje pauze odlomka postaviti kursor ispred druge rečenice te kliknuti na

BACKSPACE na tipkovnici

Za pauzu u rečenici umjesto pritiska na ENTER istovremeno pritisnuti SHIFT + ENTER.

Rezultat toga je pauza rečenice. Za uklanjanje pauze rečenice postaviti kursor ispred

druge rečenice i pritisnuti BACKSPACE.

Pauza odlomka dakle znači kreiranje novog odlomka, dok pauza rečenice znači

preskakanje u novi red.

3.5.3. Kreirati, izmijeniti numeriranu (numbered), grafičku (bulleted) listu

Za izradu listi označiti elemente koji se žele staviti u listu te otići na Format -> List ->

Numbered/Bulleted.

Za izmjenu označiti listu te otići na Format -> List -> List properties.




Nakon toga će se otvoriti novi dijaloški okvir u kojem se može uređivati listu po želji –

promijeniti vrstu liste, promijeniti oznake, primijeniti izmjene nad cijelom listom ili samo

dijelom liste i slično.




3.6. Oblikovanje stranica

3.6.1. Postaviti margine na stranici: gornja, donja, lijeva, desna.

Margine se postavljaju na način da se ode na File -> Page Setup te u dijaloškom okviru koji

se zatim otvori odabrati Margins & Header/Footer sekciju u kojoj je onda moguće

postaviti veličine margina.

3.6.2. Dodati, izmijeniti, ukloniti boju stranice ili slike

Otići na Format -> Page Colors and Background. U dijaloškom okviru koji će se tada

otvoriti označiti Use custom colors te kliknuti na polje pored riječi Background. Ukoliko se

želi učitati slika kao pozadina kliknuti na ikonu mape.




Ukoliko se odabere opcija definiranja pozadinske boje otvorit će se novi dijaloški okvir u

njemu se može odabrati boja.

Po odabiru boje kliknuti na OK.

U slučaju odabira slike za pozadinu, izabrati željenu sliku te kliknuti na Open.

3.6.3. Promijeniti boju hiperveze na stranici: visited, active, unvisited.

Otići na Format -> Page Colors and Background.

Klikom na kućice pored Link Text, Active Link Text i Visited Link Text može se definirati

željena boja.




3.7. Hiperveze

3.7.1. Razumjeti termine apsolutna i relativna hiperveza

Termin hiperveza se koristi za tekst, sliku ili drugi element koji jednom kliknut vodi na

neku drugu lokaciju.

Apsolutna hiperveza vodi na lokaciju izvan stranice u kojoj se korisnik trenutno

nalazi

Relativna hiperveza vodi na stranicu unutar trenutne web stranice npr. veza sa

neke od stranica na naslovnu stranicu

3.7.2. Umetnuti, promijeniti, ukloniti hipervezu: tekst, slika.

Otvoriti stranicu u Preview mod-u te odabrati tekst kojeg se želi iskoristiti za hipervezu.

Nakon toga kliknuti na Link ikonu.

To do će dovesti do otvaranja dijaloškog okvira u kojeg zatim možete unijeti adresu druge

lokacije.

Za relativni link bi postupak bio isti samo što bi se klikom na sličicu mape trebalo pronaći

lokaciju.




Za rezultat ove operacije prvotno označeni tekst na stranici bit će obojan u plavo i

podcrtan kako bi se ukazivalo na to da se radi o hipervezi.

Ukoliko se želi iskoristiti slika kao hiperveza, postupak je potpuno isti samo što je

potrebno najprije uvesti sliku na stranicu tako što se ode na Insert -> Image te se odabere

željena slika.

Za uklanjanje veza, označiti tekst koji sadrži hipervezu te desni klik miša i odabrati opciju

Remove links.

3.7.3. Umetnuti, promijeniti, ukloniti e-mail hipervezu: tekst, slika.

Za unos e-mail hiperveze koraci su potpuno isti kao za unos obične hiperveze uz razliku da

se unosi e-mail adresa umjesto adrese stranice i potrebno je označiti kućicu „The above is

an email address“

3.7.4. Definirati cilj hiperveze: same window, new window

Kod otvaranja hiperveza postoje dvije opcije: da se nova stranica otvori umjesto već

postojeće što znači da se trenutno otvorena stranica zatvara, ili da se nova stranica otvori

u novom prozoru preglednika pri čemu trenutno otvorena stranica ostaje i dalje otvorena.

Početne upute su iste kao unos linkova, a opcija otvaranja u novom ili istom prozoru se

definira tako da se u sekciji Target označi „Link is to be opened“ te zatim iz padajućeg

izbornika odabere željena opcija.




3.7.5. Postaviti polazišnu točku (anchor), umetnuti link do polazišne točke

Anchor je hiperveza koja premješta fokus sa jednog dijela teksta unutar stranice na drugi

tekst unutar stranice. Obično se koriste na stranicama koje su poprilično dugačke kako

korisnik ne bi trebao previše pomicati pomičnu traku sa strane. Na slici niže je prikazan

jedan od oblika implementacije anchor veza. Klikom na neku od poveznica fokus se

premješta na odabranu sekciju.

Kako bi se stvorila anchor veza potrebno je označiti podnaslov unutar teksta te kliknuti na

Anchor ikonu.

U dijaloškom okviru koji se zatim otvori potrebno je definirati ime anchor veze. To je ime

koje će biti prikazano korisniku.

Nakon što se postupak ponovi za sve željene anchor veze potrebno je kreirati tablicu

sadržaja koja će biti prikazana korisniku (kao na gornjem primjeru s Wikipedije).

Na početku stranice navesti sve odjeljke koje ste definirali kao anchor veze.




Odabrati prvi po redu (u ovom slučaju Uvod) te kliknuti na Link ikonu.

Na popisu lokacija se sada mogu vidjeti sve lokacije koje su ranije definirane za anchor.

Odabrati željenu lokaciju, kliknuti OK te postupak ponoviti za preostale.

Ovaj postupak u praksi nema prevelike koristi ukoliko se radi o kratkim tekstovima već se

preporučuje samo za stranice sa jako puno sadržaja.

3.8. Tablice

3.8.1. Umetnuti, obrisati tablicu

Za umetanje tablice kliknuti na Table ikonu u glavnoj izbornoj traci.

Kao rezultat toga otvorit će se dijaloški okvir u kojem je zatim moguće odabrati želje

postavke.




Po odabiru postavki unutar radnog prostora će biti iscrtana tablica u koju možete unositi

vrijednosti po želji.

Za brisanje tablice pozicionirati se unutar tablice te otići na Table -> Delete te zatim

odabrati Table. Kao što je vidljivo na slici moguće je brisati i samo određene dijelove

tablice kao što su kolone i stupci.

3.8.2. Umetnuti, promijeniti naslov tablice

Kliknuti bilo gdje unutar tablice te otići na Table -> Table properties.

U dijaloškom okviru definirati gdje se želi ubaciti naslov.




Sukladno odabiru u radnom prostoru će se stvoriti mjesto za unos naslova.

3.8.3 Poravnati tablicu: lijevo, desno, centar

Kliknuti bilo gdje unutar tablice te otići na Table -> Table properties te pod Table

Alignment odabrati željeno poravnanje.




3.8.3. Umetnuti, obrisati stupce i retke

Za umetanje stupaca redaka otići na Table -> Insert i zatim odabrati željenu operaciju.

Za brisanje odabrati željeni stupac/kolonu kojeg želite obrisati te otići na Table -> Delete

te odabrati željenu opciju.

3.8.4. Izmijeniti širinu stupca, visinu retka

Otići na Format -> Table cell properties. Otvoriti Cells prozor te zatim u Selection dijelu

odabrati Row i definirati željene postavke.




3.8.5. Spojiti, razdvojiti ćelije

Za spajanje ćelija odabrati ćelije koje se žele spojiti te na desni klik miša iz izbornika

odabrati „Join Selected Cells“.

Za razdvajanje odabrati željenu ćeliju te na desni klik miša odabrati Split cell.




3.8.6. Izmijeniti širinu rubova tablice, širinu ćelije, razmak ćelije.

Kliknuti bilo gdje unutar tablice te otići na Table -> Table properties.

Za rubove tablice pozicionirati se u Table prozor te definirati postavke u Borders and

Spacing sekciji.

Za definiranje svojstava ćelije otvoriti Cells prozor u istom dijaloškom okviru.

Cell Spacing -> definira razmak između ćelija u tablici

Cell Padding -> definira razmak između sadržaja ćelije i rubova ćelije.

3.8.7. Promijeniti boju pozadine, sliku pozadine, slike unutar ćelije i cijele tablice

Promjena boja pojedine ćelije: odabrati željenu ćeliju te otići na Table -> Table or Cell

Background color te odabrati željenu boju.

Promjena boje tablice: odabrati tablicu te otići na Table -> Table or Cell Background color

te odabrati boju.

Slika unutar ćelije/tablice: kliknuti bilo gdje unutar tablice te zatim u dnu stranice odabrati

<table> oznaku




Na desni klik miša otvara se izbornik u kojem je potrebno odabrati Inline styles.

U dijaloškom okviru koji se zatim otvori odabrati sliku.




4. KORIŠTENJE OBJEKATA

4.1. Grafički objekti

4.1.1. Dodati, ukloniti sliku sa web stranice

Pozicionirati se unutar stranice na mjesto gdje se želi ubaciti slika te kliknuti na Image

ikonu

U dijaloškom okviru koji se zatim otvori pronaći željenu sliku.

Za brisanje slike dovoljno ju je označiti i kliknuti na BACKSPACE na tipkovnici.

4.1.2. Postaviti, izmijeniti atribute slike: size, border, alignment, alternative text.

Označiti sliku na stranici, desni klik mišem i odabrati Image properties.




Otvorit će se dijaloški okvir u kojem se onda mogu definirati željena svojstva.

U Location prozoru može se izmijeniti alternative text, to je tekst koji će biti prikazan kada

se na stranici pređe mišem preko slike.

U Dimension prozoru može se izmijeniti veličina slike.

U Appearance prozoru moguće je definirati vrstu obruba i poravnanje.




4.2. Forme

4.2.1. Umetnuti formu na web stranicu.

Pozicionirati se unutar stranice na mjesto gdje se želi umetnuti kontakt forma te kliknuti

na Form ikonu.

Otvorit će se dijaloški okvir u kojeg je zatim potrebno unijeti određene vrijednosti:

Ime forme

U Action URL unijeti mail adresu s koje ćete po potrebi slati odgovore na pitanja

korisnika. Prije adrese upisati mailto:

Za Method polje odabrati POST

Unutar stranice će se pojaviti plavo iscrtano polje koja pokazuje gdje forma počinje i

završava.

4.2.2. Dodati, ukloniti jednu liniju, više linija

Dodavanje jedne linije:

Unutar plavo iscrtanog polja unijeti primjerice Ime te zatim pod Form odabrati Form

Field.




U dijaloškom okviru koji se zatim otvori odabrati vrstu polja te definirati ime polja.

Rezultat bi trebao izgledati kao na slici niže.

Dodavanje više linija:

Koraci su načelno isti samo što je potrebno odabrati Form -> Text Area. U dijaloškom

okviru koji se zatim pojavi mogu se definirati željene postavke.




Ovisno o unesenim vrijednostima rezultat bi trebao otprilike izgledati:

4.2.3. Dodati, ukloniti polje forme (form field): drop-down, check box, radio button.

Drop-down: kliknuti na Form -> Form field -> Selection list. U dijaloškom okviru koji se

zatim otvorit definirati naziv liste (u ovom slučaju Interesi) te klikom na gumb dodavati

elemente.




Checkbox: kliknuti na Form -> Form field -> te u polju Field type odabrati Check Box i

definirati postavke po želji. Ukoliko je potrebno dodati više checkbox-eva ponoviti

postupak za svaki.

Radio button: odabrati Form -> Form field -> Radio button. Definirati svojstva te kliknuti

na OK. U slučaju da je potrebno dodati više radio button-a ponoviti postupak za svaki.

Odlika radio button-a, za razliku od check box-a je da samo jedan može biti označen u

određenom trenutku.

Primjer kontakt forme je dan na slici niže:




4.2.4. Postaviti, izmijeniti postavke polja forme: text field, drop-down, check box,

radio button.

Za izmjenu postavki drop-down elementa označite ga odabrati Format -> Selection List

Properties.

Za izmjenu postavki text polja, check box-a i radio button-a odabrati željeni element te

otići na Format -> Form Field properties.

U oba slučaja se zatim otvara ista forma kao za dodavanje polja u kojoj se onda mogu

vršiti izmjene.




4.2.5. Dodati, ukloniti tipke za predaju (submit), resetiranje (reset).

Otići na Form –> Form Field te pod Field type odabrati submit odnosno reset button.

Submit button je dugme koje je zaduženo za to da jednom kada ga se klikne proslijedi

unesene informacije.

Reset button poništava sve uneseno u elemente u formi.

Za uklanjanje navedenih polja ih je dovoljno označiti i kliknuti na DELETE.

4.2.6. Postaviti, izmijeniti postavke za tipke predati, resetirati.

Odabrati željenu tipku te na desni klik miša odabrati Form Field Properties.




4.2.7 Postaviti, izmijeniti akciju forme (form action) za slanje izlazne forme putem mail-a.

Ove postavke su definirane u prvom koraku izrade forme (ime forme, adresa ...). Ukoliko

se žele izmijeniti kliknuti bilo gdje unutar forme te na desni klik miša odabrati Form

Properties.




5. STILOVI

5.1. CSS koncepti

5.1.1. Razumjeti pojam Cascading Style Sheets (CSS), njihovu uporabu i korist.

CSS se koristi za uređivanje stila HTML dokumenta. Izgled elemenata je moguće definirati

i kroz sami HTML no preporuka je odvajati samu definiciju elemenata od definicije izgleda.

Glavna prednost CSS-a je što je njime moguće definirati na jednom mjestu stil za sve

elemente, primjerice na jednom mjestu je moguće definirati pozadinsku boju za sve

stranice web stranice, dok bi se u HTML-u to trebalo definirati za svaku stranicu posebno.

Još neke prednosti korištenja CSS-a su brze učitavanje, jednostavnije editiranje, brži razvoj

i veća kontrola nad izgledom.

5.1.2. Prepoznati glavne pristupe primjeni stilova: inline, internal, external.

External pristup: kod ovog pristupa CSS definicije se nalaze izvan samog HTML

dokumenta. To omogućava da se potpuno odvoji sadržaj stranice od samog izgleda. CSS

datoteke su datoteke koje sadrže samo CSS definicije i imaju nastavak „.css“, primjerice

mojaStranica.css.

Kako bi se stilovi navedeni u css datoteci primijenili na HTML dokument potrebno ih je

povezati, a to se radi tako da se css file uključi u <head> dijelu HTML dokumenta.

<head>

<title> Web dizajn </title>

<link rel="stylesheet" type="text/css" href="mojStil.css" />

</head>

Postupak je potrebno ponoviti za svaku stranicu unutar web stranice.

Internal pristup: u ovom slučaju se css definicije ne nalaze u drugoj datoteci već se nalaze

unutar same HTML datoteke. Na ovaj način se definira stil samo dotične stranice u koju su

dodane css definicije. Ovo se može primjerice koristiti kada se za samo jednu stranicu želi

specificirati neki posebni stil. Dakle, sve ostale stranice bi uključile vanjski css file, u

dotičnoj stranici bi se css definirao unutar nje same.

Kako bi se definirao interni stil, pravila stila se moraju ubaciti u <head> sekciju unutar

<style> oznaka.

<head>

<title>Web dizajn</title>

<style type="text/css">

body{ background-color: red;}

</style>

</head>

U gornjem primjeru je definirano da će za stranicu u koju je dodan ova definicija tijelo

dokumenta imati crvenu pozadinsku boju.

Inline: kod ovog pristupa se style atribut definira unutar same oznake elementa na kojeg

se želi primijeniti određeni stil.

<p style="color:red; ">This is a paragraph.</p>

U ovom slučaju bi boja samo ovog paragrafa bila crvena.

Ovaj pristup se ne preporučuje koristiti jer se gube prednosti navedene u prijašnjoj sekciji.




5.1.3. Razumjeti strukturu CSS pravila: selector i declaration (property, value).

Selector: to je html element na kojeg se želi primijeniti stil

Declaration: to je stil kojeg se želi primijeniti nad određenim elementom.

Svaka se deklaracija sastoji od 2 dijela:

Property: to je atribut kojem se želi dati neka vrijednost (npr. pozadinska boja)

Value: vrijednost koja se dodjeljuje atributu.

Svaka deklaracija se mora nalaziti unutar vitičastih zagrada te mora završavati sa ;.

Pravilo koje bi dakle definiralo da pozadinska boja tijela html dokumenta mora biti zelena

bi izgledalo:

body { background-color: green; }

5.2. Korištenje CSS

5.2.1. Kreirati, pohraniti novu CSS datoteku.

Kliknuti na CSS ikonu na alatnoj traci

Otvorit će se dijaloški okvir u kojem je zatim potrebno napraviti slijedeće korake

Kliknuti na „internal stylesheet“ u Sheets and rules odjeljku

Nakon toga kliknuti na paletu u gornjem lijevom uglu i odabrati Linked stylesheet

Klkinuti na Create stylesheet

Kliknuti opet na „internal stylesheet“ u Sheets and rules odjeljku

Kliknuti na Export stylesheet and switch to exported version.

Dati ime datoteci te odbrati .css ekstenziju

Kliknuti na Save.




5.2.2. Kreirati, izmijeniti CSS pravila: boja, pozadina, font.

Kliknuti na CSS ikonu u alatnoj traci te zatim odabrati datoteku. Kao element za prikaz

funkcionalnosti odabran je body.

Kako bi se definirale postavke kliknuti na Create Style Rule.

Za odabir pozadinske boje kliknuti na Background te na kućicu pored Color nakon čega se

otvara izbornik boja.




Za definiranje fonta kliknuti na Text prozor u kojem se zatim mogu odabrati željene

postavke.

Nakon što su definirane sve postavke kliknuti na OK.

5.2.3. Staviti u privitak eksterni (vanjski) CCS na web stranici

Kako bi se definirani stilovi primijenili na HTML dokument potrebno je <head> elementu

definirati css datoteku u kojoj se nalaze definicije stilova.

<head>

<title></title>

<link rel="stylesheet" href="mojStil.css" type="text/css">

</head>




6. PRIPREMITI UČITAVANJE

6.1. Provjera

6.1.1. Identificirati i popraviti neispravne linkove na web stranici

Važan posao kojeg je potrebno obaviti jednom kada je stranica gotova je provjera svih

hiperveza na stranici kako se ne bi desilo da primjerice klik na neku hipervezu ne vodi

nikamo ili možda vodi na krivo mjesto.

6.1.2. Prepoznati pravilnu uporabu sadržaja na web stranici: uključujući datum

zadnjeg ažuriranja, detalji softvera potrebnog za otvaranje, gledanje

podataka, osiguravajući kompatibilnost sadržaja sa drugim web

pretraživačima.

Slijedeće što je potrebno napraviti prije no što se stranica objavi je provjeriti da li su

uključene sve bitne informacije kao što je informacija kada je zadnji puta stranica

ažurirana (korisnici imaju više povjerenja u stranice koje se redovito održavaju).

Za sve elemente na stranici za koje je primjerice potreban neki dodatan softver da bi ih se

moglo koristiti/otvoriti navesti što je potrebno imati (primjerice za pdf dokumente se

može navesti da je potrebno imati Adobe reader).

Svakako je važno provjeriti kako stranica izgleda u raznim preglednicima kako bi se

osiguralo da je izgled svugdje isti. Ukoliko iz nekog razloga niste u mogućnosti prilagoditi

stranicu nekom određenom pregledniku naglasiti na stranici da se preporuča koristiti

možda neki drugi preglednik kako bi korisničko iskustvo bilo potpuno. Već je ranije bilo

govora o tome da još uvijek svi preglednici ne podržavaju sve opcije koje su na

raspolaganju, pa se može desiti da se primjerice u nekom web pregledniku neki format ne

može prikazati.

6.1.3. Provjeriti pravopis web stranice i izvršiti potrebne ispravke.

Još nešto što je svakako bitno za napraviti je provjera pravopisa jer pravopisne greške

mogu negativno utjecati kod korisnika. KompoZer ima ugrađenu opciju za provjeru

pravopisa koju je moguće pokrenuti na Edit -> Check Spelling i dalje koristiti kao bilo koji

drugi alat za provjeru pravopisa.

6.2. Publikacija

6.2.1. Razumjeti proces učitavanja (upload), preuzimanja (download) web stranice

na web server i sa web servera

Jednom kada je stranica gotova potrebno ju je postaviti na neko mjesto s kojeg će biti

dostupna široj javnosti, odnosno potrebno ju je objaviti na Internetu.

Proces učitavanja (upload) web stranice na server se svodi na prebacivanje datoteka

stranice na web hosting server. U uvodu je bilo govora o odabiru domene i web hostinga.

Jednom kada se stranica učita na server ona se povezuje sa URL adresom i postaje vidljiva

na Internetu.




Kada korisnici pristupaju vašoj stranici najprije unesu URL. Nakon što kliknu na ENTER

kopija vaše stranice se preuzima sa servera na njihovo računalu kako bi mogli pregledavati

stranicu.

6.2.2. Ucitati (upload), preuzeti (download) web stranicu na server i sa servera.

Nakon što zakupite hosting prostor možete stranicu učitati na web server.

Otići na File -> Publish te zatim u dijaloški okvir unijeti potrebne podatke. Zahtijevane

podatke dobijete nakon što registrirate domenu i zakupite web prostor.




7. OPĆI UVJETI KORIŠTENJA

Web–stranicu www.ITdesk.info je pokrenula udruga „Otvoreno društvo za razmjenu ideja - ODRAZI“ u sklopu aktivnog promoviranja ljudskog prava na slobodan pristup informacijama te ljudskog prava na edukaciju.

Slobodno kopirajte i distribuirajte ovaj dokument, uz uvjet da ne mijenjate ništa u njemu!

Nad svim programima i uslugama navedenim na web–stranici ITdesk Home na web adresi ITdesk.info isključivo pravo posjeduju njihovi autori/ce. Microsoft, Windows, i Windowsxx su registrirani zaštitni znakovi tvrtke Microsoft Corporation. Ostali zaštitni znaci korišteni na ITdesk Home web-stranicama su isključivo vlasništvo njihovih vlasnika/ca. Ako imate pitanja vezana uz uporabu ili redistribuciju bilo kojeg programa, molimo kontaktirajte autore/ice dotičnog programa. Sva dodatna pitanja pošaljite na [email protected].

___________________________________

Ove web–stranice sadržavaju linkove na ostale web–stranice ili izvore. ITdesk.info tim NIJE odgovoran za tekstualni i/ili reklamni sadržaj, odnosno za proizvode koji su na tim web–stranicama /izvorima ponuđeni, kao što NIJE odgovoran niti za sadržaj koji je putem njih dostupan; mogućnost korištenja ili točnost sadržaja. Linkove koristite na vlastitu odgovornost. Također, ITdesk.info tim ne garantira:

da je sadržaj na ovim web–stranicama oslobođen od pogrešaka ili pogodan za svaku svrhu,

da će ove web–stranice ili web usluge funkcionirati bez pogrešaka ili prekida,

da će biti odgovarajući za vaše potrebe,

da implementacija takvog sadržaja neće narušavati patente, autorska prava, zaštitni znak ili ostala prava neke treće strane.

Ako se ne slažete s ovim općim uvjetima korištenja ili ako niste zadovoljni web–stranicama koje pružamo, prekinite s korištenjem ovih web–stranica i web usluga. ITdesk.info tim nije odgovoran vama, niti trećim osobama za bilo koju nastalu štetu, bila ona direktna, indirektna, slučajna ili posljedična, povezana s ili proizlazeći iz vaše uporabe, pogrešne uporabe ovih web–stranica ili web usluga. Iako vaše potraživanje može biti bazirano na garanciji, ugovoru, prekršaju ili nekom drugom pravnom uporištu, neovisno o našoj obaviještenosti o mogućnosti nastanka takve štete, oslobađamo se svake odgovornosti. Prihvaćanje ograničenja naše odgovornosti nužan je preduvjet korištenja ovih web–stranica i web usluga

Svi softveri navedeni u ovom ili drugim dokumentima objavljenim na stranici ITdesk.info su navedeni samo za edukativne svrhe ili kao primjer te mi, na bilo koji način, ne preferiramo navedeni softver u odnosu na neki drugi softver. Bilo koju izjavu da neki navedeni softver preferiramo više u odnosu na drugi, koji se spominje ili ne spominje u materijalima, smatrat će se kao lažni iskaz. Našu izravnu i bezrezervnu podršku imaju jedino softveri otvorenog koda (open source) koji omogućuju korisnicima/cama da bez prepreka postanu digitalno pismeni, koriste računalo i sudjeluju u modernom informatičkom društvu.

http://www.itdesk.info/

mailto:[email protected]




Nakladnik: Otvoreno društvo za razmjenu ideja

(ODRAZI), Zagreb

OBRADA TEKSTA - MICROSOFT WORD 2010 - … edukacija/web_dizajn/Web...5.1.3.Razumjeti strukturu CSS...

Documents

Transcript of OBRADA TEKSTA - MICROSOFT WORD 2010 - … edukacija/web_dizajn/Web...5.1.3.Razumjeti strukturu CSS...