Uvod u html : HTML introduction

Radno okruženje

Prednost ovog vodiča je u tome da učite na gotovim primjerima. Iskopirajte kôd s web stranice, snimite ga u html dokument i učite kroz primjere!

Kako i drugdje, tako i ovdje postoji teorijski dio i praktičan dio. Teorijski dio obradit ćemo - bilo u članka o temi - bilo danom poveznicom koja na webu upućuje na područje koje treba proučiti. Napominjem kako je na u seriji članaka HTML za početnike obrađen dio vezan za html koji ovdje ne ćemo ponavljati.

Praktičan dio obavljat ćemo u MS Code editoru koji omogućava lakši unos kôda u računalo. Osim editora potreban je i web preglednik MS Edge ili Google Chrome u koje ćete pregledavati učinjeno.

Web dizajn i html

Uvodno nazivlje

Moramo na početku reći kako se web stranica sastoji od tri osnovne cjeline. Sadržaja web stranice koji se unosi u html kôd. Zatim izgleda web stranice koji se oblikuje pomoću css stilova i na kraju ponašanja web stranice koje određuje JavaScript odnosno biblioteka funkcija napisana u JavaScriptu kao što je jQuery.

Ponašanje web stranice možemo gledati sa strane klijentskog računala tj. kôda koji se izvodi na našem računalu (kao što smo rekli to je JavaScript) ili sa strane serverskog računala (gdje to može biti php kôd). Serversko računalo je računalo na kojem je pohranjeno web sjedište.

Radi razumijevanja potrebno je reći kako se web sjedište sastoji od jedne ili više web stranica. Dakle u web pregledniku pregledavamo jednu po jednu web stranicu s nekog web sjedišta.

Web sjedište pohranjujemo na računalu na kojem imamo web hosting – hosting je naziv za uslugu pohrane web sjedišta na web serveru – računalu koje je 24 sata dnevno / 7 dana u tjednu / 365 dana u godini dostupno na Internetu.

Naziv html

HTML ili engleski HyperText Markup Language govori nam o bitnoj značajci html kôda. On se osim teksta sastoji od poveznica (engl. link ili hypertext). To je bitna razlika između Interneta i knjiga. Po knjizi se krećemo čitanjem ili listanjem knjige. Kod Interneta možemo "skakati" po njemu klikom na poveznicu (koja može biti tekst ili slika) te kretanjem po web stranicama istog ili drugog web sjedišta bilo gdje na zemaljskoj kugli.

U nazivu html - osim naznake da se radi o hipertekstu, dakle kako sadrži poveznice – kaže se i to kako je to označni jeziki (engl. Markup Language), dakle radi se o jeziku koji je opisan označnim kôdovima.

Označni kôdovi html elementa

Html kôd se sastoji od html elemenata koji se pišu unutar šiljastih zagrada i nazivaju tagovima ili oznakama. Primjer html elemenata je <html>, <head>, <body>, <header>, <footer>...

Razlikujemo parne (ponegdje se nazivaju i dvostruke) i prazne (ili jednostruke) označne kôdove

Parne oznake

Parne oznake (ili dvostruke oznake) sastoje se od početne i završne oznake između kojih se može nalaziti tekst ili drugi html elementi. Početna i završna oznaka html elementa se razlikuju u kosoj crti: tako je <body> početna oznaka body elementa, a </body> završna oznaka istog elementa.

Parne oznake uvijek moraju biti zatvorene (<body></body>)

Prazne oznake

Prazne oznake (ili jednostruke oznake) sastoje se samo od početne oznake. Početnu html oznaku praznog html elemenata prepoznajemo po kosoj crti: tako je <img /> oznaka praznog img elementa.

Struktura html dokumenta

Na početku obavezno se mora nalaziti doctype oznaka kako se radi o html5 dokumentu: <!doctype HTML>

HTML elementi moraju biti pravilno ugniježđeni. Drugim riječima kada se unutar parnih oznake nalaze druge parne oznake prvo se mora zatvoriti unutarnja parna oznaka a tek zatim se može (ali i ne mora) zatvoriti vanjska parna oznaka. Primjer ugniježđene parne oznake:

<html>
  <head>
    <meta charset="utf-8" />
  </head>

Dakle prije zatvaranja <html> parne oznake moramo zatvoriti unutarnju parnu oznaku <head>.


Što to znači "ali i ne mora" – to znači kako se prije zatvaranja vanjske parne oznaka može otvoriti i zatvoriti druga unutarnja parna oznaka. Primjer otvaranja druge parne oznake:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Moj web dizajn</h1>
    </body>
</html>

Dakle prije nego što smo zatvorili <html> parnu oznaku otvorili smo i zatvoriti dvije parne oznake <head> i <body>, a prije nego što smo zatvorili <body> parnu oznaku otvorili smo i zatvorili <h1> parnu oznaku.

Html sintaksa

  • html elementi moraju biti pravilno ugniježđeni
  • parni html elementi moraju uvijek biti zatvoreni <p></p>
  • html elementi moraju biti napisani malim slovima
  • nazivi html svojstva (engl. attribute) moraju biti napisana malim slovima
  • vrijednost html svojstava mora se navesti unutar navodnika src="/slike/slika-1.jpg"