Internet programiranje Nastavni materijali

Elektrotehniki fakultet Osijek Kneza Trpimira 2b 31000 Osijek www.etfos.hr

1. UVOD U HTML
Osnovni jezik koji koristimo za izradu web stranica je HTML (eng. HyperText Mark-up Language). On naim preglednicima (eng. browser) govori sve o sadraju i izgledu neke web stranice, kako bi je preglednik mogao pravilno prikazati. HTML je jezik kojim stranice razgovaraju s naim web preglednicima, ali i jezik koji bi svaki webmaster, odnosno izraiva web stranica, trebao znati. Postoje mnogi alati koji nam omoguavaju izradu web stranica i bez najosnovnijeg poznavanja HTML koda. Ti alati automatski generiraju HTML kd, pratei pritom upute koje korisnik zadaje preko manje ili vie jednostavnog korisnikog suelja. Rije je o tzv. vizualnom ureivanju, gdje korisnik odabirom odreenih alata stvara, odnosno ureuje web stranicu koja mu se u realnom vremenu prikazuje onako kako e se kasnije prikazivati u nekom od preglednika. Za razliku od runog pisanja koda, koje zahtijeva tek program za ureivanje teksta (npr. Notepad), vizualno ureivanje ima nekoliko prednosti. Osim to korisnik odmah vidi sadraj svoje web stranice, program sm generira potreban kd, pa je mogua pojava greaka u pisanju koda svedena na minimum. Alati koji nude vizualno ureivanje web stranica najee nude i mogunost runog pisanja koda. Meu najpopularnijim alatima za vizualnu izradu web stranica su Microsoftov FrontPage i Macromedijin Dreamweaver. Runo pisanje koda u programu za obradu teksta prilino je neugodno, ve zbog same injenice da korisnik ne vidi to zapravo radi. Ono to zapravo radi jest kodira naslijepo. Nakon dopisivanja nekoliko novih linija koda korisnik bi trebao prekinuti rad i svoj uradak pregledati u web pregledniku. Taj proces nije samo zamoran, ve moe biti i prilino frustriraju, jer su greke u runom pisanju koda gotovo neizbjene.

S druge pak strane, poznavanje HTML-a neophodno je za svako imalo ozbiljnije izraivanje web stranica. ak i programi poput Dreamweavera i FrontPagea imaju svoje nedostatke. Tako ponekad dodaju nepotrebne linije koda, koje samo poveavaju vrijeme uitavanja naih stranica, a ponekad ono to elimo dodati jednostavno nije dostupno putem korisnikog suelja. Svoje stranice vjerojatno neete u cijelosti pisati runo, ali svakako ete doi do trenutka kada ete neto jednostavno morati sami dopisati ili ispraviti. Tada e vae znanje HTML-a biti od velikog znaaja.

1.1. to je HTML
HyperText Markup Language ili skraeno HTML, jezik je za, kako mu i samo ime kae, oznaavanje hipertekstualnih dokumenata. Definirao ga je 1993. Sir Timothy Berners-Lee, danas ravnatelj World Wide Web Konzorcija (W3C). W3C je organizacija koja brine o standardizaciji web tehnologija i razvoju Weba. Kao i svaki drugi jezik, i HTML je s vremenom mijenjan i obogaivan, pa je tako posljednja verzija (4.01) objavljena 24. prosinca 1999. Hipertekstualne dokumente danas najee susreemo na Internetu, prvenstveno na Webu. Oni se od obinih dokumenata razlikuju po tome to sadre hiperveze (hiperlinkove) kojima su povezani s drugim (hipertekstualnim) dokumentima. Svaku web stranicu koja sadri barem jednu hipervezu ubrajamo u skupinu hipertekstualnih dokumenata. Prethodno smo spomenuli da je HTML jezik kojim web preglednicima opisujemo izgled naih web stranica, kako bi ih oni mogli ispravno prikazati. HTML nije programski jezik niti su ljudi koji ga koriste programeri. Njime ne moemo izvriti nikakvu zadau, pa ak ni najjednostavniju operaciju zbrajanja ili oduzimanja dvaju cijelih brojeva. On slui samo za opis naih hipertekstualnih dokumenata i za nita vie od toga. O World Wide Webu i HTML standardima moete saznati vie na stranicama W3 Konzorcija! http://www.w3c.org/

Na ovom predavanju upoznat ete HTML 4.01. To je posljednja verzija ovoga jezika prije predstavljanja XHTML-a, o kojem moete vie saznati na stranicama W3 Konzorcija. Predstavit emo vam i neke oznake i atribute koji nisu dio HTML 4.01 standarda, ali su u irokoj uporabi i bit e vam od velike koristi, barem dok ne upoznate stilove (CSS). Iako se u poetku moe uiniti malo nejasnim, vidjet ete da je HTML zapravo vrlo jednostavan jezik. Potrebno je samo nauiti razmiljati na tom novom jeziku, kao to su nam uvijek profesori stranih jezika govorili. Isto pravilo vrijedi i ovdje, a nema padea, lanova, nepravilnih glagola i svega ostaloga to najee uenje stranog jezika ini kompliciranim.

1.2. Pravila pisanja u HTML-u

Za poetak, da se rijeimo eventualnog straha, otvorite svoju omiljenu web stranicu i zavirite u njen kd. Koristite li Internet Explorer, kliknite desnom tipkom na pozadinu stranice i odaberite View Source (ili "Prikai izvor", za korisnike hrvatske verzije operacijskog sustava). Korisnici Firefoxa odabrat e View Page Source. I u ostalim preglednicima postupak je slian. Ono to vidite je HTML kd koji opisuje vau omiljenu stranicu. Sloit ete se da vie nije ni priblino privlana kao onda kada je prikazana u web pregledniku. A sad kada ste se suoili sa strahom, moram vas uvjeriti da nije ni priblino sloeno kako izgleda. HTML kd sastoji se od oznaka (eng. tag) i njihovih atributa, a pie se po pravilu: <oznaka atribut="vrijednost"> Tekst koji se prikazuje na stranici. </oznaka> Oznake i atributi imaju unaprijed zadana imena koja moramo nauiti. Na primjer, oznaka koja opisuje font kojim je pisan tekst nosi ime <font>, a atribut kojim definiramo boju tog fonta nosi naziv color. Tako emo "Tekst koji se prikazuje na stranici" obojiti u crveno dodavanjem sljedeeg koda:

Slika 1. Crveni tekst. U web pregledniku vidjet emo samo tekst koji se nalazi unutar poetnog i zavrnog dijela oznake <font>, dok sm kd koji opisuje izgled teksta nee biti prikazan.

VANO JE UPAMTITI: Sve to se nalazi unutar neke oznake poprima njezina svojstva. Veina oznaka ima svoj poetni dio, npr. <i>, i zavrni dio - </i>. Ova e oznaka, primjerice, ukositi sav tekst koji ona omeuje (italic). U zavrnom dijelu oznake ispred naziva oznake stoji znak /. Nije bitno piemo li kd velikim ili malim slovima, no preporuljivo je pisati sve malim slovima. Kd cijele stranice moemo pisati i u jednom jedinom retku, niui oznake jednu iza druge. No, bolje je pisati ih tako da kd bude to pregledniji, jer emo se sigurno kasnije morati na njega vratiti i poneto izmijeniti. Vrijednosti atributa uvijek stavljamo pod navodnike, npr. color="red" Ako neka oznaka sadri vie atributa, nije vano kojim redoslijedom su oni napisani. Atribute uvijek odvajamo razmakom. <font size="2" color="red"> Oznake omeuju sve elemente naeg dokumenta, pa tako i jedna drugu. Ako u kodu imamo dvije ili vie oznaka, jedna se mora nalaziti unutar druge. Na primjer:

Slika 2. Ukoeni tejst. I za kraj neto nevezano za sm HTML kao jezik - imena htm(l) dokumenata smiju sadravati iskljuivo znakove engleske abecede i ne smiju sadravati sistemske znakove (*, ?, /, : i sl.), a preporuljivo je izbjegavati i razmake u imenima dokumenata. Umjesto njih koristite - ili _. Na primjer moja_stranica.htm ili moja-stranica.htm.

1.3. Osnovni HTML kod

Svaki HTML dokument sastoji se od zaglavlja i tijela. U zaglavlju dokumenta definiramo elemente koji se ne prikazuju na samoj stranici. Izmeu ostalog, ovdje definiramo naslov dokumenta, koji se prikazuje u naslovnoj liniji preglednika.

Slika 3. Naslovna linija preglednika. Sve ostalo, sav sadraj koji se prikazuje na stranici, smjetamo u tijelo dokumenta. Osnovni HTML kd sastoji se od ukupno etiri razliite oznake: <html> Oznaava poetak i kraj HTML dokumenta, pa se tako nalazi na samom poetku i na samom kraju dokumenta. <head> Oznaava zaglavlje dokumenta. Sadraj zaglavlja nije vidljiv u pregledniku. <title> Nalazi se u zaglavlju dokumenta. Nema atributa, a tekst koji omeuje definira kao naslov dokumenta koji je vidljiv u naslovnoj liniji preglednika. <body> U tijelu dokumenta smjeten je sadraj koji se prikazuje u pregledniku.

Sve ove oznake imaju svoj poetni i zavrni dio, pa osnovni HTML kd izgleda ovako: <html> <head> <title>Naslov dokumenta</title> ZAGLAVLJE </head> <body> Ovo je minimalni HTML dokument </body> </html> Otvorite novi dokument u programu koji ste odabrali za pisanje koda i prepiite osnovni HTML kd. Spremite datoteku kao osnovni_kod.htm. TIJELO

2. TEKSTUALNI ELEMENTI
Gotovo bilo koje web sjedite teko je ili ak nemogue zamisliti bez tekstualnih elemenata. U ovom emo poglavlju pokazati kako se oblikuje tekst pomou HTML oznaka. Predstavit emo vam oznake za ureivanje teksta koje se danas najee koriste.

2.1. Definiranje kodne stranice

Vjerojatno ste barem jedanput u svojoj surferskoj karijeri naili na stranicu na kojoj se hrvatski znakovi nisu prikazivali ispravno. Do toga dolazi kada kodna stranica nije (ispravno) definirana, pa se za prikaz teksta koristi pogrean set znakova. Piete li tekst na svojim stranicama na hrvatskom jeziku, bit e vam potrebni znakovi poput , , , i , kojih u engleskoj abecedi nema. Umjesto njih prikazat e se neki drugi znakovi i va tekst uiniti teko itljivim. Kodnu stranicu za srednjoeuropske jezike (u koje spada i hrvatski) definirat emo dodavanjem meta oznake unutar zaglavlja naeg dokumenta. Meta oznakama opisujemo nau stranicu ili dajemo odreene upute preglednicima i pretraivaima. U ovom sluaju rei emo korisnikovu pregledniku da koristi set znakova koje nalazimo u srednjoeuropskim jezicima.

Vie o meta oznakama govorit emo u poglavlju meta oznake. Zasad je dovoljno da znate da meta oznake nemaju zavrni dio i da ih opisuju dva atributa. Meta oznaka kojom emo definirati nau kodnu stranicu izgledat e ovako: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> ili ovako: <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> Prvo, iso-8859-2, predstavlja meunarodni standard, dok je windows-1250 Microsoftov standard. Editor koji koristite za pisanje koda mora podravati izabranu kodnu stranicu. Ako koristite Simply HTML, kodnu stranicu definirajte kao windows-1250. Otvorite novu datoteku i uz osnovni HTML kd definirajte i kodnu stranicu. Pripazite da se meta oznaka nalazi u zaglavlju dokumenta. Spremite datoteku kao uredjivanje_teksta.htm.

2.2. Ureivanje teksta

Podsjetimo se da se sav sadraj naih stranica koji se prikazuje u web pregledniku nalazi u tijelu dokumenta, unutar oznake <body>. Napiite stoga neki tekst unutar te oznake, spremite datoteku i provjerite kako taj va tekst preglednik prikazuje. Na tekst emo ponekad htjeti podcrtati, ukositi ili podebljati. To postiemo tako da eljenu rije ili vie rijei omeimo oznakama <u> za podcrtavanje (underline), <i> za ukoavanje (italic) i <strong> za podebljavanje. Tekst moemo podebljati i oznakom <b> (bold).

Primijetit ete da se tekst koji ste napisali prikazuje napisan fontom Times New Roman (Windows korisnici) veliine dvanaest tipografskih toaka (12 pt) i to u crnoj boji. Tekst u kodu niste dodatno opisali, pa je u pregledniku poprimio ta unaprijed zadana obiljeja. elimo li promijeniti izgled naeg teksta, morat emo mu promijeniti svojstva oznaavajui ga odgovarajuim oznakama. Nain prikaza teksta mijenjamo oznakom <font>. Sav tekst koji omeimo oznakom <font> poprimit e atribute te oznake. elimo li, primjerice, promijeniti boju teksta, u oznaci <font> definirat emo vrijednost atributa color.

Veliina fonta (size) poprima vrijednosti od 1 do 7, gdje je jedan najmanja, a sedam najvea veliina. Ovo su standardne veliine koje odgovaraju sljedeim veliinama u tipografskim tokama: 1 = 8 pt 2 = 10 pt 3 = 12 pt 4 = 14 pt 5 = 18 pt 6 = 24 pt 7 = 36 pt Posebno moramo paziti pri definiranju vrste fonta (face), jer smijemo koristiti samo sistemske fontove, odnosno one fontove za koje smo sigurni da svaki posjetitelj ima instalirane na svom raunalu. To su (na operacijskom sustavu Windows):

Arial Courier / Courier New Comic Sans Georgia Tahoma Trebuchet Times New Roman Verdana Symbol Webdings Wingdings

Arial Courier / Courier New Comic Sans Georgia Tahoma Trebuchet Times New Roman Verdana

Definiramo li neki drugi font koji na posjetiteljevu raunalu moda nije instaliran, na tekst bit e prikazan kao da je pisan fontom Times New Roman. Prepiite gornji kd u datoteku uredjivanje_teksta.htm. Zatim promijenite font u "Tahoma", veliinu u "3", a boju teksta u zelenu. Primijetite da se oznake meusobno omeuju!

2.3. Naslovi
HTML 4.01 nam doputa definiranje naslova u est razina i to koritenjem oznake <hn>, gdje je n broj od 1 do 6. Tako emo, na primjer, glavni naslov definirati oznakom <h1>, a podnaslove oznakama od <h2> do <h6>.

Obratite panju na prikaz naslova. Naslovi se, ovisno o njihovoj vanosti koju definiramo brojem uz slovo "h" (eng. heading), prikazuju u razliitim veliinama. Naslovi s najmanjim brojem su najvei, a oni s najveim - najmanji. Takoer, naslovi se prikazuju masno otisnuti, iako to nismo posebno definirali oznakom <strong>. Primjetit ete i da se naslovi automatski vertikalno vizualno "odvajaju" od ostatka teksta. Atribut kojim se najee mijenjaju svojstva naslova je align, a moe poprimiti vrijednosti left, right i center. U skladu s tim, naslov e biti pozicioniran lijevo, desno ili u sredinu.

U dokumentu uredjivanje_teksta.htm definirajte est naslova razliitih veliina. Provjerite kako se naslovi prikazuju u web pregledniku.

2.4. Prijelomi teksta

Pokuamo li se unutar HTML-a "prebaciti" u novi red, na pokuaj nee biti vidljiv u web pregledniku. Kao to smo spomenuli, kd cijele stranice moe biti napisan i u jednom jedinom retku. Svi nai razmaci u tekstu unutar HTML-a u pregledniku se prikazuju kao jednostruki, pa ak i kada ih unesemo nekoliko (desetaka), dok se prelasci u novi red ne vide. Novi redak elimo li prijei u novi redak, na mjestu gdje elimo prekid dodat emo oznaku <br> (eng. break). Ta oznaka najee ne dolazi s nekim od atributa niti ima zavrni dio.

Odlomak Nae tekstove moemo posloiti u odlomke ili paragrafe oznakom <p>. Oznaka kojom definiramo odlomak najee dolazi uz atribut align, kojim definiramo poloaj teksta unutar tog odlomka. Vrijednosti atributa mogu biti left, right, center i justify, ovisno o tome elimo li tekst poravnati ulijevo ili udesno, centrirati ga ili poravnati s obje strane.

Non-breaking Space Kako biste prisilili preglednik da prikae vie uzastopnih razmaka, umjesto razmaka unutar HTML koda moete napisati poseban znak, odnosno skup znakova, koji ga zamjenjuju - &nbsp;. Poredate li nekoliko na taj nain napisanih razmaka jedan iza drugoga, svaki od njih bit e vidljiv u web pregledniku. Koritenjem ove vrste razmaka moete izbjei i neeljeni prijelom teksta izmeu dviju ili vie rijei.

Predefinirani tekst Ponekad nam je potrebno da se tekst napisan unutar html koda jednostavno prikazuje onako kako je napisan - sa svim razmacima i prijelazima u novi red. To emo postii koritenjem oznake <pre>. Sve to omeimo ovom oznakom izgledat e upravo onako kako izgleda unutar samog koda. Ova oznaka takoer e promijeniti font u Courier.

U dokumentu uredjivanje_teksta.htm napiite nekoliko reenica o svome gradu. Oblikujte tekst kreirajui poglavlja i koristei prelazak u novi redak.

2.5. Liste
Numerirane liste Koristimo ih kada elimo nabrojiti pobrojane ili numerirane pojmove. Da bismo je definirali, bit e nam potrebne dvije oznake. Jedna kojom emo definirati poetak i kraj liste, a druga kojom emo definirati svaki element liste. Poetak i kraj numerirane liste definirat emo oznakom <ol> (eng. ordered list), dok emo elemente liste definirati oznakom <li> (eng. list item), koju koristimo za svaki novi element liste:

elimo li promijeniti nain numeriranja elemenata liste, koristit emo atribut type. Kod numerirane liste vrijednost atributa type moe biti: 1 - arapski brojevi I - rimski brojevi i - "mali" rimski brojevi A - slova a - mala slova

Atribut type moemo primijeniti na cijelu listu <ol> ili na svaki element liste zasebno <li>:

Kreirajte listu vaih pet omiljenih filmova. Definirajte prikaz numeracije elemenata liste rimskim brojevima. Spremite datoteku pod imenom liste.htm. Nenumerirane liste Nenumeriranu listu definirat emo na isti nain kao i numeriranu, samo emo umjesto oznake <ol> koristiti oznaku <ul> (eng. unordered list). Vrijednosti atributa kojima moemo izmijeniti izgled nae nenumerirane liste su: circle, disc i square. I ovdje atribut type moemo primijeniti i na cijelu listu i na svaki element liste zasebno.

U datoteku liste.htm dodajte listu omiljenih pjesama. Svakom elementu liste izmijenite nain prikaza atributom type.

Definicijske liste Definicijske liste malo su sloenije, pa je za njihovu definiciju potrebna i jedna oznaka vie. Poetak i kraj definicijske liste definirat emo oznakom <dl> (eng. definition list), pojam koji definiramo oznakom <dt> (eng. definition term), a samu definiciju oznakom <dd> (eng. definition data).

3. HIPERVERZE (HIPERLINKOVI)
Hiperveze ili hiperlinkovi (eng. hyperlink, link) elementi su koji ine obine tekstualne dokumente hipertekstualnima. Slue za povezivanje tekstualnih dokumenata (web stranica) s raznim sadrajima unutar ili izvan web sjedita. Hiperveze tako mogu voditi na bilo koju vrstu dokumenta neki drugi (hiper)tekstualni dokument (txt, doc, html...), sliku (jpg, gif, png...), slikovni zapis (wmv, rm, mov...), zvuni zapis (wav, mp3, ra...), komprimiranu (zip, rar...) ili izvrnu datoteku (exe) i slino. Takoer mogu voditi i na adresu elektronike pote (e-mail adresu), kao i na mjesto unutar stranice (knjika oznaka, eng. bookmark). Hipervezu oznaavamo oznakom <a>, to dolazi od engleske rijei anchor (sidro). Ona ima i svoj zavrni dio, </a>, i atribute kojima definiramo njezina svojstva. Najei atributi su href, name, target i title. href (eng. hyperlink reference) definira kamo hiperveza vodi - na neki dokument ili datoteku, adresu e-pote ili na mjesto unutar dokumenta.

Ne zavrava li adresa imenom neke odreene datoteke (npr. kontakt.htm), na kraj adrese uvijek dodajemo znak "/". U protivnom nepotrebno optereujemo posluitelj, koji ne zna odmah odnosi li se na zahtjev na datoteku ili mapu. href="http://www.carnet.hr" href="http://www.carnet.hr/"

name koristimo za definiranje knjike oznake (vie o njima u poglavlju Knjike oznake), mjesta unutar dokumenta (eng. anchor). Microsoft u FrontPage-u knjike oznake zove "bookmarks". <a name="vrh">Sadraj</a> target odreuje mjesto u kojem se hiperveza otvara. To moe biti jedan od okvira, novi prozor i slino.

title opisuje hipervezu, a on se u obliku savjeta (eng. tip) prikazuje kada pokaziva mia postavimo iznad hiperveze. Vrlo je koristan slijepim osobama, jer njihovi preglednici tada itaju i opis hiperveze (npr. kod slikovnih hiperveza).

3.1. Lokalne hiperverze

Lokalnim hipervezama nazivamo one koje vode na resurse unutar naeg web sjedita. Njih najee definiramo relativnim vrijednostima atributa href. Vrijednosti mogu biti relativne u odnosu na trenutano otvorenu stranicu ili u odnosu na korijen (eng. root) naeg web sjedita. Uzmimo za primjer dolje prikazano web sjedite.

U odnosu na trenutano otvorenu stranicu Korijenska mapa web sjedita je www.carnet.hr. U njoj se nalaze svi ostali dokumenti i mape. elimo li kreirati vezu koja sa stranice index.htm vodi na neku drugu stranicu unutar korijenske mape, uinit emo to ovako: <a href="kontakt.htm">Kontakt</a> Gornja veza vodit e na stranicu kontakt.htm, koja se nalazi u istoj mapi kao i stranica na kojoj se trenutano nalazimo (index.htm). Tekst koji omeuje ova oznaka, "Kontakt", postat e polazite hiperveze. elimo li, pak, kreirati vezu koja vodi na resurs unutar neke mape, moramo definirati putanju do tog resursa, navodei i mape u koje moramo "ui" kako bismo do njega doli. Tako emo, ako kreiramo vezu iz korijenske mape na stranicu pero.htm, definirati putanju na sljedei nain: <a href="zaposlenici/pero.htm">Pero Peri</a> Nalazimo se na stranici pero.htm u mapi "zaposlenici". Kako bismo "izali" iz te mape i vratili se u korijensku mapu, kreirajui pritom vezu na stranicu index.htm, koristit emo oznaku "../".

<a href="../index.htm">Pero Peri</a> Oznaku "../" koristimo svaki puta kada "izlazimo" iz trenutane mape. Da smo se u gornjem primjeru nalazili u mapi "stari", za povratak u korijensku mapu koristili bismo "../../" i naziv dokumenta na koji veza vodi. <a href="../../index.htm">Pero Peri</a> Postoji jo jedna mogunost - izlaz iz trenutane mape (npr. zaposlenici) i ulaz u neku drugu mapu (npr. suradnici). U tom sluaju koristit emo kombinaciju gore navedenih koraka: <a href="../suradnici/ivana.htm">Ivana Ivi</a> Hiperveze mogu voditi na bilo koju vrstu datoteke. Ako web preglednik nije u mogunosti prikazati datoteku unutar svog prozora, ponudit e posjetitelju njezino preuzimanje (eng. download). U odnosu na korijen web sjedita Odluimo li definirati hipervezu relativnu u odnosu na korijensku mapu web sjedita, u svim sluajevima emo je zapoeti znakom "/", a ostatak navesti kao da se nalazimo u korijenskoj mapi. Tako nikada neemo imati potrebu koristiti "../", jer iz korijenske mape ne moemo (niti trebamo) izai. Primjer veze sa stranice index.htm: <a href="/suradnici/ivana.htm">Ivana Ivi</a> Primjeri veza sa stranice ivana.htm: <a href="/index.htm">Naslovnica</a> <a href="/zaposlenici/pero.htm">Pero Peri</a> U novom dokumentu kojeg ete nazvati prvi_zadatak.htm kreirajte hiperveze na sve dosad napravljene vjebe.

3.2. Globalne hiperverze

Kada neka hiperveza vodi na resurs izvan naeg web sjedita, nazivamo je globalnom hipervezom. Za definiranje globalnih hiperveza koristimo apsolutne vrijednosti atributa href, koje uz adresu resursa moraju sadravati i oznaku protokola koji koristimo kako bismo doli do eljenog resursa. Ranije smo spomenuli neke od protokola kojima se sluimo na Internetu - HTTP nam najee omoguuje dobavljanje web stranica, a FTP bilo koju vrstu datoteke. Tako emo za kreiranje veza na neku drugu stranicu izvan naeg web sjedita koristiti HTTP, pa emo to definirati i u naoj hipervezi:

Izostanak oznake protokola znai neispravnu hipervezu. Umjesto web stranice koja se nalazi na adresi www.carnet.hr preglednik e zatraiti nepostojei dokument www.carnet.hr unutar naeg web sjedita! Kada kreiramo vezu na neko drugo web sjedite, najee elimo posjetitelja zadrati na svojim stranicama, ali mu istovremeno omoguiti i dobavljanje informacija s tuih. Do sada su se sve hiperveze koje smo definirali otvarale u istom prozoru web preglednika, pa bi to naeg posjetitelja automatski otjeralo s naih stranica. Definirat emo zato hipervezu koja e se otvoriti u novom prozoru. Za otvaranje hiperveze u novom prozoru web preglednika, naoj definiciji hiperveze dodat emo atribut target, koji e nositi vrijednost "_blank" (prazan).

Atribut target moe poprimiti jo neke vrijednosti, no njih koristimo kada radimo s okvirima. U dokumentu prvi_zadatak.htm kreirajte dvije globalne hiperveze. Jedna od njih neka se otvara u novom prozoru. Spremite datoteku.

3.3. Knjike oznake

Knjike oznake (eng. anchor) oznaavaju (imenuju) odreeni dio dokumenta. Najee se koriste u duim dokumentima, koji na svom vrhu imaju sadraj. Klikom na poglavlje u sadraju, dokument se pomakne na dio gdje to poglavlje poinje. Da bismo koristili knjike oznake, moramo ih prvo definirati. Drugim rijeima, moramo imenovati dijelove dokumenta. To inimo uporabom name atributa oznake <a>. <a name="vrh">Sadraj</a> Sadraj se nalazi na vrhu stranice, pa smo taj dio nazvali "vrh". Definicija hiperveze koja e voditi sa dna na vrh stranice izgledat e ovako (obratite panju na znak "#"!): <a href="#vrh">Povratak na Sadraj</a> Moemo definirati i hipervezu koja vodi na knjiku oznaku neke druge stranice. To inimo tako da iza adrese dokumenta dodamo naziv knjike oznake. Na primjer: <a href="http://www.tv.hr/program.htm#petak"> Raspored programa za petak </a>

Ako stvorimo hipervezu koja vodi na nepostojeu knjiku oznaku, web preglednik nee prijaviti greku. Uitat e se stranica od vrha, kao da knjika oznaka u hipervezi i nije definirana.

3.4. Hiperverze na adresu e-pote

Osim pomou kontakt obrazaca ijoj emo se izradi posvetiti u poglavlju obrasci, posjetiteljima moemo omoguiti da nas kontaktiraju e-potom postavljanjem jednostavne hiperveze. Za definiranje hiperveze na adresu elektronike pote bit e nam potreban atribut href, a umjesto oznake protokola koristit emo oznaku "mailto:" ispred adrese e-pote na koju veza vodi. Klikom na hipervezu korisniku e se otvoriti prozor za pisanje poruke zadanog klijenta za slanje i primanje elektronike pote.

Kao i kod ostalih hiperveza, i ovdje moemo definirati njihov opis dodavanjem atributa title. elimo li pak definirati predmet poruke (eng. subject), uinit emo to tako da iza definirane adrese e-pote dodamo ?subject=Predmet poruke.

U dokumentu prvi_zadatak.htm, ispod do sada kreiranih hiperveza, kreirajte hipervezu na svoju adresu elektronike pote.

3.5. Slikovne hiperverze

Slikovne hiperveze definiramo tako da oznakom hiperveze omeimo sliku koju elimo pretvoriti u hipervezu, ba kao to kod "obinih" tekstualnih hiperveza omeujemo odabrani tekst.

Kao to vidimo u samom primjeru, oznaka kojom definiramo sliku na stranici je <img> (eng. image, slika). Atribut src (eng. source, izvor) je neizostavan, jer njime definiramo putanju i ime datoteke. U ovom primjeru naziv datoteke je logo.gif, a nalazi se u istoj mapi kao i stranica na kojoj se nalazi. Takoer vidimo i da naa slika ima rub u boji koji odgovara boji hiperveze. Neposjeena hiperveza imat e rub plave boje, posjeena ljubiaste, a aktivna crvene (ako nisu drugaije definirane). Da bismo izbjegli prikazivanje ruba oko slike koja predstavlja hipervezu, moramo joj definirati rub atributom border, te njegovu vrijednost postaviti na "0".

Vie o atributima oznake <img> govorit emo u poglavlju multimedijalni elementi Mogue je odrediti i jedan ili vie dijelova neke slike, pri emu je svaki taj dio polazite hiperveze. Tako moemo definirati vie razliitih hiperveza na jednoj slici, no o tome vie u sljedeoj lekciji.

3.6. Slikovne mape

Slikovnim mapama definiramo dio ili vie dijelova slike koji postaju polazitima hiperveza. Na ovoj slici, primjerice, imamo definirane tri hiperveze. Isprobajte ih!

Klikom na dio slike na kojem se nalazi plavi kvadrat otii ete na stranice CARNeta, crveni krug odvest e vas na stranice Edupointa, a uta zvijezda na slubene stranice Lijepe nae. Definicija ove slike sadri jedan novi atribut, a izgleda ovako: <img border="0" src="images/mape.png" width="356" height="88" usemap="#mapa"> Novi atribut je, naravno, usemap. Njime definiramo mapu u kojoj su opisana podruja slike koja su polazita hiperveza. Obratite pozornost na znak # ispred imena mape. Postoje tri vrste podruja koja moemo definirati: kvadrat, krug i poligon. Njihove koordinate opisane su u mapi, koju definiramo oznakom <map>: <map name="mapa"> <area shape="rect" coords="9, 37, 106, 66" target="_blank" alt="www.CARNet.hr" href="http://www.carnet.hr/"> <area shape="circle" coords="185, 48, 35" target="_blank" alt="Edupoint" href="http://edupoint.carnet.hr/"> <area shape="polygon" coords="291, 27, 303, 2, 316, 29, 346, 34, 324, 53, 329, 83, 304, 68, 277, 83, 283, 53, 263, 33" target="_blank" alt="www.hr" href="http://www.hr/"> </map>

Oznaka <map> dolazi uz atribut name kojim imenujemo svaku mapu na stranici. Unutar mape definiramo svako podruje na slici koje je polazite hiperveze. To inimo oznakom

<area> (eng. podruje). Ona nema svog zavrnog dijela, a uz atribute target i href, sadri i tri nova atributa: alt opisuje hipervezu, kao to je kod uobiajenih hiperveza opisuje atribut title. shape definira oblik podruja. Vrijednosti ovoga atributa mogu biti "rect" (pravokutnik), "circle" (krug) ili "polygon" (poligon). coords koordinate podruja na slici, koje definiramo na poseban nain za svaku vrstu podruja. Redoslijed definiranja podruja unutar mape nije bitan. No ako se definirana podruja preklapaju, prednost e imati ono podruje ije koordinate su u mapi prije definirane. Pri definiranju koordinata za sve vrste podruja vrijedi isto pravilo: ishodite koordinatnog sustava je gornji lijevi kut slike, gdje os x raste udesno, a os y prema dolje. Mjerna jedinica su, naravno, pikseli.

shape="rect" Koordinate kvadrata odreujemo tako da prvo definiramo gornju lijevu, a zatim donju desnu toku kvadrata. shape="circle" Krug e definirati koordinate sredita krunice, te njezin polumjer. shape="polygon" Izgled poligona definirat emo koordinatama svake njegove kljune toke. Koordinate toaka definiramo onim redoslijedom kojim njihovo spajanje ini na poligon.

Koordinate moete lako odrediti u mnogim programima za obradu grafike kao i pomou posebnih programa za odreivanje koordinata. I program Simply HTML vam omoguava vizualno kreiranje slikovnih mapa.

4. MULTIMEDIJALNI ELEMENTI
Sada kada imamo tekst, vrijeme je da nae stranice obogatimo i pokojom novom bojom, slikom ili ak zvukom. Nakon sljedeih nekoliko lekcija doista ete moi svoje web stranice uiniti multimedijalnima.

4.1. Definiranje boja

Dosad smo za promjenu boje elemenata u HTML-u koristili njihove nazive na engleskom jeziku, no broj tih naziva (pa tako i boja) podranih W3C standardom HTMLa 4.0 je tek esnaest (koriste se i mnogi drugi nazivi, no oni nisu dio standarda). U skladu s time, imena boja koja moemo koristiti su: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white i yellow. No boju u HTML-u moemo definirati i posebnim kodom. Naime, svaka boja ima svoj kd koji se temelji na RGB modelu, gdje R predstavlja zastupljenost crvene (eng. red), G zelene (eng. green), a B plave boje (eng. blue), iskazanu brojem u rasponu od 0 do 255, a pisanu u heksadecimalnom sustavu (00 - FF). Model po kojemu piemo HTML kd neke boje izgleda ovako: #RRGGBB Tako e, primjerice, crna imati minimalnu zastupljenost svih triju boja RGB modela, pa e njezin kd biti #000000. Bijela e, pak, biti maksimalno zastupljena svim trima bojama, pa e njezin kd biti #FFFFFF. U skladu s tim pravilom, kd crvene boje bit e #FF0000, plave #0000FF, zelene #00FF00, ute #FFFF00, itd. Sivi tonovi bit e jednako zastupljeni svima trima bojama, pa e jedna od nijansi tamno-sive biti #313131, dok e svijetlo siva biti npr. #CECECE. Otvorite dokument uredjivanje_teksta.htm i koristei kodove boja izmijenite boju svake rijei u prvoj reenici teksta o vaem gradu.

4.2. Ureivanje stranice

Pokazali smo kako promijeniti boju teksta na stranici. No, neke promjene mogue je definirati i samo jedanput. Te promjene odnose se na boju teksta i boju hiperveza. Zadana boja teksta, kao to smo vidjeli kada smo pisali tekst, je crna. Znamo i to da su zadane boje hiperveza plava, ljubiasta i crvena, ovisno o tome radi li se o vezi, ve posjeenoj vezi ili o aktivnoj vezi. Te unaprijed zadane boje moemo izmijeniti dodavanjem odgovarajuih atributa oznaci <body>. Vrijednosti ovih atributa su boje, odnosno kodovi boja. Atributi su sljedei: text definira boju teksta na stranici link definira boju hiperveza vlink definira boju posjeenih hiperveza alink definira boju aktivnih hiperveza <body text="#00FF66" link="#3300FF" vlink="#FF0099" alink="#123456">

Oznaka <body> moe sadravati jo neke atribute, od kojih su najpopularniji: bgcolor definira boju pozadine stranice background definira sliku u pozadini stranice

topmargin definira gornju marginu stranice leftmargin definira lijevu marginu stranice Primjer vrijednosti koje poprimaju ovi atributi: <body bgcolor="#838744" background="slika.gif"

topmargin="0" leftmargin="20"> Atributi topmargin i leftmargin poprimaju vrijednosti koje oznaavaju broj piksela izmeu ruba stranice i sadraja. Atribut background sadri putanju do slike (ako postoji) i puni naziv datoteke. Izmijenite boju hiperveza i pozadine u datoteci prvi_zadatak.htm. Boja pozadine neka bude crna, boja veze #CC0000, aktivne veze #FF3300 a boja posjeene veze #330099.

4.3. Dodavanje slika

U poglavlju slikovne hiperverze objasnili smo da slike definiramo oznakom <img> i neizostavnim atributom src, koji sadri putanju i naziv datoteke slike. <img src="slika.gif"> Oznaku <img> mogu opisivati jo neki atributi, od kojih su najei: border debljina ruba oko slike. Vrijednost oznaava broj piksela. width irina slike definirana u pikselima (npr. "100") ili postocima (npr. "80%"). height visina slike definirana u pikselima ili postocima. alt alternativni tekst (opis slike) koji se prikazuje u preglednicima koji ne podravaju prikaz slika ili ako slika ne postoji. Isti tekst prikazuje se u obliku savjeta (eng. tip) kada preko slike prijeemo pokazivaem mia. align poloaj slike u odnosu na tekst. Najee definirane vrijednosti su "left" i "right", a ovaj atribut prihvaa i "top", "middle" i "bottom". hspace horizontalni razmak slike od teksta ili nekog drugog elementa na stranici iskazan u pikselima.

vspace vertikalni razmak slike od teksta ili nekog drugog elementa na stranici iskazan u pikselima.

4.4. Dodavanje zvuka

Iako to nikako nije preporuljivo, na web stranice mogue je dodati i pozadinsku glazbu ili zvuk. Izmeu ostalih, podrane su vrste datoteka s ekstenzijama WAV, MID (Midi), RA(M) (Real Audio Media), AIF(F) (Audio Interchange File Format), SND i AU. Oznaka kojom definiramo pozadinski zvuk nema svoj zavrni dio, a upisujemo je unutar zaglavlja HTML dokumenta. Njezino ime je <bgsound> (eng. background sound), uz obavezni atribut src, kojim definiramo izvor zvunog zapisa. Vano je napomenuti da je ova oznaka specifina za Internet Explorer i kao takva nije dio HTML standarda. Ovo je ujedno i nain na koji FrontPage definira pozadinski zvuk na stranicama. Pozadinskom zvuku moemo definirati broj ponavljanja i to tako da atributu loop pridodamo odreenu vrijednost. Ako ne elimo da se pozadinski zvuk ponavlja, vrijednost atributa bit e "0". elimo li da se zvuk beskonano ponavlja, vrijednost atributa loop bit e "-1". <bgsound src="sound.wav" loop="0">

5. TABLICE
Jo uvijek jedan od najpopularnijih naina rasporeivanja sadraja na stranicama jest pomou tablica. Iako ta metoda ima svojih nedostataka, zbog svoje jednostavnosti i liavanja potrebe za poznavanjem CSS-a (stilova), tablice ete nai na veini stranica. tovie, teko ete pronai stranicu na kojoj sadraj nije rasporeen pomou tablica. Ljepota tablica je i u tome to zapravo uope ne moraju biti vidljive. Dovoljno je vrijednosti debljina rubova tablice staviti na "0". I tako, pametnim rasporedom elija tablice, moemo svoje tekstove, slike, navigaciju i sve ostalo to ini nau stranicu, rasporediti kako god elimo.

5.1. Izrada tablice

Svaku tablicu definiraju najmanje tri HTML oznake. Svaka od njih ima svoj poetni i zavrni dio. Tako <table> oznaava poetak i kraj tablice, <tr> redak tablice (eng. table row), a <td> eliju unutar retka (eng. table data). U skladu s time, minimalna tablica izgleda ovako:

U ovom primjeru definirali smo debljinu rubova tablice atributom border, jer u protivnome tablica ne bi bila vidljiva i na tekst izgledao bi kao da se u kodu nalazi samo tekst (bez tablice). U novom dokumentu definirajte tablicu i vrijednost atributa border postavite na "0" ili u potpunosti uklonite taj atribut. Dokument spremite pod imenom tablice.htm. U datoteci prvi_zadatak.htm kreirajte vezu na tablice.htm.

5.2. Ureivanje tablice

Kako se tablica sastoji od tri elementa od kojih je svaki od njih podreen onom iznad, njezin izgled moemo definirati na tri razliite razine. Tako emo odreenim atributima postii razliit uinak ovisno o tome hoemo li ih dodati oznaci tablice, retka ili elije. Dodamo li, primjerice, atribut bgcolor oznaci tablice, promijenit emo pozadinsku boju cijele tablice. Ako ga dodamo unutar oznake retka, promijenit emo boju pozadine svih elija u tom retku. I naposlijetku, isti atribut moemo dodati i oznaci neke elije i tako promijeniti samo njezinu pozadinsku boju. Ureivanje na razini tablice align Atribut kojim definiramo poloaj tablice na stranici. Vrijednosti atributa mogu biti "left", "center" i "right". border Odreuje debljinu vanjskog ruba tablice u pikselima. Stavimo li vrijednost atributa na "0", rub tablice nee biti vidljiv. cellpadding Udaljenost sadraja elija od ruba elije iskazana u pikselima.

cellpadding="10" cellspacing Udaljenost izmeu elija iskazana u pikselima.

cellspacing="5"

height Visina. Vrijednost atributa moe biti iskazana u pikselima (npr. "400") ili u postocima (npr. "80%"). Ovaj atribut mogue je pridodati i tablici i eliji. width irina. Vrijednost atributa moe biti iskazana u pikselima ili u postocima. Ovaj atribut mogue je pridodati i tablici i eliji. <table border="1" width="200" height="200" cellspacing="5" cellpadding="3" align="right"> <tr> <td>Ovo je sadraj elije</td> </tr> </table> bordercolor Boja ruba tablice (ako nije border="0"). Ovaj atribut mogue je pridodati tablici, retku i eliji. bordercolorlight Kod 3D ruba tablice definira svijetliju stranu. Ovaj atribut mogue je pridodati tablici, retku i eliji.

Tablica s definiranim 3D rubom bordercolordark Kod 3D ruba tablice definira tamniju stranu. Ovaj atribut mogue je pridodati tablici, retku i eliji. bgcolor Boja pozadine. Ovaj atribut mogue je pridodati tablici, retku i eliji. background Definira pozadinsku sliku tablice. Ovaj atribut mogue je pridodati i tablici i eliji.

<table border="1" width="200" height="200" cellspacing="5" cellpadding="3"

bordercolor="#0099CC" background="images/uzorak1.jpg"> <tr> <td bgcolor="#FFFFFF" align="center"> Prva elija </td> <td background="images/uzorak2.jpg"></td> </tr> <tr> <td valign="bottom" align="right"> Druga elija </td> <td background="images/uzorak2.jpg"></td> </tr> <tr> <td valign="top"> Trea elija </td> <td background="images/uzorak2.jpg"></td> </tr> </table>

Ureivanje na razini elije align Definira horizontalno poravnavanje elemenata unutar elija. Moe poprimiti vrijednosti "left", "center", "right" i "justify". valign Definira vertikalno poravnavanje elemenata unutar elija. Moe poprimiti vrijednosti "top", "middle" i "bottom". Izmijenite tablicu iz prethodne vjebe tako da irinu tablice podesite na 50 %, a visinu na 100 piksela. Centrirajte tablicu. Definirajte 3D rub tablice i to tako da svijetla strana bude #666666 a tamna #333333. Obojite i pozadinu prvog retka u boju po izboru, a elemente u prvom retku centrirajte. Razmak unutar elije (cellpadding) podesite na 10 piksela.

6. UVOD U NAPREDNO KORITENJE HTML-a 6.1. Meta oznake

U zaglavlje dokumenta esto dodajemo meta oznake kojima opisujemo stranicu ili dajemo odreene upute preglednicima ili pretraivaima. Meta oznake najee sadre atribute http-equiv ili name i content. Ve smo spomenuli kako definiramo kodnu stranicu, a sada emo spomenuti jo nekoliko najeih meta oznaka. Jezik Svakoj stranici moemo dodati informaciju o tome na kojem je jeziku pisan sadraj koji se na njoj nalazi. Tu e informaciju koristiti web pretraivai kada korisnik zatrai pretragu stranica na odreenom jeziku.

Pretraga po jezicima na www.google.hr Kako bismo opisali jezik stranice, koristit emo atribute http-equiv i content. Vrijednost atributa http-equiv u tom e sluaju uvijek biti "Content-Language", a vrijednost atributa content odreujemo sami, ovisno o kojem se jeziku radi. Tako emo za hrvatski upisati "hr", za engleski "en" (za ameriki engleski "en-us") i slino. <meta http-equiv="Content-Language" content="hr">

Autor Sve sljedee meta oznake koje emo spomenuti koristit e atribute name i content. Jedan od tih atributa nosi ime (eng. name) Author, a sadraj (eng. content) nam govori o tome tko je autor stranice. Na taj se nain "nevidljivo" potpisujemo u samom kodu stranice.

<meta name="author" content="Vladimir terle">

Autorska prava Na isti nain kako potpisujemo autora stranice navodimo i vlasnika autorskih prava. Tako e atribut name poprimiti vrijednost "copyright", a atribut content podatke o vlasniku autorskih prava. <meta name="copyright" content=" 2006., Vladimir terle. Sva prava pridrana."> Kljune rijei Definiranje kljunih rijei koje opisuju sadraj stranice vrlo je vano, jer one pomau pretraivaima pri pretraivanju stranica. No, kako se ova mogunost esto zlorabi navoenjem kljunih rijei koje nemaju nikakve veze sa samom stranicom, mnogi pretraivai e ovu oznaku zanemariti i umjesto toga pretraivati rijei u tekstu koji se na stranici nalazi. Svejedno, svaka stranica iji autori ele to bolju poziciju na trailicama trebala bi imati definirane kljune rijei. Kljune rijei odvajamo zarezom.

<meta name="keywords" content="html, teaj, tecaj, carnet, online, osnove, webmastering"> Definiranje kljunih rijei moe biti i kontraproduktivno!
Vano je mudro odabrati kljune rijei koje najbolje opisuju sadraj vaih stranica. Odredite prioritete i navedite samo najvanije kljune rijei. Izbjegavajte openite izraze koji opisuju svaku drugu web stranicu na Internetu i nikako ne pretjerujte s brojem kljunih rijei.

Opis stranice Kao i kljune rijei, i opisom stranice se koriste neke trailice. To je onaj opis koji se nerijetko pojavljuje na stranici s rezultatima pretraivanja. <meta name="description" content="CARNet EduPoint, edukacijski centar Hrvatske akademske i istraivake mree - edupoint.CARNet.hr">

Opis stranice na www.altavista.com Ne zaboravite dodati meta oznake na sve stranice vaeg zavrnog zadatka!

6.2. Okviri
Okviri (eng. frames) nam pruaju mogunost istovremenog prikaza vie HTML dokumenata u prozoru preglednika. Svaki od tih dokumenata nalazi se u posebnom okviru, a raspored i veliinu okvira definiramo u posebnom dokumentu koji ih sve sjedinjuje.

Slika 6.1. Okvir. Ova metoda izrade web stranica ima nekoliko prednosti, ali i mnogo nedostataka. U vanije prednosti bismo mogli ubrojiti lake odravanje stranica i njihovo bre uitavanje. U nedostatke, pak, kompliciranije definiranje hiperveza meu stranicama (potrebno je npr. tono definirati u kojem se okviru otvara veza), vei broj dokumenata od kojih se svaka stranica sastoji, probleme s ispisom cijele stranice, probleme s pretraivaima (npr. ako pretraiva pronae samo jedan od nekoliko dokumenata koji ine stranicu i ponudi vezu samo na taj dokument, gubimo ostale dijelove stranice), probleme s adresama (u adresnoj liniji uvijek se nalazi adresa glavne stranice, a ne adresa skupa dokumenata koji ine trenutano otvorenu stranicu), mogue pojavljivanje neeljenog horizontalnog klizaa zbog prevelike irine sadraja unutar jednog ili vie okvira itd. Veinu, ako ne i sve ove nedostatke, mogue je ispraviti. No to zahtijeva mnogo vie vremena i truda nego "klasina" izrada web stranica.

Kod stranice koja definira poloaj i veliinu okvira vano je da NE koristimo oznaku <body>. Umjesto nje koristimo oznake <frameset> za definiranje seta okvira i <frame> za definiranje dokumenta koji se prikazuje u okviru. Stvorimo za poetak dokument koji definira poloaj i veliinu okvira.

Oznakom <frameset> i atributom rows ili cols definiramo broj i veliinu redaka ili stupaca okvira. Atributom rows definiramo broj i visinu okvira, a cols definira broj i irinu okvira. Vrijednosti ovih atributa moemo zadati u broju piksela ili postocima. Upiemo li za vrijednost atributa "*", visina/irina okvira bit e preostala irina/visina na stranici. Oznaka <frame> i njen atribut src definiraju dokument koji se u tom okviru prikazuje. Ova oznaka nema zavrni dio. Ostali vaniji atributi koji opisuju ovu oznaku su: frameborder poprima vrijednost 0 ili 1, ovisno o tome elimo li da okvir ima rubove ili ne. name imenuje okvir. Ime svakom okviru dodjeljujemo sami, a imenovanje okvira posebno je vano za kreiranje hiperlinkova.

noresize ne poprima vrijednosti, a onemoguava mijenjanje veliine okvira. Okvirima je u protivnom u pregledniku mogue promijeniti veliinu povlaenjem ruba okvira. scrolling moe poprimiti vrijednosti "yes", "no" ili "auto", to odreuje prikaz klizaa u okviru. Vrijednost "yes" ga prikazuje, "no" ne prikazuje, a "auto" kliza prikazuje po potrebi. U kodu stranice koja definira poloaj i veliinu okvira poeljno je definirati i sadraj koji se prikazuje ako posjetiteljev web preglednik ne podrava okvire. Taj sadraj unosimo unutar oznake <noframes>, a ondje definiramo i uobiajeno tijelo dokumenta <body>. <noframes> <body> <p>Ova stranica sadri okvire, no va ih web preglednik ne podrava.</p> </body> </noframes> Kada radimo stranicu s okvirima, hiperlinkove definiramo tako da uz atribut src, kojim odreujemo stranicu koja se otvara, koristimo i atribut target, koji sadri ime okvira u kojem se veza otvara. Umjesto imena okvira, kao vrijednost ovog atributa najee definiramo: _blank veza se otvara u novom prozoru preglednika. _self veza se otvara u istom okviru. _top veza se otvara u istom prozoru preglednika. Osim obinih okvira za ije koritenje je potrebno definirati njihov raspored na posebnoj stranici, moemo upotrijebiti i inline okvire. Njih dodajemo na stranicu poput bilo kojeg drugog elementa. Inline okvire definiramo oznakom <iframe> i opisujemo atributima: name imenuje inline okvir. Ime mu dodjeljujemo sami, kao i kod obinih okvira.

src definira dokument koji se prikazuje u inline okviru. height visina inline okvira definirana u pikselima ili postocima. width irina inline okvira definirana u pikselima ili postocima. align poloaj okvira na stranici. Vrijednosti koje ovaj atribut moe poprimiti su "left", "right" i "center". frameborder prikazuje ili skriva rubove okvira, ovisno o tome je li vrijednost atributa 1 ili 0. Tekst koji se prikazuje u preglednicima koji ne podravaju inline okvire definiramo unutar poetne i zavrne oznake inline okvira. <iframe name="ime" src="inline.htm" height="40%" width="778" align="center" frameborder="0"> Va web preglednik nije u mogunosti prikazati inline okvire. </iframe> Otvorite dokument prvi_zadatak.htm i na kraj dokumenta dodajte inline okvir unutar kojega e se otvarati zivotopis.htm. Visina okvira neka bude 300, a irina 500 piksela.

6.3. Slojevi
U poglavlju tablice spomenuli smo da su tablice jedan od najpopularnijih naina razmjetanja sadraja po stranici. Spomenuli smo i drugi nain, koji zahtijeva poznavanje stilova. Taj drugi nain je razmjetanje sadraja pomou slojeva. Slojevi, koje definiramo oznakom <div> (eng. division), logike su pregrade unutar dokumenta unutar kojih smjetamo razliite sadraje, a uporabom stilova (CSS) definiramo njihovu poziciju na stranici, izgled sadraja u njima i sl. Kako je za imalo ozbiljnije koritenje ovog elementa potrebno poznavanje stilova, mi emo spomenuti tek koritenje slojeva za poravnavanje elemenata na stranici. Atribut kojim opisujemo poloaj elemenata unutar sloja je align, a moe poprimiti vrijednosti "left", "right", "center" ili "justify".

6.4. Obrasci
Obrasce danas nerijetko susreemo ak i na osobnim web stranicama, i to najee kada vlasnici ne ele javno objaviti svoju e-mail adresu. Uz koliinu neeljene e-pote koju svakog dana primamo, takve odluke sasvim su razumljive. Za definiciju obrazaca koristimo oznaku <form>, a unutar njenog poetnog i zavrnog dijela dodajemo tekst obrasca i polja za unos podataka. Njih definiramo posebnim oznakama, koje emo kasnije upoznati. Zasad je samo vano znati da svakom elementu obrasca moramo dati ime, kako bi se unesena/odabrana vrijednost mogla pridodati varijabli istoga imena. To u praksi izgleda ovako: Imamo polje za unos teksta koje smo nazvali "posjetitelj". irinu polja podesili smo na 20 znakova. <input type="text" name="posjetitelj" size="20">

Posjetitelj u to polje unosi neku vrijednost, a klikom na gumb "poalji", ta vrijednost se pohranjuje u varijabli koja nosi ime "posjetitelj". Na primjer, ako u polje upiemo Hercule Poirot, varijabla "posjetitelj" dobit e vrijednost "Hercule Poirot": posjetitelj=Hercule Poirot

Podaci uneseni u obrazac alju se metodom GET ili POST. Metodu slanja podataka definiramo atributom method oznake <form>. Kako GET metoda zahtijeva poznavanje jezika kao to su ASP ili PHP, objasnit emo slanje podataka metodom POST, i to na adresu elektronike pote. Atribut action oznake <form> u tom e sluaju imati vrijednost poput hiperveze na adresu e-pote: <form method="POST" action="mailto:edupoint@carnet.hr" enctype="text/plain"> Kako bi podaci bili poslani u tijelu poruke e-pote, a ne kao privitak u poruci, dodali smo atribut enctype i njegovu vrijednost definirali kao "text/plain" (tekst/obian).

Obratite panju na to da ova metoda slanja podataka iz obrasca ne skriva adresu primatelja, jer poslana poruka nerijetko ostaje pohranjena u mapi Sent Items (Poslana pota) posjetiteljeva e-mail klijenta. Upoznajmo sada poblie polja za unos podataka, njihove oznake i atribute... Tekstualno polje Polje za unos teksta definiramo oznakom <input> i atributom type koji nosi vrijednost "text". Atribut size odreuje irinu polja iskazanu brojem znakova. Vrijednost polja zadajemo atributom value. U naem primjeru elimo da posjetitelj sm unese tekst u polje, pa smo ovaj atribut ostavili praznim, a mogli smo ga i izostaviti. <input type="text" name="ime" size="20" value="">

Polje lozinke Za polje lozinke vrijede ista pravila kao i za tekstualno polje. Jedina razlika je u vrijednosti atributa type, koja je u ovom sluaju "password" (lozinka). <input type="password" name="lozinka" size="20">

Tekstualno podruje Oznaka <textarea> definira tekstualno podruje. Atributom rows odreujemo broj redaka, a atributom cols irinu iskazanu brojem znakova. elimo li unaprijed zadati vrijednost ovog elementa, upisujemo je izmeu poetne i zavrne oznake. <textarea rows="2" name="poruka" cols="20"> </textarea>

Potvrdni okvir I potvrdni okvir definiramo oznakom <input>. Vrijednost atributa type ovaj puta je "checkbox", a atributom value zadajemo vrijednost potvrdnog okvira. <input type="checkbox" name="Prihvacam" value="Da">

Opcijski gumbi Opcijske gumbe takoer definiramo oznakom <input>. Atribut type poprima vrijednost "radio", a atributom value definiramo vrijednost odabranog opcijskog gumba. Unaprijed odabranu opciju moemo odrediti dodavanjem atributa checked, kojem ne pridodajemo vrijednost. Svi opcijski gumbi jedne skupine moraju imati isto ime definirano atributom name. To nam omoguuje odabir samo jedne vrijednosti iz niza ponuenih opcija te grupe. Ako elimo omoguiti odabir vie opcija unutar grupe, koristimo potvrdne okvire. <input type="radio" name="odgovor" value="da" checked>Da <input type="radio" name="odgovor" value="ne">Ne Da Izbornik Za definiciju izbornika potrebne su nam dvije oznake - <select> za definiranje poetka i kraja izbornika, te oznaka <option> kojom definiramo svaku ponuenu opciju u izborniku, ba kao to oznaka <li> definira elemente liste. Broj vidljivih opcija u izborniku odredit emo atributom size oznake <select>. Unaprijed odabranu opciju definiramo atributom selected oznake <option>, a ne pridodajemo mu vrijednost. <select size="1" name="titula"> <option selected>Gospoica</option> <option>Gospoa</option> <option>Gospodin</option> </select>
Gospodica

Ne

Gumb I za kraj, jo jedan element obrasca kojeg definiramo oznakom <input>. Ovisno o tome je li vrijednost atributa type "submit" ili "reset", definirat emo gumb za slanje, odnosno gumb za brisanje unesenih podataka. Atributom value odreujemo tekst koji pie na gumbu. <input type="submit" value="Poalji" name="gumb1"> <input type="reset" value="Obrii" name="gumb2">
Poalji Obrii

Primjer jednostavnog obrasca

Spremite datoteku kao obrazac.htm. U datoteci prvi_zadatak.htm kreirajte vezu na obrazac.htm.

7. ZA ONE KOJI ELE VIE

7.1. Kratka povijest interneta Internet, multimedijalna globalna mrea kakvu danas poznajemo, nastao je u posljednjem desetljeu prologa stoljea. A sve je poelo jo davnih ezdesetih godina dvadesetog stoljea. Internet je nastao vrlo spontano, bez ikakvih planova o razvitku "velike globalne mree". Prvi korak ka nastanku Interneta uinjen je ezdesetih godina prologa stoljea, kada je formirana mrea pod nazivom ARPANet. Njena zadaa bila je razmjena baza podataka meu znanstvenicima vojnoindustrijskih kompleks diljem SAD-a. Tako su prvotno spojena dva raunala raunala na Sveuilitima UCLA i Berkley u Los Angelesu, a krajem 1969. umreuju se jo dva, od kojih jedno u vlasnitvu Ministarstva obrane SADa. Broj umreenih raunala nastavio je rasti, pa je tako krajem 1972. godine bilo umreeno etrdesetak, to vojnih to civilnih, raunala. Istovremeno su se poele javljati i druge raunalne mree, koje se s vremenom udruuju jedne s drugima, pa se sve vie poinje koristiti i termin Internet. Granice SAD-a Internet probija ve ranih sedamdesetih, a 1992. godine prelazi prag od milijun veih umreenih raunala lociranih diljem svijeta. Ubrzo je osnovana i organizacija pod nazivom "Internet Society", koja Internet proglaava opim dobrom ovjeanstva, poput vode, zraka, biljnog i ivotinjskog svijeta, itd. Korak koji je doveo do ubrzanog irenja Interneta u svakodnevni ivot ljudi bio je upostavljanje World Wide Weba (WWW), kao jedne od najatraktivnijih mrenih usluga, poetkom devedesetih godina 20. stoljea. Sama uspostava WWW servisa dovela je do saznanja da Internet moe biti iskoriten ne samo kao tehnika infrastruktura za razmjenu informacija potrebnih u poslovanju, ve i kao medij unutar kojeg se samo poslovanje moe obavljati. Tako su se ve nakon nekoliko godina na Internetu poele predstavljati tvrtke, koje su putem Interneta nudile, osim same prezentacije, i svoje proizvode i usluge.

Danas je sve vei broj tvrtki koji se u svom poslovanju redovito okreu Internetu kao mediju koji znaajno smanjuje trokove poslovanja. Nisu samo smanjeni ili ak ukinuti trokovi distribucije proizvoda do prodajnih mjesta, ve je i sav prihod od prodaje proizvoda, od kojeg je dio redovito iao trgovcu, sada u rukama samog proizvoaa. Informatizacija uredskog poslovanja takoer doprinosi utedama i vremena i novca, to tvrtke ini profitabilnijima, a kako je posao ponekad mogue obavljati i iz vlastitog doma, one postaju i ugodnijim mjestima za rad.

7.2. Kratka povijest HTML-a

Kao i prirodni jezici i HTML se vremenom razvijao. Prva verzija ovog jezika (ali ne i slubena) objavljena je 1993. godine. Iako je u to vrijeme postojalo nekoliko "standarada" HTML-a, neki pravom prvom verzijom ovog jezika smatraju onu Tima Berners-Leeja. U to je vrijeme jezik jo bio poprilino ogranien, pa nije bilo mogue ak ni dodati slike u HTML dokumente. Razvoj HTML-a nastavljen je prvom "imenovanom" verzijom - 2.0, no ni ona nije postala standardom. U oujku 1995. novoosnovani W3C objavio je verziju 3.0, koja je donijela mnoge novosti, a meu najveima - definiciju tablica. Daljnji razvoj ove verzije HTML-a oznailo je prihvaanje "specifinih" oznaka podranih u tada najveim i najprihvaenijim web preglednicima. Tako su nastale mnoge duplikacije, pa je postojalo vie oznaka koje su imale istu funkciju. Podebljani tekst, primjerice, bilo je mogue definirati oznakom <b> (eng. bold), ali i oznakom <strong>. I HTML 4, predstavljen u prosincu 1997., nastavio je s prihvaanjem takvih oznaka nametnutih od strane proizvoaa razliitih web preglednika, no istovremeno je pokrenuto i "ienje" standarda proglaavanjem nekih od njih suvinima. Manje promjene u specifikaciji ovog standarda predstavljene su u prosincu 1999., kada je predstavljena konana verzija ovog jezika - HTML 4.01.

7.3. Posebni znakovi

Kao to razmak moemo zamijeniti kodom (&nbsp;), tako i neke druge znakove moemo napisati koristei njihov kd. Donosimo tablicu najeih posebnih znakova: Znak Kd &nbsp; & > < " &amp; &copy; &reg; &gt; &lt; &quot; &plusmn; &euro; &pound; &cent;

7.4. Uvod u pripremu grafike za Web

Grafiki formati Brzina prijenosa podataka na Internetu ak i danas predstavlja problem. Kako bi se taj problem uinio to bezbolnijim, a nae se stranice to bre uitavale, slike koje koristimo na naim web stranicama spremamo u jednom od tri grafika formata, a svaki od njih na sebi svojstven nain smanjuje veliinu datoteke. GIF Ovaj format preporuljivo je koristiti za grafike koje ne sadre vie od 256 boja. Kako gotovo svaka fotografija sadri milijune boja, ovaj format pri spremanju fotografija najee izbjegavamo. Njegova tajna je u tome to uz podatke o slici u sebi sadri i posebnu paletu od najmanje dvije do najvie 256 boja. Jednu od boja u paleti mogue je

odrediti kao prozirnu (eng. transparent). Tako e svaki piksel te boje na slici biti proziran, i kroz te dijelove slike bit e vidljiva pozadina na kojoj se slika nalazi.

Uveana slika s definiranom alpha prozirnou JPEG JPEG je format koji koristimo za spremanje fotografija i grafika koje sadre vie od 256 boja. Nudi razliite modele i stupnjeve optimizacije, no svakim od njih se gubi na kvaliteti slike. Svejedno, stupanj optimizacije uvijek je mogue podesiti tako da gubitak kvalitete bude prihvatljiv ili ak neprimjetan. Ne podrava prozirnost.

GIF i JPEG optimizacija PNG Najmlai od spomenuta tri formata, ujedinjuje najbolje od prethodna dva. Omoguuje spremanje palete od 17 do 256 boja, ali i 8-bitne greyscale palete (paleta sivih tonova) i pune, 24-bitne palete (16,7 milijuna boja). Podrava prozirnost, ali i alpha prozirnost, kojom rubovi slika ostaju "meki". No, veina web preglednika jo uvijek ne podrava alpha prozirnost.

Uveana slika s definiranom alpha prozirnou

Programi za obradu grafike Photoshop, Paint Shop Pro i GIMP meu najpopularnijim su programima za obradu grafike i pripremu grafikih elemenata za Web. Ukratko emo vam predstaviti ova tri, ali ne zaboravite da postoji i mnotvo drugih programa za obradu grafike. Na vama je da odaberete svog favorita. Adobe Photoshop Najpopularniji, svojevrsni standard u grafikoj industriji. Nudi mnotvo mogunosti, no njegova izuzetno visoka cijena i sloenost uporabe ine ga neprivlanim veini kunih korisnika. www.adobe.com

Corel Paint Shop Pro Paint Shop Pro zasigurno je najpopularniji shareware alat za obradu grafike. Uz mnotvo mogunosti i mnogo jednostavniju uporabu od Photoshopa, odlikuje se i prihvatljivom cijenom. Omiljen alat kunih korisnika, ali i profesionalaca. www.corel.com GIMP Besplatan program zadovoljavajuih mogunosti, no Windows korisnicima isprva poprilino kompliciranog suelja. Odluite li se za ovaj program, moi ete ga nauiti koristiti i na Edupointovu teaju "Obrada grafike pomou GIMP-a". www.gimp.org

7.5. Male tajne

I za kraj, pripremili smo nekoliko savjeta kako bi vam stvaranje web stranica bilo to lake i - to uspjenije. Komentari HTML jezik podrava komentare, koji su vidljivi samo u kodu i ne prikazuju se u web pregledniku, a moemo ih dodati u bilo koji dio dokumenta. Za komentare postoji posebna oznaka, koja izgleda ovako: <!-- Moj komentar --> Preglednost napisanog koda Kako bi vam naknadno ureivanje koda bilo to lake, piite ga onako kako smo ga mi pisali tijekom vjebi. Uvlaenjem elemenata u skladu s njihovom hijerarhijom kd postaje mnogo pregledniji, a ureivanje lake. irina je vana! Mnogi korisnici (po posljednjim istraivanjima, ak etvrtina) na svojim monitorima jo uvijek imaju podeenu razluivost od 800x600 piksela. Stoga je vrlo vano paziti na irinu web stranica, kako bismo izbjegli pojavljivanje horizontalnog klizaa/klizne trake (eng. scrollbar) na dnu prozora preglednika. Ne zaboravite pritom da gotovo trideset piksela odlazi na rubove preglednika i vertikalni kliza, pa ukupna irina elemenata na stranici (npr. tablice, ako je stranica bazirana na tablicama) ne bi smjela prelaziti 770 piksela ili 100%, ako je irina definirana u postocima. Nepregledni preglednici... Razliiti preglednici razliito prikazuju web stranice. Najee su razlike zanemarive, no ako kd nije napisan u skladu s W3C-ovim HTML standardima, u nekim preglednicima prizor nee biti lijep. Uvijek provjerite prikazuje li se vaa stranica ispravno u najee koritenim preglednicima. Danas vie od 90% kolaa odlazi na korisnike Internet Explorera i Firefoxa. Prikazuje li se vaa stranica prihvatljivo u oba preglednika, obavili ste dobar posao. A ako ste perfekcionist, provjerite jo i kako je prikazuju Opera, Mozilla, Netscape, Slim Browser... Tko pjeva zlo ne misli... ? Posjetitelji u pravilu jednostavno ne podnose pozadinsku glazbu na stranicama. Izbjegavajte je.

Od slika glava ne boli... Krivo! Sve je u redu dok slike ne zavladaju vaim stranicama. Ako nije rije o fotogaleriji, ne pretjerujte sa slikama. Uinit e vae stranice nepreglednima i produit e njihovo uitavanje nekoliko puta. Uvijek optimizirajte slike prije objavljivanja na Webu. Dizajn Pripazite na kombinaciju boja koje koristite na stranicama. Ako nemate oko za boje, zatraite miljenje nekoga tko ima. Pazite na itljivost tekstova i izbjegavajte pozadinske slike na stranicama. Jezik I na kraju, pripazite na jezik. Vae web stranice publikacija su poput bilo koje druge. Nemojte ispasti nepismeni. ;)