HTML: prva web stranica

Lekcija 1 od 17 · HTML, CSS i JavaScript

HTML (HyperText Markup Language) opisuje strukturu web stranice: šta je naslov, šta pasus, gde je slika, a gde link. U ovoj lekciji pripremaš alat, pišeš prvu stranicu i otvaraš je u pregledaču – bez instaliranja servera.

Pre nego što počneš: potrebno predznanje – šta je web, frontend i backend.
Kako da učiš: zadatke na kraju prvo uradi sam/a u svom editoru; uputstvo i rešenje otvori tek posle toga. Svaki primer ima kod i živi rezultat ispod njega; kod prekucaj u svoj fajl i menjaj ga.

Šta ti treba

Alat	Čemu služi	Napomena
Visual Studio Code	editor koda: boji kod, dopunjuje tagove, prijavljuje greške	besplatan; dodatak Live Server automatski osvežava stranicu kad sačuvaš fajl
pregledač (Chrome, Firefox, Edge)	prikazuje stranicu i ima alate za programere (F12)	već ga imaš
online editor	rad bez instalacije	CodePen, JSFiddle

Napravi folder moj_sajt, otvori ga u VS Code-u (File → Open Folder) i u njemu napravi fajl index.html. Ime index.html je dogovor: to je početna strana foldera koju server prikazuje kada se ne navede ime fajla.

Tagovi, elementi i atributi

HTML se piše pomoću tagova u izlomljenim zagradama. Većina dolazi u paru – otvarajući i zatvarajući tag, a između je sadržaj. Zajedno čine element:

<p>Ovo je pasus.</p>
└┬┘└──────┬─────┘└┬─┘
 otvarajući  sadržaj  zatvarajući tag (sa /)

Atributi daju elementu dodatne podatke i pišu se u otvarajućem tagu kao ime="vrednost":

<a href="https://petlja.org">Petlja</a>
<img src="logo.png" alt="Logo škole">

Neki elementi nemaju sadržaj pa ni zatvarajući tag: <img>, <br>, <hr>, <input>, <meta>.

Kostur svake HTML stranice

<!DOCTYPE html>
<html lang="sr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Moja prva stranica</title>
</head>
<body>
  <h1>Zdravo, svete!</h1>
  <p>Ovo je moja prva web stranica. Napravio/la sam je u HTML-u.</p>
  <!-- komentar: ovo pregledač ne prikazuje -->
</body>
</html>

Rezultat:

Deo	Značenje
`<!DOCTYPE html>`	kaže pregledaču da je ovo moderan HTML (HTML5)
`<html lang="sr">`	ceo dokument; `lang` pomaže pretraživačima i čitačima ekrana
`<head>`	podaci o stranici – ne vide se na stranici
`<meta charset="utf-8">`	kodiranje znakova – bez njega se č, ć, š, ž, đ prikazuju pogrešno
`<meta name="viewport" ...>`	stranica se pravilno prikazuje na telefonu
`<title>`	naslov na kartici pregledača i u rezultatima pretrage
`<body>`	sve što se vidi na stranici
`<!-- ... -->`	komentar za programera

U VS Code-u dovoljno je da u praznom fajlu otkucaš ! i pritisneš Tab – editor sam napiše kostur.

Naslovi i pasusi

<h1>Naslov stranice (h1)</h1>
<h2>Poglavlje (h2)</h2>
<h3>Odeljak (h3)</h3>
<p>Pasus je blok teksta. Pregledač    spaja   više razmaka
i prelazaka u novi red u jedan razmak.</p>
<p>Novi red unutar pasusa:<br>pravi se tagom br.</p>
<hr>
<p>Iznad je horizontalna linija (hr).</p>

Rezultat:

Postoji šest nivoa naslova, od h1 do h6. Na stranici treba da bude jedan h1 (glavni naslov), a ostali idu redom kao poglavlja u knjizi – ne biraju se po veličini slova, za to služi CSS.

Ugnježdavanje i uvlačenje

Elementi se stavljaju jedan u drugi i zatvaraju obrnutim redom:

Ispravno	Pogrešno
`<p>Ovo je <strong>važno</strong>.</p>`	`<p>Ovo je <strong>važno.</p></strong>`

Uvlači sadržaj elementa za 2 razmaka – pregledaču je svejedno, ali tebi je mnogo lakše da vidiš šta je u čemu. U VS Code-u Shift+Alt+F sam uredi kod.

Savet: desni klik na bilo koji element stranice → Inspect / Pregledaj (ili F12) pokazuje njegov HTML i CSS. Vrednosti možeš menjati uživo – promena traje dok ne osvežiš stranicu.

Zadaci za vežbu

Za svaki zadatak postoji primer, uputstvo i rešenje. Rešenja su provereno ispravna u pregledaču.

ZADATAK 01Težina: lako

Stranica „O meni“

Napravi stranicu o_meni.html sa naslovom kartice „O meni“, glavnim naslovom sa tvojim imenom, dva podnaslova („Hobiji“ i „Omiljeni predmeti“) i po jednim pasusom ispod svakog.

Rešenje

<!DOCTYPE html>
<html lang="sr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>O meni</title>
</head>
<body>
  <h1>Ana Petrović</h1>
  <h2>Hobiji</h2>
  <p>Volim da programiram igrice, igram odbojku i čitam fantastiku.</p>
  <h2>Omiljeni predmeti</h2>
  <p>Matematika, informatika i fizika.</p>
</body>
</html>

ZADATAK 02Težina: srednje

Pronađi greške

U kodu ispod ima četiri greške. Pronađi ih i ispravi.

<html>
<head>
  <title>Škola</title>
</head>
<body>
  <h1>Moja škola<h1>
  <p>Nalazi se u <strong>Pančevu.</p></strong>
</body>

Rešenje

<!DOCTYPE html>                        <!-- 1. nedostajao je DOCTYPE -->
<html lang="sr">
<head>
  <meta charset="utf-8">                <!-- 2. bez ovoga se "Š" ne prikazuje dobro -->
  <title>Škola</title>
</head>
<body>
  <h1>Moja škola</h1>                   <!-- 3. zatvarajući tag mora imati / -->
  <p>Nalazi se u <strong>Pančevu.</strong></p>   <!-- 4. zatvaranje obrnutim redom -->
</body>
</html>                                 <!-- i html mora da se zatvori -->

Česte greške i saveti

Zaboravljen <meta charset="utf-8"> – slova č, ć, š, ž, đ postaju čudni znakovi.
Zatvarajući tag bez kose crte: <h1>...<h1> otvara novi naslov umesto da zatvori stari.
Naslovi se biraju po značenju (h1 → h2 → h3), a ne po veličini slova.
Fajl mora da se sačuva (Ctrl+S) pre osvežavanja pregledača – inače vidiš staru verziju.

HTML: prva web stranica

Šta ti treba

Tagovi, elementi i atributi

Kostur svake HTML stranice

Naslovi i pasusi

Ugnježdavanje i uvlačenje

Zadaci za vežbu

Stranica „O meni“

Uputstvo

Rešenje

Pronađi greške

Uputstvo

Rešenje

Proveri znanje

Prva web stranica