9. klase · Mācību vietne

HTML, CSS un JavaScript — instrukcija un faili

Šī lapa satur īsu teoriju un praktisku instrukciju darbam ar index.html, style.css un script.js, kā arī saites uz stundu materiāliem un testu.

1) Lejupielādējami faili

Stundu materiāli

Prezentācija: HTML/CSS/JS atkārtojums
html_css_js_atkartojums_prez.pptx · 128.5 KB
Stundas plāns (docx)
html_css_js_atkartojums_stundas_plans.docx · 18.1 KB

Darba faili

Sākuma lapa
index.html · 290 B
Stilu lapa
style.css · 161 B
Skripts
script.js · 631 B
Tests zināšanām (HTML)
tests_zin_parbaude_stundas_beigas.html · 5.0 KB

2) Kā sākt darbu (pārlūks + Notepad)

  1. Atver index.html ar dubultklikšķi (vai pārlūkā ar File → Open).
  2. Rediģē style.css un script.js ar Notepad → saglabā (Ctrl+S) → pārlūkā nospied F5.
  3. Ja pievieno attēlus, izveido mapi img/ un norādi ceļu, piem., <img src="img/logo.png" alt="logo">.

3) Minimālais piemērs saskaņā ar projektu

<!doctype html>
<html lang="lv">
<head>
  <meta charset="UTF-8">
  <title>Web Lapas Piemērs</title>
  <script src="script.js" defer></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Sveiki, pasaule!</h1>
  <p>Šī ir vienkārša web lapas demonstrācija.</p>
</body>
</html>

Padoms: defer ļauj ielādēt skriptu pēc HTML izlasīšanas — lapa ātrāk un bez kļūdām, ja skripts pieskaras DOM elementiem.

4) Īsā teorija skolēniem

HTML — saturs

  • Struktūra un semantika: <header>, <main>, <footer>, virsraksti <h1..h6>, rindkopas <p>.
  • Saites un attēli: <a href="...">, <img src="..." alt="...">.

CSS — noformējums

  • Selektori: elements, klase (.btn), ID (#galvene).
  • Kastes modelis: margin, padding, border, box-sizing.

JS — darbība

  • Notikumi: addEventListener('click', ...).
  • Konsoles pārbaude: F12 → Console.

5) Praktiskie uzdevumi

  1. HTML: izveido saiti no index.html uz tests_zin_parbaude_stundas_beigas.html.
  2. CSS: nomaini virsraksta krāsu un pievieno pogai hover efektu.
  3. JS: uz pogas klikšķa parādi pašreizējo datumu ar new Date().

6) Biežākās kļūdas