Osnove HTML-a

HTML (Hypertext Markup Language) je jezik koji stoji iza svake web stranice koju pogledate (pokušajte na nekoj stranici kliknuti desnom tipkom miša pa onda na “View Page Source” i vidjet ćete. HTML je jako jednostavan jezik za naučiti i možete ga, donekle, savladati i u vremenu od tjedan do dva. Naravno, nećete biti savršeni, ali znat ćete nešto.

Prije svega, trebate znati da HTML nije programski jezik, znači kad ga naučite ne možete reći da znate programirati, jer to nije programiranje. :) HTML je opisni jezik kojeg interpretira browser (preglednik). Sastoji se od ključnih riječi (tagova) i svaki tag ima svoje značenje.

Ja vam neću pokazivati HTML na lakši način, već odmah na ispravan način, sa DOCTYPEom i da je napisan po XHTML standardu.

Svaki dokument započinje sa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

To browseru govori da interpretira vaš HTML po XHTML standardu.

Osnovni dijelovi stranice nakon DOCTYPE-a su HTML, HEAD, BODY.

HTML je element u kojem se nalaze svi ostali elementi, HEAD je zaglavlje dokumenta, a BODY sadrži sve što će se prikazati u browseru.

Svaki element mora se zatvoriti. Znači ako imate <html> morate imati i </html>. Neki elementi se odmah zatvaraju, poput <br />.

U HEAD elementu nalaze se raznorazni podaci poput linkova na RSS feed, CSS datoteke, JavaScript dokumente i naziva stranice te metapodataka.

<head>
     <title>Naslov stranice</title>
     <meta http-equiv="Content-Type" 
           content="text/html;charset=utf-8" />
     <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>

U ovom headu stranice nalazimo podatke o nazivu stranice i putanju do datoteke sa stilovima (styles.css) o kojima ću govoriti neki drugi put, a definirali smo i znakovni set (character set, ima li koji bolji prijevod?) UTF-8.

Nakon HEAD-a dolazi BODY. U njemu se nalazi kompletan sadržaj vaše stranice. Naslovi, slike, linkovi i sve ostalo što vidite na web stranicama.

<body>
    <h1>Neki naslov</h1>
    <p>Ovo je odlomak teksta koji također sadrži i <a href
="put/do/necega.html" title="Put do nečega">link</a>
       <img src="put/do/slike.png" alt="Tu smo umetnuli sliku" />
    </p>
</body>

Naslovi bi se trebali stavljati u tagove od <h1> do <h6> ovisno o važnosti. H1 su najvažniji naslovi, H2 su manje važni od H1, itd. Ova stranica u browseru prikazat će jedan naslov, odlomak teksta i sliku. Svi elementi imat će predefiniran izgled koji dodjeljuje browser, a kako definirati stilove pisat ću neki drugi put.

Na kraju, za pregled, kompletan kod današnje lekcije.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
     <title>Naslov stranice</title>
     <meta http-equiv="Content-Type" 
           content="text/html;charset=utf-8" />
     <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
    <h1>Neki naslov</h1>
    <p>Ovo je odlomak teksta koji također sadrži i <a href
="put/do/necega.html" title="Put do nečega">link</a>
       <img src="put/do/slike.png" alt="Tu smo umetnuli sliku" />
    </p>
</body>
</html>

Nadam se da sam vam pomogao sa ovim postom i nadam se da ste sve razumjeli. :D

Odgovori

Popunite niže tražene podatke ili kliknite na neku od ikona za prijavu:

WordPress.com Logo

Ovaj komentar pišete koristeći vaš WordPress.com račun. Odjava / Izmijeni )

Twitter picture

Ovaj komentar pišete koristeći vaš Twitter račun. Odjava / Izmijeni )

Facebook slika

Ovaj komentar pišete koristeći vaš Facebook račun. Odjava / Izmijeni )

Google+ photo

Ovaj komentar pišete koristeći vaš Google+ račun. Odjava / Izmijeni )

Spajanje na %s

%d bloggers like this: