HTML - Elementi


Sintaksa HTML elemenata

HTML element je pojedinačna komponenta HTML dokumenta. Predstavlja semantiku, odnosno značenje. Na primjer, naslovni element title predstavlja naslov dokumenta. Većina HTML elemenata napisana je početnim tagom (ili početnom oznakom) i završnim tagom (ili završnom oznakom), sa sadržajem između. Elementi mogu da sadrže i atribute koji definišu njegova dodatna svojstva. Na primjer, paragraf koji je predstavljen elementom p, napisao bi se kao:




O HTML atributima saznaćemo u narednoj lekciji.



HTML tagovi Vs elementi

Tehnički gledano, HTML element je zbirka početnih tagova, njenih atributa, završnih tagova i svega između toga. S druge strane, HTML tagovi (bilo otvarani ili zatvareni) koristi se za označavanje početka ili kraja elementa, kao što možete vidjeti na gornjoj slici. Međutim, u uobičajenoj upotrebi HTML elementi i HTML tagovi su međusobno zamjenjivi, tj. tag je element za oznake. Radi jednostavnosti web stranice, izrazi „tag“ i „element“ koriste se za značenje iste stvari - jer će definisati nešto na vašoj web stranici.



Neosjetljivost tagovima i atributia u HTML

U HTML-u, nazivi tagova i atributa ne razlikuju velika i mala slova (ali većina vrijednosti atributa razlikuje velika i mala slova). To znači da oznake </P> i oznaka </p> definiše istu stvar u HTML-u. Ali u XHTML-u su osetljivi na velika i mala slova, pa se zbog toga oznaka <P> razlikuje od oznake <p>.

<p>Ovo je paragraf.</p>
<P>Ovo je isto validan paragraf.</P>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Neosjetljivost HTML</title>
</head>
<body>
    <p>Ovo je paragraf.</p>
    <P>Ovo je isto validan paragraf.</P>
</body>
</html>


Prazan HTML element

Prazni elementi (koji se nazivaju i samo-zatvarajući (self-closing) ili nevažeći elementi) nisu oznake kontejnera (container) - to znači da ne možete napisati <hr> neki sadržaj </hr> ili <br>neki sadržaj </br>. Tipičan primjer praznog elementa jeste element <br>, koji predstavlja prelom reda. Neki drugi uobičajeni prazni elementi su: <img>, <input>, <link>, <meta>, <hr>, itd.

<p>Ovo je paragraf <br> br predstavlja prelom reda i prebacuje ga u novi red.</p>
<img src="images/sky.jpg" alt="Cloudy Sky">
<input type="text" name="username">
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Prazni elementi</title>
</head>
<body>
    <p>Ovo je paragraf <br> br predstavlja prelom reda i prebacuje ga u novi red.</p>
    <img src="images/sky.jpg" alt="Cloudy Sky">
    <input type="text" name="username">
</body>
</html>


Ugnježdeni HTML elemenati

Većina HTML elemenata može da sadrži bilo koji broj daljnjih elemenata (osim praznih elemenata), koji su zauzvrat sastavljeni od tagova, atributa, sadržaja ili drugih elemenata. Sljedeći primjer prikazuje neke elemente ugnježdene unutar <p> elementa.

<p>Ovo je neki <b>podebljani</b> tekst.</p>
<p>Ovo je neki <em>naglašeni</em> tekst.</p>
<p>Ovo je neki <mark>istaknuti</mark> tekst.</p>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ugnježdeni HTML elementi</title>
</head>
<body>
    <p>Ovo je neki <b>podebljani</b> tekst.</p>
    <p>Ovo je neki <em>naglašeni</em> tekst.</p>
    <p>Ovo je neki <mark>istaknuti</mark> tekst.</p>
</body>
</html>

HTML tagovi trebaju biti ugnježdeni u ispravnom redosljedu. Moraju biti zatvorene obrnutim redosljedom kako su definisane, to znači da posljednji otvoreni tag prvo mora biti zatvorena.

<p><strong>Ove su oznake pravilno ugniježdene.</strong></p>
<p><strong>Ove su oznake nisu pravilno ugniježdene.</p></strong>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ugnježdeni HTML elemenata u ispravnom redosljedu</title>
</head>
<body>
    <p><strong>Ove su oznake pravilno ugniježdene.</strong></p>
    <p><strong>Ove oznake nisu pravilno ugniježdene.</p></strong>
</body>
</html>


Pisanje komenatara u HTML-u

Komentari se obično dodaju u svrhu olakšavanja razumijevanja izvornog koda. Može pomoći drugim programerima (ili vama u budućnosti kad uređujete izvorni kod) da shvate što pokušavate učiniti s HTML-om. Komentari se ne prikazuju u pretraživaču. HTML komentar započinje s <!--, a završava s -->, kao što je prikazano u sljedećem primjeru:

<!-- Ovo je primjer HTML komentara -->
<!-- Ovo je primjer višelinijskog
     HTML komentara -->
</p>Ovo je samo noramalan tekst.</p>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Pisanje komentara u HTML</title>
</head>
<body>
    <!-- Ovo je primjer HTML komentara -->
    <!-- Ovo je primjer višelinijskog
     HTML komentara -->
    <p>Volim da učim HTML5 uz IT TUTORIJALE.</p>
    <p><strong>Napomena:</strong> Pretraživači ne prikazuju komentare.</p>
</body>
</html>

Možete i komentarisati dio HTML koda radi uklanjanja grešaka, kao što je prikazano u sljedećem primjeru:

<!-- Promjeniti sliku
<img src="images/smiley.png" alt="Smiley">
-->
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Pisanje komentara u HTML</title>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim da učim HTML5 uz IT TUTORIJALE.</p>
    <!-- Sakrij ovu slike radi testiranje
    <img src="images/smiley.png" alt="Smiley">
    -->
</body>
</html>


Vrste HTML elemenata

Elementi se mogu smjestiti u dvije različite grupe: block level i inline level . Prvi čine strukturu dokumenta, dok drugi oblažu sadržaj bloka. Takođe, blok element zauzima 100% raspoložive širine i on je prikazan s prelomom linije prije i poslje. Dok će unutrašnji element zauzeti samo onoliko prostora koliko mu je potrebno.

Najčešće korišteni elementi na nivou blokova su: <div>, <p>, <h1> do <h6>, <form>, <ol>, <ul>, <li>, i tako dalje. Elementi koji se često koriste u jednoj liniji su: <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input>, <but>, itd. O ovim elementima ćete detaljno učiti u narednim lekcijama.