HTML datoteka je ono što internet preglednik učitava kako bi prikazao sadržaj.
Brzi uvod
Kako započeti? Pa jednostavno, otvorite uređivač teksta (Notepad) i u njemu upišite:
<h1> Ja sam HTML stručnjak! </h1>
Zatim spremite datoteku na radnu površinu pod nazivom:
index.html
E, sada otvorite internet preglednik. Znaći Firefox ili Chrome i u njega ubacite index.html datoteku.
I to je to!
Detaljnije…
HTML format je baziran na XML formatu a XML je nastao zbog potrebe za formatom u kojem bi se pohranjivali računalu lako razumljivi podaci u tekstualnom formatu.
Na primjer, imamo grupu podataka:
| Grupa | Značajka | Vrijednost |
| grupa | boja | Narančasta |
| grupa | tekst | Kiše jesenje |
I želimo grupu podataka pohraniti kao tekst u datoteku, onda to možemo ovako sa XML:
<grupa> <boja>Narančasta</boja> <tekst>Kiše jesenje</tekst> </grupa>
<oznaka>vrijednost</oznaka>
Kada se XML string konvertira u programski kod dobijemo da “grupa.boja” sadrži vrijednost “Narančasta” U XML možemo zapakirati kod na još jedan način i to sa atributima odnosno svojstvima.
Na primjer oznaka (tag) “boja” ima atribut “svojstvo” sa vrijednošću “vanjska”.
<boja svojstvo="vanjska">Narančasta</boja>
I na kraju moramo napomenuti i samozatvarajuće oznake.
<oznaka />
HTML
HTML je posebna verzija XML-a koja funkcionira u biti isto kao i XML. U svom najosnovnijem primjeru HTML izgleda ovako:
<!DOCTYPE html> <html> <head> <title>Naslov stranice</title> </head> <body> <h1>Naslov</h1> <p>Ovo je paragraf porukica!</p> </body> </html>
Ovaj kod kopiramo u tekst editor i spremamo kao “primjer.html”. “primjer.html” ubacimo u internet preglednik gdje dobivamo:
Sada kada razumijemo XML razumijemo i HTML kod pa vidimo da imamo “html” grupu i u njoj dvije pod grupe “head” i “body”.
Oznaka < head > u HTML-u koristi se za pružanje informacija o web stranici, ali ne sadrži vidljivi sadržaj koji se prikazuje na web stranici. Umjesto toga, sadrži meta informacije, skripte, liste stilova i druge elemente koji pomažu definirati i konfigurirati web stranicu.
Oznaka < body > je gdje unosimo sadržaj stranice.
CSS
CSS je stilski jezik odnosno jezik s kojim oblikujemo izgled internet starnice. Za početak dovoljno je reći da imamo id i class tipove CSS objekata.
#myIdElement {
color: blue;
background: orange;
}
.myClassElement {
color: blue;
background: yellow;
}
ID objekt počinje sa # simbolom a klasa sa . simbolom. Id-e koristimo samo na jednom mjestu a klase na više mjesta. U CSS objektima imamo svojstva i vrijednosti. Listu svojstava možemo pronaći:
https://www.w3schools.com/cssref/index.php
CSS kod dodajemo u HTML “style” oznake odnosno: “”.
<style>
#myIdElement {
color: blue;
background: orange;
}
.myClassElement {
color: blue;
background: yellow;
}
</style>
Id i klasu dodajemo kao atribut u HTML tag/oznaku. Možemo opet ubaciti kod u tekst editor pa provjeriti kod u internet pregledniku:
<!DOCTYPE html>
<html>
<head>
<title>Naslov stranice</title>
<style>
#myIdElement {
color: blue;
background: orange;
}
.myClassElement {
color: blue;
background: yellow;
}
</style>
</head>
<body>
<h1 id="myIdElement">Naslov</h1>
<p class="myClassElement">Ovo je paragraf porukica!</p>
</body>
</html>
Samostalna datoteka
CSS skriptu možemo učitati i iz vanjske css datoteke:
<link rel="stylesheet" href="stil.css"/>
Javascript
Javascript je programski jezik s kojim automatiziramo i programiramo akcije korisničkog sučelja.
Blok “script” ubacimo obično prije html oznake.
<script>
alert("Kroz moje prazne dzepove, vjetrovi mi prolaze a kroz cipele, kise jesenje...");
</script>
Za početak morate samo znati za varijable i funkcije. Varijabla je kontejner za podatke. Funkcija je grupa koda koja se izvršava pozivom naziva funkcije sa ().
Varijablu unosimo ovako:
var a = "Heroj ulice";
Vrijednost “Heroj ulice” se sada nalazi u ‘a’ varijabli.
Funkcija nam izgleda ovako:
function fun (){
alert("Kroz moje prazne dzepove, vjetrovi mi prolaze a kroz cipele, kise jesenje...");
}
Funkciju pokrečemo kada negdje pozovemo fun() na primjer u HTML-u:
<button onclick="fun()"> Test </button>
Cijela HTML skripta sada izgleda ovako:
<!DOCTYPE html>
<html>
<head>
<title>Naslov stranice</title>
<style>
#myIdElement {
color: blue;
background: orange;
}
.myClassElement {
color: blue;
background: yellow;
}
</style>
</head>
<body>
<h1 id="myIdElement">Naslov</h1>
<p class="myClassElement">Ovo je paragraf porukica!</p>
<button onclick="fun()"> Test </button>
<script>
var a = "Nocas mladi mjesec je";
function fun (){
alert("Kroz moje prazne dzepove, vjetrovi mi prolaze a kroz cipele, kise jesenje..." + a);
}
</script>
</body>
</html>
Kopirajte HTML kod u tekst editor i spremite ga u “index.html” a zatim ubacite datoteku u internet preglednik.
Skriptu možemo učitati i iz vanjske datoteke:
<script type='text/javascript' src='script.js' ></script>
Ovo možete isprobati i na codepen stranici:
https://codepen.io/pen/