CodeWilderness
HTML coding flow
Singing Parrot as author
Radošević Dejan

HTML - Uvod

HTML možemo definisati kao jezik za označavanje koji može dati uputstva pregledačima o tome kako da prikažu web stranice korisniku. Najnovija verzija jezika jeste HTML5 i njime se definišu standardi, značenje i struktura web stranica.

Šta je značenje jezika za označavanje hiperteksta?

Glavni gradivni blok svake stranice je element koji se sastoji od oznaka i sadržaja. Sadržaj se postavlja između oznaka. Oznake mogu biti u parovima, i u tom slučaju jedna oznaka je za otvaranje, a druga za zatvaranje taga. Osim oznaka u parovima postoji i samozatvarajuća oznaka.

<tag-name> Sadržaj elementa </tag-name>
 
<self-closing-tag />

U budućim primerima, često ću koristiti komentare. Komentari su nam potrebni da opišemo šta naš kod radi, omogućavaju lakše održavanje koda a takođe olakšavaju posao nekome ko sa nama radi na istom projektu. Ne predstavljaju dio vidljivog sadržaja. U primeru ispod daćemo osnovnu HTML strukturu sa upotrebom komentara.

<!--
    Izemđu ovih oznaka pišemo komentare u HTML-u
-->
 
<!DOCTYPE html>
<!--
    DOCTYPE oznaka deklariše dokument kao HTML5.
    Oznaka je obavezna jer ako se izostavi pretraživač
    može koristiti neke druge metode prikaza,
    koje ne moraju biti kompaktibilne sa specifikacijama
    našeg dokumenta.
-->
 
<html lang="en">
  <!--
        html je glavni ( root ) element ostalih elemenata.
        Sadrži samo dva elementa: head i body
    -->
 
  <head>
    <!--
        head element je poput zaglavlja dokumenta i ne prikazuje se
        na stranici.
        Koristimo ga da podesimo metapodatke kao i sadržaj koji
        nije direktno vidljiv na stranici, poput stila, skripti, fontova i sl.
    -->
 
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,
        initial-scale=1.0"
    />
    <!-- meta element koristimo za postavljanje metapodataka -->
 
    <link rel="icon" type="image/tip" href="URL" />
    <!--
        link se obično koristiti za povezivanje sa
        nekim spoljnim resursem, npr css datoteke,
        ui biblioteke, fontovi itd. Navedeni primer postavlja
        malu ikonicu u lijevom uglu banera stranice.
    -->
 
    <title>HTML Tutorial</title>
    <!--  title se koristi da postavimo naslov dokumenta, koji
    se prikazuje odmah poslije ikonice u baneru. -->
  </head>
  <body>
    <!--  body element sadrži cjelokupni vidljivi dio stranice -->
  </body>
</html>

Atributi

Možemo reći da atributi sadrže dodatne informacije o samom elementu i obično te informacije nijesu direktno vidljive. Svaki atribut ima naziv i vrijednost. Neki atributi se mogu definisati u svakom elementu, ali su neki specifični za određene elemente. Postavljaju se unutar otvarajućeg taga ili unutar samozatvarajućeg. Definišemo ih na sledeće načine:

<!-- ako je vrijednost atributa boolean ili odgovara
nazivu samog atributa onda možemo koristiti
naziv atributa za njegovo definisanje  -->
<input disabled />
 
<!-- navodnike možemo a ne moramo da koristimo ukoliko se 
radi o numeričkoj vrijednosti atributa ili vrijednost nema
razmak ili neki karakter koji utiče na prikaz
NAPOMENA: NE KORISTITE OVAJ NAČIN DODJELE VRIJEDNOSTI ATRIBUTU 
 
<input value=11 />
-->
 
<!-- vrijednost atributa unutar navodnika ili polunavodnika -->
<input type="value" />
<!--- <input type='value' /> -->

Class

Klasa je poseban atribut koji se može koristiti za grupisanje elemenata sa istim stilom ili ponašanjem. Svaki element može posjedovati i dijeliti vrijednost class atributa.

<div class="className">
  <!-- Sadržaj div elementa -->
</div>

ID

Id predstavlja jedinstveni indetifikator elementa na web stranici. Mora biti specifičan za svaki element.

<div id="idValue">
  <!-- Sadržaj div elementa -->
</div>

Style

Style atribut koristimo da direktno definišemo stil elementa. Danas se ovaj atribut rijetko koristi.

<div style="cssProperty: value;">
  <!-- Sadržaj div elementa -->
</div>

Podjela elemenata

Elemente možemo podijeliti u dvije grupe: