Ukoliko planirate da postanete front-end programer, jedan od najčešćih saveta koje ćete dobiti jeste da savladate HTML. Jezik za označavanje hiperteksta, poznatiji kao HTML, predstavlja temelj većine veb stranica.
HTML se sastoji od različitih elemenata, uključujući oznake, atribute i elemente. Naša pažnja će biti usmerena na HTML oznake. HTML oznake koristimo kako bismo pretraživačima dali uputstva o tome kako da strukturiraju sadržaj u naslove, podnaslove, pasuse, slike i druge elemente. Stoga, HTML oznake su poput ključnih reči koje definišu način na koji će pretraživač prikazati ili formatirati sadržaj.
Serveri čitaju HTML oznake od vrha ka dnu. Ne postoji ograničenje u pogledu broja HTML oznaka koje jedna veb stranica može da sadrži.
- Sve HTML oznake su omeđene znakovima < >
- Svaka HTML oznaka obavlja specifičnu funkciju
- Većina HTML oznaka ima početnu <tag> i završnu </tag> oznaku
Razlika između HTML oznaka, HTML elemenata i HTML atributa
Često se termini HTML oznake i elementi koriste naizmenično. Međutim, da li su oni zaista isti? Tehnički, HTML elementi i HTML oznake se razlikuju.
HTML oznake definišu HTML elemente. Da bi se to postiglo, sadržaj se stavlja unutar početne i završne oznake koja odgovara sadržaju sa kojim radimo.
Primer HTML elementa je:
<p> Ovo je jedan pasus </p>
<p> je primer HTML oznake.
HTML atributi pružaju dodatne informacije o HTML elementima unutar dokumenta. Atributi se nalaze unutar HTML elemenata.
Primer HTML atributa:
<button id="DugmeZaSlanje" class="btn">Pošalji</button>
HTML oznake koje bi svako trebalo da zna
HTML kao jezik za označavanje je evoluirao tokom godina od kada ga je Tim Berners-Li predstavio 1993. Prva verzija HTML-a imala je 18 oznaka. Nove oznake se dodaju sa svakom novom verzijom HTML-a; najnovija nadogradnja je HTML5 iz 2014. godine.
Detaljno poređenje HTML-a i HTML5 pokazuje da ovaj drugi ima semantičke oznake kao što su <article>, <header> i <footer> koje jasno opisuju sadržaj. Danas postoji više od 100 HTML oznaka. Sledi pregled nekih od najpopularnijih oznaka koje bi trebalo da znate:
<!DOCTYPE>
DOCTYPE tehnički nije oznaka, već deklaracija koja pretraživaču govori koji tip datoteke će biti učitan. Ova oznaka informiše pretraživač o tipu HTML-a koji će se učitati.
U HTML5, svoju datoteku možete deklarisati kao:
<!DOCTYPE html>
Ili:
<!doctype html>
Napomena: Deklaracija nema završnu oznaku i ne pravi razliku između velikih i malih slova.
<html> </html>
Oznaka <html> … </html> dolazi nakon oznake DOCTYPE. Ova oznaka definiše dokument kao veb stranicu; svaki drugi element će biti ugnježden unutar nje. HTML oznaka određuje početak i kraj HTML dokumenta.
Oznaka <html> se predstavlja kao:
<html>Sadržaj</html>
<head></head>
Glava HTML dokumenta je predstavljena oznakom <head>. Ova oznaka je zatvorena unutar oznake <html> i daje opšte informacije o veb stranici.
Oznaka <head> sadrži druge oznake koje pružaju specifične informacije o veb stranici, kao što su naslov stranice i autor. Sadržaj ove oznake se ne prikazuje na veb stranici.
Sintaksa oznake <head> je:
<head> …….. </head>
<title></title>
Oznaka <title> deklariše naslov veb stranice. Ova oznaka je zatvorena unutar oznake <head>. Oznaka <title> će se pojaviti na naslovnoj traci ili kartici u prozoru pretraživača, ali ne i na samoj veb stranici.
Sintaksa za oznaku <title> je:
<title>HTML Oznake za Početnike</title>
Kada se nalazi unutar oznake <head>, pojaviće se kao:
<head> <title>HTML Oznake za Početnike</title> </head>
<body> </body>
Oznaka <body> prikazuje sav vidljivi sadržaj na veb stranici. Slike, linkovi, običan tekst, video snimci i ostalo nalaze se unutar oznaka <body> i </body>.
Neke od drugih oznaka koje ćete pronaći unutar tela uključuju <p> oznaku za pasus, <a> oznaku za linkove, <strong> oznaku za podebljan tekst i oznaku <ol> za uređenu listu, da pomenemo neke.
Sintaksa za oznaku <body> je:
<body> Sadržaj </body>
Oznake <h1> do <h6>
U HTML dokumentu može biti do 6 oznaka naslova. Svaka od oznaka je predstavljena brojem koji počinje od 1 do 6, kao <h1>, <h2>, <h3>, <h4>, <h5> i <h6>.
H1 je najveća oznaka naslova, dok je H6 najmanja.
U HTML dokumentu, oznake naslova mogu biti predstavljene na sledeći način:
<h1>Naslov 1</h1> <h2>Naslov 2</h2> <h3>Naslov 3</h3> <h4>Naslov 4</h4> <h5>Naslov 5</h5> <h6>Naslov 6</h6>
Oznake <h1> do <h6> su zatvorene unutar oznake <body>.
Na primer, oznaka <h1> će biti zatvorena kao:
<body> <h1> Ovo je naslov 1 </h1> </body>
<p> </p>
Oznaka <p> </p>, odnosno oznaka pasusa, se koristi kada želite da strukturirate sadržaj u pasus. Pritiskom na taster ‘enter’ u HTML dokumentu u uređivaču koda neće se kreirati novi pasus.
Ako želite više od jednog pasusa, morate koristiti nekoliko oznaka <p> </p> u svom dokumentu. Oznake pasusa treba da budu zatvorene unutar oznake <body>.
Sintaksa za oznaku pasusa je:
<p> ….neki sadržaj ovde….</p>
Ako želite da imate četiri pasusa, vaš kod će biti strukturiran kao:
<body>
<p>Sadržaj za prvi pasus.</p>
<p>Sadržaj za drugi pasus.</p>
<p>Sadržaj za četvrti pasus.</p>
</body>
<b> </b>
Oznaka <b> </b>, odnosno oznaka za podebljavanje, formatira sav sadržaj između početne <b> i završne </b> kao podebljan.
Podebljana oznaka može biti između naslova kao što je H1 ili čak unutar oznake pasusa.
Ovo su primeri podebljane oznake:
<b> Podebljana oznaka </b>
Fraza „Podebljana oznaka“ će se pojaviti podebljano.
<h1> Svežina je bitna, <b> Peto izdanje </b>, izdanje pobednika </h1>
Peto izdanje će biti podebljano.
<i> </i>
Oznaka za kurziv, označena sa <i>, ispisuje tekst unutar oznaka kurzivom.
Na primer, ako imamo:
<i> Ovo je kurziv </i>
Reči „ovo je kurziv“ biće ispisane kurzivom.
<u> </u>
Oznaka za podvlačenje, ili <u>, se koristi kada želite da podvučete određeni deo teksta u HTML dokumentu.
Na primer, ako imamo:
<u> Podvuci ove reči </u>
Fraza između oznaka će biti podvučena.
<center> </center>
Oznaka centra, <center>, se koristi za centriranje sadržaja u HTML dokumentu.
Na primer, ako imamo oznaku h2 napisanu kao <h2> Centriranje sadržaja u HTML-u </h2>, možemo je centrirati na sledeći način:
<center> <h2> Centriranje sadržaja u HTML-u </h2> </center>
<span></span>
Span oznaka, <span>, je generički ugrađeni kontejner koji nema podrazumevani stil. Oznaku span možete da koristite za grupisanje tekstova koje želite da stilizujete.
Oznaku možete proširiti unutar drugih oznaka kao što su naslovi i pasusi:
<h2> Nauči HTML <span> od eksperata </span> i budi spreman za tržište </h2>
<p> Nauči HTML <span> od eksperata </span> i budi spreman za tržište </p>
<div></div>
Oznaka za podelu, skraćeno div, je oznaka koja vam omogućava da grupišete različite oznake u HTML dokumentu.
Oznaci div može se dodeliti ‘klasa’ za dodavanje spoljašnjeg stila pomoću CSS-a.
Ovako će biti predstavljen div koji obuhvata oznake h1, h2 i pasus:
<div >
<h1> Nauči HTML </h1>
<h2> HTML Oznake </h2>
<p> HTML je jezik za označavanje……… </p>
</div>
<em></em>
Oznaka za naglasak ili <em> se koristi za isticanje određenih reči u HTML dokumentu.
Sadržaj između oznaka <em> će izgledati iskošeno ili kurzivom.
Naglašeni sadržaj unutar pasusa koji će se pojaviti u uređivaču koda će se pojaviti kao:
<p> Sastanak će početi u <em> 08:00 časova </em>, molim vas da budete tačni </p>
<sup></sup>
Oznaka <sup> ili superscript omogućava da priloženi tekst bude iznad ostatka teksta. Savršen primer je kada želite da kvadrirate broj X i matematički ga predstavite kao X2.
Sintaksa za <sup> unutar oznake pasusa biće:
<H1> Harveys <sup>TM </sup> Company Limited </H1>
<sub></sub>
Oznaka subscript ili <sub> je suprotna od oznake superscript. Sadržaj zatvoren u oznaci <sub> će se pojaviti ispod normalnog reda teksta. Savršen primer je pisanje hemijske formule vode kao H2O.
Sintaksa za subscript oznaku će biti:
Zapamti da je H <sub> 2 </sub> 0 hemijska formula za vodu
<br>
<br> je samozatvarajuća oznaka koja označava prelom reda. Sav sadržaj nakon <br> će početi u novom redu.
Sintaksa za <br> unutar pasusa će biti:
<p> HTML je skraćenica za Hypertext Markup Language <br> Postoji stalna debata o tome da li je to programski jezik ili ne <br> Međutim, ne možemo umanjiti njegov značaj <br> HTML se koristi na više od 95% veb sajtova danas </p>
<ol></ol> i <li> </li>
Oznaka uređene liste ili <ol> mora se koristiti sa drugom oznakom, kao što je <li>.
Njih dvoje se mogu pojaviti u uređivaču koda kao:
<ol> <li> Azija </li> <li> Afrika </li> <li> Evropa </li> </ol>
Kada se prikaže u pretraživaču, sadržaj će se pojaviti numerisan.
<img src=““/>
Možda ćete želeti da dodate sliku radi vizuelne privlačnosti ili čak logo. Samozatvarajuća oznaka slike, <img src=““/>, dobro dođe u takvom slučaju.
Sintaksa za oznaku slike će biti:
<img src="https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png"/>
Sadržaj zatvoren pod navodnicima predstavlja izvornu URL adresu.
Zaključak
Postoji preko 100 HTML oznaka, ali gore navedene su one koje bi trebalo da znate kao početnik. HTML je podržan u većini uređivača koda i tako ste sigurni da nikada nećete pogrešiti kada počnete da učite.