Html - tecaj

HTML Tecaj Postovani posjetitelji, dobro dosli na nas HTML tecaj. U velikoj masi tehnika koje se koriste za izradu internet prezentacija, pored svih skript jezika, i mocnih WYSIWYG (What yuo see is what u get) editora, HTML je bio i ostaje osnovni alat koji vam je potreban, ukoliko zelite izraditi vlastitu internet prezentaciju. Uz pomoc tih mocnih editora moguce je napraviti internet prezentaciju, no da bi vas neko nazvao iole ozbiljnim web dizajnerom i programerom, webmasterom, morate poznavati HTML jezik. U ovom tecaju pokusat cu vam pribliziti HTML i to u verziji HTML 4.0 i XHTML 1.0 Osim objasnjenja naredbi i priblizavanja HTML interpretacijskog jezika u ovaj tecaj integrirali smo neke primjere, pomocu kojih cete lakse shvatiti neke od tehnika webdizajna i kako ih primjeniti u praksi. Ukoliko imate nekih pitanja, savjeta ili primjedbi, dobro dosli ste javiti nam se putem [email protected]

HTML Tecaj Da bi ste uopce poceli baviti se Web Dizajnom morate nauciti osnove o HTML-u. HTML je naime jedna vrsta interpretacionog jezika u kojem posebnim naredbama odredjujete izgled svog dokumenta. Te naredbe namijenjene su za interpretatore ili bolje receno browsere npr. Netscape ili MS Explorer (samo da napomenemo neke od njih). Web stranice mozete pisati i u obicnom editoru u Windowsima ili npr na linuxu. Postoji par programa koji pomazu tako da neke tagove prikazuju u drugoj boji, tim dokument dobija preglednost.

Svi html dokumenti su sastavljeni na isti nacin, no krenimo iz pocetka. Sve naredbe tzv tags, su oblika <naredba> ili </naredba>. Sve (skoro sve) naredbe se u html-u moraju nakon sto su "otvorene" i zatvoriti dakle ako pisete <font> morate nekada napisati i </font>. Jedan primjer je <b> Sto daje potamnjen tekst</b>, ali morate taj isti tag opet zatvoriti da biste ponovo dobili normalan tekst. Jedini tag koji se nemora zatvoriti je <br> sto daje novi red! (to ce se od iduceg W3C standarda promijeniti!) Dokumenti u html jeziku pocinju sa <html>,zatim <head> tzv. header koji sadrzi i evtl. <title> Ime dokumenta </title> i opcionalno java skripte. Zatim dolazi <body> "tijelo" dokumenta, u kojem stoji sadrzaj tj. ono sto drugi citaju. Logicno se svi ovi tagovi moraju i zatvoriti, ovako to sve izgleda na primjeru:

<html> <head> <title>Prvi primjer</title> </head> <body> Dobar dan svijete..Hello world.. </body> </html>

Naravno da ovo jos nema nista sa web dizajnom, ali je vazan pocetak. Vazno je da shvatite kako se sastavlja jedan html dokument, cak i najkompliciranije stranice imaju

ove elemente. <body> tag, moze opcionalno izgledati i ovako: <body bgcolor="black" font="green" vlink="blue" link="red">

• bgcolor daje boju pozadine u nasem slucaju crna • font, daje boju slova, zelena plava (ukoliko ovo ostavite bez unosa onda je

font="black") • vlink, boja posjecenih linkova (ukoliko ovo ostavite bez unosa onda je vlink="red") • link, boja linkova (ukoliko ovo ostavite bez unosa onda je link="blue") • alink, boja aktivnog linka • background, to je slika pozadine npr jedan .gif ili .jpg file

<head>-Tag sadrzi sljedece: <title>: tzv. naslov stranice, nije obaveza ali je koristan, jer neke masine za pretrage, koriste title kao relevantnu informaciju za indexiranje datih stranice. Ovdje se web duhovi "prepiru" oko toga sto je tocno (ili tacno). Dok neki ovdje stavljaju brdo informacije, drugi koriste samo kratke i relevantne informacije. Jednu stvar nemojte ni u kom slucaju uraditi, nestavljajte u <title> tag nikada naslov tipa: Wellcome to my bla bla ili dobrodosli na moj bla bla, yahoo kod trazenja pod wellcome izbacuje preko 70000 stranica. Osim toga u <head> tagu nalaze se jos i meta tags (o tome vise u odjelku za napredne, vidi desno) te evtl. java skripte (vidi paragraf o javi). Ukoliko imate nekih pitanja, savjeta ili primjedbi, dobro dosli ste javiti nam se putem [email protected]

Formatiranje texta, takodje je vazan dio, koji utice na izled vaseg dokumenta. Ukoliko bez ikakvog formatiranja u body-dijelu html dokumenta stavite sadrzaj onda ce sve izledati nesredjeno i nepregledno. Da bi se ovi problemi rijesili html sadrzi tagove za formatiranje.

Kao prvo tu su <h>-tagovi, i to od <h1> do <h6>. Oni uvecavaju i podebljavaju text koji se nalazi unutar taga (naravno se mora i zatvoriti npr: <h2>TEst</h2> .

To izgleda ovako..

<h1> Test

<h2> Test <h3> Test <h4> Test <h5> Test

<h6> Test

Ovaj tag se koristi kao naslov ispred novog odlomka. Neki browseri podrzavaj i align atribut unutar h taga, <h1 align="left|center|right">, sto text unutar taga centrira, odnosno pozicionira lijevo ili desno.

Osim <h>-taga, za formatiranje se koristi <p>-tag. <p> (p=paragraph), daje pocetak novog odlomka.

Blablabla <p> ovo je novi odlomak

Kod <p>-taga mozete koristiti atribut align, i to align="left|center|right", za pozicioniranje lijevo, desno ili u sredinu. A cetvrta mogucnost je align="justify", sto od dolazeceg odlomka cini jedan blok. Preporuceno je <p>-tag zatvoriti (naravno sa </p>.

<br> Kao treci tag za formatiranje texta tu je <br>-tag (br=break), daje novi red.

<font> Cetvrti tag i jedan od vaznijih je <font>-tag. Font ili slova daje textu unutar tog zeljeni izgled. Atributi unutar <font>-taga su:

• face="nekitip" npr=arial, helvetica itd... • size="x" je velicina, 1-4 ili +1 do +3 • color="vrijednost" daje zeljenu boju

<font face="arial" color="red" size="2"> Text ce izgledati ovako.. <font> Moram napomenuti da se ovi tagovi ne preporucuju od konzortijuma W3C. Tren se okrece prema CSS (cascading style sheet). Sto moze procitati u datoj lekciji. Linkovi su u biti najvazniji dio cijelog html-a oni tek omogucuje da WWW bude ono sto jeste. Linkovi su jednostavno receno nesto kao GOTO naredba html-jezika. Kad kliknete na neki od njih vas browser pokaze stranicu koja se krije iza tog linka. To moze biti neki dokument na vasem serveru, bilo koji domument na internetu ili jedan skok unutar istog dokumenta, no krenimo iz pocetka.

tako zvani anchor-tag ima sljedeci oblik: <a href="neka adresa">Opis kamo vodi link</a> Konkretni primjeri:

<a href="http://www.kvesko.de">Skok na jednu drugu domenu</a> <a href="idemodalje.html">Skok na dokument koji se nalazi</a> na istim serveru u istom direktoriju kao i aktualni dokument </a> <a href="#nekiodlomak">Skok u istom dokumentu</a>

Skok na neku drugu www-adresu mislim ne treba dalje objasnjavati (bar se nadam). Skok na dokumente na vasem serveru. Tu trebate malo znanja o unixu (slicno je kao u dos-u), i njegovom sustavu direktorija. Ako je uzmimo dokument test.html u direktoriju /testovi, a vi zelite iz tog dokumenta link na dokument mehaletim.html u direktoriju /sale onda anchor glasi ovako: <a href="../sale/mehaletim.html"> Dakle morate se "popeti" iz direktorija

test pa onda "uci" u direktorij sale. Toliko o temi unix OS, ukoliko imate problema sa ovim dijelom, onda vam moram preporuciti da naucite osnove o unixu. Jos jedan savjet, svi web serveri ukoliko u anchoru navedete samo cilj-direktorij automatski ucitavaju index.html, index.htm, index.shtml, i u novije vrijeme i index.php dokument, zato vam preporucujem da u svakom direktoriju prvi ili glavni evtl. jedini dokument nazovete index.html (*.htm, *.php, *.shtml!)

Skok u istom dokumentu izgleda kompliciranije no sto u biti jeste. Kao prvo odredite dijelove na koje se moze skociti, naravno samo u vecim dokumentima. To cinite na sljedeci nacin: <a name="#nekoime> ali nakon # neko ime bez razmaka (jako vazno!) I onda bilo gdje u dokument stavite sljedeci anchor-tag: <a href="#nekoime"> (naravno oba imena iza # moraju biti ista). Ukoliko imate nekih pitanja, savjeta ili primjedbi, dobro dosli ste javiti nam se putem [email protected]

HTML Tecaj Liste su jedan od jednostavnijih elemenata HTML-a. Postoje dva tipa lista obicna lista da je tako nazovem i brojcana lista u kojoj su svi unosi numerirani.

Obicna lista izgleda ovako:

<ul> --(pocetak liste) <li>Neki text</li> --(jedan element liste, moze ih biti bezgranicno) <li>Neki text</li> </ul> --(kraj liste)

Brojcana lista izgleda ovako:

<ol> --(pocetak liste) <li>Neki text</li> --(jedan element liste, moze ih biti bezgranicno) <li>Neki text</li> </ol> --(kraj liste)

U praksi to izgleda ovako:

Obicna lista

• prvi element • drugi element • treci element

Brojcana lista

1. prvi element 2. drugi element

Unutar <ul> naredbe mozete definitari i vrstu tocke koja se nalazi ispred unosa liste: Moguci unosi su:

<ul type="circle"> za kruzic <ul type="square"> za kockicu <ul type="disc"> za crnu tockicu

Jos jedna mala napomena, u dosadasnjim standardnim specifikacijama (do verzije 3.2) HTML-a od W3C nije postojala obaveza "zatvaranja" taga <li> ali je od najnovije specifikacije XHTML 1.0, to slucaj. Naravno pretrazivaci liste i dalje prikazuju korektno i ukoliko nezatvorite <li> tagove no iz razloga kompatibilnosti za buducnost, preporucuje se zatvarati sve tagove pa i ove za liste. Ukoliko imate nekih pitanja, savjeta ili primjedbi, dobro dosli ste javiti nam se putem [email protected]

Tablice su opsirna i jako korisna oblast. Da biste ih upotpunosti savladali, morate pogledati gomilu tablica i mnogo vjezbati. Osim za normalnu uporabu (tabelarni prikaz podataka) tablice se koriste i za layout (dizajn). Tocnije za ekzaktno pozicionranje. (Naravno nikad 100% ekzaktno). Tablicu otvarate sa tagom <table>, a zatvarate sa tagom </table>. Tablice uz to sadrze redke (vodoravno) i stupce. Dakle nakon <table> taga slijedi <tr>-tag kojim zapocinjete novi redak. Unutar redeka dolazi <td>-tag koji otvara stupac, odnosno tocnije receno jednu celiju untar upravo otvorenog redka (<tr>-tag). Celije (<td></td>) sadrze text ili druge informacije. Jedan primjer: Izvorni HTML-code: Izgled tablice:

<table border="0" width="200"> <tr> <td> Ovdje slijedi sadrzaj </td> <td> Druga celija u redku </td> </tr> <table>

Ovdje slijedi sadrzaj Druga celija u redku

Ovo je primjer jedne jednostavne tablice sa samo jednim redkom i dva stupca (celije). Samo da biste shvatili koncept unutar <tr> taga moze biti teoretski gledano bezbroj celija (td tagova). Uz to jos morate obratiti paznju da svaki otvoreni tabelarni tag opet i zatvorite. U protivnom vas npr. Netscape kaznjava prikazom jedne prazne stranice.

Atributi

<table>-tag moze imati sljedece atribute:

• width="xx" - sirina tablice u pixelima ili procentima. • border="x" - ram (okvir) tablice, odnosno linije u tablici, kod border="0" tablice bez

okvira. • bgcolor=".." - boja pozadine tablice, (kao u body tagu, vidi osnove). • background=".." - slika u pozadine (kao kod body taga). • cellspacing="x" - daje debljinu linija unutar tablice. (tocinje razmak izmedju celija)

• cellpading="x" - daje razmak izmedju sadrzaja jedne celije i okvira te celije. • bordercolor=".." - daje okviru i linijama unutar tabele zeljenu boju. (ukoliko border="1"

ili vise) • height="x" - visina tablice u pikselima ili procentima, ovo nije dio HTML 3.2 standarda,

ali radi.

Stupci <td> takodje mogu primiti atribute:

• width="x" - minimalna sirina • bgcolor=".." - vidi gore. • background=".." - vidi gore. • collspan="x" - ostvaruje da se jedna celija prostire preko x stupaca • align="left|center|right" - sadrzaj celije, lijevo, desno ili centrirano. • valign="down|top|middle" - kao align samo po vertikalnoj liniji. • rowspan="x" - spaja celije duzinom x redaka (vertikalno)

Slijede primjeri: <table border> <tr> <th colspan=2>Sadrzaj jedne celije, koja se pruza preko dva redka. </tr> <tr> <td>sadrzaj prve celije ispod produzene celije <td>sadrzaj druge celije ispred produzene celije </tr> </table>

Izgleda ovako:

Sadrzaj jedne celije koja se pruza preko 2 redka

sadrzaj prve ceilje ispod produzene celije

sadrzaj druge celije ispod produzene celije

Analogno postupate za rowspan, kod izgleda ovako.

<table border> <tr> <td rowspan=2>sadrzaj celije, koja se pruza preko 2 stupca. </td> <td >Sadrzaj prve celije kraj produzene celije </tr> <tr> <td>sadrzaj druge celije kraj produzene celije </tr> </table>

To izgleda ovako:

sadrzaj prve celije kraj produzene celije

sadrzaj prve celije koja se pruza preko 2 stupca.

sadrzaj druge celije kraj produzene celije

Konacno tu su i tzv. slijepe tablice, tablice bez okvira one se koriste za pozicioniranje texta, mnogi dizajneri koriste tablice, mjesto frameova, sto je ponekad sigurno korisnije a izgleda ponekad i bolje. Ima jako mnogo primjera. Ali da bi ste to ostvarili potrebno je mnogo prakse, vjezbe i probanja. Pa sto cekate startajte neki editor i krenite u lov na tablice...

Frameovi spadaju u naprednije elemente html-a. Uz pomoc frejmsa (tako se izgovara), prozor internet pretrazivaca mozete podijeliti u vise dijelova. U svakom od tih dijelova, mozete prikazati zasebne html dokumente. Podjela se moze izvrsiti u proizvoljno velike segmente. Pojedini segmenti mogu biti staticnog sadrzaja (="non scrolling region"), ili mogu imati sadrzaj koji se mijenja. Linkovi u jednom frame-u mogu mijenjati sadrzaj u drugom. Frejmovi su od svog uvodjenja donijeli veliku promjenu unutar HTML-a, i sa sobom mogucnost "pravog" hypertext prikazivanja informacija. frejmovi su podrzani od Netscape ver. 2.0 i MS Internet Explorer ver. 3.0, frejmovi su i oficijelni dio HTML standarda.

Ovako izgleda jedan tipicni frame. Prozor je podjeljen u 3 dijela, dakle 3 frame-a. U svakom od frameova nalazi se po jedan zaseban HTML dokument. Naravno da se u svakom frameu moze nalaziti i isti dokument, ali to nema svrhe..Tipicno je da lijevi i gornji(ili donji kod nas) frameovi ostaju staticni a srednji i najveci prikazuje sadrzaje.

Ovo je osnovna forma jednog frame html dokumenta: <html> <head> <title>Frameovi primjer 1</title> </head> <frameset ...> ... Konkretna definicija framea ... </frameset> <body> ... Ovdje dolazi text koji vide oni ciji browser ne podrzava framese (malo ih je danas) </body> </html> Kao sto vidite izgled jednog framea odudara od izgleda "obicne" html datoteke. Nakon </head> taga slijedi definicija framea sa <frameset> tagom. Nakon toga slijedi konkretna

definicija frame-a. Definiciju zavrsavate sa </frameset> tagom. Netscape kao i mnogi drugi internet pretrazivaci podrzavaju tag <noframe> unutar kojeg unesete text koji vide oni sa starijim pretrazivacem (ali kao sto rekoh takvi su rijetki..ali ima ih..).

Definiranje Frame-sets-a U ovoj fazi definirate kako ce prozor biti podijeljen. Pri tome si to mozete pretstaviti kao tabelu, kojoj izgled morate odrediti tako sto cete prvo odrediti koliko ce imati redaka, te zatim koliko stupaca. No pogledajte primjere, bit ce vam lakse shvatiti o cemu se radi...

Primjer 1.

<frameset rows="20%, 80%"> ... Ovako dobijate 2 framea koji se ovdje definiraju ... </frameset>

Slika pored pokazuje frejm koji dobijate sa gornjim kodom. u uvodnom tagu <frameset> definirate podjelu framea. Sa rows dijelite prozor u redove (rows=redovi engl.). U nasem slucaju smo odlucili da se prozor podijeli u 2 frejma, od kojih lijevi zauzima 20% prozora a desni 80%. Ovi brojevi se moraju nalaziti unutar navodnika.

Primjer 2.

<frameset rows="100,*,60"> ... Ovako dobijate 3 frejma koje ovdje definirate ... </frameset>

Ovako izgled frame, koji dobijete podijelom iz drugog primjera. Gornji red u ovom slucaju zauzima 100 piksela, donji 60 piksela, a srednji ostatak, u zavisnosti od rezolucije korisnika. Kada brojeve navodide sa procentima, onda se velicinia pojedinih frameova odredjuje relativno u odnosu na velicini prozora.

Ako pisete bez procenata, onda je velicina absolutna i odnosi taj broj piksela. Sa zvjezdicom definirate frameove relativne velicine, ovisne od ostalih velicina koje ste naveli. U ovoj definiciji mora biti minimalno jedan broj, dakle rows=*,* ne donosi nista.

Primjer 3.

<frameset cols="150,*"> ... Ovako dobijate 2 frejma koje ovdje definirate ... </frameset>

Slika pored prikazuje podjelu koji dobijate kodom iz primjera 3. Pomocu cols dijelite prozor uspravno, dakle u stupce. Sve ostalo je identicno kao i kod rows, u nasem slucaju lijevi prozor zauzima tocno 150 piksela, a desni ostatak, ovisno o rezoluciji monitora.

Primjer 4.

<frameset cols="40%,60%"> ... Ovako dobijate 2 frejma, sadrzaj prvog definirate ovdje ... <frameset rows="20%,80%"> ... Jos dva framea koje ovdje definirate ... </frameset>

Ovdje vidite efekat iz 4-tog primjera. Prvo smo prozor podijelili u dva stupca, a zatim desni stupac u dva redka..

Primjer 5.

<frameset rows="50%,50%"> <frameset cols="50%,50%"> ... Ovako dobijate 2 frejma, ciji sadrzaj ovdje definirate ... </frameset> <frameset cols="50%,50%"> ... Jos dva framea koje ovdje definirate ... </frameset>

I konacno jos jedno komplikovanije formuliranje, podijela u 4 frame-a. Posto su sve oblasti jednake velicine svejedno je da li pocinjete sa rows ili cols (stupcima ili redcima)

Obratite paznju na to da uvijek citav prozor bude poklonjen framesima. Koristite za to procente cija suma daje 100, ili u kombinaciji sa *. Naslov koji ste dodijelili frame-u, "vuce" se tijekom cijelog frame-a i nazalost nema mogucnosti taj isti aktualizirati. Zbog toga se preporucuje da koristite izrazajan naslov za vase stranice.

Vjerojatno ste primjetitli da listinzi u dosadasnjem tijeku lekcijenisu bili potpuni. Istina je nedostaje konkretna definicija datoteka koje ce biti ucitane u pojedinacne frameove. Osim toga kod framesa slicno kao i kod tablica mozete podesiti razne atribute.

Scrollbars, sta su?

Kao prvo tu su scrollbars, to je ono sto ima vecina programa desno sa strane, cime se u dokumentu krecete gore-dole. Njih browseri ukljucuju automatski, ukoliko je to u pojedinom frame.u potrebno. Naravno postoji mogucnost taj atribut kod framesa manpulirati, tako da frame u svakom slucaju prikaze scrollbars ili obratno, da ih uopce ne prikaze.

To izgleda ovako:

<frameset cols="200,*"> <frame src="linkovi.html" name="lijevi" scrolling="no"> <frame src="sadrzaj.html" name="desni" scrolling="yes"> </frameset>

U ovom slucaju, lijevi frame nece imati scrollbars, (scrolling="no"), a desni hoce. Ukoliko nestavite nikakve informacije, onda, browser automatski, ukoliko je potrebno dodaje scrollbars. Obratite paznju da u slucaju ako je dokument veci, a vi ste stavili scrolling="no", onda sadrzaj nece biti prikazan u potpunosti.

Razmak izmedju okvira i sadrzaja

Sljedeca mogucnost je da odredite razmak izmedju sadrzaja i okvira. To izgleda ovako:

<frameset cols="200,*"> <frame src="linkovi.html" name="lijevi" marginwidth="0" marginheight="0"> <frame src="sadrzaj.html" name="desni" marginwidth="30"> </frameset>

Kao sto vidite u primjeru za to koristimo marginwidth i marginheight, i to tako da marginwidht koristite da biste (u pikselima) odredili razmak izmedju sadrzaja i lijevog (kao i desnog) okvira. Marginheight je za odredjivanje razmaka izmedju sadrzaja i gornje odnosno donje strane frame. U nasem primjeru u lijevom frameu sadrzaj prikazujemo bez razmaka (to je i standardno, dakle ako nista ne navedete onda je sve =0), a u desnom frameu je razmak od desne tj. lijeve strane30 piksela. Jos jedna opaska, kod marginwidht="0" marginheight="0" bi sadrzaj trebao biti prikazan u samom gornjem livejom kutu, Netscape nazalost uvijek samostalno tu unosi mali razmak.

Nepromjeniva velicina frame-a!

Bez ove specifikacije, vas frame posjetitelji mogu pomocu misa smanjivati povecavati i tako "kvariti" vas design, da biste to sprijecili koristite u definiciji framea NORESIZE. To izgleda ovako: <frameset cols="200,*"> <frame src="linkovi.html" name="lijevi" noresize> <frame src="sadrzaj.html" name="desni" marginwidth="30"> </frameset>

Zahvaljujuci ovom atributu velicina vaseg frame-a vise nemoze biti promjenjena. DOvoljno je ovo navesti u jednom od oba frame-a jer se to automatski odnosi i na susjedni frame. Ukoliko imate prozor as tri ili vise frame-a onda morate noresize unijeti vise puta, u sve frameove ili tako da su svi pokriveni (ili sami u svojoj definiciji ili pomocu susjednog frame-a).

Debljina okvira tj. nevidljivi okvir.

Sljedeci atribut vam daje mogucnost da odredite debljinu okvira vaseg frame-a, odnosno da li ce uopce vas frame imati okvir. To izgleda ovako: <frameset cols="40%,60%" border="0" frameborder="0" framespacing="0"> <frame src="linkovi.html" name="lijevi"> <frame src="sadrzaj.html" name="desni"> </frameset> Objasnjenje Ove atribute mozete unijeti unutar pocetnog taga <frameset>.

• border="pixel" je Netscape-sintaksa i odredjuje vrijednost okvira. Dozvoljava vrijednosti od 0 pa dalje. 0 znaci bez okvira.

• frameborder="1/0 ili yes/no" je MSIE-sintaksa i odredjuje da li ce 3D okvir biti prikazan ili ne.

• framespacing="pixel" je MSIE-sintaksa i odredjuje razmak izmedju pojedinih frameova, dakle debljinu okvira u biti. (spacing=razmak)

Obratite paznju ako zelite da u oba pretrazivaca (i netscape i explorer) nema okvira onda sva tri atributa morate postaviti na ="0"!!

Okviri u boji!

Okvire kod framea mozete obojiti. To izgleda ovako: <frameset cols="200,*" bordercolor="FFFF00> <frame src="linkovi.html" name="lijevi" border="10"> <frame src="sadrzaj.html" name="desni"> </frameset> Pomocu atributa bordercolor unutar frameset-taga mozete border dati bilo koju boju. Obratite paznju da border bude >0 (veci od nula).

Linkovi iz framea u frame!!

Linkovi tj. kako ih povezati. Ovo je jedna vazna oblast. Ovdje cu vam pokusati kako da povezete stranu sa linkovima i stranu sa sadrzajem. Sjetite se frame iz prvog dijela koji je imao tri zasebna framea i izgledao je ovako:

Lijevi i donji frame su staticni u njima odabirate jedan link koji se onda treba pokazati u srednjem i najvecem prozoru. No ukoliko u ta dva html dokumenta vase linkove stavite onako kako smo ih dosad naucili u lekciji o linkovima onda nece valjati. Pretrazivat ce zeljenu stranicu ucitati u isti frame u kojem je bio link. Ovdje vam pomocu nudi atribut target koji unostite unutar anchor-taga. Primjer izgleda ovako: <a href="infos.html" target="desni"> Ovo ce sadrzaj dokumenta infos.html ucitati u desni prozor. Naravno da u definiciji frame-a svakom od njih morate dati zeljeno ime. Osim sto sadrzaj mozete pokazati u nekom od vasih frameova tu su jos i sljedce mogucnosti:

• target="_new" daje kao rezultat da se sadrzaj zeljene datoteke ucita u novi prozor pretrazivaca, dakle dize se novi prozor pretrazivaca. Mozete testati OVDJE!.

• target="_parent" daje kao rezultat da se sadrzaj zeljene datoteke ucita u pretrazivac u onom stanju u kojem je pretrazivac bio prije ucitavanja vaseg framea.

• target="_top" daje kao rezultat da se zeljena datoteka u svakom slucaju ucita u cijeli prozor.(korisno ukoliko je link novi frame-dokument).

Druga je mogucnost da unutar body-taga stavite sljedeci atribut basetarget="desni", onda ce svi linkovi u tom dokumentu biti usmjereni u frame sa nazivom desni!!! To bi bilo to, nadam se da ste sada u mogucnosti da sami konstruirate svoje frame-ove, ukoliko imate bilo kakva pitanja u vezi frame-ova ili bilo cega drugog, pisite mi E-Mail i ja cu vam ukoliko mogu pomoci!! Cascading Style Sheets, je dio posljednje generacije HTML-a i mozete ga zamisliti kao malog brata. CSS je naprednija mogucnost formatiranja vecih dijelova teksta. Da bi ste kreirali style sheets postoji vise mogucnosti, kao prvo mozete ga "rucno" unijeti unutar html koda, ili ga generirati pomocu specijalnih programa. Programe za generiranje CSS-a poblize pojasnjavam u download-arealu. CSS-kod mozete unijeti unutar html-koda i to izmedju <head></head>, ili taj kod snimiti kao zasebu datoteku sa nastavkom .css i onda je linkovati unutar (opet) <head></head>, i to ovako <link rel="stylesheet" type="text/css" href="ime.css">.

Izgradnja samog stylesheet-a orijentira se na html-tagove npr. h1 ili p. Tocnije za svaki tag mozete konkretno odrediti kako ce tekst koji se nalazi unutar njega izgledati. Osim toga mozete kreirati i vlastite stylesheet-e sa proizvoljnim imenima. Bez obzira da li se vas style orijentira na nekom html-tagu ili ima proizvoljno ime postupak je analogan. Tag 1 { stil1 = vrijednost1

stil2 = vrijednost2 }

Konkretan primjer bio bi: H1 { font-style : italic; font-size : large; text-align : left; background : Green } Ovo daje unutar H1 taga text koji je italic, velikih slova i koji se nalazi na zelenoj pozadini. Bez CSS morali bi ste napraviti tablicu sa zelenom pozadinom, zatim fontove sa svim atributima. Ovako na bilo kojem mjestu unutar html dokumenta jednostavno mozete iskoriti ovu funkciju, kod pisete samo jednom.. Mogucnosti su skoro neogranicene, izmedju ostalog tu su sljedeci atributi:

• font-(size, weight, color, style, family) naravno u jednom redu samo jedan od ovih (vidi primjer)

• text-decoration, npr none, underline, overline, linethrough • text-transform : capitalize, uppercase, lowercase • background i bgcolor - analogno kako kod body ili tablica. • font-size : moze imati sljedece vrijednosti

xx-small, x-small, small, medium, large, x-large, xx-large

Kliknite ovdje da biste pogledali moj style sheet fajl.. Kada kreirate style sa svojim proizvoljnim imenom onda ispred imena stavite . , dakle ovako .mojstil { font-style : italic; font-size : large; text-align : left; background : Green } Ako ste ovo unijeli unutar jednog html dokumenta, onda mozete bez ikakvih poteskoca pojedinim tagovima pridruziti ovaj style i to ovako <p class="mojstil">bilo koji text</p> Onda ce text unutar ovog p taga imati izgled koji ste specificirali u vasem style sheet-u. Ovo mozete koristiti i unutar <td>-taga ili unutar <li>-taga itd.

Ovo su samo neki od mogucnosti, css je mnogo opsirniji i pruza skoro neogranicene mogucnosti. U kombinaciji sa JavaScriptom i layerima CSS cini jedan poseban ogranak web dizajna koji se popularno zove DHTML (Dynamic HTML).

Novi browseri podrzavaju style sheetove, ali je MS IExplorer u ovom slucaju za duzine ispred netscape-a. Buducnost u svakom slucaju pripada CSS-u, tagovi kao stu su font, align i bgcolor ce od HTML 4.0 verzije biti deprecated, sto znaci da ih i dalje mozete koristiti, ali da se preporucuje da ih izostavljate u korist CSS-a

Internet je danas bez slika nezamisliv (da ne govorim o animacija i slicno), i tek slikice vam omogucavaju da pravite one lijepe stranice sa roll over dugmicima, animacijama i svim tim cakama. Dakle ovaj tag je takodje od zivotne vaznosti... Od engleske rijeci images (slika), i slijedi tag za njihovo prikazivanje, naime <img>-tag, po

najnovijem standardu XHTML 1.0 i ovaj tag morate zatvoriti i to ovako <img scr="..." alt=".." /> dakle / na kraju ispred znaka >. Nije dovoljno napisati samo <img>, browseru morate tocno pokazati gdje se slika nalazi to cinite sa src="lokacija". To konkretno izgleda ovako: <img src="testslika.jpg" />.

Ovo znaci da se slika nalazi u istom direktoriju i testslika.jpg je naziv te slike src (engl. source=izvor), dakle daje lokaciju, to moze biti unutar vase prezentacije, u istom direktoriju u nekom drugom direktoriju, ili na nekim drugim stranicama. Primjer slijedi: <img src="http://www.kvesko.de/slike/anim01.gif" />, sto bi znacilo na domeni www.kvesko.de, u direktoriju slike, konkretno slika anim01.gif.

Atributi

<img>-tag moze primiti sljedece atribute:

• width="x" - sirina, ukoliko se ovaj broj ne podudara sa stvarnom velicinom slike onda se slika razvlaci..

• height="x" - isto kao za width, samo sto se odnosi na visinu. • border="x" - okvir x je broj i sto je veci okvir je deblji.. • align="left|center|right" - pozicioniranje slike. • name="" - ime slike, to je potrebno samo ukoliko zelite da primjenite java script na taj

image (da bi ste izveli roll over efekt) • alt=".." - alternativ, text, kratak opis slike..

Slike morati koristiti pazljivo i optimirati ih za web, jer sto je vise slika, stranica je opsirnija i sve vise vremena treba da bi se ucitala, time izazivate strpljenje vasih posjetitelja. Jako vazno je koristiti alt atribut jer neki surferi u potpunosti iskljuce slike da bi se stranice brze ucitavale. Cak i takvi surferi mogu zahvaljujuci alt atributu znati o cemu se otprilike radi.

HTML Tecaj Formulari su danas jedan od sastavnih dijelova interaktivnih stranica na WWW-u. Sad se mozda pitate sto je to interakcija, to je mogucnost da korisnik aktivno sudjeluje u vasim stranicama (da se tako izrazim). Posjetiteljima se daje mogucnost da unose razne informacije na vasim stranicama koje se onda pojavljuju na vasoj domacoj stranici. Jedan primjer su Knjige gostiju. To naravno nije moguce rijesiti samo u html-u i sa formularima. Tu u igru dolaze cgi-skripte o kojima cemo uskoro pisati (ili php ili asp), tako da ono sto posjetitelj unese ide direktno na vas server i putem jedne skripte se ti podaci upisuju u odredjeni html dokument. No kao sto rekoh o tome cemo vise pisati u sekciji o CGI-Skriptingu, ovdje nam je cilj nauciti kako kreirati formulare. Slijedi Konkretan primjer!: <form action="mailto:[email protected]" method=post enctype="text/plain"> ..Ovdje slijede elementi formulara kao sto su dugmici, tekst polja ili areali, izborna polja itd. ... </form>

<form ...>, sve sto se nalazi izmedju ovoga taga i </form> tag-a pripada tom formularu. Najucestaliji elementi formulara su dugmici, zatim tekst polja i tekst areali za unos podataka, tzv. chek boxes i drugi. Konkretni primjeri slijede. Kao sto vidite u gornjem primjeru iza form slijedi uvijek action="NekaAkcija", tu navodite sta ce se dogoditi sa podacima kada posjetitelj klikne na dugme posalji (ili submit). Tu mozete navesti e-mail adresu (kao o gornjem primjeru), ili neki cgi-skript na vasem serveru. Kojem ce ti podaci biti predani kao parametri. Kao sljedece birate metodu sa method="nesto". Tu imate dvije mogucnosti:

• method=post, onda ce podaci biti na serveru pomocu "stdin" biti predani za dalju obradu. I cgi-program ce taj podatak tretirati kao da je ukucan na komandnoj liniji.

• method=get, u tom slucaju ce podaci na http serveru biti pohranjeni u standardnu varijablu QUERY_STRING, odakle ih CGI-program mora procitati, za dalju obradu.

Ukoliko podatke saljete na neku E-Adresu, onda preporucujem da koristite method=post. Osim toga preporucuje se da navedete i ovo untar <form> taga, enctype="text/plain", to omogucuje da podatke koji su poslati preko novijih pretrazivaca budu korektno formulirani, jer ako to ne navedete, dobit cete podatke koji su za ljudsko oko teze citljivi. Ali su za razne cgi skripte kao stvoreni..

Slijede konkretni elementi formulara, a nakon toga i pojasnjenja:

Vase Ime: <input name="VaseIme" size=40 maxlength=40 />

Vase Ime:

Dakle ovo je jedan obican tzv. text-field ili ti na nasem tekstualno polje. definirate pomocu gornje naredbe. size=xx daje velicinu polja koja je prikazana, a maxlenght=xx maksimalna velicina unesenih podataka, moze biti i vece od size-a.

Unesite sifru: <input type=password name="Sifra" size=10 maxlength=10 />

Unesite sifru:

Kada stavite type=password, umjesto unesenih znakova pojavljivat ce se samo zvijedzice. Sluzi za unosnje (logicno) sifri/passwords.

Tekst Area! To je polje sa vise redaka izvorni kod izgleda ovako:

Sta mislite o Clintonovoj aferi sa Monikom: <p>

<textarea name="Clinton_Monika" rows=10 cols=20></textarea />

Sta mislite o Clintonovoj aferi sa Monikom:

Ovo polje ce imati 10 redaka i 20 znakova u svakom redku..omogucava unosenje nekog komentara ili naprimjer kratak opis stranice koja se unosi u neku link-listu. Opcionalno mozete unutar <textarea> </textarea> mozete napisati neki tekst koji ce na www stranici unutar tog teksta biti prikazan nakon ucitavanja stranice. Osim toga unutar ovog taga za textarea mozete unijeti atribut wrap=virtual|physical. Virtual wrap (za novi red), daje pri ukucavanju automatski novi red kada je red pun, ali se podaci prenose bez tzv. braek-a. physical ima istu funkciju pri pisanju, a pri slanju se podaci takodje prenose dalje..(mislim novi redovi..to je naravno korisnije). Izborne liste! Izborne liste se takodje cesto koriste, npr mozete postaviti pitanje "Kako ste me nasli". Slijedi jedan listing a zatim i objasnjenje.

Kako ste pronasli moj page: <p> <select name="kakoDoMene"> <option value="1"> Yahoo </option> <option value="2"> Lycos </option> <option value="3"> Bosnia Online </option> <option value="4"> Novine </option> <option value="5"> Poznanici </option> </select>

Kako ste pronasli moj page:

Yahoo

Dakle pojavljuje se jedan tzv. drop down lista, u kojem izabirate jednu od opcija. Kad podaci budu poslani, primate jedno od vrijednosti koje se nalaze unutar value atributa, ono koje je posjetitelj selektirao. I ovdje se moze naci jedan niz atributa:

• name : ime, netreba biti predugo, razmak je zabranjen, stavite ga unutar navodnika.

• multiple : dozvoljava izabir vise elemenata odjednom. Dovoljno je napisati

samo multiple unutar ovog SELECT taga. • selected : ovo navodite unutar <option> taga, tada je taj elemenat liste

vec selektiran. • value="xx" : to je vrijednost koja ce biti poslana kada korisnik/posjetitelj

klikne na posalju gumb, npr broj artikla za neki On-Line ducan.

Gumbovi/Dugmadi! Bez dugmadi nista neradi, jer nekako morate reci pretrazivacu da sve unesebo posalje. Za to su tu standardni gumbovi (ili dugmici kako vec hocete), koji sluze da se procedura slanja pokrene. Osim toga tu je i standardni gumb/dugme RESET, koji ponistava sve uneseno, ovako izgleda taj HTML-kod:

<input type=submit value="Poslati" /> <input type=reset value="Ponisti uneseno" />

Dakle type atribut je u ovom slucaju kljuchna tocka, ako je on =submit (posalji od engl. op.a.) onda pretrazivac pokrece akciju koju ste naveli na samom pocetku u <form ..>-tagu. Value atribut sadrzi tekst koji ce biti prikazan na dugmetu. type=reset nadam se netreba poblize objasnjavati, tim se sva polja "ciste" tako reci.. Tu su jos i individualni gumbici, kod kojih uz kombinaciju sa JavaScriptom mozete izvesti neku operaciju, primjer slijedi dole. Te takozvani file-buttons, koji se koriste da vam posjetitelji posalju neku datoteku..taj html-kod izgleda ovako:

Posaljite nam .txt ili .html datoteku! <input type=file size=50 maxlength=66 name="Datei" accept="text/*">

Ukoliko je Java ukljucena onda ovaj gumbic/dugme ima istu funkciju kao i BACK-dugme vaseg internet pretrazivaca: <input type=button value="Natrag" onClick="history.back()">

Radio Buttons Sluze za izbor jedne opcije, kod izgleda ovako:

Na koji nacin zeli platiti?: <input type=radio name="Nacinplacanja" value="Mastercard" /> Mastercard <input type=radio name="Nacinplacanja" value="Visa" /> Visa <input type=radio name="Nacinplacanja" value="AmericanExpress" /> American Express

Na koji nacin zeli platiti?: Mastercard Visa American Express

Dakle jedan Radio-Button zapocinjete sa <input> zatim slijedi atribut type=radio. Svakom radio-button-u morate dati jedno interno ime (name="nekoime"). Sva dugmad sa istim imenom spadaju u jednu te istu

grupu. Dakle iz te grupe posjetitelj moze izabrati tocno jednu. Pomocu atributa VALUE dajete internu vrijednost datom radio-button-u. Ta se vrijednost prenosi kada posjetitelj pritisne dugme POSALJI. Istovremeno kod Radiobuttons-a moze biti selektirana samo jedna opcija.

Tako, to bi bile osnove u vezi sa formularima, ukoliko jos uvijek imate nekih pitanja onda bi vas molio da me kontaktirate putem E-Poste. Rado odgovaram sva pitanja i pomazem. P.S.: svaki od ovih primjera lako mozete isprobati tako sto markirate zeljeni dio koda lijevim dugmetom misa zatim stisnete ctrl+c (zajedno), i onda sve to kopirate u vas editor sa ctrl+v (zajedno)

Layer su novi dio HTML-a koje je nekoc uveo Netscape, a koji su danas dio standarda koji izdaje W3C. Oni omogucavaju tocno odredjeno postavljanje pojedinih elemenata unutar jednog dokumenta (ti elementi mogu biti slike, tekst blokovi, dakle bilo koji asdrzaj koji se i inace moze nalaziti u HTML-dokumentima.) i to na tocno odredjenoj poziciji, koju navodite pri definiciji layer-a. Osim toga mozete jednom layeru odrediti i dimenzije (visinu, sirinu), te koji stil (CSS) koristi. Layere definirate pomocu <div> tag-a koji morate i zatvoriti (</div>. Jedan primjer izgleda ovako: <DIV id=menu style=" LEFT: 625px; POSITION: absolute; TOP: 120px; VISIBILITY: hidden; WIDTH: 150px; Z-INDEX: 100">

Krenimo redom:

• id="menu", ovim layeru dajete ime sto je vrlo korisno, time layer mozete putem JavaScripta manipulirati..

• LEFT:625px, znaci da se layer nalazi 625 piksela udaljen od lijevog ruba browsera. • TOP: 120px, je udaljenost layer-a od gornjeg ruba browsera. • POSITION: absolute je standardna postavka i preporuceno ju je uvijek koristiti, jer time

layeri pri svakoj rezoluciji zadrzava istu poziciju. • VISABILITY: hidden, znaci da se ovaj layer nece vidjeti unutar dokumenta, To je korisno

ukoliko zelite npr jedan meni koji se "otklapa" kada misem predjete preko nekog linka ili slike. To postizete sa JavaScriptom npr. ali o tome vise u nasoj sekciji JavaScript..Dakle u protivnom ostavite ovo prazno.

• WIDTH="150", je sirina layere (analogno kao i kod tablica..).

Ukoliko ste poziciju odredili konkretno, onda nije vazno gdje u dokumentu, postavite ovaj tag, layer ce se uvijek nalaziti na tocno odredjenoj poziciji.

Jos jedna vazna stvar koju layeri omogucuju jeste da unutar <div> taga unesete sljedeci atribut class="mojstil", ovaj CSS stil prije toga morate unutar dokumenta ili u zasebnoj datoteci definirati (vidi lekciju o CSS-u). Onda ce text unutar tog taga imati osobine koje ste definirali. Layeri pruzaju jednu hrpu mogucnosti, koje do sada niste imali ili ste ih postizali uz mnogo

truda i trikova putem tabela i providnih gifova..Ovako je pozicioniranje jako pojednostavljeno. A iduci aspekt je dinamicnost koju dobijate u kombinaciji sa npr. JavaScriptom. Nadam se da sam odgovorio neka pitanja, ova lekcija bit ce nadopunjena.

Ovdje su neki od linkova putem kojih mozete skinuti par interesantnih programa ili alata za izradu web stranica. BHWebmasters ne preuzima nikakvu odgovornost za tocnost ili sadrzaj koji se krija iza linkova ili bilo kakvu stetu prouzrokovanu downloadom tog software-a.

Naziv programa: Ocjena WS_FTP (ftp-klijent) ****

Standard kada je u pitanju prenos podataka na vlastiti web server, jednostavan za koristenje i za privatne korisnike besplatan.

1st Page. ***** - opis programa 1st Page je jedan izvanredan HTML-editor koji donosi masu funkcija, nudi preko 400 raznoraznih skripti (JavaScripte i CGI), besplatan je i jako je slican HomeSite-u.

Home Site ***** - legendarni HTML editor.

Vec legendardni HTML-editor, koji preporucujem svim korisnicima (pogotovo iskusnim), nudi masu izvanrednih funkcija, editor mog izbora. Obavezan alat svakog ko se ozbiljnije bavi izradom web stranica.

IrfanView ***** Izvrstan ImageViewer koji podrzava skoro sve moguce (ako ne i sve) formate cak i animirane gifove. Jednostavno fantastican program Irfana Skiljana koji je bio i u top 5 freeware (shareware) programa u svijetskom izboru. Morate ga imati...

EroEdit v 0.1 * Prvi Hercegovacki Text Editor, potpuno besplatan i jako jednostavan, zamjena za NotePad. Velicine je samo 800kB podrzava i printanje.. Freeware, Autor=moja malenkost..

Xitami v2.5b4 ***** Besplatni Webserver putem kojeg lokalno na vasem Win racunalu mozete testati npr. vase cgi-skripte. Za sve buduce webmastere ovo je obavezan alat. Postoje verzija za WIn 3.x, Win95/98 i Win NT. Kod Win 3.x verzije ne postoji podrska za CGI skripte.

Male tajne velikih majstora Ukoliko ste obradili nase HTML lekcije i experimentirali sa okvirima (FRAMES) onda ste uvidjeli da vrlo brzo dolazite do granica u radu sa istim. Nastaje nekoliko standardnih problema cije rijesenje vecini webdizajnera na pocetku nisu poznati. Ovdje smo obradili dva najrasirenija problema a to su:

1. Jednim klikom promijeniti dva ili vise frejmova 2. Kada neko otvori neku pojedinacnu datoteku (npr preko masine za trazenje) ona se neotvara unutar

frame-a.

1. Jednim klikom promijeniti vise frameova Koristeci okvire vjerojatno koristite i attribut target, putem kojeg browseru odredjujete gdje da ucita zeljeni dokument. No nedostatak ove metode je da odjednom mozete promijeniti samo jedan dio frejma. Na primjer uzmimo donji primjer:

Uzmimo na primjer da je u frejm dijelu koji je oznacen sa 1. navigacija, u dvojki se nalazi banner koji opisuje vizuelno dati sadrzaj i u trojki konacno nas sadrzaj koji se klikom u meniju ucita. Mnogo vas je vec vise puta vjerojatno pozelilo da klikom u meniju ne ucitaju samo sadrzaj vec i da promijenu banner u gornjem prozoru. Ovo putem target atributa nemozete postici. U ovoj situaciji pomaze nam kao i mnogo puta do sada JavaScript. No prije no sto procitate ovaj savjet preporucio bih vam da pogledate nase predavanje o D.O.M.-u (Document Object Model) u sekciji JavaScript. No dosta price krenimo sa rijesenjem ovog problema. Da bi ste ovo postigli stranice necete ucitavati putem standardnog taga <a href="adresa"> nego cemo koristiti JavaScript da bi u polje za adresu ucitali zeljenu stranicu. Na mjestu adrese vi cete opozvati jednu javascript funkciju, koja ce obaviti ostali dio posla.. Potrebne su nam 4 datoteke:

• FRAMESET, koja sadrzi definiciju frejma. • Meni, dakle navigacija koja sadrzi JavaScript • Banner datoteka, koja logicno sadrzi banner, i nema neke specijalne funkcije • Sadrzaj datoteka, koja ima pocetni sadrzaj, neku dobrodoslicu..

meni datoteka izgleda ovako:

<html> <head> <title>Meni</title> <script language="JavaScript">

 </script> </head> <body text=#000000 link=#0000CC vlink=#000099 alink=#0000FF> <h1>Linkovi</h1> <a href="javascript:DvaFrejma('stranica1.htm',1,'stranica2.htm',2)">Test stranica 1</a> <br> <a href="javascript:DvaFrejma('jack1.htm',1,'jack2.htm',2)">Jack Nickelson</a> </body> </html>

Mozda se sada malo zbunjeni no objasnit cu vam korak po korak sto smo ovdje napravili. 1. Kao prvo vidite JavaScript dio unutar html dokumenta koji sadrzi navigaciju. Sadrzi funkciju DvaFrejma koja vrsi ucitavanje zeljenih datoteka. Ova funkcija prima 4 argumenta i to adrese dvije i dva broja to su brojevi frejmova u koji ce se zeljena datoteka ucitati. Naime kao sto sam vec objasnio u lekciji D.O.M. (vidi JavaScript sekciju), unutar dokumenta nalazeci frameovi nose brojeve od 0 (to je prvi) do n (zadnji).U gornjem slucaju su takodje tako numerirani. Dakle navigacija je prvi i nosi broj nula, gornji mali je drugi dakle broj 1 i sadrzajni najveci je treci dakle broj 3. Naredbom parent.frames[broj].location.href mozete promijeniti sadrzaj datog frejma. Sada se mozda pitate zasto predajem i broj F1 i F2 u funkciju kada mogu direktno mijenjati. Stvar je u tome da ovim funkcija postaje tako reci dinamicno to jest mozete je primjeniti na bilo koji frameset, a ne samo na gornji. Vazno je samo da unutar link u samom startu dakle opozivu funkcije predate pravi parametar.. Pogledajmo josh jednom link koji opoziva funkciju: <a href="javascript:DvaFrejma('jack1.htm',1,'jack2.htm',2)">Jack Nickelson</a> Umjesto neke datoteke ili adrese, mi startamo gornjim kodom nasu funkciju i predajemo joj kao prvo URL1 dakle adresu npr bannera koji ce da se ucita gore i broj jedan, dakle ucitat cemo ovo u drugi frejm, i vrijednost URL2i broj 2, dakle tu datoteku ucitat cemo u treci frejm unutar gornjeg frejmseta. Prednost ove metode je u tome sto ovu funkciju mozete primjeniti i na neki frameset koji ima i vise dijelova npr 4 ili pak 5. Vazno je samo da predate pravi broj frame-a gornjoj funkciji.. Nadam se da ste sada u stanju primjeniti ovaj primjer, jednostavno iskopirajte gornji javascript kod unutar vaseg dokumenta navigacije, u <head> tag i linkajte dokumente kao u mom primjeru s tim da cete naravno postaviti vasa imena datoteki. Mozete podrazumijeva se koristiti i absolutne adrese tipa http://www.blabla.bla/imedatoteke.htmlna primjer.. Za bilo kakva pitanja u vezi ovog ili bilo kojeg drugog savjeta jednostavno nam posaljite ePostu !!

2. Prisilno otvaranje Frame-a. Ovaj problem poznat je svima koji odrzavaju stranice koje koriste frame-ove. Naime masine za pretrazivanje indexiraju vase stranice, neki surfer vas nadje i zaluta na vas server, ucita tu usamljenu datoteku, ako bog da pa i procita sve, no onda vjerojatno zbunjen gleda u to cudo od stranice i pita se a kamo dalje. Nije ni cudo nedostaje mu navigacija jer se nije ucitao frameset..vjerojatno napusti vasu domenu i eventualno vise nikada i ne dodje natrag. Bilo bi steta izgubiti tako josh jednog posjetitelja, zato zahvaljujuci JavaScript-u imamo rijesenje i za ovaj problem. Naime koristeci malo JavaScript koda mozete svaki pojedini dokument otvoriti unutar frameset-a, bez obzira da li on bio opozvan direktno ili putm linka unutar frejma. No morat cete dodati izvjesni kod unutar svakog pojedinacnog html dokumenta i morat cete promijeniti vasu frameset datoteku. No krenimo iz pocetka.

Ovo ide u sve stranice: <script language = "javascript"> if (top.location.href.lastIndexOf("index.htm")==-1) // gdje je index.htm ime vase FRAMESET stranice top.document.location.href="index.htm?"+document.location.href; // Ovdje predajete opozvanu stranicu kao parametar.. </script> </head> Ovo ide u frameset stranicu: <head> <title>Nova stranica 2</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <script language="javascript"> var params = "home.htm"; //ovdje ide stranica koja se ucitava uvijek kada neko pokusa da ucita //tvoj frameset fajl if (location.search) // tvoja frame set stranica je opozvana od neke druge stranice params=unescape(location.search.substring(1,location.search.length)); // variabla params sadrzi URL adresu trazene stranice // sada pomocu document.write sastavljash ostatak tvoje frameset stranice! document.write('</head>'); document.write('<frameset rows="64,*">'); document.write(' <frame name="gore" scrolling="no" noresize src="glava-banner.htm" target="Sadrzaj">'); document.write(' <frameset cols="150,*">'); document.write(' <frame name="navi" target="Glavniframe" src="navi.htm" scrolling="auto">'); // ovdje dodajesh vrijednost varijable params u dokument document.write('<frame name="Sadrzaj" scrolling="auto" src="'+params+'" >');

document.write(' </frameset>'); document.write(' <noframes>'); document.write(' <body>'); document.write(' <p>Ova stranice koristi frames/okvire, koje vas browser nazalost ne podrzava'); document.write('molim nabavite noviju verziju pretrazivaca...</p>'); document.write(' </body>'); document.write(' </noframes>'); document.write('</frameset>'); // ovo je kraj scripte i dokumenta </script> </html>

Na prvi pogled ovo izgleda malo komplicirano no objasnit cu vam korak po korak kako funkcionise. Ka prvo pogledajmo kod koji unosite u svaki dokument. Ovaj kratki javascript provjerava da li je stranica ucitana unutar frejma (s preduvjetom da se vasa framset datoteka zove index.html !!). Ukoliko to nije slucaj, onda ucitava frameset datoteku i predaje ime ove datoteke kao parametar. Da bi ste shvaliti sta taj parametar postize, pogledjmo kod koji ide u vasu frameset datoteku. Kao prvo definiramo varijablu params, koja sadrzi ime datoteke koja se standardno ucitava unutar frameseta kao sadrzajna datoteka. If petlja koju vidite gore, ispituje da li je vasa stranice (frameset) opozvana od neke druge stranice, dakle predana je kao argument iza upitnika (vidi kod koji ide u sve stranice). Onda se varijabli params predaje adresa date stranice (njeno ime) koje ce biti ucitano u zeljeni dio frame-a. Vazno je da ostatak framset slozite dinamicno pomocu document.write metode. Mi ucitavamo zejenu stranicu u frame Sadrzaj. To vidite u ovoj naredbi: document.write('<frame name="Sadrzaj" scrolling="auto" src="'+params+'" >'); Dakle varijablu params predajemo kao izvor za taj dio frejma, pa ukoliko je gornja if petlja bila TRUE onda se ucitava stranica koja je opozvana, a u protivnom se ucitava home.htm, dakle standardna pozdravna stranica na primjer.. Nadam se da ste shvatili cijeli postupak, za bilo kakva pitanja glede ovog ili bilo kojeg drugog savjeta posaljite nam ePostu!!!

Male tajne velikih majstora Ovdje vam predstavljamo nekoliko trikova sa JavaScriptom. Jos neke scripte naci cete u samoj JavaScript sekciji ili u arhivu besplatnih skripti. Sa JavaScriptom moguce je napraviti mnogo toga. Kao prvo vam predstavljam jednostavnu verziju JavaScript-a kojim mozete prikazati i sakriti Layere. Sto je i prilicno jednostavno. Po potrebi to kasnije mozete dalje usavrsavati.. Kao prvo pogledajte primjer, da bi ste vidjeli o cemu se radi

<script language="JavaScript">  </script> <body> <form> <input type="button" value="Sakrij se!" name="hit" onClick="javascript:gubise()"><br> <input type="button" value="Pokazi se!" name="hit2" onClick="javascript:pokazise()"><br> <div id="div1" style="position:absolute; left:176px; top:200px">Die Tanzen ja !!!!</div> <a href="#" onMouseOver="javascript:pokazise()" onMouseOut="javascript:gubise()"><img src="http://www.mission-one.de/clients/shoeshops/bild.jpg" width=149 height=97 border=0 alt="" onMouseOver="javascript:pokazise()" onMouseOut="javascript:gubise()"></a> </form> </body>

Ovo iznad je izvoni kod datoteke iz gornjeg primjera. Kao sto vidite ovaj se script moze primjeniti na vise nacina. U mom slucaju koristim kao prvo dva dugmeta (input tagovi), da bi sklonio i prikazao text. Druga je mogucnost, da naprimjer kada misem predjemo preko neke slike da se text pokaze i pri napustanju te iste nestane. Da bi smo to postigli koristimo takozvane event-handlere koji ce biti opisani u zasebnoj lekciji. Ovdje koristimo tri vrste tzv event handler-a. onMouseOver(misem preko objekta), onMouseOut(napustanje objekta) i onClick (klik na objekat). St se dogadja, pogledajmo gornji kod, i prvi dugmic, kada korisnik klikne na njega, dogadja se takozvani event, i browser salje poruku da se je dogodio click. Nakon toga se opoziva funkcija gubise, koja ovisno o browseru dati layer (u nasem slucaju se taj zove div1) sakriva. Obratite paznju na if petlje, one provjeravaju indirektno o kojem se browseru radi, i ovisno o tome sakrivaju layer. Problem je naime u tome sto svaki od browsera layere interpretira drugacije, kod explorera je to preko document.all.imelayera.style, Netscape putem document.layers,

a NS6 (to podrzava i Explorer 5-ica) sa document.getElementById. Dakle if petlja provjerava putem toga kako je layer interpretiran u DOM modelu, npr u slucaju NS 6 tek treca petlja kao rezultat daje TRUE, nakon toga "govorite" browseru sto da ucini u ovom slucaju da postavi atribut style.visibility na visible. NS6 i svi Internet Exploreri koriste visible da bi prikazali i hidden da bi sakrili layer. Dok Netscape 4 istu funkciju obavlja sa hide i show. Vazna primjedba kod istih funkcija koji rade putem slike (onMouseOver onMouseOut), da se ti handleri za netscape moraju postaviti unutar link (dakle <a href tag), a ne kod slike. Ja sam ovdje postavio i u img tag i u link tag). Ovu skriptu mozete proizvoljno mijenjati i koristiti, idejama nema kraja. Na primjer u layer postavite tablicu, sakrijete ga i onda kada neko misem predje preko nekog linka pojavi se mali layer koji sadrzi objasnjenje tog linka. Varijacije su ofromne, a ulozeni trud prilicno nizak..skoro nikakav! Nadam se da ste shvatili cijeli postupak, za bilo kakva pitanja glede ovog ili bilo kojeg drugog savjeta posaljite nam ePostu!!! Sljedeci skript koji predstavljamo sa objasnjenjem je password zastita. Koja to ustvari i nije, i koju je vrlo lako "prevariti". No ovaj skript nalazi se ovdje samo u obrazovne svrhe.

<script language="JavaScript">  </script> function Passw2() { var password1 = 'wk87Qo3N' password=prompt('Zasticena area na serveru, molimo ukucajte sifru:',' '); if (password == password) { location.href="http://www.vasadomen.com/downloadstranica.html";} else {location.href="http://www.vasadomen.com/pogresnastranica.html";} }

Sto se ovdje dogadja, JavaScript pri npr startu stranice ili pri desnim klikom pita sifru, i redirektira posjetitelja stranice na stranicu koju je u biti ukucao sifrom, nor ako ukcate tocnu sifru onda as on salje na tocnu stranicu, dakle jedini uvjet je da se stranica koju zelite sakriti zove isto kao i sifra. Postoji mnogo varijacija ovog skripta. Osim ovog mozete npr da bi ste dopustili da samo odredjene osobe skinu neki fajl sa vaseg servera umjesto da ga kao u gornjem primjeru redirektirate direktno, prvo uporediti pomocu if petlje da li su uneseni i potrebni password jednaki i ukoliko da onda ga redirektirati na link: <a href="#" onClick="Passw2()">Klikni za download</a>

U ovom slucaju se provjerava da li su obe sifre jednake i ukoliko je to slucaj posjetitelj se redirektira na odgovarjucu stranicu, a u protivnom na neku stranicu koja nije tocna. Zastitu mozete jos mrvicu poboljsati time sto se i to moze manipulirati. Trik je u tome da javascript koji vrsi provjeru sifre ne integrirate u datoteku, vec ga postavite u jednu zasebnu .js datoteku.. No i to se npr s Explorerom 5.x moze lako zaobici tako sto posjetitelj ode na Save As, i time dobije ne samo stranicu nego i sve datoteke, dakle i stylesheets i JavaScript datoteke i svu grafiku..

Documents

Html - tecaj