HTML¶
Šta je HTML?¶
HTML je skraćenica od Hyper Text Markup Language, Što se na srpski može prevesti kao Jezik za označavanje hiper tekstova. Hiper tekstovi su tekstovi koji pored teksta sadrže i sliku, video i audio zapise. HTML je podskup jednog šireg jezika, SGML-a (Standard General Markup Language) i koristi se za definisanje izgleda World Wide Web dokumenata (web stranica) kao i za uspostavljanje veza (linkova) među web dokumetima.
Kada neko želi da vam da uputstvo kako da pristupite nekoj informaciji na internetu on vam tada saopštava elektronsku adresu na kojoj se ta informacija nalazi. Ta elektronska adresa je URL (Universal Resource Locator). Svaki dokument na internetu ima jedinstvenu adresu (URL) što nam omogućava da pomoću nje lako dođemo do web stranice koja nas interesuje u moru drugih web stranica.
Kada znamo URL adresu, onda u našem pretraživaču unesemo tu adresu i posle kratkog vremena sadržaj web stranice će se pojaviti na našem ekranu.
Na primer, da pristupite web stranici koja sadrži ovaj tutorijal ptorebno je da znate sledeći URL: http//:mef-lab.com/praktikum-2019
HTML dokument¶
HTML dokument (stranica) je tekstualni fajl koji sadrži tekst opisan HTML jezikom.
Na primer ovo je jedan jednostavan HTML dokument:
<!DOCTYPE html>
<html>
<head>
<title>Naslov stranice</title>
</head>
<body>
<h1>Naslov paragrafa</h1>
<p>Paragraf</p>
</body>
</html
Prikaz dokumenta na ekranu¶
Web brauzeri ( Chrome i ostali ) preuzimaju HTML faj sa servera, renederuju ga i prikazuju na ekranu vašeg računara, tableta, telefona. Renderovanje je proces u kojem brauzeri tumače ( parsuju ) dokument, izgrađuju DOM ( Document Object Model ) i grafički prikazuju dokument na ekranu.
Recimo ako sa Chrome brauzerom pristupimo adresi http://mef.edu.rs dobićemo sledeći prikaz na ekranu:
HTML elementi i tagovi¶
HTML dokument se sastoji od HTML elemenata.
HTML elementi se obično sastoje od početnog i krajnjeg taga između kojih se nalazi sadržaj elementa, u skladu sa sledećom sintaksom:
<naziv-taga>Sadržaj elementa...</naziv-taga>
Na primer:
<p>Moj paragraf</p>
označava element tipa p (paragraf) čiji sadržaje je tekst: “Moj paragraf”.
Kompletnu listu svih HTML tagova možete da nađete na MDN-u
Sada ćemo razmotriti neke najčešće korišćene HTML tagove.
<!DOCTYPE html>¶
Ovaj tag se koristi da označi da će dokument koji sledi biti u HTML5 standardu.
Komentari¶
U HTML dokumente mogu se uneti komentari koji se neće prikazivati na ekranu pretraživača. To je najbolji način da se postave upozorenja i dodatne instrukcije za svako buduće ažuriranje vašeg dokumenta.
Komentari imaju sledeći oblik:
<!-----Ovo je komentar koji se neće pojaviti u pretraživaču----->
Komentar se može nalaziti i u više linija kao u sledećem primeru:
<!----Ovaj komentar se takođe neće videti u
pretraživačima iako je postavlje u dve linije
--->
<html> tag¶
<html> tag označava početak HTML dokumenta.
<html> tag se obično postavlja na početak dokumenta, kao prva naredba za pretraživače.
Na kraju dokumenta postavlja se tag završetka </html> . Između ova dva taga nalaziće se svi ostali tagovi kao i sam sadržaj dokumenta.
<head> tag¶
<head> tag je tag koji služi za početak jednog posebnog dela dokumenta koje se naziva zaglavlje dokumenta. Zaglavlje se neće prikazivati na ekranu. Ono služi da se unutar njega definišu neke karakteristike dokumenta, kao što je naslov i način kodiranja karaktera, ili da se importuju skript i css fajlovi.
Zaglavlje se opisuje između tagova <head> i </head>.
Sada ćemo dati primer dokumenta koji sadrži zaglavlje u kojem je definisan naziv dokumenta tagovima <title> i </title>:
<!DOCTYPE html>
<html>
<head>
<title>Moj prvi HTML dokument</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="_static/css/theme.css" type="text/css" /
</head>
</html>
<body> tag¶
<body> i </body> tagovi definišu početak i kraj sadžaja vašeg dokumenta. Sav tekst, sve slike i linkovi na druge dokumente nalaziće se unutar ovih tagova.
<body> se nalazi odmah nakon zaglavlja (head tagova). Tipična web stranica može izgledati ovako:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Document</title>
<meta charset="utf-8">
</head>
<body>
<p>Ovde se nalazi sadržaj vašeg dokumenta: tekst, slike, grafika itd.<p>
</body>
</html>
<h> tag¶
<h> tag se koristi za izbor veličine slova koja će se koristiti za naslove i podnaslove u vašem dokumentu. Postoji šest nivoa veličine od h1 do h6. Najveća slova se dobijaju tagom h1, a najmanja tagom h6. Slede primeri za svih 6 nivoa.
Evo primera za shih 6 nivoa <h> taga:
<h1>Ovo je naslov sa h1 tagom</h1>
<h2>Ovo je naslov sa h2 tagom</h2>
<h3>Ovo je naslov sa h3 tagom</h3>
<h4>Ovo je naslov sa h4 tagom</h4>
<h5>Ovo je naslov sa h5 tagom</h5>
<h6>Ovo je naslov sa h6 tagom</h6>
<p> tag¶
U HTML, paragraf se označava tagom tag <p> i postavlja se na početak svakog paragrafa “normalnog” teksta (pod normalnim se podrazumeva tekst koji nema upotrebljene neke druge tagove).
Na primer:
<p> Prvi paragraf </p>
<p> Drugi paragraf</p>
<pre> tag¶
Tag <pre> se koristi da označi da će vaš tekst zadržati oblik kako je kreiran sa svim blanko znacima, novim linijama, tabovima i sl. Drugim rečima biće onakav kakvog ste ga uneli.
Na primer:
<pre>ovo je
jedan primer
pre-formatizovanog
teksta
</pre>
Liste¶
U HTML postoji jednostavan način za pravljenje lista. Čak štaviše, moguće je stavljati listu unutar liste i na taj način postići hijerarhijsko nabrajanje.
<ul> tag - Liste bez rednih brojeva¶
Liste bez rednog broja počinju tagom <ul> iza koga slede linije teksta koje se označavaju tagom <li>. Lista se završava tagom </ul>.
Evo jedne liste bez rednih brojeva:
<ul>
<li> linija 1 </li>
<li> linija 2 </li>
<li> linija 3 </li>
</ul>
A evo kako će to izgledati na ekranu:
* linija 1
* linija 2
* linija 3
<ol> tag - Liste sa rednim brojevima¶
Evo kako napravili gornju listu, ali sada sa rednim brojem ispred svake linije:
<ol>
<li> linija 1 </li>
<li> linija 2 </li>
<li> linija 3 </li>
</ol>
A evo kako će to izgledati na ekranu:
- linija 1
- linija 2
- linija 3
Ugnježdene liste (lista u listi)¶
Na kraju, evo jednog primera koji pokazuje složenu list, gde se unutar jedne liste nalaze druge liste:
<ul>
<li> podatak 1
<ul>
<li> ugnježden podatak 1 </li>
<li> ugnježden podatak 2 </li>
</ul>
</li>
<li> podatak 2
<ul>
<li> ugnježden podatak 1 </li>
<li> ugnježden podatak 2 </li>
</ul>
</li>
</ul>
A evo kako će to izgledati na ekranu:
podatak 1
ugnježden podatak 1
ugnježden podatak 2
podatak 2
ugnježden podatak 1
ugnježden podatak 2
<a> tag - Linkovanje na druge dokumente¶
Prava moć HTML dokumenata nalazi se u njihovoj sposobnosti da se povezuju sa drugim dokumentima, delovima teksta, slikama, video i audio zapisima. Veze (linkovi) su obično podvučeni ili naglašeni u dokumentima da se istakne njihova pojava. Kada korisnik klikne na neki link automatski se otvara novi prozor sa prikazom dokumenta na koji link ukazuje.
Linkovanje na drugi dokument (drugi URL) postiže se na sledeći način:
<a href="http://www.mef.edu.rs"> MEF fakultet</a>
Tekst koji se nalazi između <a> i </a> tagova (“MEF fakultet”) je tekst na koji korsinik treba da klikne kako se otvorila nova URL adresa.
Evo šta je značenje pojedinih elemenata pri linkovanju:
<a – označava početak linka href – označava “hypertext reference” http://www.mef.edu.rs – ovo je URL dokumenta na koji se povezujemo MEF fakultet – the text that will appear and be clickable </a> – kraj linka
Dakle, sve što vam je potrebno da vaš dokument povežete sa nekim drugim dokumentom jeste URL adresa tog drugog dokumenta.
<img> tag¶
Mnogi dokumeti na internetu sadrže slike. To je zbog toga što su slikama mogu preneti mnoge informacije. Kako kaže kineska poslovica “Jedna slika vredi 1000 reči”. Najčešće se koriste slike u gif, png i jpg formatu, ali su mogući i drugi formati.
Prva stvar koju treba da uradite kada želite da koristite slike, jeste da ih sami kreirate ili locirate na internetu. Postoji na hiljade “public domain” (slobodnih za korišćenje) slika na internetu. Da vas podsetimo, možete koristiti samo slike koje ste sami napravili, ili za čije korišćenje imate dozvolu.
Za prikaz slike koriste se sledeći tag:
<img src="path or URL of image file">
Na primer, <img src=”http://onehdwallpaper.com/wp-content/uploads/2014/09/Tropical-beach-sunset.jpg”>
Atribut src označava izvor slike sa URL adresom gde se slika nalazi.
Ako se slika nalazi u istom folderu gde se nalazi i sam dokument, tada nije potrebno zadavati celu URL adresu, već samo ime fajla koji sadrži sliku.
Na primer ako imate sliku “mojaslika.gif” u istom folderu sa dokumentom dovoljno je da napišete:
<img src="mojaslika.gif">
<table> HTML Tabele¶
Tabele se kreiraju pomoću <table> taga. Tabele se dele u redove (rows) pomoću taga <tr>, a svaki red se sastoji od jedne ili više ćelija podataka (data cells) pomoću taga <td>. ćelije tabele mogu da sadrže tekst, sliku, listu, paragraf, formu, horizontalnu liniji, pa čak i novu tabelu (tabela u tabeli).
Evo jednog primera tabele:
<table border="1">
<tr>
<td>red 1, ćelija 1</td>
<td>red 1, ćelija 2</td>
</tr>
<tr>
<td>red 2, ćelija 1</td>
<td>red 2, ćelija 2</td>
</tr>
</table>
<forM> HTML Forme¶
HTML forma je deo dokumenta koji u sebi može da sadrži elemente forme kao što su razna polja za unos potataka, razne vrste dugmića za pokretanje akcije i sl.
Forma se kreira tagom <form> a pojedinačni elementi forme tagovima <input>.
Evo jednog jednostavnog primera forme koja sadrži dva elementa:
<form>
<input>
<input>
</form>
Tag <form> i tagovi <input> mogu imati niz atributa koji ih pobliže definišu.
Posmatrajmo slededeći primer:
<form>
Ime : <input type="text" name="ime">
<br>
Prezime: <input type="text" name="prezime">
</form>
<button> Akciono dugme¶
Akciono dugme se koristi za pokretanje neke akcije, recimo brisanje svih polja u formi, startovanje nekog javasript programa i sl.
Akciono dugme se kreira na način prikazan u sledećem primeru:
<form>
<input type="button" name="dugme" value="Start" onClick="Akcija">
</form>
Akciono dugme se može kreirati i na sledeči način:
<button>Naziv dugmeta</button>
<select> tag - Lista opcija¶
<select> tag se koristi za kreiranje liste opcija (drop-down list).
Tagovi <option> unutar taga <select> definišu raspoložive opcije u listi opcija.
Na primer:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Radio dugme¶
Radio dugme se koristi kada želite da pravite izbor između malog broja opcija kao u sledećem primeru:
<form>
<input type="radio" name="pol" value="muski"> Muški
<br>
<input type="radio" name="pol" value="zenski"> Ženski
</form>
Uočite da samo jedna od dve opcije može biti odabrana kada kliknete na dugme.
Checkbox dugme¶
Checkbox dugme se koristi kada želite da odaberete jednu ili više opcija iz nekog manjeg skupa kao što to pokazuje sledeći primer:
<form>
Šta sve imam?
Imam bicikl: <input type="checkbox" name="vozilo" value="Bicikl">
<br>
Imam auto: <input type="checkbox" name="vozilo" value="Auto">
<br>
Imam avion: <input type="checkbox" name="vozilo" value="Avion">
</form>
Uočite da kod checkbox dumića možete da birate više od jedne opcije (za razliku od radio dugmića gde birate samo jednu opciju).
Slanje sadržaja forme serveru¶
Forme se najčešće koriste za slanje podataka ka serveru. Za slanje podatka se koristi dugme tipa “submit” a u tagu <form> se dodaje atribut “action” kojim se definiše koji će program na serverskoj strani preuzeti poslate podatke. Atributom “method” definiše se metod slanja podataka koji može biti “get” ili “post”.
Evo primera:
<form name="input" action="program-akcije" method="get">
Korisnik: <input type="text" name="korisnik">
<input type="submit" value="Submit">
</form>
Ako sada u input polje ukucate niz slova i kliknete na dugme “Submit” pretraživač će poslati serveru podatke iz forme. Na serveru će se aktivirati program koji će preuzeti poslate podatke.
<div> tag¶
Ovim tagom se definiše divizija ili sekcija u HTML dokumentu. Najčešće se koristi da se u njemu grupišu elementi.
Na primer:
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
<link rel="stylesheet" href="stilovi.css">
</head>
<body>
<div id="contentinfo">
<p>Welcome to our website. We provide tutorials on various subjects.</p>
</div>
</body>
</html>
Fajl stilovi.css sadrži specifikaciju kako će da izgledaju elementi iz divizije. Fajl stilovi.css može, na primer da izgleda ovako:
#contentinfo p {
line-height: 20px;
margin: 30px;
padding-bottom: 20px;
text-align: justify;
width: 140px;
color: red;
}
Atributi elemenata¶
Elementi (tagovi) mogu da sadrže atribute koji dodatno opisuju karakteristike elementa. Atrinbuti se sastoje od naziva atributa i vrednosti atributa, sa sledećom sintaksom:
<tag naziv-atributa = vrednost-atributa>
Na primer:
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
<link rel="stylesheet" href="stilovi.css">
</head>
<body>
<h3 class="naslov-h3">Naslov primera</h3>
<p id="html">Ovaj paragraf opisuje HTML</p>
<p id="css">Ovaj paragraf opisuje CSS</p>
</body>
</html>
Fajl stilovi.css mogao bi da izgleda ovako:
#html {
font-size: 200%,
color: green
}
#css { color: red }
.naslov-h3 { font-size: 400% }
Nas ovde najviše zanimaju id i class atributi jer pomoću njih javaScript programi komuniciraju sa HTML elementima.
id atribut¶
Ovaj atribut se koristi da jednoznačno identifikuje element unutar HTML dokumenta.
class atribut¶
Ovaj atribut se koristi da se pomoću njega označi niz elemenata. Najčešće se korsiti da se na tako označenim elementima primeni neki odrđen css opis, kao što smo videli u gornjim primerima.
Jedan kratak ali sadržjan opis HTML5 mogućnosti možete da nađete u “HTML syntax at your fingerprints”
Dobre tutorijale za HTML i HTML5 možete da nađete na W3Schools ili na “Tutorials point <https://www.tutorialspoint.com/html/index.htm>`_