ebSkola

2. tēma / 2.2

2.2 Sakārto atstarpes un spēles laukumu

Šodien: Izveido noteikta izmēra spēles laukumu ar atstarpēm un rāmi.

Īsā teorija

width nosaka platumu, height — augstumu. px ir izmērs pikseļos.

padding ir atstarpe kastes iekšpusē. margin ir atstarpe ārpus tās.

border ir rāmis. box-sizing: border-box iekļauj rāmi un iekšējās atstarpes norādītajā platumā. 

.laukums {
  width: 360px;
  padding: 20px;
  margin: 20px auto;
  box-sizing: border-box;
}

Sākuma kods un darba vieta

Vide: mācību lapa → VS Code

  1. VS Code ar File → Open Folder atver Desktop/datorika9-tema2 . 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ā 22.html .
Lejupielādēt 22.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; }
.laukums {
  width: 280px;
  height: 200px;
  padding: 10px;
  border: 3px solid #245b91;
  background-color: #e7f2fc;
  box-sizing: border-box;
}
</style>
</head>
<body>
<h1>Spēles laukums</h1>
<div class="laukums">
  <p>Šeit būs spēle.</p>
</div>
<button>Sākt</button>
<button>Noteikumi</button>
</body>
</html>

1. uzdevums

Izmaini laukuma izmēru

Vide: VS Code

  1. Sāc ar 22.html .
  2. CSS blokā .laukums iestati width: 360px; un height: 240px; .
  3. Nomaini laukuma tekstu atbilstoši savai spēlei.

Gatavs, kad: Laukuma izmēri kodā ir 360 × 240 px.

2. uzdevums

Pievieno atstarpes

Vide: VS Code

  1. Iestati padding: 20px; .
  2. Tajā pašā CSS blokā pievieno margin: 20px auto; .
  3. Izvēlies citu rāmja krāsu; saglabā box-sizing: border-box; .

Gatavs, kad: Laukumam ir atstarpes, rāmis un centrēts novietojums.

3. uzdevums

Pielāgo laukumu šauram logam

Vide: VS Code → pārlūks

  1. CSS blokā .laukums pievieno max-width: 100%; .
  2. Atver lapu pārlūkā un samazini loga platumu.
  3. Pārbaudi, ka laukuma teksts nav pie paša rāmja un lapa nav jāritina sāniski. Ja vajag, saīsini tekstu.
  4. Saglabā un nosūti darbu uz GitHub.

Gatavs, kad: Laukums ietilpst arī šaurākā logā.

Iesniedz 3. uzdevuma rezultātu

Iesniedz pabeigto 22.html skolotāja norādītajā vietā. Šo pašu versiju saglabā arī GitHub.

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

  • Laukumam ir norādītie izmēri un max-width: 100%.
  • Ir 20 px iekšējā atstarpe, rāmis un ārējā atstarpe.
  • Šaurā logā laukums ietilpst lapā.

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

Saglabā un nosūti uz GitHub — pogu atgādne

Vide: VS Code / Source Control → GitHub pārlūkā

  1. Ar File → Save All saglabā failus. Atver Source Control ar Ctrl+Shift+G .
  2. Pie Changes nospied + (Stage All Changes). Pārbaudi, ka vajadzīgie faili pārvietojas uz Staged Changes .
  3. Ziņas laukā ieraksti īsu izmaiņu, piemēram, Pabeigts 2.2 darbs . Spied Commit .
  4. Ja šī tēmas mape vēl nav GitHub, spied Publish to GitHub un izveido publisku projektu datorika9-tema2 . Jau publicētam projektam spied Sync Changes . Ja pogas nav, atver … → Push .
  5. Pārlūkā atver savu GitHub projektu un pārbaudi faila pēdējās izmaiņas.

Ja Source Control rāda Initialize Repository , vispirms nospied to. Ja parādās kļūda vai sapludināšanas pieprasījums, izmanto palīdzību un palūdz skolotāja atbalstu.

Papildu uzdevums: Saliec pogas rindā

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

  1. Abas pogas ievieto <div class="pogas"> blokā.
  2. CSS pievieno .pogas { display: flex; gap: 12px; flex-wrap: wrap; } .
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.6.1

Kursa nosacījumi un satura pārklājums