Mi pišemo, a tko to čita?

 

EDUKUTAK

1. Mala škola web dizajna.

Web dizajn (en. Webdesign) tj. dizajniranje, kreiranje Internet stranica je skup postupaka koji rezultiraju objavom vaše multimedijalne prezentacije na internetu kako bi joj se moglo pristupiti internetskim  preglednikom.
Osim samog dizajniranja, izrade web stranica postoji još niz bitnih pojmova sa kojima se morate upoznati kako bi uspješno objavili vašu www stranicu. www stoji za world wide web, a u doslovnom prijevodu znači mreža širom svijeta.
Nastojat ćemo kroz ovu malu školu upoznati vas sa svim potrebnim znanjima da možete samostalno izraditi i objaviti svoju web stranicu. Ali, upamtite, postoji mnogo jednako dobrih pristupa planiranju i izradi stranica. Mi ćemo ovdje pokriti neke, neke samo spomenuti a neke potpuno previdjeti. Ništa zato. Vi ste na početku otkrivanja vrlog novog svijeta. Smatrajte ovo tek svojom prvom stranicom. I još jedna jako bitna napomena, when in doubt, google. Google is your friend. Kada ste u nedoumici, googlajte. Google je vaš prijatelj.

1. 1.a) Hosting – smještaj stranica.

Hosting je naziv za smještaj stranica na poslužitelju (en. server). Moguće je i posluživanje stranica direktno sa osobnog računala, tako da se one ne smještaju na komercijalni poslužitelj. Međutim, to u pravilu nije dobar izbor. Poslužitelj mora imati fiksnu IP adresu i dobar upload te pouzdan uptime. IP adresa je brojčana adresa vašeg prostora na poslužitelju koja se veže za vašu domenu putem DNS servisa(npr. 123.456.78.9=www.dalmit.com). Upload je internet brzina koju vaš poslužitelj omogućava posjetiteljima a uptime je vrijeme kada je vaša stranica dostupna online( npr. 99,9% uptime bi značilo da je stranica 0.01% od 24 sata dnevno nedostupna, zbog tehničkih problema, održavanja ili nečeg trećeg).
Dakle, kada se odlučite na izradu svoje stranice prvo trebate naći povoljan i pouzdan hosting. Kontaktirajte nas za najbolju ponudu.

2. 1.b) Domain Name – naziv stranice

Da bi se stranica stavila online nije obavezno posjedovati domenu. Vaša adresa može ostati i samo brojčana, ali ipak, domenski naziv nudi vam branding, lako pamtljiv identitet. Postoji nekoliko tipova domena. Tako razlikujemo komercijalne(com, net, info, biz, org..) i državne(hr, us, uk, si, ba, au...). Kod nas, državne .hr domene su besplatne za sve fizičke i pravne osobe. Naravno postoje ograničenja, tako za pravne osobe .hr domena mora glasiti isto ili slično kao i naziv te pravne osobe, a za privatne osobe domena glasi kao ime i prezime te osobe. Hrvatska akademska mreža CARnet zadužena je za sve .hr domene te su uveli i komercijalne .hr domene a uskoro nas očekuju još neke novotarije. Aktualnosti pratite na njihovim stranicama. Komercijalne domene se zakupljuju, trajanje zakupa je na najmanje godinu dana a cijene variraju. Prosječna cijena komercijalnih domena(.com, .biz, .info, .net...)je od 50kn do 150kn za godinu dana.
Ako trebate registraciju i zakup domene, vaš smo pouzdan partner. Provjerite da li je vaša željena domena zauzeta

3. 1.c) Planiranje internet stranice

Jednom kad ste se odlučili na izradu stranice i odabrali domenski naziv vrijeme je da počnete s razradom idejnog rješenja, plana vaše stranice. Nekoliko stvari morate odlučiti.
Tip i vrsta internet stranice.
Većina stranica obično su informativne, edukacijske, reklamne ili osobne. Tip stranice utječe na daljnje planiranje.
Organizacija izbornika.
Izbornik određuje i organizaciju sadržaja. Lijep i pregledan izbornik bitan je za prvi dojam posjetitelja na vašem sajtu. Informacija mora biti lako pronađena.
Sadržaj.
Sadržaj je meso vaše stranice. Zbog njega će se posjetitelji vračati na vaše stranice ili ih zaboraviti. Lijepo organiziran sadržaj popraćen slikama ili videom će privući tj. Zadržati posjetitelje, dok će razbacan sadržaj, nepregledan dizajn ili previše teksta zbuniti i odbiti posjetitelja.

4. 1.d) Izrada sajta, stranicu po stranicu.

Kreiranje stranica zahtjeva da se posvetite svakoj pojedinačnoj podstranici posebno.
Da bi uspješno doveli vaš projekt do kraja trebate se pobliže upoznati sa slijedećim:
Osnove dizajna.
Kako osmisliti i implementirati dobar dizajn?
HTML je jednostavan programski jezik kojim se obično pišu web stranice. Mada nije potpuno neophodno da ga savladate bolje čete se snaći ako ga naučite.
CSS kod. CSS je pomočni jezik za komunikaciju dizajna s internet preglednikom. Kao i sa HTML-om, nije neophodan ali dobro dođe
Uređivači internetskih stranica. Odabrati dobar editor nije jednostavno. Neki su jako skupi a neki potpuno besplatni, neke vam mogućnosti trebaju a neke će vas samo zbuniti... Postoje i takozvani website creatori, automatski generatori HTML i ostalog koda. User friendly sučelje omogućava vam izradu kompleksnih stranica bez poznavanja strukture. Nisu baš idealan alat za izradu dobrih web stranica ali za početnike mogu biti zanimljiv uvod u svijet webdizajna. Preporučamo besplatni website composer (bivši NVU) ili skupi dreamveawer. Nije loše ni koristiti predloške. Gotovi, dizajnirani i potpuno uređeni predlošci dati če vam dobar uvid u profesionalni pristup izradi internetskih stranica. Pogledajte našu bazu free website template -a, besplatnih predložaka web stranica.
FLASH - Adobe Flash (bivši Macromedia Flash) je multimedijalna platforma za ubacivanje animacija, videa i interaktivnosti u web stranice, ali i puno više. Flash se često koristi za izradu reklama, igrica i crtića. Flash se također koristi i za RIA tj. Rich Internet Aplications, Bogate Internet Aplikacije.  Flash je grafičko sučelje sa timeline-om, vremenskom trakom. Na traci možete uređivati animaciju frame by frame, sliku po sliku. Možete animacijama dodavati audio i video, ili praviti forme za unos podataka i slično. Flash sadrži objektno orijentiran jezik, ActionScript. 
CMS, content management system odnosno, sustav upravljanja sadržajem. Takvi sistemi se koriste za velike stranice, portale, web prodavaonice i slično. Pružaju nebrojene mogućnosti uz umjereno komplicirano sučelje, ovisno i o vrsti. Postoje besplatni i komercijalni.

Objava gotovih web stranica

Objava vaših internet stranica je zapravo kopiranje svih datoteka koje čine stranicu sa vašeg diska na prostor na poslužitelju. Za to možete koristiti alate koje vam nudi vaš poslužitelj ili koristiti FTP klijent. FTP stoji za File Transfer Protocol, doslovno prevedeno znači protokol za prijenos datoteka. FTP klijent bi dakle bio računalni program koji vam omogućava da razmjenjujete podatke u TCP/IP mreži, tj. Između vašeg računala i drugog računala u mreži, što je u ovom slučaju vaš poslužitelj.

• Koje alate vam nudi poslužitelj i kako se koriste.
• Kako odabrati FTP klijent.
• Kako FTP klijentom kopirati podatke sa vašeg diska na poslužitelj.

6. Promocija web stranice

Postoje razni načini kako popularizirati web stranicu. Osnovna stvar koju morate utvrditi je SEO. Search Engine Optimization odnosno, Optimiziranje Za Tražilice. Sadržaj stvarate s tražilicama na umu. Osim tekstualnih članaka na vašem sajtu nalaze se i slike, opišite i njihove tagove. Pazite da spideri(takozvani roboti odnosno pauci) mogu pratiti vaše linkove, provjerite s online alatima. Izradite sitemap i napravite robots.txt dokument.
Kad ste optimizirali vaš sadržaj i uvjerili se da vas roboti razumiju razmislite o aktivnoj promociji. Naravno, prvo iskoristite sve besplatne mogućnosti i onda imate još dvije opcije. Biti krativni i besplatno se promicati ili plaćati reklame.

Postoji više definicija i više naziva koji opisuju izradu internetskih stranica. Ova nam se svidjela.
Web dizajn je skup postupaka koji rezultiraju povezivanjem vaše multimedijalne prezentacije u cjelinu, kako bi joj se moglo pristupiti internetskim preglednikom.
Osim samog dizajniranja, izrade web stranica postoji još niz bitnih pojmova sa kojima se morate upoznati kako bi uspješno doveli vaš projekt do kraja, tj. objavili vašu www stranicu.
Kroz ovu malu školu, nastojat ćemo vas upoznati sa svim potrebnim znanjima da možete samostalno izraditi i objaviti svoju web stranicu.
U prvom dijelu dotaknut ćemo neke pojmove i ukratko ih pojasniti, u nastavku donosimo primjere koje možete slijediti i napraviti vlastitu stranicu.
Upamtite, postoji mnogo jednako dobrih pristupa planiranju i izradi stranica. Mi ćemo ovdje pokriti neke, neke ćemo samo spomenuti, a neke potpuno previdjeti. Ništa zato. Smatrajte ovo tek svojom prvom stranicom. I još jedna jako bitna napomena: „When in doubt, google. Google is your friend.“ Kada ste u nedoumici, googlajte. Google je vaš prijatelj.

 

WWW - The World Wide Web (mreža širom svijeta)
WWW je mreža računala rasprostranjena širom svijeta. Za to najčešće koristimo naziv web.
Računala na web-u komuniciraju koristeći standardne protokole i jezike.
Standarde donosi Udruženje W3C (The World Wide Web Consortium).

HTML – Jezik kojim govori web
Svi koji rade na razvoju internetskih stranica (web developer) bi trebali poznavati HTML (HyperText Markup Language).
U HTML-u se koriste oznake (markup tags) za definiranje izgleda vaše stranice.
Na primjer, HTML oznaka <h1> definira primarni header, a <p> definira  paragraf.
Više u našoj HTML početnici

CSS - Cascading Style Sheets (Kaskadne Stilske Liste)
CSS stil definira kako će se HTML elementi prikazati, kao i <font> tag, za tekst u starom HTML-u (HTML 2.0 nije koristio CSS).
Stilovi mogu biti pohranjeni u vanjskoj datoteci, tada mjenjate izgled i dojam vaše stranice editirajući samo tu .css datoteku. To je od velike pomoći kada mijenjate izgled više podstranica istodobno.
Više u našoj CSS početnici

Scripting language - Skriptni programski jezik izvodi naredbe nekog programskog jezika ili aplikacije
Scripting treba razlikovati od programiranja, to nije poseban programski jezik već skup naredbi za neki programski jezik napisan da olakša proces programiranja.

JavaScript - Client Side Scripting (izvođenje naredbi na korisničkoj strani)
JavaScript se koristi za dodavanje dinamičkih elemenata na korisničkoj strani. Client-side scripting je "programiranje" internetskog preglednika.
JavaScript naredba poput ove: document.write("<p>" + date + "</p>") može ispisati datum u internetskoj stranici.
Više u našoj JavaScript početnici

XML - Extensible Markup Language
XML nije zamjena za HTML. XML se koristi za opis i prijenos podataka, dok se HTML koristi za prikaz. XML također koristi oznake, one nisu sve unaprijed definirane već možete stvarati vlastite po potrebi.
XML i njegovi razni standardi ubrzano postaju najčešći odabir za prijenos, pohranu i upravljanje podacima.
Više u našoj XML početnici

Server Side Scripting (izvođenje naredbi na poslužiteljskoj strani)
Server-side scripting je "programiranje" Web server-a, internetskog poslužitelja.
Na primjer, Pristupanje bazama i prikazivanje rezultata u internetskom pregledniku
Više u našoj Scripting i PHP početnici

Upravljanje podacima putem interneta SQL-om
SQL – strukturirani jezik upita (The Structured Query Language) je uobičajeni standard za pristupanje i interakciju s bazama poput SQL Server, Oracle, Sybase i Access.
Više u našoj SQL početnici

CMS – sustav za upravljanje sadržajem
CMS su računalni sustavi za organiziranje i smještanje dokumenata i drugih sadržaja. Sustav za upravljanje sadržajem je često internetska aplikacija korištena za upravljanje internetskim stranicama i sadržajem. U mnogim slučajevima, sustavi za upravljanje sadržajem zahtijevaju posebne programe za uređivanje i izradu članaka. Postoji mnogo sustava za upravljanje sadržajem koje bi mogli svrstati u dvije grupe: besplatni (često otvorenog koda) i komercijalni.
Prednosti koje nam sustavi za upravljanje sadržajem pružaju:

• Veći broj ljudi može uređivati i dijeliti isti sadržaj
• Kontroliranje pristupa podacima ovisno o privilegijama određenog korisnika
• Olakšana pohrana i preuzimanje podataka
• Smanjene mogućnosti pogrešaka i dvostrukih unosa
• Jednostavnije vođenje bilješki
• Poboljšana komunikacija među korisnicima

Kod sustava za upravljanje sadržajem, podaci mogu biti bilo što, dokumenti, filmovi, glazba, slike, tekst i slično. Sustavi za upravljanje sadržajem se često koriste za pohranjivanje, nadzor, reviziju i objavu dokumentacije.
WebSite Creating/Generating software
Razni web generatori imaju silne opcije za kreiranje zanimljivih stranica, ali se ne mogu uspoređivati sa uobičajenim pristupom izradi stranica. Prednost je što vam ne treba nikakvo znanje osim poznavanja računala. Tekst, slike i ostale multimedijalne sadržaje jednostavno umećete u WYSIWYG uređivač. Dizajn i layout birate iz ponuđenih gotovih predložaka i vaša stranica je spremna za objavu.
Većina ih je komercijalna ali postoje i besplatni. Neki su na internetu, druge instalirate na računalo.
Više u Listi generatora.

Hosting – Smještaj vaših stranica
Postoji više vrsta i više namjena internetskih poslužitelja.
Osim komercijalnih, postoje još i besplatni poslužitelji. Besplatni poslužitelji osim očite prednosti, mogu imati i niz mana. Neki zahtijevaju aktivnost na nekom forumu, neki da drže link ili reklamu na vašim stranicama i slično. To možda i nije problem, no često bez najave povuku uslugu i nepovratno obrišu sadržaj. Ako koristite besplatne smještaje, koristite ih za testiranje stranica i čuvajte kopije na vašem računalu.
Više u našoj Hosting početnici

Struktura HTML dokumenta
Za početak ćemo uzeti jedan html dokument i njega ćemo malo raščlaniti da vidimo o čemu se tu radi:

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
02.http://www.w3.org/1999/xhtml
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
05.<title>Naslov stranice</title>
06.</head>
07.<body>
08. 
09.<h1>Pozdrav. Ovo je moja prva html stranica.</h1>
10. 
11.</body>
12.</html>
Što je ovo iznad? Kako dolazimo do toga? Znači, neki dokument nazivamo html dokumentom kada ima nastavak .html ili .htm. Znači da bi napravili ovu vježbu, napravite dokument u vašem omiljenom text editoru (može i obični notepad) prekopirajte gornji kod i nazovite dokument prva.html. Nakon toga ga pokrenite (dvoklik) i trebali bi dobiti nešto ovako.
1. Pod brojem jedan imamo doctype – doctype služi da bi browser bolje generirao stranicu. Bilo bi najbolje da si uvijek kopirate ovakav doctype u zaglavlje svih html dokumenata. Browser će generirati stranicu i bez doctypa ali velika je vjerovatnost da ju neće generirati na način na koji mi to očekujemo. Zasad toliko o doctypu rko želi znati više neka posjeti ovaj link.
2. Broj 2 počinje sa < html xmlns=.... a zavrsava sa < / html >. Ova formacija u kodu se naziva TAG. Tag je najjednostavnije rečeno označivač koji govori gdje neki dio html-a počinje a gdje završava. Kao što vidite većina tagova počinje sa < unutar zagrade se nalazi ime taga nakon kojeg mogu slijediti neka svojstva i onda početak taga zatvorimo sa >. Kraj taga opet počinje sa < nakon toga stavljamo kosu crtu / koja označava kraj taga i nakon toga upisujemo ime taga, ovdje ne idu nikakva dodatna svojstva i naravno opet zatvaramo sa >. < html > tag označava početak html koda i bilo bi jako dobro da se nalazi u svakom vašem html dokumentu.
3. Primjetite da se broj 3 i 4 nalaze unutar html taga, što znači da su to njegovi elementi. Sljedeći tag na koji nailazimo je head tag. Head tag predstavlja zaglavlje vaše stranice, primjetite da se unutar head taga nalazi još nekoliko dodatnih tagova (iako ih inače ima puno više – ali o tome kasnije). Znači imamo:

1.<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Ovaj tzv. meta tag opisuje koji charset (set slova) će se koristiti na stranici, u ovom primjeru to će biti zapadnoeuropski, ako hoćemo dobro prikazivati naša slova trebali bi upisati caharset=iso-8859-2. Primjetite da meta tag nema zatvarajućeg elemnta, zanči ne postoji nešto kao < / meta > nego se zatvara sa “/>”. Nakon meta taga imamo title tag:
1.<title>Naslov stranice</title>
Title tag određuje naslov stranice. Što god da upišete između < title > i < / title > će biti naslov stranice koji će se prikazivati na vrhu vašeg omiljenog browsera. Ispod title taga imamo < / head > koji označava završetak head taga odnosno zaglavlja stranice.
Vrlo je bitno da shvatite da head tag ne predstavlja zaglavlje stranice u nekom grafičkom smislu. Zanči da se head tag praktički neće vidjeti na stranici, osim naslova na vrhu browsera. On samo sadrži podatke koji su potrebni za ispravno funkcioniranje stranice. Ali o tome više kasnije.
4. I na kraju dolazimo do body taga. Body je jako bitan zato što označava gdje počinje i završava ono što korisnik web stranice vidi. Uglavnom sve što budete željeli da vam se prikaže na web stranici morate staviti u body tag. Što znači između < body > i < / body >. Unutar body taga imamo tag koji se naziva h1 – h1 sa h1 označavamo da je sve što se nalazi između početka i završetka taga naslov.
h tagovi
Zašto je podnaslov h tagovi? Zato što naravno imamo više h tagova. Oni se razlikuju u broju koji dolazi poslije slova h. Znači imamo ih nekoliko: h1, h2, h3 itd. Ali da nebi previše pričali o tome, proširite sada vaš prvi html dokument da izgleda ovako:

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
02.http://www.w3.org/1999/xhtml
03.<head>
04. 
05.<head>
06.<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
07.<title>Naslov stranice</title>
08.</head>
09. 
10.<body>
11. 
12.<h1>Pozdrav. Ovo je moja prva html stranica.</h1>
13.<h2>Pozdrav. Ovo je moja prva html stranica.</h2>
14.<h3>Pozdrav. Ovo je moja prva html stranica.</h3>
15.<h4>Pozdrav. Ovo je moja prva html stranica.</h4>
16.<h5>Pozdrav. Ovo je moja prva html stranica.</h5>
17.<h6>Pozdrav. Ovo je moja prva html stranica.</h6>
18. 
19. 
20.</body>
21.</html>
Znači što je broj iza slova h veći to će slova na prikazu biti manja. To je super, ali je isto tako i netočno i nepotrebno, zato što ćemo kasnije naučiti da mi možemo odrediti veličinu slova h tagova pomoću css-a. Za sada je bitno shvatiti da h tagovi određuju konstrukciju stranice, odnosno, određuju koliko je ono što je izmedju h taga upisano važno ili koliko bi se trebalo isticati. Možemo na to gledati i ovako, h1 je glavni naslov nekog teksta, h2 je neki podnaslov u tom tekstu, h3 je podnaslov u podnaslovu itd. Možemo mi napraviti stranicu ne koristeći ni jedan h tag, ali to je loša praksa. Pošto ako je stranica dobro konstruirana web tražilice će ju bolje prepoznavati i prije će ju unijeti u svoju bazu.
Još jedna bitna stvar je to da bi stranica trebala dobro izgledati i bez stilizacije (css dokumenta), a u tome h tagovi pomažu da se zna što je najvažnije na stranici, što je manje važno itd.
p tag
P tag nam služi za određivanje gdje počinje i završava pojedini paragraf odnosno odlomak teksta. Za primjer možete izmjeniti vaš .html dokument da izgleda ovako:

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
02.http://www.w3.org/1999/xhtml
03.<head>
04. 
05.<head>
06.<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
07.<title>Naslov stranice</title>
08.</head>
09. 
10.<body>
11. 
12.<h1>Tekst ispod ovoga je paragraf.</h1>
13. 
14.<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque id diam et massa mattis nonummy. Aenean tincidunt. Praesent et mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis gravida. Curabitur a enim. Aliquam magna neque, euismod in, convallis et, tincidunt vitae, tellus. Nunc tristique nibh. Donec nec massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus vestibulum.</p>
15. 
16.<p>Praesent purus tortor, scelerisque tristique, ullamcorper ut, imperdiet et, felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sed orci. Pellentesque auctor arcu sit amet nisi egestas dapibus. Maecenas sed quam a dui convallis convallis. Donec nec quam. Pellentesque justo eros, condimentum vitae, nonummy in, ornare et, mi. Donec sit amet magna at libero volutpat consequat. Cras auctor. Phasellus orci leo, malesuada non, rhoncus at, varius a, lacus. Praesent ornare. Praesent aliquam libero nec mauris. Morbi porttitor hendrerit enim. Nam sapien diam, convallis id, placerat a, rhoncus a, lorem. In id eros. Morbi mollis, felis a egestas ullamcorper, tortor sem egestas urna, a hendrerit leo sem ac justo.</p>
17. 
18. 
19.</body>
20.</html>
Znači napravili smo 2 odlomka. Možemo vidjeti da su 2 pošto su i fizički odvojena. P tagove koristimo kada želimo da nam neki tekst predstavlja odlomak. P tagovi se isto kao i h tagovi kasnije mogu oblikovati pomoću css-a da bi izgledali onako kako mi to želimo i isto su bitni za samo konstrukciju stranice.
ul i li tagovi
ul i li su tagovi koji se koriste u kombinaciji. li tagovi se uvijek moraju nalaziti unutar ul tagova. Za primjer ćemo dopisati ispod drugog odlomka sljedeće:

1.<ul>
2.<li>Prvi navod</li>
3.<li>Drugi navod</li>
4.<li>Treći navod</li>
5. 
6.</ul>
Dakle ul i li tagovi nam služe za prikaz ne uređene liste. ul je unorder-list (neuređena lista) ali li je list-item (član liste). Moramo paziti da li tagovi uvijek budu između < ul > i < / ul >. < ul > tag kaže da započinjemo listu, zatim < li > tag kaže da započinjemo upis člana liste, zatim < / li > tag govori da smo završili sa upisom člana i onda nam na kraju < / ul > tag govori da smo završili sa upisom liste.
img tag
Img tag je jedan od rijetkih tagova koji se ne zatvara sa npr. < /img > nego se zatvara sa />. Ovaj nam tag služi za prikazivanje slika. Da bi pokazali kako radi ovaj tag, trebamo napraviti male promjene u mapi u kojoj ste spremili vaš .html dokument. Najprije napravite mapu koju ćete nazvati “slike” ili “images” ili kako već želite, ta mapa će nam služiti da u njoj držimo slike koje ćemo stavljati na našu stranicu. U tu mapu spremite neku sliku po vašem izboru i promjenite joj ime u slika.jpg ili slika.gif ako koristite .gif sliku, tako da lakše možete pratiti ovaj primjer. Kada ste to sve obavli upišite sljedeće ispod neuređene liste:

1.<img src="images/slika.gif" title=" naslov slike" alt="alternativni naslov slike"/>
Ajmo sad malo objasniti tu liniju koda:
< img označava početak taga, nakon toga imamo src=”images/slika.gif”, pomoću ovoga govorimo browseru gdje nam se nalazi slika koju želimo prikazati, znači slika se nalazi u mapi images a zove se slika.gif. Kada bi nam se slika nalazila npr. u podmapi mape images koja se zove druge-slikeonda bi napisali src=”images/druge-slike/slika.gif”. Na ovo treba jako dobro obratiti pažnju, jer ako putanja do slike nije dobro upisana browser nam neće prikazati tu sliku. To je jedna od najčešćih grešaka kod prikaza slika. Nakon toga imamo title=”naslov slike”, sa ovom komandom kažemo kako se slika zove ili unutra možemo upisati opis slike. Title komanda i nije toliko važna i možete je kompletno izostaviti iz taga ako vam se neda pisati. Nakon title komande imamo alt=”alternativni naslov slike”, u alt upisujemo alternativni naslov ili opis slike. Ovau isto kao i title ne morate stavljati u img tag, ali je poželjno da ju stavite, zato što će se taj naslov prikazati ako netko isključi prikaz slika u svome browseru ili ako koristi čitač ekrana (slabovidne i slijepe osobe najčešće koriste takve programe). Isto tako, stranica vam neće proći W3C validaciju ako nemate alt komandu unutar img taga, ali će slika ipak biti prikazana. I na kraju tag zatvaramo sa / >.
div tag
Div tag je zadnji tag kojeg ćemo obraditi u ovoj lekciji. Njegova primjena vam najvjerovatnije neće biti baš najjasnija dok ne pređemo na drugu lekciju i počnemo učiti CSS pomoću kojega ćemo oblikovati ove tagove koje smo naučili. Dodajte ovo ispod slike:

1.<div>Ovo je moj prvi div tag</div>
Probajte pokrenuti dokumnet prva.html i vidjet ćete da nam se pojavio samo tekst “Ovo je moj prvi div tag”, i ništa se drugo posebno nije dogodilo. To je zato što div tag opisuje blok, odnosno neku određenu cijelinu na stranici. Da bi se shvatila puna moć div tagova, moramo se upoznati sa CSS-om i u njemu oblikovati div tag. Zato ovdje više neću opisivati div tagove jer neće imati smisla ako ga ne vidite u punoj snazi, a to nam slijedi u idućoj lekciji.
Zaključak
Ovih nekoliko tagova koje sam naveo gore su vam sasvim dovoljni da napravite svoju prvu web stranicu, što ćemo nastaviti raditi u lekciji 2, kada se počinjemo baviti CSS-om i oblikovanjem tagova koje smo danas naučili. Od sljedeće lekcije počinjemo praviti naš web site. Korak po korak, tako da ćemo do kraja ovog tečaja imati potpuno funkcionalan web site. Pišite ako vam što nije jasno.

Što je XML?

• XML - eXtensible Markup Language, Proširivi Jezik Oznaka.
• XML je označni jezik slično kao i HTML
• XML je uveden za prenošenje i pohranjivanje podataka, ne za prikazivanje
• XML oznake nisu predefinirane, potrebno je definirati vlastite oznake
• XML je samoopisni jezik
• XML je preporučen od strane Udruženja W3C i jednostavan je za savladati

Razlika između XML i HTML tehnologija
XML nije zamjena za HTML.
XML i HTML su uvedeni sa različitim ciljevima:

• XML je dizajniran za prijenos i pohranu podataka fokusirajući se na to što ti podaci jesu
• HTML, za razliku od XML-a, služi za prikazivanje podataka usredotočujući se na to kako podaci izgledaju

Dakle, HTML je za prikazivanje informacija, a XML za prenošenje.

Što je CSS?

• CSS je kratica za Cascading Style Sheets
• Styles definiraju kako se prikazuju HTML elementi
• Styles su u pravilu pohranjeni u Style Sheets
• Styles su dodani HTML-u 4 kako bi se riješio problem
• Eksterne Style Sheets vam mogu uštedjeti mnogo truda
• Eksterne Style Sheets se pohranjuju u CSS datotekama
• Interne and eksterne style sheets će djelovati zajeno

CSS primjer
Sa CSS-om, vaša HTML datoteka može biti prikazana koristeći različite sitlove:

Styles Rješavaju Čest Problem
HTML tagovi su izmišljeni kako bi definirali sadržaj dokumenta. Predviđeno je da govore; „ovo je početak“, „ovo je paragraf“, „ovo je tablica“, koristeći tagove poput <h1>, <p>, <table> itd. Layout dokumenta je trebao biti rješen preglednikom, bez korištenja formatting tagova.
No kako su dva, tada glavna preglednika, Netscape i Internet Explorer konstantno dodavali podršku za nove HTML atribute(poput font i color tagova), postajalo je sve teže stvarati stranice kojima je sadržaj jasno odijeljen od dizajna.
Kako bi doskočili ovom problemu, W3C je standardu HTML 4.0, dodao i Style.
Svi glavni preglednici podržavaju CSS kao standard.

Style Sheets mogu vam uštedjeti truda
Style Sheets definiraju kako će se HTML elementi prikazivati, baš kao što su font i color tag definirali izgled teskta u standardu HTML 3.2.
U pravilu stilovi se pohranjuju u vanjske .css datoteke. Vanjska datoteka zapravo vam omogućuje da promjenite izgled više vaših stranica tako da uređujete samo jedan .css dokument.
CSS je velik napredak u web dizajnu jer omogućava developerima da upravljaju izgledom više web stranica odjednom. Kada koristite CSS možete definirati style pojedinih HTML elemenata a to onda primjeniti na neograničen broj stranica.

HTML datoteka može sadržavati tekst, oznake i skripte.
Skripte u HTML datoteci mogu se izvršavati na internetskom poslužitelju.

Server-side Scripting
Server-side scripting je "programiranje" ponašanja servera. To se zove server-side scripting ili samo server scripting, na hrvatskom, skriptanje poslužitelja.
Client-side scripting je "programiranje" ponašanja preglednika. (pogledajte poglavlje o JavaScript-u).

Što je Server-side Scripting?
Uobičajeno je da kada preglednik zatraži datoteku, poslužitelj odgovara slanjem iste. Međutim ako datoteka sadrži server-side script unutar HTML, ASP ili PHP datoteke, skripta se izvršava na poslužitelju prije slanja običnog HTML-a pregledniku. Dakle, poslužitelj ˝prevodi˝ skripte u HTML kako bi ih preglednik prikazao.

Što Server Skripte mogu?

• Dinamično uređivati, mijenjati ili dodavati sadržaj u internetsku stranicu
• Odgovoriti na korisničke upite ili obraditi podatke iz formulara
• Pristupati podacima u bazama podataka i rezultate prikazivati u pregledniku
• Individualno prilagoditi internetsku stranicu kako bi više odgovarala korisniku
• Pružiti dodatnu sigurnost budući se kod na poslužitelju ne može vidjeti iz preglednika
  

Napomena: Pošto se skripte izvode na serveru nije potrebno da preglednik podržava skripte  jer zapravo samo prikazuje .asp ili .php datoteku.

ASP i PHP
Demonstrirati ćemo skriptanje poslužitelja koristeći ASP - Active Server Pages (Aktivne Poslužiteljske Stranice) i PHP - Hypertext Preprocessor (Predobradnik naprednog teksta. Za rezliku od običnog, HTML teksta)
ASP i PHP izvorni kod ne možete vidjeti kada u pregledniku odaberete naredbu ˝view source˝. Vidjet ćete samo rezultat izvršenja koda sa poslužitelja, obični HTML.

HTML datoteka može sadržavati tekst, HTML oznake i skripte. Preglednik može izvršavati naredbe skripti u HTML datoteci.

Što je JavaScript?

• JavaScript je skriptni programski jezik
• Skriptni programski jezik izvodi naredbe nekog programskog jezika ili aplikacije
• JavaScript se sastoji od linija izvršivog računalnog koda
• JavaScript se obično umeće direktno u HTML
• JavaScript je osmišljen kako bi dodao interaktivnost HTML stranicama
• JavaScript se može koristiti besplatno, bez kupovanja licence

Koristi se u milijunima web stranica kako bi poboljšao izgled, omogućio formulare, detektirao vrstu preglednika, stvorio kolačiće itd. 
JavaScript je najpopularniji skriptni jezik na internetu i podržava ga većina preglednika.

Client-Side Scripting

JavaScript je način „programiranja“ ponašanja preglednika. To se zove client-side scripting ili skriptanje preglednika.

Što JavaScript radi?

• JavaScript daje HTML dizajnerima programski alat – autori HTML koda u pravilu nisu programeri i ne poznaju sve jezike koje mogu koristiti u stranicama. Ipak, mogu naučiti dovoljno da komadiće koda uvrsti u svoju HTML stranicu jer JavaScript je jezik sa jednostavnom sintaksom.

JavaScript može postaviti dinamičan tekst u HTML stranicu -  JavaScript izraz poput ovog: document.write("<h1>" + name + "</h1>") može ispisati datum u internetskoj stranici.

• JavaScript može reagirati – se može podesiti da izvrši određenu radnju u slučaju određenog događaja. Na primjer, kad korisnik klikne mišem ili se stranica učita.
• JavaScript može čitati i pisati HTML elemente – može pročitati i izmijeniti sadržaj nekog HTML elementa
• JavaScript za provjeru podataka – može se koristiti za provjeru formulara i podataka u njima prije nego što su predani serveru pa će server obrađivati manje  podataka.
• JavaScript vidi vaš preglednik – može provjeriti vrstu vašeg preglednika i ovisno o tome učitati stranicu posebno prilagođenu za taj preglednik
• JavaScript peče i kolačiće - JavaScript može pohraniti i dohvatiti podatke na vašem računalu u obliku kolačića (en. cookie)

Kako smjestiti JavaScript u HTML stranicu

<html> <body> <script type="text/javascript"> document.write("Pozdrav Svima!") </script> </body> </html>

Ovaj HTML kod će na stranici ispisati:

Pozdrav Svima!

Objašnjenje

Za umetanje JavaScript-a u HTML stranicu, koristi se <script> oznaka. Atribut „type“ označava da je to skriptni jezik.
Oznaka <script type="text/javascript"> određuje gdje JavaScript počinje:
document.write je JavaScript naredba koja ispisuje tekst u stranici:
document.write("Pozdrav Svima!")
Zatim skripta završava sa:

</script>