Uvod u HTML

Osnove HTML-a

Lekcija 01 — Uvod u HTML

Šta je HTML?

HTML (HyperText Markup Language) je osnovni jezik za izradu web stranica.
On ne programira, već opisuje sadržaj: naslove, paragrafe, liste, slike, linkove, navigaciju, strukturu stranice i još mnogo toga.

HTML je temelj svakog sajta — ako razumeš HTML, razumećeš kako web funkcioniše i kako je svaka stranica izgrađena.

Kako radi web? (kratko objašnjenje za početnike)

Da bi bolje razumeo HTML, važno je razumeti osnovu:

Kada otvoriš sajt u browseru (Chrome, Firefox, Edge…), on preuzima HTML datoteku sa servera.
Browser zatim čita HTML i prikazuje ga kao vizuelnu stranicu.
HTML govori: šta je sadržaj
CSS će kasnije govoriti: kako taj sadržaj izgleda

Dakle: HTML = struktura, CSS = izgled, a JavaScript = ponašanje.

Kako izgleda HTML dokument?

Svaka HTML stranica ima istu osnovnu strukturu.
Evo minimalnog primera:

<!DOCTYPE html>
<html lang="sr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moja prva stranica</title>
</head>
<body>

    <h1>Dobrodošli!</h1>
    <p>Ovo je moja prva HTML stranica.</p>

</body>
</html>

Objašnjenje:

Element	Objašnjenje
`<!DOCTYPE html>`	Obavezan deo koji govori browseru da je dokument HTML5
`<html>`	Glavni „kontejner“ cele stranice
`<head>`	Nevidljivi deo stranice – meta podaci, naziv tab-a, linkovi ka CSS-u itd.
`<body>`	Sve što se prikazuje na ekranu: tekst, slike, navigacija, footer…

Šta su HTML elementi i tagovi?

HTML koristi tagove da označi delove sadržaja.
Primer tagova:

<h1>Naslov</h1>
<p>Ovo je paragraf teksta.</p>
<a href="#">Ovo je link</a>

Tagovi mogu biti:

blokovski (<div>, <h1>, <p>, <section>…)
inline (<a>, <span>, <strong>…)

Ovo će biti važno u lekcijama o layout-u.

Najčešće korišćeni osnovni HTML elementi

1. Naslovi `<h1>`–`<h6>`

<h1>Glavni naslov</h1>
<h2>Podnaslov</h2>

2. Paragrafi `<p>`

<p>Ovo je jedan paragraf teksta.</p>

3. Linkovi `<a>`

<a href="https://primer.com">Klikni ovde</a>

4. Liste `<ul>`, `<ol>`

<ul>
  <li>Stavka liste</li>
</ul

Blok vs. Inline elementi (važno za kasnije lekcije)

Blok elementi zauzimaju celu širinu reda.
Primer: <div>, <p>, <h1>…

Inline elementi idu u liniji sa tekstom.
Primer: <span>, <a>, <strong>…

Jednostavan primer:

<p>Ovo je <strong>inline</strong> tekst unutar paragrafa.</p>

A blok:

<div>Ovo je blok element.</div>

Ovo razumevanje će biti ključno za Flexbox i Grid lekcije.

Kako kreirati i pokrenuti svoju prvu HTML stranicu?

Otvori običan editor (VS Code, Notepad++, Sublime, ili čak običan Notepad).
Kreiraj novi fajl.
Sačuvaj ga kao index.html.
Ubaci osnovni HTML kod iznad.
Dvoklikom otvori fajl — otvoriće se u browseru!

To je sve — upravo si napravio svoju prvu web stranicu.

Gde počinju CSS i JavaScript?

U ovoj lekciji fokus je HTML, ali važno je da znaš gde idu ostale tehnologije:

CSS se dodaje kao <link> u <head> delu HTML dokumenta
JavaScript se najčešće stavlja pred kraj <body> dela

Primer:

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

U narednim lekcijama ćeš postepeno naučiti sve o CSS-u.

Mini zadatak (za kraj lekcije)

Napravite HTML stranicu koja sadrži:

jedan glavni naslov (h1)
jedan podnaslov (h2)
dva paragrafa teksta
jednu listu sa 3 stavke
jedan link
jedan div kao sekciju

Ovo je jednostavna, ali odlična vežba za početnike.

Šta sledi?

U sledećim lekcijama naučićeš:

sve osnovne HTML elemente
semantičke tagove
rad sa linkovima, listama
CSS stilizovanje (boje, tipografija)
layout tehnike (inline/block, Flexbox, Grid)
pravljenje potpunog, responzivnog web sajta