ebSkola

2. tēma / 2.1

2.1 Maini lapas krāsas un tekstu

Šodien: Noformē savas spēles lapu ar labi salasāmu tekstu un izceltu pogu.

Īsā teorija

CSS nosaka lapas izskatu. Šajā kursā CSS rakstām HTML faila <style> daļā.

color ir teksta krāsa; background-color ir fona krāsa.

Gaišam fonam izvēlies tumšu tekstu. Tumšam fonam izvēlies gaišu tekstu. 

body { background-color: #f1f5f9; color: #17212b; }
h1 { color: #245b91; }

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ā 21.html .

Jauna tēma: izmanto atsevišķu mapi un GitHub projektu datorika9-tema2 . Saglabājot pirmo darbu, izpildi Source Control atgādni zem 3. uzdevuma. Iepriekšējās tēmas mapi paturi.

Lejupielādēt 21.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; }
body { background-color: #ffffff; color: #222222; }
h1 { color: #245b91; }
.noteikumi { background-color: #eeeeee; padding: 12px; }
button { background-color: #245b91; color: #ffffff; border: 0; }
</style>
</head>
<body>
<h1>Mana spēle</h1>
<section class="noteikumi">
  <h2>Noteikumi</h2>
  <p>Savāc piecas zvaigznes.</p>
</section>
<button>Sākt spēli</button>
</body>
</html>

1. uzdevums

Maini fonu un virsrakstu

Vide: VS Code

  1. Sāc ar 21.html . Nomaini spēles nosaukumu.
  2. Atrodi pēdējo body CSS rindu un nomaini fonu uz #f1f5f9 .
  3. Atrodi h1 CSS rindu un izvēlies virsraksta krāsu.

Gatavs, kad: Kodā ir tava spēles nosaukums un jaunās krāsas.

2. uzdevums

Izcel noteikumus

Vide: VS Code

  1. Atrodi CSS rindu .noteikumi . Izvēlies tās fona krāsu.
  2. Pievieno tai border-radius: 12px; , lai noapaļotu stūrus.
  3. HTML daļā papildini noteikumus ar vadības teikumu.

Gatavs, kad: Noteikumi ir atsevišķā, noapaļotā blokā.

3. uzdevums

Pabeidz pogu un pārbaudi lasāmību

Vide: VS Code → pārlūks

  1. Nomaini pogas fonu un teksta krāsu. Izmanto skaidri atšķirīgas krāsas.
  2. Atver lapu pārlūkā. Pārbaudi, vai var izlasīt virsrakstu, noteikumus un pogas tekstu.
  3. Palūdz klasesbiedram atrast sākšanas pogu. Ja tā nav pamanāma, izlabo krāsas.
  4. Saglabā un nosūti darbu uz GitHub.

Gatavs, kad: Poga un viss teksts ir skaidri salasāmi.

Iesniedz 3. uzdevuma rezultātu

Iesniedz pabeigto 21.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:

  • Lapā ir savs nosaukums un mainītas krāsas.
  • Noteikumu blokam ir fons un noapaļoti stūri.
  • Pogas teksts un noteikumi skaidri atšķiras no to fona.

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.1 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: Pogas izskats zem peles

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

  1. CSS beigās pievieno button:hover { background-color: #163b61; } .
  2. Pārbaudi pogu pārlūkā ar peli.
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 1.1.1 SR 2.6.1

Kursa nosacījumi un satura pārklājums