Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
HTML je skraćenica za HyperText Markup Language, odnosno jezik za označavanje hiperteksta. Koristi se za definisanje strukture i značenja sadržaja na web stranici: naslova, pasusa, linkova, slika, lista, tabela, obrazaca, zvuka i videa.
HTML nije programski jezik u uobičajenom smislu. On sam po sebi ne izvršava algoritme kao JavaScript, Python ili PHP, već pregledaču opisuje šta se nalazi u dokumentu i kakvu ulogu taj sadržaj ima.
Šta znači HTML?
Naziv HTML sastoji se od tri dela:
- HyperText označava tekst koji može da sadrži veze ka drugim dokumentima ili resursima.
- Markup znači da se sadržaj obeležava oznakama koje opisuju njegovu strukturu i ulogu.
- Language znači da postoji formalan skup pravila za pisanje i tumačenje tih oznaka.
HTML je osnovni jezik weba. Kada pregledač otvori HTML dokument, on čita elemente u njemu i na osnovu njih formira stranicu koju korisnik vidi i koristi.
Recommended Free Tools
Aktuelni standard razvija se kao HTML Living Standard, koji održava WHATWG. Izraz HTML5 i dalje se često koristi neformalno za savremene web tehnologije, ali ga ne treba predstavljati kao odvojenu, najnoviju verziju HTML-a sa fiksnim brojem.
#1 Best Overall
Da li je HTML programski jezik?
HTML se najčešće ne smatra programskim jezikom, već jezikom za označavanje. Na primer:
<h1>Naslov stranice</h1>
<p>Ovo je uvodni pasus.</p>Ovaj kod ne računa rezultat, ne donosi odluke i ne ponavlja naredbe u petlji. On govori pregledaču da je prvi deo glavni naslov, a drugi pasus.
To ipak ne znači da je HTML „kod koji ništa ne radi“. HTML ima formalna pravila, semantiku i elemente sa ugrađenim funkcionalnostima, kao što su obrasci, kontrole za unos, video i audio. Preciznije je reći da HTML opisuje sadržaj i njegovu strukturu, dok programski jezik opisuje postupke i logiku.
Za šta se HTML koristi?
HTML je osnova gotovo svake web stranice i web aplikacije. Koristi se za:
- organizovanje strukture web stranice;
- označavanje naslova, pasusa i drugih tekstualnih odeljaka;
- pravljenje hiperveza između stranica i resursa;
- dodavanje slika, zvuka i videa;
- pravljenje uređenih i neuređenih lista;
- prikaz tabelarnih podataka;
- izradu kontaktnih, prijavnih i drugih obrazaca;
- organizovanje navigacije, glavnog sadržaja i podnožja;
- označavanje semantičkih delova dokumenta;
- davanje strukture web aplikacijama;
- povezivanje dokumenta sa CSS stilovima, JavaScriptom i spoljnim resursima.
HTML struktura pomaže i pretraživačima, čitačima ekrana i drugim alatima da razumeju sadržaj. WHATWG HTML opisuje kao jezik za pisanje pristupačnih web stranica i dinamičkih aplikacija, sa semantičkim elementima i povezanim web API-jima.
Kako izgleda osnovni HTML dokument?
Minimalan savremeni HTML dokument može izgledati ovako:
<!doctype html>
<html lang="sr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Moja prva stranica</title>
</head>
<body>
<h1>Zdravo, svete!</h1>
<p>Ovo je moja prva HTML stranica.</p>
</body>
</html>Najvažniji delovi su:
<!doctype html>govori pregledaču da dokument treba da obrađuje u savremenom HTML režimu.<html>je korenski element dokumenta. Atributlang="sr"navodi da je glavni jezik sadržaja srpski. To pomaže čitačima ekrana i drugim alatima da pravilno interpretiraju tekst.<head>sadrži metapodatke i resurse koji nisu glavni vidljivi sadržaj stranice.<meta charset="utf-8">određuje kodiranje znakova, važno za pravilan prikaz slova kao što su č, ć, š, ž i đ.<meta name="viewport">pomaže da se stranica pravilno prikaže na telefonima i drugim ekranima.<title>određuje naslov koji se prikazuje u kartici pregledača.<body>sadrži sadržaj stranice koji korisnik uglavnom vidi.
Detalji o korenskom elementu i atributu lang dostupni su u MDN dokumentaciji za element html.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Šta su HTML elementi, tagovi i atributi?
Tagovi i elementi
Tag je pojedinačna oznaka, kao što su početni tag <p> ili završni tag </p>. Element je šira celina koju čine početni tag, sadržaj i završni tag:
<p>Tekst pasusa.</p>U ovom primeru ceo zapis je element, dok su <p> i </p> tagovi. Element može da sadrži tekst, druge elemente i atribute.
Ne završavaju se svi elementi zasebnim završnim tagom. <img>, <br> i <meta> su primeri praznih elemenata:
<img src="slika.jpg" alt="Opis slike">
<br>
<meta charset="utf-8">Atributi
Atributi daju dodatne informacije elementu ili utiču na njegovo ponašanje. Pišu se u početnom tagu:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
<a href="https://primer.com">Poseti sajt</a>
<img src="pas.jpg" alt="Pas koji sedi">hrefodređuje odredište linka;srcodređuje lokaciju slike;altdaje tekstualni opis slike.
Atribut alt nije samo ukras. Koristan je kada slika ne može da se učita i važan je korisnicima čitača ekrana. Kod sadržajne slike treba napisati opis koji prenosi njen sadržaj ili svrhu. Ako je slika isključivo ukrasna, bolji izbor je prazan atribut alt="" nego potpuno izostavljanje atributa.
Najvažniji HTML elementi
Ne morate učiti sve HTML oznake napamet. Važnije je da znate koji element odgovara nameni sadržaja.
| Element | Namena |
|---|---|
<h1>–<h6> |
Naslovi različitih nivoa |
<p> |
Pasus |
<a> |
Hiperveza |
<img> |
Slika |
<ul> |
Neuređena lista |
<ol> |
Uređena lista |
<li> |
Stavka liste |
<header> |
Zaglavlje stranice ili sekcije |
<nav> |
Navigacioni deo |
<main> |
Glavni sadržaj dokumenta |
<article> |
Samostalna celina, poput članka |
<section> |
Tematska sekcija |
<footer> |
Podnožje |
<form> |
Obrazac za unos i slanje podataka |
<label> |
Oznaka za kontrolu obrasca |
<input> |
Polje za unos |
<button> |
Dugme |
<table> |
Tabela podataka |
<video> |
Video sadržaj |
<audio> |
Audio sadržaj |
Kompletan pregled elemenata možete pronaći u MDN referenci HTML elemenata.
Šta je semantički HTML?
Semantički HTML znači da se elementi biraju prema svom značenju, a ne samo prema tome kako izgledaju. Na primer, navigaciju treba označiti elementom <nav>, glavni sadržaj elementom <main>, a samostalni tekstualni sadržaj elementom <article> kada to odgovara njegovoj ulozi.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Semantički primer:
<nav>
<a href="/pocetna">Početna</a>
<a href="/kontakt">Kontakt</a>
</nav>Manje dobar pristup je da se za sve koriste generički elementi:
<div class="navigacija">
<div onclick="otvoriPocetnu()">Početna</div>
<div onclick="otvoriKontakt()">Kontakt</div>
</div>Semantički elementi mogu pomoći čitačima ekrana, tastaturnoj navigaciji, alatima koji analiziraju sadržaj i održavanju koda. Mogu pomoći i pretraživačima da bolje razumeju strukturu stranice, ali sami po sebi nisu garancija boljeg rangiranja.
Semantički HTML takođe ne garantuje potpunu pristupačnost. Potrebni su odgovarajući sadržaj, pravilno upravljanje fokusom, dovoljan kontrast, pristupačan CSS i JavaScript, kao i testiranje. W3C preporučuje korišćenje odgovarajućih semantičkih elemenata za označavanje strukture sadržaja u tehnici G115.
Kako HTML sarađuje sa CSS-om i JavaScriptom?
Najjednostavniji model je:
- HTML = struktura i značenje
- CSS = izgled i raspored
- JavaScript = ponašanje i interakcija
HTML stranica može biti korisna i bez CSS-a i JavaScripta, na primer kao dokument sa tekstom, naslovima i linkovima. CSS joj dodaje boje, tipografiju, dimenzije, raspored i prilagođavanje različitim ekranima. JavaScript omogućava reakcije na klikove, promene sadržaja, proveru interakcija i složenije ponašanje.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →<button id="dugme">Prikaži poruku</button>
<p id="poruka" hidden>Poruka je prikazana.</p>U ovom primeru HTML obezbeđuje dugme i poruku. CSS može da odredi njihov izgled, a JavaScript može da ukloni atribut hidden kada korisnik pritisne dugme.
Za aplikacije koje čuvaju korisničke naloge, obrađuju porudžbine ili rade sa bazama podataka potrebne su i serverske tehnologije. HTML sam ne upravlja bazom podataka, autentifikacijom ni složenom poslovnom logikom.
Kako HTML pravi linkove i dodaje slike?
Linkovi
<a href="https://example.com">Otvori stranicu</a>Atribut href može sadržati apsolutnu adresu, kao u primeru, ili relativnu putanju do stranice na istom sajtu, na primer /kontakt ili kontakt.html.
Slike
<img src="slika.jpg" alt="Opis onoga što je na slici">
<img src="images/logo.png" alt="Logo kompanije">Atribut src mora pokazivati na postojeći resurs. Kod relativne putanje, lokacija se računa u odnosu na HTML dokument. Ako se slika ne prikazuje, proverite naziv fajla, velika i mala slova, ekstenziju, folder i samu putanju.
Free tools Windows power users keep installed
One-click scans. No signup required.
Kako HTML pravi forme?
HTML forme grupišu kontrole koje korisnik popunjava i šalje:
<form action="/posalji" method="post">
<label for="email">Imejl adresa</label>
<input id="email" name="email" type="email" required>
<button type="submit">Pošalji</button>
</form>U primeru:
<form>grupiše kontrole;actionodređuje gde se podaci šalju;methododređuje način slanja;<label>povezuje razumljiv opis sa kontrolom;namedaje podatku ime koje server može da obradi;type="email"govori pregledaču kakav se format očekuje;requireduključuje osnovnu validaciju u pregledaču.
Klijentska validacija poboljšava korisničko iskustvo, ali nije bezbednosna zaštita. Korisnik može zaobići proveru u pregledaču, pa server mora nezavisno proveriti sve primljene podatke.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Kako napraviti prvu HTML stranicu?
- Otvorite običan tekst editor.
- Napravite novu datoteku pod nazivom
index.html. - Unesite sledeći kod:
<!doctype html>
<html lang="sr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Prvi primer</title>
</head>
<body>
<h1>Moja stranica</h1>
<p>Učim HTML.</p>
<a href="https://developer.mozilla.org/">Uči dalje</a>
</body>
</html>- Sačuvajte datoteku kao običan tekst. Obratite pažnju da se ne sačuva kao
index.html.txt. - Dvaput kliknite na datoteku ili je otvorite u web pregledaču.
- Promenite kod, sačuvajte datoteku i osvežite stranicu u pregledaču.
HTML datoteku možete pregledati lokalno na računaru. Da bi bila dostupna drugim ljudima na internetu, potrebno je da je postavite na hosting ili drugi servis koji posluživanje web datoteka čini dostupnim.
Česte greške početnika
Korišćenje <div> za sve
<div> je generički element bez posebnog semantičkog značenja. Ne treba ga koristiti umesto elemenata kao što su <nav>, <main>, <article>, <button> ili <form> kada odgovarajući semantički element postoji.
Korišćenje <br> za razmake
<br> služi za prelom reda u tekstu, a ne za pravljenje razmaka ili rasporeda stranice. Razmaci i raspored rešavaju se CSS-om.
Korišćenje tabela za izgled stranice
Element <table> treba koristiti za tabelarne podatke, a ne kao glavni sistem rasporeda stranice. Raspored se pravi CSS-om.
Nedostatak alt teksta
Sadržajna slika treba da ima smislen opis u atributu alt. Tekst poput „slika“ nije koristan; opis treba da prenese ono što je važno za razumevanje sadržaja.
Nepristupačne forme
Česte greške su izostavljanje elementa <label>, nerazumljiva imena kontrola, korišćenje <div> umesto dugmeta i forma koja radi samo pomoću miša. Kontrole treba povezati sa jasnim oznakama, a podatke proveravati i na serveru.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsNepravilne putanje
Ako link ne radi ili se slika ne prikazuje, proverite tačan naziv fajla, velika i mala slova, ekstenziju, lokaciju, relativnu putanju i da li resurs zaista postoji.
Šta HTML ne radi samostalno?
HTML ne određuje kompletan vizuelni dizajn, ne čuva podatke u bazi, ne prijavljuje korisnike i ne izvršava složenu poslovnu logiku. Za te zadatke obično se kombinuje sa drugim tehnologijama:
- CSS uređuje izgled, raspored, boje i tipografiju.
- JavaScript dodaje interakciju i dinamičko menjanje sadržaja.
- Serverske tehnologije obrađuju podatke, naloge i poslovna pravila.
- Baze podataka čuvaju i vraćaju podatke aplikacije.
To ne umanjuje značaj HTML-a. Bez jasne HTML strukture, stilovi, skripte, pretraživači i asistivne tehnologije imaju lošiju osnovu za rad.
HTML ukratko
HTML je jezik za označavanje kojim se definišu struktura i značenje web sadržaja. Njime pravite naslove, pasuse, linkove, slike, liste, tabele, forme i multimediju. Tagovi su pojedinačne oznake, elementi su celovite strukture, a atributi daju dodatne informacije.
Za početak napravite index.html, otvorite ga u pregledaču i vežbajte izbor odgovarajućih semantičkih elemenata. Nakon osnova HTML-a prirodan sledeći korak su CSS, JavaScript i osnove pristupačnosti. Dodatne smernice možete pronaći u MDN pregledu HTML-a i W3C smernicama za pristupačnost.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
