HTML/CSS za početnike #2 - Struktura HTML dokumenta

     U prethodnoj lekciji upoznali smo se sa HTML-om i naučili osnovnu sintaksu pisanja HTML tagova. U ovoj lekciji videćemo koji su to elementi koje svaka HTML stranica mora da sadrži i počećemo sa izradom prvog HTML dokumenta našeg web sajta.

Struktura HTML dokumenta


     Sadržaj svakog HTML dokumenta nalazi se između <html>...</html> tagova. Skoro sve što je izvan ovih tagova niti se prikazuje niti ima bilo kakav uticaj na web stranicu. Kažem skoro sve jer postoji jedan izuzetak i to je takozvana “doctype deklaracija” koja se piše na samom početku dokumenta i izgleda ovako:

<!DOCTYPE html>

     Doctype deklaracija u suštini i nije HTML tag već instrukcija internet pretraživaču koja mu govori o kakvom se dokumentu radi i nema zatvarajući tag. Primer deklaracije koju sam ja naveo govori pretraživaču da se ispod nje nalazi HTML5 dokument. Za HTML4 postoje tri tipa deklaracija i jedna od njih izgleda ovako:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

     Postoje i XHTML deklaracije, ali mi ćemo koristiti HTML5 deklaraciju. Detaljnije o ovome možete pročitati OVDE.
     Unutar <html>...</html> tagova svaki HTML dokument sadrži “glavu” i “telo”. Glava HTML dokumenta se nalazi između <head>...</head> tagova, dok se telo nalazi unutar <body>...</body> tagova. Glava HTML dokumenta se ne prikazuje na samoj web stranici ali sadrži neke bitne parametre sa kojima ćemo se upoznavati u hodu dok je telo sama web stranica koju mi vidimo pomoću internet pretraživača.
     Da bi vam sve bilo jasnije počećemo sa samom izradom dokumenta.

Početak izrade web sajta


     Za početak napravite jedan folder na vašem računaru u kome ćete smeštati dokumente. Zatim otvorite program za obradu teksta (Notepad++, Notepad, Geany... U daljem tekstu “text editor”) i krenite sa unosom HTML koda. Na samom početku unesite doctype deklaraciju za HTML5:

<!DOCTYPE html>

i ispod deklaracije osnovne elemente koje smo već opisali

<html>

<head>
</head>

<body>
</body>

</html>

     Rekli smo da glava HTML dokumenta sadrži neke parametre dokumenta. Jedan od tih parametara je naslov stranice. Naslov se piše unutar <title>...</title> tagova. Unesite sledeće u head sektor dokumenta:

<title>Moj prvi sajt</title>

     Naslov stranice je obavezan u HTML5 dokumentu i definiše naziv stranice u internet pretraživačima, a takođe se prikazuje i u Google i sličnim pretragama.
     Unećemo još jedan red u head sektor dokumenta, ispod naslova, i to je:

<meta charset="UTF-8“>

     Ovaj parametar nema zatvarajući tag i neću ga opširno objašnjavati. Reći ću samo da definiše sistem za kodiranje znakova i UTF-8 je sistem koji potržava pisanje srpskih slova kao što su š, đ, č, ć…
     Toliko za sada, sačuvajte vaš dokument u folder koji ste napravili i nazovite ga index.html.
     Ako ste sve odradili kako valja vaš dokument treba da izgleda ovako:


     Kao što vidite sa slike, možete učiniti vaš dokument preglednijim uvlačenjem redova i ostavljanjem praznih redova. Možete sada da otvorite stranicu preko pretraživača, otvoriće vam se prazna stranica jer nismo uneli ništa u telo dokumenta, jedino što možete da vidite je naslov stranice u zaglavlju pretraživača.Da ponovimo, u ovoj lekciji naučili smo osnovnu strukturu HTML dokumenta i krenuli sa izradom prve stranice. U sledećoj lekciji krenućemo sa popunjavanjem tela dokumenta.

6 comments:

  1. promeni sliku ,imaš loš DOCTYPE na njoj!

    ReplyDelete
  2. Imam jedan čudan problem.
    Prvih par dokumenata su mi prošli svi u redu,stavim utf-8 i vidim naša slova.
    Zadnja tri dokumenta što sam radio imam naše znakove sve dok ne napišem u head sekciji .
    U čemu bi mogao bit problem?

    ReplyDelete
  3. meta charset="utf-8"

    ReplyDelete
  4. Za sada je super, imam mozda neko predznanje ali ovde je stvarno objasnjeno korak po korak

    ReplyDelete