HTML

HTML je kratica za HyperText Markup Language, što znači prezentacijski jezik za izradu web stranica. Hipertekst dokument stvara se pomoću HTML jezika. HTML jezikom oblikuje se sadržaj i stvaraju se hiperveze hipertext dokumenta. HTML je jednostavan za uporabu i lako se uči, što je jedan od razloga njegove opće prihvaćenosti i popularnosti. Svoju raširenost zahvaljuje jednostavnosti i tome što je od početka bio zamišljen kao besplatan i tako dostupan svima. Prikaz hipertekst dokumenta omogućuje web preglednik. Temeljna zadaća HTML jezika jest uputiti web preglednik kako prikazati hipertext dokument. Pri tome se nastoji da taj dokument izgleda jednako bez obzira o kojemu je web pregledniku, računalu i operacijskom sustavu riječ. HTML nije programski jezik niti su ljudi koji ga koriste programeri. Njime ne možemo izvršiti nikakvu zadaću, pa čak ni najjednostavniju operaciju zbrajanja ili oduzimanja dvaju cijelih brojeva. On služi samo za opis naših hipertekstualnih dokumenata. Html datoteke su zapravo obične tekstualne datoteke, ekstenzija im je .html ili .htm. Osnovni građevni element svake stranice su znakovi (tags) koji opisuju kako će se nešto prikazati u web pregledniku. Povezice unutar HTML dokumenata povezuju dokumente u uređenu hijerarhijsku strukturu i time određuju način na koji posjetitelj doživljava sadržaj stranica.

Povijest, razvoj HTML jezika

Tim Berners-Lee

Prvi javno dostupan opis HTML-a je dokument zvan HTML tags (oznake), prvi put se spominje na internetu od straneTim Berners-Leeja krajem 1991. Taj opis se sastoji od 20 elemenata početnog, relativno jednostavnog dizajna HTML-a. Trinaest tih elemenata još uvijek postoji u HTML4. Postanak mnogih svojih oznaka duguje jednom od ranih jezika za formatiranje teksta, runoff-u. Runoff je razvijen u ranim 1960-im za CTSS (Kompatibilni Time-Sharing System) operacijski sustav. Runoff je kasnije inkorporiran u UNIX operativni sustav u naprednije formatirajuće programe kao što su roff, nroff i troff. Svaka nova verzija HTML-a je razvijana tako da ostane čitljiva na svim web preglednicima. Tim Berners-Lee je, nakon što je u listopadu 1994. napustio CERN (Europsku organizaciju za nuklearno istraživanje), osnovao organizaciju World Wide Web Consortium koja se bavi standardizacijom tehnologija korištenih na webu poznatija kao W3C .

Prva verzija HTML jezika objavljena je 1993. godine. U to je vrijeme bio još poprilično ograničen, pa nije bilo moguće čak ni dodati slike u HTML dokumente. Razvoj HTML-a nastavljen je prvom "imenovanom" verzijom – 2.0, no ni ona nije postala standardom.

U ožujku 1995. W3C objavljuje verziju 3.0, koja donosi mogućnosti definicije tablica. Daljnji razvoj ove verzije HTML-a označilo je prihvaćanje "specifičnih" oznaka podržanih u tada najvećim i najprihvaćenijim web preglednicima. Tako su nastale mnoge duplikacije, pa je postojalo više oznaka koje su imale istu funkciju. Podebljani text, primjerice bilo je moguće definirati oznakom <b>, ali i oznakom <strong>.

HTML4 predstavljen je u prosincu 1997., nastavio je s prihvaćanjem oznaka nametnutih od strane proizvođača različitih web preglednika, no istovremeno je pokrenuto i "čišćenje" standarda, proglasivši neke od njih suvišnima. Manje promjene u specifikaciji ovog standarda predstavljene su u prosincu 1999., kada je predstavljena verzija HTML4.01.

Službeni logo HTML5 standarda

HTML5 prva je nova revizija standarda nastala nakon inačice HTML 4.01, objavljene 1999. godine u suradnji World Wide Web Consortium-a (W3C) i Web Hypertext Application Technology Working Group (WHATWG). Do 2006. godine su ove dvije grupe radile odvojeno, WHATWG je radio sa web formama i aplikacijama, a W3C sa XHTML 2.0. Na svu sreću odlučili su udružiti snage i kreirati novu verziju HTML-a. Izdavanje konačnih specifikacija standarda HTML5 u suprotnosti je s inicijativom Web Hypertext Application Technology Working Group (WHATWG) prema kojoj bi HTML trebao biti "živi" standard koji se stalno nadograđuje, bez oznake verzije specifikacija. HTML5 standard nalazi se u statusu radnog dokumenta (draft), a očekuje se da će postati službeno objavljen sredinom 2012. godine, dok bi konačne specifikacije trebale biti gotove u drugom kvartalu 2014 . Zanimljivo je da već sada veliki broj preglednika ima implementiran sustav koji omogućuje interpretaciju HTML5.
HTML5 donosi brojne nove mogućnosti koje HTML 4.01 i XHTML 1.x nisu imali, kao što je mogućnost reprodukcije videa na stranicama bez korištenja Adobe flasha iil Microsoftovog silverlighta, mogućnost upravljanja pomoću tipkovnice i opcijama za bilo koju vrstu manipulacija, drag and drop, canvas kao i ostali novi elementi.

Na adresi html5test.com možete testirati vaš browser u kojoj mjeri podržava html5, dok na adresi slides.html5rocks.com/#slide1 imate odličan primjer i prezentaciju HTML5 web stranice.

Struktura HTML dokumenta

Svaki HTML dokument sastoji se od osnovnih građevnih blokova - HTML elemenata. Svaki, pak, HTML element sastoji se od para HTML oznaki (engl. tag). Također, svaki element može imati i atribute kojim se definiraju svojstva tog elementa. Na samom početku HTML dokumenta preporučljivo je postaviti <!DOCTYPE> element, kojim se označava DTD (engl. Document Type Declaration), čime se definira točna inačica standarda koja se koristi za izradu HTML dokumenta. Nakon <!DOCTYPE> elementa, <html> elementom označava se početak HTML dokumenta. Unutar <html> elementa nalaze se i <head> element te <body> element. <head> element predstavlja zaglavlje HTML dokumenta u kojemu se najčešće specificiraju jezične značajke HTML dokumenta kao i sam naslov (engl. title) stranice. Pomoću određenih HTML elemenata unutar zaglavlja dodaju se i stilska obilježja stranice, bila ona direktno ugrađena (engl. embedded) ili dodana kao referenca na vanjsku CSS datoteku. Često se unutar zaglavlja još definiraju i skripte kreirane u JavaScript jeziku. U <body> elementu kreira se sadržaj HTML dokumenta, odnosno, stranice koju on reprezentira.

Svaka HTML oznaka (koja u paru kreira HTML element) počinje znakom < (manje od), a završava znakom > (više od). Zatvarajuća HTML oznaka kreira se na isti način kao i otvarajuća, ali se prije završnog znaka > dodaje i kosa crta / (engl. slash).

Primjer HTML elementa

<body></body>

Osim navedenih, standardnih HTML elemenata, postoje i samozatvarajući HTML elementi. Kod takvih elemenata nema zatvarajuće oznake.

Primjer samozatvarajućeg elementa

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

Iako nije nužno, prema preporuci W3C-a, kod samozatvarajućih elemenata poželjno je ostaviti razmak između definiranih atributa i njihovih vrijednosti i zatvarajućih znakova (/>).

Svaki HTML dokument moguće je kreirati u bilo kojem uređivaču teksta. Ipak, za neke naprednije funkcije, kao i za olakšavanje repetitivnih aktivnosti kod izrade HTML dokumenata te vizualni pretpregled kreirane web stranice, preporučljivo je koristiti neke od funkcionalnijih alata, poput Adobeovog Dreamweavera ili Microsoftovog Expression Weba.

Primjer jednostavnog HTML dokumenta

<!DOCTYPE html>
<html>
  <head>
    <title>Naziv stranice</title>
  </head>
  <body>
    <p>Ovdje se unosi sam sadržaj stranice.</p>
  </body>
</html>

Komentari unutar html dokumenta

Komentare možemo unositi bilo gdje unutar html dokumenta i taj tekst neće biti prikazan na stranici, tj. moći će se vidjeti samo ako otvorite skriptu s code editorom. Na ovaj način možete ostavljati sebi poruke unutar skripte i s njima npr. skrenuti pozornost na jedan dio skripte, ili s ovime možemo jedan dio skripte isključiti, a sačuvati kod tog dijela, kojeg možemo ponovno aktivirati ako izbrišemo sljedeće:

s ovim otvaramo komentar: <!--

s ovim zatvaramo komentar: -->

Primjer:

Najčešće će u boljem html editoru komentar biti ispisan sivim slovima kako bi se razlikovao od ostatka koda.

Izrada naslova

Naslove u html dokumentu oblikujemo radi uočljivosti i kako bi bili jedinstveni za cijelu web stranicu odnosno web site. Razlikujemo šest veličina naslova. Početni tag najvećeg naslova je <h1>, a završni </h1>. Najmanji naslov počinjemo s <h6> a završavamo sa </h6>. Početni i završnog html tag označavaju početak i završetak teksta naslova. Završni tag naslova ne treba slijediti tag za prelazak u novi redak <br> jer se prelazak obavlja automatski. Korištenjem ALIGN atributa, naslovi mogu biti poravnati desno, lijevo ili centrirani.

Primjer:

<html>
  <head>
    <title>Kreiranje HTML naslova</title>
  </head>
  <body>
    <h1 style="text-align: center;">1 Naslov</h1>
    <h2 style="text-align: left;">2 Naslov</h2>
    <h3 style="text-align: right;">3 Naslov</h3>
    <h4>4 Naslov</h4>
    <h5 style="text-align: right;">5 Naslov</h5>
    <h6 style="text-align: right;">6 Naslov</h6>
  </body>
</html>

Osnovno oblikovanje teksta

Kako bi oblikovali tekst unutar HTML dokunenta, potrebno je staviti određeni tag na početku teksta koji želimo oblikovati i završni tag na kraju teksta.

Primjeri:

<p>tag za odlomak (Paragraph)</p>
<big>veliki tekst</big>
<b>podebljani tekst</b>
<em>nakrivljen tekst</em>
<u>podcrtan text</u>
<strong>"jaki" tekst</strong>
<i>nakrivljen tekst</i>
<sup>podignut tekst</sup>
<sub>spušten tekst</sub>
<del>precrtan tekst</del>
<code>tekst računalnog koda</code>
<hr>vodoravna crta</hr>

Što će izgledati ovako:

tag za odlomak (Paragraph)

veliki tekst
podebljani tekst
nakrivljen tekst
podcrtan text
"jaki" tekst
nakrivljen tekst
^{podignut tekst}
_{spušten tekst}
~~precrtan tekst~~
tekst računalnog koda

vodoravna crta

veličina fonta od 1 do 7

<font size="6">velicina fonta 6</font>

boju fonta možemo mijenjati na više načina, koristeći hexa zapis boja

<span style="color:#770000;">ovaj tekst je u hexaboji #770000</span>

koristeći ime boje

<span style="color:blue;">ovaj tekst je plav</span>

koristeći rgb, ali taj zapis nije uobičajen

vrsta fonta

<font face="Bookman Old Style, Book Antiqua, Garamond">ovom paragrafu je promijenjen font</font>

veliko početno slovo

<font size="5" face="Georgia, Arial" color="blue">P</font>očetno slovo

Dodavanje zvuka i multimedije

Multimedijski objekti uključuju s na Web stranicu na tri načina: kao plug-in-ovi preglednika, ActiveX kontrole i Java appleti.

Plug-in je program uklopljen u preglednik koji proširuje njegove mogućnosti obrade multimedijskih datoteka s grafikom, zvučnim zapisima, videom... Razlikuje se od pomoćnih aplikacija (external viewer, helper application) koje se otvaraju u obliku posebnog prozora i rade nezavisno od preglednika. Za uključivanje plug-inova na HTML stranicu mogu se koristiti starija <EMBED> oznaka ili po HTML 4.01 standardu nova <OBJECT> oznaka, dok se kod najnovije verzije HTML5 koriste oznake <VIDEO> i <AUDIO>.

Sljedeći primjer koristi <EMBED> oznaku:

<HTML>
  <HEAD>
    <TITLE>Zvuk i EMBED</TITLE>
  </HEAD>
  <BODY>
    <P>Umetanje zvuka pomoću EMBED elementa</P>
    <EMBED SRC="moja_pjesma.mp3" HEIGHT="60" WIDTH="144">
  </BODY>
</HTML>

Isti primjer korištenjem <OBJECT>:

<HTML>
  <HEAD>
    <TITLE>Zvuk i OBJECT</TITLE>
  </HEAD>
  <BODY>
    <P>Umetanje zvuka pomoću OBJECT elementa</P>
    <OBJECT DATA="moja_pjesma.mp3" WIDTH="144" HEIGHT="60">
    </OBJECT>
  </BODY>
</HTML>

Primjer za HTML5:

VIDEO oznaka

<video src="video_datoteka.mpg" width="640" height="480" controls></video>

AUDIO oznaka

<audio src="zvučna_datoteka.mp3" controls>

Primjer bez kontrolnog prozora, s automatskim pokretanjem (autoplay)

<audio src="zvuk.mp3" type="audio/mp3" autoplay=”false” />

Isto tako možete za video, samo kopirate oznaku autoplay u videotag.

Dodavanje slika

Kada bi web stranice sadržavale samo tekst i dalje bi bile tehnološki impresivne, ali bez slika ne bi bile niti približno zabavne kao danas. Dva najčešće upotrebljavana grafička formata datoteka na internetu su GIF i JPEG (GIF se izgovara "gif", a JPEG "džej-peg"). JPEG (Joint Photographic Experts Group) format primarno se koristi za prikaz realističnih slika fotografske kvalitete, dok se gif koristi za slike s manjim spektrom boja, kao što su na primjer navigacijske ikone, banneri, animacije itd,... Među web dizajnerima veliku je popularnost stekao i format PNG (PNG se izgovara"pe-en-ge") koji je stvoren kako bi poboljšao i zamjenio GIF format. PNG podržava slike zasnovane na paleti (s paletom definiranom 24 bitnim RGB bojama), greyscale slike (sivih tonova) i RGB slike. Zamišljen je kao grafički format za razmijenu preko interneta, a ne za profesionalnu uporabu, tako da ne koristi neke druge sheme boja (kao što je CMYK (cyan-mangenta-yellow-black). Sve slike, bez obzira na format, ubacuju se istim tagom. Budući da <img> tag zahtjeva obilježje src, tada se <img src="link_slike.jpeg"> promatra kao cjeloviti tag. <img> tag nema svoj završni oblik. To je tag koji zatvaramo na njegovom kraju kosom crtom <img />.

Primjer:

<html>
  <head>
    <title>Primjer ubacivanja slike</title
  </head>
  <body>
    <img src="link_lokacije_slike.jpg"/>
  </body>
</html>

Pomoću obilježja alt možemo definirati tekst koji će opisivati što je na slici, koji će se prikazati ukoliko korisnikov web preglednik nije u stanju otvoriti dokument.

Primjer:

<img src="pas.gif" alt="Na slici je pas" height="100" width="100">

Isto tako možemo pomoću obilježja title, dok korisnik mišem nacilja odrađeni dio dokumenta koji smo označili tim tagom, pojaviti će mu se okvirić s tekstom koji smo napisali.

Primjer:

<img src="pas.gif" title="Na slici je pas" height="100" width="100">

Meta tagovi

Meta tagovi su dijelovi HTML-a u stranici koje upotrebljavaju tražilice da bi zapisale informacije o vašoj stranici. Ovi tagovi sadrže ključne riječi, opis, informaciju o vlasništvu, naziv stranice itd. Oni su među mnogim stvarima koje ispituju tražilice kada "gledaju" vašu stranicu. Iako ih nije nužno, vrlo ih je korisno upotrebljavati, pogotovo ako želite imati dobru poziciju na tražilicama (a tko ne želi?). Ako napravite web stranicu i registrirate URL kod tražilica, one će posjetiti vašu stranicu i pokušati je indexirati. Svaka tražilica funkcionira malo drugačije, i svaka drukčije cijeni pojedine elemente web stranice. Npr. Altavista daje prednost opisnom tagu (description), a Inktomi indexira oboje, i tekst stranice, kao i meta tagove. Drugi pretraživači poput Exactseek-a su pravi meta tag pretraživači, tako da ako vaša stranica ne sadrži naziv (title), i opisni meta tag (description). Naravno, svi pretraživači ne rade na ovaj način. Neki daju prednost sadržaju. Pretraživači u obzir uzimaju više od 100 stvari kada razmatraju neku stranicu. Najveći razlog zašto mnoge tražilice ne daju toliku važnost meta tagovima je zbog spama. Ljudi su se sjetili da na svoje stranice stave mnoge ključne riječi koje nemaju veze sa sadržajem stranice samo da bi dobili više posjeta. Nakon nekog vremena neke tražilice su prestale gledati meta tagove, služili su im uglavnom samo kao potvrda da bi bili sigurni da odgovaraju onome što se nalazi na stranici. Kada su ključne riječi potpuno nevezane za sadržaj stranice neke tražilice će kazniti tu stranicu.

Ako je vaša stranica bogata slikama i grafikom, tada su vam meta tagovi jako važni. Kažu da slika govori tisuću riječi, ali slike su nažalost tražilicama bezvrijedne. Pogotovo ako stranica sadrži jako malo teksta. Tada je potrebno koristiti obilježje alt koje izgleda ovako:

<img src="imeslike.jpg" alt="Tekst koji će tražilica indexirati">

Meta tagovi bi uvijek trebali biti smješteni u <head> područje HTML dokumenta. <head> tag se nalazi odmah nakon <html> taga, i završava prije <body> taga.

primjer:

<title>Naziv stranice</title>
<meta name="description" content="opis web stranice">
<meta name="keywords" content="popis ključnih riječi vezanih za sadržaj stranice ">
<meta name="robots" content="index,follow">

Uvijek budite sigurni da vaši meta tagovi nemaju nikakvih prelazaka u novi red u sebi, jer će ih u tom slučaju tražilice vidjeti kao neispravan kod i ignorirati. Također bi trebali izbjegavati upotrebu velikih slova (html5 standard), kao i ponavljanje izraza unutar taga ključne riječi.

<meta name="description" content="opis web stranice">

Mnoge tražilice će prikazati ovaj tekst u rezultatima pretraživanja pokraj naziva stranice. Neka taj tekst ne bude pre dugačak, neka bude razumljiv i neka što bolje opiše sadržaj vaše stranice.

<meta name="keywords" content="popis ključnih riječi vezanih za sadržaj stranice">

Ključne riječi predstavljaju ključne termine koje netko može upisati u tražilicu. Izaberite samo važne izraze. Ako ćete staviti te izraze pod tag ključne riječi, trebali biste ih spomenuti i na tekstu na stranici. Mnoge tražilice uspoređuju vaš meta sadržaj s tekstualnim sadržajem stranice, i ako se to ne poklapa, vaša stranica može zaraditi kaznu, i biti na lošoj poziciji kod rezultata pretraživanja.

<meta name="robots" content="index,follow">

Mnoge web stranice imaju ovaj tag neispravno napisan. Primjer neispravnog korištenja je content="index, follow, all" Krivo jer neke tražilice ne mogu obraditi razmake između riječi. Većina tražilica po defaultu pretpostave da želite da vaša web stranica bude indeksirana i da linkovi budu praćeni, tako da korištenje neispravne sintakse može rezultirati time da tražilica jednostavno ignorira vašu stranicu. Ako zbog nekog razloga ne želite da vaša stranica bude indeksirana u pretraživačima, zamjenite u tagu riječ index sa noindex, a ako želite da linkovi ne budu praćeni, zamjenite riječ follow sa nofollow.

Među ostalim meta tagovima koristan tag za napomenu o zaštiti autorskih prava autora sadržaja stranice je name="Author".

<meta name="Author" content="Ime tvrtke koja je dizajnirala sajt">

Na internetu se svakodnevno pojavljuje više od 8 milijuna novih stranica, a tražilice indeksiraju samo jedan dio od toga. Meta Tagovi su uobičajen standard koji može osigurati pravilnu kategorizaciju vaše stranice. Uvijek upotrebljavajte Meta Tagove i u njima koristite samo najvažnije riječi vezane za sadržaj stranice. Pravilno korištenje Meta Tagova vam može samo pomoći kod pozicije na tražilici, što podrazumjeva i veću i kvalificiranu posjetu stranice.

Dodavanje CSS stilova

Godine 1996., W3C prvi puta spominje ideju stilskih obrazaca (CSS – Cascading Style Sheets) za oblikovanje HTML dokumenta. Standard, koji je objavljen sredinom 1998.godine, omogućuje web dizajnerima da odvoje strukturu i oblik svojih dokumenata. CSS standard određuje tri vrste stilskih obrazaca: ugrađeni, linijski i vezani.

UGRAĐENI – Stilska obilježja se ugrađuju unutar <style> taga na početku samog HTML dokumenta. Stil pridružen određenom tagu primjenjuje se na sve tagove te vrste unutar dokumenta.

Primjer

<style type="text/css">
  .ime_stila {
    font-size: 36px;
    color: #000;
    background-color: #0F0;
    font-family: Arial, Helvetica, sans-serif;
  }
  .drugi_stil { color: #0F0; }
</style>

LINIJSKI – Stilska obilježja ugrađuju se kroz cijeli HTML dokument. Svakom pojedinom HTML tagu možemo pridružiti svoja vlastita stilska obilježja.

Primjer

<p style="font-family: Arial, Helvetica, sans-serif; font-size: 36px; color: #F00;">Označeni tekst stylom</p>

VEZANI – Stilska obilježja pohranjena su u zasebnoj datoteci. Ta datoteka se može povezati s bilo kojim HTML dokumentom koristeći tag <link> koji se smješta unutar <head> taga.

Primjer

<link href="http//www.pou.com/Unnamed Site 2/style.css" rel="stylesheet" type="text/css">

Postavljanje stranica

Izrada internet stranica završava postavljanjem html stranica na internet web server, te ispitivanjem funkcija u realnim uvjetima. Da bi one bile dostupne na Internetu, potrebno ih je smjestiti na neki web server. Web server je računalo na kojem se nalaze web stranice. Kako je pristup svakom računalu određen portovima (ulazima) koji su predstavljeni brojevima, tako je i pristup web serveru određen portom. Port za pristup web serveru je 80. Svaki server ima IP adresu, tako da kada se neka stranica posjećuje, odnosno neki server, zapravo se posjećuje adresa kao 98.34.65.243:80, gdje broj 80 govori da se radi o web serveru. Prostor na web serveru se može zakupiti kod davatelja usluga hostinga (posluživanja) stranica ili se može napraviti svoj vlastiti kućni server. Ako želimo imati vlastiti kućni server trebamo imati internet vezu koja je 24 sata spojena na internet, ima veliku propusnost podataka i potrebno je imati statičku ip adresu, koja se dobije uz nadoplatu kod davatelja internet usluga kao i brzina prijenosa podataka. Da bi kućni web server funkcionirao potrebno je imati instalirane zasebno Apache ( web server), PHP ( intrepetator za programski jezik, ako ga koristimo), MySQL (baze podataka) ili možemo koristeći gotove programe s cijelim paketom kao što su xampp,wamp,... Početna stranica, koju želite da posjetitelj vidi kada posjeti vaš server započinje s index.html. Nakon što smo uspješno stavili našu html stranicu na server, potrebno je nadjenuti našu ip adresu računala s domenom. Domene s hrvatskim predznakom možemo besplatno prijaviti na carnetovoj stranici na www.carnet.hr/dns. Domene .hr i .com.hr mogu besplatno registrirati na carnetovim stranicama samo pravne osobe i fizičke osobe koje obavljaju registriranu samostanu djelatnost (obrtnici, umjetnici, liječnici i sl), dok domenu .from.hr mogu besplatno registrirati sve fizičke osobe iz Republike Hrvatske.