Dark Mode

Prijedi na sadrzaj

HTML

Izvor: Wikipedija

HTML je kratica za HyperText Markup Language, sto znaci prezentacijski jezik za izradu web stranica. Hipertekst dokument stvara se pomocu HTML jezika. HTML jezikom oblikuje se sadrzaj i stvaraju se hiperveze hipertekst dokumenta. HTML je jednostavan za uporabu i lako se uci, sto je jedan od razloga njegove opce prihvacenosti i popularnosti. Svoju rasirenost zahvaljuje jednostavnosti i tome sto je od pocetka bio zamisljen kao besplatan i tako dostupan svima. Prikaz hipertekst dokumenta omogucuje web preglednik. Temeljna zadaca 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, racunalu i operacijskom sustavu rijec. HTML nije programski jezik niti su ljudi koji ga koriste programeri. Njime ne mozemo izvrsiti nikakvu zadacu, pa cak ni najjednostavniju operaciju zbrajanja ili oduzimanja dvaju cijelih brojeva. On sluzi samo za opis nasih hipertekstualnih dokumenata. Html datoteke su zapravo obicne tekstualne datoteke, ekstenzija im je .html ili .htm. Osnovni gradevni element svake stranice su znakovi (tags) koji opisuju kako ce se nesto prikazati u web pregledniku. Poveznice unutar HTML dokumenata povezuju dokumente u uredenu hijerarhijsku strukturu i time odreduju nacin na koji posjetitelj dozivljava sadrzaj stranica.

Povijest, razvoj HTML jezika

[uredi | uredi kod]
Tim Berners-Lee

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 pocetnog, relativno jednostavnog dizajna HTML-a. Trinaest tih elemenata jos 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 formatirajuce programe kao sto su roff, nroff i troff. Svaka nova verzija HTML-a je razvijana tako da ostane citljiva na svim web preglednicima. Tim Berners-Lee je, nakon sto je u listopadu 1994. napustio CERN (Europsku organizaciju za nuklearno istrazivanje), osnovao organizaciju World Wide Web Consortium koja se bavi standardizacijom tehnologija koristenih na webu poznatija kao W3C .

Prva verzija HTML jezika objavljena je 1993. godine. U to je vrijeme bio jos poprilicno ogranicen, pa nije bilo moguce cak ni dodati slike u HTML dokumente. Razvoj HTML-a nastavljen je prvom "imenovanom" verzijom - 2.0, no ni ona nije postala standardom.

U ozujku 1995. W3C objavljuje verziju 3.0, koja donosi mogucnosti definicije tablica. Daljnji razvoj ove verzije HTML-a oznacilo je prihvacanje "specificnih" oznaka podrzanih u tada najvecim i najprihvacenijim web preglednicima. Tako su nastale mnoge duplikacije, pa je postojalo vise oznaka koje su imale istu funkciju. Podebljani text, primjerice bilo je moguce definirati oznakom , ali i oznakom .

HTML4 predstavljen je u prosincu 1997., nastavio je s prihvacanjem oznaka nametnutih od strane proizvodaca razlicitih web preglednika, no istovremeno je pokrenuto i "ciscenje" standarda, proglasivsi neke od njih suvisnima. Manje promjene u specifikaciji ovog standarda predstavljene su u prosincu 1999., kada je predstavljena verzija HTML4.01.

Sluzbeni logo HTML5 standarda

HTML5 prva je nova revizija standarda nastala nakon inacice 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 srecu odlucili su udruziti snage i kreirati novu verziju HTML-a. Izdavanje konacnih specifikacija standarda HTML5 u suprotnosti je s inicijativom Web Hypertext Application Technology Working Group (WHATWG) prema kojoj bi HTML trebao biti "zivi" standard koji se stalno nadograduje, bez oznake verzije specifikacija. HTML5 standard nalazi se u statusu radnog dokumenta (draft), a ocekuje se da ce postati sluzbeno objavljen sredinom 2012. godine, dok bi konacne specifikacije trebale biti gotove u drugom kvartalu 2014. Zanimljivo je da vec sada veliki broj preglednika ima implementiran sustav koji omogucuje interpretaciju HTML5.
HTML5 donosi brojne nove mogucnosti koje HTML 4.01 i XHTML 1.x nisu imali, kao sto je mogucnost reprodukcije videa na stranicama bez koristenja Adobe flasha iil Microsoftovog silverlighta, mogucnost upravljanja pomocu tipkovnice i opcijama za bilo koju vrstu manipulacija, drag and drop, canvas kao i ostali novi elementi.

Struktura HTML dokumenta

[uredi | uredi kod]

Svaki HTML dokument sastoji se od osnovnih gradevnih blokova - HTML elemenata. Svaki, pak, HTML element sastoji se od para HTML oznaki (engl. tag). Takoder, svaki element moze imati i atribute kojim se definiraju svojstva tog elementa. Na samom pocetku HTML dokumenta preporucljivo je postaviti element, kojim se oznacava DTD (engl. Document Type Declaration), cime se definira tocna inacica standarda koja se koristi za izradu HTML dokumenta. Nakon elementa, elementom oznacava se pocetak HTML dokumenta. Unutar elementa nalaze se i element te element. element predstavlja zaglavlje HTML dokumenta u kojemu se najcesce specificiraju jezicne znacajke HTML dokumenta kao i sam naslov (engl. title) stranice. Pomocu odredenih HTML elemenata unutar zaglavlja dodaju se i stilska obiljezja stranice, bila ona direktno ugradena (engl. embedded) ili dodana kao referenca na vanjsku CSS datoteku. Cesto se unutar zaglavlja jos definiraju i skripte kreirane u JavaScript jeziku. U elementu kreira se sadrzaj HTML dokumenta, odnosno, stranice koju on reprezentira.

Svaka HTML oznaka (koja u paru kreira HTML element) pocinje znakom < (manje od), a zavrsava znakom > (vise od). Zatvarajuca HTML oznaka kreira se na isti nacin kao i otvarajuca, ali se prije zavrsnog znaka > dodaje i kosa crta / (engl. slash).

Primjer HTML elementa

<body>body>

Osim navedenih, standardnih HTML elemenata, postoje i samozatvarajuci HTML elementi. Kod takvih elemenata nema zatvarajuce oznake.

Primjer samozatvarajuceg elementa

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

Iako nije nuzno, prema preporuci W3C-a, kod samozatvarajucih elemenata pozeljno je ostaviti razmak izmedu definiranih atributa i njihovih vrijednosti i zatvarajucih znakova (/>).

Svaki HTML dokument moguce je kreirati u bilo kojem uredivacu teksta. Ipak, za neke naprednije funkcije, kao i za olaksavanje repetitivnih aktivnosti kod izrade HTML dokumenata te vizualni pretpregled kreirane web stranice, preporucljivo 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 sadrzaj stranice.p>
body>
html>

Komentari unutar html dokumenta

[uredi | uredi kod]

Komentare mozemo unositi bilo gdje unutar html dokumenta i taj tekst nece biti prikazan na stranici, tj. moci ce se vidjeti samo ako otvorite skriptu s code editorom. Na ovaj nacin mozete ostavljati sebi poruke unutar skripte i s njima npr. skrenuti pozornost na jedan dio skripte, ili s ovime mozemo jedan dio skripte iskljuciti, a sacuvati kod tog dijela, kojeg mozemo ponovno aktivirati ako izbrisemo sljedece:

s ovim otvaramo komentar:

Primjer:


Najcesce ce u boljem html editoru komentar biti ispisan sivim slovima kako bi se razlikovao od ostatka koda.

Izrada naslova

[uredi | uredi kod]

Naslove u html dokumentu oblikujemo radi uocljivosti i kako bi bili jedinstveni za cijelu web stranicu odnosno web site. Razlikujemo sest velicina naslova. Pocetni tag najveceg naslova je

, a zavrsni

. Najmanji naslov pocinjemo s
a zavrsavamo sa
. Pocetni i zavrsnog html tag oznacavaju pocetak i zavrsetak teksta naslova. Zavrsni tag naslova ne treba slijediti tag za prelazak u novi redak
jer se prelazak obavlja automatski. Koristenjem 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

[uredi | uredi kod]

Kako bi oblikovali tekst unutar HTML dokunenta, potrebno je staviti odredeni tag na pocetku teksta koji zelimo oblikovati i zavrsni 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>spusten tekstsub>
<del>precrtan tekstdel>
<code>tekst racunalnog kodacode>
<hr>vodoravna crtahr>

Sto ce izgledati ovako:

tag za odlomak (Paragraph)

veliki tekst
podebljani tekst
nakrivljen tekst
podcrtan text
"jaki" tekst
nakrivljen tekst
podignut tekst
spusten tekst
precrtan tekst
tekst racunalnog koda

vodoravna crta


  • velicina fonta od 1 do 7
<font size="6">velicina fonta 6font>
  • boju fonta mozemo mijenjati na vise nacina, koristeci hexa zapis boja
<span style="color:#770000;">ovaj tekst je u hexaboji #770000span>
  • koristeci ime boje
<span style="color:blue;">ovaj tekst je plavspan>
  • koristeci rgb, ali taj zapis nije uobicajen
  • vrsta fonta
<font face="Bookman Old Style, Book Antiqua, Garamond">ovom paragrafu je promijenjen fontfont>
  • veliko pocetno slovo
<font size="5" face="Georgia, Arial" color="blue">Pfont>ocetno slovo

Dodavanje zvuka i multimedije

[uredi | uredi kod]

Multimedijski objekti ukljucuju s na Web stranicu na tri nacina: kao plug-in-ovi preglednika, ActiveX kontrole i Java appleti.

Plug-in je program uklopljen u preglednik koji prosiruje njegove mogucnosti obrade multimedijskih datoteka s grafikom, zvucnim zapisima, videom... Razlikuje se od pomocnih aplikacija (external viewer, helper application) koje se otvaraju u obliku posebnog prozora i rade nezavisno od preglednika. Za ukljucivanje 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 .

Sljedeci primjer koristi oznaku:

<HTML>
<HEAD>
<TITLE>Zvuk i EMBEDTITLE>
HEAD>
<BODY>
<P>Umetanje zvuka pomocu EMBED elementaP>
<EMBED SRC="moja_pjesma.mp3" HEIGHT="60" WIDTH="144">
BODY>
HTML>

Isti primjer koristenjem :

<HTML>
<HEAD>
<TITLE>Zvuk i OBJECTTITLE>
HEAD>
<BODY>
<P>Umetanje zvuka pomocu 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="zvucna_datoteka.mp3" controls>
  • Primjer bez kontrolnog prozora, s automatskim pokretanjem (autoplay)
<audio src="zvuk.mp3" type="audio/mp3" autoplay="false" />
  • Isto tako mozete za video, samo kopirate oznaku autoplay u videotag.

Dodavanje slika

[uredi | uredi kod]

Kada bi web stranice sadrzavale samo tekst i dalje bi bile tehnoloski impresivne, ali bez slika ne bi bile niti priblizno zabavne kao danas. Dva najcesce upotrebljavana graficka formata datoteka na internetu su GIF i JPEG (GIF se izgovara "gif", a JPEG "dzej-peg"). JPEG (Joint Photographic Experts Group) format primarno se koristi za prikaz realisticnih slika fotografske kvalitete, dok se gif koristi za slike s manjim spektrom boja, kao sto su na primjer navigacijske ikone, banneri, animacije itd,... Medu web dizajnerima veliku je popularnost stekao i format PNG (PNG se izgovara"pe-en-ge") koji je stvoren kako bi poboljsao i zamijenio GIF format. PNG podrzava slike zasnovane na paleti (s paletom definiranom 24 bitnim RGB bojama), greyscale slike (sivih tonova) i RGB slike. Zamisljen je kao graficki format za razmijenu preko interneta, a ne za profesionalnu uporabu, tako da ne koristi neke druge sheme boja (kao sto je CMYK (cyan-mangenta-yellow-black). Sve slike, bez obzira na format, ubacuju se istim tagom. Buduci da tag zahtjeva obiljezje src, tada se promatra kao cjeloviti tag. tag nema svoj zavrsni oblik. To je tag koji zatvaramo na njegovom kraju kosom crtom .


Primjer:

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

Pomocu obiljezja alt mozemo definirati tekst koji ce opisivati sto je na slici, koji ce 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 mozemo pomocu obiljezja title, dok korisnik misem nacilja odradeni dio dokumenta koji smo oznacili tim tagom, pojavit ce mu se okviric s tekstom koji smo napisali.

Primjer:

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

Meta tagovi

[uredi | uredi kod]

Meta tagovi su dijelovi HTML-a u stranici koje upotrebljavaju trazilice da bi zapisale informacije o vasoj stranici. Ovi tagovi sadrze kljucne rijeci, opis, informaciju o vlasnistvu, naziv stranice itd. Oni su medu mnogim stvarima koje ispituju trazilice kada "gledaju" vasu stranicu. Iako ih nije nuzno, vrlo ih je korisno upotrebljavati, pogotovo ako zelite imati dobru poziciju na trazilicama (a tko ne zeli?). Ako napravite web stranicu i registrirate URL kod trazilica, one ce posjetiti vasu stranicu i pokusati je indexirati. Svaka trazilica funkcionira malo drugacije, i svaka drukcije cijeni pojedine elemente web stranice. Npr. Altavista daje prednost opisnom tagu (description), a Inktomi indexira oboje, i tekst stranice, kao i meta tagove. Drugi pretrazivaci poput Exactseek-a su pravi meta tag pretrazivaci, tako da ako vasa stranica ne sadrzi naziv (title), i opisni meta tag (description). Naravno, svi pretrazivaci ne rade na ovaj nacin. Neki daju prednost sadrzaju. Pretrazivaci u obzir uzimaju vise od 100 stvari kada razmatraju neku stranicu. Najveci razlog zasto mnoge trazilice ne daju toliku vaznost meta tagovima je zbog spama. Ljudi su se sjetili da na svoje stranice stave mnoge kljucne rijeci koje nemaju veze sa sadrzajem stranice samo da bi dobili vise posjeta. Nakon nekog vremena neke trazilice su prestale gledati meta tagove, sluzili su im uglavnom samo kao potvrda da bi bili sigurni da odgovaraju onome sto se nalazi na stranici. Kada su kljucne rijeci potpuno nevezane za sadrzaj stranice neke trazilice ce kazniti tu stranicu.

Ako je vasa stranica bogata slikama i grafikom, tada su vam meta tagovi jako vazni. Kazu da slika govori tisucu rijeci, ali slike su nazalost trazilicama bezvrijedne. Pogotovo ako stranica sadrzi jako malo teksta. Tada je potrebno koristiti obiljezje alt koje izgleda ovako:

<img src="imeslike.jpg" alt="Tekst koji ce trazilica indexirati">

Meta tagovi bi uvijek trebali biti smjesteni u podrucje HTML dokumenta. tag se nalazi odmah nakon taga, i zavrsava prije taga.

primjer:

<title>Naziv stranicetitle>
<meta name="description" content="opis web stranice">
<meta name="keywords" content="popis kljucnih rijeci vezanih za sadrzaj stranice ">
<meta name="robots" content="index,follow">

Uvijek budite sigurni da vasi meta tagovi nemaju nikakvih prelazaka u novi red u sebi, jer ce ih u tom slucaju trazilice vidjeti kao neispravan kod i ignorirati. Takoder bi trebali izbjegavati upotrebu velikih slova (html5 standard), kao i ponavljanje izraza unutar taga kljucne rijeci.

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

Mnoge trazilice ce prikazati ovaj tekst u rezultatima pretrazivanja pokraj naziva stranice. Neka taj tekst ne bude pre dugacak, neka bude razumljiv i neka sto bolje opise sadrzaj vase stranice.

<meta name="keywords" content="popis kljucnih rijeci vezanih za sadrzaj stranice">

Kljucne rijeci predstavljaju kljucne termine koje netko moze upisati u trazilicu. Izaberite samo vazne izraze. Ako cete staviti te izraze pod tag kljucne rijeci, trebali biste ih spomenuti i na tekstu na stranici. Mnoge trazilice usporeduju vas meta sadrzaj s tekstualnim sadrzajem stranice, i ako se to ne poklapa, vasa stranica moze zaraditi kaznu, i biti na losoj poziciji kod rezultata pretrazivanja.

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

Mnoge web stranice imaju ovaj tag neispravno napisan. Primjer neispravnog koristenja je content="index, follow, all" Krivo jer neke trazilice ne mogu obraditi razmake izmedu rijeci. Vecina trazilica po defaultu pretpostave da zelite da vasa web stranica bude indeksirana i da linkovi budu praceni, tako da koristenje neispravne sintakse moze rezultirati time da trazilica jednostavno ignorira vasu stranicu. Ako zbog nekog razloga ne zelite da vasa stranica bude indeksirana u pretrazivacima, zamijenite u tagu rijec index sa noindex, a ako zelite da linkovi ne budu praceni, zamijenite rijec follow sa nofollow.

Medu ostalim meta tagovima koristan tag za napomenu o zastiti autorskih prava autora sadrzaja stranice je name="Author".

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

Na internetu se svakodnevno pojavljuje vise od 8 milijuna novih stranica, a trazilice indeksiraju samo jedan dio od toga. Meta Tagovi su uobicajen standard koji moze osigurati pravilnu kategorizaciju vase stranice. Uvijek upotrebljavajte Meta Tagove i u njima koristite samo najvaznije rijeci vezane za sadrzaj stranice. Pravilno koristenje Meta Tagova vam moze samo pomoci kod pozicije na trazilici, sto podrazumjeva i vecu i kvalificiranu posjetu stranice.

Dodavanje CSS stilova

[uredi | uredi kod]

Godine 1996., W3C prvi puta spominje ideju stilskih obrazaca (CSS - Cascading Style Sheets) za oblikovanje HTML dokumenta. Standard, koji je objavljen sredinom 1998.godine, omogucuje web dizajnerima da odvoje strukturu i oblik svojih dokumenata. CSS standard odreduje tri vrste stilskih obrazaca: ugradeni, linijski i vezani.

UGRADENI - Stilska obiljezja se ugraduju unutar