IZRADA WEB STRANICA

Postovani posjetioci i buduci webmasteri.Ovde imate prikaz kako napraviti web stranicu.Vrijedi se potruditi i procitati sve ovo dabi vam bilo lakse u izradi vase www web stranice.Ako vam sta nebude jasno kontaktirajte mene.Vrlo rado cu vam pomoci.

Kako napraviti vlastitu www stranicu? To je pitanje s kojim se susretnu kad - tad svi koji se koriste internetom, a tu onda već počinju problemi. Najbolje je ako imate prijatelja koji vam može pomoći savjetom, uputiti vas na literaturu koju možete koristiti ili stranice na internetu koje imaju kratke tečajeve za izradu www stranica. Često kao webmaster portala KA - NET dobivam mailove u kojima me ljudi traže razne savjete kako napraviti određene stvari na svojoj web stranici, stoga sam se odlučio temeljm tih upita izraditi kratko uputstvo za početnike. No, da puno ne dužim - krenimo na posao i to odmah s prvim pitanjem... Što je to Internet? Pojednostavljeno možemo reći da je to mreža svih mreža - zbirka svih međusobno povezanih mreža na svijetu ili da je to mreža koja povezuje nekoliko milijuna računala na svijetu. Korisnici se internetom služe korištenjem različitih usluga. Najpoznatije i najkorištenija usluga je razmjena elektroničke pošte (e- mail), zatim pregled multimedijskih stranica (www), čitanje vijesti (usenet) i još mnogo, mnogo drugih usluga koje svaki prosječan surfer brzo upozna. Davatelj usluge - ISP (Internet Service Provider) mora raspolagati jačim računalom koje će biti spojeno na Internet, te na to računalo imati instaliranu programsku podršku koja omogućuje objavu usluga na internetu - to računalo nazivamo server ili na hrvatskom poslužitelj. Svaki poslužitelj ima svoju adresu kao naprimjer: www.geocities.com ili www.plus.hr. Da bismo mogli pristupiti internetu i pozvati željenu www stranicu na svojem računalu moramo imati instaliranu programsku podršku, a to je pretraživač (browser). Njegova je namjena pozvati poslužitelj i zatražiti informacije s njega. Najčešće korišteni pretraživači su Microsoft Internet Explorer i Netscape Navigator. Kako to izgleda pogledajte na slici: Korisnik s instaliranim pretraživačem zahtjev korisnika www Server koji ispunjava sve zahtjeve korisnika HTML - Hypertext Markup Language HTML je jezik kojim je moguće formatirati izgled www stranice, koristi se od 1992. godine. Svaka www stranica koju poslužitelj šalje pretraživaču nije čisti tekst već sadrži niz informacija u skladu s HTML jezikom koje govore pretraživaču kako dokument treba prikazati. HTML predstavlja dogovor o zajedničkom jeziku između autora stranica i pretraživača - komunikacija i razmjena informacija je moguća isključivo ako obje strane govore isti jezik. HTML ne valja doživjeti kao neku mističnu stvar koja je rezervirana samo za računalne stručnjake krvavih očiju i sa srčanom aritmijom od prevelikih količina kave koja ih drži budnima kroz noć. Naprotiv, HTML je razmjerno jednostavan jezik koji je moguće savladati uz vrlo malo truda. Tim više, nakon što se savlada osnovna averzija i probije početna barijera, izrada HTML (odnosno www) stranica može postati užitak. HTML jezik daje nam osnovni skup kodova koje možemo kombinirati na razne načine poštujući neka osnovna pravila. Za izradu stranica potrebna je samo još dovoljno mašte da se osnovni kodovi povežu na različite načine te kao rezultat može proizići www stranica visoke kvalitete. Na Internetu povezano je vrlo mnogo različitih računala koja koriste različite unutarnje jezike za prikaz podataka. Također, www stranice moraju moći čitati osim računala i ljudi. Stoga je HTML jezik tekstualan. Kodovi HTML jezika su zapravo riječi (često skraćenice engleskog jezika) koje je moguće kombinirati na razne načine.
Prednosti Html-a Prije nego što se upustimo u sam jezik i u način izrade www stranica, potrebno je reći riječ-dvije o tome zašto se na Internetu koristi baš HTML. Mnogim korisnicima, pogotovo onima koji dolaze s Windows platforme može se činiti da bi bilo bolje i jednostavnije kada bi se koristili neki široko korišteni oblici dokumenata, na primjer Word dokumenti ili PDF dokumenti. No postoje dobri razlozi zašto je www usluga zasnovana na HTML dokumentima. Kao prvo, (iako se to može činiti nevjerojatnim) nisu sva računala Windows računala, već postoji mnogo različitih računalnih sustava. www je usluga koja mora omogućiti rad svih tih računala međusobno. To je između ostaloga i razlog zašto je HTML tekstualan (a ne binaran) - sva računala raspoznaju tekst i barataju s njime na jednak način. Kada bi osnovu predstavljali Word dokumenti, Internet bi se sveo na "WindowsNet", što bi bilo vrlo pogubno po razvoj informatike u budućnosti. Osim toga, većini tipova dokumenata je osnovno kako će dokument izgledati ispisan na papiru. HTML ima posve drugu namjenu - nije bitan precizan ispis na papiru. već je bitno dokument ispravno prikazati u prozoru pretraživača. Pri tome valja uzeti u obzir da različiti korisnici koriste različite pretraživače na različitim ekranskim rezolucijama. Stoga je HTML predviđen primarno za prikaz na ekranu, a ne na pisaču. Bitan dio HTML jezika jest mogućnost stvaranje hiperveza između dokumenata. Zamislimo situaciju u kojoj kroz nekoliko različitih dokumenata se govori o jednoj tematskoj cjelini. Svaki od dokumenata može sadržavati veze na druge dokumente. Korisnik prilikom pregleda dokumenata može jednostavnim klikom miša na vezu preći na drugi dokument te tako dobiti dodatne informacije. Na taj način olakšano je snalaženje u velikim bazama informacija te pronalaženje srodnih sadržaja. Ograničenja Html-a Neke prednosti HTML-a ujedno su i njegove najveće mane, ovisno o kutu gledanja. Naime, dizajn HTML stranica se često danas prepušta grafičarima koji imaju dosta velike zahtjeve po pitanju preciznosti namještanja pojedinih grafičkih detalja na stranicama. Valja odmah napomenuti da za takve stvari HTML nije zamišljen te da to nije PostScript. HTML ima određena ograničenja koja nije uputno pokušavati izbjeći različitim trikovima već je potrebno prihvatiti HTML. Tipičan primjer je prazno mjesto na ekranu. Da bi pogurali dio dokumenta s ekrana, mnogi autori će jednostavno dodati nekoliko praznih redova u dokument i smatrati problem riješenim. No to nije dobro: mnogi korisnici će pregledavati dokument u prozoru drukčije veličine (jer imaju drugačiju ekransku rezoluciju ili jednostavno bolju grafičku karticu). U slučaju da je u dokument ubačena praznina koja dobro izgleda na rezoluciji 800 X 600 točaka, na rezoluciji 1024 X 768 stranica će imati neugodnu "rupu" u sredini.
Početak rada Da bismo počeli izgrađivati našu stranicu moramo imati određeni alat. Svakako temeljni alat bi bio HTML editor i neki grafički program za obradu slika. HTML dokumente moguće je unositi pomoću bilo kojeg programa za unos teksta. Pri tome neki autori idu tako daleko da koriste isključivo Notepad, jednostavan program za unos teksta koji dolazi s Windows operacijskim sustavom. Donekle se taj pristup unosa HTML dokumenata može smatrati mazohističkim, no svakako je moguć. Postoje mnogi editori koji olakšavaju unos HTML dokumenata. Pri tome editore za unos dokumenata možemo podijeliti na dvije velike kategorije: editori koji se temelje na unosu teksta i editori koji se temelje na vizualnom dizajnu stranice. Vizualni editori imaju mnoge prednosti koje će ih činiti pogodnima za početnike - naime, način korištenja tih alata je vrlo sličan načinu korištenja programa tipa Word i sličnih, s kojima su mnogi korisnici već dobro upoznati. No taj pristup ima i mnoge mane. Kao prvo, princip razdvajanja sadržaja od prezentacije dokumenta je vrlo teško postići. Stranice koje se generiraju vizualno redovito su znatno veće nego što je to potrebno, a dobiveni HTML kôd je redovito vrlo nepregledan. Također, pomoću programa za vizualan unos stranice teško je unijeti skripte u dokument. Stoga smatram da svaki informatičar koji želi u potpunosti ovladati umijećem izrade stranica mora obavezno poznavati HTML jezik i biti u stanju stranice unijeti tekstualno. Vizualni unos dobro je koristiti samo za postavljanje kostura stranice, no detaljnu doradu gotovo u pravilu je moguće isključivo obaviti tekstualno. Vizualni alat koji se dosta koristi za unos HTML stranica jest Microsoft FrontPage. No taj program je vrlo velik i složen za korištenje, a također traži vrlo velike resurse računala. Pri tome dobiveni generirani HTML kod je dosta loše strukturiran i pun nepotrebnih oznaka.(Bože sačuvaj!) Na internetu može se naći popriličan broj free editora različite kvalitete od vrlo dobrih do toliko loših da nisu vrijedni ni minute downloada. Preporučam da odete na stranicu Downloads-CNET.com, gdje ćete naći ponudu od preko stotinjak editora, pa odaberite svog favorita. Meni osobno najdraži je 1 st Page od Evrsofta, no morate poznavati barem osnove HTML jezika. Od editora za preporučiti izdvojio bih slijedeće: AceHTML4 i Macromedia Dreamweaver. Od grafičkih programa preporučio bih Adobe Photoshop, COREL i Paint Shop Pro u njim možete uraditi sve što želite, najvažnije je da vam grafički program ima mogućnost prebacivanja slika iz jednog formata u drugi u zavisnosti za koji ste se format odlučili. Za izradu web stranica koriste se dva formata i to JPG i GIF. Također osim ovih temeljnih alata bilo bi jako dobro da imate kolekciju pozadina, animacija, gumbiju, skripti i drugih korisnih alata koji će vašu stranicu učiniti dinamičnijom i privlačnijom. Skripte su vrlo složene za programiranje i svaki početnika ima velikih problema da izađe na kraj i sa gotovim skriptama, ali za to ima lijeka posjetite ovaj link www.bravenet.com i jednostavnom metodom copy - paste na vašim stranicam imati ćete chat, forum, izraditi svoju mailing listu, slati razglenice i čestitke i još puno toga. Sada kada imamo editor, grafički program i ostale korisne alate možemo početi s izradom www stranice.
Izrada stranice Doctype Uloga ovoga elementa je najaviti Internet pretraživaču kakav dokument slijedi. Svaki dokument je moguće opisati pomoću definicije tipa dokumenta (engl. Document Type Definition - DTD) koja se poziva pomoću identifikatora, kao na primjer -//W3C//DTD HTML 4.0 Transitional//EN. U gornjem primjeru se najavljuje javno dostupna definicija tipa dokumenta (zbog riječi public) verzije 4.0. Nije nužno pretjerano razmišljati o strukturi tog prvog retka, već ga je potrebno samo u svakom dokumentu navesti kao prvi redak čime se jednostavno svima daje na znanje da se radi o HTML dokumentu verzije 4.0. Posljednja verzija HTML-a nosi oznaku 4.01. i to je prijelazna verzija prema XML-u koji bi se u budućnosti trebao koristi za izgradnju web stranica. No, to vam spominjem samo usput i nemojte glavu previše razbijati XML-om, jer i on će vam biti jednostavn kad savladate HTML. Html Element html sadrži kompletan dokument. Njega možemo shvatiti kao element svih elemenata te je cijeli sadržaj www smješten unutar tog elementa. Taj element služi za objedinjavanje svih ostalih dijelova dokumenta te označava da slijedi HTML dokument. Podjela dokumenta na tijelo i glavu Svi HTML dokumenti sastoje je od glave () i tijela () . Glava je dio dokumenta u kojemu se navode neke općenite informacije o dokumentu, kao što je naslov dokumenta, jezik u kojemu je dokument pisan i slično. Tijelo dokumenta je dio koji objedinjuje kompletan sadržaj dokumenta (cjelokupni tekst i grafiku). Glava dokumenta navodi se unutar elementa< head>, dok se tijelo dokumenta navodi unutar body elementa. Element ima niz atributa kojima je moguće pobliže odrediti način prikaza stranice. Naslov dokumenta Svaki HTML dokument ima određeni naslov. Prilikom prikaza tekst naslova će se pojaviti u naslovnoj traci prozora pretraživača. Naslov se navodi unutar title elementa. Često se na Internetu mogu primijetiti www stranice koje nemaju naslov ili kojima je naslov nesuvisao te ne opisuje sadržaj www stranice. Smatramo da je takvo rješenje vrlo loše - razumljiv naslov svake stranice je "pravilo lijepog ponašanja na Internetu". Često se dešava da autori izrade predložak stranice kojeg potom koriste za izradu drugih stranica. Pri tome na predložak unutar elementa< title> često se unese tekst kao "Proba..." i slično. No prilikom izrade stranica autori se koncentriraju na izgled i na sadržaj stranice te vrlo često zaborave promijeniti naslov iz predloška, te se često događa da stranice s pomoćnim tekstom kao naslovom budu postavljene na www poslužitelj, što se može shvatiti samo kao sramota onoga koji stranice radi. Na žalost meni se to vrlo često događa, a što ćemo - ljudi smo. Svaki HTML dokument obavezno mora imati razumljiv naslov koji će opisivati sadržaj dokumenta.
Meta-podaci o dokumentu Pojednostavljeno rečeno umetanjem meta tagova povećavate šansu da potencijalni posjetioci pronađu vašu stranicu pomoću nekog od svjetskih pretraživača. Što sve sadrže meta tagovi i kako se izrađuju možete saznati ako kliknete ovdje. Napominjem da će vaša stranica biti ispravna i bez meta tagova, ali time umanjujete šansu da je potencijalni surfer pronađe. Određivanje kodne stranice za prikaz "naših" slova U svijetu postoji vrlo mnogo različitih jezika s različitim znakovima koji se koriste za pisani tekst. Da bi se tekst ispravno prikazao u pretraživaču potrebno je izabrati odgovarajući font, odnosno ispravno rečeno, potrebno je izabrati kodnu stranicu. To se može učiniti pomoću sljedećeg meta elementa: . Ubacivanje tog elementa u glavu trebalo bi biti obavezno za sve hrvatske dokumente. Još uvijek možemo pronaći domaće stranice koje su pisane bez tog meta taga, te autori stranica pribjegavaju pisanju teksta bez naših slova (š, đ, č, ć). Moram priznati da sam u početku i sam tako radio. Valja još napomenuti da se ovaj element obavezno unijeti točno onako kako je gore navedeno, s istim velikim i malim slovima. To se posebno obnosi na Content-Type riječ koja mora biti unesena točno tako (s C i T velikim, a sve ostalo malim slovima). Umjesto gore navednog elementa možete koristiti i opći standard (kojeg prije nije bilo) koji će prepoznati naša slova, a on izgleda ovako: Odabir pozadine - background Svaka stranica mora imati pozadinu - background, za što možete koristiti samo boju ili neku sliku. Na internetu možete naći veliki izbor free backgrounda kao i na mojoj stranici background . Primjer koda za background: - ovo je primjer koda kada za background koristimo sliku. - ovo je primjer koda kada za background koristimo boju. Moram vas upozoriti kada za pozadinu odaberete sliku pazite da nije prevelika i da se dugo ne očitava, znate i sami nitko ne voli kada se stranica dugo otvara, također vodite računa da boja ne bude prenapadna i iritirajuća.
Odabir boja Postoje dva osnovna načina za prikaz boja. Prvi način je odabir boja prema njenom imenu. HTML standard definira nekoliko standardnih boja i njihovih imena koja stoje na raspolaganju autorima HTML stranica. Ta standardna imena su: Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Aqua, Green, Lime, Olive, Yellow, Navy, Blue i Teal. Drugi način je zadavanje boja pomoću tri komponente RGB vrijednosti, odnosno udjela crvene, zelene i plave. Boja se zadaje u sljedećem obliku: #rrggbb gdje rr predstavlja iznos crvene komponente, gg iznos zelene komponente, dok bb predstavlja iznos plave komponente. Pri tome sve te tri vrijednosti mogu imati iznos od 0 do 255, s time da se one predstavljaju u heksadecimalnom brojevnom sustavu, te da se vrijednostima koje imaju jednu znamenku obavezno dodaje nula ispred znamenke. To znači da su dozvoljene vrijednosti za svaku komponentu od 00 do FF. Na primjer, boja Yellow ima sljedeće vrijednosti: #FFFF00 Dakle, FF za crvenu, FF za zelenu i 00 za plavu komponentu. Dosta je teško napamet odrediti RGB komponente boja, no editori koje sam gore naveo nude korisniku pomoć tako da prikažu paletu boja na ekranu te omogućavaju vizualno mijenjanje parametara te odmah pokazuju dobivenu boju. Na kraju, kad je korisnik zadovoljan s odabranom bojom alat će sam generirati RGB vrijednosti i ubaciti je na mjesto u dokument. Odabir slova - fonta Vrlo važna stvar kod izrade www stranice je i odabir fonta s kojime ćemo raditi, odmah na početku moram vas upozoriti nikad ne birajte neke egzotične fontove, jer ih stariji pretraživači neće moći očitati zato je najbolje da primjenite neke standardne kao što su Times New Roman, Arial i Verdana. Primjer koda za odabir slova: Primjer fonta plave boje veličine slova 3 i stil Italic
Umetanje naslova Ponekad je potrebno istaknuti pojedine dijelove dokumenta kao naslove. To se može učiniti pomoću elemenata za logičko formatiranje h1, h2, h3, h4, h5 i h6 (elementi vuku korijen engleskog naziva za naslov - heading). Ti elementi imaju uvijek početnu i završnu oznaku, a sadržaj unutar elementa bit će prikazan tipično masnijim i većim slovima te s razmakom prije i poslije elementa. Također, svaki element će se obavezno prikazati zasebno na liniji. Pri tome moguće je uvesti hijerarhiju naslova. Element h1 označava naslov najveće razine te se ispisuje najvećim slovima, potom h2 označava prvi podnaslov te se ispisuje nešto manjim slovima, i tako redom sve do h6. Na primjer:

Ruska književnost

Poezija

Jesenjin

na pretraživaču će to izledati ovako: Ruska književnost Poezija Jesenjin Važno je imati na umu da vrsta slova kojom se pojedini naslovi prikazuju nije propisana standardom, već ovisi o svakom pojedinom pretraživaču. No na svu sreću, proizvođači glavnih pretraživača su se uspjeli dogovoriti barem oko osnovnog načina prikaza te se može očekivati neka dosljednost u prikazu. Umetanje horizontalnih linija www stranice mogu u svojem tekstu imati nekoliko odvojenih cjelina koje je dobro i vizualno odvojiti, kao što su različite opaske i komentari. Da bi se to omogućilo HTML jezik raspolaže s osnovnom mogućnosti dodavanja horizontalnih linija pomoću elementa hr (od engleskog horizontal rule). Element hr je uvijek prazan (ne može imati sadržaj) te nema završnu oznaku. Prilikom nailaska na njega pretraživač će prikazati horizontalnu liniju u novom retku centrirano. Element hr može imati atribute za određivanje načina prikazivanja linije. Osnovni atribut jest width kojim je moguće definirati duljinu linije. Vrijednost atributa može biti broj (koji predstavlja duljinu linije u točkama) ili postotak ukupne raspoložive širine. Sljedeći primjer crta liniju čija će duljina iznositi 70% ukupne raspoložive duljine ekrana:
Na pretraživaču to će izgleati ovako: -------------------------------------------------------------------------------- Valja primijetiti da je znatno bolje mjerne veličine zadavati pomoću postotaka, a ne pomoću vrijednosti u točkama. Naime, različiti korisnici pregledavat će stranice u pretraživačima s prozorima raznih širina. Linije, i uopće svi ostali grafički objekti koji imaju apsolutne veličine neće se moći prilagoditi različitim širinama prozora, već će biti ili premali ili preveliki. S druge strane, grafički elementi s relativno zadanim veličinama pomoću postotaka raspoloživog prostora uvijek će se moći prilagoditi raznim veličinama prozora te će u pravilu bolje izgledati. Veličine grafičkih elemenata valja navoditi relativno, ako je to moguće, da bi se postigli bolji rezultati u slučaju prozora različitih veličina. Pomoću atributa align moguće je odrediti da li će se linija prikazati lijevo (u slučaju vrijednosti left), desno (u slučaju vrijednosti right) ili centrirano (podrazumijevana vrijednost center). Na primjer:
Na pretraživaču to će izgledati ovako: -------------------------------------------------------------------------------- Također je moguće odrediti debljinu linije, i to pomoću atributa size. Vrijednost tog atributa predstavlja debljina linije u točkama (nije moguće zadati relativnu širinu postocima):
Na pretraživaču to će izgledati ovako: --------------------------------------------------------------------------------
Umetanje slika Da bismo sliku (fotografiju) umetnuli u našu stranicu moramo je najprije pripremiti jer na internetu su podržana dva osnovna formata gif i jpg, a to možemo učiniti s nekim od već spomenutih grafičkih programa. Važno je za istaći da uvijek trebamo voditi računo o kvaliteti slike i njezinoj veličini. gif format najčešće se koristi za prikaz animacija i grafičkih detalja (strelica, gumbiju, oznaka i manjih sličica), dok se jpg format koristi za prikaz fotografija. Osnovni kod za umetanje slika izgleda ovako: Slike možemo koristiti i za linkanje drugih stranica, a kod izgleda ovako: Na internetu je uvriježen način prikazivanja slika na principu thumbnaila, što znači da na jednoj stranici možemo imati više manjih sličica obično u gif formatu, a ako netko želi vidjeti puni format slike klikom na manjui sličicu otvara mu se slika u punom formatu, kod za taj prikaz slika izgleda ovako: Umetanje tablica Gotovo da nema stranice na internetu koja u svojoj strukturi nema tablicu i to prvenstveno iz razloga što je pomoću tablica najlakše strukturirati stranicu i izbjeći nepoželjne praznine koji bi se na drugi način vrlo teško izbjegle. Svaka tablica otvara se slijedećim kodom a zatvara , redci (kolone) imaju kod zatvaraju se s , ćelije unutar redaka imaju kod . Primjer za jednu jednostavnu tablicu s dva redka i u svakom redku dvije ćelije izgleda ovako:
zatvaraju se s
1 2
1 2
S ovakvim kodom tablica izgleda ovako: 1 2 1 2 Na ovome primjeru možemo zamijetiti dvije vrlo važne stvari, a to je da se mora definirati okvir - border tablice koji može biti nula i tada nemamo vidljive okvire, a može biti i puno deblji okvir do 10 i veličina tablice koja se može dati postotno kao u ovome slučaju, ali se može dati i u pixelima. Međusobni razmak ćelija određuje se atributom cellspacing elementa table. Vrijednost tog atributa predstavlja željeni razmak između ćelija u pixelima. Međusobni razmak ćelija određuje se atributom cellpadding elementa table. Vrijednost tog atributa predstavlja iznos željene unutarnje margine u pixelima. Primjer koda za tablicu s gore navedenim atributima:
1 2
1 2
S ovakvim kodom tablica izgleda ovako: 1 2 1 2 Upočetku rad s tablicam može izgledati poprilično komplicirano no kada se jednom nauči izrada stranica postaje šala. Rad s tablicama spada u napredno formatiranje stranica stoga bi samo uređivanje tablica zasluživalo prostora koliko i ovaj cijeli naputak, no to ćemo učiniti nekom drugom zgodom. Ovaj put još samo jedan koristan savjet; možete umetati tablicu u tablicu, ali nije preporučljivo ići više od tri razine jer će se stranice dugo očitavati.
Umetanje hiperveza Velika prednosti www stranica nad statičnim papirnatim dokumentima jest mogućnost povezivanja dokumenata pomoću sustava hiperveza. Hipervezu možemo shvatiti kao pokazivač na neki drugi dokument na Internetu. Korisnik pritiskom miša može slijediti vezu, odnosno zatražiti dokument na koji veza pokazuje. Time postupak pretraživanja Interneta dobiva posve novu dimenziju - www stranice nije više potrebno pregledavati slijedno i u unaprijed određenom redoslijedu, već je moguće odabrati put kroz stranice shodno vlastitim interesima i potrebama. Hiperveze se koriste za povezivanje stranica unutar jedne stranice (npr. za skok na vrh stranice), za povezivanje unutar grupe stranica (na primjer, za povezivanje sadržaja s pojedinim stranicama) i za povezivanje sa sasvim drugim stranicama na drugim računalima. Također, hiperveze mogu pokazivati na Internet resurse koji uopće nisu stranice (na primjer, na e-mail adrese, poslužitelje arhive datoteka i slično). Hiperveza se postavlja preko URL adrese objekta na koji hiperveza pokazuje. Zbog toga je osnovno razumjeti kako funkcionira sustav identifikacije Internet objekata putem URL-a. Svi www resursi (stranice, slike, zvukovi, programi i slično) moraju imati svoju adresu na Internetu kako bi ih se moglo identificirati i pozvati. Na primjer, www pretraživač se može usmjeriti na određenu adresu tako što mu se u liniju za adresu upiše URL stranice koja nas interesira. Za umetanje hiperveza na stranicu koristi se element a (od engleske riječi anchor što znači sidro). Taj element koristi se i za postavljanje hiperveze i za označavanje lokalnog mjesta u dokumentu te se stoga koristi na dva prilično različita načina. Prvo ćemo vidjeti kako se element a koristi za postavljanje hiperveza na druge dokumente. Hiperveza uvijek djeluje između dva www objekta (npr. dvije stranice) koje su povezane URL adresom. Hiperveze su najčešće jednosmjerne - one vezuju jedan dokument (izvor hiperveze) s drugim dokumentom (ciljnim dokumentom) te je za ostvarenje hiperveze bitna URL adresa ciljnog dokumenta. Kod za umetanje hiperveze je slijedeći: Tekst hiperveze Najvažniji i obavezan atribut a elementa jest URL_adresa - taj atribut daje URL adresu dokumenta na koji se želi skočiti prilikom aktiviranja hiperveze. Atribut title nije obavezan te se može izostaviti i vrlo se rijetko koristi. On služi tome da bi se opisala uloga hiperveze kroz nekoliko kratkih riječi. Kada se kursor miša umiri iznad hiperveze, većina pretraživača će prikazati u malom oblačiću tekst naveden kao vrijednost tog atributa. Tekst hiperveze je dio dokumenta koji se prikazuje korisniku na koji je moguće kliknuti mišem da bi se hiperveza aktivirala. Ako želite saznati nešto više o meni kliknete mišem ovdje. U gornjem primjeru www pretraživač će cijeli odlomak prikazati zajedno, s tom razlikom što će tekst "kliknete mišem ovdje" biti prikazan bojom odabranom za link i podcrtano. Prilikom pritiska miša ta taj tekst www pretraživač će skočiti na stranicu zadanu vrijednosti atributa href. Element a može se koristiti i za određivanje lokalnog mjesta u dokumentu. U tom slučaju mu je opća struktura ovakva:
Element a tada mora imati atribut name čija vrijednost daje naziv lokalnom mjesta hiperveze. Sam element može, ali i ne mora imati neki sadržaj, no završna oznaka elementa mora biti prisutna. Ako se i navede tekst između oznaka i to neće utjecati na način prikaza teksta. Naziv lokalnog mjesta ne smije sadržavati praznine. Oznake lokalnih mjesta se često koriste za pomicanje unutar stranice. Naime, u slučaju većih stranice (kao naprimjer ovo uputstvo), dobro je na početku stranice postaviti kratak sadržaj s pregledom svih informacija na stranici i s hipervezama na lokalna mjesta unutar stranice. Tada korisnik prilikom pregledavanja stranica putem hiperveze može skočiti na željenu temu. Nakon što je gotov s čitanjem pojedine teme na kraj teme se postavlja hiperveza natrag na sadržaj. Time se ostvaruje jednostavna navigacija unutar stranice kao u našem primjeru: vrh Dakle da konstatiramo za umetanje hiperveze unutar stranice trebaju nam dva kod: - prvi kod stavljamo na mjesto na koje želimo "skočiti", a on izgleda ovako - drugi kod stavljamo na mjesto skojega "skačemo", a on izgleda ovako: Umetanje e-mail adrese O samoj elektroničkoj pošti i njezinoj namjeni nećemo govoriti, jer za pretpostaviti je da se svaki početnik na internetu njome zna služiti. Sada ćemo prikazati dva osnovna načina na koji se umeće e-mail adresa u stranice. Prvi način je kada se koristimo tekstom, a kod izgleda ovako: webmaster@ka-net.net Drugi način je da umjeto teksta koristimo se slikom ili animacijom, a kod izgleda ovako: vaš tekst ili slika Umetanje formi (obrazaca) Internet omogućava dvosmjernu komunikaciju te je vrlo jednostavno moguće izraditi komunikacijske sustave koji su interaktivni te omogućavaju znatan upliv korisnika na tok pristupa podacima. www nije u tome iznimka. Jezik HTML raspolaže širokim spektrom mogućnosti kojim je moguće postići dvosmjernu komunikaciju s korisnikom, a jedan od najznačajnijih su HTML forme. Pomoću HTML formi moguće je u prozoru pretraživača prikazati obrazac kao na ovoj stranici TZ Karlovačke županije. Korisnik može popuniti razne informacije iz formulara te ga poslati natrag poslužitelju na obradu. To otvara sasvim nove mogućnosti primjene Interneta na stvari kao što su trgovina preko Interneta, pristup velikim bazama podataka i slično. Izrada formi je dosta složen posao te obuhvaća znatno više od pukog prikazivanja različitih polja u HTML stranicama - taj dio posla nije ništa složeniji od primjerice izrade tablica te se obavlja pomoću novih elemenata. Da bi se s nešto stvarno moglo i učiniti s podacima koje korisnik unese u formu, potrebno je izraditi program koji će na poslužitelju prihvatiti podatke i obraditi ih te generirati odgovor, što može biti dosta složeno. Za to se koriste CGI skripte (CGI - skraćenica od Common Gateway Interface), ASP, ASP.NET, PHP... za koje pojednostavljeno možemo reći da su to programi koji se izvršavaju na poslužitelju (serveru), te su povezani s www stranicama korisničkim pretraživačem. Za izradu skripti treba poznavati neki od programskih jezika koji dotični server prepoznaje kao što je to naprimjer Perl(Linux serveri) ili Visual Basic(Windows serveri). Na sreću za sve one koji nepoznaju ni jedan programski jezik za izradu skripti gotovo svi hostovi nude i daju na raspolaganje svoje gotve skripte koje možete koristiti za izradu anketa na vašim stranicam, knjige gostiju i sličnih stvari. Za izradu mailing lista, foruma i sličnih stvari možete se koristim uslugom www.bravenet.com koji imaju vrlo dobre, jednostavne i besplatne alate te ih od svega srca preporučam. Sve forme se odjeljuju od ostatka HTML stranice unutar< form> elementa. Unutar njega navodi se tekst forme te različite kontrole kojima se korisniku omogućava unos podataka. Element form ima dva osnovna atributa kojima se određuje kako će se podaci na poslužitelju obraditi: action i method. Vrijednost atributa action jest URL programa kojem će se podaci iz forme poslati te koji će ih obraditi(npr.cgi-bin). Atribut method označava način kako će se podaci poslužitelju poslati, te može imati vrijednost get i post. Dovoljno je samo reći da se najčešće koristi metoda post koja omogućava slanje većih količina podataka poslužitelju. Forme se koriste tako da se korisniku prikaže niz polja za unos podataka. Postoji više tipova tih polja: polja za unos teksta, padajući izbornici, liste opcija, odgovori da/ne te gumbi kojima je formular moguće potvrditi ili poništiti. Unos podataka označava se pomoću input elementa pomoću kojeg je moguće na formi prikazati gotovo bilo koji tip polja za unos. Različiti atributi tog elementa određuju koje će se polje za unos teksta prikazati te kako element valja prikazati. Osnovni atribut je type koji određuje tip polja za unos podataka te može imati jednu od sljedećih vrijednosti: text - unos jedne linije teksta password - unos linije teksta pri čemu se znakovi prikazuju kao zvjezdice (obično se koristi za unos lozinke) checkbox - omogućava unos da/ne odgovora radio - omogućava izbor jedne od niza vrijednosti submit - gumb za slanje forme poslužitelju reset - gumb za brisanje svih elemenata forme na početnu vrijednost file - kontrola za pošiljanje datoteke poslužitelju hidden - skrivena kontrola image - kontrola koja prikazuje sliku button - gumb textarea - za unos teksta - komentara, odgovora i sl. Svaka kontrola za unos podataka mora imati ime koje se može postaviti pomoću atributa name. To ime će biti proslijeđeno poslužitelju na obradu zajedno s podacima koje je korisnik unio u obrazac. Također, podrazumijevana, odnosno početna vrijednost kontrole može se postaviti pomoću atributa value - prikazana vrijednost će jednostavno biti prikazana u kontroli odmah nakon pozivanja odgovarajuće www stranice. Element input nema sadržaja niti završne oznake. Evo primjera koda za jednu formu:
Traži riječ:
Na pretraživaču će to izgledati ovako: Traži riječ: Ovo bi bilo temeljno što se mora znati o formama, možda izgleda složeno ali gotovo svi HTML editori imaju predloške gotovih formi koje samo prilagodite svojim potrebama i neće biti problema.
Postavljanje stranice na server Za pretpostaviti je da smo slijedeći ovo uputstvo, koristeći editor i maštu napravili na našem računalu lijepe i funkcionalne stranice što znači da ih treba staviti na Internet. Da bismo naše stranice stavili na Internet postoji nekoliko načina, ja ću obraditi dva i to najčešće korištena. Prvi i najednostavniji, ali i najsporiji način je pomoću file managera. Jedan od svjetski poznatih hostova Yahoo!GeoCities omogućuje upravo to i mogu reći da je za početnika najjednostavniji način, ako ste za host izabrali GeoCities samo slijedite njihova uputstva i uspjeh je zajamčen. Od domaćih hostova svakako posjetite Plus hosting koji također omogućuje upload pomoću file managera. Drugi, napredniji način je pomoću FTP klijenta za što ima dosta besplatnih programa. Najčešće korišteni i hvaljeni je CuteFTP, a nalazi se na instalacijskim CD-ima HTnet-a i VIP-a, a možete ga i downloadati na Downloads-CNET.com. Od vašeg hosta dobiti ćete podatke za pristup, koje uneste u wizard ili quick connect vašeg programa, on će vas spojiti sa serverom i možete početi "prebacivati" filove s vašeg računala na server. Također CuteFTP omogućuje vam da brišete i mjenjate svoje filove na serveru. Za kraj S uploadom filova na poslužitelj (server) završava ovo uputstvo što ne znači da ono neće u buduće biti mjenjano i nadopunjavano, a što će najviše ovisiti o vama korisnicima ovog uputstva od kojih očekujem da mi se javite, da me upozorite na propuste ili na stvari koje bi trebale naći svoje mjesto u uputstvu. Još jednom želim naglasiti da ovo uputstvo ima prvenstveno svrhu da pomogne početnicima da shvate princip izrade stranica, a sve drugo ovisi o njihovom entuzijazmu i afinitetima, jer na Internetu mogu pronaći opširnija uputstva ili uputstva koja se bave isključivo ciljanim temama. Zahvaljujem svima koji su pokazali interes za ovo uputstvo i želim im uspješan rad!

Note: Please fill out the fields marked with an asterisk.

Webmaster Hasko 2011-2015/Info:hasko-ba@hotmail.com