U ovom članku naučićete osnovne elemente HTML jezika.

Osnovni elementi:
<h1>, <p>, <br>, <a> , <img>, comments
Formatiranje teksta:
<b>, <strong>, <i>,<mark>,<small>,
<del>, <ins>, <sub>, <sup>, <code>
Tabele i liste:
<table> , <ol>, <ul>, <li>
Klase i identifikatori:
classes, ids

Naslovi <h1>…<h6>

Naslovi su definisani tagovima <h1> do <h6>. Najvažniji naslov je <h1> . On obično označava naslov stranice. Na ovaj stranici glavni naslov smo definisali sa <h1> HTML Elementi </h1>. Najmanje važan naslov je H6. Veličina fonta simbolično prikazuje njihovu važnost.

    <h1>Naslov H1</h1>
    <h2>Naslov H2</h2>
    <h3>Naslov H3</h3>
    <h4>Naslov H4</h4>
    <h5>Naslov H5</h5>
    <h6>Naslov H6</h6>

Prikaz :

Naslov H1

Naslov H2

Naslov H3

Naslov H4

Naslov H5

Naslov H6

Paragraf i novi red <p> i <br>

Za prikaz teksta u HTML-u koristimo paragraf ili odlomak. Paragraf je blokovski element, što znači da uvijek otvara novi red. Ukoliko želimo da izbegnemo novi red , koristimo <span> umesto <p>. Ukoliko želimo da napravimo novi red unutar paragrafa možemo da koristimo element za novi red, <br>.

     <p>Lorem ipsum dolor sit amet consectetur <br> adipisicing elit.</p>>

Lorem ipsum dolor sit amet consectetur
adipisicing elit.

Linkovi <a>

Za linkove koristimo element <a>. Ukoliko želimo da se link otvori u novom prozoru dodajemo mu atribut target=”_blank”.

href označava mjesto na koje link upućuje. Tekst koji je prikazan korisniku nalazi se između a tagova. <a> Tekst prikazan korisniku</a>

<a href="https://mozak.org" target="_blank" >Mozak</a>

Mozak

Slike <img>

Za prikaz slike koristimo <img>. Ovaj element nema završnu oznaku (~~</img>~~). Da bi se slika prikazala potrebno je da navedemo gdje se ona nalazi (link ka slici). To radimo pomoću atributa src (kratica od source, izvor). Atribut alt (alternativni) označava tekst koji će se pojativit ako browser iz nekog razloga ne može da prikazati sliku. Takođe, alternativni tekst omogućava slijepim i slabovidim osobama da lakše koriste vaš sajt.

     <img src="https://mozak.org/logo.png" alt="Logo sajta Mozak.org">

Komentari <!– , –>

Komentare koristimo za objašnjavanje koda. Komentar se neće prikazati korisniku. Programeri prilikom testiranja često “zakomentarišu” dio koda kako bi spriječili njegovo izvršavanje.

	<!-- Kod ispod će prikazati sliku -->
    <img src="https://mozak.org/logo.png" alt="Logo Mozak">
    <!-- Kod ispod se neće izvršinit -->
    <!-- <h1>Naslov H1</h1> -->

Formatiranje/Oblikovanje teksta

<b>, <strong>, <i>,<mark>,<small>,<del>, <ins>, <sub>, <sup>, <code>

Svi pomenuti elementi koriste se kako bi se oblikovao tekst.

    <b>Podebljan tekst BOLD.</b>
    <strong>Podebljan tekst. Pojačava značaj teksta.</strong>
    <i>Nakošen tekst. Italic.</i>
    <mark>Markiran tekst.</mark>
    <small>Mala slova.</small>
    <del>Obrisan tekst. Precrtan.</del>
    <ins>Umetnuti tekst. Podvučen.</ins>
    <sub>Slova u indeksu</sub>
    <sup>Slova u eksponentu</sup>
    <code>Računarski code</code>

Podebljan tekst BOLD.
Podebljan tekst. Pojačava značaj teksta.
Nakošen tekst. Italic.
Markiran tekst.
Mala slova.
~~Obrisan tekst. Precrtan.~~
Umetnuti tekst. Podvučen.
_{Slova u indeksu} Normalno
Normalno ^{Slova u eksponentu}
Računarski code

Tabele <table>, <tr>, <th>

Tablela se označava elementom table. Red table tr. Ćelija sa podatcima td.

Da bi napravili tabelu 2×2:

<table border="1">
        <tr>
            <td>A1</td>
            <td>A2</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B2</td>
        </tr>
</table>

A1	A2
B1	B2

Da bi napravili tabelu 3×2:

<table border="1">
        <tr>
           <td>Tekst u ćeliji 1</td>
           <td>Tekst u ćeliji 2</td>
           <td>Tekst u ćeliji 3</td>
        </tr>
        <tr>
           <td>Tekst u ćeliji 1b</td>
           <td>Tekst u ćeliji 2b</td>
           <td>Tekst u ćeliji 3b</td>
        </tr>
</table>

Tekst u ćeliji 1	Tekst u ćeliji 2	Tekst u ćeliji 3
Tekst u ćeliji 1b	Tekst u ćeliji 2b	Tekst u ćeliji 3b

Liste <ol>, <ul>, <li>

Razlikujemo dva tipa lista (popisa):

simboličke ul (unordered list) i
numeričke ol.

Unutar svake liste nalaze se stavke li (list item). <li> stavka </li>

    <!-- simolička lista -->
    <ul>
        <li>Stavka Jedan</li>
        <li>Stavka Dva</li>
        <li>Stavka Tri</li>
    </ul>

    <!-- numeri;ka lista -->
    <ol>
        <li>Stavka Jedan</li>
        <li>Stavka Dva</li>
        <li>Stavka Tri</li>
    </ol>

Stavka Jedan
Stavka Dva
Stavka Tri

Stavka Jedan
Stavka Dva
Stavka Tri

Klase i identifikatori:

Klase i identifikatori neophodni su za upravaljanje HTML sadržajem. Npr u CSS možemo da napišemo pravilo za farbanje teksta u crveno. Da bi CSS znao koji tekst želimo da ofarbamo u crveno, HTML elementu u kojem se tekst nalazi morao da dodijelimo klasu ili identifikator.

Dodelimo klasu nas_tekst elementu h1.

<h1 class="nas_tekst"> Naslov </h1>

Dodjelimo identifikator nas_tekst elementu h1.

<h1 id="nas_tekst"> Naslov </h1>

U čemu je razlika između klase i identifikatora?

Razlika je u tome što na jednoj stranici možemo da imamo više klasa, ali samo jedan identifikator.

Smijemo da uradmo:
<h1 class=”nas_tekst”> Naslov </h1>
<h2 class=”nas_tekst”> Novi naslov </h1>
<h3 class=”nas_tekst”> Treći naslov</h1>

Ali ne i ovo:
<h1 id=”nas_tekst”> Naslov </h1>
<h2 id=”nas_tekst”> Novi naslov </h1>
Ispravno je:
<h1 id=”nas_tekst”> Naslov </h1>
<h2 id=”nas_tekst2″> Novi naslov </h1>

Dakle možemod a imamo više elemenata koji imaju istu klasu “nas_tekst”, ali samo jedan element može da ima idenifikator “nas_tekst”. Zbog toga smo identifikator na drugom naslovu ispravili “nas_tekst”->”nas_tekst2″.

Napomena: Prilikom imenovanja klasa i identifikatora ne smijemo da koristimo prazan prostor. “nas naslov”—> “nas_naslov”.