Šta je HTML?

HTML(Hyper Text Markup Language) je jezik za kreiranje statičkih veb sajtova i stranica.


HTML nije programski jezik

Česta greška koju prave početnici u veb struci je da HTML jezik svrstavaju u programski jezik što je potpuno netačno. HTML nije programski jezik jer su programski jezici znatno kompleksniji od HTML-a. HTML je deskriptivni jezik koji se najviše upotrebljava da definiše izgled statičnih veb sajtova i stranica.
Kod nekih programskih jezika, poput PHP-a, HTML se koristi u kombinaciji za ispisavanje dinamičkih sajtova i stranica ali on i dalje nije programski jezik.

HTML nije programski jezik.

Kako funkcioniše HTML?

Iako izgleda neobično da se izgled veb sajta ili stranice može ispisati u kodovima, zapravo je stvarno tako. HTML jezik se sastoji od HTML elemenata koji imaju svoje oznake, to jeste tagove (tags). HTML elementi pojednostavljuju kreiranje veb stranica tako što ih dele na sitnije samostalne delove. Tako na primer na stranici imamo: tekst, slike, tabele, dugmad, linkove, liste i druge elemente. Zahvaljujući tome, HTML jezik je lak za učenje i razumevanje.



Sve verzije HTML jezika

Do sada postoji pet verzija HTML jezika, tako da je sada aktuelna verzija HTML5 koja nosi oznaku (tag) <!DOCTYPE html>.
Glavna razlika između verzija je u novim oznakama(tagovima) i atributima. Novije verzije obično donose poboljšanje i veće mogućnosti HTML jezika.
Takođe, različiti pretraživači, (Google, Mozilla, Internet Explorer i slični.) u kojima se očitavju HTML stranice, na različite načine podržavaju različite verzije HTML jezika. Najčešće se dešava da pretraživači nisu odmah spremni da prihvate novu verziju HTML jezika pa je potrebno proveriti koji tagovi(oznake) su podržani u nekom od pretraživača.
U ovoj tabeli je dat pregled svih verzija HTML jezika.

VERZIJA GODINA OZNAKA
HTML 1.0 1991 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
HTML2 1995 <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML3 1997 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML4 1999 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 2000 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5 2014 <!DOCTYPE html>

Najbolje je koristiti najnoviju verziju HTML jezika (trenutno je to HTML5) osim ako nečim nije uslovljeno drugačije.





Kako napraviti prvi veb sajt(stranicu)?

Prvo je potreban editor za kodiranje. Iako za to može poslužiti i običan Notpad u Windows-u, najbolje je instalirati Notepad++ koji je za početnički nivo znanja sasvim odgovarajući.
Kada se završi instalacija, otvoriti Notepad++ i na njega iskopirati i zalepiti sledeći kod:

<!DOCTYPE html>
<html>
 <head>
  <title>HTML stranica</title>
 </head>
 <body>
   <h1>PRVA  STRANICA</h1>
   <p>ovo je tekst stranice</p>
 </body>
</html>
Nakon toga, pritisnuti na ikonicu SAČUVAJ ili SNIMI a zatim kao na slici u "File name" upisati -index-. U donjem polju "Save as type" odabrati -Hyper Text Markup Language (html, htm)-.
Pri tome je važno u "Save in" zapamtiti ili izabrati mesto na računaru gde će se ovaj fajl nalaziti.
Zatim pritisnuti na "Save", kao na slici.

notped ++
Potom, na računaru pronaći napravljeni fajl "index.html" a zatim desnim klikom miša pronaći opciju "Otvori pomoću"(Open with) i izabrati Google Chrome ili Firefox ili neki drugi pretraživač koji se nudi i kliknuti.
Kao rezultat trebalo bi da se pokaže sledeće:


PRVA STRANICA

ovo je tekst stranice





Čestitamo na prvoj veb stranici(sajtu).



Prvi tagovi

Kao što je več rečeno, tagovi su oznake za HTML elemente.
Pogledajmo još jednom kod za našu prvu stranicu:

<!DOCTYPE html>
<html>
 <head>
  <title>HTML stranica</title>
 </head>
 <body>
   <h1>PRVA  STRANICA</h1>
   <p>ovo je tekst stranice</p>
 </body>
</html>
Ona se sastoji iz više tagova.
Jedan pojedinačni tag (oznaka) je ono što je ispisano unutar ovih znakova <>.
Vidimo da prvi tag koji označava da se radi o HTML5 verziji jezika izgleda ovako: <!DOCTYPE html>

Većina tagova ima svoj početak, koji se piše ovako <> i završetak, koji se piše sa kosom crtom ovako </>
Između početka i završetka tagova se nalazi njihov sadržaj.
Tako na našoj prvoj stranici vidimo osnovni tag <html> koji označava početak HTML stranice a onda tagove za elemente koje ona sadrži, sve do njenog završetka koji se obeležava ovako </html>

Svaka HTML stranica(sajt) počinje sa <html> tagom koji se završava sa </html>

Upoznajmo dva najosnovnija taga svake HTML stranice, to su :
<head> </head>tag
i
<body> </body> tag.
Ova dva taga, koja sadrži svaka veb stranica, su kontejneri u koje se smeštaju ostali HTML elementi.
Tag <head> </head> u sebi sadrži informacije koje se odnose na pretraživače (Google, Mozilla i druge). One pomažu pretraživaču da što bolje razume i očita HTML stranicu.
Pošto smo na početku tutorijala, ostavićemo <head> tag za kraj i okrenuti se <body> tagu.
<body> tag je kontejner u kome se nalazi smešteno sve ono što vidimo na veb stranici: naslove, tekst, slike, linkove, liste, tabele, dugmad i ostalo.
Tako na našoj prvoj stranici imamo naslov: INDEX STRANICA i tekst "ovo je tekst stranice".
Sve što vidimo na veb stranici smešta se u <body> tag, to jeste između <body> i </body>

Da ponovimo još jednom naučeno na našoj jednostavnoj HTML stranici:

<!DOCTYPE html> -tag koji označava HTML5 verziju
<html> -tag za početak HTML stranice
 <head> -početak HEAD taga
 </head> -završetak HEAD taga
 <body> -početak BODY taga
   <h1>PRVA  STRANICA</h1> -tag za naslov
   <p>ovo je tekst stranice</p> -tag za tekst na stranici
 </body> -završetak BODY taga
</html> -završetak taga za HTML stranicu

UTF-8 meta tag

Imali smo za primer sledeći tag (oznaku) za tekst na stranici:

<p>ovo je tekst stranice</p>

Ukoliko ovaj tekst zamenimo sledećim:

<p>ovo je početnička stranica</p>

Kao rezultat dobićemo sledeće:

ovo je početnička stranica

Kao što se primećuje, slovo Č (a tako isto i druga slova sa kvačicama, Ć i Š) ne mogu da se pravilno ispišu. Slično je sa ćirilicom i drugim ne-engleskim pismima. Ona neće moći moći da se ispišu na HTML stranici, dok ne postavimo META tag sa CHARSET atributem za UTF kodiranje. U HTML jeziku postoje razni CHARSET atributi za UTF kodiranje, kao što su UTF-8, UTF16, UTF-32, a svaki od njih ima svoje prednosti.
Obično se u HTML5 verziji, postavlja META tag koji ima podrazumevani atribut UTF-8, koji izgleda ovako:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

Postoji i kraća verzija ovog META taga, koja je ravnopravna sa dužom a piše se ovako:

<meta charset="utf-8">

Bilo koju verziju da odaberete, ona se obavezno postavlja u okviru <head> </head> sekcije na HTML stranici. Tako će od sada naše HTML stranice, uvek na sebi nositi META tag sa UTF-8 atributem i izgledati kao u ovom primeru:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>HTML stranica</title>
 </head>
 <body>
   <h1>PRVA  STRANICA</h1>
   <p>ovo je početnička stranica</p>
 </body>
</html>
rezultat:

PRVA STRANICA

ovo je početnička stranica






Tagovi za naslove i tekst

U našem primeru su već prikazani tagovi za tekst i naslove.
Tekst na veb stranicama se označava pomoću taga <p> (paragraph) na početku teksta i </p> na kraju teksta.
Na primer:
<p>Dobrodošli na moju veb stranicu!</p>
rezultat:
Dobrodošli na moju veb stranicu!


Tekstovi na veb stranicama imaju i svoje naslove.
U našem primeru smo imali i jedan naslov na veb stranici. To je bio ovaj primer:
<h1>PRVA  STRANICA</h1>
rezultat:

PRVA STRANICA

Dakle, naslovi se za razliku od teksta automatski ispisuju na sredini stranice.
Naslovi(headings) se označavaju tagovima <h1></h1> do <h6></h6>
Da pojasnimo ovo. Vrlo često na jednoj veb stranici imamo više tekstova i zbog toga i više naslova. Da bi se, kao u novinama, bolje prikazali po važnosti, najvažniji naslov je najveći i on ima oznaku <h1></h1>
Naslov <h1></h1> treba da bude jedini na veb stranici. (često po njemu i cela stranica dobija ime).

Manje važan naslov se označava sa <h2></h2> (koji ne mora biti samo jedan na veb stranici) a sledeći još manje važnosti sa <h3></h3> i tako sve do <h6></h6> naslova sa najmanjom važnošću.
Na primer:
<h1>Ovo je najvažniji naslov na stranici</h1>
<h2>Ovo je manje važan naslov na stranici</h2>
<h3>Ovo je još manje važan naslov na stranici</h3>
<h4>Ovo je naslov još manje važnosti na stranici</h4>
<h5>Ovo je skoro najmanje važan naslov na stranici</h5>
<h6>Ovo je najmanje važan naslov na stranici</h6>

rezultat:

Ovo je najvažniji naslov na stranici

Ovo je manje važan naslov na stranici

Ovo je još manje važan naslov na stranici

Ovo je naslov još manje važnosti na stranici

Ovo je skoro najmanje važan naslov na stranici
Ovo je najmanje važan naslov na stranici

Naslovi su važni zbog toga da bi se korisnici veb sajtova lakše snalazili ali i da bi pretraživači (Google, Mozilla, Opera i ostali) bolje razumeli suštinu sajta (takozvani SEO o kome ćemo kasnije).
Naslovi se u HTML jeziku automatski ispisuju po veličini (najvažniji je najveći i tako redom) osim ako se ne želi urediti drugačije.
Naslov <h1></h1> treba da bude samo jedan na veb stranici dok ostalih može biti više.



Postavljanje slika


cvet.jpg

Za postavljanje slika na veb stranice koristi se tag <img> (image).
Slikama kao HTML elementu nije potreban završetak taga ali je zato za njih potreban SRC atribut slike u koji se upisuju URL podaci o njoj.
Na slici iznad vidimo da se ona zove CVET.JPG gde je CVET naziv slike a JPG format slike. Sve slike (fotografije) imaju svoje formate (npr: JPG, PNG, GIF i druge) koji se moraju navesti u atributu da bi pretraživači mogli da ih očitaju.
Tako bi tag za našu sliku iznad izgledao ovako:

<img src="cvet.jpg">

Postoje dve vrste <img> tagova za slike: relativni i apsolutni.
Relativni <img> tag se upotrebljava kada se HTML fajl veb stranice i slika nalazi u istom folderu ili direktorijumu. Tag <img src="cvet.jpg"> je relativni jer slika postoji prisutna u našem folderu (direktorijumu).
Apsolutni <img> tag se upotrebljava ukoliko se slika uvozi sa nekog drugog sajta, to jeste ne postoji prisutna u nekom našem folderu ili direktorijumu. Tako bi apsolutni tag za našu sliku izgledao ovako:

<img src="https://elektronskaknjiga.com/tutorijali/slike/cvet.jpg">

Prilikom vežbe ovaj tag možete jednostavno postaviti na vašu HTML stranicu i ona će prikazati sliku bez obzira na to što je ne posedujete kod sebe.



HTML audio tag

HTML audio tag <audio> se koristi za postavljanje i reprodukciju audio snimaka na veb stranicama.
Pretpostavimo da imate audio snimak valcera u MP3 formatu (valcer.mp3), koji želite da omogućite za slušanje korisnicima vašeg sajta.
<audio controls>
<source src="valcer.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

rezultat:

Kao što se vidi, u <source> tagu je potrebno navesti vrstu medija kojima taj format pripada (ovde je to: type="audio/mpeg"). Postoje i drugi formati audio snimaka od kojih su najpoznatiji OGG i WAV format. Ovde su oznake njihovih vrsta medija:

  • format: MP3    vrsta medija: audio/mpeg
  • format: OGG    vrsta medija: audio/ogg
  • format: WAV    vrsta medija: audio/wav

Ukoliko je audio snimak u OGG formatu, audio tag bi izgledao ovako:

<audio controls>
<source src="valcer.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>


Ukoliko je audio snimak u WAV formatu, audio tag bi izgledao ovako:
<audio controls>
<source src="valcer.wav" type="audio/wav">
Your browser does not support the audio tag.
</audio>

Zajedno se to može napisati ovako:

<audio controls>
<source src="valcer.mp3" type="audio/mpeg">
<source src="valcer.ogg" type="audio/ogg">
<source src="valcer.wav" type="audio/wav">
Your browser does not support the audio tag.
</audio>

HTML video tag

HTML video tag <video> se koristi za postavljanje i reprodukciju video snimaka na veb stranicama.
Za primer ćemo uzeti zabavni video zapis "Pingvin ples" u MP4 formatu (pingvin_ples.mp4).

<video controls>
<source src="pingvin_ples.mp4" type="video/mp4">
<p>Your browser doesn't support HTML5 video.</p>
</video>

rezultat:


Da bi video snimak na veb stranici imao dimenzije koje vi želite potrebno je upotrebiti atribute WIDTH(širina video snimka) i HEIGHT(visina video snimka).
Dimenzije mogu biti zadate u PIKSELIMA i PROCENTIMA. Na primer u pikselima:

<video controls width="560" height="315">
<source src="pingvin_ples.mp4" type="video/mp4">
<p>Your browser doesn't support HTML5 video.</p>
</video>

rezultat:


Pomoću atributa POSTER možemo dodati i sliku koja će biti na početku video snimka. Uzećemo sliku cveta(cvet.jpg) iz našeg primera za postavljanje slika:

<video controls width="560" height="315" poster="cvet.jpg">
<source src="pingvin_ples.mp4" type="video/mp4">
<p>Your browser doesn't support HTML5 video.</p>
</video>

rezultat:


Podržani formati koji se najčešće upotrebljavaju za video snimke:

  • format: MP4      vrsta medija: video/mp4
  • format: Ogg      vrsta medija: video/ogg
  • format: WebM      vrsta medija: video/webm

Za sve njih može se upotrebiti ovaj video tag:
<video controls>
<source src="pingvin_ples.mp4" type="video/mp4">
<source src="pingvin_ples.ogg" type="video/ogg">
<source src="pingvin_ples.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video.</p>
</video>