MathiaHTML kostur
<!DOCTYPE html>
<html>
<head><title>..</title></head>
<body> ... </body>
</html>
body = ono što se vidi.
Tekst
<h1>Naslov</h1>
<p>Pasus</p>
<b>podebljano</b>
<br> // novi red
h1 najveći, h6 najmanji.
Link i slika
<a href="adresa">link</a>
<img src="slika.jpg"
alt="opis">
href = adresa, src = putanja.
Lista
<ul>
<li>jedan</li>
<li>dva</li>
</ul>
ul = sa tačkicama, ol = brojevi.
CSS — gde
<style>
body { ... }
</style>
U head, ili poseban .css fajl.
CSS — osobine
color: #9c7838;
background: #fbf6ee;
font-size: 18px;
text-align: center;
ime: vrednost; (ne zaboravi ;)
CSS — selektori
p { ... } // svi p
.klasa { ... } // class="klasa"
#ime { ... } // id="ime"
. za klasu, # za id.
Flexbox
.red {
display: flex;
gap: 12px;
justify-content: center;
}
Reda elemente u red.
JS — osnove
let ime = "Ana";
let broj = 5;
console.log(ime);
let = promenljiva.
JS — funkcija
function zbir(a, b) {
return a + b;
}
zbir(3, 4); // 7
return vraća rezultat.
JS — DOM
document
.getElementById("ime")
.textContent = "novo";
Nađe element i menja ga.
Događaj
<button onclick="f()">
Klikni
</button>
onclick poziva funkciju f.
Konzola
F12 → Console
console.log(x);
// tu se vide greške
Prvo mesto kad nešto ne radi.