ebSkola

2. tēma / 2.3

2.3 Sagatavo un pievieno spēles attēlu

Šodien: Uzzīmē nelielu spēles varoni un ievieto to HTML lapā.

Īsā teorija

PNG ir attēla faila formāts. Nelielam spēles varonim pietiek ar 128 × 128 pikseļiem.

src norāda attēla failu. alt īsi pasaka, kas attēlots.

Šajā darbā vajag divus failus: HTML lapu un paša zīmēto PNG attēlu. 

<img src="varonis.png" alt="Zils kosmosa robots" width="128">

Sākuma kods un darba vieta

Sāc pēc 1. uzdevuma soļiem. Darba mape ir Desktop/datorika9-tema2 ; šīs nodarbības fails ir 23.html .

Lejupielādēt 23.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>
<h1>Mana spēles varonis</h1>
<p>Attēlu pievienosi šajā nodarbībā.</p>
<!-- ŠEIT ATTĒLS -->
</body>
</html>

1. uzdevums

Uzzīmē varoni

Vide: Windows / Paint

  1. Atver Start , ieraksti Paint un atver lietotni.
  2. Ar formām un otu uzzīmē vienkāršu varoni no trim vai četrām formām.
  3. Izvēlies Resize (Mainīt izmēru) un Pixels (Pikseļi). Izslēdz malu attiecības saglabāšanu un iestati 128 × 128.
  4. Ar File → Save as → PNG picture saglabā varonis.png savā Desktop/datorika9-tema2 mapē.

Gatavs, kad: Tēmas mapē ir tavs varonis.png.

2. uzdevums

Pievieno attēlu lapai

Vide: Paint → VS Code

  1. Atver sākuma kodu failā 23.html tajā pašā mapē.
  2. Rindas <!-- ŠEIT ATTĒLS --> vietā ievieto teorijas <img> piemēru.
  3. Nomaini alt tekstu, lai tas apraksta tavu varoni. Nomaini arī lapas virsrakstu.

Gatavs, kad: HTML kodā ir saite uz varonis.png un atbilstošs alt teksts.

3. uzdevums

Pabeidz varoņa lapu

Vide: VS Code → pārlūks

  1. Zem attēla pievieno rindkopu, kas pasaka, ko varonis dara spēlē.
  2. Saglabā un atver 23.html pārlūkā. Pārliecinies, ka redzi savu zīmējumu.
  3. Ja attēla nav, pārbaudi, vai 23.html un varonis.png ir vienā mapē un nosaukumi sakrīt.
  4. Uz GitHub nosūti abus failus. Iesniedz HTML failu kopā ar PNG attēlu.

Gatavs, kad: Pārlūkā ir tavs varonis, tā nosaukums un apraksts.

Iesniedz 3. uzdevuma rezultātu

Iesniedz pabeigto 23.html un varonis.png 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:

  • varonis.png ir paša zīmējums 128 × 128 px izmērā.
  • 23.html parāda šo attēlu un satur atbilstošu alt tekstu.
  • Iesniegts HTML un PNG; abi ir arī GitHub projektā.

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.3 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: Izveido otru varoni

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

  1. Paint izveido citu zīmējumu un saglabā kā draugs.png .
  2. Lapā pievieno otru <img> un savu alt tekstu.
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.4.5 SR 2.4.7 SR 2.4.10

Kursa nosacījumi un satura pārklājums