ebSkola

1. tēma / 1.2

1.2 HTML lapas uzbūve un pirmā saglabātā versija

Šodien: Izveido spēles noteikumu lapu un saglabā darba versiju ar Source Control.

Īsā teorija

<h1> ir galvenais virsraksts. <p> ir rindkopa.

<ul> veido sarakstu. Katru tā punktu ievieto starp <li> un </li> .

Source Control ir VS Code sadaļa darba versijām. Stage Changes sagatavo failu; Commit saglabā versiju datorā. 

<ul>
  <li>Savāc piecas zvaigznes.</li>
  <li>Izvairies no akmeņiem.</li>
</ul>

Galvenie HTML tagi

Izmanto šo pārskatu kā atgādni. Šodienas darbam īpaši vajadzīgi virsraksti, rindkopas un saraksti.

Vairumam elementu ir sākuma un beigu tags: <p>Teksts</p> . Tagiem meta , link , img , input , br un hr beigu taga nav. <!DOCTYPE html> ir dokumenta tipa norāde.

Dokumenta uzbūve
Tags Ko tas dara?
<!DOCTYPE html> Pasaka pārlūkam, ka šis ir HTML dokuments.
<html lang="lv"> Ietver visu dokumentu; lang norāda lapas valodu.
<head> Glabā lapas iestatījumus un cilnes nosaukumu.
<meta charset="UTF-8"> Nodrošina pareizu latviešu burtu parādīšanu.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Pielāgo lapas platumu ierīces ekrānam.
<title> Teksts pārlūka cilnē.
<body> Satur lapā redzamo tekstu, attēlus un pogas.
Virsraksti un teksts
Tags Ko tas dara?
<h1> … <h6> Virsrakstu līmeņi: h1 ir galvenais, h2 ir sadaļas virsraksts, h3 ir apakšsadaļa.
<p> Atsevišķa teksta rindkopa.
<strong> Svarīgs teksts; parasti redzams treknrakstā.
<em> Uzsvars tekstā; parasti redzams slīprakstā.
<b>, <i> Trekna vai slīpa teksta izcelšana.
<br> Pārceļ tekstu jaunā rindā.
<hr> Atdala satura daļas ar līniju.
<span> Iezīmē īsu teksta daļu, piemēram, tās krāsas maiņai.
<code>, <pre> code apzīmē kodu; pre saglabā tā atstarpes un rindu dalījumu.
<!-- Piezīme --> Komentārs kodā; pārlūka lapā nav redzams.
Saraksti un lapas daļas
Tags Ko tas dara?
<ul>, <ol>, <li> ul ir saraksts ar punktiem; ol — ar numuriem; li — viens saraksta punkts.
<header> Lapas vai sadaļas ievaddaļa.
<nav> Navigācijas saišu grupa.
<main> Lapas galvenais saturs.
<section> Satura sadaļa, parasti ar savu virsrakstu.
<article> Patstāvīgs satura gabals, piemēram, ziņa vai spēles apraksts.
<aside> Papildu informācija blakus galvenajam saturam.
<footer> Lapas vai sadaļas noslēguma informācija.
<div> Grupē elementus, lai tiem kopā mainītu izskatu vai izvietojumu.
Saites, attēli un skaņa
Tags Ko tas dara?
<a href="12.html"> Saite; href norāda, ko atvērt.
<img src="varonis.png" alt="Spēles varonis"> Attēls; src ir faila adrese, alt — īss attēla apraksts.
<figure>, <figcaption> Attēla vai cita piemēra grupa un tā paraksts.
<audio controls src="skana.wav"> Skaņa ar atskaņošanas pogām.
<video controls src="spele.mp4"> Video ar atskaņošanas pogām.
Tabulas un ievade
Tags Ko tas dara?
<table>, <caption> Tabula un tās nosaukums.
<tr>, <th>, <td> tr ir tabulas rinda; th — virsraksta šūna; td — datu šūna.
<thead>, <tbody> Tabulas virsrakstu un datu rindu grupas.
<button> Poga. Spēles darbību tai vēlāk pievieno ar JavaScript.
<form> Ievades lauku un to nosūtīšanas pogas grupa.
<label for="vards"> Lauka nosaukums; for norāda ievades lauka id.
<input id="vards"> Vienas rindas ievades lauks. type="number" izmanto skaitļa ievadei.
<textarea> Vairāku rindu ievades lauks.
<select>, <option> Izvēlne un viena tās izvēle.
Noformējums un atverams saturs
Tags Ko tas dara?
<style> Vieta CSS noteikumiem, kas nosaka lapas izskatu.
<link rel="stylesheet" href="style.css"> Pievieno atsevišķu CSS failu.
<script> Vieta JavaScript kodam, kas veic darbības.
<details>, <summary> Atverams satura bloks un tā klikšķināmais virsraksts.

Papildu norādes tagā: id piešķir elementam unikālu nosaukumu; class apvieno vairākus elementus vienā noformējuma grupā. href un src norāda adresi, bet alt — attēla aprakstu. 

<h2>Spēles noteikumi</h2>
<p><strong>Mērķis:</strong> savāc piecas zvaigznes.</p>
<ul>
  <li>Vadi spēlētāju ar bultiņām.</li>
  <li>Izvairies no akmeņiem.</li>
</ul>

Sākuma kods un darba vieta

Vide: mācību lapa → VS Code

  1. VS Code ar File → Open Folder atver Desktop/datorika9-tema1 . Ja mapes nav, izveido to darbvirsmā.
  2. Šajā mācību lapā nospied Kopēt sākuma kodu .
  3. VS Code nospied Ctrl+N un ielīmē kodu ar Ctrl+V .
  4. Saglabā ar Ctrl+Shift+S tēmas mapē kā 12.html .
Lejupielādēt 12.html

Atvērt pilno sākuma kodu 
<!DOCTYPE html>
<html lang="lv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mana spēle</title>
<style>
body { font-family: Arial, sans-serif; max-width: 680px; margin: 24px auto; padding: 16px; line-height: 1.6; }
button, input { font: inherit; padding: 10px; margin: 4px; }
button { cursor: pointer; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

</style>
</head>
<body>
<header>
  <h1>Zvaigžņu mednieks</h1>
</header>
<main>
  <p>Savāc zvaigznes.</p>
  <ul>
    <li>Spied uz zvaigznes.</li>
  </ul>
</main>
<footer>
  <p>Spēle datorikas stundai.</p>
</footer>
</body>
</html>

1. uzdevums

Pielāgo nosaukumu

Vide: VS Code

  1. Atver sākuma kodu failā 12.html .
  2. Nomaini tekstu starp <h1> un </h1> .
  3. Arī <title> rindā ieraksti to pašu nosaukumu.

Gatavs, kad: Kodā ir divi vienādi spēles nosaukumi.

2. uzdevums

Pievieno noteikumu sarakstu

Vide: VS Code

  1. Atrodi <ul> bloku.
  2. Pievieno vēl divus <li> punktus: kā iegūt punktus un kad spēle beidzas.
  3. Rindkopā virs saraksta vienā teikumā pasaki spēles mērķi.

Gatavs, kad: Lapā ir mērķis un trīs noteikumi.

3. uzdevums

Pārbaudi un saglabā versiju

Vide: Pārlūks → VS Code / Source Control

  1. Saglabā un atver 12.html pārlūkā. Pārbaudi virsrakstu un visus trīs saraksta punktus.
  2. VS Code atver Source Control ar Ctrl+Shift+G . Spied Initialize Repository (Sākt versiju saglabāšanu), ja poga ir redzama.
  3. Pie Changes (Izmaiņas) nospied + . Ziņas laukā ieraksti Pievienoti spēles noteikumi .
  4. Spied Commit (Saglabāt versiju). Ja prasa user.name vai user.email , skolotājs palīdz tos iestatīt.

Gatavs, kad: Noteikumu lapa darbojas, un tās versija ir saglabāta datorā.

Iesniedz 3. uzdevuma rezultātu

Iesniedz pabeigto 12.html skolotāja norādītajā vietā.

Stunda ir ieskaitīta, ja 3. uzdevuma rezultāts atbilst visiem šiem punktiem:

  • Pārlūkā un cilnes nosaukumā ir paša izvēlētais spēles nosaukums.
  • Lapā ir mērķis un trīs salasāmi noteikumi.
  • Darba versija ir saglabāta ar Commit.

1. un 2. uzdevums sagatavo šo rezultātu. Papildu uzdevums nav vajadzīgs ieskaitei.

Papildu uzdevums: Pievieno otru sadaļu

Sāc, kad 3. uzdevums ir gatavs un iesniegts. Ja vēlies paturēt obligāto versiju, saglabā kopiju ar citu nosaukumu.

  1. Zem saraksta izveido <h2>Vadība</h2> .
  2. Zem tās pievieno rindkopu ar vadības aprakstu.
Ja kaut kas neizdodas

Palīdzība Git, kontam un darba atvēršanai

Skolotājam: sasniedzamo rezultātu saistība

Šajā nodarbībā vingrina šādu rezultātu daļas no 9. klases saraksta . Piesaiste pati par sevi nenozīmē visa rezultāta apguvi.

SR 2.3.3 SR 2.6.1

Kursa nosacījumi un satura pārklājums