Svakoj web stranica na strani klijenta dodajemo sadržaj (HTML), oblikovanje (CSS) i ponašanje (JavaScript). Unosimo ih u nekom tekst editoru, npr. VS Code ili Brackets.
Neki od besplatnih editora su:
Editore teksta koristimo za unos tekstnih datoteka pa tako i .html, .css, .js, .php datoteka.
Oni omogućavaju između ostalog prikazivanje dijelova kôda različitim bojama i stilovima, pronalaženje grješaka, automatsko predlaganje i dopunjavanje kôda i mnoštvo drugih naprednih mogućnosti.
Notepad i utf-8Za promjenu sadržaja html dokumenta (odnosno web stranice) možemo koristiti i običan tekst editor, kao što je Notepad. Trebate spremiti html dokument na tvrdi disk s nastavkom .html. Prvi put treba izabrati Save as… i pod Encoding umjesto ANSI, odabrati utf-8 kodnu stranicu kako bi naši dijakritički znakovi bili ispravno prikazani.
Sljedeći primjer sadrži html elemente za ispis teksta glavnog naslova <h1>, teksta odlomka <p> i podnaslova <h2>. Slijede još dva elementa odlomka <p>. Sadržaj koji želimo prikazati u prozoru web preglednika, mora se nalaziti unutar <body> elementa.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Primjer web stranice</title>
</head>
<body>
<h1>Naslov na web stranici</h1>
<p>Odlomak teksta.</p>
<h2>Moji hobiji</h2>
<p>Planinarenje.</p>
<p>Čitanje.</p>
</body>
</html>HTML dokument počinje oznakom <!doctype html>. Ona označava da je web stranica napisana u html5 standardu. Zatim dolazi oznaka početka kôda <html>. Podijeljena je u dvije cjeline: <head> i <body>. Sva tri elementa imaju početnu i završnu oznaku.
početna i završna oznakaPrimjer početne oznake je <head>, a završne </head>. Razlika između svake početne i završne oznake, je kosa crta / ispred naziva završne oznake.
elementi sadržajaElemente koji imaju početnu i završnu oznaku zovemo elementi sadržaja. Sadržaj elementa stavljamo između početne i završne oznake.
prazni elementiOsim elemenata sadržaja, postoje i prazni elementi. Oni nemaju završnu oznaku i možemo ih zatvoriti kosom crtom na kraju oznake. Primjer praznog elementa je element slike: <img />.
U <head> dijelu određujemo svojstva web stranice. U gornjem primjeru smo u <head> dijelu umetnuli <meta charset=“utf-8" /> element, kojim smo postavili utf-8 za kodnu stanicu html dokumenta. Ona omogućava između ostalih i prikaz hrvatskih dijakritičkih znakova (č, ć, đ, š i ž).
Osim <meta> elementa unutar <head> elementa nalazi se i <title> element. <title> element sadrži tekst koji će biti ispisan na kartici web preglednika. On je važan dio SEO optimizacije web sjedišta i bit će ispisan u tražilici (Google, Bing, Yahoo) kao naziv web stranice.
<body> dio može sadržavati html elemente za prikaz teksta, poveznica, popisa, tablica, slika, obrazaca (engl. forms) te audio i video zapisa.
ugniježđeni elementiUočimo kako su <head> i <body> elementi ugniježđeni (umetnuti) unutar <html> elementa. Isto tako <title> i <meta> su elementi ugniježđeni unutar <head> elementa.
vanjski i unutarnji elementiZa <html> element kažemo kako je vanjski element u odnosu na <head> i <body> - za koje kažemo da su unutarnji u odnosu na <html> element. Nikada ne smijemo zatvoriti vanjski element, prije nego što smo zatvorili sve unutarnje elemente.
Html oznake i njihova svojstva pišemo malim slovima.
Dobro je vrijednosti svojstava elemenata stavljati unutar navodnika.
Elementi sadržaja moraju imati početnu i završnu oznaku.
Prazni elementi ne moraju biti zatvoreni kosom crtom na kraju oznake.
Sljedeći primjer ispisuje na kartici web preglednika tekst Prva web stranica.
Na vrhu web preglednika ispisan je naslov Dobrodošli na otvorenje. <h1> je blok element i nakon njega web preglednik prelazi u novi redak. U sljedećem retku je ispisan tekst odlomka Kôd je napisan u Brackets editoru. I html element odlomka <p> je blok element.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Prva web stranica</title>
</head>
<body>
<h1>Dobrodošli na otvorenje</h1>
<p>Kôd je napisan u Brackets editoru.</p>
</body>
</html>CDN pohrana slika i videa.
AI povećanje slika.
Pretvorba formata slika: webp...
25Gb podataka.
Zašto ne sada?
