HTML - Kreiranje stranice


HTML datoteka je jednostavno tekstualna datoteka spremljena s .html ili .htm ekstenzijom. U ovoj lekciji ćemo vam pokazati kako lako stvoriti HTML dokument ili web stranicu. Za početak kodiranja HTML-a potrebne su vam samo dvije stvari: tekstualni editor i web pretraživač. Ukoliko nemate tekstualni editor, skinite ga sa sljedećeg linka Sublime Text 3. Pa, započnimo sa stvaranjem vaše prve HTML stranice.



Kreiranje vašeg prvog HTML dokumenta

Krenimo kroz sljedeće korake. Na kraju ove lekcije napravićete HTML fajl koja u web pretraživaču prikazuje poruku "Hello world".


Korak 1: Izrada HTML datoteke

Otvorite tekstualni editor na računaru i stvorite novi fajl. Ukoliko nemate skinite ga sa sledećeg linka SublimeText


Korak 2: Unošenje HTML koda

Započnite s praznim fajlom i unesite sljedeći kod:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Moja prva HTML stranica</title>
</head>
<body>
    <p>Hello World!<p>
</body>
</html>

Korak 3: Spremanje datoteke

Sada sačuvajte fajl na radnu površinu kao "mojaprvastranica.html".

Da biste otvorili fajl u browser-u dođite do datoteke gdje ste sačuvali vaš fajl, a zatim dva puta kliknite. Otvoriće se u vašem zadanom web pretraživaču. Ako to ne učini, otvorite svoj pretraživač i povucite fajl na njega.



Objašnjenje koda

Vjerovatno se pitate o čemu se zapravo radi u kod. Pa, hajde da saznamo.

  • Prvi red <! DOCTYPE html> je izjava tipa dokumenta. Internetski pretraživač upućuje da je ovaj dokument HTML5 dokument.
  • Element <head> je spremnik za oznake koji pružaju informacije o dokumentu, na primjer, oznaka <title> definiše naslov dokumenta.
  • Element <body> sadrži stvarni sadržaj dokumenta (paragrafi, linkove, slike, tabele, itd.) koji se prikazuje u web pretraživaču i prikazuje korisniku. Odnosno sadrži sve ono što će se prikazivati korisniku kada posjeti naš sajt.

O različitim HTML elementima detaljno ćete saznati u narednim lekcijama. Za sada se samo usredotočite na osnovnu strukturu HTML dokumenta.



HTML oznake i elementi

HTML je napisan u obliku HTML elemenata koji se sastoje od označnih tagova. Te su oznake temeljna karakteristika HTML-a. Svaka oznaka sastavljena je od ključne riječi, okružene uglastim zagradama, poput <html>, <head>, <body>, <title>, <p>, i tako dalje. HTML oznake obično dolaze u parovima poput <html> i </html>. Prva oznaka u paru često se naziva početna oznaka (ili početni tag), a druga se naziva završna oznaka (ili završni tag).

Otvarajuća oznaka i oznaka za zatvaranje su identične, osim kose crte (/) nakon uglaste otvorene zagrade da bi pretraživaču rekli da je naredba završena. Između početnog i završnog taga možete smjestiti odgovarajući sadržaj. Na primjer, paragraf koji je predstavljen elementom p, napisao bi se kao:

<p>Ovo je paragraf.</p>
<p>
    Ovo je <b>drugi</b> paragraf.
</p>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Moja prva HTML stranica</title>
</head>
<body>
    <p>Ovo je paragraf</p>
    <!-- Paragraf sa ugrađenim elementom -->
    <p>
        Ovo je <b>drugi</b> paragraf.
    </p>
</body>
</html>

O različitim HTML elementima naučićete u narednoj lekciji.