Html: Prezentacijski jezik za izradu web stranica
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 hipertekst 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 hipertekst 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. Poveznice 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
Prvi javno dostupan opis HTML-a je dokument zvan HTML tags (oznake), prvi put se spominje na internetu od strane Tim 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 , ali i oznakom .
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.
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 s 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 Arhivirana inačica izvorne stranice od 1. ožujka 2014. (Wayback Machine) 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 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 elementa, elementom označava se početak HTML dokumenta. Unutar elementa nalaze se i element te element. 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 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
<html> <head> <title>Naziv stranicetitle> 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:
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 Html: Prezentacijski jezik za izradu web stranica
a završavamo sa . 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 ALIGN atributa, naslovi mogu biti poravnati desno, lijevo ili centrirani.
Primjer:
<html> <head> <title>Kreiranje HTML naslovatitle> head> <body> <h1 style="text-align: center;">1 Naslovh1> <h2 style="text-align: left;">2 Naslovh2> <h3 style="text-align: right;">3 Naslovh3> <h4>4 Naslovh4> <h5 style="text-align: right;">5 Naslovh5> <h6 style="text-align: right;">6 Naslovh6> 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 tekstbig> <b>podebljani tekstb> <em>nakrivljen tekstem> <u>podcrtan textu> <strong>"jaki" tekststrong> <i>nakrivljen teksti> <sup>podignut tekstsup> <sub>spušten tekstsub> <del>precrtan tekstdel> <code>tekst računalnog kodacode> <hr>vodoravna crtahr> Š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 6font> - boju fonta možemo mijenjati na više načina, koristeći hexa zapis boja
<span style="color:#770000;">ovaj tekst je u hexaboji #770000span> - koristeći ime boje
<span style="color:blue;">ovaj tekst je plavspan> - koristeći rgb, ali taj zapis nije uobičajen
- vrsta fonta
<font face="Bookman Old Style, Book Antiqua, Garamond">ovom paragrafu je promijenjen fontfont> - veliko početno slovo
<font size="5" face="Georgia, Arial" color="blue">Pfont>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 oznaka ili po HTML 4.01 standardu nova oznaka, dok se kod najnovije verzije HTML5 koriste oznake i .
Sljedeći primjer koristi oznaku:
<HTML> <HEAD> <TITLE>Zvuk i EMBEDTITLE> HEAD> <BODY> <P>Umetanje zvuka pomoću EMBED elementaP> <EMBED SRC="moja_pjesma.mp3" HEIGHT="60" WIDTH="144"> BODY> HTML> Isti primjer korištenjem :
<HTML> <HEAD> <TITLE>Zvuk i OBJECTTITLE> HEAD> <BODY> <P>Umetanje zvuka pomoću OBJECT elementaP> <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 zamijenio 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 src, tada se 
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 ako 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, pojavit ć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 područje HTML dokumenta. tag se nalazi odmah nakon taga, i završava prije taga.
primjer:
<title>Naziv stranicetitle> <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, zamijenite u tagu riječ index sa noindex, a ako želite da linkovi ne budu praćeni, zamijenite 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